/* Round 8 shell: the Resources menu, the header's utility area (Discord, Download), the phone menu's groups and the
   footer's latest-update line. renderNav links this file from the header itself, so the landing and tour (V15
   stylesheets) and the portal pages (base.css) draw one nav. Site kit tokens only (tokens.css). */
.site-nav .desktop-nav{align-items:center;gap:26px;margin-right:8px}
.site-nav .desktop-nav>a{padding-left:0}
.site-nav .desktop-nav>a::before{content:none}
.site-nav .desktop-nav>a,.site-nav .nav-drop-toggle{display:inline-flex;align-items:center;min-height:44px}
.site-nav .nav-drop{position:relative;display:flex;align-items:center}
.site-nav .nav-drop-toggle{gap:7px;padding:0;border:0;background:none;color:var(--muted2);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:color .2s}
.site-nav .nav-drop-toggle svg{width:12px;height:12px;transition:transform .2s}
.site-nav .nav-drop-toggle:hover,.site-nav .nav-drop[data-active] .nav-drop-toggle,.site-nav .nav-drop[data-open] .nav-drop-toggle{color:var(--text)}
.site-nav .nav-drop[data-open] .nav-drop-toggle svg{transform:rotate(180deg)}
.site-nav .nav-drop-menu{position:absolute;top:calc(100% + 12px);left:-14px;z-index:120;display:none;gap:2px;width:304px;padding:8px;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--bg-elevated);box-shadow:var(--shadow-md);font-family:var(--font-sans);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none}
.site-nav .nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.site-nav .nav-drop[data-open] .nav-drop-menu{display:grid}
html:not([data-shell-ready]) .site-nav .nav-drop:hover .nav-drop-menu{display:grid}
.site-nav .nav-drop-menu a{display:grid;gap:3px;padding:10px 12px;border-radius:var(--r-xs);color:var(--text);text-decoration:none;transition:background .15s}
.site-nav .nav-drop-menu a b{font-size:15px;font-weight:600;line-height:1.25}
.site-nav .nav-drop-menu a span{font-size:13px;line-height:1.4;color:var(--muted2)}
.site-nav .nav-drop-menu a:hover,.site-nav .nav-drop-menu a:focus-visible{background:var(--surface)}
.site-nav .nav-drop-menu a:focus-visible{outline-offset:0}
.site-nav .nav-drop-menu a[aria-current=page] b{color:var(--cta-text)}
.site-nav .nav-drop-menu .nav-drop-all{display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding-top:12px;border-top:1px solid var(--line);border-radius:0 0 var(--r-xs) var(--r-xs);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2)}
.site-nav .nav-drop-menu .nav-drop-all span{font-family:var(--font-sans);font-size:16px;color:inherit}
.site-nav .nav-drop-menu .nav-drop-all:hover{color:var(--text)}

.site-nav .nav-actions{display:flex;align-items:center;gap:10px}
.site-nav .theme-toggle,.site-nav .nav-discord{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;padding:0;border:1px solid var(--edge);border-radius:var(--r-xs);background:none;color:var(--muted2);transition:color .2s,border-color .2s}
.site-nav .theme-toggle:hover,.site-nav .nav-discord:hover{color:var(--text);border-color:var(--edge-hover);background:none}
.site-nav .theme-toggle svg{width:16px;height:16px}
.site-nav .nav-discord svg{width:18px;height:18px}
.site-nav .nav-download{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--muted2);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .2s}
.site-nav .nav-download:hover,.site-nav .nav-download:focus-visible{color:var(--text)}
.site-nav .nav-login,.site-nav .nav-cta{white-space:nowrap}
.site-nav .nav-cta{min-height:44px;padding:0 16px;gap:16px;font-size:14px;line-height:1.2}
.site-nav .nav-cta .arw{font-size:16px;line-height:1}
.site-nav .nav-cta .arw i{font-style:normal}

.site-nav .mobile-menu{max-height:calc(100svh - var(--site-nav-h,68px));overflow-y:auto;overscroll-behavior:contain}
.site-nav .mobile-menu-group{display:block;padding:18px 0 2px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2)}
.site-nav .mobile-menu a.mobile-menu-sub{padding-left:16px}
.site-nav .mobile-menu a[aria-current=page]{color:var(--cta-text)}

