/* Waterline control panel. Tokens and look follow docs/blueprint-reference.css. Dark only. */
:root{
  color-scheme:dark;
  --bg:#06111a; --panel:#0a1822; --deep:#030b11;
  --ink:#e4edf1; --muted:#8ba1ad; --dim:#4f6570; --body2:#c3d2d8;
  --line:rgba(140,190,205,.20); --line2:rgba(140,190,205,.10);
  --gridc:rgba(120,175,195,.055); --gridc2:rgba(120,175,195,.09);
  --accent:#5fe3b9; --accent-soft:rgba(95,227,185,.10);
  --pass:#5fe3b9; --fail:#ff7b6b; --warn:#f2c14e;
  --pod:#f2a65a; --api:#a996ff; --chain:#9aa6c8; --ens:#2f9bdc; --world:#d9dee2; --mb:#f0443a; --ens-ink:#6cbbe8;
  /* sponsor hues tuned for the dark UI; their logos keep the exact brand colours */
  --ens-fill:rgba(0,128,188,.1); --world-fill:rgba(246,246,246,.06);
  --display:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --cell:56px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{background:var(--bg);}
body{margin:0; background-color:var(--bg); color:var(--ink); font-family:var(--display); font-size:15px; line-height:1.6;}
/* blueprint grid on its own fixed layer: full strength at the page edges, ~12% behind the reading column */
.gridbg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--gridc2) 1px,transparent 1px),linear-gradient(90deg,var(--gridc2) 1px,transparent 1px),
    linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);
  background-size:calc(var(--cell)*4) calc(var(--cell)*4),calc(var(--cell)*4) calc(var(--cell)*4),var(--cell) var(--cell),var(--cell) var(--cell);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.12) 16%,rgba(0,0,0,.12) 84%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.12) 16%,rgba(0,0,0,.12) 84%,#000 100%);
}
/* ruler ticks along the left and top edges */
body::before,body::after{content:""; position:fixed; pointer-events:none; z-index:20;}
body::before{left:0; top:0; bottom:0; width:10px; background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--cell));}
body::after{left:0; right:0; top:0; height:8px; background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px var(--cell));}
::selection{background:rgba(95,227,185,.25);}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(95,227,185,.35);}
a:hover{border-bottom-color:var(--accent);}
:focus-visible{outline:1px solid var(--accent); outline-offset:3px;}
h1,h2,h3{font-family:var(--display); font-weight:300; letter-spacing:-.01em; line-height:1.15; margin:0; text-wrap:balance;}
h1{font-size:clamp(34px,6vw,64px); letter-spacing:.2em; text-transform:uppercase;}
h2{font-size:clamp(24px,3vw,32px);}
h3{font-size:18px; font-weight:400;}
p{margin:0; max-width:70ch;}
code,.mono{font-family:var(--mono); font-size:12.5px;}
a.mono{white-space:nowrap;}
.sub{color:var(--muted);}
.label{font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted);}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--accent);}
.skip{position:absolute; left:-999px; top:8px; z-index:30; background:var(--bg); padding:6px 10px;}
.skip:focus{left:16px;}

/* top bar */
.topbar{position:sticky; top:0; z-index:10; background:rgba(6,17,26,.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--line2);}
.topbar-in{max-width:1200px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap;}
.brand{font-weight:400; font-size:15px; letter-spacing:.45em; text-transform:uppercase; color:var(--ink); border:0;}
.brand small{font-family:var(--mono); font-size:10.5px; letter-spacing:.28em; color:var(--muted); margin-left:14px;}
.tabs{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap;}
.tabs a{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); padding:7px 12px; border:1px solid transparent;}
.tabs a:hover{color:var(--ink);}
.tabs a[aria-current="page"]{color:var(--accent); border-color:var(--line);}

/* layout */
.wrap{max-width:1200px; margin:0 auto; padding:0 28px 96px; position:relative; z-index:1; outline:none;}
.hero{position:relative; display:grid; gap:14px; padding:72px 0 270px; overflow:hidden;}
.hero canvas{position:absolute; left:-28px; right:-28px; bottom:0; width:calc(100% + 56px); height:250px; z-index:-1;}
.hero .lede{font-weight:300; font-size:clamp(18px,2.2vw,24px); color:#bfeee0; max-width:48ch;}
.pagehead{display:grid; gap:10px; padding:48px 0 28px;}
section{display:grid; gap:18px; padding:40px 0; border-top:1px solid var(--line2);}
.sechead{display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;}
.count{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted);}

