/* Chrome shared by every page: tokens, header, mobile menu, buttons,
   footer. Written once here and emitted by site-src/layout.mjs, so a
   new page cannot end up with a different nav.
   Page-specific styles load after this and may override. */
:root{
  --bg:#08090A; --bg-2:#0B0D0E; --card:#101314; --card-2:#0D0F10; --input:#0A0C0D;
  --line:rgba(255,255,255,.085); --line-strong:rgba(255,255,255,.16);
  --text:#F2F4F4; --dim:#909A9C; --dimmer:#646E70; --dead:#222627;
  --accent:#8B7CF6; --accent-soft:#B4A9FB; --accent-dim:rgba(139,124,246,.16);
  --pos:#4ADE9B; --neg:#F0736F;
  --display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --pad:16px; --bar:56px; --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:16px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
a{color:var(--accent-soft)}

.wrap{max-width:1100px;margin:0 auto;padding:0 var(--pad)}

/* ---------- header ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(8,9,10,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--bar);gap:12px}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);min-width:0}
.mark-glyph{width:21px;height:21px;flex:none;display:block;color:var(--accent)}
.mark-word{font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.02em;white-space:nowrap}
.nav{display:flex;align-items:center;gap:12px}
.nav-wide{display:none}
.topnav{display:none}
.bar-right{display:flex;align-items:center;gap:8px}

/* ---------- mobile menu ---------- */
.burger{
  width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:10px;
  background:transparent;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:16px;height:1.5px;border-radius:2px;background:var(--text);
  transition:transform .2s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.menu{
  border-top:1px solid var(--line);background:rgba(8,9,10,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:6px var(--pad) calc(12px + env(safe-area-inset-bottom));
}
.menu[hidden]{display:none}
.menu a{display:block;padding:14px 2px;font-size:16px;text-decoration:none;color:var(--text);
  border-bottom:1px solid var(--line)}
.menu a:last-child{border-bottom:0}
.menu-app{color:var(--accent-soft)!important}
body.menu-open{overflow:hidden}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:500;font-size:15.5px;letter-spacing:-.01em;
  padding:0 20px;height:48px;border-radius:10px;border:0;cursor:pointer;
  background:var(--text);color:#0A0B0C;text-decoration:none;
  transition:background .15s ease,transform .12s ease;
}
.btn:active{transform:scale(.985)}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-sm{height:34px;padding:0 14px;font-size:13.5px;border-radius:8px}

/* ---------- footer ---------- */
footer{margin-top:40px;border-top:1px solid var(--line);padding:26px 0 40px}
footer .mark{margin-bottom:12px}
.foot-note{font-size:12.5px;color:var(--dimmer);margin:0 0 10px;line-height:1.55;max-width:56ch}
.foot-links,.foot-tools{font-size:12.5px;color:var(--dimmer);margin:0 0 6px;line-height:1.8}
.foot-links a,.foot-tools a{color:var(--dim);text-decoration:none}

@media (min-width:640px){
  :root{--pad:22px}
  .nav{gap:22px}
  .nav-wide{display:inline;font-size:14.5px;color:var(--dim);text-decoration:none;white-space:nowrap}
  .nav-wide:hover{color:var(--text)}
  .topnav{display:flex;gap:26px;font-size:14.5px}
  .topnav a{text-decoration:none;color:var(--dim);transition:color .15s ease}
  .topnav a:hover{color:var(--text)}
  .burger{display:none}
  .menu{display:none!important}
}