/* The 6D dial: a compact header control and its panel of dimension switches. */
.six-d{position:relative;display:inline-flex}
.six-d-toggle{--on:4;display:inline-flex;align-items:center;gap:8px;height:42px;padding-inline:6px 13px;border-radius:999px;border:1px solid rgba(181,228,135,.28);background:linear-gradient(135deg,rgba(181,228,135,.10),rgba(181,228,135,.02));color:var(--text);font:600 13px/1 STNumbers,STText,Arial,sans-serif;direction:ltr;cursor:pointer;transition:border-color .2s,background-color .2s}
.six-d-toggle:hover,.six-d.open .six-d-toggle{border-color:rgba(181,228,135,.6);background-color:rgba(181,228,135,.08)}
.six-d-ring{inline-size:28px;block-size:28px;border-radius:50%;flex:none;background:conic-gradient(var(--lime) calc(var(--on) / 6 * 1turn),rgba(241,243,238,.14) 0);-webkit-mask:radial-gradient(circle,transparent 9px,#000 10px);mask:radial-gradient(circle,transparent 9px,#000 10px);transition:background .3s}
.six-d-mark{color:var(--lime);letter-spacing:.06em;font-size:14px}
.six-d-count{color:var(--muted);font-size:11px;font-weight:500}
.six-d-panel{position:absolute;inset-block-start:calc(100% + 14px);inset-inline-end:0;z-index:40;inline-size:340px;padding:18px 18px 8px;border-radius:16px;border:1px solid rgba(200,231,231,.16);background:#0b1417;box-shadow:0 24px 60px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--text);text-align:start}
.six-d-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.six-d-title{margin:0;font-size:15px;font-weight:500}
.six-d-close{display:none;place-items:center;inline-size:40px;block-size:40px;flex:none;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text)}
.six-d-close svg{inline-size:18px;block-size:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.six-d-close:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.six-d-intro{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.7}
.six-d-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding-block:12px;border-block-start:1px solid var(--line);cursor:pointer}
.six-d-axes{display:grid;place-items:center;block-size:36px;border-radius:10px;border:1px solid rgba(181,228,135,.25);color:var(--lime);font:600 11px/1 STNumbers,Arial,sans-serif;letter-spacing:.02em;direction:ltr;white-space:nowrap}
.six-d-text{display:grid;gap:3px;min-inline-size:0}
.six-d-text strong{font-size:14px;font-weight:500}
.six-d-text small{color:var(--muted);font-size:12px;line-height:1.6}
.six-d-row input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;inline-size:44px;block-size:26px;margin:0;border-radius:999px;background:rgba(241,243,238,.16);cursor:pointer;transition:background-color .2s}
.six-d-row input[role=switch]::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:20px;block-size:20px;border-radius:50%;background:#f1f3ee;transition:transform .2s}
.six-d-row input[role=switch]:checked{background:var(--lime)}
.six-d-row input[role=switch]:checked::after{transform:translateX(18px);background:#0b1519}
html[dir=rtl] .six-d-row input[role=switch]:checked::after{transform:translateX(-18px)}
.six-d-row input[role=switch]:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
/* Space where 3D cannot be shown (owner switch or no WebGL2): the row stays, explained and disabled. */
.six-d-row.is-unavailable{cursor:default}.six-d-row.is-unavailable .six-d-axes,.six-d-row.is-unavailable strong{opacity:.55}.six-d-row input[role=switch]:disabled{cursor:not-allowed;opacity:.45}
/* The dial joins a header that was sized without it: tighten spacing so nothing wraps. */
.desktop-nav a,.nav-tools summary,.nav-login,.nav-actions .btn{white-space:nowrap}
@media (max-width:1450px){.six-d-count{display:none}.six-d-toggle{padding-inline:6px 11px}}
@media (min-width:1251px) and (max-width:1450px){.desktop-nav{gap:17px}.nav-actions{gap:11px}}
/* A short screen (a phone held sideways, a small laptop): the panel keeps to the screen and scrolls inside, so moving
   through it never scrolls the page away from the header and the next control. The svh line wins where it works. */
@media (min-width:701px){.six-d-panel{max-block-size:calc(100vh - 120px);max-block-size:calc(100svh - 120px);overflow-y:auto;overscroll-behavior:contain}}
@media (max-width:700px){.six-d-toggle{height:38px;gap:6px}.six-d-ring{inline-size:24px;block-size:24px;-webkit-mask:radial-gradient(circle,transparent 7px,#000 8px);mask:radial-gradient(circle,transparent 7px,#000 8px)}.six-d-mark{font-size:12px}.six-d-panel{position:fixed;inset-block-start:96px;inset-inline:16px;inline-size:auto;max-block-size:calc(100vh - 120px);max-block-size:calc(100svh - 120px);overflow:auto}.six-d-close{display:grid}.site-header:has(.six-d.open):before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(5,10,12,.6)}}
/* Narrow phones: brand, dial, language menu and menu button must share one row without overflowing. */
/* There the dial folds into a badge with the "6D" mark inside its ring. */
@media (max-width:413px){.nav-shell{gap:8px;padding-inline:10px}.nav-actions{gap:8px}.brand{gap:8px}.brand img{width:auto;height:32px}.brand-text small{display:none}.site-header .brand-text strong{font-size:12px}.nav-actions .six-d{order:1}.nav-actions .menu-toggle{order:2}.six-d-toggle{justify-content:center;height:34px;padding-inline:10px;gap:0;border-radius:999px}.six-d-ring{display:none}.six-d-mark{font-size:12px;letter-spacing:.04em}}
@media (prefers-reduced-motion:reduce){.six-d-toggle,.six-d-ring,.six-d-row input[role=switch],.six-d-row input[role=switch]::after{transition:none}}
/* Windows High Contrast: the switches keep a visible track and knob, and the on state is the system highlight. */
@media (forced-colors:active){.six-d-row input[role=switch]{border:1px solid ButtonText;background:ButtonFace}.six-d-row input[role=switch]::after{background:ButtonText}.six-d-row input[role=switch]:checked{background:Highlight;border-color:Highlight}.six-d-row input[role=switch]:checked::after{background:HighlightText}.six-d-row input[role=switch]:disabled{border-color:GrayText}.six-d-row input[role=switch]:disabled::after{background:GrayText}.six-d-ring{forced-color-adjust:none}}