/* panels: hairlines with corner brackets */
.panel{position:relative; background:var(--panel); border:1px solid var(--line2); padding:22px;}
.panel::before,.panel::after{content:""; position:absolute; width:14px; height:14px; pointer-events:none;}
.panel::before{left:-1px; top:-1px; border-left:1px solid var(--accent); border-top:1px solid var(--accent);}
.panel::after{right:-1px; bottom:-1px; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent);}

/* status tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:0; border-top:1px solid var(--line);}
.tile{padding:16px 18px 18px 0; border-bottom:1px solid var(--line2); display:grid; gap:6px; align-content:start; min-width:0;}
.tile .label{display:flex; align-items:center; gap:10px; letter-spacing:.24em;}
.tile b{font-weight:300; font-size:22px; line-height:1.2; overflow-wrap:anywhere;}
.tile > span{color:var(--muted); font-size:13px; overflow-wrap:anywhere;}
.dot{width:8px; height:8px; display:inline-block; flex:none;}
.c-pod{--c:var(--pod);} .c-api{--c:var(--api);} .c-chain{--c:var(--chain);} .c-ens{--c:var(--ens);} .c-world{--c:var(--world);} .c-mb{--c:var(--mb);}
.dot{background:var(--c,var(--accent));}
.world-c{color:var(--world);}
.nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:22px;}
.num{border-top:1px solid var(--line); padding-top:10px; display:grid; gap:2px;}
.num b{font-weight:300; font-size:44px; line-height:1.05; font-variant-numeric:tabular-nums;}

/* tables: hairlines only */
.tbl{overflow-x:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
table{border-collapse:collapse; width:100%; font-size:14px;}
th,td{text-align:left; padding:12px 16px 12px 0; border-bottom:1px solid var(--line2); vertical-align:middle; white-space:nowrap;}
th{font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:400;}
tr:last-child td{border-bottom:0;}
td{font-variant-numeric:tabular-nums;}
td.mono{font-size:12.5px;}
.pill{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; padding:2px 9px; border:1px solid currentColor; white-space:nowrap;}
.st-pass,.st-recovered{color:var(--pass);} .st-degraded{color:var(--warn);} .st-fail,.st-failed{color:var(--fail);} .st-suspect,.st-pending{color:var(--warn);} .st-unknown{color:var(--muted);}
.empty,.msg{color:var(--muted); font-size:14px;}
.err{color:var(--fail);}

/* forms and buttons */
form.inline{display:flex; gap:10px; flex-wrap:wrap; align-items:end;}
.field{display:grid; gap:6px; flex:1 1 320px; min-width:0;}
input[type=text]{font-family:var(--mono); font-size:14px; padding:10px 12px; border:1px solid var(--line); background:var(--deep); color:var(--ink); min-width:0; width:100%;}
input[type=text]:focus-visible{border-color:var(--accent); outline-offset:0;}
.btn{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; padding:10px 15px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; white-space:nowrap;}
.btn:hover{border-color:var(--accent); color:var(--accent);}
.btn.primary{border-color:var(--accent); color:var(--accent);}
.btn.world{border-color:var(--world); color:var(--world);}
.btn.world:hover{background:var(--world-fill);}
.btn.sm{padding:5px 10px; font-size:10.5px;}
.btn:disabled{opacity:.5; cursor:default;}

/* ENS record card */
.ens{border:1px solid var(--ens); background:linear-gradient(var(--ens-fill),var(--ens-fill)),var(--panel); padding:18px; display:grid; gap:12px; position:relative;}
.ens .nm{font-family:var(--mono); font-size:14px; color:var(--ens-ink); overflow-wrap:anywhere;}
dl.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 22px; font-family:var(--mono); font-size:12.5px; margin:0;}
dl.kv dt{color:var(--muted);} dl.kv dd{margin:0; overflow-wrap:anywhere;}

