/* OCTO component kit. Every value reads from system/tokens.css. Class prefix: o- */
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color-scheme:dark}
body{font:400 var(--t-0)/var(--lh-body) var(--font-ui);color:var(--fg);min-height:100vh;overflow-x:hidden;background:
 radial-gradient(1000px 640px at 80% -12%,rgba(var(--emit-plasma),.20),transparent 60%),
 radial-gradient(800px 560px at 0% 100%,rgba(var(--emit-cyan),.09),transparent 60%),
 radial-gradient(600px 400px at 50% 55%,rgba(91,43,217,.10),transparent 70%),var(--bg)}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:2px}

/* ---------- Glass panel with emissive rim ---------- */
.o-glass{position:relative;background:var(--glass-tint),var(--surface-2);border:1px solid var(--stroke-1);border-radius:var(--r-lg);box-shadow:var(--e-2)}
.o-glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--edge-emit);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none;transition:opacity var(--d-3) var(--ease-out)}
.o-glass:hover::before,.o-glass:focus-within::before{opacity:1}
.o-glass--lit{box-shadow:var(--e-3),0 0 var(--glow-r-4) rgba(var(--emit-plasma),calc(var(--bloom-1)*.6))}
.o-glass--lit::before{opacity:1}

.k-eyebrow{font:600 var(--t--2)/1 var(--font-ui);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--cyan-300)}
.k-title{font:700 var(--t-5)/var(--lh-tight) var(--font-display);letter-spacing:var(--track-display);margin:var(--s-2) 0 var(--s-1)}
.k-title em{font-style:normal;background:var(--energy);-webkit-background-clip:text;background-clip:text;color:transparent}
.k-sub{color:var(--fg-2);max-width:62ch}
.k-actions{display:flex;gap:var(--s-2);flex-wrap:wrap}
.k-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-4)}
.k-sec{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.k-sec__h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.k-sec__h h2{font:600 var(--t-1)/var(--lh-snug) var(--font-display);letter-spacing:-.01em}
.k-sec__h code{font:500 var(--t--2) var(--font-mono);color:var(--fg-3)}
.k-sec__note{color:var(--fg-3);font-size:var(--t--1);margin-top:calc(-1 * var(--s-2))}
.k-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}

/* ---------- Icon ---------- */
.o-ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Nav item ---------- */
.o-nav{display:flex;flex-direction:column;gap:var(--s-1)}
.o-nav a{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-3);border-radius:var(--r-md);text-decoration:none;color:var(--fg-2);font-weight:500;transition:background var(--d-2) var(--ease-out),color var(--d-2)}
.o-nav a:hover{background:var(--surface-3);color:var(--fg)}
.o-nav a[aria-current]{color:#fff;background:linear-gradient(100deg,rgba(var(--emit-plasma),.72),rgba(91,43,217,.28));box-shadow:inset 0 0 0 1px rgba(214,192,255,.7),inset 0 1px 0 rgba(255,255,255,.35),var(--emit-md);text-shadow:0 0 var(--glow-r-1) rgba(255,255,255,.6)}
.o-nav a[aria-current] .o-ico{filter:drop-shadow(0 0 var(--glow-r-1) #fff)}
.o-nav .o-count{margin-left:auto}

/* ---------- Buttons ---------- */
.o-btn{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--h);padding:0 var(--s-4);border-radius:var(--r-sm);border:1px solid var(--stroke-2);background:var(--surface-3);font-weight:600;font-size:var(--t-0);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--d-1) var(--ease-out),box-shadow var(--d-2) var(--ease-out),background var(--d-2),border-color var(--d-2);box-shadow:var(--edge-hi)}
.o-btn:hover{border-color:rgba(var(--emit-cyan),.5);box-shadow:var(--edge-hi),var(--emit-cyan-md)}
.o-btn:active{transform:translateY(1px) scale(.985)}
.o-btn--primary{border:0;color:#fff;background:linear-gradient(110deg,var(--plasma-700),var(--plasma-500) 45%,var(--azure-500));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(214,192,255,.5),var(--emit-md);text-shadow:0 0 var(--glow-r-1) rgba(255,255,255,.5)}
.o-btn--primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(230,215,255,.8),var(--emit-md),0 0 var(--glow-r-4) rgba(var(--emit-plasma),.5)}
.o-btn--ghost{background:transparent;border-color:var(--stroke-1);box-shadow:none}
.o-btn--danger{color:#fff;border-color:rgba(255,92,122,.55);background:rgba(255,92,122,.16)}
.o-btn--danger:hover{box-shadow:0 0 var(--glow-r-2) rgba(255,92,122,.55)}
.o-btn--sm{--h:32px;padding:0 var(--s-3);font-size:var(--t--1);border-radius:var(--r-xs)}
.o-btn--lg{--h:50px;padding:0 var(--s-5);font-size:var(--t-1);border-radius:var(--r-md)}
.o-btn--icon{width:var(--h);padding:0}
.o-btn[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none}
.o-btn.is-loading .o-spin{display:inline-block}
.o-spin{display:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:o-rot .8s linear infinite}
@keyframes o-rot{to{transform:rotate(1turn)}}

/* ---------- Badges, chips, count ---------- */
.o-badge{display:inline-flex;align-items:center;gap:var(--s-1);height:24px;padding:0 var(--s-2);border-radius:var(--r-pill);font:600 var(--t--2)/1 var(--font-ui);letter-spacing:.04em;border:1px solid currentColor;background:color-mix(in srgb,currentColor 12%,transparent)}
.o-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.o-badge--ok{color:var(--ok)}.o-badge--warn{color:var(--warn)}.o-badge--risk{color:var(--risk)}.o-badge--info{color:var(--cyan-300)}.o-badge--plasma{color:var(--plasma-300)}
.o-badge--live::before{animation:o-pulse 1.6s var(--ease-io) infinite}
@keyframes o-pulse{50%{opacity:.25}}
.o-count{min-width:22px;height:20px;padding:0 var(--s-1);border-radius:var(--r-pill);display:inline-grid;place-items:center;font:600 var(--t--2)/1 var(--font-ui);background:var(--energy);color:#fff;box-shadow:var(--emit-sm)}
.o-chip{display:inline-flex;align-items:center;gap:var(--s-2);height:30px;padding:0 var(--s-3);border-radius:var(--r-pill);border:1px solid var(--stroke-2);background:var(--surface-1);color:var(--fg-2);font-size:var(--t--1);cursor:pointer;transition:all var(--d-2)}
.o-chip[aria-pressed="true"]{color:#fff;border-color:rgba(var(--emit-cyan),.7);background:rgba(var(--emit-cyan),.12);box-shadow:var(--emit-cyan-md)}

/* ---------- Icon orb (KPI glyph) ---------- */
.o-orb{--c:var(--emit-plasma);width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;
 background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(var(--c),.9) 38%,rgba(var(--c),.25) 72%,transparent 74%);
 box-shadow:0 0 var(--glow-r-2) rgba(var(--c),var(--bloom-2)),0 0 var(--glow-r-3) rgba(var(--c),var(--bloom-1)),inset 0 0 0 1px rgba(255,255,255,.3)}
.o-orb .o-ico{width:22px;height:22px;filter:drop-shadow(0 0 4px #fff)}
.o-orb--cyan{--c:var(--emit-cyan)}.o-orb--azure{--c:61,123,255}

/* ---------- KPI stat card ---------- */
.o-kpi{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5);min-width:0}
.o-kpi__label{color:var(--fg-2);font-size:var(--t--1)}
.o-kpi__val{font:700 var(--t-4)/1.05 var(--font-display);letter-spacing:var(--track-display);font-variant-numeric:var(--num);margin:var(--s-1) 0;white-space:nowrap}
.o-kpi__delta{font-size:var(--t--1);color:var(--ok)}
.o-kpi__delta b{font-weight:600}
.o-kpi__delta--down{color:var(--risk)}
.o-kpi__spark{margin-left:auto;width:56px;height:30px;align-self:flex-end;flex:none}
.o-kpi{gap:var(--s-3);padding:var(--s-4) var(--s-5)}
.o-kpi__delta{white-space:nowrap}

/* ---------- Inputs ---------- */
.o-field{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.o-field label{font-size:var(--t--1);color:var(--fg-2);font-weight:500}
.o-field small{font-size:var(--t--2);color:var(--fg-3)}
.o-input{display:flex;align-items:center;gap:var(--s-2);height:42px;padding:0 var(--s-3);border-radius:var(--r-sm);background:rgba(4,7,18,.7);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.4);transition:border-color var(--d-2),box-shadow var(--d-2)}
.o-input input,.o-input select{flex:1;min-width:0;background:none;border:0;outline:0;height:100%}
.o-input select option{background:var(--abyss-900)}
.o-input .o-ico{color:var(--fg-3)}
.o-input:focus-within{border-color:rgba(var(--emit-cyan),.8);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 0 0 3px rgba(var(--emit-cyan),.16),var(--emit-cyan-md)}
.o-input.is-error{border-color:rgba(255,92,122,.75);box-shadow:0 0 0 3px rgba(255,92,122,.14)}
.o-field .is-error+small{color:var(--risk)}
.o-kbd{font:500 var(--t--2) var(--font-mono);color:var(--fg-3);border:1px solid var(--stroke-2);border-radius:var(--r-xs);padding:2px var(--s-1)}

/* ---------- Toggle, checkbox, radio, slider ---------- */
.o-switch{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;font-size:var(--t-0);color:var(--fg-2)}
.o-switch input{position:absolute;opacity:0}
.o-switch i{width:44px;height:24px;border-radius:var(--r-pill);background:var(--abyss-800);border:1px solid var(--stroke-2);position:relative;transition:background var(--d-2),box-shadow var(--d-2)}
.o-switch i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--abyss-300);transition:transform var(--d-3) var(--ease-out),background var(--d-2)}
.o-switch input:checked+i{background:linear-gradient(90deg,var(--plasma-500),var(--cyan-500));border-color:transparent;box-shadow:var(--emit-sm)}
.o-switch input:checked+i::after{transform:translateX(20px);background:#fff;box-shadow:0 0 8px #fff}
.o-switch input:focus-visible+i{outline:2px solid var(--stroke-focus);outline-offset:2px}
.o-check{display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;color:var(--fg-2)}
.o-check input{appearance:none;width:20px;height:20px;border-radius:var(--r-xs);border:1px solid var(--stroke-2);background:rgba(4,7,18,.7);display:grid;place-items:center;cursor:pointer;margin:0}
.o-check input[type=radio]{border-radius:50%}
.o-check input:checked{background:var(--energy);border-color:transparent;box-shadow:var(--emit-sm)}
.o-check input[type=checkbox]:checked::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.o-check input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.o-range{appearance:none;width:100%;height:6px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--plasma-500),var(--cyan-500)) 0/var(--p,60%) 100% no-repeat,var(--abyss-800);outline-offset:6px}
.o-range::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(var(--emit-cyan),.3),var(--emit-cyan-md);cursor:pointer}
.o-range::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;box-shadow:var(--emit-cyan-md)}

