/* ============================================================================
   StateTick Blog — shared design system
   One stylesheet for every page. Pages carry no inline <style>.
   Legacy article/tutorial class names are re-skinned here, so page bodies
   never needed rewriting.
   ========================================================================= */

:root{
  --paper:#F2F4F4; --surface:#FFFFFF; --surface-2:#E9EDED;
  --ink:#12201F; --ink-2:#2B3C3B; --muted:#5E7170;
  --rule:#CFD9D8; --rule-soft:#E2E8E8;
  --accent:#0D6E70; --accent-wash:#E0EDED;
  --lamp-fault:#B23A2E; --lamp-fault-wash:#F6E5E2;
  --lamp-hold:#A8760F; --lamp-hold-wash:#F7EEDC;
  --lamp-run:#2C7A55; --lamp-run-wash:#E2F0E9;
  --neutral:#6F807E; --neutral-wash:#EDEFEF;
  --code-bg:#0F1A19; --code-ink:#DCE7E5;
  --shadow:0 1px 2px rgba(18,32,31,.06), 0 8px 24px -12px rgba(18,32,31,.18);
  --measure:66ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1615; --surface:#151F1E; --surface-2:#1C2827;
    --ink:#E4EDEC; --ink-2:#C3D2D0; --muted:#8AA09E;
    --rule:#2A3837; --rule-soft:#212E2D;
    --accent:#4FC3C5; --accent-wash:#16302F;
    --lamp-fault:#E0705F; --lamp-fault-wash:#2E1D1A;
    --lamp-hold:#DFAE4A; --lamp-hold-wash:#2C2416;
    --lamp-run:#5FBE8C; --lamp-run-wash:#16291F;
    --neutral:#7C8F8D; --neutral-wash:#1A2423;
    --code-bg:#0A1211; --code-ink:#DCE7E5;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1615; --surface:#151F1E; --surface-2:#1C2827;
  --ink:#E4EDEC; --ink-2:#C3D2D0; --muted:#8AA09E;
  --rule:#2A3837; --rule-soft:#212E2D;
  --accent:#4FC3C5; --accent-wash:#16302F;
  --lamp-fault:#E0705F; --lamp-fault-wash:#2E1D1A;
  --lamp-hold:#DFAE4A; --lamp-hold-wash:#2C2416;
  --lamp-run:#5FBE8C; --lamp-run-wash:#16291F;
  --neutral:#7C8F8D; --neutral-wash:#1A2423;
  --code-bg:#0A1211; --code-ink:#DCE7E5;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* ---------- base ---------- */
*{margin:0; padding:0; box-sizing:border-box}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Source Serif 4","Iowan Old Style",Georgia,serif;
  font-size:17.5px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
em{font-style:italic}
strong{font-weight:600; color:var(--ink)}
h1,h2,h3,h4{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; text-wrap:balance}

/* ---------- shell ---------- */
.layout{display:flex; min-height:100vh; align-items:flex-start}
.main,.maincol{flex:1 1 auto; min-width:0; background:var(--paper)}

.sidebar{
  width:280px; flex:0 0 280px; position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto; padding:30px 22px 40px;
  background:var(--surface); border-right:1px solid var(--rule);
}
.sidebar-logo{display:flex; align-items:center; gap:11px; margin-bottom:32px; padding-bottom:22px; border-bottom:1px solid var(--rule)}
.sidebar-logo img{height:28px}
.sidebar-logo span{font-family:Archivo,sans-serif; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.sidebar-section{margin-bottom:26px}
.sidebar-section h3{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin-bottom:10px; padding-left:11px;
}
.sidebar-sub{padding:2px 11px 6px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); opacity:.85}
.sidebar-nav{list-style:none; margin:0; padding:0}
.sidebar-nav li{margin-bottom:2px}
.sidebar-nav a{
  display:block; padding:8px 11px; border-radius:3px;
  font-family:Archivo,sans-serif; font-size:13.5px; line-height:1.35;
  color:var(--ink-2); transition:background .12s ease, color .12s ease;
}
.sidebar-nav a:hover{background:var(--surface-2); color:var(--ink)}
.sidebar-nav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sidebar-nav a.active{background:var(--accent-wash); color:var(--accent); font-weight:600}
.sidebar details.st-sub,.st-sub{margin:4px 0 2px}
.sidebar details.st-sub > summary,.st-sub summary{
  cursor:pointer; padding:8px 11px; border-radius:3px; list-style:none;
  font-family:Archivo,sans-serif; font-size:13.5px; color:var(--ink-2);
}
.sidebar details.st-sub > summary::-webkit-details-marker,.st-sub summary::-webkit-details-marker{display:none}
.sidebar details.st-sub > summary::before,.st-sub summary::before{content:"\25B8"; display:inline-block; width:14px; color:var(--muted); transition:transform .12s ease}
.sidebar details.st-sub[open] > summary::before,.st-sub[open] summary::before{transform:rotate(90deg)}
.sidebar details.st-sub > summary:hover,.st-sub summary:hover{background:var(--surface-2); color:var(--ink)}
.sidebar details.st-sub.cur > summary{color:var(--accent); font-weight:600}
.sidebar details.st-sub .sidebar-nav,.st-sub .sidebar-nav{margin-left:14px; padding-left:8px; border-left:1px solid var(--rule)}
.st-sub .sidebar-nav a{font-size:13px; padding:6px 10px}
.sidebar-back{margin-top:28px; padding-top:20px; border-top:1px solid var(--rule)}
.sidebar-back a{display:flex; align-items:center; gap:8px; font-family:Archivo,sans-serif; font-size:13px; color:var(--muted)}
.sidebar-back a:hover{color:var(--accent)}

/* ---------- legacy article/tutorial container ---------- */
.content{max-width:716px; margin:0 auto; padding:64px 40px 96px}
.badge{
  display:inline-block; padding:5px 11px; margin-bottom:18px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-wash); border:1px solid var(--accent); border-radius:2px;
}
.content h1{font-size:clamp(32px,4.6vw,48px); font-weight:800; letter-spacing:-.025em; color:var(--ink); margin-bottom:20px; line-height:1.08}
.content .intro,.content .subtitle{font-family:Archivo,sans-serif; font-size:clamp(17px,1.9vw,20px); line-height:1.55; color:var(--ink-2); margin-bottom:38px}
.content h2{font-size:clamp(24px,3vw,31px); font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:56px 0 18px; line-height:1.18}
.content h3{font-size:19px; font-weight:700; letter-spacing:-.008em; color:var(--ink); margin:34px 0 10px}
.content p{color:var(--ink-2); margin-bottom:20px; line-height:1.72}
.content ul,.content ol{margin:0 0 20px 22px; color:var(--ink-2); line-height:1.72}
.content li{margin-bottom:8px}
.content code{
  background:var(--surface-2); border:1px solid var(--rule); border-radius:2px; padding:1px 6px;
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:.85em; color:var(--accent);
}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; margin:32px 0; border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:var(--surface)}
th,td{padding:13px 18px; text-align:left; border-bottom:1px solid var(--rule)}
tr:last-child td{border-bottom:none}
th{background:var(--surface-2); font-family:Archivo,sans-serif; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.01em}
td{color:var(--ink-2); font-size:15.5px; line-height:1.6}
td code{font-size:13px}