/* check detail */
.detail{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; align-items:start;}
.block{display:grid; gap:12px; border-top:1px solid var(--line); padding-top:14px; min-width:0;}
.reasons{margin:0; padding-left:18px; color:var(--body2); max-width:70ch;}
.reasons li{margin-bottom:4px;}
.verdict{font-family:var(--display); font-weight:300; font-size:clamp(40px,7vw,72px); letter-spacing:.2em; text-transform:uppercase; line-height:1;}
.samples{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none;}
.samples li{font-family:var(--mono); font-size:12px; padding:2px 8px; border:1px solid var(--line2); color:var(--body2);}
.bar{height:4px; background:var(--line2); position:relative;}
.bar i{position:absolute; left:0; top:0; bottom:0; background:var(--accent);}
.bar.over i{background:var(--fail);}
svg.stair{display:block; width:100%; height:auto; font-family:var(--mono);}
svg.stair .ax{font-size:10.5px; fill:var(--muted);}
svg.stair .grid{stroke:var(--line2);}
svg.stair .ref{stroke:var(--dim); stroke-dasharray:2 4;}
svg.stair .step{stroke:var(--pod); stroke-dasharray:5 4;}
svg.stair .curve{fill:none; stroke:var(--pod); stroke-width:2; stroke-linejoin:round;}

/* the test, in one line, with its numbers */
section.test{gap:16px;}
.principle{font-weight:300; font-size:clamp(19px,2.3vw,25px); line-height:1.3; color:#bfeee0; max-width:44ch;}
.specline{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 22px; border-top:1px solid var(--line); padding-top:12px;}
.specline div{display:grid; gap:2px; min-width:0;}
.specline b{font-family:var(--mono); font-weight:400; font-size:15px; overflow-wrap:anywhere;}
.specline div>span{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.gauges{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px 28px;}
.gauge{display:grid; gap:6px;}
.gauge-hd{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;}
.gauge-hd .label{letter-spacing:.16em;}
.gauge-hd b{font-family:var(--mono); font-weight:400; font-size:14px;}
.gauge .bar{height:6px;}
.gauge .bar::after{content:""; position:absolute; right:0; top:-4px; bottom:-4px; border-right:1px solid var(--muted);} /* 100% mark */
.small{font-size:12.5px;}

/* health report: advisory, visibly apart from the verdict */
section.advisory{border:1px dashed rgba(242,193,78,.35); border-top-style:dashed; background:var(--panel); padding:24px; margin:24px 0;}
.warnc{color:var(--warn);}
ul.flags{margin:0; padding:0; list-style:none; display:grid; gap:6px; max-width:80ch;}
ul.flags li{padding-left:18px; position:relative; font-size:14px;}
ul.flags li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:currentColor;}
.big{font-weight:300; font-size:30px; line-height:1.1; font-variant-numeric:tabular-nums;}
.big small{font-family:var(--mono); font-size:12px; color:var(--muted);}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
svg.spark{display:block; width:100%; max-width:320px; height:auto;}
svg.spark .curve{fill:none; stroke:var(--pod); stroke-width:1.5;}
svg.spark circle{fill:var(--pod);}
svg.spark .mean{stroke:var(--dim); stroke-dasharray:2 4;}

/* performance profile: solid panel, so it reads as the check's own numbers (the health report stays dashed) */
section.perf{background:var(--panel); border:1px solid var(--line2); padding:24px; margin:24px 0; position:relative;}
section.perf::before{content:""; position:absolute; left:-1px; top:-1px; width:14px; height:14px; border-left:1px solid var(--accent); border-top:1px solid var(--accent);}
section.perf{grid-template-columns:minmax(0,1fr);}
.headline{display:grid; gap:8px;}
.headline .pill{white-space:normal;}
.headline .big{font-size:clamp(28px,4vw,40px);}
.headline .big small{font-family:var(--display); font-size:clamp(15px,1.8vw,19px); color:var(--body2);}
.pill.trust{letter-spacing:.14em; text-transform:uppercase; font-size:10px; padding:1px 7px;}
.trust-verified{color:var(--accent);} .trust-measured{color:var(--ens-ink);} .trust-reported{color:var(--warn);} .trust-unknown{color:var(--muted);}
td.numc{font-family:var(--mono); font-size:14px;}
td.note{white-space:normal; min-width:22ch; max-width:40ch; font-size:13px;}
tr.flagged td:first-child{box-shadow:inset 2px 0 0 var(--warn); padding-left:10px;}
.spread{display:grid; gap:3px; min-width:110px;}
.spread small,.pctv small,.stripw small{font-family:var(--mono); font-size:11px; color:var(--muted);}
.rbar{position:relative; height:8px; width:110px; border-left:1px solid var(--line); border-right:1px solid var(--line);}
.rbar::before{content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--line2);}
.rbar i{position:absolute; top:1px; bottom:1px; background:rgba(0,128,188,.45);}
.rbar b{position:absolute; top:-2px; bottom:-2px; width:2px; margin-left:-1px; background:var(--ink);}
.pct{display:flex; align-items:center; gap:10px;}
.pbar{position:relative; height:8px; width:120px; flex:none; background:var(--line2);}
.pbar .band{position:absolute; top:-3px; bottom:-3px; background:rgba(95,227,185,.16); border-left:1px solid rgba(95,227,185,.5); border-right:1px solid rgba(95,227,185,.5);}
.pbar i{position:absolute; left:0; top:2px; bottom:2px; background:var(--accent);}
.pbar.warn i{background:var(--warn);}
.pbar em{position:absolute; top:-5px; bottom:-5px; border-left:1px solid var(--muted);}
.pctv{font-family:var(--mono); font-size:13px; white-space:nowrap;}
details.methods,details.fewbox{border-top:1px solid var(--line2); padding-top:10px;}
details summary{cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);}
details summary:hover{color:var(--ink);}
details[open] summary{margin-bottom:12px;}
details.methods dl.kv{font-family:var(--display); font-size:13.5px; max-width:110ch;}
details.methods .small{margin-top:10px;}
svg.scatter,svg.strip{display:block; width:100%; height:auto; font-family:var(--mono);}
svg.scatter .ax{font-size:10.5px; fill:var(--muted);}
svg.scatter .grid,svg.strip .grid{stroke:var(--line2);}
svg.scatter .pt,svg.strip .pt{fill:var(--dim);}
svg.scatter .pt.best{fill:var(--ens);}
svg.scatter .ring{fill:none; stroke:var(--accent); stroke-width:1.5;}
svg.scatter .me{fill:var(--pod);}
svg.scatter .lbl{font-size:11px; fill:var(--body2);}
svg.scatter .lbl.claimed{fill:var(--accent);}
svg.scatter .lbl.me-l{fill:var(--pod);}
svg.strip{max-width:320px;}
svg.strip .mine{fill:var(--pod); stroke:var(--bg); stroke-width:1.5;}
.sw-me{display:inline-block; width:9px; height:9px; background:var(--pod); transform:rotate(45deg);}
.sw-ring{display:inline-block; width:12px; height:12px; border:1.5px solid var(--accent); border-radius:50%;}
.sw-pt,.sw-best{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--dim);}
.sw-best{background:var(--ens);}
ol.cands{margin:0; padding-left:20px; display:grid; gap:8px; max-width:70ch;}
ol.cands li{font-size:14px;}
ol.cands .dist{font-family:var(--mono); font-size:11px; color:var(--dim);}
ul.cohort{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px 28px;}
ul.cohort li{display:grid; gap:6px; border-top:1px solid var(--line2); padding-top:10px;}
.stripw{display:grid; gap:2px;}