/* ---------- Segmented + tabs ---------- */
.o-seg{display:inline-flex;padding:var(--s-1);gap:2px;border-radius:var(--r-sm);background:rgba(4,7,18,.7);border:1px solid var(--stroke-1);position:relative}
.o-seg button{height:30px;padding:0 var(--s-3);border:0;background:none;border-radius:var(--r-xs);color:var(--fg-2);font-size:var(--t--1);font-weight:600;cursor:pointer;position:relative;z-index:1;transition:color var(--d-2)}
.o-seg button[aria-selected="true"]{color:#fff;background:var(--surface-3);box-shadow:inset 0 0 0 1px rgba(var(--emit-plasma),.6),var(--emit-sm)}
.o-tabs{display:flex;gap:var(--s-5);border-bottom:1px solid var(--stroke-1);overflow-x:auto}
.o-tabs button{background:none;border:0;padding:var(--s-2) 0;color:var(--fg-2);font-weight:500;cursor:pointer;position:relative;white-space:nowrap}
.o-tabs button[aria-selected="true"]{color:#fff}
.o-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--energy);box-shadow:var(--emit-sm);border-radius:2px}

/* ---------- Ring gauge ---------- */
.o-ring{--v:87;--size:150px;width:var(--size);aspect-ratio:1;position:relative;display:grid;place-items:center;flex:none}
.o-ring svg{position:absolute;inset:0;transform:rotate(-90deg);overflow:visible}
.o-ring .trk{stroke:var(--abyss-800);fill:none}
.o-ring .val{fill:none;stroke-linecap:round;stroke-dasharray:calc(var(--v)*2.83) 283;transition:stroke-dasharray var(--d-4) var(--ease-out)}
.o-ring .blm{filter:blur(6px);opacity:.8}
.o-ring__c{text-align:center;position:relative}
.o-ring__c b{display:block;font:700 var(--t-3)/1 var(--font-display);font-variant-numeric:var(--num);text-shadow:0 0 14px rgba(var(--emit-plasma),.7)}
.o-ring__c span{font-size:var(--t--2);color:var(--fg-3)}
.o-legend{display:grid;gap:var(--s-2);flex:1;min-width:140px}
.o-legend li{list-style:none;display:flex;align-items:center;gap:var(--s-2);font-size:var(--t--1);color:var(--fg-2)}
.o-legend li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.o-legend b{margin-left:auto;color:var(--fg);font-variant-numeric:var(--num)}
.o-legend ul{padding:0}

/* ---------- Progress bar ---------- */
.o-bar{height:8px;border-radius:var(--r-pill);background:var(--abyss-800);overflow:hidden}
.o-bar i{display:block;height:100%;width:var(--p);border-radius:inherit;background:var(--energy);box-shadow:var(--emit-sm)}

/* ---------- Flow node ---------- */
.o-node{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-3);border-radius:var(--r-md);background:var(--glass-tint),var(--surface-3);border:1px solid var(--stroke-2);min-width:0;box-shadow:var(--e-1)}
.o-node .o-orb{width:38px;height:38px}.o-node .o-orb .o-ico{width:18px;height:18px}
.o-node b{display:block;font:600 var(--t-0)/1.2 var(--font-ui)}
.o-node span{font-size:var(--t--2);color:var(--fg-3);font-variant-numeric:var(--num)}
.o-node--hot{border-color:rgba(214,192,255,.8);background:linear-gradient(140deg,rgba(var(--emit-plasma),.42),rgba(91,43,217,.16));box-shadow:var(--emit-md),inset 0 1px 0 rgba(255,255,255,.3)}
.o-node--cyan{border-color:rgba(var(--emit-cyan),.65);box-shadow:var(--emit-cyan-md)}
.k-flow{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-7);align-items:center;padding:var(--s-2) 0}
.k-flow canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.k-flow .o-node{position:relative}
.k-flow .col{display:grid;gap:var(--s-4)}

/* ---------- Alert row ---------- */
.o-alert{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-3);border-radius:var(--r-md);background:var(--surface-1);border:1px solid var(--stroke-1);position:relative;overflow:hidden}
.o-alert::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--c);box-shadow:0 0 10px var(--c)}
.o-alert__i{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent)}
.o-alert b{display:block;font-weight:600;font-size:var(--t-0)}
.o-alert p{font-size:var(--t--1);color:var(--fg-3)}
.o-alert time{margin-left:auto;font-size:var(--t--2);color:var(--fg-3);white-space:nowrap}
.o-alert--risk{--c:var(--risk)}.o-alert--warn{--c:var(--warn)}.o-alert--ok{--c:var(--ok)}.o-alert--info{--c:var(--cyan-500)}

