:root{
  --bp:#0c3563; --bp2:#0a2d55; --bp3:#123f73; --deep:#071f3d;
  --line:#e6f0ff; --line2:rgba(230,240,255,.55); --faint:rgba(230,240,255,.14); --grid:rgba(230,240,255,.07);
  --cyan:#7fd3ff; --amber:#ffcc66; --red:#ff7b6b; --green:#8ef0b5;
  --cond:"Archivo Narrow", "Arial Narrow", sans-serif;
  --sans:"Archivo", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;color:var(--line);font:15.5px/1.65 var(--sans);background:var(--bp);overflow-x:hidden;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(rgba(230,240,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(230,240,255,.035) 1px, transparent 1px),
    radial-gradient(1200px 700px at 70% 0%, #144a86, transparent 70%);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px,auto;}
a{color:var(--cyan)}
code{font:.86em var(--mono);background:rgba(230,240,255,.08);padding:.05em .35em;border:1px solid var(--faint);word-break:break-all}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--deep);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px dashed var(--amber);outline-offset:3px}
.muted{color:var(--line2)}
.dim{font:500 .74rem var(--mono);letter-spacing:.14em;color:var(--cyan);margin:0 0 10px;text-transform:uppercase}

.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;justify-content:space-between;padding:10px clamp(16px,4vw,40px);background:rgba(7,31,61,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--faint)}
.brand{display:flex;align-items:center;gap:10px;color:var(--line);text-decoration:none;font:700 1.2rem var(--cond);letter-spacing:.12em}
.brand b{color:var(--amber);font-weight:700}
.mark{width:28px;height:28px;color:var(--line)}
.brand.small{font-size:1rem}
.nav nav{display:flex;gap:2px;flex-wrap:wrap}
.nav nav a{color:var(--line2);text-decoration:none;font:600 .82rem var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border:1px solid transparent}
.nav nav a:hover{color:var(--line);border-color:var(--faint)}
.slotlive{font:500 .75rem var(--mono);color:var(--line2);border:1px solid var(--faint);padding:4px 10px;white-space:nowrap}
.slotlive b{color:var(--amber);font-weight:500}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .9rem var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:13px 22px;text-decoration:none;cursor:pointer;border:1.5px solid var(--line);transition:background .15s,color .15s,transform .15s}
.btn-solid{background:var(--line);color:var(--bp)}
.btn-solid:hover{background:var(--amber);border-color:var(--amber);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--line)}
.btn-solid:disabled{opacity:.6;cursor:wait;transform:none;box-shadow:none}
.btn-line{color:var(--line);background:transparent}
.btn-line:hover{background:rgba(230,240,255,.08)}
.x-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--line2);border:1px solid var(--faint);border-radius:4px;text-decoration:none;transition:.15s;flex:none}
.x-link:hover{color:var(--bp);background:var(--cyan);border-color:var(--cyan)}
.ca{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--faint);border-radius:4px;background:rgba(127,211,255,.06);max-width:540px}
.ca-lbl{font:700 .72rem var(--cond);letter-spacing:.14em;color:var(--amber)}
.ca code{font:500 .82rem var(--mono);color:var(--line);word-break:break-all;flex:1;min-width:120px}
.btn-copy{font:700 .78rem var(--cond);letter-spacing:.1em;text-transform:uppercase;background:var(--cyan);color:var(--bp);border:1px solid var(--cyan);border-radius:3px;padding:8px 15px;cursor:pointer}
.btn-copy:hover{background:var(--amber);border-color:var(--amber)}
.copy.done{background:var(--green)!important;border-color:var(--green)!important;color:var(--bp)!important}
.foot-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.foot-links a{color:var(--cyan)}
.foot-copy{font:700 .78rem var(--cond);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--cyan);border:1px solid var(--cyan);border-radius:3px;padding:7px 13px;cursor:pointer}
.foot-copy:hover{background:var(--cyan);color:var(--bp)}

.hero{max-width:var(--max);margin:0 auto;padding:clamp(40px,7vw,90px) clamp(16px,4vw,40px) 20px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero h1{font:700 clamp(2.6rem,6vw,4.8rem)/.98 var(--cond);text-transform:uppercase;letter-spacing:.01em;margin:0 0 22px}
.hl{color:var(--amber);position:relative}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:2px;background:var(--amber)}
.lede{font-size:1.08rem;color:var(--line2);max-width:34em;margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-draw{border:1.5px solid var(--line2);padding:10px;background:rgba(7,31,61,.35);position:relative}
.hero-draw::before,.hero-draw::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--amber)}
.hero-draw::before{top:-8px;left:-8px;border-right:0;border-bottom:0}
.hero-draw::after{bottom:-8px;right:-8px;border-left:0;border-top:0}

