:root{
  --ground:#1b201f; --ground-2:#242b29; --ground-3:#2e3634;
  --rule:#3d4744; --ink:#e8e6e0; --ink-dim:#9aa4a0;
  --signal:#f2c14e; --hazard:#e2703a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%;
  font-variant-numeric:tabular-nums}
.wrap{max-width:44rem;margin:0 auto;padding:1.1rem 1.1rem 4rem}
a{color:var(--signal)}
.crumbs{font-size:.85rem;color:var(--ink-dim);margin:0 0 1rem}
.crumbs a{color:var(--ink-dim)}
header{border-bottom:2px solid var(--signal);padding-bottom:.9rem;margin-bottom:1.2rem}
h1{font-size:1.45rem;line-height:1.2;margin:0 0 .3rem;font-weight:700;letter-spacing:-.01em}
.sub{color:var(--ink-dim);font-size:.9rem;margin:0}
.lead{font-size:1.12rem;line-height:1.5;margin:0 0 1.2rem}
h2{font-size:1.02rem;margin:1.9rem 0 .5rem;font-weight:700}
p{margin:.5rem 0}
.readout{background:var(--ground-2);border:1px solid var(--rule);
  border-left:4px solid var(--signal);border-radius:3px;padding:1rem;margin-bottom:1rem}
.figure{font-size:3.2rem;line-height:1;font-weight:700;color:var(--signal);letter-spacing:-.02em}
.unit{font-size:1.05rem;font-weight:400;color:var(--ink);margin-left:.4rem;letter-spacing:0}
.figure-note{color:var(--ink-dim);font-size:.88rem;margin-top:.45rem}
.steps{margin:.9rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.steps li{background:var(--ground-3);border:1px solid var(--rule);border-radius:3px;padding:.35rem .6rem;font-size:.92rem}
.steps li b{color:var(--signal)}
.prep{font-size:.94rem;margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--rule)}
.prep b{color:var(--signal)}
table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:.4rem}
th,td{text-align:left;padding:.55rem .4rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{color:var(--ink-dim);font-weight:400;font-size:.82rem}
td.num{white-space:nowrap;color:var(--signal);font-weight:700}
.note{border:1px solid var(--rule);border-left:4px solid var(--hazard);
  background:var(--ground-2);border-radius:3px;padding:.75rem .85rem;margin:.7rem 0;font-size:.95rem}
.note.plain{border-left-color:var(--rule)}
.note.conflict{border-left-color:var(--signal)}
.note b{display:block;margin-bottom:.2rem}
svg{width:100%;height:auto;display:block;margin:.6rem 0;background:var(--ground-2);
  border:1px solid var(--rule);border-radius:3px}
.bolt{fill:var(--ground-3);stroke:var(--rule);stroke-width:1.5}
.bolt.long{fill:#3c4a44;stroke:var(--signal)}
.bolt.med{fill:#37413d;stroke:var(--ink-dim)}
.port{fill:none;stroke:var(--rule);stroke-width:1.5}
.outline{fill:none;stroke:var(--rule);stroke-width:1.5}
.sidelabel{fill:var(--ink-dim);font-size:34px;font-family:inherit;text-anchor:middle}
.boltnum{fill:var(--ink);font-size:46px;font-family:inherit;text-anchor:middle;dominant-baseline:central;font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:.9rem;margin:.4rem 0 .8rem;padding:0;list-style:none;font-size:.85rem;color:var(--ink-dim)}
.legend li{display:flex;align-items:center;gap:.35rem}
.key{width:.85rem;height:.85rem;border-radius:50%;border:1.5px solid var(--rule);background:var(--ground-3);flex:none}
.key.long{background:#3c4a44;border-color:var(--signal)}
.key.med{background:#37413d;border-color:var(--ink-dim)}
.caption{color:var(--ink-dim);font-size:.88rem}
.related ul{margin:.4rem 0 0;padding-left:1.1rem}
.related li{margin:.3rem 0}
footer{margin-top:2.5rem;border-top:1px solid var(--rule);padding-top:1rem;color:var(--ink-dim);font-size:.85rem}
