@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-style:normal;src:url('/fonts/Atkinson-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-style:normal;src:url('/fonts/Atkinson-Bold.woff2') format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;src:url('/fonts/JetBrainsMono-Medium.woff2') format('woff2');font-display:swap}

:root{
  --sans:'Atkinson Hyperlegible',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ground:#EFE6D8;
  --ground-deep:#E4D5C2;
  --ink:#1C1915;
  --quiet:#6B6258;
  --hair:#D4C6B4;
  --panel:rgba(255,252,247,.9);
  --live:#E85A1A;
  --chrome:52px;
  --dock:min(42vh,320px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ground);color:var(--ink);font-family:var(--sans)}
body{overflow:hidden}
.skip-link{position:absolute;left:8px;top:-40px;z-index:20;padding:6px 10px;background:var(--ink);color:#fff}
.skip-link:focus{top:8px}
.chrome{position:fixed;top:0;left:0;right:0;height:var(--chrome);display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--hair);background:var(--panel);z-index:5}
.chrome a{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);text-decoration:none}
.chrome a:hover{color:var(--live)}
.chrome h1{font-size:clamp(.95rem,2vw,1.15rem);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.notice{margin-left:auto;font-size:.72rem;color:var(--quiet);max-width:42ch;line-height:1.3}
main{height:100%;padding-top:var(--chrome);display:flex;flex-direction:column}
.stage{position:relative;flex:1 1 auto;min-height:0}
#view{display:block;width:100%;height:100%;background:var(--ground)}
.gauges,.subs,.views,.caption{position:absolute;z-index:3;background:var(--panel);border:1px solid var(--hair);border-radius:6px;padding:10px 12px;backdrop-filter:blur(8px)}
.gauges{top:12px;left:12px;display:grid;grid-template-columns:repeat(2,minmax(92px,1fr));gap:8px 16px}
.g dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.g dd{font-family:var(--mono);font-size:1.35rem;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.g dd.live{color:var(--live)}
.subs{top:12px;right:12px;display:flex;flex-direction:column;gap:6px;max-width:180px}
.views{bottom:12px;right:12px;display:flex;gap:6px}
.caption{bottom:12px;left:12px;right:210px;font-size:.82rem;color:var(--quiet);max-width:52ch}
button,.chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:7px 9px;border-radius:4px;cursor:pointer;text-align:left}
button:hover,.chip:hover{background:var(--ink);color:#fff}
button[aria-pressed="true"],.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
button:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.dock{flex:0 0 auto;border-top:1px solid var(--hair);background:var(--panel);padding:8px 12px 10px;display:grid;grid-template-columns:1.1fr .9fr;gap:10px 16px;max-height:var(--dock)}
.transport{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
label.ctrl{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
label.ctrl input,label.ctrl select{accent-color:var(--live)}
.charts{display:grid;grid-template-columns:1fr 160px;gap:10px;min-height:92px}
#powerChart{width:100%;height:92px;display:block}
.flow{font-size:.72rem;color:var(--quiet)}
.flow b{color:var(--ink);font-weight:700}
.flow .live{color:var(--live)}
.drawers{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap}
details{border:1px solid var(--hair);border-radius:6px;padding:8px 10px;flex:1;min-width:min(100%,280px);background:#fffcf7}
details summary{cursor:pointer;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
details .body{margin-top:8px;font-size:.8rem;color:var(--quiet);line-height:1.45}
table.specs{width:100%;border-collapse:collapse;font-size:.78rem}
table.specs th{text-align:left;font-weight:400;color:var(--quiet);padding:3px 8px 3px 0}
table.specs td{padding:3px 0}
.tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;text-transform:uppercase}
.tag.listing{color:var(--ink)}
.tag.assumption{color:var(--live)}
.mark{position:fixed;bottom:8px;right:12px;z-index:4;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.mark a{color:inherit;text-decoration:none}
#fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--ground)}
#fallback[hidden]{display:none}
.callout{position:absolute;z-index:4;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--panel);border:1px solid var(--hair);padding:4px 6px;border-radius:3px;pointer-events:none;white-space:nowrap;transform:translate(8px,-110%)}
.callout.live{border-color:var(--live);color:var(--live)}
.leader-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.leader-line{stroke:var(--ink);stroke-width:1.25;fill:none}

@media (max-width:700px){
  body{overflow:auto}
  .chrome{position:static;height:auto;min-height:0;flex-wrap:wrap;padding:8px 10px}
  .notice{margin-left:0;max-width:none;flex-basis:100%;font-size:.68rem}
  main{height:auto;min-height:100%;padding-top:0}
  .stage{display:flex;flex-direction:column;height:auto;flex:none}
  #view{width:100%;height:min(48vh,420px);flex:none}
  .gauges{top:8px;left:8px;right:auto;grid-template-columns:repeat(3,minmax(72px,1fr));padding:8px;max-width:calc(100% - 16px);gap:6px 10px}
  .g dd{font-size:.95rem}
  .subs{position:static;max-width:none;flex-direction:row;flex-wrap:wrap;margin:8px}
  .views{display:none}
  .caption{position:static;max-width:none;margin:0 8px 4px;font-size:.72rem}
  .dock{display:flex;flex-direction:column;max-height:none}
  .charts{grid-template-columns:1fr}
  .mark{position:static;display:block;padding:8px 12px}
  .callout,.leader-svg{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
}