.schem{width:100%;height:auto;display:block;overflow:visible}
.schem rect,.schem path,.schem circle,.schem line{fill:none;stroke:var(--line);stroke-width:1.5}
.schem .warn{stroke:var(--amber)}
.schem .ok{stroke:var(--green)}
.schem .bad{stroke:var(--red)}
.schem .fillbox{fill:rgba(230,240,255,.04)}
.schem text{fill:var(--line);font:500 11px var(--mono);stroke:none}
.schem .t1{font:700 15px var(--cond);letter-spacing:.12em}
.schem .t2{fill:var(--line2);font-size:11px}
.schem .t3{font-size:10px;fill:var(--line2)}
.schem .live{fill:var(--amber)}
.schem .amber{fill:var(--amber)}
.schem .red{fill:var(--red)}
.schem .green{fill:var(--green)}
.schem .dims path{stroke:var(--cyan);stroke-width:1;opacity:.8}
.schem .dims text{fill:var(--cyan);font-size:9.5px;letter-spacing:.1em}
.schem .titleblock rect,.schem .titleblock path{stroke:var(--line2)}
.draw rect,.draw path{stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawin 1.6s cubic-bezier(.6,.1,.2,1) forwards;animation-delay:var(--d,0s)}
.draw text{opacity:0;animation:fadein .6s forwards;animation-delay:calc(var(--d,0s) + .8s)}
@keyframes drawin{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.wire path{stroke:var(--amber)}
.flow{stroke-dasharray:6 6;animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-12}}

.inspect{max-width:var(--max);margin:40px auto 0;padding:0 clamp(16px,4vw,40px)}
.sheet{border:1.5px solid var(--line);padding:clamp(18px,3.5vw,36px);background:rgba(7,31,61,.55);position:relative;box-shadow:12px 12px 0 rgba(7,31,61,.6)}
.sheet::before{content:"";position:absolute;inset:6px;border:1px solid var(--faint);pointer-events:none}
.sheet-head{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:end;margin-bottom:22px}
.sheet-head h2,.sec-head h2{font:700 clamp(1.9rem,4vw,3rem)/1.02 var(--cond);text-transform:uppercase;margin:0;letter-spacing:.02em}
.sheet-head p.muted{margin:0;max-width:52em}
.pform{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.pform input{flex:1 1 320px;min-width:0;font:500 1rem var(--mono);color:var(--line);background:var(--deep);border:1.5px solid var(--line2);padding:14px 16px}
.pform input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,204,102,.2)}
.samples{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font:500 .78rem var(--mono);color:var(--line2)}
.chip{font:500 .78rem var(--mono);color:var(--line);background:transparent;border:1px dashed var(--line2);padding:5px 10px;cursor:pointer}
.chip:hover{border-style:solid;border-color:var(--amber);color:var(--amber)}
.pstatus{display:block;margin-top:14px;min-height:1.4em;font:500 .85rem var(--mono);color:var(--line2)}
.pstatus.err{color:var(--red)}
.pstatus button{margin-left:10px;font:600 .75rem var(--cond);letter-spacing:.1em;background:var(--line);color:var(--bp);border:0;padding:4px 10px;cursor:pointer}
.spin{display:inline-block;width:12px;height:12px;border:1.5px solid var(--amber);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

.report{margin-top:24px}
.verdict{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;border:1.5px solid var(--line);padding:16px 20px;margin-bottom:20px;background:rgba(230,240,255,.03)}
.verdict .name{font:700 1.6rem/1.1 var(--cond);text-transform:uppercase;letter-spacing:.04em}
.verdict .id{font:400 .8rem var(--mono);color:var(--line2);word-break:break-all}
.verdict .grow{flex:1 1 260px;min-width:0}
.verdict .say{margin:6px 0 0;color:var(--line2);font-size:.95rem}
.pill{display:inline-block;font:700 .78rem var(--cond);letter-spacing:.14em;padding:5px 12px;border:1.5px solid}
.pill.up{color:var(--amber);border-color:var(--amber)}
.pill.im{color:var(--green);border-color:var(--green)}
.pill.nat{color:var(--cyan);border-color:var(--cyan)}
.pill.na{color:var(--red);border-color:var(--red)}
.verdict .pill{font-size:1rem;padding:8px 16px}
.report-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:start}
.drawing{margin:0;border:1px solid var(--faint);padding:12px;background:rgba(7,31,61,.4)}
.drawing figcaption{margin:8px 0 0}
.spec table{width:100%;border-collapse:collapse;font-size:.88rem}
.spec caption{text-align:left}
.spec th{text-align:left;font:600 .74rem var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--line2);padding:9px 10px 9px 0;border-bottom:1px solid var(--faint);vertical-align:top;width:38%}
.spec td{font:500 .84rem var(--mono);padding:9px 0;border-bottom:1px solid var(--faint);word-break:break-all}
.spec td small{display:block;color:var(--line2);font-size:.74rem;word-break:normal}
.copy{font:600 .7rem var(--cond);letter-spacing:.1em;background:none;border:1px solid var(--faint);color:var(--cyan);padding:1px 6px;margin-left:6px;cursor:pointer;vertical-align:1px}
.copy:hover{border-color:var(--cyan)}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:20px}
.note-card{border-left:3px solid var(--amber);padding:10px 14px;background:rgba(255,204,102,.06);font-size:.9rem}
.note-card.ok{border-color:var(--green);background:rgba(142,240,181,.05)}
.note-card.info{border-color:var(--cyan);background:rgba(127,211,255,.05)}
.note-card b{font:700 .8rem var(--cond);letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:2px}
.activity{margin-top:24px}
.activity h3{font:700 1.1rem var(--cond);text-transform:uppercase;letter-spacing:.08em;margin:0}
.activity .muted{margin:2px 0 10px;font-size:.88rem}
.act-list{list-style:none;padding:0;margin:0;display:grid;gap:6px;counter-reset:a}
.act-list li{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:12px;align-items:center;border:1px solid var(--faint);padding:8px 12px;font:400 .8rem var(--mono)}
.act-list li::before{counter-increment:a;content:counter(a, decimal-leading-zero);color:var(--amber)}
.act-list a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-list .err{color:var(--red)}
.act-list .t{color:var(--line2);white-space:nowrap}

