.system-tray{right:max(1.15rem, env(safe-area-inset-right));bottom:max(1.15rem, env(safe-area-inset-bottom));z-index:110;align-items:center;gap:8px;display:flex;position:fixed}.motion-toggle,.soundtrack__settings>summary{--tray-ink:#74838c;--tray-edge:#8ba0ac4d;appearance:none;border:1px dashed var(--tray-edge);width:46px;min-width:46px;height:46px;color:var(--tray-ink);font-family:var(--font-mono);cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#050a11e6;border-radius:50%;place-items:center;padding:0;transition:color .2s,border-color .2s,background .2s,box-shadow .2s,transform .2s;display:grid;position:relative;box-shadow:inset 0 1px #e2fdff0d,0 8px 24px #0000004d}.motion-toggle[data-state=on],.soundtrack[data-state=on] .soundtrack__settings>summary{--tray-ink:#8feeff;--tray-edge:#7fe5ffb3;background:radial-gradient(circle at 50% 38%,#46b4d757,#0000 64%),#061622f0;border-style:solid;box-shadow:0 0 0 3px #7fe5ff17,0 0 20px #7fe5ff4d,inset 0 1px #e2fdff24,0 8px 24px #0000004d}.motion-toggle:hover,.soundtrack__settings>summary:hover{transform:translateY(-1px)}.motion-toggle[data-state=off]:hover,.soundtrack:not([data-state=on]) .soundtrack__settings>summary:hover{--tray-ink:#b7c7cf;--tray-edge:#b7c7cf8c}.motion-toggle[data-state=on]:hover,.soundtrack[data-state=on] .soundtrack__settings>summary:hover{--tray-ink:#c9f7ff;--tray-edge:#7fe5fff2}.motion-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.tray-state{border:1px solid var(--tray-edge);min-width:28px;color:var(--tray-ink);font:700 8px/1.4 var(--font-mono);letter-spacing:.14em;text-align:center;text-transform:uppercase;white-space:nowrap;pointer-events:none;background:#050b13;border-style:solid;border-radius:999px;padding:1px 5px 0;transition:color .2s,border-color .2s,box-shadow .2s;position:absolute;bottom:-7px;left:50%;transform:translate(-50%)}.motion-toggle[data-state=on] .tray-state,.soundtrack[data-state=on] .tray-state{color:#e6fcff;background:#0b3444;box-shadow:0 0 8px #7fe5ff73}.tray-slash{stroke:currentColor;stroke-width:1.6px;stroke-linecap:round}.motion-toggle__icon{fill:none;stroke:currentColor;stroke-width:1.2px;stroke-linecap:round;width:21px;height:21px;overflow:visible}.motion-toggle__orbit{transform-origin:12px 12px;transform:rotate(-24deg)scaleY(.42)}.motion-toggle__orbit ellipse{opacity:.6}.motion-toggle__satellite{transform-origin:12px 12px;fill:currentColor;stroke:none}.motion-toggle__core{fill:currentColor;stroke:none}.motion-toggle[data-state=on] .motion-toggle__satellite{animation:5s linear infinite motion-toggle-orbit}.motion-toggle[data-state=on] .motion-toggle__core{filter:drop-shadow(0 0 4px)}.motion-toggle[data-state=off] .motion-toggle__orbit ellipse{opacity:.35;stroke-dasharray:2 3}.motion-toggle[data-state=off] .motion-toggle__satellite{opacity:.6;transform:rotate(210deg)}.motion-toggle[data-state=off] .motion-toggle__core{opacity:.55}@keyframes motion-toggle-orbit{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){html:not([data-motion=off]) .motion-toggle[data-state=on] .motion-toggle__satellite{animation-duration:5s!important;animation-iteration-count:infinite!important}}.system-tray{transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .24s}@media (max-width:60rem) and (hover:none) and (pointer:coarse){body:not(:has(.system-home)) .system-tray[data-retired=true]:not(:focus-within):not(:has(.soundtrack__settings[open])){opacity:0;pointer-events:none;transform:translateY(calc(100% + 1.4rem))}}@media (prefers-reduced-motion:reduce){html:not([data-motion=off]) .system-tray{transition-duration:.32s,.24s!important}}@media (max-width:600px){.system-tray{right:max(.7rem, env(safe-area-inset-right));bottom:max(.7rem, env(safe-area-inset-bottom));gap:7px}.motion-toggle{width:44px;min-width:44px;height:44px}.motion-toggle__icon{width:19px;height:19px}}@media (forced-colors:active){.motion-toggle{color:canvastext;background:canvas;border:1px solid buttontext}.tray-state{color:canvastext;background:canvas;border-color:buttontext}}
.soundtrack{color:#b9ced8;font-family:var(--font-mono);align-items:center;gap:6px;display:flex;position:relative}.soundtrack button{appearance:none;min-height:44px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0}.soundtrack :is(button,summary,input):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.soundtrack svg{flex:none;width:19px;height:19px}.soundtrack__settings>summary{list-style:none}.soundtrack__settings>summary::-webkit-details-marker{display:none}.soundtrack[data-state=muted] .soundtrack__settings>summary{--tray-ink:#f0c3a4;--tray-edge:#d9a079b3;border-style:solid;box-shadow:0 0 0 3px #d9a07914,0 0 16px #d9a07938,0 8px 24px #0000004d}.soundtrack[data-state=muted] .tray-state{color:#ffe3cf;background:#3a2517}.soundtrack__settings[open]>summary{outline-offset:3px;outline:1px solid #7fe5ff4d}.soundtrack__wave{transform-origin:11px 12px}html:not([data-motion=off]) .soundtrack[data-playing=true] .soundtrack__settings>summary .soundtrack__wave{animation:1.8s ease-in-out infinite soundtrack-wave}html:not([data-motion=off]) .soundtrack[data-playing=true] .soundtrack__settings>summary .soundtrack__wave+.soundtrack__wave{animation-delay:.3s}@keyframes soundtrack-wave{0%,to{opacity:1}50%{opacity:.35}}@media (prefers-reduced-motion:reduce){html:not([data-motion=off]) .soundtrack[data-playing=true] .soundtrack__settings>summary .soundtrack__wave{animation-duration:1.8s!important;animation-iteration-count:infinite!important}}.soundtrack__hint{color:#d8f8ff;font:600 9px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#06141ff0;border:1px solid #7fe5ff61;border-radius:999px;padding:6px 11px;animation:.5s ease-out .6s both soundtrack-hint-in;position:absolute;bottom:calc(100% + 12px);right:0;box-shadow:0 0 16px #7fe5ff29,0 8px 22px #0006}.soundtrack__hint:after{content:"";border:5px solid #0000;border-top-color:#7fe5ff61;position:absolute;top:100%;right:18px}.soundtrack__hint-touch{display:none}@media (hover:none) and (pointer:coarse){.soundtrack__hint-click{display:none}.soundtrack__hint-touch{display:inline}}.soundtrack:has(.soundtrack__settings[open]) .soundtrack__hint{display:none}html:not([data-motion=off]) .soundtrack[data-waiting=true] .tray-state{animation:1.6s ease-in-out infinite soundtrack-waiting}html[data-motion=off] .soundtrack__hint{animation:none}@keyframes soundtrack-hint-in{0%{opacity:0;transform:translateY(4px)}}@keyframes soundtrack-waiting{0%,to{box-shadow:0 0 8px #7fe5ff73}50%{opacity:.55;box-shadow:0 0 2px #7fe5ff1a}}@media (prefers-reduced-motion:reduce){html:not([data-motion=off]) .soundtrack[data-waiting=true] .tray-state{animation-duration:1.6s!important;animation-iteration-count:infinite!important}}.soundtrack__panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(155deg,#091723fa,#040b13fa);border:1px solid #7fe5ff3d;border-radius:14px;width:min(252px,100vw - 1.4rem);padding:14px;position:absolute;bottom:54px;right:0;box-shadow:inset 0 1px #d5faff12,0 18px 44px #00000085}.soundtrack__panel p{margin:0}.soundtrack__heading{grid-template-columns:6px 1fr auto;align-items:center;gap:9px;display:grid}.soundtrack__signal{background:#647b87;border-radius:50%;width:6px;height:6px}.soundtrack[data-playing=true] .soundtrack__signal{background:#72e5f3;box-shadow:0 0 8px #72e5f3}.soundtrack[data-muted=true] .soundtrack__signal{background:#d9a079;box-shadow:0 0 7px #d9a0798c}.soundtrack__heading p{color:var(--ink);font:600 .76rem var(--font-body)}.soundtrack__heading div>span{color:#788e9b;letter-spacing:.1em;text-transform:uppercase;margin-top:1px;font-size:9px;display:block}.soundtrack__power{border-radius:50%;place-items:center;width:36px;min-width:36px;height:36px;padding:0;transition:color .2s,border-color .2s,background .2s;display:grid;color:#9db2bd!important;border:1px solid #8bbdcd38!important;min-height:36px!important}.soundtrack__power:hover{color:var(--cyan)!important;border-color:#7fe5ff73!important}.soundtrack__power[aria-pressed=true]{background:#7fe5ff12;color:var(--cyan)!important;border-color:#7fe5ff6b!important}.soundtrack__power svg{width:15px;height:15px}.soundtrack__volume-label{color:#98aab5;letter-spacing:.1em;text-transform:uppercase;justify-content:space-between;margin-top:.85rem;font-size:9px;display:flex}.soundtrack__volume-label output{color:#b7eaf0}.soundtrack input{width:100%;height:28px;accent-color:var(--cyan);cursor:pointer;margin:.1rem 0 .45rem;display:block}.soundtrack__mute{border-radius:999px;align-items:center;gap:8px;width:auto;display:inline-flex;color:#aabdc6!important;border:1px solid #8bbdcd2e!important;padding:0 11px!important;font-size:9px!important}.soundtrack__mute:hover{color:#e5fbff!important;border-color:#7fe5ff61!important}.soundtrack__mute[aria-pressed=true]{background:#d9a0790f;color:#f0c3a4!important;border-color:#d9a07957!important}.soundtrack__mute svg{width:16px;height:16px}body:has(.system-home) .system-tray{bottom:3.65rem;right:clamp(1rem,3.4vw,3.4rem)}body:not(:has(.system-home)):has(.system-tray){padding-bottom:0}@media (max-width:60rem){.system-tray{right:max(.7rem, env(safe-area-inset-right));bottom:max(.7rem, env(safe-area-inset-bottom))}.soundtrack__panel{left:auto;right:max(.7rem, env(safe-area-inset-right));bottom:calc(max(.7rem, env(safe-area-inset-bottom)) + 49px);width:min(252px,100vw - 1.4rem);position:fixed}}@media (max-width:600px){.soundtrack{gap:5px}.soundtrack__settings>summary{width:44px;min-width:44px;height:44px}.soundtrack svg{width:18px;height:18px}}@media (forced-colors:active){.soundtrack__settings>summary,.soundtrack__panel{color:canvastext;background:canvas;border:1px solid buttontext}.soundtrack .tray-state{color:canvastext;background:canvas;border-color:buttontext}}@media print{.soundtrack{display:none}}@media (scripting:none){.soundtrack{display:none}}
