:root{
  --bg:#0b0f17; --bg2:#111726; --panel:#161d2e; --line:#243049;
  --ink:#e8edf7; --mut:#93a0bd; --mut2:#67738f;
  --slot:#4f9cff; --inp:#43c59e; --attn:#ff6b6b; --amber:#f5b14c;
  --grad1:#4f9cff; --grad2:#b48ef0;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1200px 600px at 70% -10%,#16203a 0,var(--bg) 60%);
  color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:980px;margin:0 auto;padding:0 22px}
b,strong{color:#f3f6fc}
.t-slot{color:var(--slot)} .t-inp{color:var(--inp)} .t-attn{color:var(--attn)}

/* hero */
.hero{padding:74px 0 34px;border-bottom:1px solid var(--line)}
.kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--mut2);font-size:12.5px;margin:0 0 14px}
h1{font-size:clamp(34px,6vw,58px);line-height:1.02;margin:0 0 18px;letter-spacing:-.02em;font-weight:800}
.grad{background:linear-gradient(90deg,var(--grad1),var(--grad2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(16px,2.2vw,19px);color:#cdd6ea;max-width:760px;margin:0 0 14px}
.note{color:var(--mut);font-size:15px;margin:0}

/* sections */
section{padding:54px 0;border-bottom:1px solid var(--line)}
h2{font-size:clamp(22px,3.4vw,30px);margin:0 0 14px;letter-spacing:-.01em;display:flex;align-items:center;gap:14px}
.num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--grad1),var(--grad2));color:#0b0f17;font-weight:800;font-size:18px;flex:none}
section p{color:#c4cde2;max-width:780px}

/* pipeline */
.pipeline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px}
.pstep{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  text-align:center;font-size:14px;min-width:96px;font-weight:600}
.pstep small{color:var(--mut);font-weight:500;font-size:12px}
.pstep.big{padding:14px 18px}
.pstep[data-c=slot]{border-color:#2c4a7a;box-shadow:inset 0 0 0 1px #2c4a7a55;background:#13243f}
.pstep[data-c=inp]{border-color:#1f5e4d;background:#102a24}
.parrow{color:var(--mut2);font-size:20px}
@keyframes flow{0%,100%{opacity:.35}50%{opacity:1}}
.pipeline.run .parrow{animation:flow 1.6s ease-in-out infinite}
.pipeline.run .parrow:nth-child(4){animation-delay:.2s}
.pipeline.run .parrow:nth-child(6){animation-delay:.4s}
.pipeline.run .parrow:nth-child(8){animation-delay:.6s}
.pipeline.run .parrow:nth-child(10){animation-delay:.8s}

/* demo layout */
.demo{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap;align-items:flex-start}
canvas{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);max-width:100%;touch-action:none}
.panel{flex:1;min-width:250px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px}
.panel.grow{min-width:300px}
.panel label{display:block;font-size:13.5px;color:var(--mut);margin:0 0 14px}
.panel output{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;margin-top:7px;accent-color:var(--slot)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
button{background:#1d2740;color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:9px 13px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
button:hover{border-color:#3a4a73;filter:brightness(1.18)}
button.primary{background:linear-gradient(135deg,var(--grad1),var(--grad2));color:#0b0f17;border:none}
button.active{background:var(--slot);color:#0b0f17;border-color:var(--slot)}
.metric{font-size:14px;color:var(--mut);margin:6px 0}
.metric b{font-variant-numeric:tabular-nums}
.hint{font-size:13px;color:var(--mut2);margin:10px 0 0;line-height:1.5}

/* segmented control */
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.seg-b{font-size:12.5px;padding:8px 11px}
.seg-b.active{background:var(--attn);color:#0b0f17;border-color:var(--attn)}
.seg-b i{font-style:italic}

/* attention grid */
.grid{display:grid;gap:3px;margin:4px 0 10px}
.cell{aspect-ratio:1;border-radius:5px;display:grid;place-items:center;font-size:11px;
  font-variant-numeric:tabular-nums;color:#0b0f17;font-weight:600;transition:transform .1s}
.cell.col-head,.cell.row-head{background:transparent;color:var(--mut);font-weight:700}
.cell.hl{outline:2px solid #fff;outline-offset:-2px}

/* segmentation pair */
.seg-pair{display:flex;gap:14px;flex-wrap:wrap}
.seg-pair figure{margin:0}
.seg-pair figcaption{text-align:center;color:var(--mut);font-size:13px;margin-top:7px}

.foot{color:var(--mut2);font-size:13.5px;border-top:1px solid var(--line);padding-top:16px;margin-top:24px}

@media(max-width:560px){
  .demo{flex-direction:column}
  canvas{width:100%;height:auto}
}