:root { color-scheme: dark; --bg:#0b0d0c; --panel:#121513; --panel-2:#171b18; --text:#f2f4ed; --muted:#8d968f; --faint:#7b837d; --line:#292f2b; --accent:#d7ff45; --accent-soft:rgba(215,255,69,.1); --accent-surface:#262c18; --error:#ff7777; --info:#79b8f2; --step-idle:#7b837d; --max:1120px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

















body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
body.theme-switching,body.theme-switching *,body.theme-switching *::before,body.theme-switching *::after { transition:none !important; }
.ambient { position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 78% 8%,rgba(215,255,69,.07),transparent 28%),radial-gradient(circle at 5% 44%,rgba(91,125,104,.06),transparent 24%); }









main { position:relative; z-index:1; max-width:var(--max); margin:auto; padding:0 28px; }
.journey { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:17px; }
.journey ol { display:flex; align-items:center; gap:0; max-width:640px; margin:0; padding:0; list-style:none; }
.journey li { display:flex; align-items:center; gap:0; min-width:0; flex:1; color:var(--faint); font-size:11px; font-weight:700; letter-spacing:.03em; white-space:nowrap; }









.journey li button { display:flex; align-items:center; flex:0 0 auto; gap:8px; padding:6px 4px; margin:-6px -4px; border:0; border-radius:6px; background:none; font:inherit; color:inherit; letter-spacing:inherit; white-space:nowrap; cursor:pointer; }

.journey li button:disabled { cursor:default; }
.journey li button:not(:disabled):hover { color:var(--text); background:var(--accent-soft); }
.journey li button:not(:disabled):hover span { color:var(--accent); }
.journey li:not(:last-child)::after { content:""; height:1px; flex:1; margin:0 14px; background:var(--line); }
.journey li span { color:var(--faint); font-size:10px; font-variant-numeric:tabular-nums; }
.journey li.active { color:var(--text); }.journey li.active span { color:var(--accent); }










.journey li button:disabled,.journey li button:disabled span { color:var(--step-idle); }







body.light-mode .journey li.active span { color:#5c7400; }
.display-controls { display:flex; align-items:center; gap:8px; flex:0 0 auto; }.provider-picker select { height:36px; max-width:132px; border:1px solid var(--control-line); border-radius:999px; background-color:var(--panel); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238d968f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; color:var(--text); padding:0 30px 0 12px; font:inherit; font-size:12px; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; }
body.light-mode .provider-picker select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235d685f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }.theme-toggle { width:36px; height:36px; flex:0 0 auto; border:1px solid var(--control-line); border-radius:50%; background:var(--panel); color:var(--text); font:inherit; font-size:16px; line-height:1; cursor:pointer; }








.secondary:not(:disabled):hover,.theme-toggle:hover,.links a:hover,.reseed-button:hover,
.replace-button:not(:disabled):hover,.fit-toggle:hover,.about-button:hover { border-color:var(--accent); color:var(--accent); }
.provider-picker select:hover { border-color:var(--accent); }








.provider-picker select option { background-color:var(--panel); color:var(--text); }
.provider-picker select option:checked { background-color:var(--accent-surface); color:var(--text); font-weight:700; }.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.results-active .hero { display:none; }
body.results-active .results-section { min-height:calc(100vh - 90px); padding-top:42px; border-top:0; }
.hero { position:relative; isolation:isolate; min-height:min(720px,100vh); display:flex; flex-direction:column; justify-content:center; padding:46px 16px 62px; }







.hero.dead-end { min-height:calc(100vh - 90px); }
.hero-media { position:absolute; inset:16px 0; z-index:-1; overflow:hidden; pointer-events:none; -webkit-mask-image:radial-gradient(ellipse at center,black 55%,transparent 100%); mask-image:radial-gradient(ellipse at center,black 55%,transparent 100%); }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,13,12,.6) 0%,rgba(11,13,12,.85) 100%); }
@media (max-width:760px) { .hero-media { bottom:auto; height:min(78vw,380px); border-radius:0; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 16%,black 55%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,black 16%,black 55%,transparent 100%); } }


