/* Reset, type, frame shell, header, footer, grid grammar */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Film grain: one fixed SVG noise layer, very low opacity */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99; opacity: 0.035; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1, h2, h3, h4, .display { text-wrap: balance; }
p, .lead, .sub, .d { text-wrap: pretty; }
::selection { background: var(--red); color: var(--bg-0); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
canvas { display: block; }
:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.display em, .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: 0; }
.h1 { font-size: var(--fs-72); }
.h2 { font-size: var(--fs-48); }
.h3 { font-size: var(--fs-32); }
.h4 { font-size: var(--fs-24); }
.h5 { font-size: var(--fs-18); font-weight: 700; font-stretch: 106%; letter-spacing: -0.015em; line-height: 1.15; }
.lead { font-size: var(--fs-15); color: var(--ink-1); line-height: 1.55; max-width: 56ch; }
.mono, .label, .num { font-family: var(--font-mono); }
.label {
  font-size: var(--fs-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.label strong, .label b { color: var(--ink-0); font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-1); }
.ghost { color: var(--ink-2); }
.red { color: var(--red); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.info { color: var(--info); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Frame ---------- */
.frame {
  position: fixed;
  inset: var(--frame-inset);
  pointer-events: none;
  z-index: 100;
  border: 1px solid var(--red);
  opacity: 0.85;
}
.frame::before, .frame::after,
.frame i::before, .frame i::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--red);
  border-style: solid;
  border-width: 0;
}
.frame::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.frame::after { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.frame i::before { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.frame i::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.frame i { position: absolute; inset: 0; }

/* ---------- Shell ---------- */
.shell {
  position: fixed;
  inset: var(--frame-inset);
  display: grid;
  grid-template-rows: var(--header-h) 1fr var(--footer-h);
  background: var(--bg-0);
}
.shell--site {
  position: relative;
  inset: auto;
  min-height: 100vh;
  margin: var(--frame-inset);
  grid-template-rows: var(--header-h) 1fr var(--footer-h);
}
.shell--site .header { position: sticky; top: var(--frame-inset); z-index: 50; }
.shell--site .footer { position: sticky; bottom: var(--frame-inset); z-index: 50; }

/* Header */
.header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-0) 86%, transparent);
  backdrop-filter: blur(10px);
  padding: 0 var(--sp-4);
  gap: var(--sp-6);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand .mark { width: 18px; height: 18px; }
.brand .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.02em;
  font-size: 15px;
  text-transform: uppercase;
}
.brand .sep { width: 1px; height: 16px; background: var(--line-2); }
.brand .product { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-1); }
.nav { display: flex; gap: 2px; justify-self: center; }
.nav a, .nav button {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 6px 10px;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  position: relative;
}
.nav a:hover, .nav button:hover { color: var(--ink-0); }
.nav a[aria-current="page"], .nav button[aria-current="page"] { color: var(--ink-0); }
.nav a[aria-current="page"]::after, .nav button[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: var(--red);
}
.header-right { display: flex; align-items: center; gap: var(--sp-3); }

/* Footer */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--footer-h);
  border-top: 1px solid var(--line);
  background: var(--bg-0);
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}
.footer .fgroup { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.footer .fitem { display: inline-flex; align-items: center; gap: 6px; }
.footer .fitem b { color: var(--ink-1); font-weight: 500; }

/* ---------- Grid grammar ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid > * { background: var(--bg-1); min-width: 0; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; }
.c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c10 { grid-column: span 10; } .c12 { grid-column: span 12; }
.r2 { grid-row: span 2; }

.cell { display: flex; flex-direction: column; min-height: 0; position: relative; }
.cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--line);
  min-height: 36px;
}
.cell-head .label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-1); }
.cell-head .label .idx { color: var(--ink-3); }
.cell-head .meta { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-2); letter-spacing: 0.06em; }
.cell-body { padding: var(--sp-4); flex: 1; min-height: 0; }
.cell-body--flush { padding: 0; }
.cell-body--scroll { overflow: auto; }
.cell-foot { border-top: 1px solid var(--line); padding: 8px var(--sp-4); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-2); letter-spacing: 0.06em; }

/* Live indicator */
.live { display: inline-flex; align-items: center; gap: 6px; }
.live::before { content: ""; width: 6px; height: 6px; background: var(--red); box-shadow: 0 0 0 0 var(--red-glow); animation: pulse 1.8s var(--ease) infinite; }
.live.ok::before { background: var(--ok); box-shadow: none; animation: none; }
.live.idle::before { background: var(--ink-3); box-shadow: none; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--red-glow); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Spotlight: pointer-tracked highlight on hairline cells */
.spot { position: relative; }
.spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-2) var(--ease); background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 45, 45, 0.09), transparent 60%); }
.spot:hover::after { opacity: 1; }
/* Scroll progress line in the footer */
.footer .progress { position: absolute; left: 0; top: -1px; height: 1px; width: var(--p, 0%); background: var(--red); transition: width 80ms linear; }
.footer { position: relative; }

/* Reveal on scroll (site) */
.reveal.armed { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.armed.d1 { transition-delay: 80ms; } .reveal.armed.d2 { transition-delay: 160ms; } .reveal.armed.d3 { transition-delay: 240ms; }
.reveal.armed.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Responsive */
.show-sm { display: none; }
@media (max-width: 640px) { .show-sm { display: inline; } }
@media (max-width: 1100px) {
  .h1 { font-size: var(--fs-48); }
  .h2 { font-size: var(--fs-32); }
}
@media (max-width: 900px) {
  .grid > [class*="c"] { grid-column: span 12; }
  .grid .c6.keep { grid-column: span 6; }
  .nav { display: none; }
}
@media (max-width: 640px) {
  :root { --frame-inset: 4px; }
  .hide-sm { display: none !important; }
  .header-right .btn--ghost { display: none; }
  .header-right .label { display: none; }
  .header-right #budget-chip { display: none; }
  .header { padding: 0 var(--sp-3); gap: var(--sp-3); }
  .footer { padding: 0 var(--sp-3); }
  .footer .fgroup--right { display: none; }
  .grid .c6.keep { grid-column: span 12; }
}

/* Avoid pointer-following motion for reduced-motion and touch users. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .spot::after { display: none; }
}