/* 77X console controls: 24-unit keyline, 2-unit strokes, 45-degree cuts.
   UI stays above the room's optical treatment. */
:root{--hud-ink:#090a0c;--hud-raised:#111318;--hud-line:#343840;--hud-text:#f8f9fb;--hud-muted:#a9aeb8;--hud-accent:#ff4b59;--hud-left:28px;--hud-top:24px;--hud-panel-top:158px;}
.ui-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}
.ui-icon{display:block;width:24px;height:24px;flex:0 0 24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:bevel;}
body[data-page] .topbar{inset:var(--hud-top) var(--hud-left) auto;padding:0;}
.nav-stack{gap:6px;}
body[data-page] .wordmark{width:72px;height:72px;padding:0;border:1px solid var(--hud-line);border-radius:10px;background:var(--hud-ink);box-shadow:inset 0 1px #ffffff08;}
.wordmark img{width:50px;}
body[data-page] .menu-button{width:72px;height:44px;padding:0;display:grid;place-items:center;background:var(--hud-ink);border:1px solid var(--hud-line);border-radius:8px;color:var(--hud-text);box-shadow:inset 0 1px #ffffff08;}
.menu-line{transform-origin:12px 12px;transition:transform 180ms cubic-bezier(.2,.8,.2,1);}
.menu-line-a{transform:translateY(-2px) scaleX(.8);}.menu-line-b{transform:translateY(2px) scaleX(.8);}
.menu-button:is(:hover,:focus-visible) .menu-line-a{transform:translateY(-4px) scaleX(1);}
.menu-button:is(:hover,:focus-visible) .menu-line-b{transform:translateY(4px) scaleX(1);}
.menu-button[aria-expanded=true] .menu-line-a{transform:rotate(45deg) scaleX(1.1);}
.menu-button[aria-expanded=true] .menu-line-b{transform:rotate(-45deg) scaleX(1.1);}
body[data-page] .menu-button:hover{background:#1b1e25;border-color:#696e79;}
body[data-page] .bottom{inset:auto auto max(20px,env(safe-area-inset-bottom)) 50%;width:auto;height:64px;padding:7px;gap:4px;border:1px solid var(--hud-line);border-radius:12px;background:var(--hud-ink);color:var(--hud-text);box-shadow:0 8px 32px #0005,inset 0 1px #ffffff08;overflow:visible;}
.bottom .hud-control{position:relative;display:grid;place-content:center;width:48px;height:48px;padding:0;border:1px solid transparent;border-radius:6px;color:var(--hud-text);background:transparent;transition:background 140ms,border-color 140ms,transform 140ms;}
.bottom .hud-control .ui-icon,.bottom .home-control .ui-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:bevel;}
.bottom .control-divider{margin:0 4px;width:1px;height:24px;background:var(--hud-line);}
.bottom .hud-control:is(:hover,:focus-visible):not(:disabled){background:#20232b;border-color:#606672;}
.bottom .hud-control:active:not(:disabled){transform:translateY(1px);background:#30343d;}
.bottom .hud-control:disabled{opacity:1;color:#4d525c;}
.hud-control::before,.hud-control::after{pointer-events:none;position:absolute;opacity:0;transition:opacity 100ms;}
.hud-control::after{content:attr(data-hint);bottom:calc(100% + 19px);left:50%;transform:translateX(-50%);border:1px solid #515761;border-radius:4px;background:#101217;color:white;white-space:nowrap;padding:7px 10px;font:500 .75rem/1.3 var(--mono);letter-spacing:0;}
@media(hover:hover){.hud-control:hover:not(:disabled)::after{opacity:1;transition-delay:450ms;}}
.hud-control:focus-visible::after{opacity:1;}
body.hud-hints-off .hud-control::after{opacity:0;}
:is(.wordmark,.menu-button,.bottom .hud-control,.account-panel a,.account-panel button,.account-volume input,.dialog-header button):focus-visible{outline:2px solid #fff;outline-offset:3px;}
/* A compact account launcher, with one hierarchy and no promotional panel. */
.page-menu.account-panel{position:fixed;left:var(--hud-left);top:var(--hud-panel-top);width:360px;max-width:calc(100vw - 2*var(--hud-left));max-height:calc(100dvh - var(--hud-panel-top) - 100px);padding:20px 16px 16px;border:1px solid #434751;border-radius:12px;background:var(--hud-ink);color:var(--hud-text);box-shadow:0 24px 80px #0008,inset 0 1px #ffffff10;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5c626d #0c0d11;transform-origin:36px 0;isolation:isolate;}
.account-panel[hidden]{display:none;}
.account-heading{display:flex;align-items:center;justify-content:space-between;margin:0 8px 18px;gap:12px;}
.account-heading h2{font:600 .8125rem/1.4 var(--mono);letter-spacing:.10em;color:var(--hud-muted);margin:0;}
.account-status{font:500 .75rem/1 var(--mono);letter-spacing:.05em;border:1px solid #464b55;padding:5px 7px;color:#c5c8d0;border-radius:3px;}
.account-actions,.account-destinations{display:grid;gap:6px;}
.account-destinations{margin-top:16px;padding:16px 0;border-top:1px solid #30343c;border-bottom:1px solid #30343c;}
.account-panel .account-row{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:16px;width:100%;min-height:56px;padding:12px 12px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--hud-text);text-decoration:none;font:600 1.25rem/1.2 var(--grotesk);letter-spacing:-.015em;text-align:left;transition:background 140ms,border-color 140ms;}
.account-row>span:not(.account-tag):not(.visually-hidden){flex:1;}
.account-row .ui-icon{color:#c5cad3;}
.account-row .row-trail{margin-left:auto;width:16px;height:16px;flex-basis:16px;color:var(--hud-muted);}
.account-panel .account-row:hover{background:#1d2027;border-color:#4b515c;color:#fff;}
.account-panel .account-row:hover>.ui-icon{color:#fff;}
.account-panel .account-row:active{background:#292d36;}
.account-panel .account-primary{min-height:60px;background:#f8f9fb;border-color:#f8f9fb;color:#090a0c;border-radius:4px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));}
.account-panel .account-primary .ui-icon{color:inherit;}
.account-panel .account-primary:hover{color:#090a0c;background:#e2e7ef;border-color:#e2e7ef;}
.account-panel .account-primary:hover .ui-icon{color:inherit;}
.account-panel .account-primary:focus-visible{outline-offset:-5px;outline-color:#08090a;}
.account-tag{margin-left:auto;color:var(--hud-muted);font:500 .75rem/1 var(--mono);letter-spacing:.04em;}
.account-audio{padding-top:10px;}
.account-panel .sound-toggle{min-height:48px;}
.sound-toggle .sound-waves{display:none;}.sound-toggle[aria-pressed=true] .sound-waves{display:block;}.sound-toggle[aria-pressed=true] .sound-cross{display:none;}
.account-panel #soundState{font:500 .75rem/1 var(--mono);color:var(--hud-muted);}
.account-panel .sound-toggle[aria-pressed=true] #soundState{color:#fff;}
.account-volume{display:grid;grid-template-columns:auto minmax(50px,1fr) 38px;align-items:center;gap:12px;padding:0 12px 0 52px;color:var(--hud-muted);font:500 .75rem/1.3 var(--mono);}
.account-volume input{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:44px;margin:0;background:transparent;cursor:pointer;}
.account-volume input::-webkit-slider-runnable-track{height:4px;border-radius:0;background:linear-gradient(to right,#fff var(--volume,30%),#515762 var(--volume,30%));}
.account-volume input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:18px;border:2px solid #fff;border-radius:2px;background:#f8f9fb;margin-top:-7px;box-shadow:0 0 0 3px #090a0c;}
.account-volume input::-moz-range-track{height:4px;background:#515762;}.account-volume input::-moz-range-progress{height:4px;background:white;}.account-volume input::-moz-range-thumb{width:10px;height:14px;border:2px solid white;border-radius:2px;background:white;}
.account-volume output{text-align:right;}
.account-panel:not([hidden]){animation:account-in 220ms cubic-bezier(.16,1,.3,1) both;}
.account-panel:not([hidden]) .panel-beat{animation:account-row-in 220ms both;animation-delay:calc(var(--beat,0)*30ms);}
.account-actions .panel-beat:nth-child(1){--beat:1;}.account-actions .panel-beat:nth-child(2){--beat:2;}.account-destinations .panel-beat:nth-child(1){--beat:3;}.account-destinations .panel-beat:nth-child(2){--beat:4;}.account-audio.panel-beat{--beat:5;}
.account-panel.is-closing{animation:account-out 140ms ease-in both;pointer-events:none;}.account-panel.is-closing .panel-beat{animation:none;}
@keyframes account-in{from{opacity:0;transform:translateY(-8px) scale(.98);clip-path:inset(0 0 85% 0 round 12px)}to{opacity:1;transform:none;clip-path:inset(0 round 12px)}}
@keyframes account-row-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes account-out{to{opacity:0;transform:translateY(-6px)}}
.dialog-header button{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;padding:0;border-radius:6px;border-color:#757575;color:#151515;}
.dialog-header button:hover{background:#ddd;}.dialog-header button:focus-visible{outline-color:#151515;}
@media(max-width:700px){:root{--hud-left:16px;--hud-top:16px;--hud-panel-top:136px;}body[data-page] .wordmark{width:56px;height:56px;border-radius:8px;}.wordmark img{width:40px;}body[data-page] .menu-button{width:56px;}.page-menu.account-panel{padding:16px 12px 12px;}.account-panel .account-row{gap:12px;}.account-volume{padding-left:48px;}.account-heading{margin-bottom:14px;}}
@media(prefers-reduced-motion:reduce){.account-panel,.account-panel .panel-beat{animation:none!important;}.menu-line,.hud-control,.account-panel .account-row,.hud-control::after{transition:none!important;}}
.account-panel .ui-icon{width:24px;height:24px;flex:0 0 24px;stroke-width:2;stroke-linecap:square;stroke-linejoin:bevel;}
.account-panel .row-trail{width:16px;height:16px;flex-basis:16px;}
.account-panel .account-row:not(.account-primary)::before{content:'';position:absolute;left:0;top:50%;width:2px;height:18px;transform:translateY(-50%);background:var(--hud-accent);opacity:0;}
.account-panel .account-row:is(:hover,:focus-visible)::before{opacity:1;}
/* Compact console panel; hit areas remain usable at its smaller scale. */
.page-menu.account-panel{width:288px;padding:12px;border-radius:9px;}
.account-heading{margin:0 8px 10px;}.account-heading h2{font-size:.75rem;}.account-status{font-size:.6875rem;padding:4px 6px;}
.account-actions,.account-destinations{gap:2px;}
.account-panel .account-row{min-height:44px;padding:8px;gap:12px;font-size:1rem;border-radius:4px;}
.account-panel .account-primary{min-height:44px;}
.account-destinations{margin-top:8px;padding:8px 0;}
.account-tag,.account-panel #soundState{font-size:.6875rem;}
.account-audio{padding-top:6px;display:grid;grid-template-columns:1fr 104px;align-items:center;gap:4px;}
.account-panel .sound-toggle{min-height:44px;gap:12px;}
.account-panel .sound-toggle #soundState{position:absolute;right:8px;font-size:.625rem;}
.account-panel .sound-toggle>span:not(#soundState){flex:none;}
.account-volume{padding:0 4px 0 0;grid-template-columns:minmax(30px,1fr) 30px;gap:8px;font-size:.6875rem;}
.account-volume .volume-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.account-volume input{height:44px;}
.account-volume input::-webkit-slider-thumb{width:12px;height:16px;margin-top:-6px;}
.account-graphics{display:flex;align-items:center;gap:12px;border-top:1px solid #30343c;padding-top:8px;margin-top:4px;}
#graphicsLabel{font:500 .75rem/1.2 var(--grotesk);color:#bfc4ce;padding-left:8px;}
.graphics-options{display:flex;flex:1;gap:2px;min-width:0;}
.account-panel .graphics-options button{flex:1;min-width:0;min-height:40px;padding:0 5px;border:1px solid transparent;border-radius:3px;font:500 .75rem/1 var(--grotesk);color:#bdc2cd;background:#14171d;}
.account-panel .graphics-options button[aria-pressed=true]{background:#f8f9fb;color:#090a0c;border-color:#f8f9fb;}
.account-panel .graphics-options button:hover:not([aria-pressed=true]){background:#292e38;border-color:#666d79;}
.account-graphics.panel-beat{--beat:6;}
.account-panel :is(a,button,input){scroll-margin-block:8px;}