.sec-head{margin-bottom:28px;max-width:820px}
.sec-head .muted{margin:10px 0 0}
.catalogue,.procedure,.uses,.anatomy,.faq,.honest{max-width:var(--max);margin:0 auto;padding:clamp(70px,9vw,120px) clamp(16px,4vw,40px) 0}
.cat-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1.5px solid var(--line)}
.cat-tab{font:700 .85rem var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;background:transparent;border:1.5px solid transparent;border-bottom:0;color:var(--line2);cursor:pointer;margin-bottom:-1.5px}
.cat-tab[aria-selected=true]{color:var(--line);border-color:var(--line);background:var(--bp)}
.cat-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0}
.cat-actions .pstatus{margin:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--faint)}
.cat-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:860px}
.cat-table th{text-align:left;font:600 .72rem var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);padding:10px 12px;border-bottom:1.5px solid var(--line2);background:rgba(7,31,61,.5)}
.cat-table td{padding:10px 12px;border-bottom:1px solid var(--faint);font-family:var(--mono);font-size:.8rem;white-space:nowrap}
.cat-table td:first-child{font:600 .92rem var(--sans);white-space:normal}
.cat-table tr:hover td{background:rgba(230,240,255,.04)}
.cat-table .pill{font-size:.68rem;padding:3px 8px}
.cat-table .go{font:700 .72rem var(--cond);letter-spacing:.1em;background:none;color:var(--line);border:1px solid var(--line2);padding:4px 10px;cursor:pointer}
.cat-table .go:hover{background:var(--line);color:var(--bp)}
.shared{color:var(--amber)}
.note{font-size:.85rem;color:var(--line2)}

.proc{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1.5px solid var(--line)}
.proc li{padding:22px;border-right:1px solid var(--faint);position:relative}
.proc li:last-child{border-right:0}
.proc .n{font:700 2.4rem var(--cond);color:var(--amber);line-height:1}
.proc svg{width:100%;max-height:70px;margin:10px 0}
.proc svg rect,.proc svg path,.proc svg circle{fill:none;stroke:var(--line);stroke-width:1.5}
.proc h3{font:700 1.1rem var(--cond);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px}
.proc p{margin:0;font-size:.9rem;color:var(--line2)}

