:root{
  --bg:#dfe2ea; --ink:#1b2030; --muted:#5a6175; --line:#c3c8d6;
  --card:#e8b04a; --card-ink:#231a0e; --accent:#7a3cff; --sheet:#f4f5f9;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141826; --ink:#ebe8f2; --muted:#9aa0b4; --line:#2c3247;
    --card:#e3a73e; --card-ink:#231a0e; --accent:#a98bff; --sheet:#1d2234;
  }
}
:root[data-theme="dark"]{
  --bg:#141826; --ink:#ebe8f2; --muted:#9aa0b4; --line:#2c3247;
  --card:#e3a73e; --card-ink:#231a0e; --accent:#a98bff; --sheet:#1d2234;
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none !important} /* so display:flex/inline-flex never un-hides things */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Title fonts (chosen by the mix maker) */
.mix-title{margin:0;line-height:1.02;font-weight:400;overflow-wrap:anywhere}
body[data-font="marker"] .mix-title{font-family:"Permanent Marker","Comic Sans MS",cursive}
body[data-font="fraunces"] .mix-title{font-family:"Fraunces",Georgia,serif;font-weight:600;font-style:italic;letter-spacing:-.01em}
body[data-font="syne"] .mix-title{font-family:"Syne","Arial Black",sans-serif;font-weight:800;letter-spacing:-.03em}
body[data-font="monoton"] .mix-title{font-family:"Monoton",Impact,sans-serif;letter-spacing:.02em}

/* Cover stage */
.stage{display:grid;place-items:center;padding:56px 20px 40px}
.stage[data-layout="poster"]{padding:0;min-height:0}
.art-slot{position:relative;overflow:hidden;background:#000}
.art-slot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dedication{margin:0;font-family:"Caveat",cursive;font-size:1.45rem;line-height:1.1}

/* Layout: cassette J-card */
.jcard{width:min(100%,360px);display:grid;grid-template-columns:52px 1fr;
  background:var(--card);color:var(--card-ink);border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 40px -12px rgba(10,12,30,.55),0 4px 10px rgba(10,12,30,.25);
  transform:rotate(-1.5deg)}
.spine{border-left:1.5px dashed rgba(35,26,14,.35);display:flex;
  justify-content:space-between;align-items:center;padding:14px 0;
  writing-mode:vertical-rl;transform:rotate(180deg)}
.spine .mix-title{font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:72%}
.spine-meta{font-family:"Caveat",cursive;font-size:1.1rem}
.front{padding:14px 14px 18px;display:flex;flex-direction:column;gap:12px}
.front .art-slot{aspect-ratio:1;border-radius:2px;box-shadow:0 0 0 1px rgba(35,26,14,.25)}
.front .mix-title{font-size:clamp(1.9rem,8vw,2.5rem);line-height:1.1em;
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(1.1em - 1px),rgba(35,26,14,.22) calc(1.1em - 1px) 1.1em)}

/* Layout: CD jewel case */
.jewel{position:relative;width:min(100%,400px);aspect-ratio:1.136;display:grid;grid-template-columns:30px 1fr;
  border-radius:6px;background:linear-gradient(180deg,#d9dde6,#aeb4c2);padding:6px 6px 6px 0;
  box-shadow:0 22px 50px -16px rgba(10,12,30,.6),0 3px 8px rgba(10,12,30,.25)}
.hinge{background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 2px,rgba(80,88,110,.35) 2px 5px);
  border-radius:6px 0 0 6px;margin:-6px 4px -6px 0;opacity:.9}
.booklet{position:relative;overflow:hidden;border-radius:2px}
.booklet .art-slot{position:absolute;inset:0}
.booklet-text{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0))}
.booklet .mix-title{font-size:clamp(1.8rem,7.5vw,2.6rem)}
.jewel::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 62%,rgba(255,255,255,.14) 78%,rgba(255,255,255,0) 90%)}

/* Layout: full-bleed poster */
.poster{position:relative;width:100%;min-height:min(86vh,820px);display:flex;align-items:flex-end;color:#fff}
.poster .art-slot{position:absolute;inset:0}
.poster-text{position:relative;width:100%;padding:120px 22px 34px;
  background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0))}
.poster-text>*{max-width:900px;margin-left:auto;margin-right:auto}
.poster .mix-title{font-size:clamp(3rem,15vw,7.5rem)}
.poster .dedication{font-size:1.7rem;margin-bottom:6px}

