:root { --ink:#f7f7f1; --night:#090a08; --muted:#9b9d93; --line:#262820; --red:#eb4b3c; --earth:#8d623c; --green:#62b36e; --yellow:#f1d04e; --track-glow:#245c49; }
body.light,
html[data-theme="light"] body { --ink:#161914; --night:#f4f3eb; --muted:#5b6258; --line:#d5d6ca; --track-glow:#b8dbbc; }
body.light .mode.selected { color:#f7f7f1; } body.light .mode.selected small { color:#d5d7ce; }
html[data-theme="light"] .mode.selected { color:#f7f7f1; }
html[data-theme="light"] .mode.selected small { color:#d5d7ce; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:var(--night); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
button, input { font:inherit; } button { cursor:pointer; } .app-shell { width:min(100%,720px); margin:auto; padding:22px 20px 42px; overflow:hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; } .topbar-start { display:flex; align-items:center; gap:9px; min-width:0; } .wordmark { color:var(--ink); text-decoration:none; font-size:27px; font-weight:700; letter-spacing:-1.7px; } .wordmark span { color:var(--green); }.home-button { padding:7px 9px; color:var(--muted); border:1px solid var(--line); border-radius:999px; font-size:11px; font-weight:bold; text-decoration:none; white-space:nowrap; }.header-actions { display:flex; align-items:center; gap:8px; flex:none; }.theme-button { width:35px; height:35px; color:var(--ink); border:1px solid var(--line); border-radius:50%; background:transparent; font-size:17px; }
.profile-button { width:35px; height:35px; color:var(--night); background:var(--ink); border:0; border-radius:50%; font-size:13px; font-weight:bold; }
.home-button { display:inline-flex; align-items:center; gap:6px; }
.home-icon { width:15px; height:15px; flex:none; background:currentColor; -webkit-mask:url("assets/back-home-arrow.svg") center / contain no-repeat; mask:url("assets/back-home-arrow.svg") center / contain no-repeat; transition:transform .2s ease; }
.home-button:hover .home-icon { transform:translateX(-2px); }
.welcome { padding:62px 0 30px; } .eyebrow { color:var(--muted); font-size:10px; letter-spacing:1.5px; font-weight:bold; margin:0 0 10px; } h1,h2,p { margin-top:0; } h1 { max-width:540px; margin-bottom:16px; font-size:clamp(39px,9vw,64px); line-height:.98; letter-spacing:-3.7px; } h1 em { color:var(--yellow); font-family:Georgia, serif; font-weight:normal; } .intro { width:min(420px,100%); color:var(--muted); line-height:1.5; }
.modes { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:0 0 34px; } .mode { min-height:82px; text-align:left; padding:14px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:transparent; transition:transform .2s, border-color .2s, background .2s; } .mode:hover,.mode.selected { transform:translateY(-2px); } .mode b,.mode small { display:block; } .mode b { margin-bottom:5px; } .mode small { color:var(--muted); font-size:11px; } .mode-familiar.selected { background:#401b17; border-color:var(--red); } .mode-genre.selected { background:#312015; border-color:var(--earth); } .mode-balance.selected { background:#18341e; border-color:var(--green); } .mode-explore.selected { background:#3a3214; border-color:var(--yellow); }
.now-playing { display:grid; grid-template-columns:112px 1fr; gap:18px; align-items:center; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .art { aspect-ratio:1; position:relative; overflow:hidden; border-radius:4px; background:#245c49; } .art span { position:absolute; display:block; border-radius:50%; } .art span:nth-child(1) { width:130%; height:130%; left:-34%; top:32%; background:#f1d04e; } .art span:nth-child(2) { width:92%; height:92%; left:37%; top:-35%; background:#e96b44; } .art span:nth-child(3) { width:42%; height:42%; left:34%; top:35%; background:#0b251d; } .art-2 { background:#77352c; } .art-3 { background:#765226; } .art-4 { background:#164b3a; }.track-info h2 { margin-bottom:5px; font-size:clamp(22px,5vw,32px); line-height:1.04; letter-spacing:-1.3px; } .track-info > p:not(.eyebrow) { margin-bottom:0; color:#d1d3ca; }.track-info .album { margin-top:5px !important; color:var(--muted) !important; font-size:12px; }.track-info .path { margin-top:8px; color:var(--muted); font-size:12px; line-height:1.35; }
.transport { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 0 9px; border-bottom:1px solid var(--line); }.transport button { min-height:38px; min-width:0; color:var(--ink); border:0; background:transparent; font-size:16px; overflow-wrap:anywhere; }.transport #previousTrack,.transport #nextTrack { flex:1 1 84px; }.transport button span { padding:0 5px; color:var(--muted); font-size:11px; }.transport .transport-play { flex:0 0 52px; width:52px; min-height:52px; padding-left:3px; color:var(--night); border-radius:50%; background:var(--ink); }.transport .repeat-button,.transport .screen-button { flex:1 1 145px; padding:8px 0 0; border-top:1px solid var(--line); color:var(--muted); font-size:11px; white-space:normal; }.transport .repeat-button[aria-pressed="true"] { color:var(--green); }
.actions { display:grid; grid-template-columns:1fr 2fr; gap:9px; padding:16px 0; } .actions button,.support button { padding:14px; border-radius:8px; font-weight:bold; } .return-button { color:var(--ink); border:1px solid var(--line); background:transparent; } .drift-button { color:#151408; background:var(--yellow); border:1px solid var(--yellow); } .drift-button span { padding-left:14px; font-size:18px; }.direction-panel { padding:0 0 24px; }.directions { display:grid; gap:7px; }.directions button { display:flex; justify-content:space-between; gap:10px; text-align:left; padding:13px 0; color:var(--ink); border:0; border-bottom:1px solid var(--line); background:transparent; font-weight:bold; }.directions small { color:var(--muted); font-weight:normal; }.reason { margin:22px 0 16px; padding-left:16px; border-left:2px solid var(--green); }.reason p:last-child { margin:0; line-height:1.45; }.support { display:flex; gap:8px; }.support button { flex:1; color:#f7f7f1; background:#151613; border:1px solid var(--line); }.support button:first-child { color:#c9ead0; }
.lyrics-section { margin-top:8px; border-bottom:1px solid var(--line); }.lyrics-heading { display:flex; align-items:center; gap:12px; }.lyrics-toggle { display:flex; flex:1; align-items:center; justify-content:space-between; padding:17px 0; color:var(--ink); border:0; background:transparent; font-weight:bold; text-align:left; }.lyrics-toggle span { color:var(--yellow); font-size:20px; font-weight:normal; }.fullscreen-button { padding:6px 0; color:var(--muted); border:0; background:transparent; font-size:11px; }.lyrics { padding:2px 0 22px; color:var(--ink); }.lyrics .eyebrow { margin-bottom:9px; }.lyrics-window { position:relative; height:136px; overflow:hidden; mask-image:linear-gradient(transparent,black 20%,black 80%,transparent); }.lyrics-lines { display:grid; gap:10px; padding:45px 0; transition:transform .65s ease; }.lyric-line { color:var(--muted); font-size:16px; line-height:1.35; transition:color .35s, transform .35s; }.lyric-line.active { color:var(--ink); font-weight:bold; transform:scale(1.015); }
body.immersive { overflow:hidden; }body.immersive .app-shell { position:fixed; inset:0; z-index:2; width:100%; max-width:none; overflow:auto; padding:0 max(24px, calc((100vw - 720px) / 2)); background:radial-gradient(circle at 23% 20%, var(--track-glow), transparent 43%),radial-gradient(circle at 85% 80%, var(--yellow), transparent 58%),var(--night); }body.immersive .topbar,body.immersive .welcome,body.immersive .modes,body.immersive .transport,body.immersive .actions,body.immersive .direction-panel,body.immersive .reason,body.immersive .support,body.immersive .lyrics-heading { display:none; }body.immersive .now-playing { display:block; padding:7vh 0 0; border:0; text-align:center; }body.immersive .now-playing .art,body.immersive .now-playing .eyebrow,body.immersive .now-playing .path { display:none; }body.immersive .track-info h2 { margin-bottom:8px; font-size:clamp(23px,5vw,38px); }body.immersive .track-info > p:not(.eyebrow) { color:var(--ink); }body.immersive .track-info .album { color:var(--ink) !important; opacity:.72; }body.immersive .lyrics-section { display:flex; min-height:72vh; align-items:center; margin:0; border:0; }body.immersive .lyrics { display:block !important; width:100%; max-width:680px; margin:auto; }body.immersive .lyrics-window { height:58vh; }body.immersive .lyrics-lines { gap:18px; padding:25vh 0; }body.immersive .lyric-line { font-size:clamp(23px,5vw,43px); line-height:1.15; }body.immersive .lyrics-section { cursor:pointer; }
dialog { width:min(92vw,420px); color:#f7f7f1; background:#151613; border:1px solid #34362e; border-radius:14px; padding:0; } dialog::backdrop { background:#000b; }.profile-form { position:relative; padding:30px; }.profile-form h2 { font-size:29px; letter-spacing:-1px; }.close { position:absolute; right:16px; top:12px; padding:4px 9px; color:#f7f7f1; border:0; background:transparent; font-size:25px; }.profile-form label { display:block; margin:16px 0 6px; color:#c4c7bd; font-size:12px; }.profile-form input { width:100%; padding:12px; color:#f7f7f1; border:1px solid #5a5d53; border-radius:7px; background:#0e0f0d; }.form-note { color:#c4c7bd; font-size:12px; line-height:1.4; }.save-profile { width:100%; margin-top:8px; padding:13px; color:#151408; border:0; border-radius:8px; background:var(--green); font-weight:bold; }.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,110px); padding:11px 16px; color:var(--night); border-radius:8px; background:var(--ink); font-size:13px; transition:transform .3s; }.toast.show { transform:translate(-50%,0); }
.artist-link { display:block; margin-top:17px; color:#c9ead0; font-size:13px; text-align:center; }.back-link { color:var(--muted); font-size:12px; text-decoration:none; }.artist-intro { padding:57px 0 32px; }.artist-intro p:not(.eyebrow) { max-width:430px; color:var(--muted); line-height:1.5; }.upload-form > section { padding:25px 0; border-top:1px solid var(--line); }.upload-form label { display:block; margin:13px 0 6px; color:var(--muted); font-size:12px; }.upload-form label span { font-weight:normal; }.upload-form input:not([type="checkbox"]),.upload-form textarea { width:100%; padding:12px; color:var(--ink); border:1px solid var(--line); border-radius:7px; background:transparent; }.upload-form textarea { resize:vertical; line-height:1.45; }.file-input { min-height:48px; }.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:5px 12px; }.check-row { display:flex !important; align-items:flex-start; gap:9px; color:var(--ink) !important; line-height:1.4; }.check-row input { margin-top:3px; accent-color:var(--green); }.tip-row { padding:14px; border-radius:9px; background:#18341e; }.tip-row b,.tip-row small { display:block; }.tip-row small { margin-top:3px; color:#c9ead0; }.payment-note { color:var(--muted); font-size:12px; line-height:1.4; }.connect-button,.publish-button { width:100%; margin-top:13px; padding:14px; border-radius:8px; font-weight:bold; }.connect-button { color:var(--ink); border:1px solid var(--line); background:transparent; }.publish-button { color:#151408; border:0; background:var(--yellow); }
@media (max-width:470px) { .app-shell { padding-inline:15px; }.topbar { gap:6px; }.topbar-start { gap:6px; }.home-button { padding:6px 7px; font-size:10px; }.header-actions { gap:5px; }.welcome { padding-top:48px; }.now-playing { grid-template-columns:82px 1fr; gap:13px; }.track-info .path { display:none; }.modes { gap:6px; }.mode { min-height:76px; padding:11px; }.directions button { display:block; }.directions small { display:block; margin-top:4px; }.transport .transport-play { flex-basis:48px; width:48px; min-height:48px; }.transport .repeat-button,.transport .screen-button { flex-basis:120px; } }
.support { padding-top:16px; }
button:not(:disabled){transition:filter .2s ease,box-shadow .2s ease,border-color .2s ease,transform .2s ease}
button:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 5px 16px rgba(201,234,208,.12)}
button:not(:disabled):active{transform:translateY(1px) scale(.985)}
button:focus-visible,a:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.artist-link:hover,.back-link:hover{color:var(--yellow);text-decoration:underline;text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){button:not(:disabled){transition:none}button:not(:disabled):active{transform:none}.home-icon{transition:none}.home-button:hover .home-icon{transform:none}}
/* Make the demo boundaries clear without interrupting the listening flow. */
.track-info .prototype-note{margin-top:12px;color:var(--muted);font-size:10px;letter-spacing:.02em}
.artist-prototype-note{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.5}
/* Clearer working sizes across the listener and artist views. */
.eyebrow{font-size:11px}
.mode small{font-size:12px}
.track-info .album,.track-info .path{font-size:13px}
.track-info .prototype-note{font-size:11px}
.transport button span,.transport .repeat-button,.transport .screen-button,.fullscreen-button{font-size:12px}
.profile-form label,.form-note,.upload-form label,.payment-note,.back-link,.artist-link{font-size:13px}
.toast{font-size:14px}