.eyebrow { margin:0 0 17px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; max-width:930px; font-size:clamp(43px,7.4vw,86px); line-height:.98; letter-spacing:-.058em; font-weight:630; }
h1 span,h2 span { color:#9ca49e; }
.intro { max-width:650px; margin:25px 0 30px; color:var(--muted); font-size:17px; line-height:1.55; }
.search-card,.shape-panel { border:1px solid var(--line); border-radius:17px; background:rgba(18,21,19,.93); box-shadow:0 25px 70px rgba(0,0,0,.25); }
.search-card { max-width:780px; padding:16px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:11px; }
label>span { display:block; margin:0 0 7px 3px; color:#b6bdb7; font-size:11px; font-weight:700; letter-spacing:.04em; }
label em { color:var(--faint); font-style:normal; font-weight:500; }
input[type=text],input:not([type]) { width:100%; min-height:48px; border:1px solid var(--control-line); border-radius:10px; background:#0d100e; color:var(--text); padding:0 14px; font:inherit; }
input::placeholder { color:#59605b; }


.field { position:relative; }
.suggestions { position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; max-height:302px; overflow-y:auto; margin:0; padding:5px; list-style:none; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 18px 44px rgba(0,0,0,.42); overscroll-behavior:contain; }
.suggestion { display:grid; gap:2px; border-radius:8px; padding:9px 11px; cursor:pointer; }
.suggestion strong { display:block; font-size:15px; font-weight:600; line-height:1.3; }
.suggestion small { display:block; color:var(--muted); font-size:12px; line-height:1.35; }






.suggestions.above { top:auto; bottom:calc(100% + 6px); box-shadow:0 -18px 44px rgba(0,0,0,.42); }






.field.is-suggesting::after { content:""; position:absolute; right:14px; bottom:17px; width:14px; height:14px; border:2px solid var(--control-line); border-top-color:var(--muted); border-radius:50%; animation:spin .75s linear infinite; pointer-events:none; }


input[role=combobox] { padding-right:36px; }
.suggestion:hover,.suggestion.is-active { background:var(--accent-surface); }
.suggestion.is-active strong { color:var(--accent); }
body.light-mode .suggestions { background:#fff; border-color:#c8d0c6; box-shadow:0 18px 44px rgba(30,40,30,.15); }
body.light-mode .suggestions.above { box-shadow:0 -18px 44px rgba(30,40,30,.15); }
body.light-mode .suggestion:hover,body.light-mode .suggestion.is-active { background:#eef4d9; }
body.light-mode .suggestion.is-active strong { color:#4a5a12; }



@media(max-width:760px){.suggestions{max-height:min(46vh,330px)}.suggestion{padding:12px}.suggestion strong{font-size:16px}.suggestion small{font-size:13px}}
.trust-note { margin:12px 0 0 2px; color:var(--muted); font-size:12px; }


.trust-link { color:inherit; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.trust-link:hover { color:var(--text); }
.method-more { max-width:760px; margin:6px 0 0; }
.method-more a { color:#b7beb8; text-decoration:underline; text-underline-offset:2px; }
body.light-mode .method-more a { color:inherit; }
.primary,.secondary,.text-button,.preset,.reseed-button,.replace-button,.candidate { font:inherit; cursor:pointer; }
.primary { width:100%; display:flex; justify-content:center; gap:12px; border:0; border-radius:11px; padding:15px 17px; background:var(--accent); color:#111600; font-weight:800; }
.primary:hover { background:#e3ff7d; }.primary:disabled { opacity:.55; cursor:wait; }



.primary:disabled:not(.is-working) { cursor:not-allowed; }
.secondary,.text-button,.preset,.reseed-button,.replace-button,.about-button { border:1px solid var(--control-line); background:transparent; color:var(--text); border-radius:999px; padding:9px 13px; font-size:12px; }
.about-button { display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.text-button { border:0; color:var(--muted); text-decoration:underline; text-underline-offset:4px; }




.surprise { width:100%; margin-top:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:11px; font-size:14px; font-weight:600; }



.or-divider { display:flex; align-items:center; justify-content:center; gap:14px; max-width:230px; margin:13px auto; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.or-divider::before,.or-divider::after { content:""; flex:1; height:1px; background:var(--line); }
@keyframes pulse { 65%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent} }
.results-section { min-height:70vh; padding:84px 0 110px; border-top:1px solid var(--line); scroll-margin-top:0; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; }
.shape-heading { display:flex; flex-direction:column; margin-bottom:32px; }
h2 { margin:0; font-size:clamp(31px,5vw,56px); line-height:1.03; letter-spacing:-.05em; font-weight:630; }
h3 { margin:0; font-size:clamp(24px,3vw,36px); line-height:1.1; letter-spacing:-.035em; font-weight:620; }
.candidate-list { display:grid; gap:8px; }
.candidate { width:100%; display:grid; grid-template-columns:48px 48px minmax(0,1fr) auto; align-items:center; gap:16px; text-align:left; border:1px solid var(--line); border-radius:13px; background:var(--panel); color:var(--text); padding:12px 20px; }
.candidate:hover,.candidate:focus-visible { border-color:#667050; background:#151a16; }
.cover-art,.cover-placeholder { width:48px; height:48px; border-radius:7px; object-fit:cover; background:#202620; }.cover-placeholder { display:grid; place-items:center; color:#78817a; font-size:18px; }
.empty-state { max-width:560px; padding:24px; border:1px solid var(--line); border-radius:13px; background:var(--panel); }.empty-state strong{font-size:16px}.empty-state p{margin:8px 0 17px;color:#a5ada7;font-size:13px;line-height:1.5}
.candidate-index,.track-number { color:#78817a; font-size:12px; font-variant-numeric:tabular-nums; }.pick{color:var(--accent);font-size:12px}







.seed-stage { display:flex; align-items:center; gap:26px; margin-bottom:40px; }
.seed-copy { min-width:0; }
.seed-stage .eyebrow { margin-bottom:14px; }









.seed-mark { display:grid; flex:0 0 auto; width:clamp(104px,13vw,148px); aspect-ratio:1; }
.seed-mark .cover-art,.seed-mark .cover-placeholder { width:100%; height:100%; border-radius:14px; }


.seed-mark .cover-placeholder { border:1px solid #53603e; background:var(--accent-soft); color:var(--accent); font-size:clamp(38px,5vw,54px); }
.seed-meta { margin:12px 0 0; color:var(--muted); }
.shape-panel { padding:27px; }.shape-heading{align-items:flex-start}.shape-heading .eyebrow{margin-bottom:10px}
.discovery-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 17px; }.mode-option{min-height:112px;text-align:left;border-radius:13px;padding:16px;background:#0e110f}.mode-option strong,.mode-option span{display:block}.mode-option strong{font-size:15px}.mode-option span{margin-top:8px;color:var(--muted);font-size:11px;line-height:1.45}.preset:hover,.preset.active{border-color:var(--accent)}.preset.active{background:var(--accent-soft)}.preset.active strong{color:var(--accent)}
.head-actions-group { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.head-actions { display:flex; gap:8px; }




.transfer-actions { align-self:stretch; }
.transfer-actions button { flex:1; }




.icon-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn-icon { width:14px; height:14px; flex:0 0 auto; }
.summary-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.summary-chips span,.tag-row span{border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em}




.playlist-notice{max-width:64ch;margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.playlist { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }.track-card{border-bottom:1px solid var(--line)}.track-top{min-height:78px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:13px;row-gap:9px;padding:11px 10px}.track-card:hover{background:rgba(255,255,255,.015)}
.track-lead{position:relative;min-width:0;display:grid;grid-template-columns:42px 48px minmax(0,1fr);align-items:center;gap:13px;border-radius:8px}.track-primary-link{min-width:0;color:inherit;text-decoration:none;border-radius:8px}.track-primary-link:hover .track-main strong{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}.candidate strong,.candidate small,.track-main strong,.track-main small{display:block}.candidate strong,.track-main strong{font-size:16px}.candidate small,.track-main small{margin-top:4px;color:#a5ada7;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fit{color:var(--accent);font-size:12px;font-variant-numeric:tabular-nums}.fit-why{color:var(--muted);font-size:12px}.fit-why::before{content:"·";margin-right:6px}.track-card.is-open .fit-why{color:var(--text)}.fit-toggle:hover .fit-why{color:var(--accent)}.fit-toggle{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 11px;border:1px solid var(--control-line);border-radius:999px;background:none;font:inherit;color:inherit;cursor:pointer}.fit-toggle .chev{display:block;width:7px;height:7px;margin-left:-1px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);transition:transform .18s ease}.track-card.is-open .fit-toggle{border-color:var(--line-strong)}.track-card.is-open .fit-toggle .chev{margin:-3px 0 0;transform:rotate(45deg)}.track-controls{display:flex;align-items:center;justify-content:flex-end;gap:7px}.why-panel .track-controls{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.track-top .track-controls{grid-column:1;grid-row:2;display:none}.track-card.is-open .track-top .track-controls{display:flex}.reseed-button,.replace-button{padding:7px 11px}.reseed-button{border-color:var(--control-line);color:var(--text)}
.why-panel { margin:0 8px 15px 52px; padding:18px; border:1px solid var(--line); border-radius:13px; background:var(--panel-2); }.why-summary{margin:0 0 16px;color:var(--muted);font-size:13px}.dimension-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 30px}.dimension{display:flex;flex-direction:column;justify-content:space-between}.dimension>div:first-child{display:flex;align-items:baseline;gap:6px;font-size:13px}.dimension>div:first-child span{flex:0 0 auto;color:var(--accent)}.dimension small{flex:1;min-width:0;color:var(--muted);font-size:12px;line-height:1.5}.dimension small::before{content:"· "}.dimension progress{display:block;width:100%;height:3px;margin-top:8px;border:0;border-radius:3px;background:#2e342f;overflow:hidden}.dimension progress::-webkit-progress-bar{background:#2e342f}.dimension progress::-webkit-progress-value{background:var(--accent)}.dimension progress::-moz-progress-bar{background:var(--accent)}.dimension.unavailable progress{opacity:.5}.why-panel .dimension.unavailable>div:first-child b,.why-panel .dimension.unavailable>div:first-child span{color:var(--muted)}.tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:17px}.tag-caption{margin-right:2px;color:var(--muted);font-size:10px;font-style:normal;letter-spacing:.04em}.tag-row span{padding:5px 8px;text-transform:none}.filter-tag-row{margin-top:14px}.filter-tag-row span{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.links{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.track-links{justify-content:flex-end;margin-top:0}.links a{display:inline-flex;align-items:center;color:#d0d6d1;text-decoration:none;border:1px solid var(--control-line);border-radius:999px;padding:7px 10px;font-size:11px}.track-links a{font-size:12px;padding:7px 11px}
.method-note { margin-top:23px; color:var(--muted); font-size:12px; }.method-note summary{cursor:pointer;color:#b7beb8}.method-note p{max-width:760px;line-height:1.6}
footer { position:relative; max-width:var(--max); margin:auto; padding:25px 28px 42px; border-top:1px solid var(--line); color:var(--faint); font-size:12px; display:flex; justify-content:space-between; gap:20px; }
footer nav { display:flex; gap:14px; flex:0 0 auto; }
@media(max-width:760px){footer{justify-content:center}footer>span{display:none}}

footer a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
footer a:hover { color:var(--text); }
.method-note a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.method-note a:hover { color:var(--text); }








.alert { position:fixed; z-index:50; left:16px; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); max-width:560px; margin-inline:auto; display:flex; align-items:center; gap:12px; padding:14px 15px; border:1px solid var(--line); border-radius:13px; background:var(--panel); box-shadow:0 18px 44px rgba(0,0,0,.5); }
.alert[hidden] { display:none; }

.alert::before { content:"!"; flex:0 0 auto; display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:var(--error); color:var(--panel); font-size:12px; font-weight:900; line-height:1; }
.alert-message { flex:1 1 auto; min-width:0; margin:0; color:var(--text); font-size:14px; line-height:1.45; }
.alert-dismiss { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--muted); font:inherit; font-size:13px; line-height:1; cursor:pointer; }
.alert-dismiss:hover { background:var(--error-soft); color:var(--text); }
body.light-mode .alert { box-shadow:0 16px 40px rgba(40,60,30,.16); }
body.light-mode .alert::before { color:#fff; }
@media (prefers-reduced-motion:no-preference) { .alert { animation:alert-in .18s ease-out; } }
@keyframes alert-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
















.bottom-stack { position:fixed; z-index:45; left:16px; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); max-width:560px; margin-inline:auto; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:12px; padding:14px 15px; border:1px solid #53603e; border-radius:13px; background:var(--accent-surface); box-shadow:0 18px 44px rgba(0,0,0,.5); pointer-events:none; }
.toast[hidden] { display:none; }





.toast::before { flex:0 0 auto; display:grid; width:18px; height:18px; place-items:center; border-radius:50%; font-size:12px; font-weight:900; line-height:1; }
.toast.is-success::before { content:"✓"; background:var(--accent); color:#111600; }
.toast.is-error::before { content:"!"; background:var(--error); color:var(--panel); }
.toast.is-busy::before { content:""; width:9px; height:9px; margin:0 4px; background:var(--accent); animation:pulse 1.25s infinite; }
.toast.is-info::before { content:"i"; background:var(--info); color:var(--panel); font-family:Georgia,"Times New Roman",serif; font-style:italic; }

.toast:not(.is-success):not(.is-error):not(.is-busy):not(.is-info)::before { display:none; }


.toast:not(.is-success) { border-color:var(--line); background:var(--panel); }
.toast-message { flex:1 1 auto; min-width:0; margin:0; color:var(--text); font-size:14px; line-height:1.45; }


.toast-dismiss { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--muted); font:inherit; font-size:13px; line-height:1; cursor:pointer; pointer-events:auto; }
.toast-dismiss:hover { background:var(--accent-soft); color:var(--text); }
.toast-dismiss[hidden] { display:none; }
body.light-mode .toast { color:#405500; border-color:#66764b; box-shadow:0 16px 40px rgba(40,60,30,.16); }


body.light-mode .toast:not(.is-success) { color:var(--text); border-color:var(--line); }




@media (prefers-reduced-motion:no-preference) {
  .toast { animation:toast-in .2s cubic-bezier(.2,.9,.3,1.2); }
  .toast.is-leaving { animation:toast-out .18s ease-in forwards; }
}
@keyframes toast-in { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes toast-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(8px) scale(.98); } }



.toast-actions { flex:0 0 auto; display:flex; align-items:center; gap:2px; pointer-events:auto; }
.toast-actions[hidden] { display:none; }
.toast-action { border:0; border-radius:999px; background:transparent; color:inherit; padding:8px 10px; font:inherit; font-size:13.5px; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap; }
.toast-action:hover { background:var(--accent-soft); }



@media (max-width:560px) {
  .toast.has-actions { flex-wrap:wrap; row-gap:2px; }
  .toast.has-actions .toast-message { flex:1 1 100%; }
  .toast.has-actions .toast-actions { margin-left:-9px; }
}




.reason-sheet { max-height:70vh; overflow-y:auto; display:grid; gap:6px; padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 22px 54px rgba(0,0,0,.55); pointer-events:auto; }
.reason-sheet[hidden] { display:none; }
.reason-sheet-title { margin:0 0 5px 2px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.reason-option { display:grid; gap:3px; width:100%; text-align:left; border:1px solid var(--control-line); border-radius:11px; background:transparent; color:var(--text); padding:11px 13px; font:inherit; cursor:pointer; }
.reason-option:hover { border-color:var(--accent); }
.reason-option strong { font-size:13px; font-weight:650; }
.reason-option small { color:var(--muted); font-size:11.5px; line-height:1.4; }


.name-sheet .name-input { width:100%; box-sizing:border-box; border:1px solid var(--control-line); border-radius:11px; background:transparent; color:var(--text); padding:11px 13px; font:inherit; }
.name-sheet .name-input:focus-visible { border-color:var(--accent); outline:none; }








.name-sheet .name-input::selection { background:var(--accent); color:#111600; }
.name-sheet .name-input::-moz-selection { background:var(--accent); color:#111600; }

.name-preview { margin:0 2px; min-height:1.4em; color:var(--muted); font-size:11.5px; line-height:1.4; overflow-wrap:anywhere; }
.name-actions { display:flex; gap:8px; justify-content:flex-end; }




.name-actions .primary { width:auto; padding:11px 15px; border-radius:11px; }
body.light-mode .reason-sheet { box-shadow:0 20px 48px rgba(40,60,30,.18); }
@media (prefers-reduced-motion:no-preference) { .reason-sheet { animation:toast-in .18s cubic-bezier(.2,.9,.3,1.2); } }



@media (max-width:760px) {
  .reason-sheet { padding:14px; }
  .reason-option { padding:14px; }














  .name-sheet { position:fixed; inset:0 16px; margin-block:auto; margin-inline:auto; max-width:560px; height:max-content; }
}




.primary.is-working::after { content:""; flex:0 0 auto; width:15px; height:15px; align-self:center; border:2px solid rgba(17,22,0,.25); border-top-color:#111600; border-radius:50%; animation:spin .7s linear infinite; }



.surprise.is-working::after { content:""; flex:0 0 auto; width:14px; height:14px; border:2px solid var(--control-line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }






#top-up.is-working .btn-icon { display:none; }
#top-up.is-working::before { content:""; flex:0 0 auto; box-sizing:border-box; width:14px; height:14px; border:2px solid var(--control-line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }


#top-up.is-working { cursor:wait; }
@keyframes spin { to { transform:rotate(360deg); } }


@media (prefers-reduced-motion:reduce) { .primary.is-working::after { animation:none!important; border-top-color:rgba(17,22,0,.55); } .surprise.is-working::after { animation:none!important; } #top-up.is-working::before { animation:none!important; border-top-color:var(--muted); } .field.is-suggesting::after { animation:none!important; border:0; background:var(--muted); opacity:.55; } .refine-count.is-reading::before { animation:none!important; border-top-color:var(--muted); } }
.legal-page { max-width:640px; padding-top:56px; padding-bottom:60px; }
.legal-page .back-link { display:inline-block; margin-bottom:28px; padding:0; }
.legal-page h1 { margin:0 0 36px; font-size:clamp(31px,5vw,44px); }




.brand-lockup { display:flex; align-items:center; gap:15px; padding-bottom:24px; margin-bottom:34px; border-bottom:1px solid var(--line); }
.brand-mark { width:46px; height:46px; flex:0 0 auto; color:var(--accent); }



.brand-name { color:var(--text); font-size:clamp(31px,5vw,44px); font-weight:630; letter-spacing:-.045em; line-height:1; }
.legal-page section { margin-top:30px; }
.legal-page h2 { margin:0 0 10px; font-size:16px; font-weight:700; }
.legal-page p { margin:0 0 4px; color:var(--text); font-size:14px; line-height:1.65; }
.legal-page address { margin:0 0 12px; font-style:normal; color:var(--text); font-size:14px; line-height:1.65; }
.legal-page a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
#skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;clip:auto;padding:8px 14px;border-radius:8px;background:var(--accent);color:#111600;font-size:13px;font-weight:700;text-decoration:none;overflow:visible;white-space:normal}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}








[tabindex="-1"]:focus{outline:none}
body.light-mode { --bg:#f5f6f0; --panel:#ffffff; --panel-2:#edf0e9; --text:#172018; --muted:#5d685f; --faint:#606b62; --line:#d1d8cf; --accent:#8bab00; --accent-soft:rgba(139,171,0,.12); --accent-surface:#eef2dd; --error:#ba3030; --info:#1d6fb5; --step-idle:#7e8880; }
body.light-mode .ambient { background:radial-gradient(circle at 78% 8%,rgba(139,171,0,.14),transparent 28%),radial-gradient(circle at 5% 44%,rgba(91,125,104,.10),transparent 24%); }
body.light-mode .hero-media::after { background:linear-gradient(180deg,rgba(245,246,240,.65) 0%,rgba(245,246,240,.88) 100%); }
body.light-mode .search-card,body.light-mode .shape-panel { background:rgba(255,255,255,.94); box-shadow:0 18px 55px rgba(30,45,30,.10); }
body.light-mode input[type=text],body.light-mode input:not([type]),body.light-mode .mode-option { background:#fafbf7; border-color:#c8d0c6; }
body.light-mode .preset.active { background:var(--accent-soft); border-color:#607900; }
body.light-mode .primary { background:#607900; color:#fff; }
body.light-mode .primary:hover { background:#6e8900; }
body.light-mode input::placeholder { color:#778078; }
body.light-mode h1 span,body.light-mode h2 span { color:#6d776f; }



body.light-mode .brand-name { color:var(--text); }
body.light-mode .candidate:hover,body.light-mode .candidate:focus-visible { background:#f0f4ec; border-color:#8ba06b; }
body.light-mode .candidate-index,body.light-mode .track-number { color:#69746c; }
body.light-mode .track-card:hover { background:rgba(34,55,33,.035); }
body.light-mode .why-panel { background:var(--panel-2); }
body.light-mode .links a { color:#334235; }
body.light-mode .eyebrow,body.light-mode .pick,body.light-mode .seed-mark .cover-placeholder,body.light-mode .dimension>div:first-child span,body.light-mode .theme-toggle:hover,body.light-mode .fit,body.light-mode .preset.active strong { color:#405500; }
@media(max-width:760px){.journey{padding-top:13px}.journey li button{padding:9px 5px;margin:-9px -5px}.journey li{font-size:12px}.journey li span{font-size:11px}.journey li:not(:last-child)::after{margin:0 9px}.hero{min-height:auto;padding:26px 16px 46px}.eyebrow{font-size:12px}.intro{font-size:17px;line-height:1.6}.trust-note{font-size:14px}.fields{grid-template-columns:1fr}label>span{font-size:13px}input[type=text],input:not([type]){min-height:52px;font-size:17px}.field.is-suggesting::after{bottom:19px}.secondary,.text-button,.preset,.reseed-button,.replace-button{font-size:14px}.results-section{padding:62px 0 80px}.section-heading,.shape-heading{align-items:flex-start;flex-direction:column}.seed-stage{gap:16px;margin-bottom:32px}.seed-stage .eyebrow{margin-bottom:10px}.seed-meta{font-size:15px}.mode-option{padding:18px}.mode-option strong{font-size:17px}.mode-option span{font-size:14px;line-height:1.5}.candidate strong,.track-main strong{font-size:18px}.candidate small,.track-main small{font-size:14px;line-height:1.45}.candidate-index,.track-number,.fit{font-size:13px}.summary-chips span,.tag-row span{font-size:12px}.playlist-title-row{gap:20px}.dimension-grid{grid-template-columns:1fr}.why-panel{margin-left:9px;padding:20px}.why-summary{font-size:15px;line-height:1.55}.links a{padding:7px 8px;font-size:12px;line-height:1.2;white-space:nowrap}.track-links{gap:5px}.method-note{font-size:14px;line-height:1.55}.track-top{grid-template-columns:minmax(0,1fr);gap:10px}.track-lead{grid-template-columns:31px 56px minmax(0,1fr) 52px;gap:13px}.track-top .cover-art,.track-top .cover-placeholder{width:56px;height:56px}.track-controls .reseed-button,.track-controls .replace-button,.track-controls .about-button{min-height:44px;padding:9px 10px;font-size:13px;line-height:1.2;white-space:nowrap}.track-links{display:none}.head-actions-group{width:100%;align-items:stretch}.head-actions{width:100%}.head-actions button{flex:1}footer{font-size:12px;line-height:1.5}}
@media(max-width:360px){.seed-stage{display:block}.seed-stage .seed-mark{display:none}}
@media(max-width:520px){main{padding:0 17px}.journey{gap:8px}.journey ol{max-width:none}.journey li{font-size:11px;flex:0 1 auto;min-width:0}.journey li button{gap:5px}.journey li span{display:none}.journey li:not(:last-child)::after{width:18px;flex:0 1 18px;min-width:0;margin:0 5px}h1{font-size:clamp(33px,9.9vw,42px)}.intro{margin:19px 0 23px;font-size:15px}.search-card,.shape-panel{padding:13px}.candidate{grid-template-columns:29px 56px minmax(0,1fr) auto;gap:10px;padding:12px}.cover-art,.cover-placeholder{width:56px;height:56px}.pick{font-size:0}.pick::after{content:"→";font-size:12px}.discovery-modes{grid-template-columns:1fr}.mode-option{min-height:0}.track-top{padding-left:3px;padding-right:3px}.why-panel{margin-left:0;margin-right:0}footer{padding-left:17px;padding-right:17px;flex-direction:column}}


:root { --control-line:#5a655c; --line-strong:#7c8a7e; --error-soft:rgba(255,119,119,.1); }
body { text-rendering:optimizeLegibility; }
input[type=text],input:not([type]) { transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease; }
input::placeholder { color:#7e867f; }
input:hover { border-color:var(--line-strong); }
input[aria-invalid=true] { border-color:var(--error); box-shadow:0 0 0 3px var(--error-soft); }
.primary { align-items:center; transition:transform .16s ease,background-color .16s ease,opacity .16s ease; }
.primary:hover:not(:disabled) { transform:translateY(-1px); }
.primary:active:not(:disabled) { transform:translateY(0); }
.candidate { transition:border-color .16s ease,background-color .16s ease,transform .16s ease; }
.candidate:hover { transform:translateY(-1px); }
.mode-option { transition:border-color .16s ease,background-color .16s ease,transform .16s ease; }
.preset:hover:not(.active) { border-color:var(--line-strong); transform:translateY(-1px); }
.track-card { transition:background-color .16s ease; }






.replace-button:disabled { opacity:.4; cursor:not-allowed; }




.track-card.is-removing { overflow:hidden; animation:track-collapse .22s ease-in forwards; }
@keyframes track-collapse {
  from { height:var(--collapse-height); opacity:1; }
  to { height:0; opacity:0; transform:translateX(-10px); }
}





















@media (prefers-reduced-motion:no-preference) { .playlist>.track-card.is-arriving { animation:track-arrive .24s ease-out; } }







@media (prefers-reduced-motion:no-preference) {
  @keyframes stage-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  .hero,.results-section { animation:stage-enter .28s ease-out; }











  @keyframes row-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  .is-fresh>li,.is-fresh>.candidate { animation:row-enter .24s ease-out backwards; }


  .is-fresh>:nth-child(1){animation-delay:0ms}.is-fresh>:nth-child(2){animation-delay:26ms}
  .is-fresh>:nth-child(3){animation-delay:52ms}.is-fresh>:nth-child(4){animation-delay:78ms}
  .is-fresh>:nth-child(5){animation-delay:104ms}.is-fresh>:nth-child(6){animation-delay:130ms}
  .is-fresh>:nth-child(7){animation-delay:156ms}.is-fresh>:nth-child(n+8){animation-delay:182ms}
}







.journey li,.journey li button,.journey li span { transition:color .3s ease, background-color .16s ease; }
.journey li:not(:last-child)::after { transition:background-color .3s ease; }
@keyframes track-arrive { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }



.playlist-more { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:16px 0 4px; }


.playlist-more .secondary:disabled:not(.is-working) { opacity:.4; cursor:not-allowed; }


#keep-going.is-working .btn-icon { display:none; }
#keep-going.is-working::before { content:""; flex:0 0 auto; box-sizing:border-box; width:14px; height:14px; border:2px solid var(--control-line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
#keep-going.is-working { cursor:wait; }
@media (prefers-reduced-motion:reduce) { #keep-going.is-working::before { animation:none!important; border-top-color:var(--muted); } }


.road-trail { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.4; }
.road-trail .road-back { padding:0; background:none; color:var(--muted); font:inherit; cursor:pointer; text-underline-offset:3px; }
.road-trail .road-back:hover { color:var(--text); }
.road-trail b { color:var(--text); font-weight:600; }
body.light-mode { --control-line:var(--line); --line-strong:#9eaa9e; --error-soft:rgba(186,48,48,.12); }
@media(max-width:430px){.journey{flex-wrap:nowrap;gap:6px}.journey ol{flex:0 1 auto;min-width:0;gap:0}.journey li{font-size:10px}.journey li button{gap:4px;padding-left:4px;padding-right:4px;margin-left:-4px;margin-right:-4px}.journey li:not(:last-child)::after{margin:0 2px}.display-controls{margin-left:auto;gap:5px}.provider-picker select{max-width:104px;padding-left:9px;padding-right:19px;background-position:right 7px center;font-size:11px}.theme-toggle{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}





@media(max-width:760px){.track-top{grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:9px}.track-lead{grid-template-columns:56px minmax(0,1fr)}.track-top .cover-play,.track-top .cover-placeholder{grid-column:1;grid-row:1;align-self:start}.track-number{display:none}.track-main{grid-column:2;grid-row:1}.candidate strong,.track-main strong{font-size:16px}.fit-toggle{grid-column:2;grid-row:1;justify-self:end;align-self:center}.fit-why{display:none}.track-links{grid-column:2;grid-row:2}}

@media(max-width:760px){.shape-heading .eyebrow{display:none}}













.refine-toggle { display:inline-flex; align-items:center; margin:0 0 8px; padding:8px 13px 8px 19px; font-size:14px; }










.refine-toggle[aria-expanded="false"] { margin-bottom:17px; }
.refine-toggle[aria-expanded="true"] { color:var(--accent); }
.refine-panel { margin:0 0 22px; padding:18px 18px 14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.refine-row { margin-bottom:15px; }
.refine-label { margin:0 0 8px; color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.refine-chips { display:flex; flex-wrap:wrap; gap:7px; }



.refine-chip { display:inline-flex; align-items:baseline; gap:6px; border:1px solid var(--control-line); border-radius:999px; padding:7px 12px; background:transparent; color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.refine-chip em { font-style:normal; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.refine-chip[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.refine-chip[aria-pressed="true"] em { color:var(--accent); }
.refine-switch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; }
.refine-switch { display:inline-flex; align-items:center; gap:9px; font-size:14px; line-height:1; cursor:pointer; }
.refine-switch input { width:15px; height:15px; margin:0; flex:0 0 auto; accent-color:var(--accent); }



.refine-switch > span { margin:0; font-size:14px; font-weight:400; line-height:1; color:var(--text); letter-spacing:normal; text-transform:none; }
.refine-count { margin:0; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }






.refine-count.is-reading { display:inline-flex; align-items:center; gap:8px; }
.refine-count.is-reading::before { content:""; flex:0 0 auto; width:13px; height:13px; border:2px solid var(--control-line); border-top-color:var(--muted); border-radius:50%; animation:spin .7s linear infinite; }
.refine-count.is-thin { color:var(--accent); }
.refine-count.is-blocked { color:var(--error); }
.refine-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding-top:6px; border-top:1px solid var(--line); }


.refine-foot .text-button { margin-left:-13px; font-size:14px; }
.refine-note { color:var(--muted); font-size:12px; }
@media(max-width:760px){
  .refine-switch-row{flex-direction:column;align-items:flex-start;gap:10px}
  .refine-foot{flex-direction:column;align-items:flex-start;gap:2px}


  .refine-toggle{min-height:44px;padding:11px 13px 11px 19px}
  .refine-foot .text-button{min-height:44px;display:inline-flex;align-items:center}
  .toast-action{min-height:44px;display:inline-flex;align-items:center;padding:11px 10px}


  .refine-chip{min-height:44px;padding:9px 13px;font-size:14px}
  .refine-switch{min-height:44px}
  .refine-switch input{width:18px;height:18px}
}









#prompt {
  display:block; width:100%; border:1px solid var(--control-line); border-radius:10px;
  background:#0d100e; color:var(--text); font:inherit; font-size:15px; line-height:1.4;
  padding:12.5px 52px 12.5px 14px; resize:none;


  field-sizing:content;






  max-height:111px; overflow-y:auto;
}
#prompt::placeholder { color:#59605b; }
.field.prompt { position:relative; }











.prompt-go {
  position:absolute; right:6px; bottom:6px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:9px; background:transparent;
  color:var(--accent); opacity:.66; cursor:pointer; padding:0;
  transition:opacity .16s ease,background-color .16s ease;
}
.prompt-go svg { width:18px; height:18px; }
.prompt-go:hover,.prompt-go:focus-visible { opacity:1; background:var(--accent-soft); }

.field.prompt.has-text .prompt-go { opacity:1; background:var(--accent-soft); }
.prompt-go.is-working { color:transparent; opacity:1; }
.prompt-go.is-working::after {
  content:""; position:absolute; width:15px; height:15px; border:2px solid var(--control-line);
  border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite;
}
@media (prefers-reduced-motion:reduce) { .prompt-go.is-working::after { animation:none; } }


.prompt-fallback {
  display:block; margin:9px 0 0; padding:9px 11px; border:1px solid var(--line);
  border-radius:9px; background:var(--panel); color:var(--muted); font-size:12px; line-height:1.45;
}


.from-words { margin:0 0 24px; padding:15px 17px; border:1px solid var(--line); border-radius:13px; background:var(--panel); }
.from-words .said { margin:0 0 13px; color:var(--text); font-size:15px; line-height:1.45; }
.from-words .said b { color:var(--muted); font-weight:400; }
.maps { display:grid; gap:8px; margin:0 0 13px; }
.maps > div { display:flex; align-items:baseline; gap:10px; font-size:13px; line-height:1.4; }
.maps q { flex:0 0 auto; color:var(--accent); quotes:'"' '"'; }
.maps s { flex:0 0 auto; color:var(--faint); text-decoration:none; }
.maps p { margin:0; color:var(--muted); }


.maps > div.idle q { color:var(--muted); }
.words-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding-top:12px; border-top:1px solid var(--line); }
.words-foot .text-button { margin:0; font-size:13px; }

@media(max-width:760px) {

  #prompt { min-height:52px; font-size:17px; padding:13px 56px 13px 14px; max-height:123px; }
  .prompt-go { width:42px; height:42px; }
  .prompt-fallback { font-size:14px; }
  .words-foot { flex-direction:column; align-items:flex-start; gap:8px; }
  .maps > div { flex-wrap:wrap; gap:6px; }
}




body.light-mode #prompt { background:#fafbf7; border-color:#c8d0c6; }
body.light-mode #prompt::placeholder { color:#778078; }
body.light-mode .prompt-go { color:#4a6b00; }
body.light-mode .maps q { color:#4a5a12; }














.sk { display:block; border-radius:5px; background:var(--line); position:relative; overflow:hidden; }
.track-card.is-skeleton .cover-placeholder { color:transparent; background:var(--line); }
.track-card.is-skeleton .fit-toggle { border-color:var(--line); }




.sk-title { width:min(52%,260px); height:12px; }
.sk-sub { width:min(74%,330px); height:9px; margin-top:7px; }
.sk-num { width:17px; height:9px; }
.sk-fit { width:58px; height:10px; }



.summary-chips span.is-skeleton { color:transparent; background:var(--line); border-color:var(--line); position:relative; overflow:hidden; }

@media (prefers-reduced-motion:no-preference) {



  .sk::after,.summary-chips span.is-skeleton::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
    transform:translateX(-100%); animation:sk-sweep 1.45s ease-in-out infinite;
  }
  @keyframes sk-sweep { to { transform:translateX(100%); } }








  @keyframes track-resolve { from { opacity:0; } to { opacity:1; } }
  .playlist.is-resolving>.track-card>.track-top>* { animation:track-resolve .19s ease-out; }
}
body.light-mode .sk,body.light-mode .track-card.is-skeleton .cover-placeholder,body.light-mode .summary-chips span.is-skeleton { background:#e2e7dd; border-color:#e2e7dd; }




body.light-mode .sk::after,body.light-mode .summary-chips span.is-skeleton::after { background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); }























@media(max-width:520px){
















  .search-card .field>input,.search-card #prompt { border-color:transparent; }








  body.light-mode .search-card .field>input,
  body.light-mode .search-card #prompt,
  body.light-mode .search-card .field>input:focus,
  body.light-mode .search-card #prompt:focus { border-color:transparent; }
  .search-card .field::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    border:1px solid var(--control-line); border-radius:10px;

























    -webkit-mask-size:100% 3px,100% 100%;
    -webkit-mask-position:0 0,0 3px;
    -webkit-mask-repeat:no-repeat,no-repeat;
    -webkit-mask-composite:source-over;
    mask-size:100% 3px,100% 100%;
    mask-position:0 0,0 3px;
    mask-repeat:no-repeat,no-repeat;
    mask-composite:add;
  }







  .search-card .field-artist::before {
    -webkit-mask-image:linear-gradient(90deg,#000 10px,transparent 10px,transparent 57px,#000 57px),linear-gradient(#000,#000);
    mask-image:linear-gradient(90deg,#000 10px,transparent 10px,transparent 57px,#000 57px),linear-gradient(#000,#000);
  }
  .search-card .field-song::before {
    -webkit-mask-image:linear-gradient(90deg,#000 10px,transparent 10px,transparent 106px,#000 106px),linear-gradient(#000,#000);
    mask-image:linear-gradient(90deg,#000 10px,transparent 10px,transparent 106px,#000 106px),linear-gradient(#000,#000);
  }
  .search-card .field.prompt::before {
    -webkit-mask-image:linear-gradient(90deg,#000 10px,transparent 10px,transparent 233px,#000 233px),linear-gradient(#000,#000);
    mask-image:linear-gradient(90deg,#000 10px,transparent 10px,transparent 233px,#000 233px),linear-gradient(#000,#000);
  }



  .search-card .field:focus-within::before { border-color:var(--accent); }
  .search-card .field:has([aria-invalid=true])::before { border-color:var(--error); }


























  .search-card .field>input:focus,
  .search-card #prompt:focus { outline:none; border-color:transparent; }


  .search-card .field>label {
    position:absolute; top:0; left:16px; transform:translateY(-50%);
    margin:0; padding:0; z-index:2; pointer-events:none; line-height:1;
  }
  .search-card .field>label>span { margin:0; font-size:12px; line-height:1; }


  .fields { gap:17px; margin-bottom:13px; }
  .search-card .field.prompt { margin-top:17px; }

  .field.is-suggesting::after { bottom:17px; }


  .or-divider {
    margin:11px auto; max-width:190px; gap:10px;
    font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:lowercase;
    color:var(--faint); opacity:.8;
  }
  .or-divider::before,.or-divider::after { opacity:.45; }




  body.light-mode .search-card .field>label>span { color:#5d685f; }
}






.track-links a { border-color:transparent; gap:8px; color:var(--text); font-weight:600; }
.track-links a::before { content:""; width:0; height:0; border-left:8px solid var(--accent); border-top:5px solid transparent; border-bottom:5px solid transparent; }
.track-links a:hover { color:var(--accent); }
.track-main strong { font-weight:650; letter-spacing:-.01em; }
.track-main small { color:var(--muted); }
.track-main small b { color:#d7ddd8; font-weight:500; }
body.light-mode .track-main small b { color:#2c362d; }
.track-number { color:#586059; }
.track-top .cover-art { border-radius:6px; box-shadow:0 0 0 1px rgba(255,255,255,.07),0 8px 18px rgba(0,0,0,.5); }
body.light-mode .track-top .cover-art { box-shadow:0 0 0 1px rgba(23,32,24,.08),0 6px 14px rgba(23,32,24,.16); }
body:not(.light-mode) .playlist { border-top-color:rgba(255,255,255,.07); }
body:not(.light-mode) .playlist>.track-card { border-bottom-color:rgba(255,255,255,.05); }





.summary-chips { gap:0; }
.summary-chips span { border:0; padding:0; letter-spacing:.09em; }
.summary-chips span+span:not(.is-skeleton)::before { content:"\00b7"; margin:0 10px; color:var(--faint); }
.summary-chips span.is-skeleton { border-radius:4px; margin-right:14px; }





#playlist-section { position:relative; isolation:isolate; }
.playlist-title-block { min-width:0; display:grid; grid-template-columns:132px minmax(0,1fr); column-gap:28px; align-items:end; }
.playlist-title-block>* { grid-column:2; }
.playlist-mosaic { grid-column:1; grid-row:1/span 6; align-self:center; width:132px; height:132px; display:grid; border-radius:12px; overflow:hidden; background:#202620; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 22px 50px rgba(0,0,0,.6); }
.playlist-mosaic.is-grid { grid-template-columns:1fr 1fr; }
.playlist-mosaic img { display:block; width:100%; height:100%; object-fit:cover; }
.playlist-mosaic.is-empty::before { content:"\266b"; display:grid; place-items:center; color:#78817a; font-size:34px; }
body.light-mode .playlist-mosaic { background:#e2e7dd; box-shadow:0 0 0 1px rgba(23,32,24,.08),0 16px 36px rgba(23,32,24,.18); }



.playlist-glow { position:absolute; z-index:-1; left:-28px; top:-120px; width:min(760px,100%); height:520px; background-size:cover; background-position:center; filter:blur(90px) saturate(1.2); opacity:.12; pointer-events:none; -webkit-mask-image:radial-gradient(closest-side,black,transparent); mask-image:radial-gradient(closest-side,black,transparent); }
body.light-mode .playlist-glow { opacity:.08; }
@media (max-width:760px) {



  .playlist-title-block { width:100%; grid-template-columns:84px minmax(0,1fr); column-gap:16px; }
  .playlist-mosaic { grid-row:1/span 2; align-self:end; width:84px; height:84px; border-radius:9px; }
  .playlist-mosaic.is-empty::before { font-size:24px; }
  .playlist-title-block>.road-trail,.playlist-title-block>.summary-chips,.playlist-title-block>.playlist-notice { grid-column:1/-1; }
  .playlist-title-block>.summary-chips { margin-top:18px; }
  .playlist-glow { left:0; top:-80px; width:100%; height:360px; }
}







.track-primary-link::after { content:""; position:absolute; inset:0; border-radius:8px; }
.track-primary-link:focus-visible { outline:none; }
.track-primary-link:focus-visible::after { outline:2px solid var(--accent); outline-offset:3px; }
.cover-play { position:relative; z-index:1; display:block; padding:0; border:0; border-radius:7px; background:none; color:inherit; font:inherit; line-height:0; cursor:pointer; }
.cover-play .cover-art { display:block; }
.preview-glyph { position:absolute; inset:0; display:grid; place-items:center; border-radius:7px; background:rgba(0,0,0,.28); opacity:0; transition:opacity .15s ease; pointer-events:none; }





.preview-glyph::before { content:""; box-sizing:border-box; width:0; height:0; margin-left:3px; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; opacity:.85; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }

.is-previewing .preview-glyph::before,.is-preview-loading .preview-glyph::before { width:12px; height:16px; margin:0; border-width:0 4px; border-color:#fff; }


@media (hover:hover) { .track-top:hover .preview-glyph { opacity:1; background:rgba(0,0,0,.5); } .track-top:hover .preview-glyph::before { opacity:1; } .track-card[data-preview="none"] .track-top:hover .preview-glyph { opacity:0; } .track-card[data-preview="none"] .cover-play:hover .preview-glyph { opacity:1; } }
.cover-play:focus-visible .preview-glyph,.is-previewing .preview-glyph,.is-preview-paused .preview-glyph,.is-preview-loading .preview-glyph { opacity:1; }
@media (prefers-reduced-motion:no-preference) { .is-preview-loading .preview-glyph::before { animation:preview-wait 1.1s ease-in-out infinite alternate; } }
@keyframes preview-wait { to { opacity:.35; } }

.track-card[data-preview="none"] .preview-glyph::before { width:14px; height:2px; margin:0; border:0; background:#fff; }
.track-card[data-preview="none"] .cover-play { cursor:default; }





.track-card { position:relative; }
.track-card::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); transform-origin:left center; transform:scaleX(var(--preview-progress,0)); opacity:0; pointer-events:none; }
.track-card.is-previewing::after,.track-card.is-preview-paused::after,.track-card.is-preview-loading::after { opacity:1; }


.preview-time { display:none; color:var(--accent); font-variant-numeric:tabular-nums; }
.is-previewing .preview-time,.is-preview-paused .preview-time,.is-preview-loading .preview-time { display:inline; }
.is-previewing .track-rest,.is-preview-paused .track-rest,.is-preview-loading .track-rest { display:none; }
body.light-mode .preview-time { color:#405500; }








@media (hover:none) {
  .playlist:where(:not(:has(.is-previewing,.is-preview-paused,.is-preview-loading)))>.track-card:first-child:where(:not([data-preview="none"])) .preview-glyph { opacity:1; }
}
.preview-credit { margin:12px 10px 0; color:var(--faint); font-size:11px; text-align:right; }
.preview-credit a { color:inherit; }

.legal-page .deezer-credit { display:flex; align-items:center; gap:16px; margin:14px 0; }
.legal-page .deezer-credit img { display:block; width:54px; height:64px; flex:0 0 auto; }


body.light-mode .legal-page .deezer-credit img { box-sizing:content-box; padding:8px 10px; border-radius:10px; background:#111414; }



.legal-page.about-page { max-width:820px; }
.about-page .about-lede { max-width:640px; color:var(--muted); font-size:16px; line-height:1.6; }
.about-page section { margin-top:48px; }
.about-step { display:grid; gap:18px; }
.about-step > div { max-width:640px; }
.about-page .about-step p { margin-bottom:10px; }
.about-page .about-step h2 { margin-bottom:12px; font-size:20px; letter-spacing:-.01em; }
.about-step .step-no { margin:0 0 6px!important; color:var(--accent)!important; font-size:11px!important; font-weight:800; letter-spacing:.16em; }
body.light-mode .about-step .step-no { color:#5c7400!important; }
.about-list { margin:0 0 12px; padding-left:18px; color:var(--text); font-size:14px; line-height:1.65; }
.about-list li { margin-bottom:6px; }
.about-shot { margin:0; }
.about-shot img { display:block; width:100%; max-width:300px; height:auto; border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 44px rgba(0,0,0,.28); }
.about-shot.inline img { max-width:280px; border-radius:14px; box-shadow:none; }
.about-cta { margin-top:48px; padding-top:32px; border-top:1px solid var(--line); }
.about-page .about-cta p { margin-bottom:16px; font-size:16px; }
.about-cta .primary { display:inline-flex; width:auto; padding:15px 28px; color:#111600; text-decoration:none; }
body.light-mode .about-cta .primary { color:#fff; }
@media (max-width:759px) { .about-cta .primary { display:flex; width:100%; } }
@media (min-width:760px) {
  .about-step.has-shot { grid-template-columns:minmax(0,1fr) 250px; gap:36px; align-items:start; }
  .about-shot.tall img { max-width:250px; }
}