/* leaderboard and reference models */
.subtabs{display:flex; gap:2px; flex-wrap:wrap;}
.subtabs a{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding:6px 12px; border:1px solid var(--line2);}
.subtabs a[aria-current="page"]{color:var(--accent); border-color:var(--accent);}
.field.narrow{flex:none; max-width:420px;}
select{font-family:var(--mono); font-size:13.5px; padding:9px 10px; border:1px solid var(--line); background:var(--deep); color:var(--ink); max-width:100%;}
select:focus-visible{border-color:var(--accent); outline-offset:0;}
tr.few td{color:var(--muted);}
abbr.unv{color:var(--warn); text-decoration:none; margin-left:2px; cursor:help;}
a.src{font-family:var(--mono); font-size:12px; margin-right:6px;}

/* how a check works: nodes and wires; a row on wide screens, a column on phones */
.flow{display:flex; align-items:flex-start;}
.flow .stage{flex:1 1 0; min-width:0; display:grid; gap:28px;}
.flow .node,.flow .att{min-height:78px; padding:10px 12px; border:1px solid var(--c); display:grid; align-content:center; gap:2px; min-width:0; position:relative;}
.flow .node{background:var(--deep);}
.flow .att{border-style:dashed; min-height:64px;}
.flow b{font-weight:400; font-size:15px; line-height:1.25;}
.flow small{font-family:var(--mono); font-size:10.5px; color:var(--muted); line-height:1.35; overflow-wrap:anywhere;}
.flow .att::before{content:""; position:absolute; left:50%; top:-29px; height:28px; border-left:1px dashed var(--c);}
.flow .wire{flex:0 1 112px; min-width:48px; height:78px; position:relative; display:grid; align-items:end; justify-items:center;}
.flow .wire::before{content:""; position:absolute; left:4px; right:8px; top:50%; border-top:1px solid #7f949e;}
.flow .wire::after{content:""; position:absolute; right:3px; top:calc(50% - 4px); border:4.5px solid transparent; border-left:6px solid #7f949e; border-right:0;}
.flow .wire.proof::before{border-top:2px solid var(--accent); margin-top:-.5px;}
.flow .wire.proof::after{border-left-color:var(--accent);}
.flow .wire span{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--body2); text-align:center; line-height:1.3; padding:0 4px 44px;}
.c-people{--c:var(--ink);}
.legend{display:flex; flex-wrap:wrap; gap:6px 22px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:16px;}
.legend span{display:inline-flex; align-items:center; gap:8px;}
.sw-proof{display:inline-block; width:22px; border-top:2px solid var(--accent);}
.sw-att{display:inline-block; width:12px; height:12px; border:1px dashed var(--muted);}
.panel .legend+p{margin-top:10px;}
@media (max-width:820px){
  .flow{flex-direction:column; align-items:stretch;}
  .flow .stage{grid-template-columns:1fr 1fr; gap:0 28px; align-items:center;}
  .flow .node{grid-column:1;}
  .flow .att::before{left:-29px; top:50%; width:28px; height:0; border-left:0; border-top:1px dashed var(--c);}
  .flow .wire{flex:none; height:46px; width:auto; min-width:0; display:block;}
  .flow .wire::before{left:calc((100% - 28px) / 4); right:auto; top:2px; bottom:8px; border-top:0; border-left:1px solid #7f949e;}
  .flow .wire.proof::before{border-top:0; border-left:2px solid var(--accent); margin:0 0 0 -.5px;}
  .flow .wire::after{left:calc((100% - 28px) / 4 - 4.5px); right:auto; top:auto; bottom:2px; border:4.5px solid transparent; border-top:6px solid #7f949e; border-bottom:0;}
  .flow .wire.proof::after{border-top-color:var(--accent); border-left-color:transparent;}
  .flow .wire span{position:absolute; left:calc((100% - 28px) / 4 + 12px); top:50%; transform:translateY(-50%); padding:0; text-align:left;}
}

/* World dialog */
dialog{background:var(--panel); color:var(--ink); border:1px solid var(--world); padding:0; width:min(560px,calc(100vw - 32px)); max-height:calc(100vh - 32px);}
dialog::backdrop{background:rgba(3,11,17,.78); backdrop-filter:blur(3px);}
.dlg{padding:24px; display:grid; gap:14px;}
.codebox{display:flex; gap:20px; align-items:center; flex-wrap:wrap;}
.qr{background:#fff; padding:8px; line-height:0; width:176px; height:176px; flex:none;}
.qr img,.qr svg{width:160px; height:160px; image-rendering:pixelated;}
.codeinfo{display:grid; gap:8px; min-width:0;}
.usercode{font-family:var(--mono); font-size:clamp(28px,6vw,40px); letter-spacing:.12em; color:var(--world); line-height:1.1;}
.status{font-family:var(--mono); font-size:13px; color:var(--body2); min-height:1.6em;}
.status.good{color:var(--pass);} .status.bad{color:var(--fail);}
.row{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.evidence{display:grid; gap:10px; min-width:0;}
.evidence .row{justify-content:flex-start;}
.evidence .hash{word-break:break-all;}

/* how it works */
ol.how{margin:0; padding:0; list-style:none; counter-reset:how; display:grid; gap:0;}
ol.how li{counter-increment:how; display:grid; grid-template-columns:48px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line2);}
ol.how li::before{content:counter(how,decimal-leading-zero); font-family:var(--mono); font-size:12px; color:var(--accent); padding-top:2px;}

@media (max-width:640px){
  .wrap,.topbar-in{padding-inline:16px;}
  .hero{padding:48px 0 190px;}
  .hero canvas{left:-16px; right:-16px; width:calc(100% + 32px); height:175px;}
  section.advisory{padding:16px;}
  section.perf{padding:16px;}
  td.note{max-width:none; min-width:0;}
  .spread{justify-items:end;}
  .pct{justify-content:flex-end; min-width:0;}
  .pbar{width:72px;}
  .pctv{white-space:normal; text-align:right;}
  .field.narrow{max-width:none; width:100%;}
  select{width:100%;}
  .tabs{margin-left:0; width:100%;}
  .tabs a{padding:6px 6px; letter-spacing:.1em;}
  .brand small{display:none;}
  .panel{padding:16px;}
  /* tables become label/value stacks so every action stays on screen */
  .tbl{overflow:visible;}
  .tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;}
  .tbl tr{padding:10px 0; border-bottom:1px solid var(--line2);}
  .tbl tr:last-child{border-bottom:0;}
  .tbl td{display:flex; justify-content:space-between; gap:16px; padding:4px 0; border:0; white-space:normal; text-align:right; overflow-wrap:anywhere;}
  .tbl td::before{content:attr(data-label); font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-align:left; flex:none;}
  .tbl td:empty{display:none;}
  .qr{width:156px; height:156px;} .qr img,.qr svg{width:140px; height:140px;}
}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto !important; transition:none !important; animation:none !important;} }
.diagnosis{font-size:clamp(18px,2.4vw,22px); font-weight:300; margin:14px 0 4px; max-width:60ch;}
.brand{display:inline-flex; align-items:center;} .brand .mark{width:28px; height:28px; margin-right:14px; flex:none;}
.oneline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#030b11; border:1px solid var(--line2); padding:14px 16px; overflow-x:auto;}
.oneline code{font-family:var(--mono); font-size:14px; color:var(--accent); white-space:nowrap;}

/* hero: the thesis on the left, the one-line check on the right */
.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:end; gap:28px 48px;}
.hero-copy{display:grid; gap:14px; min-width:0;}
.try{display:grid; gap:10px; min-width:0; align-self:end; background:rgba(3,11,17,.82); border:1px solid var(--line); padding:16px 18px 14px; position:relative;}
.try::before{content:""; position:absolute; left:-1px; top:-1px; width:14px; height:14px; border-left:1px solid var(--accent); border-top:1px solid var(--accent);}
.try-head{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.try .oneline{background:transparent; border:0; padding:0; gap:10px; flex-wrap:nowrap;}
.try .prompt{font-family:var(--mono); color:var(--dim);}
.try .oneline code{font-size:clamp(12.5px,1.25vw,15px);}
.small{font-size:13px;}
@media (max-width:880px){ .hero{grid-template-columns:1fr;} }
/* partners: one colour and one job each */
.try .oneline code{white-space:normal; overflow-wrap:anywhere; line-height:1.5;}
.confirm{display:grid; gap:10px; margin:6px 0 4px;}
.confirm textarea{width:100%; font-family:var(--mono); font-size:13px; color:var(--ink); background:var(--deep); border:1px solid var(--line); padding:10px; resize:vertical;}
.confirm .check{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--body2);}
.confirm .btn{justify-self:start;} .confirm .btn:disabled{opacity:.4; cursor:not-allowed;}
.quote{font-style:italic; overflow-wrap:anywhere;}
/* the ENS name tree */
.tree{font-size:14px; background:var(--deep); border:1px solid var(--line2); padding:16px 18px; overflow-x:auto;}
.tree ul{list-style:none; margin:0; padding-left:22px; border-left:1px solid var(--line);}
.tree > ul{margin-top:6px; margin-left:6px;}
.tree li{position:relative; padding:4px 0;}
.tree li::before{content:""; position:absolute; left:-22px; top:17px; width:16px; border-top:1px solid var(--line);}
.tree .tnode{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:6px 12px;}
.tree .tn{font-family:var(--mono); font-size:13px; color:var(--ens-ink); background:none; border:0; padding:0; cursor:pointer; border-bottom:1px dotted rgba(0,128,188,.555);}
.tree span.tn{cursor:default; border:0;}
.tree .facts{color:var(--muted); font-size:13px;}
.tree .tnode.root b{color:var(--ink);}
/* the page of one ENS name */
.namehead{font-size:clamp(20px,3vw,30px); color:var(--ens-ink); overflow-wrap:anywhere;}
.namestatus{margin:10px 0 2px;} .namestatus .pill{font-size:13px; padding:4px 12px;}
.lede-s{font-size:clamp(17px,2vw,20px); font-weight:300;}
.namefacts{display:grid; gap:14px;}
/* periodic series: a tag in tables, a timeline of bars */
.stag{font-family:var(--mono); font-size:11px; color:var(--accent); margin-left:8px; white-space:nowrap;}
.strip{display:flex; align-items:flex-end; gap:6px; height:88px; padding:12px 14px 10px; background:var(--deep); border:1px solid var(--line2); overflow-x:auto;}
.strip .tick{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; min-width:26px; border:0; color:var(--c, var(--muted));}
.strip .tick i{display:block; width:14px; background:currentColor; opacity:.85;}
.strip .tick span{font-family:var(--mono); font-size:10.5px; color:var(--muted);}
.strip .tick.here i{outline:1px solid var(--ink); outline-offset:2px;}
.strip .st-pass{color:var(--pass);} .strip .st-degraded{color:var(--warn);} .strip .st-fail{color:var(--fail);}
/* the one-liner's variables: fields set inside the command */
.oneline .var{font:inherit; color:var(--accent); background:transparent; border:0; border-bottom:1px dashed var(--accent); padding:0 2px; border-radius:0;}
.oneline .var::placeholder{color:var(--muted);}
.oneline select.var:invalid, .oneline select.var option[disabled]{color:var(--muted);}
.oneline select.var{cursor:pointer; appearance:none; padding-right:2px;}
.oneline .var:focus-visible{outline:1px solid var(--accent); outline-offset:2px;}
.oneline select.var option{background:var(--deep); color:var(--ink);}
.oneline .pick{white-space:nowrap;} .oneline .pick:has(select)::after{content:"▾"; color:var(--accent); font-size:.8em; margin-left:2px; pointer-events:none;}
/* World ID: the session badge in the header, and the mandate block */
.session{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); border:1px solid var(--line); padding:5px 10px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.session i{width:7px; height:7px; border-radius:50%; background:var(--muted);}
.session.on{color:var(--world); border-color:color-mix(in srgb, var(--world) 45%, transparent);}
.session.on i{background:var(--world);}
.mandate .grant{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:14px;}
.mandate .grant .field{margin:0;}
.mandate .grant select{width:auto; min-width:9rem;}
/* the diagram, in relief: steps are extruded slabs with an isometric glyph; proof links carry a moving flow */
.flow .node{--edge:color-mix(in srgb, var(--c) 42%, #03080c);
  background:linear-gradient(155deg, color-mix(in srgb, var(--c) 16%, var(--deep)) 0%, var(--deep) 58%);
  box-shadow:1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge), 5px 5px 0 var(--edge),
    6px 6px 0 var(--edge), 10px 14px 22px rgba(0,0,0,.45);
  transform:translate(-3px,-3px); transition:transform .18s ease, box-shadow .18s ease; min-height:112px; align-content:end;}
