@font-face{font-family:Onest;src:url('assets/Onest-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-display:swap}
/* Dark is the default. Brand colors stay immutable; semantic colors adapt the UI. */
:root{--blue:#0066BA;--cyan:#78D5E1;--red:#ED3B3E;--yellow:#F8E59A;--light:#F0EFEF;--brand-ink:#212121;--white:#fff;--page:#151719;--ink:#F7F8FA;--paper:#212121;--muted:#B2BAC4;--line:#4B525B;--soft:#292D33;--blue-soft:#233B48;--accent:#78D5E1;--chrome-line:#4B525B;--frame:#292D33;--frame-border:#4B525B;--switch-track:#4B525B;--overlay:#00000080;--toast:#343B44;--radius:24px;--phone-width:390px;--phone-height:844px;--phone-scale:1;font-family:Onest,Arial,sans-serif;color:var(--ink);background:var(--page);font-synthesis:none;color-scheme:dark}
:root[data-theme="light"]{--page:#F0EFEF;--ink:#212121;--paper:#fff;--muted:#686D74;--line:#E5E8EC;--soft:#F5F7FA;--blue-soft:#EAF3FB;--accent:#0066BA;--chrome-line:#D3D6D9;--frame:#fff;--frame-border:#DBDDE0;--switch-track:#D5DAE0;--overlay:#142C4652;--toast:#212121;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{touch-action:manipulation}button svg{pointer-events:none}svg.icon{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg.icon{margin:auto}button.plain{border:0;background:none;padding:0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.presentation-header{height:94px;max-width:1540px;padding:0 54px;display:flex;align-items:center;gap:24px;margin:auto;border-bottom:1px solid var(--chrome-line)}.presentation-brand{text-decoration:none;display:flex;gap:12px;align-items:center;font-size:15px;font-weight:600;letter-spacing:-.2px}.brand-dot{background:var(--blue);width:11px;height:11px;border-radius:50%}.brand-divider{color:var(--muted);font-weight:300;margin:0 2px}.concept-badge{font-size:11px;color:var(--muted);padding:8px 11px;border:1px solid var(--chrome-line);border-radius:6px}.concept-badge span{margin:0 3px}.view-switch{margin-left:auto;display:flex;border:1px solid var(--chrome-line);padding:4px;border-radius:10px;gap:3px}.view-switch button{font-size:12px;font-weight:500;background:none;border:0;border-radius:6px;padding:9px 14px;color:var(--muted)}.view-switch button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 4px #0000000A}
.interactive-stage{max-width:1150px;min-height:calc(100svh - 94px);padding:36px 54px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:110px;margin:auto}.presentation-copy{padding:0 0 32px}.edition{font-size:10px;font-weight:600;letter-spacing:1.55px;margin:0 0 28px;color:var(--muted)}.edition span{margin:0 8px;color:var(--muted)}.presentation-copy h1{font-size:72px;line-height:1.01;letter-spacing:-4px;margin:0 0 24px;font-weight:700}.presentation-copy h1>span{color:var(--accent)}.intro{font-size:18px;font-weight:300;line-height:1.5;margin:0 0 35px}.prototype-controls{width:246px;display:grid;grid-template-columns:1fr;gap:8px}.prototype-controls label{font-size:11px;color:var(--muted);font-weight:500;margin-top:10px}.control-field{position:relative}.control-field>span{position:absolute;pointer-events:none;right:13px;top:8px;color:var(--muted)}.prototype-controls select{width:100%;padding:11px 34px 11px 13px;appearance:none;border:1px solid var(--chrome-line);border-radius:8px;background:var(--page);font-size:12px;color:var(--ink)}.prototype-note{font-size:10px;line-height:1.7;color:var(--muted);margin-top:24px}.device-presentation{justify-self:center}.device-shell{width:calc(var(--phone-width)*var(--phone-scale));height:calc(var(--phone-height)*var(--phone-scale));position:relative;border-radius:calc(38px*var(--phone-scale));box-shadow:0 0 0 8px var(--frame),0 0 0 9px var(--frame-border),0 30px 60px -20px #34435336}.device{width:var(--phone-width);height:var(--phone-height);transform:scale(var(--phone-scale));transform-origin:top left;background:var(--paper);border-radius:38px;overflow:hidden;position:relative;display:flex;flex-direction:column;isolation:isolate}.device-caption{font-size:10px;color:var(--muted);text-align:center;margin:25px 0 0;letter-spacing:.1px}.device-caption span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue);margin:0 6px 1px 0}.status-bar{height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:8px 30px 0;font-size:14px;font-weight:600}.status-icons{display:flex;align-items:center;gap:5px}.status-icons svg{height:13px;width:18px;fill:currentColor}.status-icons .battery{width:24px}.app-header{height:71px;flex-shrink:0;padding:14px 26px 18px;display:flex;align-items:center;justify-content:space-between}.wordmark{width:191px;height:auto;display:block}.radio-word{font-size:9px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:2.8px;display:block;margin-top:8px}.station-waves{color:var(--accent);margin-right:1px}.station-waves svg.icon{width:29px;height:29px;stroke-width:1.3}.screen{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden}.screen-title{font-size:27px;line-height:1.17;font-weight:700;letter-spacing:-.9px;margin:0}.player-main{display:flex;flex:1;min-height:0;flex-direction:column;padding:6px 26px 14px}.player-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.player-topline .screen-title{font-size:25px;letter-spacing:-.8px}.live-label{font-size:10px;font-weight:600;letter-spacing:.25px;display:flex;align-items:center;gap:6px;color:var(--muted)}.live-label i{width:6px;height:6px;border-radius:50%;background:var(--red)}.artwork{width:270px;height:270px;flex-shrink:0;background:var(--blue);border-radius:25px;position:relative;display:flex;align-items:center;justify-content:center;margin:0 auto;overflow:hidden}.artwork img{width:176px;height:auto;display:block}.artwork-eyebrow,.artwork-caption{position:absolute;color:var(--white);font-weight:500;text-transform:uppercase;letter-spacing:2.7px;font-size:9px;left:0;right:0;text-align:center}.artwork-eyebrow{top:23px;color:var(--cyan)}.artwork-caption{bottom:21px;font-size:7px;letter-spacing:1.4px;color:var(--white)}.track-details{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:25px;min-height:63px}.track-details h2{font-size:29px;line-height:1.15;letter-spacing:-.9px;font-weight:700;margin:0 0 7px}.track-details p{font-size:16px;line-height:1.3;margin:0;color:var(--muted);font-weight:300}.icon-button{width:44px;height:44px;min-width:44px;border:0;background:transparent;display:grid;place-items:center;border-radius:50%;padding:0}.favorite-button{border:1px solid var(--line);color:var(--muted)}.favorite-button[aria-pressed=true]{color:var(--accent);background:var(--blue-soft);border-color:var(--blue-soft)}.favorite-button[aria-pressed=true] svg{fill:var(--accent);stroke:var(--accent)}.playback-caption{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:400;color:var(--muted);min-height:22px;margin:11px 0 0}.sound-wave{height:13px;display:flex;align-items:center;gap:2px;color:var(--accent)}.sound-wave i{display:block;width:2px;height:5px;background:currentColor;border-radius:3px}.sound-wave i:nth-child(2){height:11px}.sound-wave i:nth-child(3){height:8px}.sound-wave i:nth-child(4){height:13px}.is-playing .sound-wave i{animation:wave 1s ease-in-out infinite alternate}.is-playing .sound-wave i:nth-child(2){animation-delay:-.5s}.is-playing .sound-wave i:nth-child(3){animation-delay:-.75s}.is-playing .sound-wave i:nth-child(4){animation-delay:-.2s}.player-controls{display:flex;align-items:center;justify-content:space-between;margin:12px 25px 0;gap:28px}.side-control{width:62px;display:flex;align-items:center;flex-direction:column;gap:7px;font-size:10px;color:var(--muted)}.side-control .icon-button{background:var(--soft);width:48px;height:48px;color:var(--ink)}.side-control .icon-button.active{background:var(--blue-soft);color:var(--accent)}.play-button{width:84px;height:84px;min-width:84px;padding:0;border-radius:50%;border:0;background:var(--blue);color:white;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px #0066BA1F;transition:transform .15s,background .15s}.play-button:active{transform:scale(.94)}.play-button .icon{width:31px;height:31px;fill:currentColor;stroke-width:1.5}.play-button.is-loading .icon{fill:none;animation:spin 1.1s linear infinite}.player-controls-caption{text-align:center;color:var(--muted);font-size:11px;line-height:1.4;margin:12px 0 0;min-height:16px}.player-bottom-space{flex:1;min-height:8px;max-height:25px}.tab-bar{height:70px;flex-shrink:0;display:flex;align-items:stretch;border-top:1px solid var(--line);padding:6px 18px 2px;background:var(--paper)}.tab-button{flex:1;padding:7px 2px 6px;border:0;background:transparent;color:var(--muted);font-size:10px;font-weight:500;display:flex;gap:5px;align-items:center;justify-content:center;flex-direction:column;border-radius:12px}.tab-button svg.icon{width:22px;height:22px;stroke-width:1.7}.tab-button[aria-current=page]{color:var(--accent)}.tab-button[aria-current=page]::before{content:'';position:absolute;pointer-events:none}.tab-button[aria-current=page] svg{stroke-width:2}.home-indicator{height:24px;flex-shrink:0;display:grid;place-items:center;background:var(--paper)}.home-indicator::before{content:'';width:125px;height:4px;border-radius:5px;background:var(--ink);margin-bottom:3px}
.list-screen{padding:8px 26px 0;overflow:auto;flex:1;min-height:0;scrollbar-width:thin}.section-intro{color:var(--muted);font-size:13px;line-height:1.55;font-weight:300;margin:12px 0 24px}.search-field{height:46px;background:var(--soft);border:1px solid transparent;border-radius:12px;display:flex;align-items:center;padding:0 13px;gap:10px;margin:0 0 23px}.search-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.search-field svg.icon{width:19px;height:19px;color:var(--muted)}.search-field input{min-width:0;width:100%;border:0;background:none;font-size:12px;outline:none;color:var(--ink);padding:10px 0}.search-field input:focus-visible{outline:none}.search-field input::placeholder{color:var(--muted)}.list-heading{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:1.1px;color:var(--muted);margin-bottom:7px}.list-heading span:last-child{letter-spacing:0;font-weight:400}.favorite-list{list-style:none;padding:0;margin:0}.favorite-row{display:flex;align-items:center;gap:12px;min-height:88px;border-bottom:1px solid var(--line);padding:15px 0}.track-art{width:51px;height:51px;min-width:51px;border-radius:10px;position:relative;overflow:hidden;display:grid;place-items:center;color:var(--blue);background:var(--cyan)}.track-art .icon{width:23px;height:23px;stroke-width:1.1}.track-art.tone-yellow{background:var(--yellow);color:var(--brand-ink)}.track-art.tone-blue{background:var(--blue);color:white}.favorite-copy{min-width:0;flex:1}.favorite-copy h3{font-size:14px;line-height:1.35;font-weight:500;margin:0 0 4px;letter-spacing:-.1px}.favorite-copy p{font-size:11px;margin:0;color:var(--muted);font-weight:300;line-height:1.4}.remove-favorite{color:var(--accent)}.remove-favorite svg{fill:var(--accent);stroke:var(--accent);width:21px;height:21px}.library-note{margin:22px 0;font-size:11px;color:var(--muted);line-height:1.65;font-weight:300;display:flex;gap:9px}.library-note .icon{width:16px;height:16px;margin-top:1px}.empty-state{text-align:center;padding:54px 12px 20px}.empty-icon{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:var(--blue-soft);color:var(--accent);margin:0 auto 22px}.empty-icon svg{width:29px;height:29px;stroke-width:1.2}.empty-state h3{font-size:21px;letter-spacing:-.6px;margin:0 0 10px}.empty-state p{font-size:13px;line-height:1.65;color:var(--muted);font-weight:300;margin:0 0 20px}.text-button{background:none;border:0;color:var(--accent);font-size:13px;font-weight:600;padding:13px;border-radius:10px}.mini-player{display:flex;align-items:center;gap:10px;flex-shrink:0;margin:12px 16px 12px;border-radius:16px;background:var(--blue-soft);padding:8px 8px 8px 10px;min-height:65px}.mini-art{width:43px;height:43px;flex-shrink:0;border-radius:10px;background:var(--blue);color:var(--cyan);display:grid;place-items:center}.mini-art svg{width:24px;height:24px;stroke-width:1.2}.mini-copy{border:0;background:none;text-align:left;flex:1;min-width:0;padding:4px 0}.mini-copy strong{font-size:12px;font-weight:600;display:block;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-copy span{display:block;font-size:10px;color:var(--muted);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-play{color:var(--accent)}.mini-play svg{fill:currentColor;width:23px;height:23px}.mini-play.is-loading svg{fill:none;animation:spin 1.1s linear infinite}.settings-screen .screen-title{margin-bottom:28px}.settings-label{font-size:10px;letter-spacing:1.2px;color:var(--muted);font-weight:600;margin:26px 0 10px}.settings-label:first-of-type{margin-top:0}.settings-row{display:flex;align-items:center;width:100%;gap:13px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:18px 0;min-height:75px}.settings-row>.icon{width:21px;height:21px;color:var(--muted);stroke-width:1.5}.settings-row-copy{flex:1;min-width:0}.settings-row-copy strong{display:block;font-size:14px;font-weight:400;line-height:1.45}.settings-row-copy small{display:block;font-size:11px;line-height:1.45;color:var(--muted);font-weight:300;margin-top:3px}.settings-row>.chevron{width:16px;height:16px;color:var(--muted)}.toggle-switch{width:43px;height:25px;min-width:43px;background:var(--switch-track);border-radius:20px;padding:3px;transition:background .15s}.toggle-switch::after{content:'';display:block;width:19px;height:19px;background:white;border-radius:50%;box-shadow:0 1px 3px #0000001C;transition:transform .15s}.settings-row[aria-checked=true] .toggle-switch{background:var(--blue)}.settings-row[aria-checked=true] .toggle-switch::after{transform:translateX(18px)}.settings-footer{padding:25px 0 22px;font-size:11px;color:var(--muted);line-height:1.7;font-weight:300}.settings-footer strong{color:var(--accent);font-size:12px;font-weight:500}.connection-banner{padding:11px 13px;display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:12px;margin:13px 0 0;font-size:11px;line-height:1.5;background:var(--soft)}.connection-banner .icon{width:19px;height:19px;color:var(--muted)}.connection-banner strong{display:block;font-weight:600}.connection-banner p{margin:0;color:var(--muted);font-weight:300}.connection-banner button{margin-left:auto;background:none;border:0;color:var(--accent);font-size:11px;padding:8px;font-weight:600;min-height:44px}.has-connection-problem .artwork{width:230px;height:230px;border-radius:23px}.has-connection-problem .artwork img{width:150px}.has-connection-problem .artwork-eyebrow{top:16px}.has-connection-problem .artwork-caption{bottom:16px;font-size:6px}.has-connection-problem .track-details{margin-top:18px}.has-connection-problem .player-controls{margin-top:10px}.has-connection-problem .player-topline{margin-bottom:16px}.has-connection-problem .player-controls-caption{display:none}.has-connection-problem .playback-caption{margin-top:7px}
.sheet-overlay{position:absolute;inset:0;background:var(--overlay);z-index:10;display:flex;align-items:flex-end;animation:fade-in .18s ease}.sheet-panel{border-radius:28px 28px 0 0;background:var(--paper);width:100%;padding:10px 26px 26px;max-height:calc(100% - 64px);overflow:auto;box-shadow:0 -8px 32px #162D4714;animation:slide-up .2s ease}.sheet-handle{width:34px;height:4px;background:var(--muted);border-radius:4px;margin:0 auto 17px}.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.sheet-heading h2{margin:0;font-size:24px;letter-spacing:-.7px;line-height:1.25;font-weight:700}.sheet-close{background:var(--soft);height:36px;width:36px;min-width:36px}.sheet-close .icon{width:18px;height:18px}.sheet-description{font-size:13px;line-height:1.65;color:var(--muted);font-weight:300;margin:0 0 23px}.timer-illustration{width:66px;height:66px;background:var(--blue-soft);color:var(--accent);border-radius:22px;display:grid;place-items:center;margin:3px 0 20px}.timer-illustration .icon{width:31px;height:31px;stroke-width:1.4}.timer-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0 0 25px}.timer-preset{height:66px;border-radius:13px;border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center}.timer-preset strong{font-size:20px;font-weight:500}.timer-preset span{font-size:10px;color:var(--muted)}.timer-preset[aria-checked=true]{border:1.5px solid var(--accent);background:var(--blue-soft);color:var(--accent)}.timer-preset[aria-checked=true] span{color:var(--accent)}.primary-button{width:100%;min-height:52px;border:0;border-radius:13px;background:var(--blue);color:white;font-size:14px;font-weight:600;padding:14px 18px}.secondary-button{width:100%;min-height:47px;border:0;border-radius:13px;background:transparent;color:var(--muted);font-size:12px;font-weight:500;margin-top:5px}.sheet-home{width:125px;height:4px;border-radius:4px;background:var(--ink);margin:17px auto -14px}.info-content{font-size:13px;line-height:1.7;color:var(--muted);font-weight:300}.info-content p{margin:0 0 18px}.info-content .info-card{display:flex;gap:13px;border-radius:15px;background:var(--soft);padding:17px;margin-bottom:23px;color:var(--ink)}.info-card .icon{color:var(--accent);margin-top:2px}.info-card strong{display:block;font-weight:500;font-size:13px}.info-card small{display:block;color:var(--muted);font-size:11px;line-height:1.55;margin-top:3px}.about-logo{margin:16px auto 24px;background:var(--blue);width:225px;height:180px;border-radius:18px;display:grid;place-items:center}.about-logo img{width:135px;height:auto}.toast{position:absolute;left:22px;right:22px;bottom:104px;padding:13px 16px;background:var(--toast);color:var(--white);box-shadow:0 4px 16px #00000010;border-radius:12px;font-size:12px;text-align:center;line-height:1.5;z-index:20;animation:fade-in .15s ease}.reduced-motion *, .reduced-motion *::before,.reduced-motion *::after{animation:none!important;transition:none!important}.high-contrast{--muted:#414750;--line:#C5CBD2}.app-header~.screen .enlarged{font-size:1.1em}
.board-stage{max-width:1540px;padding:45px 54px 30px;margin:auto}.board-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin:0 0 38px}.board-heading .edition{margin-bottom:12px}.board-heading h1{font-size:34px;letter-spacing:-1.2px;line-height:1.2;margin:0}.board-heading>p{font-size:11px;line-height:1.6;color:var(--muted);font-weight:300;margin:0 0 3px}.screen-board{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.board-item{min-width:0}.board-screen-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px;font-size:12px;font-weight:500}.board-screen-title span{color:#959CA5;font-size:10px}.board-item .device-shell{box-shadow:0 0 0 5px var(--frame),0 0 0 6px var(--frame-border),0 15px 24px -20px #34435336;pointer-events:none;user-select:none}.board-item .device{border-radius:30px}.board-footer{display:flex;align-items:center;justify-content:space-between;margin-top:38px;padding-top:21px;border-top:1px solid var(--chrome-line);font-size:10px;letter-spacing:.2px;color:var(--muted)}.palette{display:flex;gap:7px}.palette i{background:var(--swatch);border-radius:50%;width:17px;height:17px;border:1px solid #21212115}.mobile-demo-label{display:none}
@keyframes wave{from{transform:scaleY(.5)}to{transform:scaleY(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes slide-up{from{transform:translateY(20px)}to{transform:translateY(0)}}
@media(max-width:1150px){.presentation-header{padding:0 34px}.interactive-stage{gap:50px;padding:32px 65px}.presentation-copy h1{font-size:62px;letter-spacing:-3px}.board-stage{padding:36px 34px 26px}.screen-board{gap:24px}.board-heading h1{font-size:28px}}
@media(max-width:900px){.concept-badge{display:none}.interactive-stage{gap:40px;padding:30px 42px}.presentation-copy h1{font-size:52px;letter-spacing:-2.8px}.intro{font-size:16px}.edition{font-size:8px;letter-spacing:1px}.screen-board{grid-template-columns:repeat(2,1fr);gap:32px 50px}.board-item{justify-self:center}.board-heading h1{font-size:26px}.board-heading>p{display:none}.presentation-brand{font-size:13px}.presentation-header{gap:15px}.view-switch button{font-size:10px;padding:8px 9px}}
@media(max-width:600px){:root{background:var(--paper);--phone-scale:1!important;--phone-width:100vw!important;--phone-height:calc(100dvh - 22px)!important}.presentation-header,.presentation-copy,.device-caption{display:none}.interactive-stage{display:block;min-height:0;padding:0;margin:0}.device-presentation{width:100%}.device-shell{width:100vw;height:calc(100dvh - 22px);border-radius:0;box-shadow:none}.device{width:100vw;height:calc(100dvh - 22px);transform:none;border-radius:0}.mobile-demo-label{display:block;background:var(--page);height:22px;line-height:22px;margin:0;text-align:center;font-size:9px;letter-spacing:.2px;color:var(--muted)}.home-indicator{height:20px}.status-bar{height:42px}.app-header{height:66px}.player-main{padding-top:4px;padding-bottom:8px}.player-topline{margin-bottom:18px}.track-details{margin-top:21px}.player-bottom-space{min-height:3px}.board-stage{padding:26px 18px;background:var(--page)}.board-heading h1{font-size:25px}.screen-board{grid-template-columns:1fr}.board-item .device-shell{--phone-width:390px!important;--phone-height:844px!important;width:calc(390px*var(--board-scale));height:calc(844px*var(--board-scale))}.board-item .device{width:390px;height:844px;transform:scale(var(--board-scale));border-radius:30px}.board-item{max-width:100%}.board-footer{gap:14px;flex-wrap:wrap}.board-stage .edition{font-size:9px}}
@media(max-width:380px){.app-header{padding-left:23px;padding-right:23px}.player-main,.list-screen{padding-left:23px;padding-right:23px}.player-topline .screen-title{font-size:24px}.artwork{width:252px;height:252px}.artwork img{width:164px}.track-details{margin-top:20px}.track-details h2{font-size:27px}.player-controls{margin-left:18px;margin-right:18px;margin-top:9px;gap:24px}.play-button{width:80px;height:80px;min-width:80px}.playback-caption{margin-top:8px}.player-controls-caption{margin-top:9px}.sheet-panel{padding-left:23px;padding-right:23px}}
@media(max-height:760px) and (max-width:600px){.app-header{height:56px;padding-top:9px;padding-bottom:12px}.status-bar{height:35px;padding-top:3px}.artwork{width:222px;height:222px;border-radius:22px}.artwork img{width:144px}.artwork-eyebrow{top:16px}.artwork-caption{bottom:16px;font-size:6px}.player-topline{margin-bottom:13px}.player-topline .screen-title{font-size:23px}.track-details{margin-top:17px;min-height:54px}.track-details h2{font-size:26px;margin-bottom:4px}.track-details p{font-size:14px}.play-button{width:73px;height:73px;min-width:73px}.player-controls{margin-top:7px}.player-controls-caption{margin-top:7px;font-size:10px}.tab-bar{height:63px}.playback-caption{margin-top:5px}.has-connection-problem .artwork{width:190px;height:190px}.has-connection-problem .artwork img{width:120px}.has-connection-problem .artwork-caption{font-size:5px;letter-spacing:1px}.has-connection-problem .connection-banner{margin-top:9px;padding-top:7px;padding-bottom:7px}.has-connection-problem .track-details{margin-top:11px}.has-connection-problem .player-topline{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.app-content{display:flex;flex-direction:column;height:100%;min-height:0}
.demo-reset-row{display:flex;align-items:center;gap:12px;margin-top:4px}.demo-reset-row button{flex-shrink:0;min-height:44px;border:0;background:transparent;padding:8px 2px;color:var(--accent);font-size:11px;font-weight:500;border-radius:5px}.demo-reset-row [role=status]{font-size:10px;line-height:1.4;color:var(--muted)}
.app-header{height:60px;padding-top:14px;padding-bottom:14px}
.station-waves{display:flex;align-items:center;gap:7px}
.station-waves svg.icon{width:25px;height:25px}
.radio-word{font-size:8px;letter-spacing:1.6px;margin:0}
.artwork-eyebrow{color:var(--white)}
.player-main{padding-bottom:8px}
.player-topline{margin-bottom:18px}
.track-details{margin-top:18px;min-height:60px}
.playback-caption{min-height:18px;margin-top:7px}
.player-controls{margin-top:10px}
.player-controls-caption{display:none}
.player-bottom-space{min-height:0;max-height:16px}
.sheet-close{width:44px;height:44px;min-width:44px}
.mini-copy{min-height:44px}
.toggle-switch{box-shadow:inset 0 0 0 1px var(--muted)}
.settings-row[aria-checked=true] .toggle-switch{box-shadow:none}
.board-screen-title span{color:var(--muted)}
.toast{display:flex;align-items:center;justify-content:center;gap:12px}
.toast button{min-height:44px;padding:5px 8px;margin:-9px -4px -9px 0;color:var(--cyan);background:none;border:0;font-size:12px;font-weight:600}
.compact-frame .artwork{width:244px;height:244px}
.compact-frame .artwork img{width:160px}
.compact-frame .artwork-eyebrow{top:19px}
.compact-frame .artwork-caption{bottom:18px;font-size:6px}
.compact-frame .player-topline{margin-bottom:14px}
.compact-frame .player-main{padding-left:23px;padding-right:23px}
.compact-frame .track-details{margin-top:16px}
.compact-frame .player-controls{margin-left:18px;margin-right:18px}
.compact-frame .has-connection-problem .artwork{width:208px;height:208px}
.compact-frame .has-connection-problem .artwork img{width:136px}
@media(max-width:600px){.station-waves .radio-word{display:none}.app-header{height:60px}.player-topline{margin-bottom:16px}.player-main{padding-bottom:5px}.player-bottom-space{max-height:13px}}
@media(max-width:380px){.artwork{width:248px;height:248px}.artwork img{width:164px}.player-topline{margin-bottom:13px}.track-details{margin-top:16px}.player-controls{margin-top:8px}.playback-caption{margin-top:5px}}
@media(max-height:760px) and (max-width:600px){.app-header{height:56px}.artwork{width:216px;height:216px}.artwork img{width:142px}.track-details{margin-top:13px;min-height:52px}.player-topline{margin-bottom:11px}.player-controls{margin-top:7px}.playback-caption{margin-top:4px}.player-bottom-space{max-height:10px}}

/* Theme choice is available in the product, and the presentation uses the same theme. */
.theme-fieldset{margin:0 0 25px;padding:0;border:0;min-width:0}
.theme-fieldset legend{padding:0;font-size:10px;font-weight:600;letter-spacing:1.2px;color:var(--muted);margin:0 0 12px}
.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px;background:var(--soft);border-radius:14px}
.theme-option{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:9px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-size:13px;font-weight:500}
.theme-option .icon{width:18px;height:18px;margin:0}
.theme-option[aria-checked=true]{background:var(--blue-soft);border-color:var(--accent);color:var(--accent)}
:root[data-theme="dark"] .high-contrast{--muted:#E1E5EB;--line:#858D98}
:root[data-theme="dark"] .sheet-panel{background:var(--soft)}
:root[data-theme="dark"] .settings-row[aria-checked=true] .toggle-switch{background:var(--cyan)}
:root[data-theme="dark"] .settings-row[aria-checked=true] .toggle-switch::after{background:var(--brand-ink)}
:root[data-theme="dark"] .timer-preset{background:var(--paper)}
:root[data-theme="dark"] .timer-preset[aria-checked=true]{background:var(--blue-soft)}
/* The concept selector is presentation UI, separate from the product navigation. */
.concept-switch{display:flex;gap:4px;padding:4px;border:1px solid var(--chrome-line);border-radius:10px;margin-left:auto}
.concept-switch button{min-height:40px;padding:9px 16px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap}
.concept-switch button[aria-checked=true]{background:var(--ink);color:var(--paper)}
.presentation-header .view-switch{margin-left:0;flex-shrink:0}
.presentation-header{gap:16px}
/* Concept 2: neutral steel surfaces are a separate direction, not new brand rules. */
:root[data-concept="2"]{--page:#111315;--paper:#1C1F22;--ink:#F2F3F4;--muted:#ABB2B9;--line:#464C52;--soft:#282D32;--blue-soft:#353A40;--accent:#D9DDE1;--chrome-line:#42484F;--frame:#282D32;--frame-border:#565D65;--toast:#353A40;--steel-action:#D9DDE1;--steel-action-ink:#1C1F22}
:root[data-concept="2"][data-theme="light"]{--page:#E8E9EB;--paper:#F3F4F5;--ink:#202428;--muted:#626970;--line:#CCD0D4;--soft:#E6E8EB;--blue-soft:#DDE1E5;--accent:#353A40;--chrome-line:#B9BEC4;--frame:#D9DDE1;--frame-border:#969EA6;--toast:#353A40;--steel-action:#353A40;--steel-action-ink:#F2F3F4}
:root[data-concept="2"] .presentation-copy h1{font-weight:500;letter-spacing:-3.3px}
:root[data-concept="2"] .brand-dot{background:var(--accent);border-radius:2px}
:root[data-concept="2"] .presentation-copy h1>span{color:var(--muted)}
:root[data-concept="2"] .intro{color:var(--muted);font-size:16px}
:root[data-concept="2"] .device-shell{box-shadow:0 0 0 6px var(--frame),0 0 0 7px var(--frame-border),0 24px 54px -20px #00000055}
:root[data-concept="2"] .screen-board{grid-template-columns:repeat(3,1fr);max-width:1200px;margin:0 auto;gap:48px}
:root[data-concept="2"] .board-item .device-shell{box-shadow:0 0 0 5px var(--frame),0 0 0 6px var(--frame-border),0 14px 30px -15px #00000055}
[data-concept="2"].device .status-bar{height:44px;padding-top:8px}
[data-concept="2"] .steel-header{padding:12px 26px 18px;height:80px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.steel-nav{display:flex;align-items:center;gap:6px}
.steel-nav-button{color:var(--muted);border:0;background:none}
.steel-nav-button[aria-current=page]{color:var(--ink)}
.steel-nav .steel-nav-button[aria-current=page]{background:var(--soft);border-radius:11px}
.steel-nav .icon{width:21px;height:21px;stroke-width:1.5}
.steel-home{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;text-transform:uppercase;letter-spacing:1.3px;font-size:10px;font-weight:500;border-radius:6px}
.steel-home .back-chevron{width:17px;height:17px;transform:rotate(180deg)}
.steel-live-dot{width:5px;height:5px;border-radius:50%;background:var(--muted)}
.steel-player{padding:4px 28px 0;overflow:auto;scrollbar-width:thin}
.steel-artwork{position:relative;width:100%;max-width:292px;aspect-ratio:1;flex-shrink:0;margin:4px auto 0;background:#23272B;border:1px solid #555C63;border-bottom-color:#151719;border-radius:12px;display:grid;place-items:center;box-shadow:inset 0 1px 0 #747D8530,inset 0 -1px 0 #00000070}
.steel-artwork::after{content:'';position:absolute;bottom:0;left:0;right:0;height:7px;border-radius:0 0 11px 11px;background:#353A40;border-top:1px solid #535B63;pointer-events:none}
.steel-artwork img{width:64%;max-width:184px;height:auto;display:block}
.steel-player .track-details{margin-top:30px;min-height:68px;gap:16px}
.steel-player .track-details h2{font-size:31px;font-weight:500;letter-spacing:-.75px;line-height:1.18;margin:0 0 7px}
.steel-player .track-details p{font-size:15px;font-weight:300;color:var(--muted)}
.steel-player .favorite-button{border-color:var(--line);border-radius:11px;background:transparent}
.steel-player .favorite-button[aria-pressed=true]{border-color:var(--accent);background:var(--soft)}
.steel-player .favorite-button .icon{width:21px;height:21px}
.steel-play-area{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:20px 0 8px;min-height:146px}
[data-concept="2"] .play-button{width:88px;height:88px;min-width:88px;background:var(--steel-action);color:var(--steel-action-ink);border:1px solid #FFFFFF45;box-shadow:inset 0 1px 0 #FFFFFF55,0 5px 15px #00000020}
[data-concept="2"] .play-button .icon{width:29px;height:29px;stroke-width:1.3}
.steel-play-status{font-size:11px;line-height:1.5;margin:13px 0 0;min-height:17px;color:var(--muted);font-weight:400;letter-spacing:.1px}
[data-concept="2"] .connection-banner{border-radius:8px;margin-top:16px;font-size:10px;padding:10px 11px}
.steel-player.has-connection-problem .steel-artwork{max-width:245px}
.steel-player.has-connection-problem .track-details{margin-top:22px}
.steel-player.has-connection-problem .steel-play-area{min-height:120px;padding-top:15px}
.steel-player.has-connection-problem .steel-play-status{display:none}
[data-concept="2"] .list-screen{padding:8px 28px 0}
[data-concept="2"] .screen-title{font-size:30px;line-height:1.2;letter-spacing:-.85px;font-weight:500}
[data-concept="2"] .section-intro{font-size:12px;margin:12px 0 26px}
[data-concept="2"] .search-field{border-radius:9px;margin-bottom:29px}
[data-concept="2"] .favorite-row{min-height:87px;padding:17px 0}
[data-concept="2"] .favorite-copy h3{font-size:15px;line-height:1.45;font-weight:400}
[data-concept="2"] .favorite-copy p{font-size:12px;line-height:1.5}
[data-concept="2"] .remove-favorite{border-radius:11px}
[data-concept="2"] .favorite-list{margin-bottom:24px}
[data-concept="2"] .mini-player{background:var(--soft);border:1px solid var(--line);border-radius:11px;margin:16px 20px 10px;padding:9px 9px 9px 12px}
[data-concept="2"] .mini-art{background:transparent;color:var(--muted);width:29px}
[data-concept="2"] .mini-art .icon{width:19px;height:19px}
[data-concept="2"] .mini-copy span{font-size:10px}
[data-concept="2"] .mini-play{color:var(--ink)}
[data-concept="2"] .home-indicator{height:29px}
[data-concept="2"] .home-indicator::before{height:3px;width:112px;background:var(--muted)}
[data-concept="2"] .steel-settings .screen-title{margin-bottom:38px}
[data-concept="2"] .theme-options{border-radius:10px;background:var(--soft)}
[data-concept="2"] .theme-option{border-radius:7px;min-height:50px}
[data-concept="2"] .empty-state h3{font-weight:500}
[data-concept="2"] .empty-icon{background:var(--soft);border-radius:12px}
[data-concept="2"] .toast{bottom:48px;border-radius:10px}
[data-concept="2"] .toast button{color:#D9DDE1}
[data-concept="2"].compact-frame .steel-artwork{max-width:270px}
[data-concept="2"].compact-frame .steel-player.has-connection-problem .steel-artwork{max-width:222px}
@media(max-width:1150px){.presentation-header{padding-left:28px;padding-right:28px}.presentation-header .concept-badge{display:none}:root[data-concept="2"] .screen-board{gap:30px}}
@media(max-width:900px){.concept-switch button{padding:8px 12px}.presentation-brand{font-size:12px;gap:8px}:root[data-concept="2"] .screen-board{grid-template-columns:repeat(2,1fr);gap:34px}}
@media(max-width:600px){
  .presentation-header{display:flex;height:64px;padding:8px 14px;justify-content:center;border-bottom:1px solid var(--chrome-line)}
  .presentation-header .presentation-brand,.presentation-header .concept-badge,.presentation-header .view-switch{display:none}
  .concept-switch{width:100%;max-width:420px;margin:0;padding:3px;border-radius:9px;gap:4px}
  .concept-switch button{flex:1;min-height:40px;padding:7px 12px;font-size:12px}
  .device-shell,.device{height:calc(100dvh - 86px)}
  .device-shell{box-shadow:none!important}
  .board-item .device-shell{height:calc(844px*var(--board-scale))}
  .board-item .device{height:844px}
  :root[data-concept="2"] .screen-board{grid-template-columns:1fr}
  :root[data-concept="1"] .artwork{width:238px;height:238px}
  :root[data-concept="1"] .artwork img{width:156px}
  :root[data-concept="1"] .has-connection-problem .artwork{width:198px;height:198px}
  :root[data-concept="1"] .has-connection-problem .artwork img{width:128px}
  [data-concept="2"] .steel-header{height:66px;padding:6px 26px 13px}
  [data-concept="2"] .steel-artwork{max-width:264px}
  [data-concept="2"] .steel-player .track-details{margin-top:26px}
  [data-concept="2"] .steel-player.has-connection-problem .steel-artwork{max-width:220px}
  [data-concept="2"] .steel-play-area{min-height:130px;padding-top:15px;padding-bottom:0}
  [data-concept="2"] .home-indicator{height:25px}
}
@media(max-width:380px){
  [data-concept="2"] .steel-header{padding-left:23px;padding-right:23px}
  [data-concept="2"] .steel-player,[data-concept="2"] .list-screen{padding-left:25px;padding-right:25px}
  [data-concept="2"] .steel-artwork{max-width:246px}
  [data-concept="2"] .steel-player .track-details{margin-top:22px;min-height:62px}
  [data-concept="2"] .steel-player .track-details h2{font-size:28px}
  [data-concept="2"] .play-button{width:80px;height:80px;min-width:80px}
  [data-concept="2"] .steel-player.has-connection-problem .steel-artwork{max-width:205px}
}
@media(max-height:760px) and (max-width:600px){
  :root[data-concept="1"] .artwork{width:205px;height:205px}
  :root[data-concept="1"] .artwork img{width:134px}
  :root[data-concept="1"] .has-connection-problem .artwork{width:172px;height:172px}
  :root[data-concept="1"] .has-connection-problem .artwork img{width:112px}
  [data-concept="2"] .steel-header{height:55px}
  [data-concept="2"] .steel-artwork{max-width:220px}
  [data-concept="2"] .steel-player.has-connection-problem .steel-artwork{max-width:178px}
  [data-concept="2"] .steel-player .track-details{margin-top:17px;min-height:56px}
  [data-concept="2"] .steel-play-area{min-height:112px;padding-top:12px}
  [data-concept="2"] .play-button{width:73px;height:73px;min-width:73px}
}

/* Playback artwork: the original logo stays still; only its background and meter move. */
.artwork-motion{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;color:#FFFFFF}
.steel-artwork .artwork-motion{color:#D9DDE1}
.artwork-sheen{position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 32%,currentColor 50%,transparent 68%);opacity:.07;transform:translateX(-25%)}
.artwork-equalizer{position:absolute;left:28%;right:28%;bottom:7%;height:16px;display:flex;justify-content:center;align-items:center;gap:3px;opacity:.85}
.artwork-equalizer i{display:block;flex:1;max-width:3px;height:var(--bar-height);background:currentColor;border-radius:3px;transform:scaleY(.22);transform-origin:center}
.artwork img,.steel-artwork img,.artwork-eyebrow,.artwork-caption{position:relative;z-index:1}
.artwork-eyebrow,.artwork-caption{position:absolute}
#interactive-stage:not([hidden]) .device.artwork-playing:not([hidden]) .artwork-motion{opacity:1}
/* Explicit product choice: playback artwork runs even when reduced motion is enabled. */
#interactive-stage:not([hidden]) .device.artwork-playing:not([hidden]) .artwork-sheen{animation:artwork-light 5s ease-in-out infinite alternate!important}
#interactive-stage:not([hidden]) .device.artwork-playing:not([hidden]) .artwork-equalizer i{animation:artwork-level var(--bar-duration) ease-in-out var(--bar-delay) infinite!important}
#interactive-stage:not([hidden]) .device.artwork-playing:not([hidden]) .artwork-caption{visibility:hidden}
.page-hidden #interactive-stage:not([hidden]) .device.artwork-playing:not([hidden]) .artwork-motion *{animation-play-state:paused!important}
@keyframes artwork-light{from{transform:translateX(-25%);opacity:.05}to{transform:translateX(25%);opacity:.15}}
@keyframes artwork-level{0%,100%{transform:scaleY(.22)}25%{transform:scaleY(.85)}50%{transform:scaleY(.4)}75%{transform:scaleY(1)}}
@media(max-width:600px){
  .artwork-equalizer{left:24%;right:24%;height:26px;opacity:1}
  .artwork-equalizer i{max-width:4px}
}