/* ---------- callouts ---------- */
.callout{background:var(--accent-wash); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:3px; padding:18px 22px; margin:30px 0}
.callout p{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.62}
.callout strong{color:var(--accent)}
.note{background:var(--lamp-hold-wash); border:1px solid var(--rule); border-left:3px solid var(--lamp-hold); border-radius:3px; padding:18px 22px; margin:30px 0}
.note p{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.62}
.note strong{color:var(--lamp-hold)}
.check{color:var(--lamp-run); font-weight:700}
.x{color:var(--muted)}

/* ---------- card grids (legacy + new) ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:28px 0}
.card{display:block; padding:16px 18px; background:var(--surface); border:1px solid var(--rule); border-radius:3px; transition:border-color .15s ease, transform .15s ease}
a.card:hover,.card:hover{border-color:var(--accent)}
a.card:hover{transform:translateY(-1px)}
.card h3,.card h4{font-family:Archivo,sans-serif; font-size:14.5px; font-weight:700; color:var(--ink); margin:0 0 6px}
.card p{font-size:14.5px; color:var(--muted); margin:0; line-height:1.5}
.card b{display:block; font-family:Archivo,sans-serif; font-size:14px; font-weight:700; margin-bottom:6px}
.card span{display:block; font-size:14.5px; color:var(--muted); line-height:1.5}
.card.on{border-color:var(--accent); background:var(--accent-wash)}
.card.on b{color:var(--accent)}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:30px 0}
.feature{padding:18px 20px; background:var(--surface); border:1px solid var(--rule); border-radius:3px}
.feature h4{font-family:Archivo,sans-serif; font-size:14.5px; font-weight:700; color:var(--ink); margin:0 0 6px}
.feature p{font-size:14.5px; color:var(--muted); margin:0; line-height:1.55}

.specs{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:32px 0; padding:24px; background:var(--surface); border:1px solid var(--rule); border-radius:3px}
.specs h4{font-family:Archivo,sans-serif; font-size:15px; font-weight:700; color:var(--ink); margin:0 0 12px}
.specs ul{list-style:none; margin:0}
.specs li{padding:6px 0 6px 20px; position:relative; color:var(--ink-2); font-size:15px}
.specs li:before{content:""; position:absolute; left:0; top:15px; width:6px; height:6px; background:var(--accent); border-radius:50%}

ul.check-list{list-style:none; margin:0 0 20px}
ul.check-list li{padding:6px 0 6px 24px; position:relative; color:var(--ink-2)}
ul.check-list li:before{content:"\2713"; position:absolute; left:0; color:var(--lamp-run); font-weight:700}

/* ---------- index listing ---------- */
.article-list{display:flex; flex-direction:column; gap:12px}
.article-card{display:block; padding:20px 22px; background:var(--surface); border:1px solid var(--rule); border-radius:3px; transition:border-color .15s ease, transform .15s ease}
.article-card:hover{border-color:var(--accent); transform:translateY(-1px)}
.article-card h3{font-family:Archivo,sans-serif; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:0 0 7px}
.article-card p{font-size:15px; color:var(--muted); margin-bottom:11px; line-height:1.55}
.article-card .read-more{font-family:Archivo,sans-serif; font-size:13.5px; color:var(--accent); font-weight:600}