/* ---------- Toast ---------- */
.o-toast{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--glass-tint),rgba(16,20,48,.9);border:1px solid rgba(var(--emit-cyan),.45);box-shadow:var(--e-3),var(--emit-cyan-md)}
.o-toast b{font-weight:600}.o-toast p{font-size:var(--t--1);color:var(--fg-2)}
.o-toast .o-btn{margin-left:auto}
.k-toasts{position:fixed;right:var(--s-5);bottom:var(--s-5);display:grid;gap:var(--s-2);z-index:var(--z-toast);max-width:min(380px,calc(100vw - 32px))}
.k-toasts .o-toast{animation:o-in var(--d-3) var(--ease-out)}
@keyframes o-in{from{opacity:0;transform:translateY(12px) scale(.98)}}

/* ---------- Table ---------- */
.o-table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:var(--num)}
.o-table th{font:600 var(--t--2)/1 var(--font-ui);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3);text-align:left;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--stroke-1)}
.o-table td{padding:var(--s-3);border-bottom:1px solid var(--stroke-1);color:var(--fg-2)}
.o-table td:first-child{color:var(--fg);font-weight:600}
.o-table th:not(:first-child),.o-table td:not(:first-child){text-align:right}
.o-table tbody tr{transition:background var(--d-2)}
.o-table tbody tr:hover{background:linear-gradient(90deg,rgba(var(--emit-plasma),.14),transparent)}
.o-table .up{color:var(--ok)}
.o-table .cell-bar{display:inline-flex;align-items:center;gap:var(--s-2);justify-content:flex-end}
.o-table .cell-bar .o-bar{width:72px;height:6px}
.k-scroll{overflow-x:auto}

/* ---------- Avatar, user card ---------- */
.o-avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 var(--t--1) var(--font-display);color:#fff;background:linear-gradient(135deg,var(--plasma-700),var(--azure-500));box-shadow:0 0 0 2px var(--abyss-950),0 0 0 3px rgba(var(--emit-plasma),.7),var(--emit-sm);position:relative}
.o-avatar[data-status]::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--ok);border:2px solid var(--abyss-950);box-shadow:0 0 8px var(--ok)}
.o-avatars{display:flex}.o-avatars .o-avatar{margin-left:calc(-1 * var(--s-2));width:34px;height:34px}.o-avatars .o-avatar:first-child{margin-left:0}
.o-user{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-md);background:var(--surface-1);border:1px solid var(--stroke-1)}
.o-user b{display:block;font-weight:600;font-size:var(--t-0)}.o-user span{font-size:var(--t--1);color:var(--fg-3)}