.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.use{border:1px solid var(--faint);padding:22px;position:relative;background:rgba(7,31,61,.35);transition:border-color .2s, transform .2s}
.use:hover{border-color:var(--amber);transform:translateY(-3px)}
.use::before{content:"+";position:absolute;top:-9px;left:-6px;color:var(--amber);font:500 16px var(--mono)}
.use h3{font:700 1.15rem var(--cond);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.use p{margin:0;font-size:.92rem;color:var(--line2)}

.ana-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:40px;align-items:start}
.ana-text p,.ana-text li{color:#d3e2f7;font-size:1rem}
.ana-text h3{font:700 1.25rem var(--cond);text-transform:uppercase;letter-spacing:.06em;margin:26px 0 8px;color:var(--amber)}
.ana-text ul{padding-left:18px}
.ana-text li{margin-bottom:8px}
.ana-side{border:1.5px solid var(--line);padding:22px;position:sticky;top:88px;background:rgba(7,31,61,.6)}
.ana-side h3{font:700 1rem var(--cond);text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px}
.ana-side .mt{margin-top:22px}
.bytes{width:100%;border-collapse:collapse;font:.8rem var(--mono)}
.bytes th{font:600 .7rem var(--cond);letter-spacing:.12em;color:var(--cyan);text-align:left;border-bottom:1px solid var(--line2);padding:5px 4px}
.bytes td{border-bottom:1px dashed var(--faint);padding:6px 4px;vertical-align:top}
.bytes td:nth-child(-n+2){color:var(--amber);width:52px}
.legend{list-style:none;padding:0;margin:0;font-size:.85rem;display:grid;gap:8px}
.legend .pill{font-size:.66rem;padding:2px 7px;margin-right:6px}

.faq-list{display:grid;gap:0;border:1.5px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--faint)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:16px 50px 16px 18px;font:700 1.05rem var(--cond);letter-spacing:.04em;text-transform:uppercase;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"[+]";position:absolute;right:18px;top:16px;font:500 .9rem var(--mono);color:var(--amber)}
.faq details[open] summary::after{content:"[−]"}
.faq details[open]{background:rgba(230,240,255,.03)}
.faq details p{margin:0;padding:0 18px 16px;color:var(--line2)}

.honest-box{border:1.5px dashed var(--amber);padding:clamp(20px,4vw,34px);background:repeating-linear-gradient(45deg, rgba(255,204,102,.05) 0 10px, transparent 10px 20px)}
.honest-box h2{font:700 1.7rem var(--cond);text-transform:uppercase;margin:0 0 12px;color:var(--amber)}
.honest-box ul{margin:0;padding-left:20px;color:#d3e2f7}
.honest-box li{margin-bottom:8px}

.foot{margin-top:100px;border-top:1.5px solid var(--line);padding:28px clamp(16px,4vw,40px);background:rgba(7,31,61,.7)}
.foot-inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;align-items:center;font-size:.85rem;color:var(--line2)}
.foot p{margin:0}

@media (max-width:1000px){
  .hero,.report-grid,.ana-cols{grid-template-columns:1fr}
  .proc{grid-template-columns:repeat(2,1fr)}
  .proc li:nth-child(2){border-right:0}
  .proc li:nth-child(-n+2){border-bottom:1px solid var(--faint)}
  .use-grid{grid-template-columns:repeat(2,1fr)}
  .ana-side{position:static}
  .sheet-head{grid-template-columns:1fr;gap:10px}
}
@media (max-width:640px){
  .nav nav{display:none}
  .proc,.use-grid{grid-template-columns:1fr}
  .proc li{border-right:0;border-bottom:1px solid var(--faint)}
  .act-list li{grid-template-columns:30px minmax(0,1fr);}
  .act-list li .t{grid-column:2}
  .sheet{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .draw rect,.draw path{stroke-dashoffset:0}
  .draw text{opacity:1}
}
.hero>*,.report-grid>*,.ana-cols>*,.sheet-head>*{min-width:0}
.table-wrap{max-width:100%}
@media (max-width:1000px){.hero,.report-grid,.ana-cols,.sheet-head{grid-template-columns:minmax(0,1fr)}}
.table-wrap{contain:paint}