details.tut-cat{border:1px solid var(--rule); border-radius:3px; margin-bottom:12px; overflow:hidden; background:var(--surface)}
details.tut-cat > summary{
  cursor:pointer; padding:15px 20px; list-style:none; display:flex; align-items:center; gap:10px;
  font-family:Archivo,sans-serif; font-weight:700; font-size:15.5px; color:var(--ink); background:var(--surface-2);
}
details.tut-cat > summary::-webkit-details-marker{display:none}
details.tut-cat > summary::before{content:"\25B8"; color:var(--accent); font-size:.9em; transition:transform .15s ease}
details.tut-cat[open] > summary::before{transform:rotate(90deg)}
details.tut-cat .article-list{padding:16px 20px 20px}

/* ---------- code blocks ---------- */
pre.st,pre.cond{
  background:var(--code-bg); color:var(--code-ink); border:1px solid var(--rule); border-radius:3px;
  padding:18px 20px; overflow-x:auto; margin:24px 0;
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; font-size:13px; line-height:1.7;
}
pre.st .k,pre.cond .k{color:#7FD8D9; font-weight:600}
pre.st .f,pre.cond .f{color:#8FB8E8}
pre.st .c,pre.cond .c{color:#7C8F8D; font-style:italic}
pre.st .s{color:#6FCF97}
pre.cond .n{color:#DFAE4A}
pre.cond .o{color:#7FD8D9}
pre.cond .v{color:#E4EDEC}

/* ---------- images & figures ----------
   A figure may step outside the text column so screenshots stay legible, but it
   is capped and always keeps a gutter on both sides of the main area. Centring
   is done from the column's midpoint, so it does not depend on the column width.
   Clicking an image still opens it full size in a new tab.                    */
.content figure,
.figrow{
  position:relative; left:50%; transform:translateX(-50%);
  width:min(1080px, calc(100vw - 280px - 112px));
  margin:38px 0;
}
.content figure{text-align:center}
.figrow{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:flex-start}
.figrow figure{position:static; left:auto; transform:none; width:auto; max-width:100%; margin:0; flex:1 1 320px; text-align:center}
.content figure.narrow{position:static; left:auto; transform:none; width:auto; max-width:460px; margin:32px auto}

.content figure a,.figrow figure a{display:inline-block; max-width:100%; line-height:0}
.content img{
  display:block; width:auto; max-width:100%; height:auto; margin:0 auto;
  background:var(--surface); border:1px solid var(--rule); border-radius:3px;
  box-shadow:var(--shadow); image-rendering:-webkit-optimize-contrast; cursor:zoom-in;
  transition:border-color .15s ease;
}
.content img:hover{border-color:var(--accent)}
.content figcaption{font-family:Archivo,sans-serif; font-size:13.5px; color:var(--muted); margin-top:12px; line-height:1.55; text-align:center; max-width:70ch; margin-left:auto; margin-right:auto}

.pager{display:flex; justify-content:space-between; gap:16px; margin-top:52px; border-top:1px solid var(--rule); padding-top:24px}
.pager a{font-family:Archivo,sans-serif; font-size:14.5px; color:var(--accent); font-weight:600; max-width:48%}
.pager .nx{text-align:right; margin-left:auto}

/* ---------- call to action ---------- */
.cta{background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:3px; padding:34px; text-align:center; margin-top:52px}
.cta h3{font-family:Archivo,sans-serif; font-size:21px; font-weight:700; color:var(--ink); margin:0 0 10px}
.cta p{color:var(--muted); max-width:420px; margin:0 auto 22px; font-size:15.5px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 22px; background:var(--accent); color:var(--paper); border-radius:3px; font-family:Archivo,sans-serif; font-weight:600; font-size:14.5px; transition:opacity .15s ease}
.btn:hover{opacity:.88}

/* ============================================================================
   Long-form article layout (the pages authored in the new format)
   ========================================================================= */
.wrap{max-width:1040px; margin:0 auto; padding:0 32px 96px}
.prose{max-width:var(--measure)}
.mono,code,.snum,.doctype,.gl i,.rp,.cov,.tbl,.log{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

header.top{border-bottom:1px solid var(--rule); background:var(--surface)}
.top-inner{max-width:1040px; margin:0 auto; padding:9px 32px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.brandmark{display:flex; align-items:center; gap:9px; font-family:Archivo,sans-serif; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.brandlogo{height:24px; width:auto; display:block; flex:0 0 auto}
.doctype{font-size:12px; font-weight:700; letter-spacing:.09em; color:var(--accent); text-transform:uppercase; background:var(--accent-wash); border:1px solid var(--accent); border-radius:2px; padding:4px 10px}

.hero{padding:72px 0 50px}
.eyebrow{font-family:Archivo,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:22px}
.wrap h1{font-family:Archivo,sans-serif; font-size:clamp(38px,6.2vw,66px); line-height:1.04; font-weight:800; letter-spacing:-.028em; margin:0 0 26px; max-width:16ch}
.wrap h1 em{font-style:normal; color:var(--accent)}
.lede{font-family:Archivo,sans-serif; font-size:clamp(18px,2.05vw,21px); line-height:1.52; color:var(--ink-2); max-width:58ch; margin:0}
.lede + .lede{margin-top:16px}

.glance{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:30px 0 32px; margin-top:52px}
.glance .kicker{display:block; font-family:Archivo,sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:20px}
.gl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:12px}
.gl{display:block; background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:16px 18px; transition:border-color .15s ease, transform .15s ease}
.gl:hover{border-color:var(--accent); transform:translateY(-1px)}
.gl:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.gl i{display:block; font-style:normal; font-size:10.5px; color:var(--accent); letter-spacing:.08em; margin-bottom:9px}
.gl b{display:block; font-family:Archivo,sans-serif; font-size:15px; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:7px; letter-spacing:-.01em}
.gl span{display:block; font-size:14px; color:var(--muted); line-height:1.5}

.wrap section{padding:64px 0; border-bottom:1px solid var(--rule-soft); scroll-margin-top:20px}
.wrap section:last-of-type{border-bottom:none}
.shead{display:flex; align-items:baseline; gap:16px; margin-bottom:12px; flex-wrap:wrap}
.snum{font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.06em}
.wrap h2{font-family:Archivo,sans-serif; font-size:clamp(26px,3.3vw,35px); font-weight:700; letter-spacing:-.02em; margin:0; line-height:1.16}
.sdek{color:var(--muted); font-size:16.5px; margin:0 0 34px; max-width:var(--measure)}
.wrap h3{font-family:Archivo,sans-serif; font-size:19px; font-weight:700; letter-spacing:-.008em; margin:0 0 10px}
.wrap p{margin:0 0 18px}
.wrap p:last-child{margin-bottom:0}

.translate{background:var(--neutral-wash); border:1px solid var(--rule); border-left:3px solid var(--neutral); border-radius:3px; padding:18px 22px; max-width:var(--measure); margin-top:28px}
.translate .kicker{display:block; font-family:Archivo,sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--neutral); margin-bottom:9px}
.translate p{font-size:15.5px; line-height:1.6; color:var(--ink-2); margin:0}
.translate p + p{margin-top:10px}

.steps,.ladder{display:flex; flex-direction:column; gap:10px; margin:28px 0 0}
.rung{display:grid; grid-template-columns:150px 1fr; gap:20px; align-items:start; background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:16px 20px; border-left:3px solid var(--accent)}
.rung.f{border-left-color:var(--lamp-fault)}
.rung.h{border-left-color:var(--lamp-hold)}
.rung.r{border-left-color:var(--lamp-run)}
.rn{font-family:Archivo,sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--accent)}
.rung.f .rn{color:var(--lamp-fault)} .rung.h .rn{color:var(--lamp-hold)} .rung.r .rn{color:var(--lamp-run)}
.rp{font-size:11px; font-weight:700; color:var(--muted); padding-top:4px}
.rbody{font-size:15.5px; line-height:1.58; color:var(--ink-2)}

.metrics{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px}
.metric{font-size:11.5px; padding:5px 10px; border:1px solid var(--rule); border-radius:2px; background:var(--surface); color:var(--ink-2); font-family:"JetBrains Mono",ui-monospace,monospace}
.metric.on{border-color:var(--accent); color:var(--accent); background:var(--accent-wash)}

.scene{background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--lamp-fault); border-radius:3px; padding:24px 26px; max-width:var(--measure); margin-bottom:34px}
.scene p{font-size:16.5px; line-height:1.62; color:var(--ink-2)}
.scene p:first-child{color:var(--ink)}

.closer{background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:3px; padding:26px 28px; max-width:var(--measure)}
.closer h3{margin-bottom:12px}
.closer p{font-size:16.5px; line-height:1.62; color:var(--ink-2)}
.seealso{margin-top:30px; padding:20px 22px; border:1px solid var(--rule); border-radius:3px; background:var(--surface-2); max-width:var(--measure)}
.seealso .kicker{display:block; font-family:Archivo,sans-serif; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.seealso p{margin:0 0 10px; font-size:16px; line-height:1.55}
.seealso p:last-child{margin-bottom:0}

.wrap footer{padding:38px 0 0; border-top:1px solid var(--rule); margin-top:24px}
.wrap footer p{font-family:Archivo,sans-serif; font-size:13.5px; color:var(--muted); max-width:var(--measure)}

/* monospace panels (coverage, logs, mapping tables) */
.covwrap,.logwrap,.tblwrap{margin:28px 0 0; border:1px solid var(--rule); border-radius:3px; background:var(--surface); overflow:hidden}
.covbar,.logbar,.tblbar{display:flex; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--rule); background:var(--surface-2); flex-wrap:wrap}
.covbar span,.logbar span,.tblbar span{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; color:var(--muted); letter-spacing:.06em}
.covscroll,.logscroll,.tblscroll{overflow-x:auto}
.cov,.log,.tbl{display:block; padding:16px; font-size:12.5px; line-height:1.95; white-space:pre; color:var(--ink-2)}
.cov{min-width:640px} .log{min-width:660px} .tbl{min-width:680px}
.lt{color:var(--muted)}
.k-trans{color:var(--accent); font-weight:700}
.k-cond{color:var(--lamp-hold); font-weight:700}
.k-act{color:var(--lamp-run); font-weight:700}
.k-set{color:var(--neutral); font-weight:700}
.hit,.flag{background:var(--lamp-fault-wash); color:var(--lamp-fault); font-weight:700; padding:1px 4px; border-radius:2px}
.ok,.yes{color:var(--lamp-run); font-weight:700}
.no{color:var(--lamp-fault); font-weight:700}
.hint{color:var(--accent)}
.warn{background:var(--lamp-hold-wash); color:var(--lamp-hold); font-weight:700; padding:1px 5px; border-radius:2px}
.hd{color:var(--muted); font-weight:700}
.rd{color:var(--accent); font-weight:700}
.wr{color:var(--lamp-hold); font-weight:700}

/* ---------- inline SVG figures ---------- */
.wrap figure{margin:34px 0 0}
.fig-scroll{overflow-x:auto; padding-bottom:8px}
figure svg{display:block; height:auto; max-width:100%; color:var(--ink-2)}
.wrap figcaption{font-size:14.5px; line-height:1.58; color:var(--muted); max-width:var(--measure); margin-top:14px}
.d-surface{fill:var(--surface); stroke:var(--rule); stroke-width:1}
.d-lane{fill:var(--surface-2); stroke:var(--rule); stroke-width:1}
.d-band{fill:var(--surface-2); stroke:var(--rule); stroke-width:1}
.d-accent{fill:var(--accent-wash); stroke:var(--accent); stroke-width:1.4}
.d-fault{fill:var(--lamp-fault-wash); stroke:var(--lamp-fault); stroke-width:1.4}
.d-hold{fill:var(--lamp-hold-wash); stroke:var(--lamp-hold); stroke-width:1.4}
.d-run{fill:var(--lamp-run-wash); stroke:var(--lamp-run); stroke-width:1.4}
.d-empty{fill:none; stroke:var(--rule); stroke-width:1.2; stroke-dasharray:4 3}
.d-pane{fill:none; stroke:var(--rule); stroke-width:1}
.d-thin{stroke:var(--muted); stroke-width:1.1; fill:none; opacity:.75}
.d-tick{stroke:var(--muted); stroke-width:1; opacity:.5}
.d-rule{stroke:var(--rule); stroke-width:1}
.d-grid{stroke:var(--rule); stroke-width:1; opacity:.7}
.d-wire{stroke:currentColor; stroke-width:1.3; fill:none; opacity:.8}
.d-wire-a{stroke:var(--accent); stroke-width:1.6; fill:none}
.d-wire-r{stroke:var(--lamp-fault); stroke-width:1.6; fill:none; stroke-dasharray:5 3}
.d-cut{stroke:var(--muted); stroke-width:1.3; fill:none; stroke-dasharray:5 4}
.d-sig,.d-trace{stroke:var(--accent); stroke-width:2; fill:none}
.d-bracket{stroke:var(--accent); stroke-width:1.3; fill:none}
.d-cursor{stroke:var(--lamp-fault); stroke-width:1.6}
.d-head{fill:currentColor}
.d-head-a{fill:var(--accent)}
.t-title{fill:var(--ink); font-family:Archivo,sans-serif; font-size:13px; font-weight:700}
.t-body{fill:var(--ink); font-family:Archivo,sans-serif; font-size:12px}
.t-small{fill:var(--muted); font-family:Archivo,sans-serif; font-size:11.5px}
.t-mono{fill:var(--ink-2); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.04em}
.t-a{fill:var(--accent)} .t-f{fill:var(--lamp-fault)} .t-h{fill:var(--lamp-hold)} .t-r{fill:var(--lamp-run)}

/* ---------- video sections ---------- */
.vid{border-top:1px solid var(--rule); padding-top:44px; margin-top:52px}
.vid:first-of-type{border-top:0; padding-top:0; margin-top:38px}
.vid-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:10px}
.vid-num{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; font-weight:700;
         color:var(--accent); letter-spacing:.08em}
.vid h2{font-size:clamp(23px,2.6vw,30px); letter-spacing:-.02em; margin:0}
.vid .dek{color:var(--muted); font-size:16px; margin:0 0 22px; max-width:var(--measure)}

/* Click-to-play facade: no YouTube request, cookie or script until the reader
   asks for one, and the page stays fast with four videos on it. */
.player{position:relative; aspect-ratio:16/9; background:#0F1A19; border:1px solid var(--rule);
        border-radius:4px; overflow:hidden; cursor:pointer}
.player img{width:100%; height:100%; object-fit:cover; display:block; opacity:.82; transition:opacity .18s ease}
.player:hover img{opacity:1}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.player .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
.player .play span{display:flex; align-items:center; justify-content:center; width:76px; height:54px;
        background:rgba(15,26,25,.82); border:1px solid rgba(255,255,255,.28); border-radius:8px;
        transition:background .18s ease, transform .18s ease}
.player:hover .play span{background:var(--accent); transform:scale(1.06)}
.player .play svg{width:22px; height:26px; fill:#fff; margin-left:3px}
.player:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.vid-share{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px}
.vid-share a,.vid-share button{
  font-family:Archivo,sans-serif; font-size:13px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--rule); border-radius:3px;
  padding:8px 14px; cursor:pointer; transition:border-color .15s ease, color .15s ease}
.vid-share a:hover,.vid-share button:hover{border-color:var(--accent); color:var(--accent)}
.vid-share button.done{border-color:var(--lamp-run); color:var(--lamp-run)}

/* ---------- back to the product site ---------- */
.tohome-side{
  display:block; margin:-18px 0 26px; padding:8px 12px;
  font-family:Archivo,sans-serif; font-size:13px; font-weight:600;
  color:var(--accent); background:var(--accent-wash);
  border:1px solid var(--accent); border-radius:3px; text-align:center;
  transition:background .15s ease, color .15s ease;
}
.tohome-side:hover{background:var(--accent); color:#fff}
.tohome-side:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tohome{display:none}

/* ---------- mobile navigation ---------- */
.mobilebar{display:none}
.navscrim{display:none}
.navclose{display:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .figrow{gap:14px}
}
@media (max-width:980px){
  .content figure,.figrow{
    position:static; left:auto; transform:none;
    width:auto; max-width:100%; margin:28px 0;
  }
  .figrow{flex-direction:column}
}
@media (max-width:980px){
  .mobilebar{
    display:flex; align-items:center; gap:11px;
    position:sticky; top:0; z-index:60;
    padding:7px 14px;
    background:var(--surface); border-bottom:1px solid var(--rule);
  }
  .navtoggle{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:34px; height:34px; padding:0 7px; margin:0;
    background:none; border:1px solid var(--rule); border-radius:3px;
    cursor:pointer; flex:0 0 auto;
  }
  .navtoggle span{display:block; height:2px; background:var(--ink); border-radius:1px}
  .navtoggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .mobilebrand{display:flex; align-items:center; gap:8px; text-decoration:none; min-width:0}
  .mobilebrand img{height:18px; width:auto; display:block; flex:0 0 auto}
  .mobilebrand span{
    font-family:Archivo,sans-serif; font-size:12.5px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
  }
  .mobilebrand b{color:var(--accent); font-weight:700}
  .tohome{
    display:block; margin-left:auto; padding:6px 10px;
    font-family:Archivo,sans-serif; font-size:12px; font-weight:600;
    color:var(--accent); border:1px solid var(--accent); border-radius:3px;
    white-space:nowrap; flex:0 0 auto;
  }
  .tohome-side{margin-top:0}

  /* the tree becomes an off-canvas drawer rather than disappearing */
  .sidebar{
    display:block; position:fixed; top:0; left:0; bottom:0; z-index:80;
    width:min(310px, 86vw); flex:0 0 auto; height:100dvh;
    padding:22px 20px 40px;
    transform:translateX(-100%); transition:transform .2s ease;
    will-change:transform;
  }
  body.nav-open .sidebar{transform:none; box-shadow:0 0 44px rgba(10,22,24,.34)}
  body.nav-open{overflow:hidden}
  .navscrim{display:block; position:fixed; inset:0; z-index:70;
    background:rgba(10,22,24,.46); opacity:0; pointer-events:none; transition:opacity .2s ease}
  body.nav-open .navscrim{opacity:1; pointer-events:auto}
  .navclose{
    display:block; position:absolute; top:14px; right:14px;
    width:32px; height:32px; line-height:1; font-size:22px;
    background:none; border:1px solid var(--rule); border-radius:3px;
    color:var(--muted); cursor:pointer;
  }
  .navclose:hover{color:var(--ink)}
  .sidebar-logo{padding-right:42px}

  /* the mobile bar carries the brand and the hero carries the section label,
     so the desktop page header would only be a second bar of the same height */
  header.top{display:none}

  .content{padding:44px 24px 72px}
  .wrap{padding-left:24px; padding-right:24px}
  .top-inner{padding-left:24px; padding-right:24px}
  .specs,.cards{grid-template-columns:1fr}
  .rung{grid-template-columns:1fr; gap:8px}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}