@media(max-width:1240px){.site-nav .desktop-nav{gap:22px}.site-nav .nav-download{padding:0 4px}}
@media(max-width:1050px){.site-nav .nav-download{display:none}}
@media(max-width:420px){.site-nav{gap:10px}.site-nav .nav-actions{gap:8px}.site-nav .theme-toggle,.site-nav .nav-discord{width:36px;height:36px}}

.kit-footer-bar #motion-toggle[hidden]{display:none}
/* Round 8r (founder item 5): the stages' pause / play key (WCAG 2.2.2; shell.mjs renderStageMotionKey), a hardware key on
   each demo monitor's bezel, the same dark chassis in both themes. The glyph shows the action (pause bars while the
   stages run, a play triangle while paused); the LED is lit while motion runs. Each page places it on its own bezel. */
/* Round 8r fix: the button itself is the 44 x 44 hit area (WCAG 2.5.5; getBoundingClientRect reports it, no pseudo-element
   reach that a later sibling can paint over), transparent; the drawn keycap is its ::before, centred and still small
   (--smk-w x --smk-h, edges --smk-bt / --smk-bb, --smk-r, --smk-shadow: each bezel sets its own). In flow, a bezel gives it
   negative margins so it takes only the keycap's room; absolutely placed, it offsets by half the difference. */
.stage-motion-key{--smk-led:#9fe0bd;--smk-w:44px;--smk-h:22px;--smk-bt:1px;--smk-bb:3px;--smk-r:4px;--smk-edge:#5b6d77;--smk-shadow:0 2px 3px #0007,inset 0 1px #ffffff1c;position:relative;isolation:isolate;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:max(44px,var(--smk-w));min-width:44px;height:max(44px,var(--smk-h));min-height:44px;margin:0;padding:0 0 calc(var(--smk-bb) - var(--smk-bt));border:0;border-radius:0;background:none;box-shadow:none;color:#c6d4db;font:inherit;line-height:1;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:color .18s ease-out,translate .12s ease-out}
.stage-motion-key::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;box-sizing:border-box;width:var(--smk-w);height:var(--smk-h);translate:-50% -50%;border:1px solid var(--smk-edge);border-top-width:var(--smk-bt);border-bottom:var(--smk-bb) solid #0c141b;border-radius:var(--smk-r);background:linear-gradient(#34454e,#1b262e);box-shadow:var(--smk-shadow);transition:border-color .18s ease-out}
.stage-motion-key:hover{color:#fff;--smk-edge:#8ea2ad}
.stage-motion-key:active{translate:0 1px}
.stage-motion-key:focus-visible{outline:none}
.stage-motion-key:focus-visible::before{outline:2px solid #f39a4a;outline-offset:3px}
.stage-motion-key .smk-led{flex:none;width:5px;height:5px;border-radius:50%;background:#26343c;box-shadow:inset 0 0 0 1px #0008;transition:background-color .2s ease-out,box-shadow .2s ease-out}
.stage-motion-key[aria-pressed=false] .smk-led{background:var(--smk-led);box-shadow:0 0 5px var(--smk-led)}
.stage-motion-key .smk-glyph{flex:none;width:10px;height:10px;fill:currentColor}
.stage-motion-key[aria-pressed=false] .smk-play,.stage-motion-key[aria-pressed=true] .smk-pause{display:none}
.stage-motion-key .smk-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.kit-footer-bar .kit-footer-latest{display:inline-flex;align-items:baseline;gap:10px;min-width:0;max-width:100%;color:var(--muted2);text-decoration:none}
.kit-footer-latest b{flex-shrink:0;font-weight:500;color:var(--cta-text)}
.kit-footer-latest span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-footer-latest i{font-style:normal}
.kit-footer-latest:hover span{color:var(--text)}
.tour-moved{margin:0;padding:14px var(--pad,24px);border-bottom:1px solid var(--line);font-size:15px;color:var(--body)}
.tour-moved a{color:var(--text);text-underline-offset:4px}
.kit-footer a{text-decoration:none}
@media(min-width:1200px){.kit-footer-cols{gap:48px}.kit-footer-follow>div{display:grid;grid-template-columns:repeat(3,36px)}}
.kit-footer-cols nav button{margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:var(--muted2);transition:color .2s}
.kit-footer-cols nav button:hover{color:var(--text)}