: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}
body[data-font="vt323"] .mix-title{font-family:"VT323",ui-monospace,monospace;letter-spacing:.01em}
body[data-font="pacifico"] .mix-title{font-family:"Pacifico","Brush Script MT",cursive;line-height:1.25}
body[data-font="bungee"] .mix-title{font-family:"Bungee",Impact,sans-serif}

/* Brand mark, top left of every mix page */
.brand{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:16px;z-index:10;
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 7px;border-radius:999px;
  font-family:"Permanent Marker","Comic Sans MS",cursive;font-size:1.05rem;line-height:1;
  color:var(--ink);text-decoration:none;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.brand img{width:28px;height:28px;display:block}
.brand:hover span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* Cover stage */
.stage{display:grid;place-items:center;padding:76px 20px 40px} /* room for the brand mark */
.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}

.owner-bar{background:var(--sheet);border:2px dashed var(--accent);border-radius:14px;padding:14px 16px;margin:0 0 20px}
.owner-bar p{margin:0 0 10px}
.owner-bar .actions{margin-bottom:8px}
.owner-fine{font-size:.88rem;color:var(--muted)}
.link-btn{appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.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}
.player .youtube-embed iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:12px;background:#000}
.player .tidal-embed iframe{display:block;height:122px;border:0;border-radius:12px;background:none}
.deck[data-service="tidal"] .deck-counter{display:none}

/* 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)}
.t-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px calc(2.4rem + 8px);font-size:.9rem}
.t-links a{color:var(--muted)}
.t-links a::after{content:" \2197"}
body[data-tracklist="rich"] .t-links{margin-left:70px}
@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,.tracks .t-row{list-style:none;display:grid;grid-template-columns:2.4rem 1fr auto;align-items:baseline;gap:6px;padding:14px 2px}
.tracks summary{cursor:pointer}
.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,body[data-tracklist="rich"] .tracks .t-row{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)}
/* Ranked year-end lists show the rank beside the art */
body[data-ranked="true"][data-tracklist="rich"] .tracks summary,body[data-ranked="true"][data-tracklist="rich"] .tracks .t-row{grid-template-columns:1.6rem 56px 1fr auto}
body[data-ranked="true"][data-tracklist="rich"] .t-num{display:block;font-family:"Permanent Marker",cursive;font-size:1.25rem;color:var(--accent);text-align:center;visibility:visible !important}
body[data-ranked="true"][data-tracklist="rich"] .t-play{left:calc(1.6rem + 29px)}
body[data-ranked="true"][data-tracklist="rich"] .t-note{margin-left:calc(1.6rem + 84px)}
body[data-ranked="false"] .t-num{display:none}
body[data-ranked="false"][data-tracklist="list"] .tracks summary,body[data-ranked="false"][data-tracklist="list"] .tracks .t-row{grid-template-columns:1fr auto}
body[data-ranked="false"][data-tracklist="list"] .t-note{margin-left:0}
.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 .link-btn{color:var(--muted)}
.report-form{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--sheet);border-radius:14px;padding:16px;font-size:.95rem}
.report-form label{display:flex;gap:8px;align-items:flex-start}
.report-form textarea{font:inherit;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.report-form .btn{align-self:flex-start}
.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}
.studio-credit{min-height:1.2em;margin:6px 0 0 !important;font-size:.8rem !important}
.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}}