:root {
  --burgundy-950: #26040d;
  --burgundy-900: #3a0714;
  --burgundy-800: #5d1024;
  --burgundy-650: #8f1835;
  --gold-500: #f4c542;
  --gold-300: #ffe38a;
  --gold-100: #fff4c9;
  --ink: #211014;
  --paper: #fffaf0;
  --paper-strong: #fffdf8;
  --cool: #e6f2f0;
  --muted: #74565f;
  --line: rgba(93, 16, 36, 0.18);
  --shadow: 0 26px 80px rgba(38, 4, 13, 0.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(93, 16, 36, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(93, 16, 36, 0.05) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, a, input { font: inherit; }
button { cursor: pointer; }

/* Locked reference header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 6rem;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  color: white;
  background: rgba(38, 4, 13, 0.9);
  border-bottom: 1px solid rgba(244, 197, 66, 0.32);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 53rem; gap: 1rem; color: white; text-decoration: none; }
.brand > span:last-child { flex: 1; min-width: 0; }
.brand-symbol {
  position: relative; display: block; width: 3rem; height: 3rem;
  border: 1px solid rgba(244, 197, 66, 0.45); border-radius: 0.6rem;
  background: radial-gradient(circle at 30% 32%, var(--gold-500) 0 0.46rem, transparent 0.48rem), radial-gradient(circle at 70% 30%, var(--gold-300) 0 0.22rem, transparent 0.24rem), radial-gradient(circle at 72% 72%, var(--gold-500) 0 0.33rem, transparent 0.35rem), linear-gradient(135deg, var(--burgundy-650), var(--burgundy-950));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}
.brand-symbol span { position: absolute; height: 1px; background: rgba(255, 227, 138, 0.75); transform-origin: left center; }
.brand-symbol span:nth-child(1) { width: 1.2rem; left: 0.95rem; top: 1rem; rotate: 16deg; }
.brand-symbol span:nth-child(2) { width: 1rem; left: 1.8rem; top: 1.05rem; rotate: 92deg; }
.brand-symbol span:nth-child(3) { width: 1.05rem; left: 1.8rem; top: 2.1rem; rotate: -148deg; }
.brand-symbol span:nth-child(4) { width: 1.25rem; left: 0.92rem; top: 1rem; rotate: 75deg; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1rem; letter-spacing: 0.02em; }
.brand small { max-width: 48rem; color: rgba(255, 244, 201, 0.82); font-size: 0.93rem; line-height: 1.35; }
.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav a { color: rgba(255, 250, 240, 0.86); padding: 0.58rem 0.82rem; border-radius: 999px; text-decoration: none; }
.nav a:hover { color: var(--burgundy-950); background: var(--gold-500); }

main { overflow: hidden; }
.hero {
  min-height: calc(100svh - 4.75rem); color: white; position: relative; isolation: isolate;
  background: radial-gradient(circle at 78% 36%, rgba(244,197,66,.18), transparent 24rem), linear-gradient(125deg, #26040d 0%, #5d1024 64%, #8f1835 100%);
}
.hero::before { content:""; position:absolute; inset:0; opacity:.58; pointer-events:none; background: radial-gradient(circle, rgba(255,244,201,.45) 0 1px, transparent 1.6px) 0 0/68px 68px; animation: drift 18s linear infinite; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:8rem; background:linear-gradient(transparent,var(--paper)); z-index:0; }
@keyframes drift { to { background-position: 68px 68px; } }
.hero-grid { position:relative; z-index:1; width:min(1760px,calc(100% - 3rem)); min-height:calc(100svh - 6rem); margin:auto; padding:clamp(3rem,6vw,6rem) 0; display:grid; grid-template-columns:minmax(46rem,1.65fr) minmax(22rem,.65fr); gap:clamp(2rem,3vw,4rem); align-items:center; }
.journal-tag,.micro-label { margin:0 0 .7rem; color:var(--gold-500); font-size:.78rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.hero h1 { margin:0; max-width:none; font-size:clamp(2.75rem,3.3vw,4.35rem); line-height:.98; letter-spacing:-.05em; text-wrap:pretty; }
.hero-deck { max-width:44rem; color:rgba(255,250,240,.82); font-size:1.12rem; }
.article-authors { color:var(--gold-300); font-weight:800; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:3rem; padding:.8rem 1.1rem; border-radius:.55rem; font-weight:850; text-decoration:none; }
.button.primary { color:var(--burgundy-950); background:linear-gradient(135deg,var(--gold-500),var(--gold-300)); box-shadow:0 18px 44px rgba(244,197,66,.18); }
.metric-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:1.8rem 0; overflow:hidden; border:1px solid rgba(255,227,138,.24); border-radius:.75rem; background:rgba(255,227,138,.2); }
.metric-strip div { display:grid; padding:1rem; background:rgba(38,4,13,.64); }
.metric-strip span { color:var(--gold-300); font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.metric-strip strong { font-size:clamp(1.25rem,2vw,2rem); }
.metric-strip small { color:rgba(255,255,255,.55); }
.reconstruction-stage { overflow:hidden; border:1px solid rgba(255,227,138,.3); border-radius:1rem; background:rgba(255,255,255,.06); box-shadow:0 35px 90px rgba(0,0,0,.3); backdrop-filter:blur(15px); }
.stage-head { display:flex; justify-content:space-between; gap:1rem; padding:1rem; color:rgba(255,244,201,.75); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.stage-head strong { color:white; }
.pixel-demo { position:relative; min-height:32rem; overflow:hidden; background:radial-gradient(circle at 50% 46%,rgba(244,197,66,.18),transparent 15rem),#310711; }
.pixel-field { position:absolute; inset:0; opacity:.55; background:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:28px 28px; }
.mask-shape { position:absolute; width:16rem; height:16rem; left:50%; top:50%; translate:-50% -50%; background:var(--gold-500); clip-path:polygon(6% 22%,36% 10%,54% 28%,77% 5%,96% 36%,77% 56%,89% 91%,55% 78%,31% 98%,18% 65%,0 49%); box-shadow:0 0 80px rgba(244,197,66,.55); animation:morph 8s ease-in-out infinite; }
@keyframes morph { 50% { clip-path:polygon(13% 5%,46% 18%,70% 3%,91% 28%,74% 49%,100% 76%,65% 92%,42% 72%,9% 93%,18% 55%,0 31%); rotate:8deg; } }
.context-rings { position:absolute; inset:50% auto auto 50%; translate:-50% -50%; }
.context-rings i { position:absolute; inset:50% auto auto 50%; width:20rem; height:20rem; translate:-50% -50%; border:1px solid rgba(255,227,138,.32); border-radius:50%; animation:ring 3s ease-out infinite; }
.context-rings i:nth-child(2){animation-delay:1s}.context-rings i:nth-child(3){animation-delay:2s}
@keyframes ring { from{scale:.45;opacity:.9} to{scale:1.8;opacity:0} }
.scan-line { position:absolute; inset:0 auto 0 0; width:2px; background:var(--gold-300); box-shadow:0 0 26px var(--gold-500); animation:scan 5s ease-in-out infinite alternate; }
@keyframes scan { to{translate:calc(min(100vw,750px) - 2px)} }
.flow-mini { display:grid; grid-template-columns:auto 1fr auto auto 1fr auto auto 1fr; align-items:center; gap:.55rem; padding:1rem; color:var(--gold-300); }
.flow-mini span { padding:.45rem .55rem; border-radius:.4rem; background:var(--gold-500); color:var(--burgundy-950); font-weight:950; }
.flow-mini b { color:white; font-size:.78rem; }

.section { width:min(1480px,calc(100% - 3rem)); margin:0 auto; padding:clamp(5rem,9vw,9rem) 0; }
.section-title { display:grid; grid-template-columns:minmax(14rem,.4fr) 1fr; gap:.4rem 3rem; align-items:end; margin-bottom:2.5rem; }
.section-title .journal-tag { grid-column:1/-1; }
.section-title h2 { margin:0; color:var(--burgundy-900); font-size:clamp(2.4rem,4vw,4.8rem); line-height:.95; letter-spacing:-.05em; }
.section-title p:last-child { margin:0; max-width:48rem; color:var(--muted); font-size:1.06rem; }
.section-title.compact { grid-template-columns:1fr; }
.section-title.compact p:last-child { max-width:60rem; }
.overview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.principle-card { min-height:21rem; padding:1.6rem; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:.9rem; background:var(--paper-strong); box-shadow:0 18px 50px rgba(38,4,13,.08); }
.principle-card span { width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:50%; color:var(--gold-500); background:var(--burgundy-900); font-weight:900; }
.principle-card h3 { margin:auto 0 .5rem; font-size:2rem; }
.principle-card p { color:var(--muted); }
.principle-card b { color:var(--burgundy-650); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.principle-card.global { color:white; background:var(--burgundy-900); transform:translateY(-1.2rem); }
.principle-card.global p { color:rgba(255,255,255,.72); }
.principle-card.global b { color:var(--gold-500); }
.study-rail { margin-top:2rem; display:grid; grid-template-columns:repeat(6,1fr); overflow:hidden; border:1px solid var(--line); border-radius:.8rem; background:var(--paper-strong); }
.study-rail div { padding:1.2rem; border-right:1px solid var(--line); }
.study-rail div:last-child { border-right:0; }
.study-rail strong,.study-rail span { display:block; }
.study-rail strong { color:var(--burgundy-800); font-size:1.25rem; }
.study-rail span { color:var(--muted); font-size:.78rem; }

.architecture { width:100%; padding-inline:max(1.5rem,calc((100% - 1480px)/2)); color:white; background:var(--burgundy-950); }
.architecture .section-title h2 { color:white; }
.architecture .section-title p:last-child { color:rgba(255,255,255,.65); }
.pipeline { display:grid; grid-template-columns:repeat(6,1fr); gap:.75rem; }
.pipeline-button { position:relative; min-height:9rem; padding:1rem; text-align:left; color:white; border:1px solid rgba(255,227,138,.22); border-radius:.7rem; background:rgba(255,255,255,.05); transition:.25s ease; }
.pipeline-button::after { content:"→"; position:absolute; right:-.7rem; top:50%; color:var(--gold-500); z-index:2; }
.pipeline-button:last-child::after { display:none; }
.pipeline-button span { display:block; color:var(--gold-500); font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.pipeline-button strong { display:block; margin-top:2.5rem; font-size:1rem; }
.pipeline-button.active,.pipeline-button:hover,.pipeline-button:focus-visible { color:var(--burgundy-950); background:var(--gold-500); transform:translateY(-5px); outline:none; }
.pipeline-button.active span,.pipeline-button:hover span,.pipeline-button:focus-visible span { color:var(--burgundy-800); }
.stage-detail { margin-top:1rem; min-height:18rem; padding:clamp(1.4rem,3vw,3rem); display:grid; grid-template-columns:auto 1fr 1fr; gap:2rem; align-items:start; border:1px solid rgba(255,227,138,.24); border-radius:.9rem; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); }
.stage-index { color:var(--gold-500); font-size:clamp(4rem,8vw,8rem); font-weight:950; line-height:.75; opacity:.35; }
.stage-detail h3 { margin:0; font-size:2rem; }
.stage-detail p:not(.micro-label) { color:rgba(255,255,255,.68); }
.stage-detail dl { margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.stage-detail dl div { padding:1rem; border:1px solid rgba(255,227,138,.18); border-radius:.55rem; }
.stage-detail dt { color:rgba(255,255,255,.55); font-size:.72rem; text-transform:uppercase; }
.stage-detail dd { margin:.25rem 0 0; color:var(--gold-300); font-weight:850; }
.formula-ribbon { margin-top:1rem; padding:1.2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; border-radius:.7rem; color:var(--burgundy-950); background:var(--gold-500); }
.formula-ribbon strong { font-family:Georgia,serif; font-size:clamp(1rem,2vw,1.5rem); }
.formula-ribbon span { font-size:.78rem; font-weight:800; }

.ablation-layout { display:grid; grid-template-columns:20rem 1fr; gap:1rem; }
.variant-list { display:grid; align-content:start; gap:.5rem; }
.variant-button { padding:1rem; display:flex; align-items:center; justify-content:space-between; text-align:left; border:1px solid var(--line); border-radius:.6rem; color:var(--ink); background:var(--paper-strong); }
.variant-button span { color:var(--muted); font-size:.75rem; }
.variant-button.active,.variant-button:hover { color:white; background:var(--burgundy-800); }
.variant-button.active span,.variant-button:hover span { color:var(--gold-300); }
.metric-workbench { min-height:31rem; padding:clamp(1.5rem,3vw,3rem); border-radius:.9rem; color:white; background:var(--burgundy-900); box-shadow:var(--shadow); }
.metric-head { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.metric-head h3 { margin:0; font-size:2.3rem; }
.balance-badge { padding:.45rem .65rem; border:1px solid rgba(255,227,138,.3); border-radius:999px; color:var(--gold-300); font-size:.75rem; }
.metric-bars { margin-top:2.5rem; display:grid; gap:1.25rem; }
.metric-row { display:grid; grid-template-columns:8rem 1fr 8rem; gap:1rem; align-items:center; }
.metric-label strong,.metric-label small { display:block; }
.metric-label small { color:rgba(255,255,255,.5); }
.bar-track { height:1rem; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }
.bar-fill { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--gold-500),var(--gold-300)); transition:width .65s cubic-bezier(.2,.8,.2,1); }
.metric-number { text-align:right; color:var(--gold-300); font-weight:900; }
.metric-number small { display:block; color:rgba(255,255,255,.5); font-weight:500; }
.interpretation { margin:2.5rem 0 0; padding-top:1.25rem; border-top:1px solid rgba(255,227,138,.18); color:rgba(255,255,255,.72); }
.comparison-wrap { margin-top:2rem; overflow-x:auto; border:1px solid var(--line); border-radius:.75rem; background:var(--paper-strong); }
table { width:100%; border-collapse:collapse; }
caption { padding:1rem; text-align:left; color:var(--burgundy-800); font-weight:900; }
th,td { padding:.9rem 1rem; border-top:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:var(--burgundy-800); background:var(--gold-100); }
tbody tr.active { background:rgba(244,197,66,.18); }

.evidence { width:100%; padding-inline:max(1.5rem,calc((100% - 1480px)/2)); background:linear-gradient(180deg,var(--paper),#f7eac7); }
.evidence-frame { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:.9rem; background:white; box-shadow:var(--shadow); }
.image-viewport { overflow:auto; padding:1rem; }
.image-viewport img { display:block; width:100%; min-width:900px; height:auto; }
.evidence-frame figcaption { display:flex; justify-content:space-between; gap:2rem; padding:1.2rem; color:white; background:var(--burgundy-900); }
.evidence-frame figcaption span { max-width:48rem; color:rgba(255,255,255,.66); }
.finding-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.finding-grid article { padding:1.4rem; border:1px solid var(--line); border-radius:.75rem; background:rgba(255,255,255,.65); }
.finding-grid span { color:var(--burgundy-650); font-size:.75rem; font-weight:900; text-transform:uppercase; }
.finding-grid h3 { margin:.35rem 0; }
.finding-grid p { color:var(--muted); }

.calculator-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:1rem; }
.calculator-card { padding:clamp(1.4rem,3vw,2.5rem); border:1px solid var(--line); border-radius:.9rem; background:var(--paper-strong); box-shadow:0 18px 55px rgba(38,4,13,.1); }
.calc-heading { display:flex; gap:1rem; align-items:start; }
.calc-heading > span { width:2.5rem; height:2.5rem; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:var(--gold-500); background:var(--burgundy-900); font-weight:900; }
.calc-heading h3 { margin:0; font-size:1.6rem; }
.calc-heading p { margin:.2rem 0; color:var(--muted); }
.preset-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-top:1.35rem; }
.preset-toolbar > span { margin-right:.25rem; color:var(--muted); font-size:.75rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.preset-toolbar button { min-height:2.15rem; padding:.4rem .7rem; border:1px solid var(--line); border-radius:999px; color:var(--burgundy-800); background:white; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s; }
.preset-toolbar button:hover,.preset-toolbar button.active { border-color:var(--burgundy-650); color:white; background:var(--burgundy-650); transform:translateY(-1px); }
.preset-toolbar .preset-reset { margin-left:auto; color:var(--muted); }
.loss-controls { margin-top:1.1rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem; }
.loss-field { display:grid; grid-template-columns:1fr 5rem; gap:.45rem .7rem; align-items:center; padding:.75rem; border:1px solid var(--line); border-radius:.55rem; background:rgba(255,255,255,.45); }
.loss-field span { font-size:.82rem; }
.loss-field small { color:var(--burgundy-650); font-weight:800; }
.loss-field input[type="range"] { grid-column:1/-1; width:100%; accent-color:var(--burgundy-650); cursor:pointer; }
input[type="number"] { width:100%; min-height:2.6rem; padding:.55rem; border:1px solid var(--line); border-radius:.4rem; color:var(--ink); background:white; }
.alpha-control { margin-top:1rem; display:grid; grid-template-columns:1fr auto; gap:.5rem; color:var(--burgundy-800); font-weight:800; }
.alpha-control input { grid-column:1/-1; accent-color:var(--burgundy-650); }
.equation-card { margin-top:1rem; padding:1rem; display:flex; justify-content:space-between; align-items:end; border-radius:.65rem; color:white; background:var(--burgundy-900); }
.equation-card strong { color:var(--gold-500); font-size:2rem; }
.contribution-track { display:flex; height:1rem; margin-top:.8rem; overflow:hidden; border-radius:999px; background:var(--gold-100); }
.contribution-track span { height:100%; min-width:0; transition:width .3s; }
.contribution-legend { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem .8rem; margin-top:.8rem; }
.contribution-legend span { display:flex; gap:.35rem; color:var(--muted); font-size:.72rem; }
.contribution-legend i { width:.55rem; height:.55rem; margin-top:.18rem; flex:0 0 auto; border-radius:50%; }
.contribution-legend b { margin-left:auto; color:var(--burgundy-800); }
.loss-explanation { margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:.65rem; background:rgba(255,247,224,.65); }
.loss-explanation > span,.compare-heading span { color:var(--burgundy-650); font-size:.7rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.loss-explanation code { display:block; margin-top:.45rem; overflow-wrap:anywhere; color:var(--burgundy-900); font:800 .84rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.loss-terms { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.loss-terms span { padding:.28rem .48rem; border-radius:.35rem; color:var(--muted); background:white; font-size:.7rem; }
.loss-terms b { color:var(--burgundy-800); }
.loss-insight { position:relative; margin-top:.75rem; padding:.85rem 1rem .85rem 2.5rem; border-left:4px solid var(--gold-500); border-radius:.5rem; color:var(--burgundy-900); background:var(--gold-100); font-size:.84rem; font-weight:750; }
.loss-insight::before { content:"i"; position:absolute; left:.8rem; top:.73rem; width:1.15rem; height:1.15rem; display:grid; place-items:center; border-radius:50%; color:white; background:var(--burgundy-650); font-size:.7rem; font-weight:900; }
.configuration-compare { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.compare-heading { display:flex; justify-content:space-between; gap:1rem; align-items:end; }
.compare-heading h4 { margin:.15rem 0 0; color:var(--burgundy-900); font-size:1.25rem; }
.compare-heading p { max-width:20rem; margin:0; color:var(--muted); font-size:.76rem; text-align:right; }
.compare-actions { display:flex; gap:.5rem; margin-top:.8rem; }
.compare-actions button,.compare-slots button { min-height:2.15rem; padding:.42rem .7rem; border:1px solid var(--line); border-radius:.45rem; color:var(--burgundy-800); background:white; font:inherit; font-size:.75rem; font-weight:850; cursor:pointer; }
.compare-actions button:hover,.compare-slots button:not(:disabled):hover { border-color:var(--burgundy-650); color:white; background:var(--burgundy-650); }
.compare-slots { display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem; margin-top:.65rem; }
.compare-slots article { display:grid; grid-template-columns:1fr auto; gap:.18rem .6rem; padding:.8rem; border:1px solid var(--line); border-radius:.55rem; background:rgba(255,255,255,.52); }
.compare-slots span { color:var(--muted); font-size:.68rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.compare-slots strong { grid-column:1; color:var(--burgundy-900); font-size:1.15rem; }
.compare-slots small { grid-column:1; color:var(--muted); }
.compare-slots button { grid-column:2; grid-row:1/4; align-self:center; }
.compare-slots button:disabled { opacity:.42; cursor:not-allowed; }
.compare-delta { display:block; margin-top:.65rem; padding:.7rem .8rem; border-radius:.45rem; color:white; background:var(--burgundy-900); font-size:.78rem; font-weight:800; }
.psnr-card > label { display:grid; gap:.4rem; margin-top:2rem; color:var(--burgundy-800); font-weight:800; }
.psnr-card > .mse-log-control { grid-template-columns:1fr auto; gap:.35rem .6rem; margin-top:.8rem; color:var(--muted); font-size:.78rem; }
.mse-log-control output { color:var(--burgundy-800); font-weight:900; }
.mse-log-control input { grid-column:1/-1; width:100%; accent-color:var(--burgundy-650); }
.psnr-dial { position:relative; width:min(100%,22rem); margin:2rem auto 0; }
.psnr-dial svg { width:100%; overflow:visible; }
.dial-bg,.dial-value { fill:none; stroke-width:18; stroke-linecap:round; }
.dial-bg { stroke:var(--gold-100); }
.dial-value { stroke:var(--burgundy-650); stroke-dasharray:251.3; stroke-dashoffset:125.6; transition:stroke-dashoffset .4s; }
.psnr-dial div { position:absolute; inset:auto 0 0; display:flex; justify-content:center; align-items:baseline; gap:.35rem; }
.psnr-dial strong { color:var(--burgundy-900); font-size:3rem; }
.calc-note { text-align:center; color:var(--muted); }
.psnr-curve-card { margin-top:1.2rem; padding:.8rem; border:1px solid var(--line); border-radius:.65rem; background:rgba(255,247,224,.58); }
.psnr-curve-card > div { display:flex; justify-content:space-between; gap:.6rem; color:var(--muted); font-size:.72rem; font-weight:850; text-transform:uppercase; }
.psnr-curve-card strong { color:var(--burgundy-650); }
.psnr-curve-card svg { display:block; width:100%; margin-top:.45rem; overflow:visible; }
.psnr-curve-card line { stroke:rgba(74,4,21,.2); stroke-width:1; }
#psnr-curve-path { fill:none; stroke:var(--burgundy-650); stroke-width:4; stroke-linecap:round; }
#psnr-curve-marker { fill:var(--gold-500); stroke:var(--burgundy-900); stroke-width:3; transition:cx .25s,cy .25s; }
.psnr-curve-card text { fill:var(--muted); font-size:9px; font-weight:700; }
.inverse-psnr { margin-top:1rem; padding:1rem; border-radius:.65rem; color:white; background:var(--burgundy-900); }
.inverse-psnr > div:first-child span { color:var(--gold-500); font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.inverse-psnr h4 { margin:.15rem 0 .8rem; font-size:1rem; }
.inverse-psnr > label { display:flex; justify-content:space-between; gap:.8rem; align-items:center; font-size:.78rem; font-weight:800; }
.inverse-psnr input { width:6rem; min-height:2.25rem; color:var(--ink); }
.inverse-result { display:grid; grid-template-columns:1fr auto; gap:.25rem .7rem; align-items:center; margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.18); }
.inverse-result > span { color:rgba(255,255,255,.65); font-size:.7rem; }
.inverse-result strong { grid-column:1; color:var(--gold-500); font:900 1.15rem ui-monospace,SFMono-Regular,Consolas,monospace; }
.inverse-result button { grid-column:2; grid-row:1/3; min-height:2.35rem; padding:.45rem .7rem; border:0; border-radius:.4rem; color:var(--burgundy-900); background:var(--gold-500); font:inherit; font-size:.72rem; font-weight:900; cursor:pointer; }
.inverse-result button:hover { background:var(--gold-300); }
.reconstruction-mini { margin-top:2rem; padding-top:1rem; display:grid; grid-template-columns:1fr auto 1fr; gap:.6rem; align-items:end; border-top:1px solid var(--line); }
.reconstruction-mini label { font-size:.78rem; }
.reconstruction-guide { grid-column:1/-1; margin:0 0 .35rem; padding:.65rem .75rem; border-radius:.45rem; color:var(--muted); background:rgba(255,247,224,.7); font-size:.72rem; line-height:1.45; }
.reconstruction-loss-field { display:grid; gap:.45rem; align-self:stretch; }
.reconstruction-loss-field > small { color:var(--muted); font-size:.68rem; line-height:1.4; }
.mini-range { display:grid; grid-template-columns:1fr auto; gap:.45rem; align-items:center; margin-top:auto; }
.mini-range input { width:100%; accent-color:var(--burgundy-650); }
.mini-range output { min-width:2.7rem; color:var(--burgundy-800); font-size:.72rem; font-weight:900; text-align:right; }
.reconstruction-mini > b { align-self:start; margin-top:2rem; }
.reconstruction-mini strong { grid-column:1/-1; text-align:right; color:var(--burgundy-800); font-size:1.3rem; }
.limitations { display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; align-items:start; }
.limitations h2 { margin:0; color:var(--burgundy-900); font-size:clamp(2.4rem,4vw,4.5rem); line-height:.95; }
.limitations ul { margin:0; padding:0; list-style:none; counter-reset:limits; }
.limitations li { counter-increment:limits; padding:1rem 0 1rem 3.2rem; position:relative; border-bottom:1px solid var(--line); }
.limitations li::before { content:counter(limits,decimal-leading-zero); position:absolute; left:0; color:var(--burgundy-650); font-weight:900; }

/* Locked reference footer */
.footer { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1rem; padding:2.2rem 1rem 3rem; color:rgba(255,250,240,.72); background:var(--burgundy-950); }
.footer strong { color:var(--gold-500); }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (max-width:1100px) {
  .hero-grid,.section-title,.ablation-layout,.calculator-grid,.limitations { grid-template-columns:1fr; }
  .hero-grid { min-height:auto; }
  .overview-grid,.finding-grid { grid-template-columns:1fr; }
  .principle-card.global { transform:none; }
  .study-rail { grid-template-columns:repeat(3,1fr); }
  .pipeline { grid-template-columns:repeat(3,1fr); }
  .pipeline-button:nth-child(3)::after { display:none; }
  .stage-detail { grid-template-columns:auto 1fr; }
  .stage-detail dl { grid-column:1/-1; }
}
@media (max-width:680px) {
  .topbar { align-items:flex-start; flex-direction:column; }
  .nav { width:100%; overflow-x:auto; }
  .brand { max-width:100%; }
  .brand small { max-width:none; font-size:.86rem; }
  .hero-grid,.section { width:min(100% - 2rem,1480px); }
  .hero h1 { max-width:none; font-size:clamp(2.65rem,12vw,3.5rem); }
  .metric-strip { grid-template-columns:1fr; }
  .pixel-demo { min-height:23rem; }
  .flow-mini { grid-template-columns:auto 1fr auto; }
  .flow-mini i:nth-of-type(2) { display:none; }
  .section-title { grid-template-columns:1fr; }
  .study-rail { grid-template-columns:repeat(2,1fr); }
  .pipeline { grid-template-columns:repeat(2,1fr); }
  .pipeline-button:nth-child(3)::after { display:block; }
  .pipeline-button:nth-child(2n)::after { display:none; }
  .stage-detail { grid-template-columns:1fr; }
  .stage-index { font-size:4rem; }
  .stage-detail dl { grid-template-columns:1fr; }
  .formula-ribbon,.evidence-frame figcaption { align-items:flex-start; flex-direction:column; }
  .metric-row { grid-template-columns:5.4rem 1fr; }
  .metric-number { grid-column:2; }
  .loss-controls { grid-template-columns:1fr; }
  .loss-field { grid-template-columns:1fr 6.5rem; }
  .contribution-legend { grid-template-columns:repeat(2,1fr); }
  .preset-toolbar .preset-reset { margin-left:0; }
  .compare-heading { align-items:flex-start; flex-direction:column; }
  .compare-heading p { text-align:left; }
  .compare-actions,.compare-slots { grid-template-columns:1fr; }
  .compare-actions { flex-direction:column; }
  .reconstruction-mini { grid-template-columns:1fr; }
  .reconstruction-mini > b { display:none; }
  .image-viewport img { min-width:720px; }
}