.flow .node:hover{transform:translate(-5px,-5px);
  box-shadow:1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge), 5px 5px 0 var(--edge),
    6px 6px 0 var(--edge), 7px 7px 0 var(--edge), 8px 8px 0 var(--edge), 14px 20px 28px rgba(0,0,0,.5);}
.flow .glyph{width:54px; height:47px; margin:-4px 0 2px -6px; overflow:visible;}
.flow .glyph polygon{stroke:var(--c); stroke-width:.9; stroke-linejoin:round;}
.flow .glyph .top{fill:color-mix(in srgb, var(--c) 46%, transparent);}
.flow .glyph .front{fill:color-mix(in srgb, var(--c) 24%, transparent);}
.flow .glyph .side{fill:color-mix(in srgb, var(--c) 12%, transparent);}
.flow .att{background:color-mix(in srgb, var(--c) 5%, transparent); box-shadow:3px 3px 0 color-mix(in srgb, var(--c) 18%, transparent);}
.flow .wire{height:112px;}
.flow .wire span{padding-bottom:62px;}
.flow .wire.proof::before{border-top:0; height:2px; margin-top:-1px;
  background:repeating-linear-gradient(90deg, var(--accent) 0 9px, color-mix(in srgb, var(--accent) 25%, transparent) 9px 15px);
  background-size:15px 2px; animation:wl-flow 0.9s linear infinite;}
