:root {
      /* Sampled directly from the paper figures */
      --purple:    #9b6fb5;
      --indigo:    #4f62d4;
      --sky:       #56B4E9;
      --green:     #009E73;
      --orange:    #E69F00;
      --accent:    #B04080;
      --accent-lt: #f5e6ef;
      --hero-color: #B04080;
      /* Page palette */
      --bg:        #ffffff;
      --bg2:       #f7f8fc;
      --bg3:       #eef0f8;
      --border:    #e2e5ef;
      --border2:   #c8cde0;
      --text:      #1a1d2e;
      --muted:     #5a6080;
      --muted2:    #8890b0;
      --serif: 'Source Serif 4', Georgia, serif;
      --mono:  'JetBrains Mono', monospace;
      --sans:  'Inter', system-ui, sans-serif;
    }
    *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
    html { scroll-behavior:smooth }
    body { background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.7; }

    /* ── NAV ── */
    nav {
      position:sticky; top:0; z-index:100;
      background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
      border-bottom:1px solid var(--border);
      padding:0 40px; display:flex; align-items:center; justify-content:space-between; height:52px;
    }
    .nav-brand { font-family:var(--mono); font-size:14px; color:var(--accent); letter-spacing:.05em; font-weight:500 }
    .nav-links { display:flex; gap:28px }
    .nav-links a { font-size:14px; color:var(--muted); text-decoration:none; transition:color .15s }
    .nav-links a:hover { color:var(--accent) }
    @media(max-width:600px) { .nav-links { display:none } }

    /* ── HERO ── */
    .hero {
      padding:80px 24px 64px; text-align:center;
      background:linear-gradient(180deg,#f3f4fb 0%,#ffffff 100%);
      border-bottom:1px solid var(--border);
      overflow:visible;
    }
    .badge {
      display:inline-flex; align-items:center; gap:7px;
      font-family:var(--mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase;
      color:var(--accent); background:var(--accent-lt);
      border:1px solid rgba(79,98,212,.2); border-radius:100px;
      padding:5px 16px; margin-bottom:24px; animation:up .5s ease both;
    }
    .badge-dot { width:5px; height:5px; border-radius:50%; background:var(--accent) }
    h1 {
      font-family:var(--serif); font-size:clamp(1.9rem,4.5vw,3.2rem); font-weight:600;
      line-height:1.15; letter-spacing:-.015em; color:var(--text);
      max-width:800px; margin:0 auto 18px; animation:up .5s .07s ease both;
    }
    h1 em { color:var(--accent); font-style:italic; font-weight:400 }
    .hero-sub { font-size:1.05rem; color:var(--muted); max-width:580px; margin:0 auto 32px; animation:up .5s .13s ease both }
    .authors {
      display:flex; flex-direction:column; align-items:center; gap:4px;
      font-size:.98rem; margin-bottom:6px; animation:up .5s .18s ease both;
    }
    .author-row { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; }
    .author-item { white-space:nowrap; }
    .authors a { color:var(--text); text-decoration:none; font-weight:500; border-bottom:1px solid var(--border2); transition:color .15s,border-color .15s }
    .authors a:hover { color:var(--accent); border-color:var(--accent) }
    sup { font-size:.75em; color:var(--muted); vertical-align:super }
    .affils { font-size:.88rem; color:var(--muted2); margin-bottom:32px; animation:up .5s .22s ease both }
    .affils span { margin:0 8px }

    /* ── BUTTONS ── */
    .btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:52px; animation:up .5s .26s ease both }
    .btn {
      display:inline-flex; align-items:center; gap:7px;
      padding:9px 20px; border-radius:7px; border:1px solid;
      font-family:var(--mono); font-size:13px; letter-spacing:.04em;
      text-decoration:none; font-weight:500; transition:all .15s; cursor:pointer;
    }
    .btn-primary { background:var(--accent); color:#fff; border-color:var(--accent) }
    .btn-primary:hover { background:#3d50c0 }
    .btn-outline { background:#fff; color:var(--text); border-color:var(--border2) }
    .btn-outline:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-lt) }
    .btn svg { width:14px; height:14px; flex-shrink:0 }
    .btn-sub { font-size:11px; opacity:.7; margin-left:2px; letter-spacing:.03em }
    .teaser-wrap {
      max-width:1140px;
      margin:0 auto;
      animation:up .5s .3s ease both;
      overflow:visible;
      display:block;
    }

    /* ── SHARED ── */
    .wrap { max-width:1080px; margin:0 auto; padding:0 24px }
    section { padding:72px 0; border-top:1px solid var(--border) }
    .sec-tag {
      font-family:var(--mono); font-size:14px; letter-spacing:.16em; text-transform:uppercase;
      color:var(--accent); display:block; margin-bottom:12px; font-weight: bold;
    }
    h2 {
      font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,2.8vw,2.15rem);
      line-height:1.2; letter-spacing:-.01em; margin-bottom:20px; color:var(--text);
    }
    h3 { font-family:var(--serif); font-weight:600; font-size:1.2rem; margin-bottom:8px; color:var(--text) }
    p { color:var(--muted); font-size:1.03rem; margin-bottom:14px }
    p:last-child { margin-bottom:0 }
    p strong { color:var(--text) }

    /* ── FIGURES ── */
    .fig-frame {
      border-radius:10px; border:1px solid var(--border); background:#fff; overflow:hidden;
      box-shadow:0 1px 4px rgba(0,0,0,.06);
        padding: 5px; /* reset default figure padding for easier cropping and consistent spacing */
    }
    .fig-frame img { width:100%; height:auto; display:block }
    /* Per-side crop controls for specific figures */
    .fig-frame.side-crop { position:relative; overflow:hidden; }
    .fig-frame.side-crop img {
      position:absolute;
      top:calc(-1 * var(--crop-top, 0%));
      left:calc(-1 * var(--crop-left, 0%));
      width:calc(100% + var(--crop-left, 0%) + var(--crop-right, 0%));
      height:calc(100% + var(--crop-top, 0%) + var(--crop-bottom, 0%));
      object-fit:cover;
      display:block;
    }
    .fig-frame.fig2-crop {
      aspect-ratio:18.5/7.5;
      --crop-left:1%;
      --crop-right:0.4%;
      --crop-top:-2%;
      --crop-bottom:0%;
    }
    .fig-frame.fig3-crop {
      aspect-ratio:18/7.5;
      --crop-left:2.5%;
      --crop-right:2.5%;
      --crop-top:0%;
      --crop-bottom:0%;
    }
    .fig-frame.ph { display:flex; align-items:center; justify-content:center; min-height:200px; padding:40px; background:var(--bg2) }
    .ph-inner {
      display:flex; flex-direction:column; align-items:center; gap:10px;
      color:var(--muted2); font-family:var(--mono); font-size:12px; text-align:center;
    }
    .ph-inner svg { opacity:.3 }
    .fig-cap { text-align:left; margin-top:12px; font-size:.95rem; color:var(--muted); line-height:1.6; padding:0 2px }
    .fig-cap strong { color:var(--text) }
    .fig-cap-list { margin:8px 0 0 1.6em; padding:0; list-style-type: none; counter-reset: fig-cap-counter; }
    .fig-cap-list li { margin:4px 0; counter-increment: fig-cap-counter; position: relative; }
    .fig-cap-list li::before { content: "(" counter(fig-cap-counter, lower-alpha) ") "; position: absolute; left: -1.6em; }

    /* ── ABSTRACT ── */
    .abstract {
      background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--accent);
      border-radius:0 9px 9px 0; padding:28px 32px; font-size:1.02rem; line-height:1.8; color:#3a4060;
    }

    /* ── VIDEO GRID ── */
    .video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:32px }
    .video-card {
      border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--bg2);
      transition:border-color .15s,box-shadow .15s;
    }
    .video-card:hover { border-color:var(--border2); box-shadow:0 2px 12px rgba(0,0,0,.07) }
    .video-label {
      padding:9px 14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
      border-bottom:1px solid var(--border); display:flex; align-items:center; gap:7px; background:#fff; color:var(--muted);
    }
    .ldot { width:7px; height:7px; border-radius:50%; flex-shrink:0 }
    .video-inner { aspect-ratio:16/9; background:var(--bg3); overflow:hidden; display:flex; align-items:center; justify-content:center }
    .video-inner video, .video-inner iframe { width:100%; height:100%; object-fit:cover; display:block; border:none }

    /* ── SLIDER ── */
    .img-compare {
      position:relative; overflow:hidden; border-radius:10px; border:1px solid var(--border);
      cursor:col-resize; user-select:none; background:var(--bg3); aspect-ratio:16/7;
      box-shadow:0 1px 4px rgba(0,0,0,.06);
    }
    .cmp-side { position:absolute; inset:0 }
    .cmp-side img { width:100%; height:100%; object-fit:cover }
    .cmp-right { clip-path:inset(0 50% 0 0) }
    .cmp-divider { position:absolute; top:0; bottom:0; left:50%; width:2px; background:white; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 6px rgba(0,0,0,.15) }
    .cmp-handle {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:38px; height:38px; border-radius:50%; background:white; border:1.5px solid rgba(0,0,0,.1);
      display:flex; align-items:center; justify-content:center; pointer-events:none; box-shadow:0 2px 8px rgba(0,0,0,.15);
    }
    .cmp-handle svg { width:15px; height:15px }
    .cmp-tag {
      position:absolute; top:12px; padding:3px 11px; background:rgba(255,255,255,.88);
      backdrop-filter:blur(4px); border-radius:100px; font-family:var(--mono); font-size:11.5px;
      letter-spacing:.06em; border:1px solid rgba(0,0,0,.07);
    }
    .tag-l { left:12px; color:var(--orange) }
    .tag-r { right:12px; color:var(--accent); font-weight:500 }

    /* ── ITER TABLE ── */
    .iter-scroll { overflow:visible; margin-top:36px }
    .hero-controls {
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      margin:18px 0 10px;
    }
    .hero-control-row {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
      width:100%;
    }
    .hero-control-label {
      font-family:var(--mono);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted2);
    }
    .hero-control-options {
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      gap:6px;
    }
    .hero-control-btn {
      border:1px solid var(--border2);
      background:#fff;
      color:var(--muted);
      border-radius:999px;
      padding:6px 11px;
      font-family:var(--mono);
      font-size:12px;
      letter-spacing:.05em;
      text-transform:uppercase;
      cursor:pointer;
      transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .hero-control-btn:hover {
      border-color:rgba(176,64,128,.35);
      color:var(--text);
      background:#fff9fc;
    }
    .hero-control-btn:focus-visible {
      outline:none;
      box-shadow:0 0 0 2px rgba(176,64,128,.2);
      border-color:rgba(176,64,128,.5);
    }
    .hero-control-btn.is-active {
      background:var(--hero-color);
      border-color:var(--hero-color);
      color:#fff;
      box-shadow:0 1px 4px color-mix(in srgb, var(--hero-color) 40%, transparent);
    }
    .hero-control-btn.is-active:hover {
      background:color-mix(in srgb, var(--hero-color) 80%, black);
      border-color:color-mix(in srgb, var(--hero-color) 80%, black);
      color:#fff;
    }
    .hero-btn-wrap {
      position:relative;
      display:inline-block;
    }
    .hero-paper-badge {
      position:absolute;
      top:-8px;
      right:-8px;
      background:#fff;
      color:var(--muted);
      border:1px solid var(--border2);
      font-size:10px;
      font-weight:700;
      letter-spacing:.04em;
      text-transform:uppercase;
      text-decoration:none;
      padding:2px 5px;
      border-radius:999px;
      white-space:nowrap;
      line-height:1.4;
      box-shadow:0 1px 4px rgba(0,0,0,.1);
      transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
      z-index:1;
    }
    .hero-paper-badge:hover {
      border-color:rgba(255,128,128,.5);
      color:var(--text);
      background:#fff5f5;
      transform:scale(1.08);
    }
    .hero-paper-badge.is-active {
      background:#FF8080;
      color:#fff;
      border-color:#FF8080;
      box-shadow:0 1px 4px rgba(255,128,128,.4);
    }
    .hero-paper-badge.is-active:hover {
      background:color-mix(in srgb, #FF8080 80%, black);
      border-color:color-mix(in srgb, #FF8080 80%, black);
    }
    .hero-controls .hero-scene-meta {
      text-align:center;
      line-height:1.2;
    }
    .hero-controls label {
      display:flex;
      flex-direction:column;
      gap:4px;
      font-family:var(--mono);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted2);
      text-align:left;
    }
    .hero-scene-meta {
      font-family:var(--mono);
      font-size:12px;
      letter-spacing:.06em;
      color:var(--muted2);
      text-transform:uppercase;
      margin-left:2px;
      padding-bottom:2px;
    }
    .hero-time-row {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      margin:12px 0 34px;
    }
    .hero-time-slider-wrap {
      position:relative;
      width:min(620px, 84vw);
    }
    .hero-time-slider {
      width:100%;
      accent-color:var(--hero-color);
    }
    .hero-time-marks {
      position:absolute;
      left:0;
      right:0;
      top:100%;
      height:26px;
      pointer-events:none;
    }
    .hero-time-mark {
      position:absolute;
      top:0;
      width:1.5px;
      height:7px;
      background:rgba(136,144,176,.7);
      transform:translateX(-50%);
      border-radius:1px;
    }
    .hero-time-mark.is-active {
      background:var(--hero-color);
      height:9px;
    }
    .hero-time-mark-label {
      position:absolute;
      top:9px;
      left:50%;
      transform:translateX(-50%);
      font-family:var(--mono);
      font-size:10px;
      line-height:1;
      color:rgba(136,144,176,.7);
      white-space:nowrap;
    }
    .hero-time-mark.is-active .hero-time-mark-label {
      color:var(--hero-color);
    }
    .hero-time-mark.is-first .hero-time-mark-label {
      left:0;
      transform:none;
    }
    .hero-time-mark.is-last .hero-time-mark-label {
      left:auto;
      right:0;
      transform:none;
    }
    .hero-time-value {
      width:13ch;
      flex:0 0 13ch;
      white-space:nowrap;
      text-align:left;
      font-family:var(--mono);
      font-size:13px;
      letter-spacing:.06em;
      color:var(--muted2);
    }
    .hero-method-grid {
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:10px;
      margin-top:10px;
    }
    .hero-method-card {
      border:1px solid var(--border);
      border-radius:8px;
      padding:8px;
      background:#fff;
    }
    .hero-method-tag {
      font-family:var(--mono);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
      margin-bottom:6px;
      text-align:center;
      font-weight:600;
    }
    .hero-method-tag.method-tone-adam { color:#E69F00; }
    .hero-method-tag.method-tone-resplat { color:#009E73; }
    .hero-method-tag.method-tone-vanilla { color:#F0C541; }
    .hero-method-tag.method-tone-lo { color:#56B4E9; }
    .hero-method-tag.method-tone-g3r { color:#56B4E9; }
    .hero-method-tag.method-tone-l2s-s { color:#FF8080; }
    .hero-method-tag.method-tone-l2ss { color:#FF8080; }
    .hero-method-tag.method-tone-l2sd { color:#B04080; }
    .hero-method-tag.method-tone-l2splat { color:#B04080; }
    .hero-method-tag.is-ours { font-weight:700; }
    .hero-extra-grid {
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:10px;
      margin-top:12px;
      align-items:start;
    }
    .hero-extra-item {
      border:1px solid var(--border);
      border-radius:8px;
      background:#fff;
      padding:8px;
    }
    .hero-extra-label {
      display:block;
      font-family:var(--mono);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted2);
      margin-bottom:6px;
      text-align:center;
    }
    .hero-extra-curves {
      grid-column:2 / -1;
      border:1px solid var(--border);
      border-radius:8px;
      background:#fff;
      padding:8px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .iter-table { width:100%; border-collapse:collapse; min-width:0 }
    .iter-table th {
      font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
      color:var(--muted2); padding:0 6px 12px; text-align:center; border-bottom:1px solid var(--border);
    }
    .iter-table td { padding:8px 5px; text-align:center; vertical-align:middle }
    .row-lbl { font-family:var(--mono); font-size:14px; color:var(--muted2); text-align:center; padding-right:0; padding-bottom:8px; white-space:nowrap; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
      writing-mode:vertical-rl; transform:rotate(180deg); vertical-align:middle; }
    .row-lbl.ours { color:var(--accent) }
    .rdot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle }
    .iter-cell { border-radius:5px; overflow:hidden; border:1px solid var(--border); background:var(--bg3); aspect-ratio:16/9; width:100%; min-width:0 }
    .iter-cell img { width:100%; height:100%; object-fit:cover; display:block }
    .iter-cell.ph { display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:var(--muted2) }
    .iter-cell--oom { background:var(--bg2); border-style:dashed; cursor:default }
    .iter-cell--oom span { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted2); letter-spacing:.08em }
    .teaser-wrap .iter-cell { min-width:0 }
    .teaser-wrap .iter-table { border-collapse:collapse; table-layout:fixed; width:100%; min-width:0 }
    .teaser-wrap .iter-scroll { margin-top:0; overflow:visible; -webkit-overflow-scrolling:touch; max-width:100% }
    .teaser-wrap .iter-table td, .teaser-wrap .iter-table th { padding:6px 4px }
    .teaser-wrap .iter-table th:first-child,
    .teaser-wrap .iter-table th.row-lbl { width:32px }
    .iter-col-label { width:32px }
    .iter-col-step { width:auto }

    /* tfoot extra rows: Init / Reference */
    .teaser-extra-row td { border-top:3px solid var(--border2); }
    .teaser-extra-row th { border-top:3px solid var(--border2); }
    .teaser-curves-cell {
      vertical-align:middle;
      padding:8px 16px;
    }
    .teaser-curves-wrap {
      display:flex; flex-direction:column; justify-content:center; gap:0;
    }
    .hero-inline-curves { margin-top:8px; }
    .hero-zoom-cell { overflow:hidden; cursor:default }
    .hero-zoom-wide { width:100% }
    .hero-zoom-cell.hero-legend-crop {
      aspect-ratio:18/1;
    }
    .hero-zoom-cell.hero-legend-crop .hero-legend-img {
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      transform:scale(1.18);
      transform-origin:center;
      display:block;
    }
    .teaser-curves-wrap img { width:100%; height:auto; display:block }
    .hero-curve-media { width:100%; display:block; border:0; background:#fff }
    #heroCurvePreview { aspect-ratio:56/11; overflow:visible; }
    #heroCurvePreview svg { width:100%; height:100%; }
    .teaser-curves-wrap .hero-zoom-cell:last-child { width:95%; margin:4px auto 0; display:block }

    /* Zoom on hover in hero */
    .iter-cell { cursor:zoom-in }
    .iter-cell img { transition:transform .25s ease }
    .iter-cell:hover img { transform:scale(1.08) }

    /* ── TEASER SIDE-BY-SIDE / STACKED ── */
    .teaser-main-flex {
      display:block;
      border-radius:10px;
      overflow:visible;
      margin-bottom:0;
    }
    .teaser-table-side {
      width:100%;
      min-width:0;
      overflow:visible;
    }
    .hero .teaser-wrap .fig-cap {
      display:block;
      clear:both;
      margin-top:12px;
    }
    /* hide the old right-side curves panel — curves now live in the bottom grid */
    .teaser-side-curves { display:none }

    /* Bottom 2×2 grid: [Init][curves] / [Ref][legend] */
    .teaser-bottom {
      display:grid;
      grid-template-columns: auto 1fr;
      /* no fixed row heights — rows size to content */
      border-top:1px solid var(--border); background:#fff;
      border-radius:0 0 10px 10px; overflow:hidden;
      border:1px solid var(--border); border-top:none;
      box-shadow:0 1px 4px rgba(0,0,0,.06);
    }
    .teaser-bottom-item {
      padding:8px 10px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      border-right:1px solid var(--border);
      /* width matches the iter-cell width in the table: 4 data cols + label col,
         so set it to match one table column. Use the same min-width as iter-cell. */
      width:200px;
    }
    .teaser-bottom-item .iter-cell {
      min-width:0; width:100%;
      /* override the global min-width so it truly fills the 200px column */
    }
    .teaser-bottom-item:nth-child(1) { border-bottom:1px solid var(--border) }
    .teaser-bottom-lbl {
      font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
      color:var(--muted2); margin-bottom:6px; text-align:center;
    }
    .teaser-bottom-curves {
      display:flex; align-items:center; justify-content:center;
      padding:8px 16px; overflow:hidden;
    }
    .teaser-bottom-curves:nth-child(2) { border-bottom:1px solid var(--border) }
    /* curves/legend: full width, natural (short) height — no forced aspect ratio */
    .teaser-bottom-curves img {
      width:100%; height:auto; object-fit:contain; display:block;
    }

    @media(max-width:820px) {
      .teaser-main-flex  { flex-direction:column; overflow-x:visible; }
      .teaser-table-side { border-right:none; border-bottom:1px solid var(--border) }
      .teaser-bottom { grid-template-columns:1fr 1fr; }
      .teaser-bottom-item { width:auto }
      .hero-control-row { justify-content:flex-start }
    }

    @media(max-width:760px) {
      .hero { padding-left:12px; padding-right:12px; }
      .hero-scene-meta { display:none; }
      .hero-control-row { justify-content:center; }
      .hero-control-label { width:100%; text-align:center; }
      .teaser-table-side { min-height:220px; }
      .hero-time-row { flex-wrap:wrap; gap:4px 10px; }
      .hero-time-row .hero-control-label { width:auto; flex:1; order:-1; text-align:left; }
      .hero-time-row .hero-time-value { order:0; text-align:right; width:auto; }
      .hero-time-row .hero-time-slider-wrap { order:1; width:100%; }
      .hero-method-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .hero-extra-grid { grid-template-columns:1fr; align-items:start; }
      .hero-extra-item { max-width:50%; margin:0 auto; }
      .hero-extra-curves { grid-column:1; }
      #heroCurvePreview { aspect-ratio:32/9; flex:none; min-height:auto; }
      #heroCurvePreview svg { width:100%; height:100%; }

      .teaser-wrap,
      .teaser-main-flex,
      .teaser-table-side,
      .teaser-wrap .iter-scroll {
        overflow-x:visible;
      }

      .teaser-wrap .iter-table.hero-compact {
        width:100%;
        min-width:0;
        table-layout:fixed;
      }
      .teaser-wrap .iter-table.hero-compact,
      .teaser-wrap .iter-table.hero-compact tbody,
      .teaser-wrap .iter-table.hero-compact tr {
        max-width:100%;
      }
      .teaser-wrap .iter-table.hero-compact .iter-col-step { width:auto; }
      .teaser-wrap .iter-table.hero-compact .iter-cell { min-width:0; }
      .teaser-wrap .iter-table.hero-compact td,
      .teaser-wrap .iter-table.hero-compact th { min-width:0; }
      .teaser-wrap .iter-table.hero-compact .row-lbl {
        font-size:11px;
        letter-spacing:.06em;
      }
      .teaser-wrap .iter-table.hero-compact .teaser-curves-cell { padding:6px 8px; }
      .hero-zoom-cell.hero-legend-crop .hero-legend-img { transform:scale(1.24); }

    }

    @media(max-width:520px) {
      .hero-controls { gap:6px; }
      .hero-control-options { gap:5px; }
      .hero-control-btn { font-size:12px; padding:5px 9px; }
      .hero-zoom-cell.hero-legend-crop .hero-legend-img { transform:scale(1.3); }
      .teaser-wrap .iter-table.hero-ultra-compact .iter-col-label { width:24px; }
      .teaser-wrap .iter-table.hero-ultra-compact .row-lbl {
        font-size:11px;
        letter-spacing:.04em;
      }
      .teaser-wrap .iter-table.hero-ultra-compact .iter-cell { aspect-ratio:4/3; }
      .teaser-wrap .iter-table.hero-ultra-compact .teaser-curves-cell { padding:4px 6px; }
    }

    /* ── STATS ── */
    .stat-strip { display:flex; flex-wrap:wrap; border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:32px; background:var(--bg2) }
    .stat-item { flex:1; min-width:130px; padding:22px 26px; border-right:1px solid var(--border) }
    .stat-item:last-child { border-right:none }
    .stat-val { font-family:var(--serif); font-size:2.2rem; color:var(--accent); line-height:1; display:block; font-weight:600 }
    .stat-lbl { font-size:.9rem; color:var(--muted); margin-top:4px; display:block }

    /* ── CARDS ── */
    .card-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px }
    .card {
      background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:26px;
      transition:border-color .15s,box-shadow .15s;
    }
    .card:hover { border-color:rgba(79,98,212,.25); box-shadow:0 2px 10px rgba(79,98,212,.07) }
    .card-tag { font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:10px; font-weight:bold; }
    .card h3 { font-size:1.05rem; margin-bottom:8px }
    .card p { font-size:.95rem }
    @media(max-width:580px) { .card-grid { grid-template-columns:1fr } }

    /* ── ABLATION ── */
    .abl-bars { margin-top:32px; display:flex; flex-direction:column; gap:11px }
    .abl-row { display:flex; align-items:center; gap:12px }
    .abl-name { font-family:var(--mono); font-size:12px; color:var(--muted); min-width:240px; text-align:right; flex-shrink:0 }
    .abl-name.ours { color:var(--accent); font-weight:500 }
    .abl-track { flex:1; background:var(--bg3); border-radius:100px; height:9px; overflow:hidden; border:1px solid var(--border) }
    .abl-fill { height:100%; border-radius:100px; width:0; transition:width 1.1s cubic-bezier(.4,0,.2,1) }
    .abl-val { font-family:var(--mono); font-size:12px; color:var(--muted); min-width:40px }
    .abl-val.ours { color:var(--accent); font-weight:500 }
    @media(max-width:600px) { .abl-name { min-width:130px; font-size:11px } }

    /* ── CITATION ── */
    .cite-box { margin-top:24px; background:var(--bg2); border:1px solid var(--border); border-radius:9px; padding:24px 28px; position:relative }
    .cite-box pre { font-family:var(--mono); font-size:.9rem; color:#4a5280; white-space:pre-wrap; line-height:1.75 }
    .copy-btn {
      position:absolute; top:14px; right:14px; background:#fff; border:1px solid var(--border2);
      border-radius:6px; padding:5px 12px; font-family:var(--mono); font-size:12px; color:var(--muted);
      cursor:pointer; transition:all .15s;
    }
    .copy-btn:hover { color:var(--accent); border-color:rgba(79,98,212,.35); background:var(--accent-lt) }

    footer {
      border-top:1px solid var(--border); padding:32px 24px; text-align:center;
      font-family:var(--mono); font-size:12px; color:var(--muted2); background:var(--bg2);
    }
    footer a { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--border2) }
    footer a:hover { color:var(--accent) }

    @keyframes up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
    .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease }
    .reveal.on { opacity:1; transform:none }
    @media(max-width:640px) { section { padding:52px 0 } .stat-item { min-width:50% } }