:root{--bg1: #1d1118;--bg2: #522b22;--glow: #d97f5f;--accent: #ffc9a3;--paper: #faf6ee;--ink: #2c2118;--font-display: "Fraunces", Georgia, serif;--font-hand: "Caveat", cursive;--font-body: "Karla", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-body);color:var(--paper);overflow:hidden;background:#14090d}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.app{position:relative;height:100dvh;display:flex;flex-direction:column;align-items:center;overflow:hidden}.backdrop{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.backdrop-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 110% at 50% 88%,var(--bg2) 0%,var(--bg1) 62%,#0a0608 100%);transition:background 2.4s ease}.backdrop-glow{position:absolute;width:46vmax;height:46vmax;border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,transparent 65%);opacity:.16;filter:blur(40px);transition:background 2.4s ease}.backdrop-glow-a{top:-16vmax;left:-12vmax;animation:glow-float 26s ease-in-out infinite alternate}.backdrop-glow-b{bottom:-18vmax;right:-14vmax;animation:glow-float 32s ease-in-out infinite alternate-reverse}@keyframes glow-float{0%{transform:translate(0) scale(1)}to{transform:translate(6vmax,4vmax) scale(1.15)}}.doodle{position:absolute;color:var(--accent);opacity:.18;transition:color 2.4s ease}.doodle-tl{top:3vmin;left:3vmin;width:clamp(70px,11vmin,130px)}.doodle-br{bottom:12vmin;right:3vmin;width:clamp(80px,13vmin,150px)}.season-word{position:absolute;right:-1.5vmin;top:50%;transform:rotate(90deg) translate(-50%);transform-origin:left top;font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(2rem,6vmin,4.5rem);letter-spacing:.35em;color:var(--accent);opacity:.1;text-transform:lowercase;transition:color 2.4s ease;white-space:nowrap}.sparks{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.spark{position:absolute;bottom:-4vh;border-radius:50%;background:var(--accent);opacity:0;animation:spark-rise linear infinite;transition:background 2.4s ease}.spark-heart{border-radius:0;background:transparent;width:10px!important;height:10px!important}.spark-heart:before{content:"♥";position:absolute;font-size:11px;color:var(--accent);transition:color 2.4s ease}@keyframes spark-rise{0%{transform:translate(0) rotate(0);opacity:0}8%{opacity:.5}85%{opacity:.35}to{transform:translate(var(--drift, 0px),-108vh) rotate(220deg);opacity:0}}.grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(95% 85% at 50% 45%,transparent 55%,rgba(5,2,4,.55) 100%)}.header{position:relative;z-index:2;text-align:center;padding-top:clamp(14px,3vh,34px)}.header-eyebrow{font-size:clamp(.6rem,1.4vmin,.78rem);letter-spacing:.55em;text-transform:uppercase;opacity:.6;margin-left:.55em}.header-title{font-family:var(--font-display);font-weight:380;font-style:italic;font-size:clamp(1.9rem,5.2vmin,3.4rem);line-height:1.05;letter-spacing:.02em;background:linear-gradient(110deg,var(--paper) 35%,var(--accent) 75%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background 2.4s ease}.header-counter{margin-top:.35rem;font-size:clamp(.62rem,1.5vmin,.8rem);letter-spacing:.28em;text-transform:uppercase;opacity:.55}.header-counter strong{color:var(--accent);font-weight:700;transition:color 2.4s ease}.timeline{position:relative;z-index:2;display:flex;gap:clamp(8px,1.6vw,22px);align-items:flex-start;margin-top:clamp(8px,1.8vh,18px)}.timeline-step{display:flex;flex-direction:column;align-items:center;gap:7px;width:clamp(18px,3vw,44px)}.timeline-dot{width:7px;height:7px;border-radius:50%;background:#faf6ee38;transition:background .6s ease,box-shadow .6s ease}.timeline-dot.is-passed{background:#faf6ee8c}.timeline-dot.is-active{background:var(--accent);box-shadow:0 0 12px var(--accent)}.timeline-label{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(-3px);transition:opacity .5s ease,transform .5s ease;white-space:nowrap}.timeline-label.is-active{opacity:.85;transform:translateY(0)}.date-display{position:relative;z-index:2;height:clamp(2.6rem,7vmin,4.4rem);display:flex;align-items:center;justify-content:center;margin-top:clamp(2px,1vh,12px)}.date-text{font-family:var(--font-hand);font-size:clamp(1.7rem,4.6vmin,3rem);font-weight:600;color:var(--accent);text-shadow:0 2px 18px rgba(0,0,0,.45);transition:color 2.4s ease}.date-undated{opacity:.8;font-style:italic}.stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0;padding-bottom:clamp(80px,14vh,130px)}.stack{position:relative;width:min(78vw,42vh,430px);aspect-ratio:4 / 5.1}.card{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--paper);border-radius:6px;padding:4.2% 4.2% 0;box-shadow:0 2px 6px #00000059,0 18px 48px #00000080;display:flex;flex-direction:column;cursor:pointer}.card-photo{width:100%;flex:1;min-height:0;overflow:hidden;border-radius:2px;background:#ddd2c2}.card-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.04) contrast(1.02)}.card-caption{height:clamp(44px,9.5%,64px);display:flex;align-items:center;justify-content:space-between;padding:0 2px;flex-shrink:0}.card-date{font-family:var(--font-hand);font-size:clamp(1.05rem,2.6vmin,1.5rem);font-weight:600;color:var(--ink);transform:rotate(-1.2deg)}.card-number{font-family:var(--font-hand);font-size:clamp(.85rem,2vmin,1.1rem);color:#2c211873;transform:rotate(1.5deg)}.tape{position:absolute;width:26%;height:8.5%;max-height:34px;opacity:.82;box-shadow:0 1px 3px #0000002e;z-index:3;--tape-notch: polygon( 2% 0, 98% 0, 100% 18%, 97% 38%, 100% 60%, 98% 100%, 2% 100%, 0 80%, 3% 55%, 0 30% );clip-path:var(--tape-notch)}.tape-top{top:-3.5%}.tape-corner-left{top:-2.5%;left:-7%;transform:rotate(-42deg)}.tape-corner-right{top:-2.5%;right:-7%;transform:rotate(42deg)}.card-sticker{position:absolute;bottom:6%;right:-3.5%;width:clamp(26px,6.5%,38px);height:auto;transform:rotate(12deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}.stack-overlay{position:absolute;left:50%;bottom:13%;transform:translate(-50%);z-index:12;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 18px 14px;border-radius:20px;background:#0e090b6b;border:1px solid rgba(250,246,238,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s ease}.stack-overlay.is-visible{opacity:1;pointer-events:auto}.stack-progress{width:min(40vw,180px);height:3px;border-radius:99px;background:#faf6ee2e;overflow:hidden}.stack-progress-fill{height:100%;width:100%;border-radius:99px;background:var(--accent);transform-origin:left center;transition:background 2.4s ease}.stack-progress-paused{transform:scaleX(.35);opacity:.4}.controls{display:flex;align-items:center;gap:16px}.control-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--paper);background:#faf6ee1a;border:1px solid rgba(250,246,238,.18);transition:background .25s ease,transform .15s ease}.control-btn:hover{background:#faf6ee38;transform:translateY(-1px)}.control-btn-main{width:46px;height:46px;color:var(--ink);background:#faf6eed9;border:none}.control-btn-main:hover{background:var(--paper)}.lyrics{position:fixed;left:50%;bottom:clamp(78px,13vh,110px);transform:translate(-50%);z-index:4;width:min(92vw,760px);text-align:center;pointer-events:none}.lyrics-line{font-family:var(--font-hand);font-size:clamp(1.25rem,3.4vmin,2.1rem);font-weight:500;color:var(--paper);text-shadow:0 2px 14px rgba(0,0,0,.65),0 0 36px rgba(0,0,0,.4)}.lyrics-translation{margin-top:2px;font-family:var(--font-body);font-style:italic;font-size:clamp(.78rem,1.9vmin,1.05rem);letter-spacing:.02em;color:var(--accent);opacity:.85;text-shadow:0 2px 12px rgba(0,0,0,.7);transition:color 2.4s ease}.player{position:fixed;left:50%;bottom:clamp(12px,2.6vh,24px);transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:14px;padding:9px 18px 9px 10px;border-radius:99px;background:#100a0c8c;border:1px solid rgba(250,246,238,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 34px #00000073;max-width:94vw}.player-empty{padding:10px 20px}.player-hint{font-size:.78rem;opacity:.75;letter-spacing:.04em}.player-hint code{font-size:.74rem;background:#faf6ee1f;padding:1px 6px;border-radius:4px}.vinyl{position:relative;width:38px;height:38px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,#2a2a2a 0 28%,transparent 28%),repeating-radial-gradient(circle at 50% 50%,#111 0,#111 2px,#1c1c1c 2px,#1c1c1c 4px);display:grid;place-items:center}.vinyl-label{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #0d0d0d;transition:background 2.4s ease}.is-spinning{animation:vinyl-spin 2.4s linear infinite}@keyframes vinyl-spin{to{transform:rotate(360deg)}}.player-meta{display:flex;flex-direction:column;min-width:0;max-width:200px}.player-title{font-size:.84rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{font-size:.7rem;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-controls{display:flex;align-items:center;gap:6px}.player-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--paper);opacity:.85;transition:opacity .2s ease,background .2s ease}.player-btn:hover{opacity:1;background:#faf6ee1f}.player-btn-main{width:36px;height:36px;color:var(--ink);background:var(--accent);opacity:1;transition:background 2.4s ease}.player-count{font-size:.68rem;opacity:.55;letter-spacing:.08em}.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(110% 100% at 50% 90%,#522b22d9,#14090df7 65%),#14090d;text-align:center;padding:24px}.intro-fan{position:relative;width:clamp(150px,24vmin,220px);aspect-ratio:4 / 4.9;margin-bottom:clamp(18px,4vh,40px)}.intro-polaroid{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--paper);border-radius:5px;padding:5% 5% 16%;box-shadow:0 14px 40px #0000008c;transform-origin:50% 115%}.intro-polaroid img{width:100%;height:100%;object-fit:cover;border-radius:2px}.intro-eyebrow{font-size:clamp(.62rem,1.5vmin,.8rem);letter-spacing:.5em;text-transform:uppercase;opacity:.65;margin-left:.5em}.intro-title{font-family:var(--font-display);font-weight:340;font-size:clamp(2.2rem,7vmin,4.6rem);line-height:1.08;margin:6px 0 2px}.intro-title em{font-style:italic;background:linear-gradient(110deg,#ffc9a3 20%,#f2aebc 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.intro-sub{font-family:var(--font-hand);font-size:clamp(1.2rem,3vmin,1.7rem);color:#ffc9a3;opacity:.9}.intro-button{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(20px,4.5vh,44px);padding:14px 34px;border-radius:99px;font-size:.95rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2c1118;background:linear-gradient(115deg,#ffc9a3,#f2aebc);box-shadow:0 12px 38px #f2aebc4d}.intro-button svg{animation:heartbeat 1.6s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:scale(1)}12%{transform:scale(1.25)}24%{transform:scale(1)}}@media (max-width: 640px){.timeline{max-width:94vw;flex-wrap:nowrap;gap:7px}.timeline-label{display:none}.timeline-label.is-active{display:block;position:absolute;margin-top:14px}.timeline-step{position:relative;width:14px}.stack{width:min(80vw,42vh)}.season-word{display:none}.player{gap:10px}.player-meta{max-width:120px}.lyrics{bottom:clamp(70px,13vh,95px)}}@media (prefers-reduced-motion: reduce){.spark,.backdrop-glow,.is-spinning,.intro-button svg{animation:none!important}}