@keyframes wl-flow{to{background-position:15px 0;}}
@media (max-width:820px){
  .flow .wire{height:46px;} .flow .wire span{padding:0;}
  .flow .wire.proof::before{height:auto; width:2px; margin:0 0 0 -.5px;
    background:repeating-linear-gradient(180deg, var(--accent) 0 9px, color-mix(in srgb, var(--accent) 25%, transparent) 9px 15px);
    background-size:2px 15px; animation-name:wl-flow-down;}
  @keyframes wl-flow-down{to{background-position:0 15px;}}
}
@media (prefers-reduced-motion:reduce){ .flow .wire.proof::before{animation:none;} .flow .node{transition:none;} }
/* partner and rule cards: icon, name, one line; the detail opens on hover or focus */
.c-pass{--c:var(--pass);} .c-degraded{--c:var(--warn);} .c-fail{--c:var(--fail);}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:22px;}
.cards.rules{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:14px;}
.tip{position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center;
  padding:12px 14px; border:1px solid color-mix(in srgb, var(--c) 35%, var(--line2)); background:color-mix(in srgb, var(--c) 5%, var(--deep));
  outline:none; cursor:default; transition:border-color .15s ease, background .15s ease;}
.tip .glyph{grid-row:span 2; width:44px; height:38px; overflow:visible;}
.tip .glyph polygon,.tip .glyph circle,.tip .glyph ellipse{stroke:var(--c); stroke-width:.9;}
.tip .glyph .top{fill:color-mix(in srgb, var(--c) 46%, transparent);} .tip .glyph .front{fill:color-mix(in srgb, var(--c) 24%, transparent);}
.tip .glyph .side{fill:color-mix(in srgb, var(--c) 12%, transparent);} .tip .glyph .ring{fill:none;}
.tip b{font-weight:500; color:var(--c); letter-spacing:.01em; line-height:1.3;}
.tip .intro{color:var(--body2); font-size:13px; grid-column:2;}
.tip:not(:has(.glyph, .logo)) b,.tip:not(:has(.glyph, .logo)) .intro{grid-column:1 / -1;}
.tip:not(:has(.glyph, .logo)){border-left:3px solid var(--c);}
.tip .more{position:absolute; left:-1px; right:-1px; top:calc(100% - 1px); z-index:5; padding:10px 14px 12px; font-size:13px; line-height:1.5;
  color:var(--ink); background:var(--deep); border:1px solid color-mix(in srgb, var(--c) 55%, var(--line2)); border-top:0;
  box-shadow:0 14px 28px rgba(0,0,0,.45); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s ease, transform .15s ease, visibility .15s;}
