:root{color:#f5f4ea;background:#111312;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;overflow-x:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.nativeAudioElement{height:1px;left:0;opacity:.01;pointer-events:none;position:fixed;top:0;width:1px;z-index:-1}.app{--accent: #72e0c4;--poster: none;background:radial-gradient(circle at 18% 8%,rgba(255,188,102,.16),transparent 32rem),radial-gradient(circle at 82% 18%,rgba(114,224,196,.14),transparent 30rem),#111312;color:#f5f4ea;display:grid;grid-template-rows:minmax(0,1fr);min-height:100dvh}.stage{isolation:isolate;min-height:100dvh;overflow:hidden;position:relative}.sceneVideo,.sceneFallback{height:100%;top:0;right:0;bottom:0;left:0;min-height:100%;object-fit:cover;position:absolute;width:100%}.sceneVideo{opacity:.92;z-index:-3}.hiddenVideo{opacity:0}.sceneFallback{background:linear-gradient(180deg,#1113120f,#11131261),var(--poster) center / cover;filter:saturate(1.06);transform:scale(1.02);z-index:-4}.sceneFallback:before{background:linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.08) 50%,transparent 53%),radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 34rem);content:"";top:-10%;right:-10%;bottom:-10%;left:-10%;opacity:.46;position:absolute;transform-origin:50% 45%}.ambientLayer{top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute}.ambientLayer:before,.ambientLayer:after{content:"";top:-20%;right:-20%;bottom:-20%;left:-20%;position:absolute}.ambientLayer.fireplace:before{animation:slowGlow 5s ease-in-out infinite alternate;background:radial-gradient(circle at 50% 78%,rgba(255,188,102,.62),transparent 26rem)}.ambientLayer.rain:before,.ambientLayer.thunderstorm:before{animation:rainfall .7s linear infinite;background-image:repeating-linear-gradient(105deg,rgba(215,238,242,.38) 0 2px,transparent 2px 22px)}.ambientLayer.ocean:before{animation:oceanDrift 8s ease-in-out infinite alternate;background:repeating-radial-gradient(ellipse at 50% 85%,rgba(215,210,165,.24) 0 5px,transparent 5px 32px)}.ambientLayer.forest-night:before{animation:fireflies 7s ease-in-out infinite alternate;background:radial-gradient(circle at 28% 42%,rgba(199,214,109,.5) 0 3px,transparent 5px),radial-gradient(circle at 62% 35%,rgba(199,214,109,.46) 0 2px,transparent 5px),radial-gradient(circle at 74% 58%,rgba(199,214,109,.42) 0 3px,transparent 5px)}.ambientLayer.snowfall:before{animation:snowDrift 7s linear infinite;background-image:radial-gradient(circle,rgba(242,245,237,.76) 0 2px,transparent 3px),radial-gradient(circle,rgba(242,245,237,.5) 0 1px,transparent 2px);background-position:0 0,28px 44px;background-size:88px 88px,132px 132px}.ambientLayer.cafe:before{animation:steam 6s ease-in-out infinite alternate;background:radial-gradient(ellipse at 47% 56%,rgba(255,255,255,.18),transparent 18rem),radial-gradient(ellipse at 54% 50%,rgba(231,196,138,.26),transparent 20rem)}.ambientLayer.wind-chimes:before{animation:chimeSwing 5s ease-in-out infinite alternate;background:linear-gradient(90deg,transparent 44%,rgba(242,211,129,.28) 45% 47%,transparent 48%)}.ambientLayer.library:before{animation:shelfDrift 10s ease-in-out infinite alternate;background:radial-gradient(circle at 24% 24%,rgba(245,244,234,.2) 0 2px,transparent 4px),radial-gradient(circle at 68% 34%,rgba(199,185,138,.32) 0 2px,transparent 5px),repeating-linear-gradient(90deg,rgba(245,244,234,.08) 0 .5rem,transparent .5rem 1.1rem,rgba(199,185,138,.14) 1.1rem 1.45rem,transparent 1.45rem 2.1rem)}.ambientLayer.library:after{animation:readingLight 6s ease-in-out infinite alternate;background:linear-gradient(90deg,rgba(199,185,138,.16),transparent 42%),radial-gradient(ellipse at 28% 72%,rgba(245,244,234,.18),transparent 18rem)}.stage:after{background:linear-gradient(90deg,rgba(10,11,10,.86),transparent 45%,rgba(10,11,10,.36)),linear-gradient(180deg,rgba(10,11,10,.52),transparent 45%,rgba(10,11,10,.72));content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute;z-index:-1}.stageOverlay{display:grid;gap:clamp(1.25rem,2.5vw,2rem);grid-template-rows:auto minmax(0,1fr) auto auto;min-height:inherit;padding:max(1rem,env(safe-area-inset-top)) clamp(1rem,4vw,3.5rem) 1.2rem}.topBar{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;min-height:44px}.brandStack{align-items:flex-start;display:inline-flex;flex-direction:column;gap:.7rem;min-width:0}.brand{align-items:center;color:#f5f4eaeb;display:inline-flex;font-size:.95rem;font-weight:700;gap:.65rem;letter-spacing:0;min-width:0}.brandMark{background:radial-gradient(circle at 50% 36%,var(--accent),transparent 36%),#f5f4ea;border:1px solid rgba(255,255,255,.4);border-radius:999px;box-shadow:0 0 28px color-mix(in srgb,var(--accent) 36%,transparent);display:inline-block;height:1.05rem;width:1.05rem}.topActions{align-items:center;display:flex;gap:.75rem;justify-content:flex-end;min-width:0}.coffeeButton{flex:0 0 auto;text-decoration:none;white-space:nowrap}.coffeeButton svg{color:#fd0}.coffeeButton:hover{color:#fff}.installBox{position:relative}.iconTextButton,.mixButton,.roundButton,.playButton{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#f5f4ea1f;border:1px solid rgba(245,244,234,.2);color:#f5f4ea;cursor:pointer;display:inline-flex;justify-content:center;transition:background .16s ease,border-color .16s ease,transform .16s ease}.playButton:disabled{cursor:wait;opacity:.58}.iconTextButton:hover,.mixButton:hover,.roundButton:hover,.playButton:hover{background:#f5f4ea2e;border-color:color-mix(in srgb,var(--accent) 58%,rgba(245,244,234,.18));transform:translateY(-1px)}.iconTextButton{border-radius:999px;gap:.45rem;min-height:42px;padding:0 .9rem}.installHelp{align-items:center;background:#111312eb;border:1px solid rgba(245,244,234,.16);border-radius:8px;box-shadow:0 24px 60px #00000057;display:grid;gap:.65rem;grid-template-columns:auto 1fr auto;min-width:min(290px,calc(100vw - 2rem));padding:.85rem;position:absolute;right:0;top:calc(100% + .7rem);z-index:8}.installHelp p{margin:0}.installHelp .compact{grid-column:3;grid-row:1}.nowPlaying{align-self:center;max-width:min(760px,92vw)}.nowPlaying p{color:var(--accent);font-size:clamp(.86rem,2vw,1rem);font-weight:800;letter-spacing:0;margin:0 0 .35rem;text-transform:uppercase}.nowPlaying h1{font-size:clamp(3.2rem,11vw,8.8rem);letter-spacing:0;line-height:.9;margin:0;max-width:10ch;text-wrap:balance}.mixSummary{color:#f5f4eab8;display:block;font-size:.9rem;font-weight:700;margin-top:.8rem}.statusPill{background:#f36f5633;border:1px solid rgba(243,111,86,.44);border-radius:999px;display:inline-flex;font-size:.9rem;font-weight:700;margin-top:1rem;padding:.35rem .7rem}.statusPill.loading{background:#72e0c429;border-color:#72e0c461}.controls{align-items:center;display:grid;gap:1rem;grid-template-columns:auto auto;justify-content:start;position:relative;z-index:4}.transport,.screenControls{align-items:center;display:flex;gap:.75rem}.mixButton{border-radius:999px;gap:.45rem;height:48px;padding:0 .85rem}.mixButton strong{align-items:center;background:var(--accent);border-radius:999px;color:#111312;display:inline-flex;font-size:.76rem;height:1.35rem;justify-content:center;min-width:1.35rem;padding:0 .25rem}.roundButton{border-radius:999px;height:48px;width:48px}.fullscreenExitButton{display:none}.roundButton.compact{height:32px;width:32px}.playButton{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.26),transparent 50%),color-mix(in srgb,var(--accent) 70%,#111312);border-color:#ffffff3d;border-radius:999px;box-shadow:0 18px 55px color-mix(in srgb,var(--accent) 25%,transparent);height:72px;width:72px}.sceneGrid{display:grid;gap:.75rem;grid-template-columns:repeat(9,minmax(110px,1fr));overflow-x:auto;padding:.1rem 0 .4rem;scrollbar-color:rgba(245,244,234,.3) transparent}.sceneTileWrap{min-width:128px;position:relative}.sceneTile{--scene-accent: var(--accent);aspect-ratio:1.35;background-position:center;background-size:cover;border:1px solid rgba(245,244,234,.16);border-radius:8px;color:#f5f4ea;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:96px;width:100%;overflow:hidden;padding:.75rem;position:relative;text-align:left}.sceneTile:after{border:2px solid transparent;border-radius:8px;content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute}.sceneTile[aria-current=true]:after{border-color:var(--scene-accent);box-shadow:inset 0 0 0 1px #00000047}.sceneMixToggle{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#111312b8;border:1px solid rgba(245,244,234,.26);border-radius:999px;color:#f5f4ea;cursor:pointer;font-size:.7rem;font-weight:800;padding:.28rem .55rem;position:absolute;right:.5rem;top:.5rem;z-index:2}.sceneMixToggle[aria-pressed=true]{background:color-mix(in srgb,var(--scene-accent, var(--accent)) 78%,#111312);border-color:#ffffff7a;color:#111312}.mixerPanel{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#111312c7;border:1px solid rgba(245,244,234,.16);border-radius:12px;box-shadow:0 24px 70px #00000047;display:grid;gap:.85rem;max-height:min(42vh,340px);overflow:auto;padding:1rem;position:relative;z-index:5}.mixerHeader{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.mixerEyebrow{align-items:center;color:var(--accent);display:inline-flex;font-size:.84rem;font-weight:900;gap:.4rem;text-transform:uppercase}.mixerHeader p{color:#f5f4eaa6;font-size:.8rem;margin:.18rem 0 0}.mixerMode{background:#f5f4ea1a;border:1px solid rgba(245,244,234,.14);border-radius:999px;color:#f5f4eac7;flex:0 0 auto;font-size:.72rem;font-weight:700;padding:.35rem .6rem}.mixerTracks{display:grid;gap:.55rem;grid-template-columns:repeat(3,minmax(210px,1fr))}.mixerTrack{align-items:center;background:#f5f4ea0d;border:1px solid rgba(245,244,234,.08);border-radius:9px;display:grid;gap:.5rem;grid-template-columns:auto minmax(80px,1fr) auto minmax(74px,.9fr);min-height:58px;padding:.55rem}.mixerTrack.isEnabled{background:color-mix(in srgb,var(--accent) 9%,rgba(17,19,18,.72));border-color:color-mix(in srgb,var(--accent) 28%,rgba(245,244,234,.08))}.mixToggle{align-items:center;background:#f5f4ea14;border:1px solid rgba(245,244,234,.16);border-radius:999px;color:#f5f4ea;cursor:pointer;display:inline-flex;height:34px;justify-content:center;width:34px}.mixToggle[aria-pressed=true]{background:var(--accent);color:#111312}.mixToggle:disabled,.sceneMixToggle:disabled{cursor:not-allowed;opacity:.58}.mixerTrack label{display:grid;min-width:0}.mixerTrack label strong{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mixerTrack label span{color:#f5f4ea94;font-size:.72rem}.trackVolumeIcon{color:#f5f4ea94}.mixerTrack input[type=range]{accent-color:var(--accent);cursor:pointer;margin:0;min-width:0;touch-action:none;width:100%}.mixerTrack input[type=range]:disabled{cursor:default;opacity:.28}.sceneTile span{color:#f5f4eabd;font-size:.72rem;font-weight:700;letter-spacing:0;line-height:1.1;text-transform:uppercase}.sceneTile strong{font-size:clamp(.9rem,1.8vw,1.05rem);line-height:1.08;margin-top:.25rem;overflow-wrap:anywhere}.isFullscreen{grid-template-rows:minmax(0,1fr)}.isFullscreen .stage{min-height:100dvh}.isFullscreen .stageOverlay{padding:max(1.2rem,env(safe-area-inset-top)) clamp(1.1rem,5vw,4rem) max(1.2rem,env(safe-area-inset-bottom))}.isFullscreen .topBar,.isFullscreen .mixerPanel,.isFullscreen .sceneGrid{display:none}.isFullscreen .controls{align-self:end;grid-template-columns:auto auto;padding-bottom:max(.35rem,env(safe-area-inset-bottom));z-index:12}.isFullscreen .fullscreenExitButton{display:inline-flex;height:58px;position:fixed;right:max(.85rem,env(safe-area-inset-right));top:max(.85rem,env(safe-area-inset-top));width:58px;z-index:30}.isFullscreen .nowPlaying h1{font-size:clamp(4rem,12vw,12rem)}.srOnly{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@keyframes slowGlow{0%{opacity:.52;transform:scale(.96)}to{opacity:.95;transform:scale(1.08)}}@keyframes rainfall{to{transform:translate3d(-4rem,8rem,0)}}@keyframes oceanDrift{0%{transform:translate3d(-2rem,0,0) scale(1)}to{transform:translate3d(2rem,-1rem,0) scale(1.05)}}@keyframes fireflies{0%{opacity:.24;transform:translate3d(-1rem,1rem,0)}to{opacity:.82;transform:translate3d(1.5rem,-1rem,0)}}@keyframes snowDrift{to{background-position:45px 140px,0 190px}}@keyframes steam{0%{opacity:.36;transform:translateY(1.2rem) scale(.98)}to{opacity:.76;transform:translateY(-1rem) scale(1.05)}}@keyframes chimeSwing{0%{transform:rotate(-2deg) translate(-1rem)}to{transform:rotate(2deg) translate(1rem)}}@keyframes shelfDrift{0%{opacity:.32;transform:translate3d(-.8rem,0,0)}to{opacity:.68;transform:translate3d(.8rem,-.4rem,0)}}@keyframes readingLight{0%{opacity:.3;transform:translateY(.7rem)}to{opacity:.66;transform:translateY(-.5rem)}}@media(max-width:920px){.stageOverlay{gap:1rem}.controls{align-items:stretch;grid-template-columns:1fr}.transport,.screenControls{justify-content:center}.sceneGrid{grid-template-columns:repeat(9,minmax(132px,1fr))}.mixerTracks{grid-template-columns:repeat(2,minmax(210px,1fr))}}@media(max-width:560px){.stageOverlay{padding:max(.85rem,env(safe-area-inset-top)) .85rem .85rem}.brand span:last-child{max-width:13ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconTextButton{min-height:40px;padding:0 .75rem}.coffeeButton{max-width:min(190px,calc(100vw - 7.5rem));min-height:40px;padding:0 .75rem}.coffeeButton span{overflow:hidden;text-overflow:ellipsis}.nowPlaying h1{font-size:clamp(3rem,17vw,5.8rem)}.playButton{height:68px;width:68px}.sceneTile{min-height:101px}.sceneTileWrap{min-width:136px}.mixButton span{display:none}.mixerPanel{max-height:46vh;padding:.75rem}.mixerHeader{align-items:stretch;flex-direction:column;gap:.55rem}.mixerMode{align-self:flex-start}.mixerTracks{grid-template-columns:1fr}.mixerTrack{grid-template-columns:auto minmax(94px,1fr) auto minmax(82px,1.1fr)}}