@layer reset, tokens, base, layout, components, surfaces, print;

@layer tokens {
  :root {
    --ink: #0b0f14; --ink-2: #121820; --ink-3: #1a232d; --ink-4: #24303c;
    --edge: #2b3947; --edge-soft: #1e2833;
    --paper: #eef3f5; --paper-2: #aebbc4; --paper-3: #71828e;
    --live: #63e6be; --live-dim: #2f8f74; --live-glow: rgb(99 230 190 / .18);
    --mark: #d1743f; --mark-2: #e79a6d;
    --cool: #6aa5da; --warm: #dcae5b; --bad: #d2574a;
    --s1: 6px; --s2: 12px; --s3: 20px; --s4: 32px; --s5: 52px; --s6: 84px; --s7: 128px;
    --wrap: 1180px; --read: 66ch;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --sans: 'Inter', system-ui, sans-serif;
    --disp: 'Fraunces', Georgia, serif;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, canvas { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-radius: 2px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 76px; }
  body {
    background: var(--ink); color: var(--paper);
    font-family: var(--sans); font-size: 17px; line-height: 1.65; font-weight: 300;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  h1, h2, h3 { font-family: var(--disp); font-weight: 500; line-height: 1.06; letter-spacing: -.02em; }
  code { font-family: var(--mono); font-size: .84em; color: var(--live);
    background: rgb(99 230 190 / .07); border: 1px solid rgb(99 230 190 / .16);
    border-radius: 3px; padding: 1px 5px; }
  pre.code { font-family: var(--mono); font-size: .74rem; line-height: 1.65; color: var(--paper-2);
    background: var(--ink); border: 1px solid var(--edge); border-radius: 4px;
    padding: 12px; overflow: auto; max-height: 300px; white-space: pre-wrap; word-break: break-word; }
  strong { font-weight: 600; color: #fff; }
  em { font-style: italic; }
  a { color: var(--live); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .mute { color: var(--paper-3); }
  .fine { font-family: var(--mono); font-size: .62rem; letter-spacing: .09em;
    text-transform: uppercase; color: var(--paper-3); line-height: 1.8; }
  b.hl, .hl { color: var(--mark-2); font-weight: 600; }
}

@layer layout {
  .strip { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center;
    gap: var(--s3); padding: 9px var(--s3); background: rgb(11 15 20 / .93);
    backdrop-filter: blur(12px); border-bottom: 1px solid var(--edge-soft);
    font-family: var(--mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; }
  .s-id { color: var(--paper-2); }
  .s-runs { color: var(--paper-3); display: flex; align-items: center; gap: 7px; }
  .s-runs b { color: var(--mark-2); font-weight: 600; }
  #runbar { width: 60px; height: 2px; background: var(--edge); position: relative; overflow: hidden; }
  #runbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
    background: var(--live); box-shadow: 0 0 8px var(--live-glow); transition: width .4s; }
  .s-modes { margin-left: auto; display: flex; gap: 2px; }
  .s-modes button, .s-col { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
    text-transform: uppercase; background: none; color: var(--paper-3); cursor: pointer;
    border: 1px solid var(--edge); border-radius: 2px; padding: 4px 9px; transition: .15s; }
  .s-modes button:hover, .s-col:hover { color: var(--live); border-color: var(--live-dim); }
  .s-modes button.on { background: var(--live-dim); border-color: var(--live); color: #04140f; font-weight: 600; }

  .hero { min-height: 92svh; display: flex; flex-direction: column; justify-content: center;
    max-width: var(--wrap); margin-inline: auto; padding: var(--s7) var(--s3) var(--s6); }
  .eyebrow { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--live); margin-bottom: var(--s4); }
  .hero h1 { font-size: clamp(3.2rem, 12vw, 9rem); }
  .hero h1 em { color: var(--mark-2); }
  .lede { max-width: 62ch; margin-top: var(--s3); font-size: clamp(1rem, 1.7vw, 1.2rem); color: var(--paper-2); }
  .hero-go { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s5); }
  .cue { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--paper-3); text-decoration: none; }
  .cue:hover { color: var(--live); }

  .blk { max-width: var(--wrap); margin-inline: auto; padding: var(--s7) var(--s3);
    border-bottom: 1px solid var(--edge-soft); }
  .blk h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: var(--s2); }
  .bid { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
    color: var(--mark); margin-bottom: var(--s2); }
  .dek { font-size: 1.12rem; font-style: italic; color: var(--mark-2); max-width: 56ch; margin-bottom: var(--s4); }
  .prose { max-width: var(--read); }
  .prose p + p { margin-top: var(--s2); }
  .prose + rg-rig, rg-rig + .prose { margin-top: var(--s5); }

  footer { max-width: var(--read); margin: 0 auto; padding: var(--s6) var(--s3) var(--s7); color: var(--paper-2); }
  footer strong { color: var(--live); }
  footer .fine { margin-top: var(--s3); }
}

@layer components {
  .btn { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    background: var(--ink-4); color: var(--paper-2); border: 1px solid var(--edge);
    border-radius: 2px; padding: 8px 13px; cursor: pointer; transition: .15s; }
  .btn:hover { color: var(--live); border-color: var(--live-dim); background: var(--ink-3); }
  .btn.primary { background: var(--live-dim); border-color: var(--live); color: #04140f; font-weight: 600; }
  .btn.primary:hover { background: var(--live); }
  .btn.ghost { background: none; }
  .btn:active { translate: 0 1px; }

  rg-rig { display: block; container-type: inline-size; margin-block: var(--s5);
    background: linear-gradient(180deg, var(--ink-2), var(--ink));
    border: 1px solid var(--edge); border-radius: 5px; overflow: hidden;
    box-shadow: 0 24px 60px -32px #000; }
  .rig-bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
    padding: 10px var(--s3); background: var(--ink-3); border-bottom: 1px solid var(--edge); }
  .rig-n { font-family: var(--mono); font-size: .62rem; color: var(--mark);
    border: 1px solid var(--mark); border-radius: 2px; padding: 1px 6px; }
  .rig-t { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--paper-2); }
  .rig-l { margin-left: auto; font-family: var(--mono); font-size: .58rem; display: flex;
    align-items: center; gap: 6px; color: var(--paper-3); }
  .rig-l b { color: var(--warm); font-weight: 500; }
  .rig-l em { color: var(--live); font-style: normal; }
  @container (max-width: 560px) { .rig-l { margin-left: 0; flex-basis: 100%; } }

  .sp { font-family: var(--mono); font-size: .53rem; letter-spacing: .14em; text-transform: uppercase;
    border-radius: 2px; padding: 2px 6px; }
  .sp.lattice { color: var(--warm); border: 1px solid var(--warm); background: rgb(220 174 91 / .07); }
  .sp.graph { color: var(--cool); border: 1px solid var(--cool); background: rgb(106 165 218 / .07); }

  .ctl { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center;
    padding: var(--s2) var(--s3); border-bottom: 1px solid var(--edge-soft); }
  .fld { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--paper-3); display: flex; align-items: center; gap: 7px; }
  .fld input, .fld select, .fld textarea { font-family: var(--mono); font-size: .74rem;
    background: var(--ink); color: var(--live); border: 1px solid var(--edge);
    border-radius: 2px; padding: 5px 8px; text-transform: none; letter-spacing: 0; }
  .fld input[type=range] { accent-color: var(--live); width: 140px; padding: 0; }
  .fld input[type=number] { width: 76px; }
  .fld textarea { width: 100%; min-height: 44px; resize: vertical; }
  rg-rig > .fld { display: block; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--edge-soft); }

  .pane { padding: var(--s3); max-height: 420px; overflow: auto; }
  .pane-h { font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--paper-3); margin-bottom: var(--s2); }
  .pane-h:not(:first-child) { margin-top: var(--s3); }

  .readout { display: flex; gap: var(--s2); align-items: baseline; padding: 9px var(--s3);
    background: #070b0f; border-top: 1px solid var(--edge); font-family: var(--mono);
    font-size: .68rem; color: var(--live); min-height: 38px; }
  .readout .r-k { font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--paper-3); flex-shrink: 0; }
  .readout [data-out] { line-height: 1.55; }
  .readout.done { background: linear-gradient(90deg, rgb(99 230 190 / .07), #070b0f 60%); }
  .bad { color: var(--bad); }

  table.t { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .68rem; }
  table.t th { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--edge);
    color: var(--paper-3); font-weight: 400; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
  table.t td { padding: 4px 8px; border-bottom: 1px solid var(--edge-soft); color: var(--paper-2); }
  table.t tr:hover td { background: rgb(99 230 190 / .04); }

  /* attention */
  .att-r { display: grid; grid-template-columns: 108px 1fr 54px 96px; gap: 9px;
    align-items: center; padding: 4px 0; font-family: var(--mono); font-size: .66rem; }
  .att-k { color: var(--paper-2); }
  .att-b { height: 14px; background: var(--ink); border: 1px solid var(--edge); border-radius: 2px; position: relative; }
  .att-b i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--live-dim), var(--live)); }
  .att-w { color: var(--live); text-align: right; }
  .att-v { color: var(--paper-3); }
  .att-r.top .att-k, .att-r.top .att-v { color: #fff; }
  @container (max-width: 520px) { .att-r { grid-template-columns: 88px 1fr 48px; } .att-v { display: none; } }

  /* merge */
  .mg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
  .mg-c { background: var(--ink-2); border: 1px solid var(--edge); border-radius: 4px; padding: var(--s2); }
  .mg-c.ok { border-color: var(--live-dim); }
  .mg-h { display: block; font-family: var(--mono); font-size: .55rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--paper-3); margin-bottom: 6px; }
  .mg-c code { font-size: 1.1rem; letter-spacing: .1em; }

  /* chain */
  .ch-r { display: grid; grid-template-columns: 130px 1fr; gap: var(--s2); padding: 5px 0;
    border-bottom: 1px solid var(--edge-soft); font-family: var(--mono); font-size: .66rem; align-items: baseline; }
  .ch-r span { color: var(--paper-3); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
  .ch-r code { word-break: break-all; background: none; border: none; padding: 0; }
  .ch-r.ok code { color: var(--live); }
  .ch-r.bad code { color: var(--bad); }
  .ch-l { margin-top: var(--s3); display: flex; flex-direction: column; gap: 4px; }
  .ch-lv { display: flex; align-items: center; gap: 3px; }
  .ch-lv b { font-family: var(--mono); font-size: .55rem; color: var(--paper-3); width: 22px; }
  .ch-lv i { width: 11px; height: 11px; border-radius: 2px; background: var(--live-dim); }

  /* schema */
  .sch-g { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  @container (max-width: 620px) { .sch-g { grid-template-columns: 1fr; } }
  .sch-e { display: grid; grid-template-columns: 130px 96px 1fr; gap: 9px; padding: 5px 0;
    border-bottom: 1px solid var(--edge-soft); font-family: var(--mono); font-size: .64rem; color: var(--paper-2); }
  .sch-e code { background: none; border: none; padding: 0; color: var(--mark-2); }
  .sch-e b { color: var(--bad); font-weight: 500; }
  .sch-ok { font-family: var(--mono); font-size: .66rem; color: var(--live); }

  rg-rig canvas { width: 100%; height: 300px; background: var(--ink); }

  /* gains + concordance */
  .gains { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s2); margin-block: var(--s4); }
  .g { background: var(--ink-2); border: 1px solid var(--edge); border-left: 2px solid var(--live);
    border-radius: 4px; padding: var(--s3); }
  .g.none { border-left-color: var(--mark); }
  .g b { display: block; font-family: var(--disp); font-size: 1.4rem; font-weight: 500;
    color: #fff; margin-bottom: 7px; }
  .g p { font-size: .9rem; color: var(--paper-2); line-height: 1.55; }
  .cc { overflow-x: auto; margin-block: var(--s4); }
  .cc table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 680px; }
  .cc th { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--edge);
    background: var(--ink-3); color: var(--paper-3); font-family: var(--mono);
    font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
  .cc td { padding: 8px 12px; border-bottom: 1px solid var(--edge-soft); color: var(--paper-2); vertical-align: top; }
  .cc td:first-child { color: #fff; }
  .cc td:nth-child(2) { font-family: var(--mono); font-size: .76rem; color: var(--warm); white-space: nowrap; }
  .cc td:last-child { font-family: var(--mono); font-size: .7rem; color: var(--live); }
  .cc tr:has(td:last-child:not(:empty)) td:last-child:is(:not(:empty)) { }
  .cc tr:hover td { background: rgb(99 230 190 / .04); }

  /* popover */
  [popover] { max-width: 620px; width: calc(100% - 32px); background: var(--ink-2);
    color: var(--paper); border: 1px solid var(--edge); border-radius: 6px;
    padding: var(--s4); box-shadow: 0 40px 90px -30px #000; }
  [popover]::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(3px); }
  [popover] h3 { font-size: 1.6rem; margin-bottom: var(--s3); }
  [popover] dl { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 7px var(--s3); font-size: .88rem; }
  [popover] dt { font-family: var(--mono); font-size: .66rem; color: var(--live); }
  [popover] dd { color: var(--paper-2); }
  [popover] .fine { margin-top: var(--s3); }
  @media (max-width: 560px) { [popover] dl { grid-template-columns: 1fr; } [popover] dd { margin-bottom: 6px; } }
}

@layer surfaces {
  #index, #pager { display: none; }

  body[data-mode="index"] main, body[data-mode="index"] footer { display: none; }
  body[data-mode="index"] #index { display: block; max-width: var(--wrap);
    margin-inline: auto; padding: var(--s7) var(--s3) var(--s6); }
  .ix-h h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
  .ix-h p { color: var(--paper-2); margin-top: var(--s2); max-width: 52ch; }
  .ix-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
    gap: var(--s2); margin-top: var(--s5); }
  .ix-c { display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
    background: var(--ink-2); border: 1px solid var(--edge); border-radius: 5px;
    padding: var(--s3); font-family: var(--sans); transition: .16s; }
  .ix-c:hover { border-color: var(--live-dim); translate: 0 -2px; }
  .ix-n { font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; color: var(--mark); }
  .ix-t { font-family: var(--disp); font-size: 1.45rem; color: #fff; line-height: 1.1; }
  .ix-d { font-size: .84rem; color: var(--paper-3); line-height: 1.5; flex: 1; }
  .ix-l { font-family: var(--mono); font-size: .58rem; color: var(--warm); margin-top: 4px; }

  body[data-mode="deck"] .blk:not(.active), body[data-mode="deck"] .hero:not(.active) { display: none; }
  body[data-mode="deck"] .blk.active { min-height: 100svh; padding-top: var(--s7); border-bottom: none; }
  body[data-mode="deck"] footer { display: none; }
  body[data-mode="deck"] main { padding-bottom: 64px; }
  body[data-mode="deck"] #pager { display: flex; position: fixed; inset: auto 0 0; z-index: 58;
    align-items: center; justify-content: center; gap: var(--s3);
    padding: 9px var(--s3); background: rgb(18 24 32 / .95);
    backdrop-filter: blur(10px); border-top: 1px solid var(--edge); }
  .pg { font-family: var(--mono); font-size: .64rem; background: var(--ink-4); color: var(--paper-2);
    border: 1px solid var(--edge); border-radius: 2px; padding: 6px 14px; cursor: pointer; }
  .pg:disabled { opacity: .3; cursor: default; }
  .pg-m { font-size: .88rem; color: var(--paper-2); max-width: 40ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pg-m b { font-family: var(--mono); font-size: .68rem; color: var(--mark); margin-right: 7px; }
  .pg-c { font-family: var(--mono); font-size: .6rem; color: var(--paper-3); }
  @media (max-width: 620px) { .pg-m { display: none; } }

  ::view-transition-old(root) { animation: fade .18s ease both reverse; }
  ::view-transition-new(root) { animation: fade .22s ease both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

@layer print {
  @media print {
    body { background: #fff; color: #111; font-size: 11pt; }
    .strip, #pager, #index, [popover], .ctl, .readout, canvas, .hero-go { display: none !important; }
    rg-rig { border: 1pt dashed #999; background: #fafafa; page-break-inside: avoid; }
    rg-rig::after { content: "This instrument runs in the browser and cannot be printed.";
      display: block; padding: 8pt; font-style: italic; font-size: 9pt; color: #666; }
    .rig-bar { background: none; border: none; }
    .rig-t, .rig-n, .rig-l { color: #111 !important; }
    h1, h2 { color: #000; } .dek { color: #7a3f1e; }
    .prose p, .lede, .g p, .cc td { color: #222 !important; }
    .blk { border-bottom: 1pt solid #ccc; padding: 14pt 0; }
    @page { margin: 18mm 16mm; }
  }
}