/* Below the cover */
main{max-width:620px;margin:0 auto;padding:12px 22px 140px}
.for-you{font-family:"Caveat",cursive;font-size:1.6rem;line-height:1.25;margin:8px 0 6px;max-width:26em;color:var(--accent)}
.intro{font-size:1.15rem;line-height:1.6;margin:8px 0 22px;max-width:34em}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:1rem;
  padding:12px 20px;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.player{margin:14px 0 8px}
.player iframe{width:100%;height:420px;border:0;border-radius:10px;background:var(--sheet)}
.player-note{color:var(--muted);font-size:.95rem;margin:6px 0 0}

.elsewhere{background:var(--sheet);border-radius:14px;padding:14px 16px 4px;margin:10px 0 4px}
.elsewhere p{margin:0 0 10px;font-size:.95rem;color:var(--muted)}
.elsewhere .btn{font-size:.92rem;padding:9px 16px}

/* Spotify deck: tape reels wound by the embed's reported position */
.deck{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  background:var(--sheet);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.deck-window{display:flex;gap:10px;background:#16131d;border-radius:10px;padding:8px 12px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.reel{position:relative;width:46px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle closest-side,#5b3b22 0 var(--tape),rgba(255,255,255,.07) calc(var(--tape) + .5px) 100%)}
.reel-l{--tape:calc(36% + (1 - var(--wound,0)) * 62%)}
.reel-r{--tape:calc(36% + var(--wound,0) * 62%)}
.reel::after{content:"";position:absolute;inset:30%;border-radius:50%;
  background:repeating-conic-gradient(#f4f1ea 0 22deg,#16131d 22deg 60deg);
  box-shadow:0 0 0 2px #f4f1ea;animation:reel-spin 1.8s linear infinite;animation-play-state:paused}
.deck[data-playing="true"] .reel::after{animation-play-state:running}
@keyframes reel-spin{to{transform:rotate(-360deg)}}
.deck-info{min-width:0;display:flex;flex-direction:column}
.deck-now{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-counter{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem;letter-spacing:.06em}
.deck-ctrls{display:flex;gap:6px}
.deck-hint{grid-column:1 / -1;margin:0;font-size:.92rem;font-weight:600;padding:8px 12px;border-radius:10px;background:var(--ink);color:var(--bg)}
.deck-hint::after{content:" \2193";}
.deck-note{grid-column:1 / -1;margin:0;font-family:"Caveat",cursive;font-size:1.4rem;line-height:1.25;color:var(--accent)}
.deck-ctrls .btn{padding:8px 12px;font-size:.95rem}
.player .spotify-embed iframe{display:block;height:152px;border:0;border-radius:12px;background:none}
.player .spotify-embed[data-mode="playlist"] iframe{height:352px}

/* Row play button: sits over the song number (or album art), shown on hover or keyboard focus,
   always on touch screens and for the song that's playing. The rest of the row opens the note. */
.tracks li{position:relative}
.t-play{appearance:none;border:0;cursor:pointer;position:absolute;z-index:1;left:0;top:11px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;padding:0;
  background:var(--ink);color:var(--bg);opacity:0;transition:opacity .12s}
.t-play svg{width:12px;height:12px;margin-left:2px}
.tracks li.playable:hover .t-play,.t-play:focus-visible,.tracks li[aria-current="true"] .t-play{opacity:1}
.tracks li.playable:hover .t-num,.tracks li.playable:has(.t-play:focus-visible) .t-num,
.tracks li[aria-current="true"] .t-num{visibility:hidden}
.tracks li[aria-current="true"] .t-play{background:var(--accent)}
.tracks li[aria-current="true"] .t-title{color:var(--accent)}
@media (hover:none){
  .tracks li.playable .t-play{opacity:1}
  .tracks li.playable .t-num{visibility:hidden}
}

.scan{margin:28px 0 0;text-align:center}
.scan img{width:min(100%,320px);height:auto;border-radius:8px;display:block;margin:0 auto}
.scan figcaption{color:var(--muted);font-size:.9rem;margin-top:6px}

.side{margin-top:38px}
.side h2{font-family:"Caveat",cursive;font-weight:700;font-size:2rem;margin:0 0 6px;line-height:1}
.tracks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tracks li{border-bottom:1px solid var(--line)}
.tracks summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2.4rem 1fr auto;align-items:baseline;gap:6px;padding:14px 2px}
.tracks summary::-webkit-details-marker{display:none}
.t-num{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.95rem}
/* Tracklist styles: "list" (numbers) or "rich" (album art). The art is always rendered and
   shown only in the rich style, so the studio can switch styles without re-rendering. */
.t-art{display:none}
body[data-tracklist="rich"] .tracks summary{grid-template-columns:56px 1fr auto;align-items:center;gap:14px;padding:10px 2px}
body[data-tracklist="rich"] .t-num{display:none}
body[data-tracklist="rich"] .t-art{display:block;width:56px;height:56px;border-radius:6px;object-fit:cover;background:var(--line)}
body[data-tracklist="rich"] .t-note{margin-left:70px}
body[data-tracklist="rich"] .t-play{left:15px;top:23px;background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(2px)}
body[data-tracklist="rich"] .tracks li[aria-current="true"] .t-play{background:var(--accent)}
body[data-tracklist="rich"] .tracks li[aria-current="true"] .t-art{box-shadow:0 0 0 3px var(--accent)}
.t-title{font-weight:600}
.t-artist{display:block;color:var(--muted);font-size:.95rem;font-weight:400}
.t-toggle{color:var(--muted);font-size:1.4rem;line-height:1;transition:transform .2s}
details[open] .t-toggle{transform:rotate(45deg)}
.t-note{margin:0 0 16px calc(2.4rem + 8px);font-family:"Caveat",cursive;font-size:1.45rem;line-height:1.25;max-width:26em}
.end-card{margin-top:48px;padding-top:28px;border-top:1px dashed var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.end-card h2{font-family:"Caveat",cursive;font-weight:700;font-size:2rem;line-height:1;margin:0 0 -4px}
.end-q{margin:0 0 8px;font-weight:600}
.end-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{appearance:none;border:0;cursor:pointer;font:inherit;font-size:.92rem;padding:8px 14px;border-radius:999px;
  background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.end-thanks{margin:0;color:var(--muted)}
.waitlist{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--sheet);border-radius:14px;padding:16px}
.waitlist label{font-size:.95rem}
.waitlist input[type=email],.waitlist input[type=text]{font:inherit;padding:10px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.waitlist fieldset{border:0;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:8px}
.waitlist legend{font-weight:600;font-size:.95rem;margin-bottom:6px;padding:0}
.waitlist fieldset label{display:flex;gap:10px;align-items:flex-start}
.waitlist fieldset input{margin-top:5px}
.waitlist .btn{align-self:flex-start;margin-top:6px}
.end-foot{margin:0;font-size:.85rem}
.end-foot a{color:var(--muted)}
.sign-off{margin-top:40px;font-family:"Caveat",cursive;font-size:1.6rem}

/* Maker controls */
.studio-toggle{position:fixed;right:16px;bottom:0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20}
.studio-toggle .btn{box-shadow:0 8px 24px -6px rgba(0,0,0,.45)}
.studio{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--sheet);color:var(--ink);
  border-radius:18px 18px 0 0;padding:18px 20px calc(22px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 40px rgba(0,0,0,.35);transform:translateY(105%);visibility:hidden;
  transition:transform .28s ease,visibility 0s .28s;max-height:80vh;overflow:auto}
.studio.open{transform:none;visibility:visible;transition:transform .28s ease}
.studio-inner{max-width:620px;margin:0 auto}
.studio-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.studio-head h2{margin:0;font-size:1.15rem}
.studio p{margin:4px 0 8px;color:var(--muted);font-size:.92rem}
.studio fieldset{border:0;margin:14px 0 0;padding:0}
.studio legend{font-weight:600;font-size:.95rem;margin-bottom:8px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;font-size:.95rem}
.chips input:checked+label{background:var(--ink);color:var(--sheet);box-shadow:none}
.chips input:focus-visible+label{outline:3px solid var(--accent);outline-offset:2px}
.icon-btn{appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:1.7rem;line-height:1;cursor:pointer;padding:4px 8px}
body:not([data-studio="on"]) .studio,body:not([data-studio="on"]) .studio-toggle{display:none}

@media (prefers-reduced-motion:reduce){.studio,.studio.open,.t-toggle{transition:none}.reel::after{animation:none}}
@media (max-width:480px){.deck{grid-template-columns:auto 1fr}.deck-ctrls{grid-column:1 / -1;justify-content:flex-end}}