/* Public navigation dock, restored from stereosound-full-2026-10-12.zip.
 * Keep this component independent of content-panel and typography scaling.
 * Declaration and media-query order matches the archived visual.css cascade.
 */
.dock, .dock * {box-sizing:border-box}
.dock .language-menu summary>span,
.dock .language-menu nav a>span {filter:saturate(.6)}
.dock {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:normal;letter-spacing:.04em}
#motion-control {font:10px monospace;letter-spacing:.5px;color:var(--ink);padding:11px 14px;border:1px solid #ffffff30;border-radius:18px;background:#121914ad;backdrop-filter:blur(16px)}
#motion-control:disabled {color:var(--muted);cursor:default}
.dock {position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:15;padding:12px 8px;width:68px;border:1px solid #ffffff28;border-radius:24px;background:linear-gradient(145deg,#ffffff17,#171a18b8 60%,#ffffff09);box-shadow:inset 0 1px 0 #ffffff40,0 15px 60px #0008,0 0 28px #ffffff08;backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3)}
.dock #navigation {display:flex;flex-direction:column;gap:8px}
.dock-item,
.dock-brand {width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;position:relative;transition:background 180ms,box-shadow 180ms;color:#d9dcda}
.dock-item svg {width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px #fff3)}
.dock-item:hover,
.dock-item:focus-visible {color:#fff;background:#ffffff12;box-shadow:inset 0 1px 0 #ffffff35,0 0 20px #ffffff14}
.dock-item[aria-current] {color:#fff;background:linear-gradient(135deg,#ffffff26,#ffffff0b);box-shadow:inset 0 0 0 1px #ffffff45,0 0 23px #ffffff18}
.dock-item[aria-current]:before {content:'';position:absolute;left:-8px;top:20px;height:10px;width:3px;border-radius:3px;background:#fff;box-shadow:0 0 10px #fff8}
.dock-label {position:absolute;left:65px;top:50%;transform:translateY(-50%);padding:12px 15px;font:11px monospace;letter-spacing:1px;white-space:nowrap;border-radius:12px;background:#202422ee;border:1px solid #ffffff28;backdrop-filter:blur(20px);color:var(--ink);box-shadow:0 5px 25px #0006;opacity:0;visibility:hidden;transition:opacity 150ms;pointer-events:none}
.dock-item:hover .dock-label,
.dock-item:focus-visible .dock-label {opacity:1;visibility:visible}
.dock-brand {flex-direction:column;background:#ffffff0d;border:1px solid #ffffff15}
.dock-brand>span {font-size:27px;font-weight:700;line-height:1}
.dock-brand>small {font:6px monospace;letter-spacing:1px;color:var(--muted)}
.dock-brand img {width:38px;height:38px;object-fit:contain}
.dock-divider {height:1px;background:#ffffff25;margin:12px 8px}
@media(max-width:760px) {
  #motion-control {font-size:8px;padding:9px 10px}
  .dock {left:8px;width:46px;border-radius:18px;padding:9px 4px}
  .dock #navigation {gap:7px}
  .dock-item,
.dock-brand {width:36px;height:39px;border-radius:11px}
  .dock-item svg {width:20px;height:20px}
  .dock-label {left:44px;font-size:10px;padding:10px}
  .dock-brand>span {font-size:21px}
  .dock-brand img {width:30px;height:30px}
  .dock-divider {margin:10px 4px}
  .dock-item[aria-current]:before {left:-4px;top:15px}
  .dock-brand {height:35px}
}
@media(max-height:650px) {
  .dock {padding-top:7px;padding-bottom:7px}
  .dock-item {height:33px}
  .dock #navigation {gap:4px}
  .dock-brand {height:33px}
  .dock-divider {margin:8px 4px}
}
@media(prefers-reduced-motion:reduce) {
  html:not(.motion-enabled) .dock-item,
html:not(.motion-enabled) .dock-label {transition:none}
}
.dock-brand .logo-sheet {display:block;position:relative;width:180px;aspect-ratio:2.65;overflow:hidden;background:#000}
.dock-brand .logo-sheet img {position:absolute;left:-100%;top:0;width:200%;height:auto;max-width:none}
.dock-brand .logo-sheet {width:38px;min-height:15px}
.dock-brand .logo-sheet img {width:200%;height:auto;max-width:none;left:-100%;top:0}
.dock-brand .logo-sheet {aspect-ratio:3424/1229;background:transparent}
.dock-brand .logo-sheet img {width:214.14%;height:auto;left:-111.94%;top:-184.30%;max-width:none}
.dock-brand .logo-sheet {width:38px;min-height:0;height:auto;flex:none}
#motion-control {width:50px;height:50px;padding:0;border:0;border-radius:15px;background:transparent;backdrop-filter:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
#motion-control:hover,
#motion-control:focus-visible {background:#ffffff12;box-shadow:inset 0 1px 0 #ffffff35,0 0 20px #ffffff14}
#motion-control .play-icon {display:none}
#motion-control[aria-pressed="true"] .pause-icon {display:none}
#motion-control[aria-pressed="true"] .play-icon {display:block}
@media(max-width:760px) {
  .dock-brand .logo-sheet {width:30px;min-height:0}
  #motion-control {width:36px;height:39px;border-radius:11px}
}
@media(max-height:650px) {
  #motion-control {height:33px}
}
@media(max-width:760px) {
  .dock {left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:none;width:auto;padding:6px;display:flex;align-items:center;gap:4px;border-radius:20px;background:linear-gradient(140deg,#2b3547c9,#111722d9);box-shadow:inset 0 1px 0 #ffffff48,0 8px 30px #0007}
  .dock>.dock-brand,
.dock>.dock-divider:first-of-type {display:none}
  .dock #navigation {flex:1;min-width:0;display:flex;flex-direction:row;gap:1px;overflow-x:auto;scrollbar-width:none}
  .dock #navigation::-webkit-scrollbar {display:none}
  .dock .dock-item {width:40px;height:44px;flex:0 0 40px;border-radius:13px}
  .dock .dock-item svg {width:21px;height:21px}
  .dock>.dock-divider {width:1px;height:24px;flex:0 0 1px;margin:0 3px}
  .dock #motion-control {flex:0 0 40px}
  .dock .dock-item[aria-current]:before {top:auto;bottom:2px;left:18px;width:4px;height:3px}
  .dock .dock-label {display:none}
}
.language-menu {position:fixed;z-index:20;left:24px;top:calc(50% + 320px);width:max-content;max-width:calc(100vw - 32px);min-height:66px;padding:7px;border:1px solid #ffffff30;border-radius:22px;background:linear-gradient(145deg,#ffffff1d,#171a18db 65%,#ffffff0b);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);box-shadow:inset 0 1px #ffffff40,0 15px 45px #0008,0 0 25px #ffffff08}
.language-menu[open] {display:flex;align-items:center;gap:5px}
.language-menu summary {list-style:none;width:50px;height:50px;display:grid;place-items:center;cursor:pointer;border-radius:15px;color:#fff;font-size:25px;line-height:1}
.language-menu summary::-webkit-details-marker {display:none}
.language-menu summary:hover,
.language-menu summary:focus-visible,
.language-menu[open] summary {background:#ffffff1b;box-shadow:inset 0 1px #ffffff30}
.language-menu nav {display:flex;align-items:center;gap:3px;overflow-x:auto;scrollbar-width:none;animation:language-reveal 210ms ease-out both}
.language-menu nav::-webkit-scrollbar {display:none}
.language-menu nav a {display:grid;place-items:center;flex:0 0 42px;height:46px;border-radius:12px;font-size:23px;line-height:1}
.language-menu nav a:hover,
.language-menu nav a:focus-visible,
.language-menu nav a[aria-current] {background:#ffffff22}
@keyframes language-reveal {from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media(max-width:760px) {
  .language-menu {left:12px;top:auto!important;bottom:calc(86px + env(safe-area-inset-bottom));min-height:55px;padding:5px;border-radius:17px;max-width:calc(100vw - 24px)}
  .language-menu summary {width:43px;height:43px;font-size:22px;border-radius:12px}
  .language-menu nav a {flex-basis:38px;height:42px;font-size:21px}
}
@media(min-width:761px) and (max-height:1050px) {
  .dock {top:calc(50% - 55px);padding-top:8px;padding-bottom:8px}
  .dock #navigation {gap:4px}
  .dock .dock-item,
.dock .dock-brand,
#motion-control {height:40px}
  .dock-divider {margin-top:7px;margin-bottom:7px}
}
@media(min-width:2601px) {
  .dock,
.language-menu {left:calc(24px + (100vw - 2600px)/2)}
}
@media(prefers-reduced-motion:reduce) {
  html:not(.motion-enabled) .language-menu nav {animation:none}
}
body .dock-label {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  letter-spacing:.04em;}
.dock .language-menu {position:relative;inset:auto!important;display:block;width:50px;min-height:0;max-width:none;margin-top:6px;padding:0;border:0;border-radius:15px;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.dock .language-menu nav {position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);padding:7px;border:1px solid #ffffff30;border-radius:18px;background:linear-gradient(145deg,#ffffff1d,#171a18ed);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 12px 35px #0007;width:max-content;max-width:calc(100vw - 115px)}
.dock .language-menu:not([open]) nav {display:none}
@media(min-width:761px) {
  .dock {top:50%;transform:translateY(-50%);transition:none}
}
@media(min-width:761px) and (max-height:1050px) {
  .dock .language-menu summary {height:40px}
}
@media(max-width:760px) {
  .dock .language-menu {width:36px;margin:0;flex:0 0 36px}
  .dock .language-menu summary {width:36px;height:39px;font-size:22px}
  .dock .language-menu nav {left:auto;right:0;top:auto;bottom:calc(100% + 16px);transform:none;max-width:calc(100vw - 32px)}
}
#theme-control .theme-moon {display:none}
html[data-theme="light"] #theme-control .theme-sun {display:none}
html[data-theme="light"] #theme-control .theme-moon {display:block}
html[data-theme="light"] .dock,
html[data-theme="light"] .dock .language-menu nav {background:linear-gradient(145deg,#ffffffd9,#e5ebf0e8);border-color:#fff9;box-shadow:inset 0 1px #fff,0 12px 35px #0002;color:#263544}
html[data-theme="light"] .dock-item,
html[data-theme="light"] .dock-brand {color:#263544}
html[data-theme="light"] .dock-item:hover,
html[data-theme="light"] .dock-item[aria-current] {background:#53617220}
html[data-theme="light"] .dock-divider {background:#53617230}
html[data-theme="light"] .dock-label {background:#edf1f5f5;color:#263544;border-color:#53617230}
@media(min-width:761px) {
  .dock #theme-control {display:none}
  /* Include the full button width in Firefox's intrinsic popup measurement. */
  .dock .language-menu nav {overflow:visible}
  .dock .language-menu nav a {width:42px;min-width:42px;flex:0 0 42px}
}
@media(max-width:760px) {
  .dock .language-menu nav {display:flex;flex-direction:column;left:50%;right:auto;top:auto;bottom:calc(100% + 16px);transform:translateX(-50%);width:max-content;max-width:none;max-height:none;overflow:visible;gap:3px}
  .dock .language-menu nav a {flex:0 0 auto;width:42px;height:42px}
}