/* The shared shell: tokens, fonts, the header and the footer. Loaded by every page, the static ones and the
   React console alike, so the rules below are scoped to .nav and .foot and never reach the page body
   (the console styles its own .lit tree in site/src/console.css). */
@font-face { font-family: "Bricolage"; src: url(/fx/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fx/fonts/geist-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #ffffff;
  --bg-2: #f6f8f7;
  --line: #e3e8e5;
  --ink: #0b1411;
  --ink-2: #5b6660;
  --green-deep: #0e7a43;
  --green-beam: #22e07a;
  --green-wash: #e6f8ee;
  --night: #0b1411;
  --night-2: #121e19;
  --night-line: #22302a;
  --night-ink: #e8efea;
  --night-ink-2: #9aaaa2;
  --amber: #e0a53a;
  --sans: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body { margin: 0; }
.nav, .foot { font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
.nav *, .nav *::before, .nav *::after, .foot *, .foot *::before, .foot *::after { box-sizing: border-box; }
:where(.nav, .foot) .mono { font-family: var(--mono); }
:where(.nav, .foot) .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.nav, .foot) :focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.foot :focus-visible { outline-color: var(--green-beam); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: .5rem .8rem; z-index: 60; font: 500 15px var(--sans); }
.skip:focus { left: 8px; }

/* buttons inside the shell (the static pages have the same .btn in lit.css for their bodies) */
:where(.nav, .foot) .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent;
  font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
:where(.nav, .foot) .btn--go { background: var(--green-deep); color: #fff; }
:where(.nav, .foot) .btn--go:hover { background: #0b6537; }
:where(.nav, .foot) .btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
:where(.nav, .foot) .btn--ghost:hover { border-color: #c9d2cd; background: var(--bg-2); }
:where(.nav, .foot) .btn--beam { background: var(--green-beam); color: var(--night); font-weight: 600; }
:where(.nav, .foot) .btn--beam:hover { background: #5ff0a0; }
:where(.nav, .foot) .btn--lg { height: 44px; padding: 0 18px; font-size: 16px; }

/* ---------- header ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); color: var(--ink); }
.nav__in { max-width: 1200px; margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 24px; }
.nav .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 18px; }
.nav .tag { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--green-deep); background: var(--green-wash); padding: 3px 7px; border-radius: 99px; font-weight: 500; white-space: nowrap; }
.nav__links { display: flex; gap: 26px; margin: 0 auto; }
.nav__links a { color: var(--ink); text-decoration: none; font-size: 15px; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--green-deep); }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--green-beam); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav__act { display: flex; gap: 8px; }
.nav__menu { display: none; position: relative; }
.nav__menu summary { list-style: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu summary span, .nav__menu summary span::before, .nav__menu summary span::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; content: ""; }
.nav__menu summary span::before { position: absolute; top: -5px; }
.nav__menu summary span::after { position: absolute; top: 5px; }
.nav__menu[open] summary span { background: transparent; }
.nav__menu[open] summary span::before { top: 0; transform: rotate(45deg); }
.nav__menu[open] summary span::after { top: 0; transform: rotate(-45deg); }
.nav__sheet { position: absolute; right: 0; top: 48px; min-width: 220px; display: grid; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(11,20,17,.12); }
.nav__sheet a { padding: 11px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 16px; }
.nav__sheet a:hover, .nav__sheet a[aria-current="page"] { background: var(--green-wash); color: var(--green-deep); }

/* ---------- footer: the one night band ---------- */
.foot { position: relative; background: var(--night); color: var(--night-ink); overflow: hidden; padding: 70px 24px 28px; }
.foot a:not(.btn) { color: var(--night-ink); }
.foot__path { position: absolute; inset: 0 0 auto 0; width: 100%; height: 160px; pointer-events: none; }
.foot__beamline { fill: none; stroke: rgba(34,224,122,.25); stroke-width: 1; }
.foot__path text { font-size: 12px; fill: rgba(34,224,122,.55); letter-spacing: .04em; }
.foot__in { position: relative; max-width: 1200px; margin: 0 auto; }
.foot__mark { position: relative; margin-top: 90px; }
.foot__canvas { display: block; width: 100%; }
.foot__word { margin: 0; font: 700 clamp(80px, 22vw, 300px)/0.9 var(--sans); letter-spacing: -.04em; color: var(--night-ink); text-align: center; }
.foot__cta { display: grid; justify-items: center; text-align: center; gap: 14px; margin-top: 28px; }
.foot__line { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 650; letter-spacing: -.02em; }
.foot__act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.foot__then { margin: 0; font-size: 12.5px; color: var(--night-ink-2); }
.foot__then code { font-family: var(--mono); }
.foot .install { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 6px 0 14px; border: 1px dashed #33453c; border-radius: 8px; font-size: 14px; background: transparent; color: var(--night-ink); }
.foot .install__prompt { color: var(--green-beam); }
.foot .install code { font-family: var(--mono); }
.foot .install__copy { font: 500 12px/1 var(--mono); height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--night-line); background: var(--night-2); color: var(--night-ink); cursor: pointer; }
.foot__index { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--night-line); }
.foot__index a { display: grid; gap: 6px; padding: 22px 16px 22px 0; text-decoration: none; color: var(--night-ink); border-bottom: 1px solid var(--night-line); transition: color .2s; }
.foot__index a b { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.foot__index a span { font-size: 12px; color: var(--night-ink-2); }
.foot__index a:hover b { color: var(--green-beam); }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 34px 0 30px; border-bottom: 1px solid var(--night-line); }
.foot__h { margin: 0 0 12px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-beam); }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot__col a { color: var(--night-ink); text-decoration: none; font-size: 15px; }
.foot__col a:hover { color: var(--green-beam); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0 0; font-size: 12px; color: var(--night-ink-2); }
.foot__legal a { color: var(--night-ink-2); text-decoration: none; }
.foot__legal a:hover { color: var(--night-ink); }
.foot__addr { margin: 10px 0 0; font-size: 11.5px; color: var(--night-ink-2); }
.foot__addr a { color: var(--night-ink-2); }

@media (max-width: 960px) {
  .foot__index { grid-template-columns: repeat(2, 1fr); }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav__in { padding: 0 16px; gap: 12px; }
  .nav__links { display: none; }
  .nav__act { margin-left: auto; }
  .nav__act .btn--ghost { display: none; }
  .nav__menu { display: block; }
  .foot { padding: 56px 16px 24px; }
}
@media (max-width: 420px) {
  .nav .tag { display: none; }
}