:root {
  --navy-950: #031020;
  --navy-900: #071a36;
  --navy-850: #0a2144;
  --navy-800: #0d2955;
  --blue-600: #246bfe;
  --blue-500: #3682ff;
  --blue-400: #62a5ff;
  --sky-300: #8ed2ff;
  --white: #f7fbff;
  --text: #dbe8f7;
  --muted: #8fa8c3;
  --line: rgba(143, 185, 230, .18);
  --panel: rgba(10, 33, 68, .62);
  --shell: min(1180px, calc(100% - 56px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--navy-950);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.section-shell { width: var(--shell); margin-inline: auto; }
.section-block { padding-block: 120px; }
.page-glow {
  --x: 50vw;
  --y: 20vh;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(500px circle at var(--x) var(--y), rgba(36, 107, 254, .10), transparent 68%);
}

.site-header {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.site-logo { position: relative; z-index: 2; width: 42px; min-width: 42px; height: 42px; flex: 0 0 42px; display: block; color: var(--sky-300); transition: transform .2s, filter .2s; }
.site-logo:hover { transform: translateY(-2px) rotate(-2deg); filter: drop-shadow(0 0 14px rgba(98,165,255,.35)); }
.site-logo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.site-logo path { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.logo-frame { stroke: rgba(98,165,255,.42); stroke-width: 1.2; fill: rgba(13,41,85,.36) !important; }
.logo-letter { stroke: var(--white); stroke-width: 2.1; }
.logo-signal { stroke: var(--blue-400); stroke-width: 2; }
.site-header nav { display: flex; align-items: center; gap: 32px; font: 500 12px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.site-header nav > a:not(.nav-pill) { color: var(--muted); transition: color .2s; }
.site-header nav > a:not(.nav-pill):hover { color: var(--white); }
.nav-pill { padding: 12px 16px; border: 1px solid rgba(98, 165, 255, .55); border-radius: 100px; color: var(--sky-300); transition: .2s; }
.nav-pill:hover { background: var(--blue-600); border-color: var(--blue-600); color: white; transform: translateY(-1px); }
.language-switch { min-height: 34px; padding: 3px 8px; border: 1px solid rgba(98,165,255,.28); border-radius: 999px; display: flex; align-items: center; gap: 5px; background: rgba(3,16,32,.46); }
.language-switch a { min-width: 25px; padding: 5px 4px; border-radius: 999px; color: var(--muted); text-align: center; transition: color .2s, background .2s; }
.language-switch a:hover, .language-switch a:focus-visible { color: var(--white); outline: none; }
.language-switch a.is-active { background: var(--blue-600); color: var(--white); }
.language-switch span { color: rgba(142,210,255,.35); }
.menu-button { display: none; }

.hero {
  min-height: 780px;
  padding-block: 105px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 86px;
  align-items: end;
}
.kicker, .section-index, .project-type {
  margin: 0;
  font: 500 11px 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.kicker { display: flex; align-items: center; gap: 10px; }
.kicker > span { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 6px rgba(54, 130, 255, .12), 0 0 24px var(--blue-500); }
.hero h1 {
  max-width: 1000px;
  margin: 30px 0 32px;
  color: var(--white);
  font-size: clamp(72px, 10.6vw, 146px);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 700;
}
.hero h1 em { color: var(--blue-400); font-style: normal; }
html[lang="vi"] .hero h1 {
  line-height: 1.04;
  letter-spacing: -.065em;
}
.hero-intro { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-intro strong { color: var(--white); font-weight: 600; }
.hero-actions { display: flex; gap: 12px; margin-top: 38px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 20px; border-radius: 100px; font: 600 12px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .03em; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--blue-600); color: white; box-shadow: 0 16px 38px rgba(36, 107, 254, .28); }
.button.primary:hover { background: var(--blue-500); }
.button.ghost { border: 1px solid var(--line); color: var(--sky-300); }
.button.ghost:hover { border-color: var(--blue-500); background: rgba(36, 107, 254, .08); }
.hero-links { margin-top: 54px; display: flex; flex-wrap: wrap; gap: 25px; font: 11px 'DM Mono', monospace; color: var(--muted); }
.hero-links a { color: var(--sky-300); }

.hero-signature { border-top: 1px solid var(--line); }
.hero-signature > p { margin: 18px 0 15px; color: var(--white); font-size: clamp(29px, 5.8vw, 78px); line-height: 1; font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
.signature-line { display: flex; align-items: center; gap: 18px; color: var(--blue-400); font: 500 9px 'DM Mono', monospace; letter-spacing: .16em; }
.signature-line i { flex: 1; height: 1px; background: var(--line); }
.proof-strip { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(120deg, rgba(36,107,254,.12), rgba(7,26,54,.25)); overflow: hidden; }
.proof-strip > div { min-height: 105px; padding: 22px 25px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.proof-strip > div:last-child { border-right: 0; }
.proof-strip strong { color: var(--white); font-size: 31px; letter-spacing: -.05em; }
.proof-strip span { margin-top: 4px; color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }

.ticker { padding: 18px 0; overflow: hidden; border-block: 1px solid var(--line); background: rgba(13, 41, 85, .28); white-space: nowrap; }
.ticker > div { width: max-content; color: #adc3db; font: 500 11px 'DM Mono', monospace; letter-spacing: .12em; animation: ticker 28s linear infinite; }
.ticker i { margin: 0 32px; color: var(--blue-500); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.manifesto { border-bottom: 1px solid var(--line); }
.manifesto-grid { margin-top: 40px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 10%; align-items: start; }
.manifesto h2, .section-title-row h2, .toolkit h2, .blog-header h1, .post-header h1, .site-footer h2 { margin: 0; color: var(--white); font-size: clamp(46px, 5.8vw, 76px); line-height: 1; letter-spacing: -.06em; }
.manifesto h2 span, .toolkit h2 span { color: var(--blue-400); }
.manifesto-grid > div { padding-top: 4px; }
.manifesto-grid p { margin: 0 0 22px; color: var(--muted); font-size: 17px; line-height: 1.75; }

.section-title-row { margin-bottom: 50px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.section-title-row h2 { margin-top: 22px; }
.section-note { max-width: 230px; margin: 0 0 7px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.inline-link { color: var(--sky-300); border-bottom: 1px solid rgba(142, 210, 255, .45); padding-bottom: 5px; font: 500 11px 'DM Mono', monospace; text-transform: uppercase; }

.expertise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.expertise-card { min-height: 465px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, border-color .3s; }
.expertise-card:hover { transform: translateY(-7px); border-color: rgba(98, 165, 255, .5); }
.blue-card { background: linear-gradient(155deg, rgba(36, 107, 254, .36), rgba(10, 33, 68, .48) 64%); }
.sky-card { background: linear-gradient(155deg, rgba(43, 132, 190, .28), rgba(10, 33, 68, .48) 64%); }
.navy-card { background: linear-gradient(155deg, rgba(31, 75, 135, .25), rgba(6, 22, 47, .75) 64%); }
.card-number { color: var(--muted); font: 10px 'DM Mono', monospace; }
.card-icon { height: 150px; margin: 22px 0 18px; position: relative; display: grid; place-items: center; }
.eye-icon:before { content: ''; width: 132px; height: 74px; border: 2px solid var(--blue-400); border-radius: 100% 12%; transform: rotate(45deg); box-shadow: 0 0 35px rgba(98,165,255,.2); }
.eye-icon span { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: var(--blue-500); border: 8px solid var(--navy-900); box-shadow: 0 0 0 1px var(--sky-300); }
.layers-icon span { position: absolute; width: 120px; height: 70px; border: 1px solid var(--blue-400); transform: rotate(30deg) skew(-12deg); border-radius: 6px; }
.layers-icon span:nth-child(1) { transform: translateY(-26px) rotate(30deg) skew(-12deg); background: rgba(54,130,255,.18); }
.layers-icon span:nth-child(2) { transform: rotate(30deg) skew(-12deg); background: rgba(54,130,255,.12); }
.layers-icon span:nth-child(3) { transform: translateY(26px) rotate(30deg) skew(-12deg); }
.pulse-icon:before, .pulse-icon:after { content: ''; position: absolute; border: 1px solid var(--blue-400); border-radius: 50%; }
.pulse-icon:before { width: 118px; height: 118px; animation: pulse 2.6s ease-out infinite; }
.pulse-icon:after { width: 70px; height: 70px; background: rgba(54,130,255,.2); }
.pulse-icon span { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-400); z-index: 1; box-shadow: 0 0 35px var(--blue-500); }
@keyframes pulse { 70%, 100% { transform: scale(1.35); opacity: 0; } }
.expertise-card h3 { margin: 0 0 14px; color: var(--white); font-size: 23px; letter-spacing: -.035em; }
.expertise-card > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.expertise-card ul { margin: auto 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--line); }
.expertise-card li { margin-top: 8px; color: #b6c8da; font: 10px 'DM Mono', monospace; text-transform: uppercase; }
.expertise-card li:before { content: '→'; margin-right: 9px; color: var(--blue-400); }

.work { border-top: 1px solid var(--line); }
.project-list { display: grid; gap: 16px; }
.project-item { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 470px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: rgba(7, 26, 54, .6); transition: border-color .3s, transform .3s; }
.project-item:hover { transform: translateY(-4px); border-color: rgba(98, 165, 255, .55); }
.project-visual { min-height: 330px; position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.project-copy { padding: 42px; display: flex; flex-direction: column; align-items: flex-start; }
.project-copy h3 { margin: 20px 0 16px; color: var(--white); font-size: clamp(30px, 3vw, 45px); line-height: 1; letter-spacing: -.055em; }
.project-copy > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.tag-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 7px; }
.tag-row span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 100px; color: var(--sky-300); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.project-copy > b { margin-top: auto; padding-top: 35px; color: var(--text); font: 600 11px 'DM Mono', monospace; text-transform: uppercase; }
.project-copy > b i { margin-left: 10px; color: var(--blue-400); font-style: normal; font-size: 17px; }
.project-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.project-item.compact { display: block; min-height: 650px; }
.project-item.compact .project-visual { height: 300px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
.project-item.compact .project-copy { min-height: 350px; padding: 30px; }
.project-item.compact .project-copy h3 { font-size: 31px; }

.quant-art { background: radial-gradient(circle at 30% 45%, rgba(54,130,255,.48), transparent 30%), linear-gradient(135deg, #102e66, #07162f); }
.quant-art:before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(142,210,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(142,210,255,.08) 1px, transparent 1px); background-size: 35px 35px; }
.precision-stack { position: absolute; left: 12%; top: 17%; display: grid; gap: 9px; transform: perspective(600px) rotateY(-12deg); }
.precision-stack span { width: 210px; padding: 13px 17px; border-radius: 8px; border: 1px solid rgba(142,210,255,.35); background: rgba(5,19,40,.7); color: var(--sky-300); font: 500 11px 'DM Mono', monospace; box-shadow: 20px 20px 35px rgba(0,0,0,.15); }
.precision-stack span:nth-child(2) { margin-left: 28px; width: 175px; }
.precision-stack span:nth-child(3) { margin-left: 52px; width: 140px; background: var(--blue-600); color: white; }
.precision-stack span:nth-child(4) { margin-left: 75px; width: 110px; }
.memory-meter { position: absolute; right: 9%; bottom: 15%; width: 145px; }
.memory-meter:before { content: ''; display: block; height: 7px; border-radius: 10px; background: rgba(255,255,255,.12); }
.memory-meter i { position: absolute; top: 0; left: 0; width: 54%; height: 7px; border-radius: 10px; background: var(--sky-300); box-shadow: 0 0 18px rgba(142,210,255,.6); }
.memory-meter small { display: block; margin-top: 10px; color: var(--muted); font: 8px 'DM Mono', monospace; }
.benchmark-tag, .latency-tag { position: absolute; right: 8%; top: 14%; padding: 9px 11px; border: 1px solid rgba(142,210,255,.35); border-radius: 5px; color: var(--sky-300); background: rgba(5,19,40,.65); font: 9px 'DM Mono', monospace; }
.notes-art { background: radial-gradient(circle at center, rgba(36,107,254,.32), transparent 46%), #081c3a; }
.notes-art:before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(142,210,255,.07) 32px); }
.speed-ring { width: 145px; height: 145px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid var(--blue-400); border-radius: 50%; display: grid; place-content: center; text-align: center; box-shadow: 0 0 0 20px rgba(54,130,255,.06), 0 0 50px rgba(36,107,254,.2); }
.speed-ring strong { color: var(--white); font-size: 35px; letter-spacing: -.06em; }
.speed-ring span { color: var(--blue-400); font: 8px 'DM Mono', monospace; }
.note-line { position: absolute; height: 1px; background: var(--blue-400); opacity: .45; }
.line-a { width: 70px; left: 8%; top: 20%; }.line-b { width: 105px; right: 5%; bottom: 22%; }.line-c { width: 45px; right: 14%; top: 13%; }
.tensor-art { background: linear-gradient(145deg, #0c2a58, #06152d); perspective: 700px; }
.tensor-art:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 65% 40%, rgba(98,165,255,.23), transparent 38%); }
.tensor-cube { position: absolute; width: 92px; height: 92px; border: 1px solid rgba(142,210,255,.55); background: rgba(54,130,255,.09); transform: rotate(30deg) skew(-8deg); box-shadow: inset 0 0 25px rgba(98,165,255,.08); }
.cube-one { left: 23%; top: 28%; }.cube-two { left: 39%; top: 38%; }.cube-three { left: 55%; top: 48%; background: rgba(54,130,255,.22); }
.tensor-art code { position: absolute; left: 9%; bottom: 11%; color: var(--sky-300); font: 9px 'DM Mono', monospace; }

.precision-lab { border-top: 1px solid var(--line); }
.lab-heading .section-note { max-width: 355px; }
.lab-shell { border: 1px solid rgba(98,165,255,.28); border-radius: 22px; overflow: hidden; background: linear-gradient(145deg, rgba(13,41,85,.72), rgba(4,18,38,.92)); box-shadow: 0 35px 90px rgba(0,0,0,.2); }
.lab-toolbar { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.lab-platform { min-width: 250px; padding: 16px 24px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.lab-platform span { display: block; font: 500 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.lab-platform small { display: block; margin-top: 6px; color: var(--blue-400); font: 500 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.lab-platform.is-active small { color: var(--sky-300); }
.lab-platform.is-active { color: var(--white); background: rgba(36,107,254,.18); box-shadow: inset 0 -2px var(--blue-500); }
.lab-platform:focus-visible, .lab-method:focus-visible { outline: 2px solid var(--sky-300); outline-offset: -3px; }
.lab-body { min-height: 470px; display: grid; grid-template-columns: .74fr 1.26fr; }
.lab-methods { padding: 35px; display: grid; align-content: center; gap: 10px; border-right: 1px solid var(--line); background-image: linear-gradient(rgba(142,210,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(142,210,255,.045) 1px, transparent 1px); background-size: 36px 36px; }
.lab-method { width: 100%; min-height: 64px; padding: 0 20px; border: 1px solid var(--line); border-radius: 9px; background: rgba(3,16,32,.67); color: var(--sky-300); display: flex; justify-content: space-between; align-items: center; cursor: pointer; font: 500 12px 'DM Mono', monospace; text-align: left; transition: transform .2s, background .2s, border-color .2s; }
.lab-method:hover { transform: translateX(5px); border-color: rgba(98,165,255,.5); }
.lab-method.is-active { background: var(--blue-600); border-color: var(--blue-400); color: white; box-shadow: 0 14px 32px rgba(36,107,254,.28); }
.lab-method small { color: inherit; opacity: .68; font-size: 9px; }
.lab-readout { padding: 44px; display: grid; align-content: center; }
.lab-selected > span { color: var(--blue-400); font: 500 9px 'DM Mono', monospace; letter-spacing: .12em; }
.lab-selected > strong { margin-top: 10px; display: block; color: var(--white); font-size: clamp(36px, 5vw, 62px); line-height: 1; letter-spacing: -.055em; }
.lab-selected > p { max-width: 560px; margin: 15px 0 35px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.metric > div { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.metric span { color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.metric strong { color: var(--text); font: 500 12px 'DM Mono', monospace; }
.metric > i { height: 6px; display: block; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.09); }
.metric > i > b { width: 50%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--blue-600), var(--sky-300)); box-shadow: 0 0 18px rgba(98,165,255,.48); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.lab-foot { padding: 17px 24px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.lab-foot a { color: var(--sky-300); }

.research { border-top: 1px solid var(--line); }
.library-button { border: 1px solid rgba(98,165,255,.5); color: var(--sky-300); }
.library-button:hover { background: var(--blue-600); border-color: var(--blue-600); color: white; }
.research-intro { max-width: 620px; margin: -18px 0 42px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.research-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.research-card { min-height: 360px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(155deg, rgba(13,41,85,.72), rgba(7,26,54,.62)); display: flex; flex-direction: column; transition: transform .3s, border-color .3s, background .3s; }
.research-card:hover { transform: translateY(-6px); border-color: rgba(98,165,255,.55); background: linear-gradient(155deg, rgba(19,57,119,.78), rgba(7,26,54,.7)); }
.research-featured { background: linear-gradient(145deg, rgba(36,107,254,.34), rgba(7,26,54,.75)); }
.research-top { display: flex; justify-content: space-between; color: var(--blue-400); font: 500 9px 'DM Mono', monospace; letter-spacing: .1em; }
.research-top i { padding: 4px 7px; border: 1px solid rgba(98,165,255,.35); border-radius: 100px; color: var(--sky-300); font-style: normal; letter-spacing: .04em; }
.research-card h3 { margin: 50px 0 15px; color: var(--white); font-size: 27px; line-height: 1.08; letter-spacing: -.045em; }
.research-featured h3 { max-width: 430px; font-size: 38px; }
.research-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.research-card > strong { margin-top: auto; padding-top: 30px; color: var(--sky-300); font: 500 10px 'DM Mono', monospace; text-transform: uppercase; }
.paper-diagram { margin: 30px 0 8px; display: flex; align-items: center; gap: 8px; }
.paper-diagram span { padding: 8px 10px; border: 1px solid rgba(142,210,255,.33); border-radius: 5px; color: var(--sky-300); font: 8px 'DM Mono', monospace; }
.paper-diagram b { color: var(--blue-400); font-weight: 400; }

.toolkit { border-block: 1px solid rgba(98,165,255,.22); background: linear-gradient(115deg, #0c3574 0%, #0c2856 48%, #071a36 100%); }
.toolkit-inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: 10%; align-items: start; }
.toolkit h2 { margin-top: 25px; }
.tool-groups { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.16); }
.tool-groups > div { padding: 28px 18px 28px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.tool-groups > div:nth-child(even) { padding-left: 25px; border-left: 1px solid rgba(255,255,255,.16); }
.tool-groups h3 { margin: 0 0 10px; color: var(--sky-300); font: 500 10px 'DM Mono', monospace; text-transform: uppercase; }
.tool-groups p { margin: 0; color: var(--white); font-size: 14px; line-height: 1.6; }

.post-list { border-top: 1px solid var(--line); }
.post-row { min-height: 112px; position: relative; display: grid; grid-template-columns: 160px 1fr 30px; gap: 25px; align-items: center; border-bottom: 1px solid var(--line); isolation: isolate; overflow: hidden; transition: padding .25s, background .25s, border-color .25s; }
.post-row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(36,107,254,.14), rgba(54,130,255,.025) 58%, transparent); opacity: 0; transform: translateX(-7%); transition: opacity .3s, transform .45s ease; }
.post-row::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: linear-gradient(90deg, var(--blue-500), var(--sky-300)); box-shadow: 0 0 18px rgba(98,165,255,.65); transition: width .45s ease; }
.post-row:hover, .post-row:focus-visible { padding-inline: 14px; border-color: rgba(98,165,255,.32); background: rgba(36,107,254,.035); outline: none; }
.post-row:hover::before, .post-row:focus-visible::before { opacity: 1; transform: none; }
.post-row:hover::after, .post-row:focus-visible::after { width: 100%; }
.post-row time { color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; }
.post-step { display: grid; gap: 4px; align-content: center; }
.post-step small { color: var(--blue-400); font: 500 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
.post-step time { color: var(--white); font-size: 18px; letter-spacing: -.03em; }
.post-step span { color: var(--muted); font: 500 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .05em; }
.post-row h3 { margin: 0 0 7px; color: var(--white); font-size: 21px; letter-spacing: -.025em; }
.post-row p { margin: 0; color: var(--muted); font-size: 13px; }
.post-row > span { color: var(--blue-400); font-size: 23px; }
.post-arrow { transition: color .25s, transform .25s; }
.post-row:hover .post-arrow, .post-row:focus-visible .post-arrow { color: var(--sky-300); transform: translate(3px,-3px); }

.site-footer { padding: 100px 0 28px; background: var(--blue-600); color: white; }
.site-footer .section-index { color: #c9ddff; }
.footer-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12%; align-items: end; }
.site-footer h2 { margin-top: 26px; color: white; }
.footer-right { display: flex; flex-direction: column; align-items: flex-start; }
.footer-right p { max-width: 430px; margin: 0 0 30px; color: #d8e6ff; font-size: 16px; line-height: 1.7; }
.footer-button { background: white; color: var(--blue-600); }
.footer-bottom { margin-top: 85px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.25); display: flex; justify-content: space-between; color: #d8e6ff; font: 9px 'DM Mono', monospace; text-transform: uppercase; }

.blog-page { padding-block: 100px 140px; position: relative; }
.blog-hero-grid { min-height: 465px; margin-bottom: 75px; display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 8%; align-items: center; }
.blog-header { max-width: 780px; }
.blog-header h1 { margin: 25px 0; }
.blog-header > p:not(.section-index) { max-width: 560px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.blog-summary { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.blog-summary span { min-height: 46px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 100px; background: rgba(10,33,68,.4); color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .07em; }
.blog-summary strong { color: var(--white); font-size: 11px; }
.research-signal { width: 370px; aspect-ratio: 1; position: relative; justify-self: end; border: 1px solid rgba(98,165,255,.22); border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(36,107,254,.22), rgba(7,26,54,.16) 42%, transparent 70%); box-shadow: inset 0 0 70px rgba(36,107,254,.08), 0 0 70px rgba(36,107,254,.08); }
.signal-orbit { position: absolute; inset: 12%; border: 1px solid rgba(98,165,255,.21); border-radius: 50%; animation: signal-spin 18s linear infinite; }
.signal-orbit::before, .signal-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--sky-300); box-shadow: 0 0 18px var(--blue-400); }
.signal-orbit::before { top: 15%; left: 12%; }.signal-orbit::after { right: 4%; bottom: 30%; }
.signal-orbit-b { inset: 27%; animation-direction: reverse; animation-duration: 11s; }
.signal-core { position: absolute; inset: 35%; border: 1px solid rgba(142,210,255,.42); border-radius: 50%; display: grid; place-content: center; text-align: center; color: var(--white); background: rgba(7,26,54,.84); box-shadow: 0 0 45px rgba(36,107,254,.25); font: 500 10px 'DM Mono', monospace; line-height: 1.4; letter-spacing: .12em; }
.signal-core b { color: var(--sky-300); font-size: 18px; }
.signal-node { position: absolute; padding: 8px 10px; border: 1px solid rgba(98,165,255,.28); border-radius: 5px; background: rgba(3,16,32,.84); color: var(--sky-300); font: 500 8px 'DM Mono', monospace; letter-spacing: .08em; box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.signal-node-a { top: 8%; left: 42%; }.signal-node-b { right: -2%; bottom: 26%; }.signal-node-c { left: 0; bottom: 21%; }
.signal-beam { position: absolute; height: 1px; width: 22%; transform-origin: left center; background: linear-gradient(90deg, rgba(98,165,255,.7), transparent); }
.signal-beam-a { left: 51%; top: 28%; transform: rotate(90deg); }.signal-beam-b { left: 59%; top: 58%; transform: rotate(18deg); }.signal-beam-c { left: 21%; top: 61%; transform: rotate(-14deg); }
@keyframes signal-spin { to { transform: rotate(360deg); } }
.learning-path-header { min-height: 112px; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-block: 1px solid rgba(98,165,255,.25); }
.learning-path-header strong { display: block; margin-top: 9px; color: var(--white); font-size: 19px; letter-spacing: -.02em; }
.learning-path-header > p { margin: 0; display: flex; align-items: center; gap: 11px; color: var(--muted); font: 500 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.learning-path-header > p span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 100px; background: rgba(10,33,68,.35); }
.learning-path-header > p i { color: var(--blue-400); font-style: normal; }
.post-list-large .post-row { min-height: 145px; }
.post-list-large .post-row h2 { margin: 0 0 9px; color: var(--white); font-size: 27px; letter-spacing: -.035em; }
.post-list-large .post-row p { margin: 0; color: var(--muted); font-size: 13px; }
.post-tags { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.post-tags span { color: var(--blue-400); font: 500 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.post-header-tags { margin-top: 28px; }
.post-header-tags span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 100px; color: var(--sky-300); }
.reading-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 80; height: 3px; pointer-events: none; background: rgba(98,165,255,.08); }
.reading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue-600), var(--sky-300)); box-shadow: 0 0 18px rgba(98,165,255,.75); transition: width .08s linear; }
.post-page { padding-block: 65px 140px; }
.back-link { color: var(--sky-300); font: 10px 'DM Mono', monospace; text-transform: uppercase; }
.post-header { max-width: 850px; margin-left: min(280px,22%); padding-block: 100px 76px; }
.post-header h1 { margin: 25px 0; }
.post-subtitle { max-width: 690px; color: #b8cce1; font-size: 20px; line-height: 1.6; }
.post-reading-meta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 9px; }
.post-reading-meta span { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); background: rgba(10,33,68,.35); font: 500 8px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.post-reading-meta strong { color: var(--white); font-size: 10px; }
.post-reading-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 10px var(--blue-400); }
.post-reading-layout { display: grid; grid-template-columns: 210px minmax(0,720px); gap: 70px; justify-content: center; align-items: start; }
.post-map { min-width: 0; }
.post-map-inner { position: sticky; top: 28px; padding: 18px 17px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(13,41,85,.58), rgba(3,16,32,.58)); backdrop-filter: blur(14px); box-shadow: 0 20px 55px rgba(0,0,0,.14); }
.post-map-heading { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; color: var(--blue-400); font: 500 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
.post-map-heading strong { color: var(--sky-300); }
.post-map nav { display: grid; gap: 2px; }
.post-map a { position: relative; padding: 7px 5px 7px 17px; border-radius: 5px; color: var(--muted); font: 500 9px 'DM Mono', monospace; line-height: 1.45; transition: color .2s, background .2s; }
.post-map a::before { content: attr(data-index); position: absolute; left: 5px; top: 8px; color: rgba(98,165,255,.5); font-size: 7px; }
.post-map a:hover, .post-map a.is-active { color: var(--white); background: rgba(36,107,254,.11); }
.post-map a.is-active::before { color: var(--sky-300); }
.post-map-track { height: 3px; margin-top: 16px; overflow: hidden; border-radius: 10px; background: rgba(98,165,255,.13); }
.post-map-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-500), var(--sky-300)); transition: width .08s linear; }
.post-content { min-width: 0; max-width: 720px; color: #d7e4f2; font-size: 18px; line-height: 1.82; counter-reset: article-section; }
.post-content > :first-child { margin-top: 0; }
.post-content h2 { position: relative; margin: 76px 0 25px; padding: 28px 0 0; border-top: 1px solid rgba(98,165,255,.2); color: var(--white); font-size: 30px; letter-spacing: -.04em; counter-increment: article-section; scroll-margin-top: 28px; }
.post-content h2::before { content: '0' counter(article-section) ' /'; display: block; margin-bottom: 11px; color: var(--blue-400); font: 500 9px 'DM Mono', monospace; letter-spacing: .12em; }
.post-content p { margin: 0 0 24px; }
.post-content strong { color: var(--white); }
.post-content a { color: var(--sky-300); border-bottom: 1px solid rgba(142,210,255,.45); transition: color .2s, border-color .2s, text-shadow .2s; }
.post-content a:hover { color: var(--white); border-color: var(--sky-300); text-shadow: 0 0 18px rgba(142,210,255,.3); }
.post-content code { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--navy-900); color: var(--sky-300); font-family: 'DM Mono', monospace; font-size: .85em; }
.post-content blockquote { position: relative; margin: 42px 0; padding: 27px 30px 27px 36px; overflow: hidden; border: 1px solid rgba(98,165,255,.25); border-radius: 10px; background: linear-gradient(120deg, rgba(36,107,254,.13), rgba(10,33,68,.34)); color: var(--white); font-size: 22px; line-height: 1.5; box-shadow: 0 18px 50px rgba(0,0,0,.14); }
.post-content blockquote::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--blue-500), var(--sky-300)); box-shadow: 0 0 18px rgba(98,165,255,.6); }
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content ul, .post-content ol { margin: 25px 0 32px; padding-left: 25px; }
.post-content li { margin: 10px 0; padding-left: 5px; }
.post-content li::marker { color: var(--blue-400); }
.post-table-shell { position: relative; margin: 34px 0 46px; overflow-x: auto; border: 1px solid rgba(98,165,255,.2); border-radius: 11px; background: linear-gradient(145deg, rgba(13,41,85,.42), rgba(3,16,32,.3)); box-shadow: 0 18px 55px rgba(0,0,0,.14); }
.post-table-shell::before { content: 'BENCHMARK / COMPARISON'; position: sticky; left: 0; display: block; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--blue-400); background: rgba(7,26,54,.74); font: 500 8px 'DM Mono', monospace; letter-spacing: .1em; }
.post-content table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; line-height: 1.55; }
.post-content th, .post-content td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.post-content th { color: var(--sky-300); background: rgba(36,107,254,.08); font: 500 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .05em; }
.post-content td { color: #c5d7e9; transition: color .2s, background .2s; }
.post-content tr:last-child td { border-bottom: 0; }
.post-content tbody tr:hover td { color: var(--white); background: rgba(36,107,254,.07); }

/* Animated paper explainers */
.article-visual { max-width: 1180px; margin: 0 auto 94px; border: 1px solid rgba(98,165,255,.25); border-radius: 16px; overflow: hidden; overflow-anchor: none; display: grid; grid-template-columns: minmax(0,1fr) 320px; grid-template-areas: "visual-header visual-header" "visual-canvas visual-inspector" "visual-status visual-inspector" "visual-caption visual-caption"; background: linear-gradient(145deg, rgba(13,41,85,.62), rgba(3,16,32,.88)); box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025); }
.visual-header { grid-area: visual-header; min-height: 74px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--line); }
.visual-header > div { display: grid; gap: 5px; }
.visual-header span, .visual-canvas small, .visual-canvas span, .article-visual figcaption span { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .07em; }
.visual-header > div > span { color: var(--blue-400); font-size: 8px; }
.visual-header strong { color: var(--white); font-size: 16px; letter-spacing: -.02em; }
.visual-mode { min-height: 34px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(98,165,255,.22); border-radius: 100px; color: var(--sky-300); background: rgba(36,107,254,.08); font: 500 8px 'DM Mono', monospace; white-space: nowrap; }
.visual-mode i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-400); box-shadow: 0 0 11px rgba(98,165,255,.7); }
.visual-canvas { grid-area: visual-canvas; min-height: 390px; position: relative; padding: 36px; display: grid; align-items: center; gap: 20px; overflow: hidden; isolation: isolate; background-image: linear-gradient(rgba(98,165,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(98,165,255,.055) 1px, transparent 1px); background-size: 48px 48px; }
.visual-canvas::before { content: ''; position: absolute; z-index: -1; width: 440px; height: 440px; left: 42%; top: 45%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(36,107,254,.2), transparent 67%); filter: blur(3px); animation: visual-glow 4.5s ease-in-out infinite; }
.visual-panel { border: 1px solid rgba(98,165,255,.25); border-radius: 10px; background: rgba(3,16,32,.68); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.visual-panel > small { color: var(--blue-400); font-size: 8px; }
.visual-transfer { display: grid; gap: 8px; justify-items: center; color: var(--muted); }
.visual-transfer span { font-size: 7px; text-align: center; }
.visual-transfer i { color: var(--sky-300); font: 400 25px 'DM Mono', monospace; font-style: normal; animation: visual-flow 1.6s ease-in-out infinite; }
.visual-result { display: grid; align-content: center; gap: 5px; }
.visual-result strong { color: var(--white); font-size: 38px; letter-spacing: -.06em; }
.visual-result > span { color: var(--sky-300); font-size: 8px; }
.visual-result small { max-width: 220px; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.55; text-transform: none; letter-spacing: 0; }
.visual-callout { margin: 0; padding: 12px 15px; border: 1px solid rgba(98,165,255,.2); border-radius: 7px; color: #c8dbef; background: rgba(36,107,254,.08); font: 500 10px 'DM Mono', monospace; line-height: 1.55; }
.article-visual figcaption { grid-area: visual-caption; min-height: 58px; padding: 14px 20px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); color: #9fb6ce; font-size: 11px; line-height: 1.55; }
.article-visual figcaption span { flex: 0 0 auto; color: var(--blue-400); font-size: 7px; }
.article-visual .visual-canvas::before, .article-visual .visual-canvas > *, .article-visual .visual-canvas > * * { animation-play-state: paused !important; }
.visual-canvas > [data-visual-step] { opacity: 1; filter: none; transition: opacity .28s, filter .28s, transform .28s; }
.article-visual.has-selection .visual-canvas > [data-visual-step] { opacity: .34; filter: saturate(.45); }
.article-visual.has-selection .visual-canvas > [data-visual-step].is-related { opacity: 1; filter: none; }
.explainable { position: relative; cursor: pointer; transition: opacity .25s, border-color .25s, background-color .25s, box-shadow .25s, transform .25s; }
.explainable:hover, .explainable:focus-visible { outline: 1px solid rgba(142,210,255,.72); outline-offset: 4px; filter: brightness(1.13); }
.explainable.is-selected { outline: 1px solid var(--sky-300); outline-offset: 4px; border-color: var(--sky-300) !important; color: var(--white) !important; background-color: rgba(36,107,254,.2) !important; box-shadow: 0 0 0 4px rgba(36,107,254,.08), 0 0 30px rgba(36,107,254,.2); }
.explainable.is-explaining { animation: explainer-select 1.15s ease both !important; }
.article-visual .visual-canvas .explainable.is-explaining, .article-visual .visual-canvas .explainable.is-explaining * { animation-play-state: running !important; animation-iteration-count: 1 !important; }
.visual-inspector { grid-area: visual-inspector; min-height: 0; position: relative; padding: 20px; display: grid; grid-template-columns: 1fr; align-content: center; gap: 12px; border-left: 1px solid var(--line); background: linear-gradient(155deg, rgba(36,107,254,.15), rgba(3,16,32,.82)); }
.visual-inspector-main, .visual-inspector-impact { padding: 17px 18px; border: 1px solid rgba(98,165,255,.18); border-radius: 9px; background: rgba(3,16,32,.48); }
.visual-inspector-main > span, .visual-inspector-impact > span { color: var(--blue-400); font: 500 7px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .11em; }
.visual-inspector h3 { margin: 8px 0 9px; color: var(--white); font-size: 20px; line-height: 1.2; letter-spacing: -.03em; }
.visual-inspector p { margin: 0; color: #b8cce0; font-size: 12px; line-height: 1.65; }
.visual-inspector-impact { display: grid; align-content: start; gap: 10px; border-color: rgba(142,210,255,.22); background: rgba(36,107,254,.08); }
.visual-inspector-impact p { color: #d2e2f2; }
.visual-inspector.is-updating .visual-inspector-main, .visual-inspector.is-updating .visual-inspector-impact { animation: inspector-reveal .42s ease both; }
.visual-inspector.is-updating .visual-inspector-impact { animation-delay: .08s; }
.visual-inspector-close { display: none; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(142,210,255,.28); border-radius: 50%; background: rgba(3,16,32,.7); color: var(--sky-300); font: 400 20px/1 'DM Mono', monospace; cursor: pointer; }
.visual-status { grid-area: visual-status; min-height: 42px; padding: 9px 15px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); background: rgba(36,107,254,.055); color: #afc4da; font: 500 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .055em; }
.visual-status > span::before { content: ''; width: 6px; height: 6px; margin-right: 8px; display: inline-block; border-radius: 50%; background: var(--blue-400); box-shadow: 0 0 10px rgba(98,165,255,.55); }
.visual-status a { flex: 0 0 auto; color: var(--sky-300); border-bottom: 1px solid rgba(142,210,255,.34); }

/* Quantization field guide */
.visual-quant-map .visual-canvas { grid-template-columns: 1fr 80px 1fr .75fr; }
.quant-spectrum, .quant-grid { min-height: 210px; padding: 19px; display: grid; align-content: space-between; }
.quant-spectrum b, .quant-grid b { color: var(--muted); font: 500 8px 'DM Mono', monospace; }
.spectrum-bars { height: 120px; display: flex; align-items: end; justify-content: space-between; gap: 6px; }
.spectrum-bars i { width: 12%; height: var(--h,40%); border-radius: 3px 3px 0 0; background: linear-gradient(var(--sky-300), var(--blue-600)); animation: visual-bars 2.4s ease-in-out infinite alternate; }
.spectrum-bars i:nth-child(1),.spectrum-bars i:nth-child(7){--h:25%}.spectrum-bars i:nth-child(2),.spectrum-bars i:nth-child(6){--h:48%;animation-delay:.12s}.spectrum-bars i:nth-child(3),.spectrum-bars i:nth-child(5){--h:75%;animation-delay:.24s}.spectrum-bars i:nth-child(4){--h:100%;animation-delay:.36s}
.grid-cells { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.grid-cells i { aspect-ratio: 1; border: 1px solid rgba(98,165,255,.25); border-radius: 3px; background: rgba(36,107,254,.08); animation: cell-code 2.2s steps(1) infinite; }
.grid-cells i:nth-child(2n){animation-delay:.4s}.grid-cells i:nth-child(3n){animation-delay:.8s}

/* Attention */
.visual-attention .visual-canvas { grid-template-columns: .7fr .8fr 1.25fr 80px .7fr; }
.token-stream, .qkv-stack { display: grid; gap: 10px; }
.token-stream i { padding: 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--white); background: rgba(13,41,85,.62); font: 500 11px 'DM Mono', monospace; text-align: center; animation: token-pulse 2.4s infinite; }
.token-stream i:nth-child(2){animation-delay:.2s}.token-stream i:nth-child(3){animation-delay:.4s}.token-stream i:nth-child(4){animation-delay:.6s}
.qkv-stack span { min-height: 54px; padding: 9px; display: grid; place-content: center; border: 1px solid rgba(98,165,255,.28); border-radius: 7px; color: var(--white); background: rgba(36,107,254,.12); font-size: 17px; text-align: center; }
.qkv-stack small { display: block; margin-top: 3px; color: var(--muted); font-size: 6px; }
.attention-matrix { padding: 17px; }
.matrix-cells { margin-top: 15px; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.matrix-cells i { aspect-ratio: 1; border-radius: 2px; background: rgba(98,165,255,.08); animation: matrix-scan 2s infinite; }
.matrix-cells i:nth-child(4n+1){animation-delay:.1s}.matrix-cells i:nth-child(4n+2){animation-delay:.25s}.matrix-cells i:nth-child(4n+3){animation-delay:.4s}.matrix-cells i:nth-child(4n){animation-delay:.55s}
.context-token { width: 110px; aspect-ratio: 1; display: grid; place-content: center; justify-self: center; border: 1px solid var(--blue-400); border-radius: 50%; color: var(--white); background: radial-gradient(circle,rgba(36,107,254,.3),rgba(7,26,54,.8)); text-align: center; box-shadow: 0 0 30px rgba(36,107,254,.25); animation: visual-breathe 2.8s infinite; }
.context-token b { font: 500 24px 'DM Mono', monospace; }.context-token small { margin-top: 5px; color: var(--muted); font-size: 6px; }

/* INT8 */
.visual-int8 .visual-canvas { grid-template-columns: 1.4fr 80px .8fr .7fr; }
.range-chart { min-height: 230px; padding: 20px; position: relative; }
.range-bars { height: 165px; margin-top: 15px; display: flex; gap: 3px; align-items: end; }
.range-bars i { flex: 1; height: var(--h,30%); background: linear-gradient(var(--sky-300),rgba(36,107,254,.22)); border-radius: 2px 2px 0 0; animation: visual-bars 2s ease-in-out infinite alternate; }
.range-bars i:nth-child(1),.range-bars i:nth-child(15){--h:4%}.range-bars i:nth-child(2),.range-bars i:nth-child(14){--h:8%}.range-bars i:nth-child(3),.range-bars i:nth-child(13){--h:15%}.range-bars i:nth-child(4),.range-bars i:nth-child(12){--h:29%}.range-bars i:nth-child(5),.range-bars i:nth-child(11){--h:49%}.range-bars i:nth-child(6),.range-bars i:nth-child(10){--h:73%}.range-bars i:nth-child(7),.range-bars i:nth-child(9){--h:91%}.range-bars i:nth-child(8){--h:100%}
.clip-line { position: absolute; top: 53px; bottom: 20px; width: 1px; color: #ff98a4; background: rgba(255,112,130,.65); font-size: 6px; writing-mode: vertical-lr; }.clip-left{left:18%}.clip-right{right:18%}
.int8-ladder { padding: 17px; display: grid; gap: 5px; }
.int8-ladder i { height: 18px; border-radius: 3px; background: linear-gradient(90deg,rgba(36,107,254,.1),rgba(98,165,255,var(--a,.2))); animation: ladder-light 2s infinite; }
.int8-ladder i:nth-child(2n){animation-delay:.25s}.int8-ladder b{padding-left:6px;color:#cce7ff;font:500 7px 'DM Mono',monospace}

/* SmoothQuant */
.visual-smoothquant .visual-canvas { min-height: 520px; grid-template-columns: 1fr .86fr 1fr; grid-template-rows: 1fr auto auto; }
.sq-stage { min-height: 245px; padding: 18px; display: grid; align-content: space-between; gap: 12px; }
.sq-stage header { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; }
.sq-stage header small { color: var(--blue-400); font-size: 7px; }
.sq-stage header strong { color: var(--white); font: 600 12px 'DM Mono', monospace; letter-spacing: .03em; }
.sq-stage header em { grid-column: 2; grid-row: 1 / 3; padding: 5px 7px; border-radius: 4px; font: 600 7px 'DM Mono', monospace; font-style: normal; letter-spacing: .08em; }
.sq-before header em { color: #ff9aa8; border: 1px solid rgba(255,112,130,.35); background: rgba(255,112,130,.08); }
.sq-after header em { color: #72dcad; border: 1px solid rgba(114,220,173,.35); background: rgba(114,220,173,.08); }
.sq-stage p { margin: 0; color: #91a9c1; font: 500 8px/1.5 'DM Mono', monospace; }
.sq-chart { height: 132px; padding: 0 5px; display: flex; align-items: end; gap: 7px; border-bottom: 1px solid rgba(98,165,255,.2); background: repeating-linear-gradient(0deg, rgba(98,165,255,.055) 0 1px, transparent 1px 32px); }
.sq-chart i { flex: 1; height: var(--easy,40%); min-width: 7px; border-radius: 3px 3px 0 0; background: linear-gradient(var(--sky-300), var(--blue-600)); box-shadow: 0 0 12px rgba(36,107,254,.12); }
.sq-before-bars i:nth-child(1){height:24%}.sq-before-bars i:nth-child(2){height:100%;background:linear-gradient(#ff9aa8,#dc4962);box-shadow:0 0 18px rgba(255,112,130,.28)}.sq-before-bars i:nth-child(3){height:29%}.sq-before-bars i:nth-child(4){height:21%}.sq-before-bars i:nth-child(5){height:35%}.sq-before-bars i:nth-child(6){height:19%}.sq-before-bars i:nth-child(7){height:27%}.sq-before-bars i:nth-child(8){height:23%}
.sq-after-bars i:nth-child(1){--hard:24%;--easy:47%}.sq-after-bars i:nth-child(2){--hard:100%;--easy:56%}.sq-after-bars i:nth-child(3){--hard:29%;--easy:51%}.sq-after-bars i:nth-child(4){--hard:21%;--easy:44%}.sq-after-bars i:nth-child(5){--hard:35%;--easy:57%}.sq-after-bars i:nth-child(6){--hard:19%;--easy:48%}.sq-after-bars i:nth-child(7){--hard:27%;--easy:53%}.sq-after-bars i:nth-child(8){--hard:23%;--easy:46%}
.sq-before.is-explaining .sq-before-bars i:nth-child(2) { animation: sq-outlier 1.25s ease both; }
.sq-after.is-explaining .sq-after-bars i { animation: sq-hard-to-easy 1.8s cubic-bezier(.22,.8,.3,1) both; }
.sq-transform { min-height: 245px; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); text-align: center; }
.sq-transform > small { color: var(--blue-400); font-size: 7px; }
.sq-transform > strong { color: var(--white); font: 500 10px 'DM Mono', monospace; }
.sq-transform code { padding: 7px 9px; border: 1px solid rgba(98,165,255,.2); border-radius: 5px; color: var(--sky-300); background: rgba(3,16,32,.58); font: 500 7px 'DM Mono', monospace; }
.sq-transfer-track { width: 100%; height: 34px; position: relative; display: grid; place-items: center; }
.sq-transfer-track::before { content: ''; position: absolute; left: 8px; right: 8px; top: 16px; height: 1px; background: linear-gradient(90deg, rgba(255,112,130,.65), var(--sky-300), rgba(114,220,173,.65)); }
.sq-transfer-track::after { content: '→'; position: absolute; right: 1px; top: 6px; color: #72dcad; font: 500 16px 'DM Mono', monospace; }
.sq-transfer-track i { width: 10px; height: 10px; position: absolute; left: 8px; top: 11px; z-index: 2; border-radius: 50%; background: #ff8ea0; box-shadow: 0 0 16px rgba(255,112,130,.55); }
.sq-transfer-track span { position: relative; z-index: 1; padding: 2px 6px; color: #bdd5ed; background: #071a36; font-size: 6px; }
.sq-transform.is-explaining .sq-transfer-track i { animation: sq-transfer 1.6s cubic-bezier(.22,.8,.3,1) both; }
.sq-weight-path { grid-column: 1 / -1; min-height: 125px; padding: 15px 18px; display: grid; grid-template-columns: 1fr 110px 1fr; align-items: center; gap: 15px; }
.sq-weight-path > div { display: grid; grid-template-columns: auto auto; gap: 8px; align-items: center; }
.sq-weight-path small { color: var(--blue-400); font-size: 7px; }
.sq-weight-path b { color: #72dcad; font: 600 7px 'DM Mono', monospace; letter-spacing: .07em; text-align: right; }
.sq-weight-path > span { color: var(--sky-300); font-size: 7px; text-align: center; }
.sq-weight-bars { grid-column: 1 / -1; height: 54px; display: flex; align-items: end; gap: 6px; border-bottom: 1px solid rgba(98,165,255,.18); }
.sq-weight-bars i { flex: 1; height: var(--to,40%); border-radius: 2px 2px 0 0; background: linear-gradient(rgba(142,210,255,.82), rgba(36,107,254,.4)); }
.sq-weight-before i:nth-child(1),.sq-weight-after i:nth-child(1){--from:35%;--to:38%}.sq-weight-before i:nth-child(2),.sq-weight-after i:nth-child(2){--from:42%;--to:72%}.sq-weight-before i:nth-child(3),.sq-weight-after i:nth-child(3){--from:38%;--to:40%}.sq-weight-before i:nth-child(4),.sq-weight-after i:nth-child(4){--from:40%;--to:48%}.sq-weight-before i:nth-child(5),.sq-weight-after i:nth-child(5){--from:45%;--to:55%}.sq-weight-before i:nth-child(6),.sq-weight-after i:nth-child(6){--from:37%;--to:42%}.sq-weight-before i:nth-child(7),.sq-weight-after i:nth-child(7){--from:41%;--to:50%}.sq-weight-before i:nth-child(8),.sq-weight-after i:nth-child(8){--from:39%;--to:45%}
.sq-weight-before i { height: var(--from); }
.sq-weight-path.is-explaining .sq-weight-after i { animation: sq-weight-absorb 1.8s cubic-bezier(.22,.8,.3,1) both; }
.sq-equivalence { grid-column: 1 / -1; justify-self: center; padding: 11px 16px; display: flex; align-items: center; gap: 17px; border: 1px solid rgba(98,165,255,.25); border-radius: 100px; color: var(--white); background: rgba(3,16,32,.72); font: 500 10px 'DM Mono', monospace; }
.sq-equivalence strong { color: #72dcad; font-size: 8px; text-transform: uppercase; }
.sq-equivalence small { color: var(--muted); font-size: 7px; }

/* GPTQ */
.visual-gptq .visual-canvas { min-height: 590px; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 16px; padding: 26px; }
.gptq-objective { min-height: 68px; padding: 13px 16px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; }
.gptq-objective small, .gptq-hessian small, .gptq-weight-matrix small, .gptq-algorithm small { color: var(--blue-400); font-size: 7px; }
.gptq-objective strong { color: var(--white); font: 500 15px 'DM Mono', monospace; letter-spacing: -.03em; }
.gptq-objective > span { padding: 6px 8px; border: 1px solid rgba(98,165,255,.2); border-radius: 5px; color: var(--sky-300); background: rgba(36,107,254,.07); font-size: 7px; }
.gptq-procedure { min-height: 290px; display: grid; grid-template-columns: .72fr 44px 1.35fr; align-items: stretch; gap: 12px; }
.gptq-hessian, .gptq-weight-matrix { padding: 15px; display: grid; align-content: space-between; gap: 10px; }
.gptq-hessian header, .gptq-weight-matrix header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gptq-hessian header strong, .gptq-weight-matrix header strong { color: #c9dbed; font: 500 7px 'DM Mono', monospace; letter-spacing: .055em; }
.gptq-cholesky { height: 165px; padding: 8px; overflow: hidden; display: grid; align-content: center; gap: 3px; border: 1px solid rgba(98,165,255,.15); border-radius: 6px; background: linear-gradient(135deg,rgba(154,164,176,.25),rgba(98,165,255,.07)); }
.gptq-cholesky i { height: 13px; display: block; margin-left: var(--x,0); width: var(--w,100%); border: 1px solid rgba(184,198,214,.25); border-radius: 2px; background: rgba(154,164,176,.32); }
.gptq-cholesky i:nth-child(2){--x:9%;--w:91%}.gptq-cholesky i:nth-child(3){--x:18%;--w:82%}.gptq-cholesky i:nth-child(4){--x:27%;--w:73%}.gptq-cholesky i:nth-child(5){--x:36%;--w:64%;background:rgba(98,165,255,.46);border-color:var(--sky-300)}.gptq-cholesky i:nth-child(6){--x:45%;--w:55%;background:rgba(98,165,255,.34)}.gptq-cholesky i:nth-child(7){--x:54%;--w:46%;background:rgba(98,165,255,.26)}.gptq-cholesky i:nth-child(8){--x:63%;--w:37%;background:rgba(98,165,255,.2)}
.gptq-hessian code { justify-self: center; padding: 5px 7px; color: var(--white); background: rgba(3,16,32,.52); font: 500 8px 'DM Mono', monospace; }
.gptq-hessian > span { color: var(--muted); font-size: 6px; text-align: center; }
.gptq-coupling { display: grid; place-content: center; justify-items: center; gap: 5px; color: var(--muted); }
.gptq-coupling span { font-size: 6px; }
.gptq-coupling i { color: var(--sky-300); font: 500 21px 'DM Mono', monospace; font-style: normal; }
.gptq-matrix-track { height: 178px; display: grid; grid-template-columns: 2fr 3fr 3fr; align-items: stretch; gap: 4px; }
.gptq-done, .gptq-active-block, .gptq-remaining { min-width: 0; position: relative; display: grid; gap: 3px; }
.gptq-done { grid-template-columns: repeat(2,1fr); }
.gptq-active-block { padding: 3px; grid-template-columns: repeat(3,1fr); border: 2px solid rgba(247,251,255,.8); border-radius: 5px; box-shadow: 0 0 0 2px rgba(98,165,255,.07); }
.gptq-remaining { grid-template-columns: repeat(3,1fr); }
.gptq-col { min-width: 0; display: grid; grid-template-rows: repeat(5,1fr); gap: 3px; }
.gptq-col i { min-height: 0; border: 1px solid rgba(98,165,255,.18); border-radius: 2px; background: rgba(98,165,255,.13); }
.gptq-done .gptq-col:first-child i { border-color: rgba(255,206,153,.24); background: rgba(255,206,153,.24); }
.gptq-done .gptq-col:last-child i, .gptq-block-done i { border-color: rgba(255,153,61,.48); background: rgba(255,153,61,.72); }
.gptq-current-col i { border-color: rgba(247,251,255,.82); background: rgba(247,251,255,.9); box-shadow: 0 0 10px rgba(255,255,255,.12); }
.gptq-block-pending i { border-color: rgba(128,118,255,.48); background: rgba(101,91,244,.68); }
.gptq-remaining .gptq-col:nth-child(1) i { background: rgba(78,99,236,.72); }
.gptq-remaining .gptq-col:nth-child(2) i { background: rgba(98,103,224,.58); }
.gptq-remaining .gptq-col:nth-child(3) i { background: rgba(128,127,226,.48); }
.gptq-local-flow, .gptq-global-flow { height: 3px; position: absolute; left: 8px; right: 8px; bottom: -8px; display: block; border-radius: 10px; background: linear-gradient(90deg,rgba(255,153,61,.3),rgba(142,210,255,.52)); }
.gptq-local-flow i, .gptq-global-flow i { width: 7px; height: 7px; position: absolute; left: 0; top: -2px; border-radius: 50%; background: var(--sky-300); box-shadow: 0 0 10px rgba(142,210,255,.7); }
.gptq-global-flow { background: linear-gradient(90deg,rgba(142,210,255,.5),rgba(114,220,173,.34)); }
.gptq-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font: 500 6px 'DM Mono', monospace; text-transform: uppercase; }
.gptq-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gptq-legend i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255,153,61,.72); }
.gptq-legend i.current { background: rgba(247,251,255,.9); }.gptq-legend i.remaining { background: rgba(78,99,236,.72); }
.gptq-algorithm { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.gptq-algorithm > div { min-height: 92px; padding: 12px; display: grid; align-content: start; gap: 6px; border: 1px solid rgba(98,165,255,.18); border-radius: 7px; background: rgba(3,16,32,.6); }
.gptq-algorithm strong { color: var(--white); font: 500 8px 'DM Mono', monospace; overflow-wrap: anywhere; }
.gptq-algorithm span { color: var(--muted); font: 500 7px/1.45 'DM Mono', monospace; text-transform: none; letter-spacing: 0; }
.gptq-hessian.is-explaining .gptq-active-hessian { animation: gptq-hessian-read 1.5s ease both; }
.gptq-current-col.is-explaining i { animation: gptq-quantize-column 1.6s ease both; }
.gptq-active-block.is-explaining .gptq-local-flow i { animation: gptq-update-flow 1.5s ease both; }
.gptq-active-block.is-explaining .gptq-block-pending i { animation: gptq-compensate-cell 1.5s ease both; }
.gptq-remaining.is-explaining .gptq-global-flow i { animation: gptq-update-flow 1.7s ease both; }
.gptq-remaining.is-explaining .gptq-col i { animation: gptq-global-cell 1.7s ease both; }

/* AWQ */
.visual-awq .visual-canvas { min-height: 650px; grid-template-columns: .82fr 1.18fr; align-content: start; }
.awq-paper-flow { grid-column: 1 / -1; display: grid; grid-template-columns: .82fr 56px 1.18fr; align-items: stretch; }
.awq-activation-stats, .awq-salient-map, .awq-alpha-search, .awq-scale-transform { min-width: 0; padding: 16px; }
.awq-activation-stats header, .awq-salient-map header, .awq-alpha-search header, .awq-scale-transform header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.awq-activation-stats header strong, .awq-salient-map header strong, .awq-alpha-search header strong, .awq-scale-transform header strong { color: var(--white); font: 500 10px 'DM Mono', monospace; }
.awq-activation-stats p, .awq-salient-map p, .awq-alpha-search p { margin: 11px 0 0; color: var(--muted); font: 500 7px/1.5 'DM Mono', monospace; }
.awq-activation-bars { height: 125px; margin-top: 12px; display: flex; align-items: end; gap: 6px; }
.awq-activation-bars span { flex: 1; height: 100%; display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 5px; }
.awq-activation-bars i { width: 100%; height: var(--h,32%); display: block; border: 1px solid rgba(98,165,255,.28); border-radius: 4px 4px 2px 2px; background: linear-gradient(rgba(98,165,255,.45),rgba(36,107,254,.42)); transform-origin: bottom; }
.awq-activation-bars b { color: #7894b2; font: 500 6px 'DM Mono', monospace; text-align: center; }
.awq-activation-bars span:nth-child(1) i{--h:25%}.awq-activation-bars span:nth-child(2) i{--h:42%}.awq-activation-bars span:nth-child(3) i{--h:94%}.awq-activation-bars span:nth-child(4) i{--h:38%}.awq-activation-bars span:nth-child(5) i{--h:21%}.awq-activation-bars span:nth-child(6) i{--h:34%}.awq-activation-bars span:nth-child(7) i{--h:73%}.awq-activation-bars span:nth-child(8) i{--h:29%}
.awq-activation-bars span:nth-child(3) i, .awq-activation-bars span:nth-child(7) i { border-color: #ff8798; background: linear-gradient(#ff9aaa,#c9455d); box-shadow: 0 0 18px rgba(255,112,130,.22); }
.awq-activation-bars span:nth-child(3) b, .awq-activation-bars span:nth-child(7) b { color: #ffacb8; }
.awq-channel-link { display: grid; place-content: center; justify-items: center; gap: 5px; }
.awq-channel-link span { color: var(--muted); font-size: 6px; text-align: center; }
.awq-channel-link i { color: var(--sky-300); font: 500 20px 'DM Mono', monospace; font-style: normal; }
.awq-weight-columns { height: 125px; margin-top: 12px; display: grid; grid-template-columns: repeat(8,1fr); gap: 5px; }
.awq-weight-columns > span { min-width: 0; display: grid; grid-template-rows: repeat(4,1fr) auto; gap: 3px; }
.awq-weight-columns i { min-height: 0; border: 1px solid rgba(98,165,255,.18); border-radius: 2px; background: rgba(98,165,255,.13); }
.awq-weight-columns b { color: #7894b2; font: 500 6px 'DM Mono', monospace; text-align: center; }
.awq-weight-columns > span:nth-child(3) i, .awq-weight-columns > span:nth-child(7) i { border-color: rgba(255,135,152,.56); background: rgba(255,112,130,.38); }
.awq-weight-columns > span:nth-child(3) b, .awq-weight-columns > span:nth-child(7) b, .awq-salient-map p b { color: #ffacb8; }
.awq-alpha-search { min-height: 235px; }
.awq-search-plot { height: 104px; margin: 12px 7px 8px 0; position: relative; border-left: 1px solid rgba(98,165,255,.18); border-bottom: 1px solid rgba(98,165,255,.18); background-image: linear-gradient(rgba(98,165,255,.045) 1px,transparent 1px); background-size: 100% 25%; }
.awq-search-plot::before { content: 'output error ↓'; position: absolute; left: -3px; top: 0; color: #7894b2; font: 500 5px 'DM Mono', monospace; writing-mode: vertical-rl; transform: rotate(180deg); }
.awq-search-plot > span { position: absolute; left: var(--x); bottom: var(--y); transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
.awq-search-plot > span:first-child { transform: translateX(0); }.awq-search-plot > span:last-of-type { transform: translateX(-100%); }
.awq-search-plot i { width: 8px; height: 8px; display: block; border: 1px solid var(--blue-400); border-radius: 50%; background: var(--navy-900); }
.awq-search-plot b { color: #7894b2; font: 500 6px 'DM Mono', monospace; }
.awq-search-plot .is-optimal i { width: 12px; height: 12px; border-color: #72dcad; background: #72dcad; box-shadow: 0 0 15px rgba(114,220,173,.45); }
.awq-search-plot .is-optimal b { color: #9aebc8; }
.awq-search-plot em { position: absolute; left: 2%; right: 2%; top: 28%; height: 48%; border: solid rgba(98,165,255,.42); border-width: 0 0 2px; border-radius: 0 0 50% 50%; transform: rotate(-1deg); }
.awq-alpha-search code { display: block; padding: 8px; overflow-wrap: anywhere; border: 1px solid rgba(98,165,255,.14); border-radius: 5px; color: var(--sky-300); background: rgba(36,107,254,.07); font: 500 7px/1.45 'DM Mono', monospace; }
.awq-scale-transform { min-height: 235px; display: grid; align-content: start; }
.awq-transform-equation { margin-top: 18px; display: grid; grid-template-columns: 1fr auto 1fr auto 1.05fr; align-items: stretch; gap: 8px; }
.awq-transform-equation > i { align-self: center; color: var(--sky-300); font: 500 13px 'DM Mono', monospace; font-style: normal; }
.awq-transform-side, .awq-invariant { min-width: 0; min-height: 100px; padding: 10px 8px; display: grid; place-content: center; gap: 5px; border: 1px solid rgba(98,165,255,.2); border-radius: 7px; background: rgba(36,107,254,.07); text-align: center; }
.awq-transform-side > span, .awq-invariant > span { color: var(--blue-400); font-size: 8px; }
.awq-transform-side b, .awq-invariant b { color: var(--white); font: 500 8px/1.35 'DM Mono', monospace; }
.awq-transform-side small, .awq-invariant small { color: var(--muted); font-size: 6px; line-height: 1.35; }
.awq-weight-scale { border-top-color: #ff8798; }.awq-activation-scale { border-top-color: var(--sky-300); }.awq-invariant { border-top-color: #72dcad; background: rgba(114,220,173,.055); }
.awq-error-ratio { margin-top: 12px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(98,165,255,.14); border-radius: 6px; background: rgba(3,16,32,.5); }
.awq-error-ratio span, .awq-error-ratio i { color: var(--muted); font-size: 6px; font-style: normal; }.awq-error-ratio strong { color: #9aebc8; font: 500 10px 'DM Mono', monospace; }
.awq-uniform-output { grid-column: 1 / -1; min-height: 76px; padding: 13px 16px; display: grid; grid-template-columns: 210px 1fr auto; align-items: center; gap: 18px; border: 1px solid rgba(98,165,255,.28); border-radius: 10px; background: linear-gradient(90deg,rgba(36,107,254,.14),rgba(3,16,32,.62)); }
.awq-packed-grid { display: grid; grid-template-columns: repeat(8,1fr); gap: 3px; }
.awq-packed-grid i { aspect-ratio: 1; border: 1px solid rgba(142,210,255,.3); border-radius: 2px; background: rgba(36,107,254,.46); }
.awq-uniform-output > div:nth-child(2) { display: grid; gap: 4px; }.awq-uniform-output small { color: var(--blue-400); font-size: 7px; }.awq-uniform-output strong { color: var(--white); font: 600 16px 'Manrope',sans-serif; }.awq-uniform-output span { color: var(--sky-300); font-size: 7px; }
.awq-uniform-output > b { padding: 8px 10px; border: 1px solid rgba(114,220,173,.3); border-radius: 100px; color: #9aebc8; font: 500 7px 'DM Mono', monospace; text-transform: uppercase; white-space: nowrap; }
.awq-activation-stats.is-explaining .awq-activation-bars span:nth-child(3) i, .awq-activation-stats.is-explaining .awq-activation-bars span:nth-child(7) i { animation: awq-activation-read 1.5s ease both; }
.awq-channel-link.is-explaining i { animation: awq-channel-trace 1.25s ease both; }
.awq-salient-map.is-explaining .awq-weight-columns > span:nth-child(3) i, .awq-salient-map.is-explaining .awq-weight-columns > span:nth-child(7) i { animation: awq-column-map 1.45s ease both; }
.awq-alpha-search.is-explaining .awq-search-plot .is-optimal i { animation: awq-search-select 1.6s ease both; }
.awq-scale-transform.is-explaining .awq-weight-scale { animation: awq-weight-grow 1.5s ease both; }.awq-scale-transform.is-explaining .awq-activation-scale { animation: awq-activation-shrink 1.5s ease both; }.awq-scale-transform.is-explaining .awq-invariant { animation: awq-invariant-check 1.5s ease both; }
.awq-uniform-output.is-explaining .awq-packed-grid i { animation: awq-pack-weight 1.45s steps(1) both; }.awq-uniform-output.is-explaining .awq-packed-grid i:nth-child(3n) { animation-delay: .1s; }.awq-uniform-output.is-explaining .awq-packed-grid i:nth-child(4n) { animation-delay: .2s; }

/* LUT-GEMM */
.visual-lut .visual-canvas { grid-template-columns: .8fr 75px 1.2fr 75px .85fr; }
.bit-packets{padding:18px;display:grid;gap:8px}.bit-packets span{padding:8px;border:1px solid var(--line);border-radius:4px;color:var(--sky-300);background:rgba(36,107,254,.08);font-size:12px;text-align:center;animation:packet-shift 2.4s infinite}.bit-packets span:nth-of-type(2){animation-delay:.2s}.bit-packets span:nth-of-type(3){animation-delay:.4s}.bit-packets span:nth-of-type(4){animation-delay:.6s}
.lookup-table{padding:17px;display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.lookup-table>small{grid-column:1/-1}.lookup-table i{padding:7px;display:flex;justify-content:space-between;border:1px solid var(--line);border-radius:3px;font-style:normal}.lookup-table i span{color:var(--muted);font-size:7px}.lookup-table i b{color:var(--white);font:500 8px 'DM Mono',monospace}.lookup-table i:nth-of-type(3n){animation:cell-code 2s infinite}
.lut-output{padding:24px 15px;border:1px solid var(--blue-400);border-radius:10px;background:rgba(36,107,254,.14);text-align:center;box-shadow:0 0 35px rgba(36,107,254,.13)}.lut-output b{display:block;color:var(--white);font:500 16px 'DM Mono',monospace}.lut-output span{display:block;margin-top:9px;color:var(--sky-300);font-size:7px}

/* Rotation methods */
.visual-spin .visual-canvas { grid-template-columns: 1fr .42fr 1fr; grid-template-rows:1fr auto; }
.rotation-space{height:260px;position:relative;overflow:hidden}.rotation-space>small{position:absolute;top:15px;left:16px;z-index:2}.axis-x,.axis-y{position:absolute;background:rgba(98,165,255,.22)}.axis-x{left:10%;right:10%;height:1px;top:52%}.axis-y{top:15%;bottom:10%;width:1px;left:50%}.rotation-space i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sky-300);box-shadow:0 0 11px rgba(98,165,255,.6);animation:point-float 2.8s ease-in-out infinite}.before i:nth-of-type(1){left:15%;top:20%}.before i:nth-of-type(2){left:23%;top:29%}.before i:nth-of-type(3){left:30%;top:35%}.before i:nth-of-type(4){left:37%;top:43%}.before i:nth-of-type(5){left:45%;top:50%}.before i:nth-of-type(6){left:53%;top:56%}.before i:nth-of-type(7){left:61%;top:63%}.before i:nth-of-type(8){left:69%;top:69%}.before i:nth-of-type(9){left:77%;top:76%}.before i:nth-of-type(10){left:87%;top:10%}.before i:nth-of-type(11){left:8%;top:85%}.before i:nth-of-type(12){left:92%;top:48%}
.after i:nth-of-type(1){left:27%;top:31%}.after i:nth-of-type(2){left:39%;top:26%}.after i:nth-of-type(3){left:51%;top:34%}.after i:nth-of-type(4){left:65%;top:29%}.after i:nth-of-type(5){left:31%;top:48%}.after i:nth-of-type(6){left:46%;top:47%}.after i:nth-of-type(7){left:60%;top:50%}.after i:nth-of-type(8){left:72%;top:46%}.after i:nth-of-type(9){left:28%;top:67%}.after i:nth-of-type(10){left:42%;top:70%}.after i:nth-of-type(11){left:58%;top:66%}.after i:nth-of-type(12){left:69%;top:71%}
.rotation-operator{display:grid;place-content:center;text-align:center}.rotation-operator span{width:64px;height:64px;display:grid;place-content:center;border:1px solid var(--blue-400);border-radius:50%;color:var(--white);font-size:17px;background:rgba(36,107,254,.18)}.rotation-operator i{color:var(--sky-300);font-size:24px;font-style:normal;animation:visual-rotate 3s linear infinite}.rotation-operator small{color:var(--muted);font-size:6px}.visual-spin .visual-callout{grid-column:1/-1;text-align:center}
.visual-paro .visual-canvas{grid-template-columns:.8fr 1fr 1.15fr .8fr}.pair-bank{padding:17px;display:grid;gap:7px}.pair-bank span{padding:8px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:8px;text-align:center}.pair-rotations{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pair-rotations i{aspect-ratio:1;display:grid;place-content:center;border:1px solid rgba(98,165,255,.28);border-radius:50%;color:var(--sky-300);background:rgba(36,107,254,.1);font:500 9px 'DM Mono',monospace;font-style:normal;animation:visual-rotate 5s linear infinite}.pair-rotations i:nth-child(even){animation-direction:reverse}
.int4-lanes{padding:18px;display:grid;gap:8px}.int4-lanes span{height:26px;border-radius:4px;background:linear-gradient(90deg,var(--blue-600) 0 25%,rgba(98,165,255,.7) 25% 50%,rgba(36,107,254,.42) 50% 75%,rgba(98,165,255,.2) 75%);background-size:200% 100%;animation:lane-flow 2.4s linear infinite}.int4-lanes span:nth-of-type(2){animation-delay:.2s}.int4-lanes span:nth-of-type(3){animation-delay:.4s}.int4-lanes span:nth-of-type(4){animation-delay:.6s}

/* VLA and debugging */
.visual-vla .visual-canvas{grid-template-rows:1fr auto auto}.vla-pipeline{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr;align-items:center}.vla-pipeline>div{min-height:170px;padding:16px;display:grid;place-content:center;justify-items:center;border:1px solid rgba(98,165,255,.24);border-radius:10px;background:rgba(3,16,32,.66);animation:token-pulse 3s infinite}.vla-pipeline>div:nth-of-type(2){animation-delay:.35s}.vla-pipeline>div:nth-of-type(3){animation-delay:.7s}.vla-pipeline>div:nth-of-type(4){animation-delay:1.05s}.vla-pipeline>b{color:var(--sky-300);font:400 20px 'DM Mono',monospace;text-align:center;animation:visual-flow 1.5s infinite}.vla-pipeline span{margin-top:13px;color:var(--white);font-size:8px}.vla-pipeline small{margin-top:4px;color:var(--muted);font-size:6px}.camera-eye{width:55px;height:38px;border:1px solid var(--blue-400);border-radius:7px;position:relative}.camera-eye::after{content:'';position:absolute;width:16px;height:16px;left:18px;top:10px;border:1px solid var(--sky-300);border-radius:50%;box-shadow:0 0 14px rgba(98,165,255,.5)}.vision-grid{width:54px;height:54px;background-image:linear-gradient(rgba(98,165,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(98,165,255,.45) 1px,transparent 1px);background-size:13px 13px}.language-lines{width:58px;height:45px;background:repeating-linear-gradient(0deg,var(--blue-400) 0 2px,transparent 2px 11px)}.action-pulse{width:60px;height:40px;background:linear-gradient(135deg,transparent 0 18%,var(--sky-300) 19% 22%,transparent 23% 39%,var(--blue-500) 40% 44%,transparent 45% 61%,var(--sky-300) 62% 66%,transparent 67%)}
.bottleneck-meter{padding:16px 19px;display:grid;grid-template-columns:auto repeat(3,1fr);gap:16px;align-items:end}.bottleneck-meter>small{align-self:center}.bottleneck-meter span{display:grid;gap:6px}.bottleneck-meter i{color:var(--muted);font:500 6px 'DM Mono',monospace;font-style:normal}.bottleneck-meter b{height:5px;border-radius:8px;background:linear-gradient(90deg,var(--blue-500) var(--meter),rgba(98,165,255,.12) var(--meter));animation:meter-pulse 3s infinite}.visual-vla .visual-callout{text-align:center}
.visual-debug .visual-canvas{grid-template-columns:.85fr .75fr 1fr 1.1fr}.debug-graph{padding:20px;display:grid;gap:10px}.debug-graph strong{color:var(--white);font-size:20px}.debug-graph span{color:#72dcad;font-size:7px}.debug-branches,.debug-probes{display:grid;gap:7px}.debug-branches i,.debug-probes span{padding:10px;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:rgba(3,16,32,.58);font:500 8px 'DM Mono',monospace;text-align:center;font-style:normal;animation:debug-select 4s infinite}.debug-branches i:nth-child(2),.debug-probes span:nth-child(2){animation-delay:1s}.debug-branches i:nth-child(3),.debug-probes span:nth-child(3){animation-delay:2s}.debug-branches i:nth-child(4),.debug-probes span:nth-child(4){animation-delay:3s}.debug-output{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:18px;border:1px solid rgba(98,165,255,.25);border-radius:10px;background:rgba(36,107,254,.09)}.debug-output span{color:var(--white);font-size:7px}.debug-output b{color:var(--sky-300);font:400 13px 'DM Mono',monospace}.debug-output strong{width:100%;margin-top:12px;color:#72dcad;font:500 12px 'DM Mono',monospace;text-align:center;animation:token-pulse 2s infinite}

/* Source-faithful interactive explainers */
.visual-quant-map .visual-canvas,.visual-attention .visual-canvas,.visual-int8 .visual-canvas,.visual-lut .visual-canvas,.visual-spin .visual-canvas,.visual-paro .visual-canvas,.visual-vla .visual-canvas,.visual-debug .visual-canvas{min-height:650px;grid-template-columns:1fr 1fr;align-content:start}
.qm-mapping,.attn-projections,.i8-histogram,.lut-reduce,.spin-distributions,.spin-locations,.spin-result,.paro-kernel,.vperf-timeline,.dbg-cases{grid-column:1/-1}
.qm-real,.qm-codes,.attn-projections,.attn-score,.attn-value-mix,.i8-histogram,.i8-affine,.lut-bcq,.lut-activation,.lut-address,.spin-dist,.spin-equivalence,.paro-balance,.paro-pairs,.paro-series,.vperf-timeline,.vperf-breakdown,.dbg-symptom,.dbg-proof{padding:16px}
.visual-quant-map .visual-canvas,.visual-int8 .visual-canvas,.visual-lut .visual-canvas,.visual-paro .visual-canvas,.visual-debug .visual-canvas{min-height:0}.qm-mapping{display:grid;grid-template-columns:1fr .8fr 1fr;align-items:stretch;gap:16px;min-width:0}.qm-mapping>*{min-width:0}.qm-real,.qm-codes{display:grid;gap:10px;min-width:0}.qm-real>div{height:92px;display:flex;align-items:end;gap:5px;min-width:0}.qm-real>div i{flex:1;height:var(--h,45%);border-radius:3px 3px 0 0;background:linear-gradient(var(--sky-300),var(--blue-600))}.qm-real>div i:nth-child(2){--h:72%}.qm-real>div i:nth-child(4){--h:28%}.qm-real>div i:nth-child(5){--h:90%}.qm-real>div i:nth-child(7){--h:60%}.qm-real>div i:nth-child(9){--h:22%}.qm-real b,.qm-codes b{color:var(--muted);font:500 7px 'DM Mono',monospace}.qm-operator{display:grid;place-content:center;justify-items:center;gap:8px;text-align:center}.qm-operator code{color:var(--white);font:500 9px 'DM Mono',monospace}.qm-operator span{color:var(--muted);font-size:6px}.qm-operator i{color:var(--sky-300);font:500 22px 'DM Mono',monospace;font-style:normal}.qm-codes>div{width:100%;min-width:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.qm-codes>div i{min-width:0;aspect-ratio:1;border:1px solid rgba(142,210,255,.28);border-radius:2px;background:rgba(36,107,254,.24)}.qm-formats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.qm-formats>div{padding:12px;border:1px solid rgba(98,165,255,.2);border-radius:8px;background:rgba(3,16,32,.58);display:grid;gap:4px}.qm-formats small{color:var(--blue-400);font-size:7px}.qm-formats strong{color:var(--white);font-size:17px}.qm-formats span{color:var(--muted);font-size:6px}.qm-contract{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center}.qm-contract span,.qm-contract b{color:var(--muted);font:500 7px 'DM Mono',monospace}.qm-contract b{color:var(--white)}.qm-contract i{width:31px;height:31px;display:grid;place-content:center;border:1px solid var(--blue-400);border-radius:50%;color:var(--sky-300);font:500 9px 'DM Mono',monospace;font-style:normal}.qm-kernel-gate{padding:16px;border:1px solid rgba(114,220,173,.24);border-radius:10px;background:rgba(114,220,173,.05);display:grid;gap:11px}.qm-kernel-gate>div{display:flex;align-items:center;gap:7px}.qm-kernel-gate span{color:var(--muted);font-size:6px}.qm-kernel-gate i{color:var(--sky-300);font-style:normal}.qm-kernel-gate strong{color:#9aebc8;font:500 10px 'DM Mono',monospace}.qm-operator.is-explaining i{animation:source-flow 1.4s ease both}.qm-codes.is-explaining i{animation:source-code 1.4s steps(1) both}.qm-contract.is-explaining i{animation:source-node 1.35s ease both}.qm-kernel-gate.is-explaining strong{animation:source-proof 1.4s ease both}

.attn-projections{display:grid;gap:13px}.attn-token-row,.attn-qkv-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.attn-token-row b{padding:8px;border:1px solid var(--line);border-radius:5px;color:var(--white);font:500 9px 'DM Mono',monospace;text-align:center}.attn-qkv-row{grid-template-columns:repeat(3,1fr)}.attn-qkv-row span{padding:9px;border:1px solid rgba(98,165,255,.22);border-radius:5px;color:var(--sky-300);background:rgba(36,107,254,.09);font-size:8px;text-align:center}.attn-score header,.i8-histogram header{display:flex;justify-content:space-between;gap:12px}.attn-score header strong,.i8-histogram header strong{color:var(--white);font:500 9px 'DM Mono',monospace}.attn-score-grid{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.attn-score-grid i{aspect-ratio:1;border-radius:2px;background:rgba(98,165,255,.35)}.attn-score-grid i:nth-child(2),.attn-score-grid i:nth-child(3),.attn-score-grid i:nth-child(4),.attn-score-grid i:nth-child(7),.attn-score-grid i:nth-child(8),.attn-score-grid i:nth-child(12){background:repeating-linear-gradient(135deg,rgba(255,112,130,.18) 0 4px,rgba(3,16,32,.4) 4px 8px)}.attn-score>span{display:block;margin-top:8px;color:#ff9aaa;font-size:6px}.attn-softmax{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(36,107,254,.07);display:grid;gap:12px}.attn-softmax>div{display:grid;gap:6px}.attn-softmax i{width:var(--p);height:7px;display:block;border-radius:6px;background:linear-gradient(90deg,var(--blue-600),var(--sky-300))}.attn-softmax strong{color:#9aebc8;font:500 8px 'DM Mono',monospace}.attn-value-mix{display:grid;gap:12px}.attn-value-mix code{color:var(--white);font:500 13px 'DM Mono',monospace}.attn-value-mix>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.attn-value-mix span{padding:8px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:6px;text-align:center}.attn-heads{padding:16px;border:1px solid rgba(114,220,173,.24);border-radius:10px;background:rgba(114,220,173,.05);display:grid;gap:10px}.attn-heads>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.attn-heads i{padding:9px;border:1px solid rgba(98,165,255,.24);border-radius:50%;color:var(--sky-300);font:500 8px 'DM Mono',monospace;text-align:center;font-style:normal}.attn-heads span{color:var(--muted);font-size:6px}.attn-heads strong{color:var(--white);font:500 9px 'DM Mono',monospace}.attn-score.is-explaining .attn-score-grid i{animation:source-score 1.4s ease both}.attn-softmax.is-explaining i{animation:source-width 1.3s ease both}.attn-value-mix.is-explaining span{animation:source-node 1.35s ease both}.attn-heads.is-explaining i{animation:source-head 1.45s ease both}

.i8-histogram{position:relative;min-height:185px}.i8-bars{height:120px;margin-top:14px;display:flex;align-items:end;gap:3px}.i8-bars i{flex:1;height:var(--h,24%);background:rgba(98,165,255,.38);border-radius:2px 2px 0 0}.i8-bars i:nth-child(8),.i8-bars i:nth-child(14){--h:62%}.i8-bars i:nth-child(9),.i8-bars i:nth-child(13){--h:78%}.i8-bars i:nth-child(10),.i8-bars i:nth-child(12){--h:92%}.i8-bars i:nth-child(11){--h:100%}.i8-bars i:nth-child(2),.i8-bars i:nth-child(20){--h:9%}.i8-threshold{position:absolute;bottom:17px;padding-top:105px;border-left:1px dashed;font-size:6px}.i8-percentile{left:18%;color:#72dcad}.i8-max{right:5%;color:#ff9aaa}.i8-range-choice{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}.i8-range-choice>div{padding:14px;border:1px solid rgba(98,165,255,.18);border-radius:8px;background:rgba(3,16,32,.56);display:grid;gap:4px}.i8-range-choice .is-chosen{border-color:rgba(114,220,173,.35);background:rgba(114,220,173,.06)}.i8-range-choice small{color:var(--blue-400);font-size:7px}.i8-range-choice b{color:var(--white);font:500 9px 'DM Mono',monospace}.i8-range-choice span{color:var(--muted);font-size:6px}.i8-affine{display:grid;gap:12px}.i8-affine code{color:var(--white);font:500 9px 'DM Mono',monospace}.i8-code-line{display:grid;grid-template-columns:repeat(11,1fr);gap:3px}.i8-code-line i{height:25px;border:1px solid rgba(142,210,255,.26);border-radius:2px;background:rgba(36,107,254,.2)}.i8-affine>span{color:var(--muted);font-size:6px}.i8-granularity{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;display:grid;grid-template-columns:1fr auto 1.5fr;align-items:center;gap:9px;background:rgba(36,107,254,.06)}.i8-granularity>small{grid-column:1/-1}.i8-granularity>div{padding:10px;border:1px solid var(--line);border-radius:6px;display:flex;gap:7px;align-items:center}.i8-granularity span{color:var(--muted);font-size:6px}.i8-granularity b{padding:5px;color:var(--sky-300);font:500 8px 'DM Mono',monospace}.i8-granularity>i{color:var(--sky-300);font-style:normal}.i8-recovery{grid-column:1/-1;padding:15px;border:1px solid rgba(114,220,173,.22);border-radius:9px;background:rgba(114,220,173,.05);display:flex;align-items:center;gap:8px}.i8-recovery small{margin-right:auto}.i8-recovery span{padding:8px;border:1px solid rgba(98,165,255,.18);border-radius:5px;color:var(--white);font-size:6px}.i8-recovery i{color:var(--sky-300);font-style:normal}.i8-histogram.is-explaining .i8-bars i{animation:source-bars 1.3s ease both}.i8-range-choice.is-explaining .is-chosen{animation:source-proof 1.4s ease both}.i8-affine.is-explaining .i8-code-line i{animation:source-code 1.3s steps(1) both}.i8-granularity.is-explaining .i8-channel-scales b{animation:source-node 1.3s ease both}.i8-recovery.is-explaining span{animation:source-flow-card 1.5s ease both}

.lut-bcq,.lut-activation,.lut-address{display:grid;gap:12px}.lut-bcq code{color:var(--white);font:500 12px 'DM Mono',monospace}.lut-bcq>div{display:grid;grid-template-columns:1fr 1fr .7fr;gap:6px}.lut-bcq span,.lut-address span{padding:8px;border:1px solid var(--line);border-radius:5px;display:flex;justify-content:space-between;gap:7px}.lut-bcq b,.lut-address b{color:var(--blue-400);font:500 7px 'DM Mono',monospace}.lut-bcq i,.lut-address i{color:var(--white);font:500 8px 'DM Mono',monospace;font-style:normal}.lut-activation>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.lut-activation b{padding:14px;border:1px solid rgba(98,165,255,.24);border-radius:5px;color:var(--sky-300);font:500 9px 'DM Mono',monospace;text-align:center}.lut-activation>span,.lut-address p{margin:0;color:var(--muted);font:500 7px/1.45 'DM Mono',monospace}.lut-build{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(36,107,254,.06)}.lut-build>div{margin-top:12px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.lut-build span{padding:6px 3px;border:1px solid rgba(98,165,255,.17);border-radius:3px;display:grid;justify-items:center;gap:2px}.lut-build b{color:#7894b2;font:500 5px 'DM Mono',monospace}.lut-build i{color:var(--sky-300);font:500 7px 'DM Mono',monospace;font-style:normal}.lut-address>div{display:grid;gap:5px}.lut-reduce{padding:14px;border:1px solid rgba(114,220,173,.28);border-radius:10px;background:rgba(114,220,173,.05);display:flex;align-items:center;justify-content:center;gap:9px}.lut-reduce span{color:var(--muted);font-size:7px}.lut-reduce i{color:var(--sky-300);font-style:normal}.lut-reduce strong{color:#9aebc8;font:500 11px 'DM Mono',monospace}.lut-bcq.is-explaining span{animation:source-plane 1.4s ease both}.lut-activation.is-explaining b{animation:source-node 1.3s ease both}.lut-build.is-explaining span{animation:source-code 1.4s steps(1) both}.lut-address.is-explaining span{animation:source-address 1.4s ease both}.lut-reduce.is-explaining strong{animation:source-proof 1.4s ease both}

.spin-distributions{display:grid;grid-template-columns:1fr 48px 1fr;align-items:center}.spin-distributions>i{color:var(--sky-300);font:500 16px 'DM Mono',monospace;text-align:center;font-style:normal}.spin-dist{display:grid;gap:10px}.spin-dist>div{height:115px;display:flex;align-items:end;gap:5px}.spin-dist i{flex:1;height:var(--h,34%);border-radius:3px 3px 0 0;background:rgba(98,165,255,.35)}.spin-before i:nth-child(4){--h:100%;background:#ff8798}.spin-before i:nth-child(9){--h:82%;background:#ff8798}.spin-after i:nth-child(3n){--h:56%}.spin-after i:nth-child(4n){--h:48%}.spin-dist span{color:var(--muted);font-size:6px}.spin-equivalence{display:grid;gap:13px}.spin-equivalence>div{display:flex;align-items:center;gap:7px}.spin-equivalence span,.spin-equivalence b,.spin-equivalence i{padding:8px;border:1px solid var(--line);border-radius:5px;color:var(--white);font:500 7px 'DM Mono',monospace;font-style:normal}.spin-equivalence i{color:var(--sky-300);border-color:var(--blue-400)}.spin-equivalence code{color:#9aebc8;font:500 7px 'DM Mono',monospace}.spin-search{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(36,107,254,.06);display:grid;gap:10px}.spin-trials{height:72px;position:relative;display:flex;align-items:end;gap:5px}.spin-trials i{flex:1;height:var(--h,45%);border-radius:3px;background:rgba(98,165,255,.28)}.spin-trials i:nth-child(2){--h:75%}.spin-trials i:nth-child(5){--h:22%}.spin-trials i:nth-child(8){--h:88%}.spin-trials b{position:absolute;right:4px;top:0;color:#ff9aaa;font:500 6px 'DM Mono',monospace}.spin-search>span{color:var(--muted);font-size:6px}.spin-search>strong{color:var(--white);font:500 8px 'DM Mono',monospace}.spin-locations{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(3,16,32,.58)}.spin-locations>div{margin-top:11px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.spin-locations span{padding:9px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:6px}.spin-locations b{display:block;margin-bottom:4px;color:var(--sky-300);font:500 9px 'DM Mono',monospace}.spin-locations p{margin:10px 0 0;color:var(--muted);font:500 7px 'DM Mono',monospace}.spin-locations p i{color:var(--white);font-style:normal}.spin-result{padding:14px;border:1px solid rgba(114,220,173,.26);border-radius:10px;background:rgba(114,220,173,.05);display:flex;align-items:center;gap:16px}.spin-result strong{color:#9aebc8;font-size:20px}.spin-result span{color:var(--muted);font-size:7px}.spin-distributions.is-explaining .spin-before i{animation:source-outlier 1.4s ease both}.spin-distributions.is-explaining .spin-after i{animation:source-balance 1.4s ease both}.spin-equivalence.is-explaining i{animation:source-node 1.35s ease both}.spin-search.is-explaining .spin-trials i{animation:source-trial 1.4s ease both}.spin-locations.is-explaining span{animation:source-flow-card 1.45s ease both}.spin-result.is-explaining strong{animation:source-proof 1.4s ease both}

.paro-balance{display:grid;gap:9px}.paro-range-before,.paro-range-after{height:48px;display:flex;align-items:center;gap:4px}.paro-range-before i,.paro-range-after i{width:var(--w,42%);height:5px;border-radius:5px;background:rgba(98,165,255,.35)}.paro-range-before i:nth-child(3){--w:100%;background:#ff8798}.paro-range-before i:nth-child(6){--w:78%;background:#ff8798}.paro-range-after i{width:62%;background:rgba(114,220,173,.48)}.paro-balance span{color:var(--muted);font-size:6px}.paro-balance strong{color:#9aebc8;font:500 8px 'DM Mono',monospace}.paro-pairs{display:grid;gap:11px}.paro-pairs>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}.paro-pairs span{padding:9px;border:1px solid rgba(98,165,255,.2);border-radius:6px;display:flex;justify-content:center;gap:8px}.paro-pairs b{color:var(--white);font:500 8px 'DM Mono',monospace}.paro-pairs i{color:var(--sky-300);font-style:normal}.paro-pairs p,.paro-series p{margin:0;color:var(--muted);font:500 7px/1.45 'DM Mono',monospace}.paro-givens{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(36,107,254,.06);display:grid;gap:11px}.paro-givens>div{display:grid;gap:6px}.paro-givens code{padding:8px;border:1px solid var(--line);border-radius:5px;color:var(--white);font:500 8px 'DM Mono',monospace}.paro-givens>span{color:var(--muted);font-size:6px}.paro-series{display:grid;gap:10px}.paro-series>div{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}.paro-series span{padding:7px 2px;border:1px solid rgba(98,165,255,.2);border-radius:4px;color:var(--sky-300);font-size:6px;text-align:center}.paro-series code{color:var(--white);font:500 7px 'DM Mono',monospace}.paro-kernel{padding:14px;border:1px solid rgba(114,220,173,.26);border-radius:10px;background:rgba(114,220,173,.05);display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px}.paro-kernel>div{display:flex;gap:6px}.paro-kernel span{padding:7px;border:1px solid rgba(98,165,255,.2);border-radius:5px;color:var(--muted);font-size:6px}.paro-kernel>i{color:var(--sky-300);font-style:normal}.paro-kernel strong{color:#9aebc8;font:500 10px 'DM Mono',monospace}.paro-balance.is-explaining .paro-range-before i{animation:source-range 1.35s ease both}.paro-pairs.is-explaining span{animation:source-pair 1.4s ease both}.paro-givens.is-explaining code{animation:source-node 1.35s ease both}.paro-series.is-explaining span{animation:source-flow-card 1.45s ease both}.paro-kernel.is-explaining span{animation:source-proof 1.4s ease both}

.vperf-timeline{display:grid;gap:12px}.vperf-lane{display:grid;grid-template-columns:.7fr 1fr 1.2fr 1.1fr 1.3fr;align-items:center;gap:3px}.vperf-lane>*{min-height:44px;padding:7px;display:grid;place-content:center;border:1px solid rgba(98,165,255,.18);color:var(--white);font:500 6px 'DM Mono',monospace;font-style:normal;text-align:center}.vperf-lane>span{background:rgba(98,165,255,.08)}.vperf-lane .vp-vision{background:rgba(36,107,254,.16)}.vperf-lane .vp-vlm{background:rgba(36,107,254,.3)}.vperf-lane .vp-action{background:rgba(255,135,152,.13)}.vperf-lane>i{border-color:rgba(114,220,173,.26);background:rgba(114,220,173,.06)}.vperf-deadline{display:flex;justify-content:space-between;gap:10px}.vperf-deadline span{color:var(--muted);font-size:6px}.vperf-deadline strong{color:#9aebc8;font:500 7px 'DM Mono',monospace}.vperf-roofline{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(36,107,254,.06);display:grid;gap:12px}.vperf-roofline>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.vperf-roofline span{padding:9px;border:1px solid var(--line);border-radius:6px}.vperf-roofline b{display:block;margin-bottom:5px;color:var(--white);font:500 8px 'DM Mono',monospace}.vperf-roofline i{color:var(--muted);font-size:6px;font-style:normal}.vperf-roofline code{color:var(--sky-300);font:500 7px 'DM Mono',monospace}.vperf-breakdown{display:grid;gap:12px}.vperf-breakdown>div{display:grid;gap:9px}.vperf-breakdown span{display:grid;grid-template-columns:50px 1fr 100px;align-items:center;gap:7px}.vperf-breakdown b{color:var(--white);font:500 7px 'DM Mono',monospace}.vperf-breakdown i{width:var(--w);height:7px;border-radius:6px;background:linear-gradient(90deg,var(--blue-600),var(--sky-300))}.vperf-breakdown em{color:var(--muted);font-size:6px;font-style:normal}.vperf-breakdown p,.vperf-knobs p{margin:0;color:var(--muted);font:500 7px/1.45 'DM Mono',monospace}.vperf-knobs{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(3,16,32,.58);display:grid;gap:11px}.vperf-knobs>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}.vperf-knobs span{padding:10px;border:1px solid var(--line);border-radius:6px;display:grid;gap:4px}.vperf-knobs b{color:var(--white);font:500 8px 'DM Mono',monospace}.vperf-knobs i{color:var(--muted);font-size:6px;font-style:normal}.vperf-knobs strong{color:#9aebc8;font:500 7px 'DM Mono',monospace}.vperf-async{padding:16px;border:1px solid rgba(114,220,173,.24);border-radius:10px;background:rgba(114,220,173,.05);display:grid;gap:12px}.vperf-async>div{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:6px}.vperf-async span{padding:9px;border:1px solid var(--line);border-radius:5px;color:var(--white);font-size:6px}.vperf-async i{height:7px;border-radius:6px;background:linear-gradient(90deg,var(--blue-500) 0 48%,transparent 48% 52%,#72dcad 52%);font-style:normal}.vperf-async strong{color:#9aebc8;font:500 8px 'DM Mono',monospace}.vperf-timeline.is-explaining .vperf-lane>*{animation:source-timeline 1.5s ease both}.vperf-roofline.is-explaining span{animation:source-node 1.4s ease both}.vperf-breakdown.is-explaining i{animation:source-width 1.4s ease both}.vperf-knobs.is-explaining span{animation:source-compare 1.4s ease both}.vperf-async.is-explaining i{animation:source-overlap 1.5s ease both}

.dbg-symptom{display:grid;gap:9px}.dbg-symptom strong{color:#72dcad;font-size:15px}.dbg-symptom span{color:#ff9aaa;font:500 11px 'DM Mono',monospace}.dbg-symptom code{color:var(--muted);font:500 7px 'DM Mono',monospace}.dbg-first-divergence{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(36,107,254,.06);display:grid;gap:11px}.dbg-first-divergence>div{display:flex;align-items:center;gap:5px}.dbg-first-divergence span{padding:7px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:6px}.dbg-first-divergence i{color:var(--sky-300);font-style:normal}.dbg-first-divergence strong{color:var(--white);font:500 8px 'DM Mono',monospace}.dbg-cases{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(3,16,32,.58)}.dbg-cases>div{margin-top:11px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.dbg-cases span{padding:10px;border:1px solid rgba(98,165,255,.18);border-radius:6px;display:grid;gap:5px}.dbg-cases b{color:var(--sky-300);font:500 8px 'DM Mono',monospace}.dbg-cases i{color:var(--muted);font-size:6px;font-style:normal}.dbg-ab{padding:16px;border:1px solid rgba(98,165,255,.2);border-radius:10px;background:rgba(36,107,254,.06);display:grid;gap:10px}.dbg-ab>div{display:flex;flex-wrap:wrap;gap:5px}.dbg-ab span,.dbg-ab b{padding:7px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:6px}.dbg-ab b{color:var(--white)}.dbg-ab code{color:#9aebc8;font:500 7px 'DM Mono',monospace}.dbg-proof{display:grid;gap:11px}.dbg-proof>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}.dbg-proof span{padding:8px;border:1px solid rgba(114,220,173,.2);border-radius:5px;color:var(--muted);font-size:6px}.dbg-proof strong{color:#9aebc8;font:500 9px 'DM Mono',monospace}.dbg-symptom.is-explaining span{animation:source-error 1.35s ease both}.dbg-first-divergence.is-explaining span{animation:source-trace 1.45s ease both}.dbg-cases.is-explaining span{animation:source-case 1.45s ease both}.dbg-ab.is-explaining code{animation:source-proof 1.4s ease both}.dbg-proof.is-explaining span{animation:source-proof 1.45s ease both}

@keyframes visual-glow{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.65}}
@keyframes visual-breathe{50%{transform:scale(1.06);filter:brightness(1.2)}}
@keyframes visual-flow{50%{transform:translateX(7px);color:#fff}}
@keyframes visual-bars{from{transform:scaleY(.78);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
@keyframes cell-code{50%{background:rgba(36,107,254,.42);border-color:var(--sky-300);box-shadow:0 0 12px rgba(36,107,254,.28)}}
@keyframes token-pulse{50%{border-color:var(--blue-400);background-color:rgba(36,107,254,.22);box-shadow:0 0 20px rgba(36,107,254,.14)}}
@keyframes matrix-scan{35%,55%{background:rgba(98,165,255,.68);box-shadow:0 0 12px rgba(98,165,255,.35)}}
@keyframes ladder-light{25%{background:linear-gradient(90deg,rgba(36,107,254,.15),rgba(98,165,255,.7))}}
@keyframes sq-outlier{0%,100%{filter:none}45%{filter:brightness(1.45);box-shadow:0 0 28px rgba(255,112,130,.58);transform:scaleX(1.14)}}
@keyframes sq-hard-to-easy{from{height:var(--hard);background:linear-gradient(#ff9aa8,#dc4962)}to{height:var(--easy);background:linear-gradient(var(--sky-300),var(--blue-600))}}
@keyframes sq-transfer{0%{left:8px;background:#ff8ea0;box-shadow:0 0 16px rgba(255,112,130,.55)}100%{left:calc(100% - 20px);background:#72dcad;box-shadow:0 0 18px rgba(114,220,173,.55)}}
@keyframes sq-weight-absorb{from{height:var(--from);filter:saturate(.7)}to{height:var(--to);filter:saturate(1)}}
@keyframes gptq-hessian-read{0%{filter:none}45%{background:var(--sky-300);box-shadow:0 0 18px rgba(142,210,255,.55)}100%{filter:none}}
@keyframes gptq-quantize-column{0%{background:rgba(247,251,255,.9);border-color:#fff}100%{background:rgba(255,153,61,.72);border-color:rgba(255,153,61,.8)}}
@keyframes gptq-update-flow{from{left:0}to{left:calc(100% - 7px)}}
@keyframes gptq-compensate-cell{0%,25%{transform:none;filter:none}70%{transform:translateX(2px);filter:brightness(1.45)}100%{transform:none;filter:brightness(1.1)}}
@keyframes gptq-global-cell{0%,35%{filter:none;transform:none}75%{filter:brightness(1.45);transform:translateX(1px)}100%{filter:brightness(1.08);transform:none}}
@keyframes source-flow{0%{transform:translateX(-10px);opacity:.2}55%{transform:translateX(5px);color:#fff;opacity:1}100%{transform:none;opacity:1}}
@keyframes source-code{0%,22%{opacity:.22;transform:scale(.82)}45%,100%{opacity:1;transform:none;border-color:rgba(142,210,255,.62)}}
@keyframes source-node{0%{transform:scale(.88);opacity:.35}55%{transform:scale(1.05);border-color:var(--sky-300);box-shadow:0 0 20px rgba(98,165,255,.2);opacity:1}100%{transform:none;opacity:1}}
@keyframes source-proof{0%{filter:saturate(.35);opacity:.35}55%{filter:brightness(1.45);text-shadow:0 0 14px rgba(114,220,173,.45);opacity:1}100%{filter:none;opacity:1}}
@keyframes source-score{0%{opacity:.15;transform:scale(.72)}55%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:none}}
@keyframes source-width{0%{width:4%;opacity:.25}65%{opacity:1}100%{opacity:1}}
@keyframes source-head{0%{transform:translateY(10px);opacity:.2}55%{transform:translateY(-3px);border-color:var(--sky-300);opacity:1}100%{transform:none;opacity:1}}
@keyframes source-bars{0%{height:6%;opacity:.2}65%{opacity:1}100%{opacity:1}}
@keyframes source-flow-card{0%{transform:translateX(-9px);opacity:.2}55%{transform:translateX(3px);border-color:var(--sky-300);opacity:1}100%{transform:none;opacity:1}}
@keyframes source-plane{0%{transform:translateY(10px);opacity:.25}55%{transform:translateY(-2px);border-color:var(--blue-400);opacity:1}100%{transform:none;opacity:1}}
@keyframes source-address{0%{transform:translateX(-12px);opacity:.2}55%{transform:translateX(4px);border-color:#72dcad;opacity:1}100%{transform:none;opacity:1}}
@keyframes source-outlier{0%{filter:saturate(.3);transform:scaleY(.72)}55%{filter:brightness(1.35);transform:scaleY(1.06)}100%{filter:none;transform:none}}
@keyframes source-balance{0%{transform:scaleY(.25);opacity:.2}65%{transform:scaleY(1.06);opacity:1}100%{transform:none;opacity:1}}
@keyframes source-trial{0%{height:10%;opacity:.2}65%{opacity:1}100%{opacity:1}}
@keyframes source-range{0%{width:12%;opacity:.25}65%{opacity:1}100%{opacity:1}}
@keyframes source-pair{0%{transform:scale(.86);opacity:.2}55%{transform:scale(1.04);border-color:var(--sky-300);opacity:1}100%{transform:none;opacity:1}}
@keyframes source-timeline{0%{transform:translateX(-14px);opacity:.2}55%{transform:translateX(3px);opacity:1}100%{transform:none;opacity:1}}
@keyframes source-compare{0%{transform:translateY(9px);opacity:.2}55%{transform:translateY(-2px);border-color:var(--sky-300);opacity:1}100%{transform:none;opacity:1}}
@keyframes source-overlap{0%{background-position:-120px 0;opacity:.25}60%{opacity:1}100%{background-position:0 0;opacity:1}}
@keyframes source-error{0%{opacity:.25;transform:translateX(-8px)}55%{opacity:1;color:#fff;transform:translateX(3px)}100%{opacity:1;transform:none}}
@keyframes source-trace{0%{opacity:.18;transform:translateX(-8px)}55%{opacity:1;border-color:var(--sky-300);transform:translateX(2px)}100%{opacity:1;transform:none}}
@keyframes source-case{0%{opacity:.18;transform:translateY(8px)}55%{opacity:1;border-color:var(--blue-400);transform:translateY(-2px)}100%{opacity:1;transform:none}}
@keyframes awq-activation-read{0%{transform:scaleY(.55);filter:saturate(.6)}55%{transform:scaleY(1.06);filter:brightness(1.35)}100%{transform:scaleY(1);filter:none}}
@keyframes awq-channel-trace{0%{transform:translateX(-8px);opacity:.2}60%{transform:translateX(6px);color:#fff;opacity:1}100%{transform:none;opacity:1}}
@keyframes awq-column-map{0%{background:rgba(98,165,255,.08)}55%{background:rgba(255,112,130,.7);box-shadow:0 0 14px rgba(255,112,130,.35)}100%{background:rgba(255,112,130,.38)}}
@keyframes awq-search-select{0%{transform:translateY(28px) scale(.55);opacity:.25}55%{transform:translateY(-3px) scale(1.35)}100%{transform:none;opacity:1}}
@keyframes awq-weight-grow{0%{transform:scale(.86);border-color:rgba(98,165,255,.2)}55%{transform:scale(1.04);border-color:#ff8798;box-shadow:0 0 20px rgba(255,112,130,.24)}100%{transform:none}}
@keyframes awq-activation-shrink{0%{transform:scale(1.12)}60%{transform:scale(.92);border-color:var(--sky-300);box-shadow:0 0 20px rgba(98,165,255,.22)}100%{transform:none}}
@keyframes awq-invariant-check{0%,40%{border-color:rgba(98,165,255,.2)}70%{border-color:#72dcad;box-shadow:0 0 24px rgba(114,220,173,.22)}100%{border-color:#72dcad}}
@keyframes awq-pack-weight{0%{background:rgba(255,112,130,.3);transform:scale(.76)}45%{background:rgba(142,210,255,.8)}100%{background:rgba(36,107,254,.46);transform:none}}
@keyframes packet-shift{50%{transform:translateX(5px);border-color:var(--sky-300);color:#fff}}
@keyframes point-float{50%{transform:translate(3px,-4px);box-shadow:0 0 18px var(--blue-400)}}
@keyframes visual-rotate{to{transform:rotate(360deg)}}
@keyframes lane-flow{to{background-position:-200% 0}}
@keyframes meter-pulse{50%{filter:brightness(1.4)}}
@keyframes debug-select{10%,22%{border-color:var(--sky-300);color:var(--white);background:rgba(36,107,254,.25)}}
@keyframes explainer-select{0%{transform:scale(.985)}45%{transform:scale(1.018)}100%{transform:scale(1)}}
@keyframes inspector-reveal{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}

.article-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.article-reveal.is-visible { opacity: 1; transform: none; }
.learning-next { max-width: 1000px; margin: 90px auto 0; display: grid; grid-template-columns: 210px minmax(0,720px); gap: 70px; }
.learning-next a { grid-column: 2; min-height: 160px; position: relative; padding: 27px 30px; overflow: hidden; border: 1px solid rgba(98,165,255,.28); border-radius: 12px; display: grid; align-content: center; background: linear-gradient(120deg, rgba(36,107,254,.16), rgba(10,33,68,.36)); box-shadow: 0 24px 65px rgba(0,0,0,.14); transition: transform .25s, border-color .25s, box-shadow .25s; }
.learning-next a::after { content: ''; position: absolute; width: 160px; height: 160px; right: -70px; top: -70px; border: 1px solid rgba(142,210,255,.24); border-radius: 50%; box-shadow: 0 0 0 25px rgba(36,107,254,.035), 0 0 0 50px rgba(36,107,254,.02); transition: transform .4s; }
.learning-next a:hover, .learning-next a:focus-visible { transform: translateY(-4px); border-color: rgba(142,210,255,.55); box-shadow: 0 30px 75px rgba(0,0,0,.22), 0 0 40px rgba(36,107,254,.08); outline: none; }
.learning-next a:hover::after, .learning-next a:focus-visible::after { transform: scale(1.12); }
.learning-next span { color: var(--blue-400); font: 500 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
.learning-next strong { max-width: 530px; margin: 10px 0 14px; color: var(--white); font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
.learning-next i { color: var(--sky-300); font: 500 9px 'DM Mono', monospace; text-transform: uppercase; font-style: normal; }

.page-shortcuts { position: fixed; right: 22px; bottom: 22px; z-index: 40; }
.page-shortcut { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(98,165,255,.45); border-radius: 50%; background: rgba(3,16,32,.88); backdrop-filter: blur(12px); color: var(--sky-300); display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); cursor: pointer; box-shadow: 0 12px 34px rgba(0,0,0,.28); transition: opacity .2s, visibility .2s, transform .2s, background .2s, border-color .2s; }
.page-shortcut.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.page-shortcut.is-visible:hover { transform: translateY(-2px); border-color: var(--blue-400); background: var(--navy-800); }
.page-shortcut span { color: var(--white); font: 500 20px 'DM Mono', monospace; transform: translateY(-1px); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (min-width: 1050px) {
  .article-visual.has-selection.is-in-view .visual-inspector {
    width: 320px;
    max-height: calc(100vh - 36px);
    position: fixed;
    z-index: 70;
    top: 50%;
    right: max(28px, calc((100vw - 1180px) / 2));
    bottom: auto;
    transform: translateY(-50%);
    overflow-y: auto;
    border: 1px solid rgba(142,210,255,.36);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
    backdrop-filter: blur(18px);
  }
  .article-visual.has-selection .visual-inspector-close { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; place-items: center; }
  .article-visual.has-selection .visual-inspector-main { padding-right: 38px; }
}

@media (max-width: 1049px) {
  .article-visual { max-width: 1000px; display: block; }
  .visual-inspector { display: none; }
  .article-visual.has-selection .visual-inspector {
    width: min(560px, calc(100% - 24px));
    max-height: min(44vh, 380px);
    position: fixed;
    z-index: 70;
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
    padding: 18px;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-content: start;
    gap: 10px;
    overflow-y: auto;
    border: 1px solid rgba(142,210,255,.42);
    border-radius: 14px;
    background: rgba(3,16,32,.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(36,107,254,.08);
  }
  .visual-inspector-close { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; place-items: center; }
  .visual-inspector-main { padding-right: 38px; }
  .article-visual.has-selection .visual-inspector.dock-top { top: 12px; bottom: auto; }
}

@media (max-width: 900px) {
  :root { --shell: min(100% - 36px, 720px); }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 70px; padding-block: 80px; }
  .hero h1 { font-size: clamp(58px, 12vw, 88px); }
  .manifesto-grid, .toolkit-inner, .footer-grid { grid-template-columns: 1fr; gap: 55px; }
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-card { min-height: 390px; }
  .card-icon { position: absolute; right: 25px; top: 24px; width: 160px; opacity: .7; }
  .expertise-card h3 { margin-top: 130px; }
  .project-item { grid-template-columns: 1fr; }
  .project-visual { border-right: 0; border-bottom: 1px solid var(--line); }
  .research-grid { grid-template-columns: 1fr 1fr; }
  .blog-hero-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 4%; }
  .research-signal { width: 290px; }
  .post-header { margin-left: 0; }
  .post-reading-layout { grid-template-columns: 180px minmax(0,1fr); gap: 38px; }
  .learning-next { grid-template-columns: 180px minmax(0,1fr); gap: 38px; }
  .visual-canvas { padding: 28px; gap: 18px; }
  .visual-quant-map .visual-canvas { grid-template-columns: 1fr 60px 1fr; }
  .visual-quant-map .visual-result { grid-column: 1 / -1; grid-template-columns: auto 1fr; column-gap: 14px; justify-self: center; }
  .visual-quant-map .visual-result small { grid-column: 1 / -1; }
  .visual-attention .visual-canvas { grid-template-columns: .6fr .7fr 1fr 55px .65fr; }
  .visual-int8 .visual-canvas { grid-template-columns: 1.2fr 55px .8fr; }
  .visual-int8 .visual-result { grid-column: 1 / -1; }
  .visual-awq .visual-canvas { grid-template-columns: 1fr; }
  .awq-paper-flow { grid-template-columns: .82fr 46px 1.18fr; }
  .visual-lut .visual-canvas { grid-template-columns: .75fr 55px 1.15fr 55px .8fr; }
  .lab-body { grid-template-columns: 1fr; }
  .lab-methods { grid-template-columns: repeat(3, 1fr); border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 680px) {
  :root { --shell: calc(100% - 30px); }
  .section-block { padding-block: 82px; }
  .site-header { height: 74px; }
  .site-header { justify-content: space-between; }
  .menu-button { width: 38px; height: 38px; display: grid; place-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 50%; background: transparent; }
  .menu-button span { width: 15px; height: 1px; background: var(--text); }
  .site-header nav { display: none; position: absolute; left: 0; right: 0; top: 73px; padding: 25px; border: 1px solid var(--line); border-radius: 0 0 14px 14px; background: rgba(3,16,32,.97); flex-direction: column; align-items: stretch; }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 8px 0; }
  .language-switch { width: max-content; align-self: center; }
  .nav-pill { text-align: center; margin-top: 6px; }
  .hero { padding-block: 65px 75px; }
  .hero h1 { margin-top: 24px; font-size: 57px; }
  .hero-intro { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-links { gap: 14px 20px; }
  .hero-signature > p { font-size: clamp(25px, 8.2vw, 48px); letter-spacing: .09em; }
  .signature-line { gap: 9px; letter-spacing: .07em; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip > div { min-height: 84px; border-right: 0; border-bottom: 1px solid var(--line); }
  .proof-strip > div:last-child { border-bottom: 0; }
  .manifesto h2, .section-title-row h2, .toolkit h2, .blog-header h1, .post-header h1, .site-footer h2 { font-size: 44px; }
  .manifesto-grid { margin-top: 30px; }
  .section-title-row { display: block; }
  .section-title-row .section-note, .section-title-row .inline-link { display: inline-block; margin-top: 25px; }
  .expertise-card { min-height: 440px; }
  .card-icon { position: relative; right: auto; top: auto; width: auto; opacity: 1; }
  .expertise-card h3 { margin-top: 0; }
  .project-pair { grid-template-columns: 1fr; }
  .research-grid { grid-template-columns: 1fr; }
  .research-card { min-height: 330px; }
  .lab-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .lab-platform { min-width: 0; padding-inline: 12px; }
  .lab-methods { grid-template-columns: 1fr; padding: 24px; }
  .lab-readout { padding: 32px 24px; }
  .metric-grid { grid-template-columns: 1fr; }
  .lab-foot { flex-direction: column; }
  .project-item { min-height: 0; }
  .project-visual { min-height: 290px; }
  .project-copy { padding: 30px 24px; min-height: 330px; }
  .project-item.compact { min-height: 0; }
  .project-item.compact .project-copy { padding: 27px 24px; }
  .precision-stack span { width: 170px; }
  .precision-stack span:nth-child(2) { width: 145px; }
  .precision-stack span:nth-child(3) { width: 115px; }
  .precision-stack span:nth-child(4) { width: 90px; }
  .tool-groups { grid-template-columns: 1fr; }
  .tool-groups > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .post-row { grid-template-columns: 1fr 25px; gap: 10px; padding-block: 23px; }
  .post-step { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; gap: 9px; align-items: center; }
  .post-step time { font-size: 14px; }
  .post-step span { padding-left: 9px; border-left: 1px solid var(--line); }
  .site-footer { padding-top: 80px; }
  .footer-bottom { margin-top: 65px; display: block; line-height: 2; }
  .footer-bottom span { display: block; }
  .post-list-large .post-row h2 { font-size: 22px; }
  .blog-hero-grid { min-height: 0; margin-bottom: 62px; display: block; }
  .blog-summary { margin-top: 27px; }
  .research-signal { width: min(82vw,320px); margin: 58px auto 0; justify-self: auto; }
  .learning-path-header { min-height: 0; padding-block: 25px; display: block; }
  .learning-path-header > p { margin-top: 19px; flex-wrap: wrap; gap: 7px; }
  .learning-path-header > p i { display: none; }
  .post-header { padding-block: 75px 45px; }
  .post-reading-meta { gap: 6px; }
  .post-reading-meta span { min-height: 34px; padding-inline: 10px; }
  .article-visual { margin-bottom: 60px; border-radius: 12px; }
  .visual-header { padding: 15px; align-items: flex-start; }
  .visual-header strong { font-size: 13px; line-height: 1.35; }
  .visual-mode { min-height: 30px; padding-inline: 9px; font-size: 6px; }
  .visual-canvas { min-height: 0; padding: 22px 16px; gap: 16px; background-size: 36px 36px; }
  .visual-canvas::before { width: 300px; height: 300px; }
  .article-visual figcaption { padding: 14px 15px; display: grid; gap: 6px; font-size: 10px; }
  .visual-inspector { min-height: 0; padding: 12px; grid-template-columns: 1fr; gap: 9px; }
  .visual-inspector-main, .visual-inspector-impact { padding: 14px; }
  .article-visual.has-selection .visual-inspector { grid-template-columns: 1fr; max-height: 46vh; padding-top: 48px; }
  .article-visual.has-selection .visual-inspector-main { padding-right: 14px; }
  .visual-inspector h3 { font-size: 17px; }
  .visual-inspector p { font-size: 11px; }
  .visual-status { padding: 11px 14px; align-items: flex-start; flex-direction: column; gap: 6px; line-height: 1.45; }
  .visual-quant-map .visual-canvas, .visual-int8 .visual-canvas, .visual-smoothquant .visual-canvas, .visual-gptq .visual-canvas, .visual-lut .visual-canvas, .visual-spin .visual-canvas { grid-template-columns: 1fr; grid-template-rows: auto; }
  .visual-transfer { min-height: 48px; place-content: center; }
  .visual-transfer i { transform: rotate(90deg); animation: none; }
  .visual-quant-map .visual-result, .visual-int8 .visual-result, .visual-awq .visual-result, .visual-gptq .visual-callout, .visual-spin .visual-callout { grid-column: auto; display: grid; }
  .visual-attention .visual-canvas { grid-template-columns: 1fr 1fr; }
  .visual-attention .attention-matrix, .visual-attention .attention-transfer, .visual-attention .context-token { grid-column: 1 / -1; }
  .visual-attention .attention-transfer i { transform: rotate(90deg); animation: none; }
  .visual-smoothquant .visual-canvas { min-height: 0; }
  .sq-stage, .sq-transform { min-height: 220px; }
  .sq-weight-path { grid-column: auto; grid-template-columns: 1fr; gap: 12px; }
  .sq-weight-path > span { padding-block: 2px; }
  .sq-equivalence { grid-column: auto; align-items: flex-start; flex-direction: column; gap: 6px; border-radius: 8px; font-size: 8px; }
  .gptq-objective { grid-template-columns: 1fr; gap: 8px; }
  .gptq-procedure { grid-template-columns: 1fr; }
  .gptq-coupling { min-height: 42px; }
  .gptq-coupling i { transform: rotate(90deg); }
  .gptq-algorithm { grid-template-columns: 1fr; }
  .gptq-cholesky { height: 145px; }
  .gptq-matrix-track { height: 170px; }
  .visual-awq .visual-canvas, .visual-paro .visual-canvas, .visual-debug .visual-canvas { grid-template-columns: 1fr; }
  .visual-awq .visual-canvas { min-height: 0; }
  .awq-paper-flow { grid-template-columns: 1fr; gap: 10px; }
  .awq-channel-link { min-height: 36px; }
  .awq-channel-link i { transform: rotate(90deg); }
  .awq-alpha-search, .awq-scale-transform { min-height: 0; }
  .awq-transform-equation { grid-template-columns: 1fr; }
  .awq-transform-equation > i { justify-self: center; }
  .awq-uniform-output { grid-template-columns: 1fr; justify-items: start; }
  .awq-packed-grid { width: 100%; }
  .visual-paro .visual-result, .debug-output { grid-column: 1 / -1; }
  .visual-lut .visual-transfer { min-height: 40px; }
  .rotation-space { height: 230px; }
  .rotation-operator { min-height: 105px; }
  .vla-pipeline { padding-bottom: 8px; display: flex; overflow-x: auto; scrollbar-width: none; }
  .vla-pipeline::-webkit-scrollbar { display: none; }
  .vla-pipeline > div { min-width: 130px; min-height: 145px; }
  .vla-pipeline > b { min-width: 30px; }
  .bottleneck-meter { grid-template-columns: 1fr; gap: 11px; }
  .bottleneck-meter > small { margin-bottom: 5px; }
  .post-reading-layout { display: block; }
  .learning-next { display: block; margin-top: 70px; }
  .learning-next a { min-height: 145px; padding: 24px; }
  .learning-next strong { font-size: 22px; }
  .post-map { margin-bottom: 46px; }
  .post-map-inner { position: relative; top: auto; padding: 15px; }
  .post-map nav { margin-inline: -4px; padding-bottom: 6px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .post-map nav::-webkit-scrollbar { display: none; }
  .post-map a { min-width: 145px; padding: 10px 9px 10px 25px; border: 1px solid rgba(98,165,255,.13); background: rgba(3,16,32,.24); }
  .post-map a::before { top: 11px; left: 10px; }
  .post-content { font-size: 16px; }
  .post-content h2 { margin-top: 62px; font-size: 27px; }
  .post-content blockquote { padding: 23px 23px 23px 28px; font-size: 19px; }
  .post-table-shell { margin-inline: -5px; }
  .post-content table { font-size: 12px; }
  .post-content th, .post-content td { min-width: 145px; }
  .page-shortcuts { right: 13px; bottom: 13px; }
  .page-shortcut { width: 40px; height: 40px; }
}

@media (max-width: 900px) {
  .visual-quant-map .visual-canvas,
  .visual-attention .visual-canvas,
  .visual-int8 .visual-canvas,
  .visual-lut .visual-canvas,
  .visual-spin .visual-canvas,
  .visual-paro .visual-canvas,
  .visual-vla .visual-canvas,
  .visual-debug .visual-canvas { grid-template-columns: 1fr 1fr; }
  .qm-mapping, .spin-distributions, .i8-recovery, .lut-reduce, .paro-kernel,
  .vperf-timeline, .dbg-cases { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .visual-quant-map .visual-canvas,
  .visual-attention .visual-canvas,
  .visual-int8 .visual-canvas,
  .visual-lut .visual-canvas,
  .visual-spin .visual-canvas,
  .visual-paro .visual-canvas,
  .visual-vla .visual-canvas,
  .visual-debug .visual-canvas { grid-template-columns: 1fr; }
  .qm-mapping, .spin-distributions { grid-template-columns: 1fr; }
  .qm-operator i, .spin-distributions > i { transform: rotate(90deg); }
  .qm-formats { grid-template-columns: 1fr 1fr; }
  .qm-contract { flex-wrap: wrap; }
  .attn-qkv-row, .spin-locations > div, .dbg-cases > div { grid-template-columns: 1fr 1fr; }
  .i8-range-choice, .vperf-knobs > div, .vperf-roofline > div { grid-template-columns: 1fr; }
  .i8-granularity { grid-template-columns: 1fr; }
  .i8-granularity > i { justify-self: center; transform: rotate(90deg); }
  .i8-recovery, .lut-reduce { align-items: stretch; flex-direction: column; }
  .i8-recovery small { margin-right: 0; }
  .lut-bcq > div { grid-template-columns: 1fr; }
  .lut-build > div { grid-template-columns: repeat(4,1fr); }
  .spin-equivalence > div { flex-wrap: wrap; }
  .spin-locations > div { grid-template-columns: 1fr 1fr; }
  .spin-result { align-items: flex-start; flex-direction: column; gap: 6px; }
  .paro-series > div { grid-template-columns: repeat(4,1fr); }
  .paro-kernel { grid-template-columns: 1fr; }
  .paro-kernel > i { justify-self: center; transform: rotate(90deg); }
  .vperf-timeline { overflow-x: auto; padding-bottom: 5px; }
  .vperf-lane, .vperf-deadline { min-width: 520px; }
  .vperf-breakdown span { grid-template-columns: 48px 1fr; }
  .vperf-breakdown em { grid-column: 2; }
  .vperf-async > div { grid-template-columns: 1fr; }
  .dbg-first-divergence > div { flex-wrap: wrap; }
  .dbg-proof > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .article-reveal { opacity: 1; transform: none; }
}