:root{
    /* ===== Peking University visual identity =====
       北大红 anchors the page; Deep Blue is the cool counter-pole; Gold (875C) and
       Silver (877C) are flat metallic accents; Clay + Warm-gray are the neutrals.
       The --blue* token NAMES are kept (table markup references var(--blue-600) inline),
       but every value is repointed to PKU red — so "blue" reads 北大红 everywhere. */
    --blue:#94070A;            /* 北大红 — primary accent */
    --blue-600:#7A0608;        /* deeper crimson for text / hover */
    --blue-50:#FAEEED;         /* soft red wash (e.g. the "ours" table row) */
    --blue-100:#EDD3D1;        /* light red border */
    /* Deep Blue — C100 M60 Y0 K50 — cool structural counter-pole (kept under --teal* names) */
    --teal:#00337F;
    --teal-600:#002A66;
    --teal-50:#EAEEF5;
    --teal-100:#C6D2E6;
    /* Gold — Pantone 875C (flat sRGB approximation) */
    --gold:#8A7449;
    --gold-2:#A68C56;          /* lighter gold for hairline rules */
    --gold-50:#F3EEE2;
    /* Silver — Pantone 877C (flat sRGB approximation) */
    --silver:#9A9DA0;
    --silver-100:#DCDDDE;
    --silver-50:#F0F1F1;
    /* Clay — C0 M20 Y35 K30 — warm neutral fill */
    --clay:#B28F74;
    /* warm-neutral ink & paper; --muted = Warm Gray (C0 M0 Y8 K55) */
    --ink:#1A1410;
    --ink-2:#413A33;
    --muted:#73736A;
    --line:#E6E2D9;
    --bg:#FBFAF7;
    --bg-soft:#F4F2EC;
    --radius:13px;
    --shadow:0 1px 2px rgba(26,20,16,.05), 0 14px 34px -20px rgba(26,20,16,.28);
    --shadow-lg:0 30px 70px -32px rgba(148,7,10,.26);
    --maxw:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  }
  a{color:var(--blue-600); text-decoration:none}
  a:hover{text-decoration:underline}
  h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  /* display voice — Inter, heavy and tightly tracked: crisp, technical, modern */
  .serif{font-family:'Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.03em}
  /* "measurement" voice — monospace, used for eyebrows, zone/scope labels, data */
  .mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

  /* ====== Top navigation bar ======
     A sticky always-on bar: PETAL brand on the left, the section checkpoints on the
     right (each a mono zone-numeral chip + name), and a thin 北大红 reading-progress
     line along the bottom edge. The active section's link lights up red with a filled
     chip. On narrow screens the link row scrolls horizontally and the active chip is
     kept in view, so "where am I" always works — unlike the old left rail, which
     simply hid its nodes when the viewport got narrow. */
  .topnav{position:sticky; top:0; z-index:50; background:rgba(250,250,248,.82);
    backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line)}
  .topnav .wrap{display:flex; align-items:center; gap:18px; min-height:54px; padding-top:0; padding-bottom:0}
  .tn-brand{flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none}
  .tn-brand:hover{color:var(--blue-600); text-decoration:none}
  /* brand expands to the full name on the title page, then collapses to the PETAL
     acronym once the reader scrolls past the hero (.topnav.scrolled set by JS) */
  .tn-brand-full{letter-spacing:.04em}
  .tn-brand-full u{color:var(--blue-600); text-decoration:none}
  .tn-brand-short{display:none}
  .tn-brand:hover .tn-brand-full u{color:inherit}
  .topnav.scrolled .tn-brand-full{display:none}
  .topnav.scrolled .tn-brand-short{display:inline}
  /* the checkpoint links — a horizontally scrollable row that never wraps */
  .tn-links{flex:1 1 auto; display:flex; align-items:center; gap:4px; justify-content:flex-end;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding:9px 0}
  .tn-links::-webkit-scrollbar{display:none}
  .tn-link{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    padding:6px 10px; border-radius:8px; text-decoration:none; color:var(--ink-2);
    font-size:13.5px; font-weight:600; letter-spacing:.01em; transition:.15s}
  .tn-link:hover{background:var(--blue-50); color:var(--blue-600); text-decoration:none}
  .tn-link[aria-current="true"]{color:var(--blue-600); background:var(--blue-50)}
  /* reading-progress line pinned to the bar's bottom edge; --read (0..100) sets its width */
  .tn-progress{position:absolute; left:0; bottom:0; height:2px; width:var(--read,0%);
    background:var(--blue); transition:width .15s ease}
  /* offset anchor jumps so section headings (and deep-linked targets) clear the sticky bar */
  section,#top,#reuse-q{scroll-margin-top:64px}
  @media(max-width:760px){
    /* full name won't fit alongside the links — always use the short acronym */
    .tn-brand-full{display:none}
    .tn-brand-short{display:inline}
  }
  @media(max-width:620px){
    .tn-brand{font-size:12px; letter-spacing:.08em}
    .tn-link{font-size:12.5px; padding:6px 8px}
  }

  /* ---- hero ---- */
  header.hero{position:relative; overflow:hidden; padding:32px 0 34px;
    background:
      radial-gradient(880px 440px at 82% -6%, var(--blue-50), transparent 60%),
      radial-gradient(640px 380px at 4% 4%, var(--gold-50), transparent 62%);
  }
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
    font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--blue-600); background:transparent; padding:0; border:0; box-shadow:none}
  .eyebrow svg{color:var(--blue)}
  header.hero h1{font-size:clamp(32px,5vw,58px); font-weight:800; line-height:1.08; letter-spacing:-.035em; margin:0; max-width:19ch}
  header.hero h1 .grad{background:linear-gradient(100deg,var(--blue),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent}
  header.hero .sub{font-size:clamp(16.5px,2vw,19px); color:var(--ink-2); max-width:none; margin:0}
  /* the method name, defined once in the hero and used everywhere after */
  .petal{color:var(--blue-600); font-weight:700; letter-spacing:.01em}
  .petal-x{color:var(--muted); font-size:.92em}
  .petal-x u{color:var(--blue-600); text-decoration:none; font-weight:600}
  /* author byline */
  .authors{margin-top:18px; font-size:15.5px; line-height:1.7; color:var(--ink-2); max-width:62ch}
  .authors a{color:var(--ink-2); font-weight:600; text-decoration:none; border-bottom:1px solid var(--blue-100); transition:.15s}
  .authors a:hover{color:var(--blue-600); border-bottom-color:var(--blue)}
  .authors .eq{color:var(--blue-600); font-weight:700; vertical-align:super; font-size:.72em; margin-left:1px}
  .authors .aff{display:block; margin-top:6px; font-size:13px; color:var(--muted)}
  .venue{margin-top:26px; display:flex; gap:9px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13px}
  .pill{background:transparent; border:1px solid var(--line); border-radius:7px; padding:5px 12px;
    font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:500; letter-spacing:.01em; color:var(--ink-2)}
  .pill.blue{background:var(--ink); color:var(--bg); border-color:var(--ink)}
  a.pill{display:inline-flex; align-items:center; gap:6px; text-decoration:none; transition:opacity .15s ease, background .15s ease, color .15s ease}
  a.pill svg{flex:none}
  a.pill:hover{opacity:.82}
  a.pill:not(.blue):hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
  /* disabled "coming soon" pills: cannot be pressed, show a tooltip on hover */
  a.pill.soon{position:relative; cursor:not-allowed}
  a.pill.soon:active{transform:none} /* no press-down: anchor has no href, so it never navigates */
  a.pill.soon .tip{position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px);
    background:var(--ink); color:var(--bg); font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:500;
    letter-spacing:.02em; white-space:nowrap; padding:5px 9px; border-radius:6px; box-shadow:var(--shadow);
    opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease}
  a.pill.soon .tip::after{content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color:var(--ink)}
  a.pill.soon:hover .tip, a.pill.soon:focus-visible .tip{opacity:1; transform:translateX(-50%) translateY(0)}

  /* ---- hero illustration: the learned embedding space (top) drives the transfer (bottom),
         connected by a downward arrow ---- */
  /* top row: title block (left) sits parallel to the example (right), both top-aligned */
  .hero-top{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:52px; align-items:start}
  .hero-head{align-self:start}
  /* abstract + keywords drop below the top row and span the full page width */
  .hero-abstract{margin-top:12px; max-width:none}
  .hero-art{display:flex; flex-direction:column; align-items:center; gap:0; width:100%; max-width:430px; margin-left:auto}
  .hero-ba-wrap{position:relative; width:100%; border-radius:15px; overflow:hidden; box-shadow:var(--shadow-lg)}
  .ha-ba{border-radius:0; box-shadow:none}
  .hero-art figcaption{margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.02em;
    color:var(--muted); text-align:center; line-height:1.5}
  .hero-art figcaption .arrow{color:var(--blue); vertical-align:-1px; margin:0 3px}

  /* top panel: encode flow — reference image → network M → a point in the embedding space */
  .ha-embed{width:100%; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
  .ha-flow{display:flex; align-items:center; gap:9px}
  .ha-node{display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto}
  .ha-node.grow{flex:1 1 auto; min-width:0}
  .ha-cap{font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.2}
  .ha-cap .m{font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:11px; color:var(--blue-600); text-transform:none}
  /* reference thumbnail — a wide filmstrip matching the panoramic reference's shape,
     so the whole photo shows with no crop and no letterbox bars */
  .ha-photo{width:auto; height:62px; aspect-ratio:1000/415; flex:0 0 auto;
    border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#000}
  .ha-photo img{width:100%; height:100%; object-fit:cover; display:block}
  /* the embedding network M */
  .ha-net{width:62px; height:62px; border-radius:10px; display:grid; place-items:center; position:relative;
    background:var(--blue-50); border:1px solid var(--blue-100); color:var(--blue)}
  /* connector arrows between flow nodes */
  .ha-arrow{flex:0 0 auto; color:var(--blue); opacity:.55; margin-bottom:16px}
  /* the embedding space, with the reference's point highlighted */
  .ha-space{width:100%; height:78px; border-radius:10px; border:1px solid var(--line); position:relative; overflow:hidden;
    background:
      radial-gradient(circle at 1px 1px, rgba(148,7,10,.10) 1.2px, transparent 1.4px) 0 0/16px 16px,
      var(--bg)}
  .ha-dot{position:absolute; border-radius:50%; transform:translate(-50%,-50%); width:6px; height:6px; background:var(--muted); opacity:.32}
  .ha-dot.warm{background:var(--gold); opacity:.5}
  .ha-dot.cool{background:var(--teal); opacity:.5}
  /* the highlighted embedding for the reference shown to the left */
  .ha-dot.hi{width:11px; height:11px; background:var(--blue); opacity:1; box-shadow:0 0 0 5px rgba(148,7,10,.14)}

  /* downward connector: embedding space → transfer */
  .ha-down{display:flex; flex-direction:column; align-items:center; color:var(--blue); margin:7px 0}
  .ha-down svg{display:block}
  .ha-down .cap{font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); margin-top:1px}

  @media(max-width:920px){
    .hero-top{grid-template-columns:1fr; gap:36px}
    .hero-art{order:2; max-width:440px; margin:0 auto}
    .hero-abstract{margin-top:20px}
  }

  /* ---- sections ---- */
  section{padding:50px 0; border-top:1px solid var(--line)}
  section.nolines{border-top:none}
  /* eyebrow = a "measurement" label: mono, with a small scope tick-mark before it */
  .kicker{display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace;
    font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--blue-600); margin-bottom:16px}
  .kicker::before{content:""; width:22px; height:0; border-top:2px solid var(--blue);
    border-radius:2px; box-shadow:6px -3px 0 -1px var(--gold), 12px 2px 0 -1px var(--teal)}
  .h2{font-size:clamp(26px,3.4vw,40px); font-weight:800; line-height:1.12; letter-spacing:-.03em; max-width:26ch}
  .lead{font-size:18.5px; color:var(--ink-2); max-width:68ch; margin-top:18px}
  p.body{color:var(--ink-2); max-width:68ch}
  p.body + p.body{margin-top:14px}

  /* ---- intuition cards ---- */
  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
  @media(max-width:860px){.cards{grid-template-columns:1fr}}
  /* a 北大红 accent stripe down the left edge — an inset shadow, so it follows the
     border-radius and stays bounded inside the frame (never pokes past the corner) */
  .card{background:transparent; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:inset 3px 0 0 var(--blue); padding:26px 26px 28px; position:relative}
  .card .ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--blue-50);border:1px solid var(--blue-100); margin-bottom:16px; color:var(--blue)}
  .card h3{font-size:18px; font-weight:700; letter-spacing:-.01em}
  .card p{color:var(--muted); font-size:15px; margin:10px 0 0}
  /* mobile: keep the cards compact — icon and title share one line, text drops below */
  @media(max-width:620px){
    .card{padding:18px 20px 20px; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:13px}
    .card .ic{width:36px; height:36px; margin-bottom:0; grid-column:1; grid-row:1}
    .card h3{grid-column:2; grid-row:1}
    .card p{grid-column:1 / -1; grid-row:2; margin-top:10px}
  }

  /* ---- problem strip (teaser) ---- */
  .figure{margin-top:38px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg); box-shadow:var(--shadow)}
  .figure img{width:100%; display:block}
  .figcap{font-size:14px; color:var(--muted); padding:15px 20px; border-top:1px solid var(--line); background:var(--bg-soft)}
  /* a small "plate" tick so captions read like figure plates */
  .figcap b{color:var(--ink-2)}
  /* compact schematic: wide-but-short diagram sits beside its caption */
  .figure.aside{display:grid; grid-template-columns:1.62fr 1fr; align-items:center}
  .figure.aside img{border-right:1px solid var(--line)}
  .figure.aside .figcap{border-top:none; background:#fff; padding:20px 26px; font-size:14.5px; line-height:1.6}
  @media(max-width:820px){
    .figure.aside{grid-template-columns:1fr}
    .figure.aside img{border-right:none; border-bottom:1px solid var(--line)}
    .figure.aside .figcap{background:var(--bg-soft)}
  }

  /* ---- approach pipeline ---- */
  /* two sequential stages, each a full-width box: the embedding (Stage 1), then the
     transfer that conditions on it (Stage 2). Each is introduced, then illustrated by a figure. */
  /* a 北大红 accent stripe down the left edge — inset shadow follows the border-radius,
     so the color is always bounded inside the frame (the STAGE chip carries the gold) */
  .stagebox{position:relative; background:transparent; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:inset 4px 0 0 var(--blue); padding:26px 28px 28px; margin-top:40px}
  .stagehead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
  .stagenum{font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; color:var(--blue-600); background:var(--blue-50); border:1px solid var(--blue-100);
    border-radius:6px; padding:4px 10px}
  .stagehead h3{font-size:21px; font-weight:700; letter-spacing:-.015em}
  /* two-column body so full-width lines stay readable */
  .stagebody{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:16px}
  @media(max-width:760px){.stagebody{grid-template-columns:1fr; gap:12px}}
  .stagebody p{color:var(--ink-2); font-size:15.5px; margin:0; line-height:1.6}
  .stagetags{margin-top:18px; display:flex; gap:8px; flex-wrap:wrap}
  .stagetags .tag{font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:500;
    color:var(--blue-600); background:var(--blue-50); border:1px solid var(--blue-100); border-radius:6px; padding:4px 9px}
  /* math display tucked beside the transfer schematic */
  .figeq{margin-top:15px; padding:13px 15px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
         font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:14px; line-height:1.95; color:var(--ink)}
  .figeq b{font-style:normal; font-weight:700; color:var(--blue-600)}
  .figeq sub{font-style:normal; font-size:.72em}
  /* a quiet sub-caption under the equation — reset the big teal callout box that the
     global `.note` rule would otherwise apply here */
  .figeq .note{display:block; margin-top:7px; padding:0; background:none; border:0; border-radius:0;
    font-style:normal; font-family:'Inter',system-ui,sans-serif; font-size:12px; line-height:1.5; color:var(--muted)}

  /* ---- highlight box ---- */
  .note{margin-top:34px; display:flex; gap:16px; align-items:flex-start; background:var(--teal-50); border:1px solid var(--teal-100); border-radius:var(--radius); padding:22px 24px}
  .note .b{flex:0 0 auto; width:34px;height:34px;border-radius:9px;background:var(--teal); color:#fff; display:grid;place-items:center; font-weight:800}
  .note p{margin:0; color:#15414a; font-size:15.5px}

  /* ---- inline question link (jumps to a related result) ---- */
  .qlink{margin-top:18px; display:inline-flex; align-items:center; gap:10px; text-decoration:none;
    background:var(--blue-50); border:1px solid var(--blue-100); border-radius:999px; padding:11px 18px;
    font-size:15px; font-weight:600; color:var(--blue-600); transition:.15s}
  .qlink:hover{background:var(--blue-100); text-decoration:none}
  .qlink .qm{flex:0 0 auto; width:24px;height:24px;border-radius:50%; background:var(--blue); color:#fff;
    display:grid;place-items:center; font-weight:800; font-size:14px}
  .qlink .qa{margin-left:2px; color:var(--blue); transition:transform .15s}
  .qlink:hover .qa{transform:translateX(3px)}
  /* highlight the target table briefly when arrived via the question link */
  @keyframes qflash{0%,100%{box-shadow:var(--shadow)} 35%{box-shadow:0 0 0 3px var(--blue)}}
  .tablecard.flash{animation:qflash 1.6s ease}

  /* ---- comparison slider ---- */
  .gallery{margin-top:38px}
  /* scene picker: centered ‹ N / total › stepper (shares the interp-nav widget styles) */
  .gtabs{display:flex; gap:14px; align-items:center; justify-content:center; margin-bottom:22px}

  /* The comparison is HEIGHT-bounded (--cmp-maxh) so every scene fits one screen; its width
     follows from the per-scene ratio (--ar, set by JS as a unitless w/h). The left grid track
     is sized to height×ratio (capped at the available space), so the column shrink-wraps the
     comparison and the reference panel sits flush beside it — no dead gutter for portrait
     scenes, no cropping or letterboxing for any scene. */
  .stage{--cmp-maxh:clamp(320px,52vh,560px);
         display:grid;
         grid-template-columns:minmax(0, calc(var(--cmp-maxh) * var(--ar,1.3333))) minmax(240px,1fr);
         gap:20px; align-items:start}
  @media(max-width:820px){.stage{grid-template-columns:1fr}}
  .stage-main{min-width:0}
  .cmp{position:relative; border-radius:14px; overflow:hidden; user-select:none; background:#000; box-shadow:var(--shadow-lg);
       aspect-ratio:var(--ar,4/3); width:100%}
  .cmp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  .cmp .after{clip-path:inset(0 0 0 var(--pos,50%))}
  .cmp .lbl{position:absolute; top:12px; font-size:12px; font-weight:700; letter-spacing:.02em; color:#fff; background:rgba(13,16,32,.55); padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px); pointer-events:none}
  .cmp .lbl.l{left:12px}
  .cmp .lbl.r{right:12px; background:var(--blue)}
  .cmp .handle{position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); transform:translateX(-1px); pointer-events:none}

  .side{display:flex; flex-direction:column; gap:14px}
  .ref{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow)}
  .ref .rh{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:11px 14px 0}
  /* Reference is height-bounded the same way (--rar = its w/h) so a portrait reference
     can't make the side column taller than the comparison and push the stage off-screen. */
  .ref img{display:block; object-fit:cover; margin:8px auto 0;
           --ref-maxh:clamp(200px,34vh,360px);
           aspect-ratio:var(--rar,1/1);
           width:min(100%, calc(var(--ref-maxh) * var(--rar,1)))}
  .meta{background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:16px 18px}
  .meta .chip{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-600); background:var(--blue-50); border:1px solid var(--blue-100); border-radius:7px; padding:4px 9px}

  /* side switchers — full-width bar below the whole stage, one row per side */
  .methodbar{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:11px}
  .methodline{display:flex; align-items:center; gap:14px; min-width:0}
  .methodbar-lbl{flex:0 0 46px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .methodrow{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch}
  .mbtn{flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:500; color:var(--ink-2); background:var(--bg); border:1px solid var(--line); padding:6px 11px; border-radius:7px; cursor:pointer; white-space:nowrap}
  .mbtn[aria-selected="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
  /* the right selector accents in blue to match the slider's right label */
  .methodline.r .mbtn[aria-selected="true"]{background:var(--blue); border-color:var(--blue)}
  .thumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
  .thumbs .t{width:74px; height:74px; border-radius:10px; overflow:hidden; cursor:pointer; border:2px solid transparent; background:#eee}
  .thumbs .t img{width:100%;height:100%;object-fit:cover; display:block}
  .thumbs .t[aria-selected="true"]{border-color:var(--blue)}
  .hint{font-size:13px; color:var(--muted); margin-top:14px; display:flex; align-items:center; gap:8px}

  /* ---- GT triptych grid ---- */
  .triptych{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
  @media(max-width:680px){.triptych{grid-template-columns:1fr 1fr}}
  .tcell{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
  .tcell img{width:100%; display:block; aspect-ratio:4/5; object-fit:cover}
  .tcell .cl{font-size:12px; font-weight:600; color:var(--muted); padding:9px 11px; text-align:center}
  .tcell.ours{border-color:var(--blue); box-shadow:var(--shadow)}
  .tcell.ours .cl{color:var(--blue-600)}

  /* ---- retrieval mosaic ---- */
  .mosaic{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
  @media(max-width:620px){.mosaic{grid-template-columns:repeat(2,1fr)}}
  .mtile{border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#fff; box-shadow:var(--shadow); transition:.18s}
  .mtile:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
  .mtile .pair{display:grid; grid-template-columns:1fr 1fr; gap:0}
  .mtile .pair figure{margin:0; position:relative}
  .mtile .pair img{width:100%; display:block; aspect-ratio:3/4; object-fit:cover}
  .mtile .pair figure .tg{position:absolute; bottom:7px; left:7px; font-size:10px; font-weight:700; letter-spacing:.04em; color:#fff; background:rgba(13,16,32,.6); padding:3px 7px; border-radius:6px}
  .mtile .pair figure.o .tg{background:var(--blue)}
  .mtile .foot{padding:11px 13px; border-top:1px solid var(--line)}
  /* a wide, short slice of the style reference — its grade reads at a glance */
  .mtile .foot .refstrip{position:relative; border-radius:8px; overflow:hidden;
    border:1px solid var(--line); cursor:zoom-in}
  .mtile .foot .refstrip img{display:block; width:100%; height:44px; object-fit:cover; object-position:center 38%}
  .mtile .foot .refstrip .rl{position:absolute; left:7px; bottom:6px; font-size:9.5px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(13,16,32,.58);
    padding:3px 7px; border-radius:5px; backdrop-filter:blur(3px); pointer-events:none}

  /* ---- tables ---- */
  .tablecard{margin-top:30px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
  .tablecard .th{padding:18px 22px; background:var(--bg-soft); border-bottom:1px solid var(--line)}
  .tablecard .th h3{font-size:17px; font-weight:700}
  .tablecard .th p{margin:6px 0 0; font-size:13.5px; color:var(--muted)}
  .starnote{display:block; margin-top:5px; font-size:12.5px; color:var(--muted)}
  .starnote b{color:var(--blue-600); font-weight:700}
  .scroll{overflow-x:auto}
  /* hoverable footnote marker on a method cell */
  .starmark{color:var(--blue-600); font-weight:700; cursor:help; margin-left:1px}
  .starmark:hover{text-decoration:underline; text-underline-offset:2px}
  /* superscript reference marker (in tables + prose) linking down to the References list */
  .refmark{vertical-align:super; font-size:.72em; font-weight:700; color:var(--blue-600);
       margin-left:2px; text-decoration:none; line-height:0}
  .refmark::before{content:"["} .refmark::after{content:"]"}
  .refmark:hover{text-decoration:underline; text-underline-offset:2px}
  /* References list */
  #references .refnote{color:var(--muted); font-size:14px; margin:0 0 22px}
  /* tighten the gap between References and the following BibTeX block */
  #references{padding-bottom:34px}
  #citation{padding-top:40px}
  /* Collapsed preview: the list is clipped to a few rows and fades into the page; a
     "Show all" button sits in the fade. Clicking (.is-open) lifts the clip & fade. */
  .refblock{position:relative}
  .refblock .reflist{max-height:184px; overflow:hidden; transition:max-height .35s ease}
  .refblock.is-open .reflist{max-height:none}
  /* the fade veil + button live over the bottom of the clipped list */
  .refmore{position:absolute; left:0; right:0; bottom:0; width:100%; border:0; cursor:pointer;
       display:flex; align-items:flex-end; justify-content:center; gap:7px; padding:64px 0 6px;
       font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.08em;
       text-transform:uppercase; color:var(--muted); -webkit-tap-highlight-color:transparent;
       background:linear-gradient(to bottom, rgba(251,250,247,0) 0%, var(--bg) 62%)}
  .refmore svg{margin-bottom:1px; transition:transform .2s ease}
  .refmore:hover{color:var(--blue-600)}
  .refmore:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:8px}
  .refblock.is-open .refmore{display:none}
  .reflist{list-style:none; margin:0; padding:0; display:grid; gap:11px;
       counter-reset:none; font-size:14px; line-height:1.6}
  .reflist li{display:flex; gap:11px; align-items:baseline; color:var(--ink-2);
       scroll-margin-top:72px; border-radius:8px; padding:3px 8px; margin:-3px -8px;
       transition:background .4s ease}
  .reflist li:target{background:var(--blue-50)}
  .reflist .refnum{flex:0 0 auto; min-width:30px; color:var(--blue-600); font-weight:700;
       font-variant-numeric:tabular-nums}
  .reflist .reftext{flex:1 1 auto}
  /* body-anchored tooltip (positioned by JS so the scroll container can't clip it) */
  #tip{position:fixed; z-index:120; max-width:240px; padding:9px 12px; background:var(--ink); color:#eef1ff;
       font-size:12.5px; line-height:1.5; border-radius:9px; box-shadow:0 10px 30px -8px rgba(13,16,32,.5);
       pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s ease, transform .12s ease}
  #tip.show{opacity:1; transform:translateY(0)}
  #tip::after{content:""; position:absolute; left:var(--ax,50%); top:100%; transform:translateX(-50%);
       border:6px solid transparent; border-top-color:var(--ink)}
  table{border-collapse:collapse; width:100%; font-size:14px; min-width:560px}
  th,td{padding:11px 14px; text-align:right; white-space:nowrap}
  th:first-child,td:first-child{text-align:left}
  thead th{font-weight:600; color:var(--muted); font-size:12.5px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0}
  tbody tr{border-bottom:1px solid var(--line)}
  tbody tr:last-child{border-bottom:none}
  tbody tr.ours{background:var(--blue-50)}
  tbody tr.ours td{font-weight:700; color:var(--ink)}
  tbody tr.ours td:first-child{color:var(--blue-600)}
  td.best, tbody tr.ours td.best{color:var(--blue-600); font-weight:800}
  td.second, tbody tr.ours td.second{text-decoration:underline; text-decoration-color:var(--blue); text-underline-offset:3px; text-decoration-thickness:1.5px}
  .group-head td{background:#fff; color:var(--muted); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; text-align:left; padding-top:14px}
  .metricnote{font-size:13px;color:var(--muted);margin-top:14px}

  /* ---- full comparison grid (all methods for one scene) ---- */
  .cmpgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; align-items:start}
  @media(max-width:880px){.cmpgrid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.cmpgrid{grid-template-columns:repeat(2,1fr)}}
  .gcell{border:1px solid var(--line); border-radius:11px; overflow:hidden; background:#fff}
  .gcell img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in}
  .gcell .cl{font-size:12px; font-weight:600; color:var(--muted); padding:8px 10px; text-align:center}
  .gcell.ours{border-color:var(--blue); box-shadow:var(--shadow)}
  .gcell.ours .cl{color:var(--blue-600)}
  .gcell.gt{border-color:#199e6a}
  .gcell.gt .cl{color:#0f7a50}
  .gridhdr{display:flex; align-items:center; gap:10px; margin-top:30px; flex-wrap:wrap}
  .gridhdr .gt-title{font-weight:700; font-size:15px}
  .gridtoggle{font-size:13px; font-weight:600; color:var(--blue-600); background:var(--blue-50); border:1px solid var(--blue-100); padding:6px 13px; border-radius:8px; cursor:pointer}

  /* ---- reusable before/after slider (mosaic tiles) ---- */
  .ba{position:relative; overflow:hidden; user-select:none; background:#000; cursor:ew-resize}
  .ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  .ba .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
  .ba .ba-handle{position:absolute; top:0; bottom:0; left:var(--pos,50%); width:1px; background:rgba(255,255,255,.85); transform:translateX(-.5px); pointer-events:none}
  .ba .ba-knob{position:absolute; top:50%; left:var(--pos,50%); width:18px;height:18px; transform:translate(-50%,-50%); background:rgba(255,255,255,.82); border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.22); display:grid;place-items:center; pointer-events:none; opacity:.78; transition:opacity .15s ease}
  .ba:hover .ba-knob{opacity:1; background:#fff}
  .ba .ba-knob svg{color:var(--blue); width:11px; height:11px}
  .ba .ba-tag{position:absolute; bottom:8px; font-size:10.5px; font-weight:700; letter-spacing:.03em; color:#fff; padding:3px 8px; border-radius:6px; pointer-events:none}
  .ba .ba-tag.l{left:8px; background:rgba(13,16,32,.6)}
  .ba .ba-tag.r{right:8px; background:var(--blue)}

  /* ---- analysis / extra figures ---- */
  .figrow{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:38px}
  @media(max-width:820px){.figrow{grid-template-columns:1fr}}

  /* ---- style interpolation scrubber (Reference A — result — Reference B) ---- */
  .interp{margin-top:38px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); overflow:hidden}
  .interp + .interp{margin-top:22px}
  /* case switcher bar: ‹ 1 / 4 › */
  .interp-bar{display:flex; align-items:center; justify-content:center; gap:14px;
    padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg-soft)}
  .interp-nav{display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
    background:var(--bg); border:1px solid var(--line); color:var(--blue-600); cursor:pointer; transition:.15s}
  .interp-nav:hover{background:var(--blue-50); border-color:var(--blue-100)}
  .interp-nav:active{transform:scale(.94)}
  .interp-count{font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600;
    color:var(--ink-2); letter-spacing:.04em; min-width:52px; text-align:center}
  .interp-count #interpIdx, .interp-count #sceneIdx{color:var(--blue-600)}
  /* keep the three panels (Reference A · result · Reference B) on one row at every
     width — on mobile they just shrink rather than stacking into three rows */
  .interp .row{display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:0; align-items:stretch}
  .interp .end{position:relative; background:var(--bg-soft); display:flex; flex-direction:column}
  .interp .end.a{border-right:1px solid var(--line)}
  .interp .end.b{border-left:1px solid var(--line)}
  /* tighten the labels so they still fit under the narrowed panels */
  @media(max-width:620px){
    .interp .endlbl{font-size:9px; padding:7px 4px; letter-spacing:.02em}
    .interp .mid .badge{font-size:9px; padding:4px 8px; top:8px}
  }
  .interp .end img{width:100%; display:block; aspect-ratio:4/5; object-fit:cover; flex:1}
  .interp .endlbl{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:10px 14px; text-align:center}
  .interp .end.a .endlbl{color:var(--ink-2)}
  .interp .end.b .endlbl{color:var(--blue-600)}
  .interp .mid{position:relative; background:#000}
  .interp .mid .frame{width:100%; display:block; aspect-ratio:4/5; object-fit:cover}
  .interp .mid .badge{position:absolute; top:12px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700;
    letter-spacing:.03em; color:#fff; background:rgba(13,16,32,.55); padding:5px 12px; border-radius:999px; backdrop-filter:blur(4px); pointer-events:none}
  /* full-width slider bar below the three images */
  .interp .ctrl{padding:15px 18px 17px; border-top:1px solid var(--line); background:#fff;
    display:flex; align-items:center; gap:14px}
  .interp .ctrl .cap{font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap}
  .interp .ctrl .cap.a{color:var(--ink-2)}
  .interp .ctrl .cap.b{color:var(--blue-600)}
  .interp .ctrl input[type=range]{flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
    background:linear-gradient(90deg,var(--blue) 0%,var(--blue) var(--fill,0%),var(--blue-100) var(--fill,0%),var(--blue-100) 100%); cursor:ew-resize; margin:0}
  .interp .ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
    background:#fff; border:2px solid var(--blue); box-shadow:0 2px 6px rgba(13,16,32,.25); cursor:ew-resize}
  .interp .ctrl input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--blue); box-shadow:0 2px 6px rgba(13,16,32,.25); cursor:ew-resize}
  .interp .icap{font-size:14px; color:var(--muted); padding:0 18px 16px}
  .interp .icap b{color:var(--ink-2)}

  /* ---- modal ---- */
  .modal{position:fixed; inset:0; z-index:100; display:none; background:rgba(10,12,24,.92); padding:28px; cursor:zoom-out}
  .modal.open{display:grid; place-items:center}
  .modal img{max-width:95vw; max-height:92vh; object-fit:contain; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
  .modal .x{position:absolute; top:20px; right:24px; color:#fff; font-size:26px; cursor:pointer; width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.12); display:grid;place-items:center}

  /* ---- citation block ---- */
  .citecard{position:relative; margin-top:30px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
  .citecard .ch{display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--bg-soft); border-bottom:1px solid var(--line)}
  .citecard .ch h3{font-size:15px; font-weight:700; margin:0}
  .copybtn{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--blue-600); background:#fff; border:1px solid var(--blue-100);
    padding:6px 13px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.15s}
  .copybtn:hover{background:var(--blue-50)}
  .copybtn.ok{color:#0f7a50; border-color:#bfe6d2; background:#eafaf2}
  .citecard pre{margin:0; padding:18px 20px; overflow-x:auto; background:#fff;
    font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; line-height:1.7; color:var(--ink-2)}
  .citecard pre .k{color:var(--blue-600)}

  footer{padding:54px 0 70px; border-top:1px solid var(--line); color:var(--muted); font-size:14px}
  footer .wrap{display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; align-items:center}
  .scrolltop{display:inline-flex;align-items:center;gap:7px;color:var(--blue-600);font-weight:600}
  .fade{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  .fade.in{opacity:1; transform:none}

  /* ============================================================
     V-LITE lighting theme — repoints petal-pku's tokens.
     Amber "light" as the primary accent; sky-blue as the cool
     chrome/reflection counter-pole. (var NAMES kept so all of
     the inherited component CSS recolors automatically.)
     ============================================================ */
  :root{
    --blue:#C57A1C;          /* amber — primary "light" accent */
    --blue-600:#9E5D10;      /* deeper amber — text / hover */
    --blue-50:#FBF1DE;       /* soft amber wash */
    --blue-100:#F1DDB4;      /* light amber border */
    --teal:#1E5F9E;          /* sky blue — chrome/sky counter-pole */
    --teal-600:#154B7E;
    --teal-50:#EAF1F9;
    --teal-100:#C6D9ED;
    --gold:#B07D2A;
    --gold-2:#C79A4E;
    --gold-50:#F6EEDD;
    --ink:#1B1712;
    --ink-2:#463D31;
    --muted:#7A756B;
    --line:#EAE4D7;
    --bg:#FCFAF6;
    --bg-soft:#F5F1E8;
    --shadow:0 1px 2px rgba(28,20,12,.05), 0 14px 34px -20px rgba(28,20,12,.26);
    --shadow-lg:0 30px 70px -32px rgba(197,122,28,.30);
  }
  /* a soft, warm "light source" glow behind the hero */
  header.hero{
    background:
      radial-gradient(900px 460px at 84% -8%, var(--blue-50), transparent 60%),
      radial-gradient(680px 400px at 2% 2%, var(--gold-50), transparent 62%),
      radial-gradient(560px 320px at 52% -4%, rgba(255,235,193,.55), transparent 70%);
  }
  /* method/system name, echoing petal's .petal */
  .vlite{color:var(--blue-600); font-weight:800; letter-spacing:.01em}
  /* before/after sliders keep the source 16:9 ratio */
  .hero-ba-wrap.ba{aspect-ratio:820/462}
  .bafig{margin-top:22px}
  .bafig .ba{border-radius:14px; aspect-ratio:820/462; box-shadow:var(--shadow-lg)}
  .bafig figcaption{margin-top:11px; font-size:13px; color:var(--muted); text-align:center}
  /* five-up comparison grid for the object-insertion baselines */
  .cmpgrid.five{grid-template-columns:repeat(5,1fr)}
  @media(max-width:900px){.cmpgrid.five{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.cmpgrid.five{grid-template-columns:repeat(2,1fr)}}
  /* dataset stat chips */
  .stats{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
  .stat{flex:1 1 150px; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--bg-soft); padding:16px 20px; box-shadow:inset 3px 0 0 var(--blue)}
  .stat b{display:block; font-size:25px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
  .stat span{font-size:13px; color:var(--muted)}