/* ---- palette: consistent, readable in light + dark, honest (bars start at 0) ---- */
  :root{
    --bg:#0e1116; --panel:#171b22; --panel2:#1e232c; --line:#2b313c;
    --ink:#e7ecf3; --ink-dim:#9aa4b2; --ink-faint:#6b7482;
    --nvidia:#76b900; --amd:#ef4d3f; --edge:#7d8ba0;
    --alloy:#4f8cff; --naive:#f2a541;
    --ok:#3fb76b; --warn:#f2a541; --bad:#ef4d3f;
    --shadow:0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: light){
    :root{
      --bg:#f4f6fa; --panel:#ffffff; --panel2:#f0f3f8; --line:#dce1ea;
      --ink:#1a1f28; --ink-dim:#59616e; --ink-faint:#8a93a1;
      --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
    }
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
  code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  a{color:var(--alloy)}
  .wrap{max-width:1240px;margin:0 auto;padding:22px 20px 60px}

  /* ---- header ---- */
  header h1{margin:0 0 4px;font-size:22px;letter-spacing:-.2px}
  header .sub{color:var(--ink-dim);font-size:13px}
  .badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;
    background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);margin-left:6px}
  .honesty{margin-top:10px;padding:9px 12px;border-left:3px solid var(--warn);
    background:var(--panel);border-radius:6px;color:var(--ink-dim);font-size:12.5px}

  /* ---- KPI strip ---- */
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
  .kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:14px 16px;box-shadow:var(--shadow)}
  .kpi .k{font-size:12px;color:var(--ink-dim)}
  .kpi .v{font-size:26px;font-weight:650;letter-spacing:-.5px;margin-top:2px}
  .kpi .v small{font-size:14px;color:var(--ink-dim);font-weight:500}
  .kpi.good .v{color:var(--ok)} .kpi.bad .v{color:var(--bad)}

  /* ---- panels grid ---- */
  .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
  @media (max-width:960px){.grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:16px 18px;box-shadow:var(--shadow);margin-bottom:16px}
  .panel h2{margin:0 0 3px;font-size:15px}
  .panel .desc{color:var(--ink-faint);font-size:12px;margin-bottom:14px}

  /* ---- policy toggle ---- */
  .toggle{display:inline-flex;background:var(--panel2);border:1px solid var(--line);
    border-radius:999px;padding:3px;gap:2px}
  .toggle button{border:0;background:transparent;color:var(--ink-dim);cursor:pointer;
    padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:600}
  .toggle button.on{background:var(--alloy);color:#fff}
  .toggle button.on.naive{background:var(--naive);color:#1a1f28}
  .row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}

  /* ---- fleet view ---- */
  .sku{margin:12px 0}
  .sku .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}
  .sku .nm{font-weight:600}
  .vtag{font-size:10.5px;padding:1px 6px;border-radius:4px;margin-left:7px;color:#0d0f13;font-weight:700}
  .vtag.nvidia{background:var(--nvidia)} .vtag.amd{background:var(--amd);color:#fff}
  .vtag.edge{background:var(--edge)}
  .sku .meta{color:var(--ink-faint);font-size:11.5px}
  .cells{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
  .cell{width:20px;height:20px;border-radius:4px;background:var(--panel2);
    border:1px solid var(--line)}
  .cell.run{border-color:transparent}
  .cell.run.nvidia{background:var(--nvidia)} .cell.run.amd{background:var(--amd)}
  .cell.run.edge{background:var(--edge)}
  .cell.crash{background:repeating-linear-gradient(45deg,var(--bad),var(--bad) 3px,#7a1a13 3px,#7a1a13 6px)}
  .fillnote{font-size:11.5px;color:var(--ink-dim);margin-top:4px}

  /* ---- decision stream ---- */
  .stream{max-height:430px;overflow:auto;margin:-4px -6px;padding:0 6px}
  .drow{display:grid;grid-template-columns:20px 1fr auto auto;gap:10px;align-items:center;
    padding:7px 8px;border-radius:7px;cursor:pointer;border:1px solid transparent}
  .drow:hover{background:var(--panel2);border-color:var(--line)}
  .dot{width:9px;height:9px;border-radius:50%;justify-self:center}
  .dot.placed{background:var(--ok)} .dot.queued{background:var(--warn)} .dot.misplaced{background:var(--bad)}
  .dlabel{font-size:12.5px} .dlabel .port{color:var(--ink-faint);font-size:11px}
  .dsku{font-size:12px;color:var(--ink-dim)} .mono.sc{font-size:12px;color:var(--ink-dim);min-width:44px;text-align:right}
  .pill{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--panel2);
    border:1px solid var(--line);color:var(--ink-dim)}

  /* ---- bars (TCO + meters) ---- */
  .bar{height:26px;background:var(--panel2);border-radius:6px;overflow:hidden;position:relative}
  .bar > span{display:block;height:100%;border-radius:6px 0 0 6px}
  .bar .lab{position:absolute;top:0;left:9px;line-height:26px;font-size:12px;color:#0d0f13;font-weight:700}
  .bar .lab.out{left:auto;right:9px;color:var(--ink)}
  .bl-naive{background:var(--naive)} .bl-alloy{background:var(--alloy)}
  .bgrp{margin:10px 0}
  .bgrp .cap{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-dim);margin-bottom:4px}
  .legend{display:flex;gap:16px;font-size:12px;color:var(--ink-dim);margin-top:6px}
  .swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}

  .stat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
  .stat:last-child{border:0}
  .stat .n{color:var(--ink-dim)}
  .assum{font-size:11.5px;color:var(--ink-faint);margin-top:10px}
  .cites{list-style:none;padding:0;margin:8px 0 0}
  .cites li{font-size:11.5px;color:var(--ink-dim);padding:4px 0;border-top:1px solid var(--line)}

  /* ---- detail drawer ---- */
  .drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:40}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(520px,94vw);background:var(--panel);
    border-left:1px solid var(--line);transform:translateX(100%);transition:transform .18s ease;
    z-index:50;overflow:auto;padding:20px 22px;box-shadow:-12px 0 40px rgba(0,0,0,.4)}
  .drawer.open{transform:none} .drawer-bg.open{display:block}
  .drawer h3{margin:0 0 2px;font-size:16px} .drawer .x{float:right;cursor:pointer;color:var(--ink-dim);font-size:20px;border:0;background:0}
  .rec{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:14px;margin-top:14px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;line-height:1.7}
  .rec .sel{color:var(--ok);font-weight:700} .rec .no{color:var(--bad)} .rec .hd{color:var(--ink-faint)}
  .rec .win{color:var(--alloy);font-weight:700}
  .note-naive{margin-top:14px;padding:12px 14px;border-radius:8px;background:var(--panel2);
    border:1px dashed var(--line);color:var(--ink-dim);font-size:12.5px}

  /* ---- loader ---- */
  #loader{display:none;text-align:center;padding:60px 20px}
  .drop{max-width:520px;margin:20px auto;border:2px dashed var(--line);border-radius:14px;
    padding:34px;background:var(--panel);cursor:pointer}
  .drop.drag{border-color:var(--alloy);background:var(--panel2)}
  .btn{display:inline-block;margin-top:10px;background:var(--alloy);color:#fff;border:0;
    padding:9px 16px;border-radius:8px;cursor:pointer;font-size:13px}
  .muted{color:var(--ink-faint);font-size:12px}

  /* ---- interactive site: hero + controls (added for web/index.html) ---- */
  .hero{padding:8px 0 4px}
  .hero h1{margin:0 0 6px;font-size:26px;letter-spacing:-.4px}
  .hero .thesis{font-size:15px;color:var(--ink-dim);max-width:760px}
  .hero .thesis b{color:var(--ink)}
  .controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:16px 0 6px;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
  .ctl{display:flex;flex-direction:column;gap:4px}
  .ctl label{font-size:11px;color:var(--ink-dim)}
  .ctl input{width:90px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
    color:var(--ink);padding:7px 9px;font-size:13px;font-family:ui-monospace,Menlo,monospace}
  .ctl.wide input{width:74px}
  .ctl-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 4px}
  .ctl-btns{display:flex;gap:8px;margin-left:auto}
  .ctl-btns button{border:0;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer}
  #c-run{background:var(--alloy);color:#fff}
  #c-reset{background:var(--panel2);color:var(--ink-dim);border:1px solid var(--line)}
  .ctl-note{font-size:11.5px;color:var(--ink-faint);margin:2px 0 18px}
  .sitefoot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
    color:var(--ink-faint);font-size:12.5px;display:flex;gap:18px;flex-wrap:wrap}
  .sitefoot a{color:var(--ink-dim)}