/* shared site chrome: header bar and app frames */
:root{--void:#06080A;--teal:#59D6C4;--amber:#C8933A;--line:#2A363F;--panel:#12181D;--text:#D8DEE4;--dim:#8C98A2}
.site-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:#0B0F12;border-bottom:1px solid var(--line);font:14px/1.3 ui-monospace,Menlo,Consolas,monospace}
.site-head .brand{color:var(--teal);text-decoration:none;font-size:15px;margin-right:auto}
.site-head nav{display:flex;flex-wrap:wrap;gap:4px}
.site-head nav a{color:var(--text);text-decoration:none;padding:8px 10px;border:1px solid transparent;border-radius:3px}
.site-head nav a:hover{border-color:var(--amber)}
.site-head nav a[aria-current=page]{border-color:var(--teal);color:var(--teal)}
@media (pointer:coarse){.site-head nav a{min-height:44px;display:inline-flex;align-items:center}}
html,body{margin:0;background:var(--void);color:var(--text)}
body.app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.appbar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:6px 16px;font:12px ui-monospace,Menlo,Consolas,monospace;color:var(--dim);border-bottom:1px solid var(--line)}
.appbar a{color:var(--amber)}
.appframe{flex:1;width:100%;border:0;display:block;background:#000}