.immersive-entry{display:flex;align-items:center;gap:12px;min-width:0;flex:1;min-height:56px;padding:4px 0;border-radius:12px;text-align:left}.immersive-entry .player-meta{flex:1;min-width:0}.immersive-entry-hint{padding:10px;color:var(--muted)}.immersive-entry-hint svg{width:17px;height:17px}
#immersive{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;overflow:hidden;border:0;background:#101b21;color:#edf3f4;color-scheme:dark}#immersive[open]{display:flex;flex-direction:column}#immersive::backdrop{background:#101b21}#immersive button{min-width:56px;min-height:56px;border-radius:16px;color:inherit}#immersive button:hover{background:#ffffff0c}#immersive button:focus-visible{outline-color:#b6d5d8}
.immersive-header{position:relative;z-index:3;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:16px;padding:24px 36px}.immersive-header button{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;font-size:14px}.immersive-wordmark{color:#a7bcc4;font-size:13px;letter-spacing:3px}.immersive-body{position:relative;z-index:2;display:grid;flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(54px,8vw,120px);width:min(1100px,86%);min-height:0;margin:0 auto}.immersive-art{display:grid;place-items:center;justify-self:center;width:100%;max-width:440px;max-height:min(48vh,440px);aspect-ratio:1;overflow:hidden;border:1px solid #ffffff12;border-radius:30px;background:linear-gradient(135deg,#d5dedf,#b7c6cb);box-shadow:0 34px 100px #0005;color:#38515a;font-size:80px;font-weight:600}.immersive-art img{width:100%;height:100%;padding:35px;object-fit:contain}.immersive-copy{min-width:0}.immersive-copy>p:first-child{margin:0 0 14px;color:#9ab9c3;font-size:14px;letter-spacing:3px}.immersive-copy h1{margin:0 0 16px;color:#f1f5f6;font-size:clamp(32px,3.4vw,52px);font-weight:600;line-height:1.2;letter-spacing:-1px;-webkit-line-clamp:3}.immersive-copy #immersiveNow{display:-webkit-box;margin:0 0 12px;overflow:hidden;color:#a3b4bc;font-size:16px;line-height:1.6;-webkit-box-orient:vertical;-webkit-line-clamp:2}.immersive-state{display:flex;align-items:center;gap:8px;min-height:24px;color:#9bb4bc;font-size:13px}.immersive-state i{width:7px;height:7px;border-radius:50%;background:#65808a}.is-playing .immersive-state i{background:#8bc4c5;box-shadow:0 0 12px #8bc4c588}.is-loading .immersive-state i{animation:state-pulse 1.2s ease-in-out infinite}
.control-console{width:min(100%,430px);margin-top:28px;padding:12px 14px 10px;border:1px solid #ffffff10;border-radius:28px;background:#0913195c;box-shadow:0 18px 50px #0002;backdrop-filter:blur(10px)}.immersive-transport{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;justify-items:center}.immersive-transport button{display:grid;place-items:center;width:64px;height:64px;border-radius:50%}.immersive-transport svg{width:29px;height:29px}#immersive #immersivePlay{width:82px;height:82px;background:#e4eeef;box-shadow:0 10px 32px #0004;color:#173039}#immersivePlay:hover{background:#fff}#immersivePlay:active{transform:scale(.94)}#immersivePlay svg{stroke-width:2.3}.immersive-secondary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid #ffffff0c}.meta-control{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0!important;padding:0 8px;color:#aebfc5!important;font-size:12px}.meta-control svg{width:19px;height:19px}.meta-control[aria-pressed=true]{color:#d8e9eb!important}.meta-control:disabled{cursor:default;opacity:.35}.meta-control:disabled:active{transform:none}#immersiveFav[aria-pressed=true] svg{fill:#b6d8dc;stroke:#b6d8dc}
.immersive-footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 52px;color:#99b0ba;font-size:13px}.immersive-footer button{padding:0 20px;border:1px solid #ffffff18!important;font-size:14px}.auxiliary{transition:opacity .7s}#immersive.resting .auxiliary{opacity:.16}#immersive.resting .auxiliary:focus-within,#immersive.resting .auxiliary:hover{opacity:1}
#effectsPanel{position:absolute;right:36px;bottom:96px;z-index:5;width:min(430px,calc(100% - 32px));padding:22px;border:1px solid #ffffff1f;border-radius:24px;background:#203039;box-shadow:0 20px 80px #0007}.effects-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.effects-head>div{display:grid;gap:5px}.effects-head strong{font-size:18px}.effects-head small{color:#9db0b7;font-size:11px}.effects-head button{font-size:25px}.effect-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.effect-options button{display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid transparent;background:#ffffff08;text-align:left}.effect-options button>i{width:9px;height:9px;border:1px solid #8daab4;border-radius:50%}.effect-options button[aria-pressed=true]{border-color:#b7d1d55c!important;background:#d3e2e5!important;color:#1b3039!important}.effect-options button[aria-pressed=true]>i{border-color:#315660;background:#315660;box-shadow:0 0 0 3px #31566026}#effectsPanel p{margin:15px 0 0;color:#a8bcc4;font-size:12px;line-height:1.7}
.ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.ambient-breath,.ambient-flow,.ambient-wave{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}.ambient-breath{inset:-18%;background:radial-gradient(circle at 35% 48%,#315d6870 0,transparent 36%),radial-gradient(circle at 70% 50%,#344f6a42 0,transparent 39%)}.ambient-flow i{position:absolute;width:105vmax;height:105vmax;border-radius:50%;opacity:.55;transform:translate3d(0,0,0)}.ambient-flow i:nth-child(1){left:-47vmax;top:-50vmax;background:radial-gradient(circle,#315f6878 0,transparent 62%)}.ambient-flow i:nth-child(2){right:-55vmax;bottom:-55vmax;background:radial-gradient(circle,#48547766 0,transparent 64%)}.ambient-flow i:nth-child(3){left:14%;top:34%;width:65vmax;height:65vmax;background:radial-gradient(circle,#27505a45 0,transparent 68%)}.ambient-wave{display:flex;inset:auto 0 13%;align-items:center;justify-content:center;height:90px;gap:9px}.ambient-wave i{display:block;width:3px;height:var(--height);border-radius:4px;background:#8cb7c1}[data-effect=breath] .ambient-breath{opacity:1;animation:ambient-breath 10s ease-in-out infinite}
[data-effect=flow] .ambient-flow{opacity:1}
[data-effect=flow] .ambient-flow i:nth-child(1){animation:flow-one 22s ease-in-out infinite alternate}
[data-effect=flow] .ambient-flow i:nth-child(2){animation:flow-two 27s ease-in-out infinite alternate}
[data-effect=flow] .ambient-flow i:nth-child(3){animation:flow-three 30s ease-in-out infinite alternate}
[data-effect=wave] .ambient-wave{opacity:.24}
[data-effect=wave] .ambient-wave i{animation:ambient-wave 2.8s ease-in-out infinite alternate;animation-delay:var(--delay)}
#immersive:not(.ambient-running) .ambient,#immersive:not(.ambient-running) .ambient *{animation-play-state:paused}
#immersive:not([open]) .ambient{display:none}

@keyframes ambient-breath{0%,100%{transform:scale(.92)}50%{transform:scale(1.08)}}@keyframes flow-one{from{transform:translate3d(-4%,-3%,0) scale(.94)}to{transform:translate3d(16%,12%,0) scale(1.06)}}@keyframes flow-two{from{transform:translate3d(4%,4%,0) scale(1.04)}to{transform:translate3d(-15%,-12%,0) scale(.92)}}@keyframes flow-three{from{transform:translate3d(-7%,8%,0) scale(.9)}to{transform:translate3d(9%,-10%,0) scale(1.08)}}@keyframes ambient-wave{from{transform:scaleY(.32)}to{transform:scaleY(1.08)}}@keyframes state-pulse{50%{opacity:.25;transform:scale(.75)}}
@media(max-width:700px),(max-aspect-ratio:4/5){.immersive-header{padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}.immersive-header button{padding:0 10px}.immersive-header button span{display:none}.immersive-wordmark{font-size:12px;letter-spacing:2px}.immersive-body{display:flex;flex-direction:column;justify-content:center;gap:22px;width:calc(100% - 40px)}.immersive-art{flex-shrink:0;width:min(55vw,28dvh,320px);max-height:none;border-radius:24px;font-size:48px}.immersive-art img{padding:20px}.immersive-copy{width:100%;text-align:center}.immersive-copy>p:first-child{margin-bottom:9px;font-size:12px}.immersive-copy h1{margin-bottom:10px;font-size:clamp(27px,6vw,38px);-webkit-line-clamp:2}.immersive-copy #immersiveNow{margin-bottom:8px;font-size:14px;-webkit-line-clamp:1}.immersive-state{justify-content:center}.control-console{width:min(100%,420px);margin:18px auto 0}.immersive-footer{padding:12px 20px;padding-bottom:calc(12px + env(safe-area-inset-bottom));font-size:11px}.immersive-footer button{min-height:50px;padding:0 12px;font-size:12px}#effectsPanel{right:16px;bottom:82px}.ambient-wave{bottom:39%}.immersive-entry{gap:10px}.immersive-entry-hint{padding:4px}}
@media(max-height:680px) and (max-width:700px){.immersive-header{padding-top:4px;padding-bottom:4px}.immersive-body{gap:9px}.immersive-art{width:17dvh}.immersive-copy>p:first-child{display:none}.immersive-copy h1{margin-bottom:5px;font-size:24px}.immersive-copy #immersiveNow{margin-bottom:2px;font-size:12px}.control-console{margin-top:8px;padding:7px 10px 5px}.immersive-transport{grid-template-columns:1fr 74px 1fr}.immersive-transport button{width:54px;height:54px}#immersive #immersivePlay{width:66px;height:66px}.immersive-secondary{margin-top:4px;padding-top:4px}.meta-control{min-height:48px!important}.immersive-footer{justify-content:flex-end}.immersive-footer #effectCaption{display:none}}
@media(prefers-reduced-motion:reduce){.ambient *{animation:none!important}.ambient-breath,.ambient-flow,.ambient-wave{transition:none}.is-playing[data-effect=breath] .ambient-breath{opacity:.42}.is-playing[data-effect=flow] .ambient-flow{opacity:.42}.is-playing[data-effect=wave] .ambient-wave{opacity:.1}.auxiliary{transition:none}}

/* Transport geometry must win over the dialog's generic button rules. */
#immersive .immersive-transport button{border-radius:50%;transition:background .18s,transform .14s,box-shadow .18s}
#immersive .immersive-transport button:not(#immersivePlay){background:#ffffff04;border:1px solid #ffffff0a}
#immersive .immersive-transport button:not(#immersivePlay):hover{background:#ffffff10}
#immersive #immersivePlay{border:1px solid #ffffff50;background:linear-gradient(150deg,#f1f6f6,#cddfe3);box-shadow:0 8px 22px #0003,inset 0 1px 0 #fff7}
#immersive #immersivePlay[data-visual=play] svg{fill:currentColor;stroke-width:1;transform:translateX(2px)}
#immersive #immersivePlay[data-visual=pause] svg{stroke-width:3.4}
#immersive .control-console{padding:18px 18px 10px;background:#0c171d40;box-shadow:0 14px 44px #0002}
#immersive .immersive-secondary{margin-top:14px;padding-top:8px}
#immersive .meta-control{border-radius:12px;min-height:50px}
#immersive .meta-control[aria-pressed=true]{background:#b8dadd09}
#effectsPanel{max-height:calc(100dvh - 110px);overflow:auto}
@media(max-height:680px) and (max-width:700px){#immersive .control-console{padding:7px 10px 5px}#immersive .immersive-secondary{margin-top:4px;padding-top:4px}}
@media(prefers-reduced-motion:reduce){#immersive .ambient *{animation:none!important}#immersive .immersive-transport button{transition:none}}