.tip:hover,.tip:focus-visible,.tip:focus-within{border-color:color-mix(in srgb, var(--c) 60%, var(--line2)); background:color-mix(in srgb, var(--c) 9%, var(--deep));}
.tip:hover .more,.tip:focus .more{opacity:1; visibility:visible; transform:none;}
.tip:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent);}
@media (prefers-reduced-motion:reduce){ .tip,.tip .more{transition:none;} }
.tip:hover,.tip:focus,.tip:focus-within{z-index:10;} /* the open card and its detail sit above the next row */
/* sponsor marks */
.tip .logo{grid-row:span 2; width:34px; height:30px; object-fit:contain; margin:0 4px; justify-self:center;}
/* optically equal marks: the ENS diamond is tall and light, the Curvegrid C is solid, the World circle in between */
.tip .logo-ens{height:32px;} .tip .logo-world{height:27px;} .tip .logo-curvegrid{height:25px;}
.flow .att .logo-ens{height:16px;} .flow .att .logo-world{height:13px;} .flow .att .logo-curvegrid{height:13px;}
.flow .att .logo{width:16px; height:14px; object-fit:contain; vertical-align:-2px; margin-right:7px;}
.tip b{color:color-mix(in srgb, var(--c) 72%, #ffffff);} /* the brand hue, lifted enough to read on the dark ground */
/* World's outline softer than pure white, so it sits with the other attachments */
.flow .att.c-world{border-color:color-mix(in srgb, var(--world) 55%, transparent);}
/* automatic flags on a failure report */
.stag.flag{color:var(--warn);}
.flags{margin:0; padding-left:18px; color:var(--warn);} .flags li{margin:2px 0;}

/* failed check: the people behind it (two slots: two different people mark a GPU failed) */
.people-strip{margin-top:22px; max-width:760px; display:grid; gap:10px;}
.people-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.people{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.person{border:1px solid var(--line); padding:12px 14px; display:grid; gap:3px; min-width:0;}
.person b{font-weight:400; overflow-wrap:anywhere;}
.person span{font-size:13px; color:var(--muted);}
.person.on{border-color:var(--world); background:var(--world-fill);}
.person.off{border-style:dashed;} .person.off b{color:var(--muted);}
@media (max-width:640px){ .people{grid-template-columns:1fr;} }