:root{--c-gold:#cba37e;--c-white:#fff;--c-off-white:#f5f4f0;--c-muted:#ffffff80;--glass-bg:#19161459;--glass-border:#ffffff26;--glass-blur:blur(16px);--f-serif:"Playfair Display", serif;--f-sans:"Inter", sans-serif;--f-mono:"Space Mono", monospace;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:4rem;--spacing-xl:8rem}*{box-sizing:border-box}html,body,#root{min-height:100%}html{scroll-behavior:smooth}body{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0a0a;margin:0;overflow-x:hidden}button,input,textarea,select{font:inherit}a{color:inherit}.memory-album{min-height:100vh;color:var(--c-white);font-family:var(--f-sans);position:relative}.ambient-bg,.ambient-overlay{width:100vw;height:100vh;position:fixed;inset:0}.ambient-bg{z-index:-2;background-image:url(https://images.unsplash.com/photo-1603048297172-c92544798d5e?q=80&w=2670&auto=format&fit=crop);background-position:50%;background-size:cover}.ambient-overlay{z-index:-1;pointer-events:none;background:linear-gradient(#0f0c0acc 0%,#140f0c99 50%,#0a0806f2 100%)}.container{width:min(1440px,100%);padding-inline:var(--spacing-md);margin:0 auto}.gold-text{color:var(--c-gold)}.serif-italic{font-family:var(--f-serif);font-style:italic}.hero-section{flex-direction:column;align-items:stretch;min-height:100svh;display:flex}.hero-section>.container{flex-direction:column;flex:1;display:flex}.hero-grid{gap:var(--spacing-xl);flex:1;grid-template-columns:minmax(0,1fr) minmax(420px,1fr);align-content:center;align-items:center;width:100%;display:grid}.hero-content{max-width:600px}.hero-subtitle{min-height:.75rem;margin-bottom:var(--spacing-md);display:block}.hero-link{color:#ffffff80;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;background:0 0;border:none;margin-bottom:1.5rem;padding:0;font-size:.75rem;text-decoration:none;transition:color .3s;display:inline-block}.hero-link:hover{color:var(--c-gold)}.hero-title{margin:0 0 var(--spacing-md);font-family:var(--f-serif);letter-spacing:-.02em;font-size:clamp(4.2rem,8vw,6rem);font-weight:400;line-height:1.1}.hero-desc{max-width:80%;margin:0 0 var(--spacing-lg);color:var(--c-off-white);font-size:1.125rem;font-weight:300;line-height:1.6}.btn-primary{align-items:center;gap:var(--spacing-sm);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--c-white);text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:var(--glass-blur);cursor:pointer;font-size:.875rem;font-family:var(--f-sans);border-radius:30px;padding:1rem 2rem;text-decoration:none;transition:all .3s;display:inline-flex}.btn-primary:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff4d}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.vinyl-container{aspect-ratio:1;perspective:1000px;width:min(500px,100%);margin:0 auto;position:relative}.vinyl{background:#050505;border-radius:50%;justify-content:center;align-items:center;animation:10s linear infinite spin;display:flex;position:absolute;inset:0;box-shadow:0 0 0 10px #ffffff05,inset 0 0 20px #000,0 30px 60px #000c}.vinyl:before{content:"";background:repeating-radial-gradient(#111 0,#181818 2px,#0a0a0a 4px,#111 5px);border-radius:50%;position:absolute;inset:2%;-webkit-mask-image:radial-gradient(circle,#0000 30%,#000 31%);mask-image:radial-gradient(circle,#0000 30%,#000 31%)}.vinyl-highlight{z-index:2;pointer-events:none;background:conic-gradient(#0000 0deg,#ffffff1a 45deg,#0000 90deg 180deg,#ffffff1a 225deg,#0000 270deg);border-radius:50%;position:absolute;inset:0}.vinyl-label{z-index:3;background:var(--c-gold);color:#222;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:32%;height:32%;display:flex;position:relative;box-shadow:inset 0 0 10px #00000080}.vinyl-label:after{content:"";background:#0a0a0a;border-radius:50%;width:12px;height:12px;position:absolute}.label-text-top{font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase;font-size:.5rem;position:absolute;top:15%}.label-text-center{font-family:var(--f-serif);text-align:center;font-size:1.2rem;font-weight:600;line-height:1}.divider{height:1px;margin:var(--spacing-lg) 0;background:linear-gradient(90deg, transparent, var(--c-gold), transparent);opacity:.3}.howto-section{padding-block:var(--spacing-lg)}.howto-header{max-width:720px;margin:0 auto var(--spacing-lg);text-align:center}.howto-eyebrow{color:var(--c-gold);font-family:var(--f-mono);letter-spacing:.25em;text-transform:uppercase;margin-bottom:.75rem;font-size:.7rem;display:inline-block}.howto-title-main{font-family:var(--f-serif);letter-spacing:-.01em;color:var(--c-off-white);margin:0;font-size:clamp(2rem,4vw,2.75rem);font-weight:400;line-height:1.15}.howto-grid{gap:var(--spacing-md);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.howto-card{padding:var(--spacing-md);border:1px solid var(--glass-border);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border-radius:20px;flex-direction:column;align-items:flex-start;gap:.75rem;transition:border-color .3s,transform .3s;display:flex}.howto-card:hover{border-color:#cba37e66;transform:translateY(-2px)}.howto-num{font-family:var(--f-mono);letter-spacing:.2em;color:var(--c-muted);font-size:.75rem}.howto-icon{width:56px;height:56px;color:var(--c-gold);background:#cba37e0f;border:1px solid #cba37e59;border-radius:50%;justify-content:center;align-items:center;margin-top:.25rem;display:inline-flex}.howto-card-title{font-family:var(--f-serif);color:var(--c-white);margin:.25rem 0 0;font-size:1.35rem;font-weight:500}.howto-card-desc{color:var(--c-off-white);opacity:.75;margin:0;font-size:.95rem;line-height:1.55}.studio-section{min-height:100vh;padding-block:var(--spacing-xl)}.studio-layout{gap:var(--spacing-lg);grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);align-items:start;display:grid}.console{padding:var(--spacing-lg);border:1px solid var(--glass-border);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border-radius:24px}.console-header{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--glass-border)}.console-title{font-family:var(--f-serif);color:var(--c-gold);margin:0;font-size:2rem;font-weight:400}.console-subtitle{color:var(--c-muted);font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin:.5rem 0 0;font-size:.7rem}.track-list{gap:var(--spacing-sm);grid-template-columns:1fr;display:grid}.input-group{flex-direction:column;gap:.5rem;display:flex}.track-num-label{font-family:var(--f-mono);color:var(--c-muted);padding-left:1rem;font-size:.7rem}.input-row{gap:.5rem;display:flex}.input-memory{flex:2}.input-tag{flex:1}.input-row input[type=text]{width:100%;min-width:0;color:var(--c-off-white);background:#0000008c;border:1px solid #ffffff40;border-radius:12px;outline:none;padding:14px;font-size:.95rem;font-weight:400;transition:border-color .3s,background .3s}.input-row input[type=text]:focus{border-color:var(--c-gold);background:#000000b3}.input-row input[type=text]::placeholder{color:#ffffff8c;font-weight:300}.sleeve-container{top:var(--spacing-lg);position:sticky}.sleeve{aspect-ratio:1;width:100%;padding:var(--spacing-md);background:#1a1816;border-radius:2px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0009,inset 0 0 0 1px #ffffff0d,inset 0 0 100px #00000080}.sleeve:before{content:"";z-index:1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");position:absolute;inset:0}.sleeve-inner{z-index:2;flex-direction:column;height:100%;display:flex;position:relative}.sleeve-header{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-xs);border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.sleeve-title{font-family:var(--f-serif);color:var(--c-gold);text-transform:uppercase;letter-spacing:.1em;margin:0;font-size:1.5rem}.sleeve-stereo{font-family:var(--f-mono);letter-spacing:.1em;border:1px solid #ffffff4d;border-radius:2px;padding:2px 6px;font-size:.6rem}.sleeve-sides-container{gap:var(--spacing-md);flex:1;display:flex}.sleeve-side{flex:1;min-width:0}.side-label{margin-bottom:var(--spacing-sm);color:var(--c-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:500}.output-track{border-bottom:1px dotted #ffffff1a;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.8rem;padding-bottom:2px;display:flex}.out-num{width:1.5rem;font-family:var(--f-mono);color:var(--c-muted);font-size:.6rem}.out-title{min-width:0;color:var(--c-off-white);white-space:nowrap;text-overflow:ellipsis;flex:1;padding-right:1rem;font-size:.85rem;overflow:hidden}.out-tag{color:var(--c-gold);font-family:var(--f-serif);font-size:.75rem;font-style:italic}.out-title.empty,.out-tag.empty{color:#ffffff26}.sleeve-footer{padding-top:var(--spacing-sm);border-top:1px solid #ffffff1a;justify-content:space-between;align-items:flex-end;gap:1rem;margin-top:auto;display:flex}.barcode{opacity:.5;background:repeating-linear-gradient(90deg,#fff,#fff 2px,#0000 2px 4px,#fff 4px 5px,#0000 5px 8px);width:80px;height:30px}.copyright{color:#ffffff4d;max-width:60%;font-family:var(--f-mono);text-align:right;font-size:.5rem}@keyframes spin{to{transform:rotate(360deg)}}.send-section{margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid var(--glass-border)}.send-label{color:var(--c-muted);font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem;font-size:.7rem;display:block}.send-row{flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem;display:flex}.send-row input[type=text],.send-row input[type=email]{border:1px solid var(--glass-border);color:var(--c-white);font-size:1rem;font-family:var(--f-sans);background:#0003;border-radius:12px;outline:none;flex:200px;padding:14px 18px;transition:border-color .3s}.send-row input:focus{border-color:var(--c-gold)}.send-row input::placeholder{color:#ffffff4d;font-weight:300}.send-actions{flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1rem;display:flex}.status-msg{font-size:.85rem;font-family:var(--f-mono);letter-spacing:.05em;margin-top:1rem;line-height:1.5}.status-msg.ok{color:var(--c-gold)}.status-msg.err{color:#e57373}.progress-meter{align-items:center;gap:.75rem;margin-top:.75rem;display:flex}.progress-bar{background:#ffffff14;border-radius:2px;flex:1;height:2px;overflow:hidden}.progress-bar-fill{background:var(--c-gold);height:100%;transition:width .4s}.progress-text{color:var(--c-muted);font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;font-size:.65rem}.success-card{padding:var(--spacing-lg);border:1px solid var(--c-gold);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);text-align:center;border-radius:24px}.success-card h2{margin:0 0 var(--spacing-sm);font-family:var(--f-serif);color:var(--c-gold);font-size:2.5rem;font-weight:400}.success-card p{margin:0 0 var(--spacing-md);color:var(--c-off-white);font-size:1.05rem;line-height:1.6}.success-card .sub{color:var(--c-muted);font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase;font-size:.75rem}.memory-mosaic{flex-shrink:0;width:100%;padding-block:1rem 1.25rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 6% 94%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 6% 94%,#0000 100%)}.memory-mosaic-track{gap:3px;width:max-content;animation:140s linear infinite memory-scroll;display:flex}.memory-mosaic:hover .memory-mosaic-track{animation-play-state:paused}.memory-mosaic-tile{filter:grayscale()contrast(1.05)brightness(.9);opacity:.7;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:2px;flex:none;width:54px;height:54px;transition:opacity .4s,filter .4s}.memory-mosaic-tile:hover{opacity:1;filter:grayscale()contrast(1.1)brightness(1.05)}@keyframes memory-scroll{0%{transform:translate(0)}to{transform:translate(-33.3333%)}}@media (prefers-reduced-motion:reduce){.memory-mosaic-track{animation:none}}@media (max-width:640px){.memory-mosaic-tile{width:40px;height:40px}}.share-footer{padding-block:var(--spacing-lg) var(--spacing-md);margin-top:var(--spacing-lg);border-top:1px solid #ffffff0f}.share-footer .container{text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex}.share-eyebrow{color:var(--c-gold);font-family:var(--f-mono);letter-spacing:.25em;text-transform:uppercase;font-size:.7rem}.share-buttons{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.share-btn{border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--c-off-white);font-family:var(--f-sans);letter-spacing:.02em;cursor:pointer;-webkit-backdrop-filter:var(--glass-blur);border-radius:999px;align-items:center;gap:.6rem;padding:.7rem 1.2rem;font-size:.9rem;transition:border-color .3s,color .3s,transform .2s;display:inline-flex}.share-btn:hover{border-color:var(--c-gold);color:var(--c-gold);transform:translateY(-1px)}.share-status{min-height:1.2em;color:var(--c-gold);font-family:var(--f-mono);letter-spacing:.05em;opacity:0;font-size:.75rem;transition:opacity .3s}.share-status.show{opacity:1}.share-sig{color:#ffffff40;font-family:var(--f-mono);letter-spacing:.15em;text-transform:uppercase;margin-top:.5rem;font-size:.65rem}@media (max-width:1120px){:root{--spacing-lg:3rem;--spacing-xl:5rem}.hero-grid,.studio-layout{grid-template-columns:1fr}.hero-section{padding-block:5rem 3rem}.hero-content,.hero-desc{max-width:100%}.vinyl-container{width:min(440px,85vw)}.sleeve-container{position:static}}@media (max-width:720px){:root{--spacing-md:1.25rem;--spacing-lg:2rem;--spacing-xl:3.5rem}.container{padding-inline:1rem}.hero-section{min-height:auto;padding-block:2.5rem 2rem}.hero-grid{gap:1.5rem}.hero-title{margin-bottom:1rem;font-size:clamp(3rem,14vw,4rem)}.hero-desc{margin-bottom:1.5rem;font-size:1rem}.vinyl-container{order:-1;width:min(240px,60vw);margin-bottom:.5rem}.track-list{grid-template-columns:1fr}.howto-grid{grid-template-columns:1fr;gap:1rem}.howto-header{text-align:left}.sleeve{aspect-ratio:auto;min-height:0}.sleeve-sides-container{flex-direction:column}.console{padding:1.5rem}.console-header,.sleeve-header,.sleeve-footer{flex-direction:column;align-items:flex-start}.input-row{flex-direction:column}.copyright{text-align:left;max-width:100%}.success-card h2{font-size:2rem}}