/* ---------- Tooltip, menu ---------- */
.o-tip{position:relative;display:inline-flex}
.o-tip[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);white-space:nowrap;padding:var(--s-2) var(--s-2);border-radius:var(--r-xs);font-size:var(--t--1);background:rgba(16,20,48,.96);border:1px solid var(--stroke-2);box-shadow:var(--e-2),var(--emit-sm);opacity:0;pointer-events:none;transition:opacity var(--d-2),transform var(--d-2) var(--ease-out)}
.o-tip:hover::after,.o-tip:focus-within::after{opacity:1;transform:translate(-50%,0)}
.o-menu{display:grid;gap:2px;padding:var(--s-1);border-radius:var(--r-md);background:var(--glass-tint),rgba(12,16,40,.94);border:1px solid var(--stroke-2);box-shadow:var(--e-3);min-width:200px}
.o-menu button{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-2);border:0;background:none;border-radius:var(--r-xs);color:var(--fg-2);cursor:pointer;text-align:left}
.o-menu button:hover,.o-menu button:focus-visible{background:rgba(var(--emit-plasma),.18);color:#fff}
.o-menu hr{border:0;border-top:1px solid var(--stroke-1);margin:var(--s-1) 0}
.o-menu .o-kbd{margin-left:auto}

/* ---------- Token chips ---------- */
.k-tok{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.k-tok code{font:500 var(--t--2) var(--font-mono);color:var(--plasma-300);background:rgba(var(--emit-plasma),.1);border:1px solid rgba(var(--emit-plasma),.25);padding:3px var(--s-2);border-radius:var(--r-xs)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
 .span-3{grid-column:span 6}.span-4,.span-5,.span-7,.span-8{grid-column:span 12}.span-6{grid-column:span 12}
}
@media (max-width:860px){
 .k-flow{grid-template-columns:1fr;gap:var(--s-3)}
 .k-flow{padding-left:var(--s-4)}
}
@media (max-width:560px){
 .span-3{grid-column:span 12}
 .k-title{font-size:var(--t-4)}
 .k-sec{padding:var(--s-4)}
 .o-kpi__spark{display:none}
}
@media (prefers-reduced-motion:reduce){.o-badge--live::before,.o-spin{animation:none}}

:root[data-kit-theme="cyan"]{--emit-plasma:63,216,255;--emit-cyan:140,120,255;--plasma-500:#3FD8FF;--plasma-700:#0A8FC2;--plasma-300:#8AE9FF;--cyan-500:#9B7BFF;--azure-500:#3FB0FF;--plate-hue:-80deg}
:root[data-kit-theme="ember"]{--emit-plasma:255,122,77;--emit-cyan:255,196,77;--plasma-500:#FF7A4D;--plasma-700:#C2361A;--plasma-300:#FFB38F;--cyan-500:#FFC44D;--azure-500:#FF5C7A;--plate-hue:120deg}
:root[data-kit-theme="low"]{--bloom-1:.12;--bloom-2:.2;--bloom-3:.35;--glow-r-2:8px;--glow-r-3:14px;--glow-r-4:24px;--plate-sat:.35}
:root[data-kit-theme="a11y"]{--bloom-1:.08;--bloom-2:.15;--bloom-3:.3;--glow-r-2:6px;--glow-r-3:10px;--glow-r-4:16px;--fg-2:#E8EEFF;--fg-3:#C4CCE8;--stroke-1:rgba(200,215,255,.4);--stroke-2:rgba(220,230,255,.7);--emit-plasma:190,160,255;--emit-cyan:120,230,255;--plate-sat:.35}
.x-rail{display:flex;flex-wrap:wrap;gap:var(--s-1);padding:var(--s-1);border-radius:var(--r-pill);background:rgba(4,7,18,.7);border:1px solid var(--stroke-2);max-width:100%;backdrop-filter:blur(12px)}
.x-rail button{display:inline-flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-3);border-radius:var(--r-pill);border:0;background:none;color:var(--fg-2);font-weight:600;font-size:var(--t--1);cursor:pointer;transition:background var(--d-2),color var(--d-2)}
.x-rail button i{width:9px;height:9px;border-radius:50%;background:var(--sw);box-shadow:0 0 8px var(--sw)}
.x-rail button:hover{color:var(--fg);background:var(--surface-3)}
.x-rail button[aria-checked="true"]{color:#fff;background:linear-gradient(100deg,rgba(var(--emit-plasma),.6),rgba(var(--emit-plasma),.2));box-shadow:inset 0 0 0 1px rgba(var(--emit-plasma),.8),var(--emit-sm)}
.x-proof{flex-basis:100%;text-align:right;margin:0;font-size:var(--t--1);color:var(--fg-3)}

/* ============ r5 gauntlet2: product shot stage ============
   One fixed 1600x1020 scene scaled by a single --s. Tilt lives on .k-rig only.
   No backdrop blur and no filters inside the tilt; floor, rim spill and haze are one baked webp.
   Only wire pulses animate, via stroke-dashoffset on a promoted SVG layer. */
.k-stage{position:relative;height:880px;overflow:hidden;
 background:radial-gradient(60% 55% at 42% 38%,rgba(var(--emit-plasma),.16),transparent 70%),radial-gradient(40% 40% at 85% 75%,rgba(var(--emit-cyan),.08),transparent 70%),linear-gradient(180deg,#03050C,#060818 60%,#020309)}
.k-scene{--s:.8;position:absolute;left:calc(50% + 90px);top:0;width:1600px;height:1080px;transform:translateX(-50%) scale(var(--s));transform-origin:50% 0}
.k-floorimg{position:absolute;left:0;top:880px;width:1600px;height:460px;pointer-events:none;filter:hue-rotate(var(--plate-hue,0deg)) saturate(var(--plate-sat,1))}
.k-rig{position:absolute;inset:0}
.k-mon{position:absolute;left:70px;top:36px;width:1400px;height:860px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s-4);padding:var(--s-4);border-radius:var(--r-xl);
 background:linear-gradient(160deg,rgba(var(--emit-plasma),.10),rgba(6,9,22,.96) 30%,rgba(4,6,16,.97));border:1px solid rgba(var(--emit-plasma),.45);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 2px 0 0 rgba(var(--emit-plasma),.55),inset 0 -2px 0 rgba(var(--emit-cyan),.35),0 0 0 6px rgba(10,12,28,.9),0 0 0 8px rgba(var(--emit-plasma),.85),-14px 0 40px rgba(var(--emit-plasma),.75),0 -6px 30px rgba(var(--emit-plasma),.35),14px 10px 50px rgba(var(--emit-cyan),.35),0 0 90px rgba(var(--emit-plasma),.4),0 60px 90px -30px rgba(0,0,0,.9)}
.k-mon::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 26%,transparent 70%,rgba(var(--emit-cyan),.05))}
.k-mside{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4) var(--s-3);border-radius:var(--r-lg);background:rgba(8,11,26,.7);border:1px solid var(--stroke-1)}
.k-mbrand{display:flex;align-items:center;gap:var(--s-2);font:700 22px/1 var(--font-display);padding:var(--s-1) var(--s-2) var(--s-5);color:var(--fg)}
.k-mbrand svg{color:rgb(var(--emit-cyan))}
.k-mbrand i{font-style:normal;background:var(--energy);-webkit-background-clip:text;background-clip:text;color:transparent}
.k-mnav{display:grid;gap:var(--s-1)}
.k-mnav a{display:flex;align-items:center;gap:var(--s-3);height:46px;padding:0 var(--s-3);border-radius:var(--r-md);text-decoration:none;color:var(--fg-2);font-weight:500;font-size:16px}
.k-mnav a:hover{color:var(--fg);background:var(--surface-3)}
.k-mnav a.is-on{color:#fff;background:linear-gradient(100deg,rgba(var(--emit-plasma),.62),rgba(var(--emit-plasma),.16));box-shadow:inset 0 0 0 1px rgba(var(--emit-plasma),.85),0 0 24px rgba(var(--emit-plasma),.45)}
.k-mprof{margin-top:auto;display:flex;gap:var(--s-2);align-items:center;padding:var(--s-3);border-radius:var(--r-md);border:1px solid var(--stroke-1);background:rgba(255,255,255,.03)}
.k-mprof b{display:block;font-size:14px}.k-mprof span{font-size:14px;color:var(--fg-3)}
.k-mstat{display:grid;justify-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-2) var(--s-4);border-radius:var(--r-md);border:1px solid var(--stroke-1);background:rgba(255,255,255,.03)}
.k-mstat>span{justify-self:start;font:600 14px var(--font-ui)}
.k-mstat .o-ring__c b{font-size:20px}
.k-mmain{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;gap:var(--s-4);min-width:0;min-height:0}
.k-mhead{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding:var(--s-1) var(--s-1) 0}
.k-mhead h1{font:700 30px/1.1 var(--font-display);letter-spacing:-.01em}
.k-mhead p{color:var(--fg-2);font-size:16px;margin-top:var(--s-1)}
.k-mtools{display:flex;gap:var(--s-2)}
.k-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.k-kpis .o-kpi{padding:var(--s-4) var(--s-4);gap:var(--s-3);background:rgba(14,18,40,.72)}
.k-kpis .o-kpi__val{font-size:30px}
.k-kpis .o-orb{width:50px;height:50px}
.k-ch{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.k-ch h2{font:600 20px/1.2 var(--font-display)}
.k-ch p{flex-basis:100%;color:var(--fg-2);font-size:15px;margin-top:calc(-1 * var(--s-1))}
.k-flowcard{grid-column:1/span 8;grid-row:3;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4) var(--s-4);min-height:0;
 background:radial-gradient(34% 60% at 50% 55%,rgba(var(--emit-plasma),.16),transparent 70%),rgba(6,9,22,.85)}
.k-fan{position:relative;flex:1;display:grid;grid-template-columns:190px 1fr 200px 1fr 190px;grid-template-rows:repeat(3,auto);align-content:space-evenly;row-gap:var(--s-5)}
.k-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;will-change:transform}
.k-fan .o-node{position:relative;z-index:1;padding:var(--s-3) var(--s-3);gap:var(--s-3);background:linear-gradient(150deg,rgba(var(--emit-plasma),.28),rgba(16,20,48,.95) 60%);border-color:rgba(var(--emit-plasma),.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(var(--emit-plasma),.25),0 0 28px rgba(var(--emit-plasma),.5),0 0 60px rgba(var(--emit-plasma),.22)}
.k-fan .o-node .o-orb{width:40px;height:40px}
.k-fan .o-node b{font-size:16px;white-space:nowrap}
.k-fan .o-node span{font-size:14px;white-space:nowrap;color:var(--fg-2)}
.k-fan .o-node em{display:block;font:700 18px/1.15 var(--font-display);font-style:normal;color:#fff}
.k-fan [data-c="0"]{grid-column:1}.k-fan [data-c="1"]{grid-column:3}.k-fan [data-c="2"]{grid-column:5}
.k-fan [data-r="0"]{grid-row:1}.k-fan [data-r="1"]{grid-row:2}.k-fan [data-r="2"]{grid-row:3}
.k-fan .k-mid{background:linear-gradient(140deg,rgba(var(--emit-plasma),.5),rgba(20,16,60,.95))}
.w-base{fill:none;stroke-width:1.6;stroke-linecap:round}
.w-glow{fill:none;stroke-width:7;opacity:.16;stroke-linecap:round}
.w-pulse{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:18 260;animation:w-run 2.8s linear infinite}
.w-v{stroke:rgba(var(--emit-plasma),.7)}.w-glow.w-v{stroke:rgb(var(--emit-plasma))}.w-pulse.w-v{stroke:#E6DAFF}
.w-c{stroke:rgba(var(--emit-cyan),.7)}.w-glow.w-c{stroke:rgb(var(--emit-cyan))}.w-pulse.w-c{stroke:#D8F6FF}
.w-link{stroke-dasharray:3 4}
@keyframes w-run{from{stroke-dashoffset:278}to{stroke-dashoffset:0}}
.is-off .w-pulse{animation-play-state:paused}
.k-rcol{grid-column:9/span 4;grid-row:3/span 2;display:grid;grid-template-rows:auto 1fr;gap:var(--s-4);min-height:0}
.k-health,.k-alerts{padding:var(--s-4) var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);background:rgba(10,13,32,.85)}
.k-health__row{display:flex;align-items:center;gap:var(--s-3)}
.k-health .o-legend{margin:0;flex:1;min-width:0}.k-mon .o-legend li,.k-mon .o-kpi__label,.k-mon .o-kpi__delta,.k-mon .o-badge{font-size:14px}.k-mon .o-badge{height:26px}
.k-health .o-legend li{white-space:nowrap}
.k-health .o-ring__c b{font-size:20px}
.k-alerts .o-alert{padding:var(--s-2) var(--s-2)}
.k-alerts .o-alert b{font-size:15px}
.k-alerts .o-alert p{margin:0;font-size:14px;color:var(--fg-2)}
.k-perf{grid-column:1/span 8;grid-row:4;padding:var(--s-3) var(--s-4) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2);background:rgba(8,11,26,.85)}
.k-keys{list-style:none;margin:0;padding:0;display:flex;gap:var(--s-4);font-size:14px;color:var(--fg-2)}
.k-keys li{display:flex;align-items:center;gap:var(--s-2)}
.k-keys li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.k-keys b{color:var(--fg);font-variant-numeric:var(--num)}
.k-wave{display:block;width:100%;height:150px}
.k-wave__fill{fill:url(#g-wave)}
.k-wave__glow{fill:none;stroke:rgb(var(--emit-plasma));stroke-width:9;opacity:.18}
.k-wave__a{fill:none;stroke:url(#g-kit);stroke-width:2.6}
.k-wave__b{fill:none;stroke:rgba(var(--emit-cyan),.55);stroke-width:1.6}
.k-bay{position:absolute;left:760px;top:740px;width:640px;padding:var(--s-4) var(--s-5);display:grid;gap:var(--s-2);transform:rotateY(-8deg) rotateX(16deg) rotateZ(-3deg);transform-origin:50% 100%;
 background:linear-gradient(160deg,rgba(var(--emit-plasma),.30),rgba(16,18,48,.97) 40%,rgba(8,10,30,.98));border:1px solid rgba(var(--emit-plasma),.6);border-radius:var(--r-lg);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(var(--emit-cyan),.6),0 0 50px rgba(var(--emit-plasma),.45),0 40px 60px -20px rgba(0,0,0,.9)}
.k-bay table{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:var(--num)}
.k-bay th{text-align:left;color:var(--fg-2);font-weight:500;padding:var(--s-1) 0;border-bottom:1px solid var(--stroke-1)}
.k-bay td{padding:var(--s-2) 0;color:var(--fg-2);border-bottom:1px solid rgba(255,255,255,.05)}
.k-bay td:first-child{color:var(--fg)}
.k-bay td.up{color:rgb(var(--emit-cyan))}

/* strip and sheet below the fold */
.k-strip{max-width:1440px;margin:0 auto;padding:var(--s-5,var(--s-5)) var(--s-5) var(--s-3,var(--s-3));display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5);flex-wrap:wrap}
.k-strip .k-sub{max-width:560px}
.k-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:flex-end;max-width:640px}
.k-sheet{max-width:1440px;margin:0 auto;padding:0 var(--s-5) var(--s-8,var(--s-8));display:grid;gap:var(--s-4)}
.k-anat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.k-anat figure{display:grid;gap:var(--s-2);align-content:start;margin:0}
.k-anat figcaption{font-size:var(--t--1);color:var(--fg-3)}
.k-anat__wire{width:100%;height:60px}
.k-anat__wire .w-base{stroke:rgba(var(--emit-plasma),.75)}
.k-anat__wire .w-pulse{stroke:#E6DAFF}

/* flat stage under 768px: same markup, stacked layout, no 3D */
@media (max-width:767px){
 .k-stage{height:auto;min-height:0;max-height:none;overflow:visible;padding:var(--s-4)}
 .k-scene{position:static;width:auto;height:auto;transform:none;display:grid;gap:var(--s-4)}
 .k-floorimg{display:none}
 .k-rig{position:static;transform:none;display:grid;gap:var(--s-4)}
 .k-mon{position:static;width:auto;height:auto;display:block;padding:var(--s-3);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 40px rgba(var(--emit-plasma),.25)}
 .k-mside{display:none}
 .k-mmain{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--s-3)}
 .k-mhead,.k-kpis,.k-flowcard,.k-rcol,.k-perf{grid-column:auto;grid-row:auto}
 .k-mhead{flex-direction:column}.k-mhead h1{font-size:24px}
 .k-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
 .k-kpis .o-kpi{flex-direction:column;align-items:flex-start;padding:var(--s-3);gap:var(--s-2)}
 .k-kpis .o-kpi__val{font-size:24px}.k-kpis .o-orb{width:38px;height:38px}
 .k-kpis .o-kpi__delta{white-space:normal}
 .k-flowcard{padding:var(--s-3)}
 .k-fan{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 44px auto 44px auto;gap:0 var(--s-2)}
 .k-fan [data-c="0"]{grid-row:1}.k-fan [data-c="1"]{grid-row:3}.k-fan [data-c="2"]{grid-row:5}
 .k-fan [data-r="0"]{grid-column:1}.k-fan [data-r="1"]{grid-column:2}.k-fan [data-r="2"]{grid-column:3}
 .k-fan .o-node{flex-direction:column;align-items:center;text-align:center;padding:var(--s-2) var(--s-1);gap:var(--s-1);min-width:0}
 .k-fan .o-node .o-orb{width:28px;height:28px}
 .k-fan .o-node b{font-size:12px;white-space:normal}
 .k-fan .o-node span{font-size:11px;white-space:normal}
 .k-fan .o-node em{font-size:15px}
 .k-rcol{grid-template-rows:none}
 .k-keys{flex-wrap:wrap;gap:var(--s-1) var(--s-3)}
 .k-wave{height:100px}
 .k-bay{position:static;width:auto;transform:none;padding:var(--s-3)}
 .k-bay table{font-size:12px}
 .k-strip{padding:var(--s-5) var(--s-4) var(--s-3)}
 .k-actions{justify-content:flex-start}
 .x-proof{text-align:left}
 .x-rail{border-radius:var(--r-lg)}
 .k-sheet{padding:0 var(--s-4) var(--s-7)}
 .k-anat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.w-pulse{animation:none;stroke-dasharray:none;opacity:.5}}
html,body{overflow-x:clip;max-width:100%}
/* r6: legibility floor inside the tilt (14px authored, about 12px rendered or more at 1440) */
@media (min-width:768px){
 .k-mon .o-ring__c span,.k-mon .o-alert time,.k-mon .k-ch span.o-badge,.k-mon .k-mtools .o-btn{font-size:14px}
 .k-mon .k-mtools .o-btn{height:36px;padding:0 var(--s-3)}
 .k-mbrand{font-size:26px}
}

/* r7: compact heading row so the whole tilted object fits the first screen */
@media (min-width:768px){
 .k-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:var(--s-2) var(--s-5) var(--s-1);gap:var(--s-4)}
 .k-strip .k-eyebrow{font-size:12px}
 .k-strip .k-title{font-size:28px;margin:var(--s-1) 0 2px}
 .k-strip>div:first-child{min-width:0;max-width:none;width:auto}
 .k-strip .k-title{white-space:nowrap}
 .k-strip .k-sub{max-width:52ch}
 .k-strip .k-actions{max-width:620px}
 .k-strip .k-sub{font-size:14px;max-width:620px;margin:0}
 .k-strip .k-actions{align-items:center;max-width:none}
 .k-strip .x-proof{flex-basis:100%;text-align:right;margin:0;font-size:13px}
 .k-mon::before{content:"";position:absolute;left:-2px;top:8%;bottom:8%;width:3px;border-radius:3px;pointer-events:none;background:linear-gradient(180deg,transparent,rgb(var(--emit-plasma)) 20%,#fff 50%,rgb(var(--emit-plasma)) 80%,transparent);box-shadow:0 0 18px 3px rgba(var(--emit-plasma),.9)}
 .k-bay{transform:translateZ(90px) rotateY(-8deg) rotateX(16deg) rotateZ(-3deg);box-shadow:0 0 0 1px rgba(var(--emit-cyan),.45),0 0 40px rgba(var(--emit-plasma),.45),0 40px 60px -20px rgba(0,0,0,.95)}
}
.w-strand{fill:none;stroke-width:.8;opacity:.5;stroke-linecap:round}

/* ==========================================================================
   r9: two layers. Hero = one baked, lit product shot (tools/bake-kit-hero).
   The live console below (.k-stage) is only the bake source: shown flat when
   html[data-bake] is set, hidden otherwise. Kit = flat specimen board.
   ========================================================================== */
.k-stage{display:none}
html[data-bake],html[data-bake] body{background:transparent!important;overflow:hidden}
html[data-bake] body>nav,html[data-bake] .k-top,html[data-bake] .k-sheet,html[data-bake] .k-toasts,html[data-bake] .k-board{display:none!important}
html[data-bake] .k-stage{display:block;position:fixed;inset:0;height:auto;background:transparent;overflow:visible}
html[data-bake] .k-scene{position:absolute;left:0;top:0;transform:none;width:1480px;height:940px}
html[data-bake] .k-mon{left:40px;top:40px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 2px 0 0 rgba(var(--emit-plasma),.55),inset 0 -2px 0 rgba(var(--emit-cyan),.35),0 0 0 6px rgba(10,12,28,.96),0 0 0 8px rgba(var(--emit-plasma),.9)}
html[data-bake] .k-bay{display:none}
html[data-bake] *{animation-play-state:paused!important;transition:none!important}

/* ---------- Top: heading column + baked hero ---------- */
.k-top{max-width:1440px;margin:0 auto;padding:var(--s-4) var(--s-5) var(--s-2);display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:var(--s-5);align-items:center}
.k-top .k-title{font-size:clamp(28px,3vw,40px);margin:var(--s-2) 0}
.k-top .k-sub{font-size:16px;margin-bottom:var(--s-4)}
.k-top .k-actions{justify-content:flex-start;max-width:none;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.k-top .x-proof{font-size:14px;color:var(--fg-3);margin:0}
.k-hero{position:relative;margin:0;justify-self:center;width:100%;max-width:calc((100vh - 120px) * 1.8519);aspect-ratio:1000/540;border-radius:var(--r-lg);overflow:hidden;background:#07041a;isolation:isolate}
.k-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:opacity .35s var(--ease-out)}
.k-hero img.is-out{opacity:0}
.k-acc{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:none}
.k-acc--pulse{width:clamp(18px,2.6%,30px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0 14%,rgba(var(--emit-plasma),.7) 30%,transparent 70%);mix-blend-mode:screen;animation:k-pulse 1.8s ease-in-out infinite}
.k-acc--cyan{background:radial-gradient(circle,#fff 0 14%,rgba(var(--emit-cyan),.75) 30%,transparent 70%)}
@keyframes k-pulse{50%{opacity:.35;transform:translate(-50%,-50%) scale(.6)}}
.k-tag{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-2);border-radius:var(--r-pill);font:600 13px/1 var(--font-mono);color:#fff;background:rgba(10,8,30,.82);border:1px solid rgba(var(--emit-plasma),.7);box-shadow:0 0 18px rgba(var(--emit-plasma),.45);white-space:nowrap;text-decoration:none}
.k-tag b{font-variant-numeric:tabular-nums;color:rgb(var(--emit-cyan))}
.k-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:rgb(var(--emit-cyan));box-shadow:0 0 8px rgb(var(--emit-cyan))}

/* ---------- Specimen board: the reference's panels pulled apart ---------- */
.k-board{max-width:1440px;margin:0 auto;padding:var(--s-4) var(--s-5) var(--s-6);display:grid;gap:var(--s-4)}
.k-board__h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);flex-wrap:wrap}
.k-board__h h2{font:700 24px/1.2 var(--font-display)}
.k-board__h p{font-size:15px;color:var(--fg-2)}
.k-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.k-spec{padding:var(--s-4);display:grid;gap:var(--s-3);align-content:start;min-width:0}
.k-spec.wide{grid-column:span 2}
.k-spec__h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2)}
.k-spec__h h3{font:600 17px/1.2 var(--font-display)}
.k-spec__h code{font:500 14px var(--font-mono);color:var(--fg-3)}
.k-part{position:relative;padding:var(--s-5) var(--s-4);border-radius:var(--r-md);background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.035) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.035) 23px 24px),rgba(3,4,12,.6);border:1px dashed rgba(255,255,255,.12)}
.k-pin{position:absolute;left:var(--x);top:var(--y);width:22px;height:22px;margin:calc(-1 * var(--s-3)) 0 0 calc(-1 * var(--s-3));border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--font-mono);color:#0a0620;background:rgb(var(--emit-cyan));box-shadow:0 0 0 3px rgba(3,4,12,.9),0 0 12px rgb(var(--emit-cyan));z-index:2}
.k-anatomy{list-style:none;padding:0;display:grid;gap:var(--s-2);counter-reset:a}
.k-anatomy li{display:grid;grid-template-columns:22px auto minmax(12px,1fr) auto;align-items:center;gap:var(--s-2);font-size:14px;color:var(--fg-2);counter-increment:a}
.k-anatomy li::before{content:counter(a);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--font-mono);color:#0a0620;background:rgb(var(--emit-cyan))}
.k-anatomy li i{height:1px;border-top:1px dotted rgba(var(--emit-cyan),.6)}
.k-anatomy code{font:500 14px var(--font-mono);color:var(--cyan-300)}
.k-states{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-2)}
.k-states figure{margin:0;display:grid;gap:var(--s-1);justify-items:start;min-width:0}
.k-states figcaption{font:600 14px/1 var(--font-ui);color:var(--fg-3)}
.k-states--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* forced states so the board shows every state at rest */
.o-kpi.is-hover::before,.o-node.is-hover{border-color:rgba(214,192,255,.7)}
.o-kpi.is-hover{transform:translateY(-2px);box-shadow:var(--e-3),0 0 var(--glow-r-3) rgba(var(--emit-plasma),var(--bloom-2))}
.o-kpi.is-active{border-color:rgba(214,192,255,.9);box-shadow:var(--emit-md),inset 0 1px 0 rgba(255,255,255,.3);background:linear-gradient(140deg,rgba(var(--emit-plasma),.35),rgba(91,43,217,.12)),var(--surface-2)}
.is-focus{outline:2px solid var(--stroke-focus);outline-offset:3px}
.is-disabled{opacity:.42;filter:saturate(.3);pointer-events:none}
.o-kpi.is-error{border-color:var(--risk);box-shadow:0 0 0 1px var(--risk),0 0 18px color-mix(in srgb,var(--risk) 45%,transparent)}
.o-kpi.is-error .o-kpi__val{color:var(--risk)}
.o-kpi.is-error .o-kpi__delta{color:var(--risk)}
.k-mini .o-kpi{padding:var(--s-3);gap:var(--s-2);font-size:14px;flex-direction:column;align-items:flex-start;width:100%}
.k-mini .o-kpi .o-orb{width:30px;height:30px}.k-mini .o-kpi .o-ico{width:14px;height:14px}
.k-mini .o-kpi__val{font-size:20px}
.k-mini .o-kpi__label{font-size:14px}
/* State rows: every card the same height, text inside the card, captions on one line */
.k-mini figure{grid-template-rows:1fr auto;align-items:stretch;justify-items:stretch}
.k-mini .o-kpi{height:100%;justify-content:flex-start}
.k-mini .o-kpi>div{width:100%;min-width:0}
.k-states.k-mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
@media (max-width:760px){.k-states.k-mini{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k-mini figure{gap:var(--s-2)}
.k-mini .o-kpi__label{white-space:nowrap}
.k-mini .o-kpi__delta{white-space:normal;line-height:1.35}
.o-nav a.is-hover{background:var(--surface-3);color:var(--fg)}
.o-nav a{font-size:15px}
.k-navstates .o-nav a{padding:var(--s-2) var(--s-3);gap:var(--s-2)}
.k-wire{width:100%;height:96px;display:block}
.k-wire .w-base{fill:none;stroke:rgba(var(--emit-plasma),.75);stroke-width:2}
.k-wire .w-glow{fill:none;stroke:rgba(var(--emit-plasma),.35);stroke-width:8}
.k-wire .w-pulse{fill:none;stroke:#EDE4FF;stroke-width:2.5;stroke-dasharray:14 140;animation:k-dash 2.4s linear infinite}
@keyframes k-dash{to{stroke-dashoffset:-154}}
.k-flowpair{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center}
.k-trow{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-3);padding:var(--s-3) var(--s-3);border-radius:var(--r-sm);font-size:15px;font-variant-numeric:tabular-nums;color:var(--fg-2);border:1px solid transparent}
.k-trow b{color:var(--fg);font-weight:500}.k-trow .up{color:rgb(var(--emit-cyan))}
.k-trow.th{font:600 14px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding-block:var(--s-1)}
.k-trow.is-hover{background:var(--surface-3);border-color:var(--stroke-1)}
.k-trow.is-active{background:linear-gradient(100deg,rgba(var(--emit-plasma),.3),transparent);border-color:rgba(var(--emit-plasma),.6)}
.k-chart{width:100%;height:120px;display:block}
.k-dens{display:flex;gap:var(--s-4);align-items:end;flex-wrap:wrap}
[data-density="compact"] .k-spec{padding:var(--s-3);gap:var(--s-2)}
[data-density="compact"] .k-part{padding:var(--s-3) var(--s-3)}
@media (max-width:1180px){.k-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.k-spec.wide{grid-column:span 2}.k-states{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.k-top{grid-template-columns:1fr}.k-hero{max-width:none}}
@media (max-width:767px){
 .k-top{padding:var(--s-4) var(--s-4) var(--s-1);gap:var(--s-4)}
 .k-top .k-title{white-space:normal}
 .k-board{padding:var(--s-3) var(--s-4) var(--s-5)}
 .k-specs{grid-template-columns:1fr}.k-spec.wide{grid-column:auto}
 .k-states{grid-template-columns:repeat(2,minmax(0,1fr))}
 .k-tag{font-size:11px;padding:var(--s-1) var(--s-2)}
 .k-tag.opt{display:none}
}
@media (prefers-reduced-motion:reduce){.k-acc--pulse,.k-wire .w-pulse{animation:none}}
.k-top .k-strip{display:block;padding:0;max-width:none;margin:0}
.k-top .k-strip .k-title{white-space:normal}
.k-top .k-strip .k-sub{font-size:16px;max-width:none}
.k-top .k-strip .x-proof{text-align:left;flex-basis:auto}
.k-anch{position:relative}
.k-anch>.k-pin{--x:100%;--y:0%}
html[data-bake] #bake-rects{display:none}
html[data-bake="bay"] .k-mon{visibility:hidden}
html[data-bake="bay"] .k-bay{display:grid;left:40px;top:40px;transform:none;box-shadow:0 0 0 1px rgba(var(--emit-cyan),.55)}
html[data-bake] .k-fan{row-gap:var(--s-3);align-content:center}
html[data-bake] .k-fan .o-node{padding:var(--s-2) var(--s-3)}
.k-board :is(.o-kpi__label,.o-kpi__delta,.o-node span,.o-ring__c span,.o-alert p,.o-alert time,.o-count){font-size:14px}
.k-pin,.k-anatomy li::before{font-size:13.5px;width:24px;height:24px}
.k-pin{margin:calc(-1 * var(--s-3)) 0 0 calc(-1 * var(--s-3))}
@media (max-width:767px){
 #spec-kpi .k-part{grid-template-columns:minmax(0,1fr)!important}
 .k-anatomy li{grid-template-columns:24px auto minmax(8px,1fr)}
 .k-anatomy code{grid-column:2/-1;overflow-wrap:anywhere}
 .k-flowpair{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)}
 .k-flowpair .o-node{padding:var(--s-2);gap:var(--s-2)}.k-flowpair .o-node .o-orb{display:none}
}
/* r10: hero full width under the heading strip; KPI anatomy pins on leader lines outside the card */
.k-top{grid-template-columns:minmax(0,1fr)}
.k-top .k-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4) var(--s-6);align-items:end}
.k-hero{max-width:none}
.k-lead{position:relative;overflow:visible}
.k-lead .k-anch{position:static}
.k-lead .k-pin{left:calc(100% + 40px);top:var(--py,50%);margin:calc(-1 * var(--s-3)) 0 0 calc(-1 * var(--s-3))}
.k-lead .k-pin::after{content:"";position:absolute;right:100%;top:50%;width:var(--pl,40px);border-top:1px dashed rgba(var(--emit-cyan),.75);pointer-events:none}
.k-lead .k-pin::before{content:"";position:absolute;right:calc(100% + var(--pl,40px) - 3px);top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:rgb(var(--emit-cyan))}
@media (max-width:767px){.k-top .k-strip{grid-template-columns:1fr}}
.k-lead{margin-left:var(--s-7)}
.k-lead .o-orb>.k-pin{left:-44px}
.k-lead .o-orb>.k-pin::after{left:100%;right:auto}
.k-lead .o-orb>.k-pin::before{left:calc(100% + var(--pl,40px) - 3px);right:auto}
@media (max-width:767px){.k-lead{margin-left:0;padding-right:var(--s-7)}.k-lead .k-pin,.k-lead .o-orb>.k-pin{left:calc(100% - 22px)}
.k-lead .o-orb>.k-pin::after{right:100%;left:auto}.k-lead .o-orb>.k-pin::before{right:calc(100% + var(--pl,40px) - 3px);left:auto}}
@media (max-width:767px){#spec-kpi .k-part{gap:var(--s-4)!important}}
/* docs frame: guidance above the fold */
.dz{max-width:1440px;margin:0 auto;padding:var(--s-6) var(--s-5) var(--s-7);display:grid;grid-template-columns:200px minmax(0,1fr) 180px;gap:var(--s-7);border-bottom:1px solid var(--stroke-1)}
.dz-cap{font:600 12px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:0 0 var(--s-3)}
.dz ul{list-style:none;margin:0;padding:0}
.dz-side a,.dz-toc a{display:block;padding:var(--s-1) var(--s-2);margin-left:calc(-1 * var(--s-2));border-radius:var(--r-xs);color:var(--fg-2);text-decoration:none;font-size:14px}
.dz-side a:hover,.dz-toc a:hover{color:var(--fg);background:rgba(160,180,255,.06)}
.dz-side a[aria-current]{color:var(--fg);background:rgba(139,92,255,.16)}
.dz-side,.dz-toc{position:sticky;top:88px;align-self:start}
.dz-toc{border-left:1px solid var(--stroke-1);padding-left:var(--s-4)}
.dz-toc a{margin-left:0;padding:var(--s-1) 0;font-size:13px}
.dz-main{max-width:720px}
.dz-eyebrow{font:600 12px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#A98BFF;margin:0 0 var(--s-2)}
.dz-h1{font:700 clamp(32px,4vw,44px)/1.1 var(--font-display);margin:0 0 var(--s-3);letter-spacing:-.01em}
.dz-lede{font-size:18px;line-height:1.55;color:var(--fg-2);margin:0 0 var(--s-5);max-width:60ch}
.dz-demo{display:flex;flex-wrap:wrap;gap:var(--s-3);padding:var(--s-6);border:1px solid var(--stroke-1);border-radius:var(--r-lg);background:rgba(8,12,26,.6);margin-bottom:var(--s-6)}
.dz-h2{font:600 20px/1.3 var(--font-display);margin:0 0 var(--s-3);scroll-margin-top:96px}
.dz-table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:var(--s-6)}
.dz-table th{text-align:left;font-weight:600;color:var(--fg-3);font-size:12px;padding:var(--s-2) var(--s-2);border-bottom:1px solid var(--stroke-2)}
.dz-table td{padding:var(--s-2);border-bottom:1px solid var(--stroke-1);color:var(--fg-2)}
.dz-table code{font:500 13px var(--font-mono);color:var(--fg)}
.dz-dd{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.dz-do,.dz-dont{padding:var(--s-4) var(--s-4);border-radius:var(--r-md);border:1px solid var(--stroke-1);border-top:3px solid #3DDC97;font-size:14px;line-height:1.5;color:var(--fg-2)}
.dz-dont{border-top-color:#FF5A6E}
.dz-dd b{display:block;color:var(--fg);margin-bottom:var(--s-2)}
.dz-dd li{padding:3px 0}
#kit-hero,#kit-board,#kit-sheet{scroll-margin-top:80px}
@media (max-width:1100px){.dz{grid-template-columns:180px minmax(0,1fr);gap:var(--s-6)}.dz-toc{display:none}}
@media (max-width:760px){
 .dz{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) var(--s-4) var(--s-6)}
 .dz-side{position:static;order:0}.dz-side ul{display:flex;gap:var(--s-1);overflow-x:auto;padding-bottom:var(--s-1);scrollbar-width:none}
 .dz-side li{flex:none}.dz-side a{margin:0;padding:var(--s-2) var(--s-3);border:1px solid var(--stroke-1);border-radius:var(--r-pill);white-space:nowrap}
 .dz-side .dz-cap{display:none}
 .dz-demo{padding:var(--s-4)}
 .dz-dd{grid-template-columns:1fr}
 .dz-table th,.dz-table td{padding:var(--s-2) var(--s-1)}
}
/* anatomy hero: the button at display scale with measured callouts */
.dz-main{max-width:none}
.dz-lede,.dz-table,.dz-dd{max-width:760px}
.dz-anat{--k:2.5;margin:0 0 var(--s-6);border:1px solid var(--stroke-1);border-radius:var(--r-lg);background:radial-gradient(120% 90% at 50% 0%,rgba(139,92,255,.10),transparent 60%),rgba(8,12,26,.6);overflow:hidden}
.dz-anat__cap{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--stroke-1);font:600 12px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.dz-anat__stage{display:flex;justify-content:center;padding:calc(var(--k)*30px) 20px calc(var(--k)*28px)}
.dz-xl{position:relative;font-size:calc(var(--k)*14px)}
.dz-xl__btn{display:flex;align-items:center;gap:calc(var(--k)*8px);height:calc(var(--k)*40px);padding:0 calc(var(--k)*18px);border-radius:calc(var(--k)*10px);color:#fff;font-weight:600;background:linear-gradient(110deg,var(--plasma-700),var(--plasma-500) 45%,var(--azure-500));box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 0 0 2px rgba(214,192,255,.5),var(--emit-md)}
.dz-xl__ic{width:calc(var(--k)*16px);height:calc(var(--k)*16px);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dz-m{position:absolute;color:#7FE3FF;font:500 12px/1 var(--font-mono);white-space:nowrap}
.dz-m i{font-style:normal;position:absolute;background:rgba(8,12,26,.9);padding:3px var(--s-1);border-radius:var(--r-xs)}
.dz-m--h{left:-28px;top:0;bottom:0;border-left:1px solid currentColor}
.dz-m--h::before,.dz-m--h::after{content:"";position:absolute;left:-6px;width:11px;border-top:1px solid currentColor}
.dz-m--h::before{top:0}.dz-m--h::after{bottom:0}
.dz-m--h i{right:10px;top:50%;transform:translateY(-50%)}
.dz-m--pl,.dz-m--pr{top:-22px;width:calc(var(--k)*18px);border-top:1px solid currentColor}
.dz-m--pl{left:0}.dz-m--pr{right:0}
.dz-m--pl::before,.dz-m--pr::before,.dz-m--pl::after,.dz-m--pr::after{content:"";position:absolute;top:-5px;height:9px;border-left:1px solid currentColor}
.dz-m--pl::before,.dz-m--pr::before{left:0}.dz-m--pl::after,.dz-m--pr::after{right:0}
.dz-m--pl i,.dz-m--pr i{left:50%;bottom:6px;transform:translateX(-50%)}
.dz-m--gap{bottom:-22px;left:calc(var(--k)*34px);width:calc(var(--k)*8px);border-top:1px solid currentColor}
.dz-m--gap::before,.dz-m--gap::after{content:"";position:absolute;top:-5px;height:9px;border-left:1px solid currentColor}
.dz-m--gap::before{left:0}.dz-m--gap::after{right:0}
.dz-m--gap i{left:50%;top:8px;transform:translateX(-50%)}
.dz-m--r{right:-5px;bottom:-5px;width:calc(var(--k)*10px + 5px);height:calc(var(--k)*10px + 5px);border:1px dashed currentColor;border-top:0;border-left:0;border-bottom-right-radius:calc(var(--k)*10px + 5px)}
.dz-m--r i{left:calc(100% + 4px);top:calc(100% - 10px)}
.dz-anat__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) var(--s-4);border-top:1px solid var(--stroke-1);background:rgba(4,6,14,.4)}
.dz-row{display:flex;flex-wrap:nowrap;gap:var(--s-2)}
.dz-anat__row p{margin:0;font-size:13px;color:var(--fg-3)}
@media (max-width:760px){.dz-anat{--k:1.6}.dz-anat__row{flex-direction:column;align-items:flex-start;gap:var(--s-2)}.dz-anat__cap span+span{display:none}.dz-m--gap,.dz-m--pl{display:none}.dz-m--r i{left:auto;right:-4px;top:calc(100% + 6px)}}
/* r3: quiet anatomy. no glow, muted dimension lines, usage first */
.dz-anat{background:rgba(8,12,26,.5)}
.dz-xl__btn{background:var(--plasma-500);box-shadow:none}
.dz-m{color:var(--fg-3);font:500 11px/1 var(--font-ui);letter-spacing:.02em;opacity:.85}
.dz-m i{background:none;padding:2px var(--s-1)}
.dz .o-btn,.dz .o-btn:hover{box-shadow:none;text-shadow:none;filter:none}
.dz .o-btn--primary{background:var(--plasma-500)}
.dz-dd{margin-bottom:var(--s-6)}
.dz-do,.dz-dont{border-top-width:2px;background:rgba(8,12,26,.35)}
.dz-table{margin-bottom:0}

/* Shared docs frame: the site rail is the page's one section list, like every standards page */
.cx{display:grid;grid-template-columns:264px minmax(0,1fr);max-width:1440px;margin:0 auto}
.cx-rail{position:sticky;top:64px;align-self:start;height:calc(100vh - 64px);overflow:hidden;border-right:1px solid var(--stroke-1)}
.cx-main{min-width:0}
.cx .dz{grid-template-columns:minmax(0,1fr) 180px}
.cx .dz-side{display:none}
@media (max-width:1000px){.cx{display:block}.cx-rail{display:none}}
@media (max-width:1100px){.cx .dz{grid-template-columns:minmax(0,1fr)}}

.dz-go{margin:calc(-1 * var(--s-3)) 0 var(--s-5)}.dz-go a{font:600 15px/1.4 var(--font-ui);color:#A98BFF;text-decoration:none}.dz-go a:hover{color:#C7A6FF;text-decoration:underline;text-underline-offset:3px}.dz-go a span{display:inline-block;transition:transform .15s}.dz-go a:hover span{transform:translateX(3px)}
/* components r2: radius arc concentric with the corner, 2px outside; symmetric callouts at 390 */
.dz-m--r{right:-2px;bottom:-2px;width:calc(var(--k)*10px + 2px);height:calc(var(--k)*10px + 2px);border-bottom-right-radius:calc(var(--k)*10px + 2px);box-sizing:border-box}
.dz-m--r i{left:calc(100% + 6px);top:calc(100% - 12px);right:auto}
@media (max-width:760px){
 .dz-anat__stage{padding:var(--s-8) var(--s-4) var(--s-8)}
 .dz-m--gap,.dz-m--pl{display:block}
 .dz-m{font-size:10px}
 .dz-m--pl,.dz-m--pr{top:-18px}
 .dz-m--gap{bottom:-18px}
 .dz-m--gap i{top:6px}
 .dz-m--h{left:-20px}
 .dz-m--r i{left:auto;right:0;top:calc(100% + 8px)}
}
/* components r3: crisp drafting. solid 1px arc, crisp ticks, 13px labels at 75% white */
.dz-m{color:rgba(255,255,255,.75);opacity:1;font:500 13px/1 var(--font-mono);letter-spacing:0;-webkit-font-smoothing:antialiased}
.dz-m,.dz-m::before,.dz-m::after{border-color:rgba(255,255,255,.62)}
.dz-m--r{border-style:solid;border-width:0 1px 1px 0;border-color:rgba(127,227,255,.9)}
.dz-m--r i{color:#BDEFFF;left:calc(100% + 3px);top:calc(100% - 9px)}
@media (max-width:760px){
 .dz-m{font-size:11.5px}
 .dz-m--pl,.dz-m--pr{top:-20px}
 .dz-m--gap{bottom:-20px}
 .dz-m--h{left:-22px}
 .dz-m--r i{left:auto;right:-2px;top:calc(100% + 4px)}
}