/* ===================================================================
   ESC project page — styling on top of Bulma, in the AgentFlow /
   Nerfies academic-template style. Light (default) + dark theming.
   =================================================================== */

:root{
  --bg:#ffffff;
  --bg-alt:#f6f7f9;
  --bg-card:#ffffff;
  --text:#1b1b1f;
  --text-muted:#5b5f66;
  --border:#e6e8ec;
  --accent:#3056d3;          /* link / interactive accent */
  --accent-soft:#eaeefb;
  --esc:#e29c38;             /* corgi amber — the "ESC" wordmark */
  --code-bg:#f4f5f7;

  /* ===== ECCV 2026 venue badge colour =====
     Default = RED (as requested). Swap --venue / --venue-soft to one of the
     7 suggested palettes below, OR add class "rainbow" to the .venue-badge.
       1) Red     #d62828 / #fdeaea
       2) Orange  #e8590c / #fff0e6
       3) Purple  #6741d9 / #efeafc
       4) Teal     #0c8599 / #e3f6f8
       5) Blue     #1c6dd0 / #e7f0fd
       6) Pink     #c2255c / #fde7ef
       7) Indigo  #3b3bd6 / #ebebfb                                   */
  --venue:#d62828;
  --venue-soft:#fdeaea;
}

body.dark{
  --bg:#0f1318;
  --bg-alt:#161b22;
  --bg-card:#161b22;
  --text:#e9edf2;
  --text-muted:#9aa3ad;
  --border:#2a313a;
  --accent:#7aa2ff;
  --accent-soft:#1c2533;
  --esc:#f0b75e;
  --code-bg:#11161d;
  --venue-soft:#3a1414;
}

html{scroll-behavior:smooth;scroll-padding-top:24px;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Sans','Google Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  transition:background .25s ease,color .25s ease;
}
.title,.subtitle,h1,h2,h3,p,span,td,th,li{color:var(--text);}
.subtitle,.caption,.publication-affiliations,.publication-notes{color:var(--text-muted);}
a{color:var(--accent);}
.section{padding:3rem 1.5rem;}
.esc-name{color:var(--esc);font-weight:700;}
/* Bulma pulls a subtitle tight under its title — give it breathing room + a touch more size */
.title.is-3 + .subtitle{margin-top:1rem;}
.subtitle.is-6{font-size:1.04rem;line-height:1.6;max-width:820px;margin-left:auto;margin-right:auto;}
/* wider content area so all figures can be large */
.container.is-max-desktop{max-width:1140px;}

/* ============ More Research — top-left, fixed (follows scroll) ============ */
.more-research{
  position:fixed;top:14px;left:18px;z-index:60;
  font-family:'Noto Sans','Google Sans',sans-serif;
}
.mr-trigger{
  display:inline-flex;align-items:center;gap:9px;
  font-size:1rem;font-weight:600;color:var(--accent);
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:999px;padding:10px 20px;cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.mr-trigger:hover{background:var(--accent-soft);box-shadow:0 5px 16px rgba(0,0,0,.12);transform:translateY(-1px);}
.mr-caret{font-size:.78rem;transition:transform .22s ease;}
.more-research.open .mr-caret{transform:rotate(180deg);}
.mr-menu{
  position:absolute;top:calc(100% + 9px);left:0;min-width:248px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  padding:7px;box-shadow:0 16px 38px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top left;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.more-research.open .mr-menu{opacity:1;visibility:visible;transform:none;}
.mr-item{
  display:flex;align-items:center;gap:10px;
  font-size:1rem;color:var(--text);text-decoration:none;
  padding:11px 15px;border-radius:9px;white-space:nowrap;
  transition:background .14s ease,color .14s ease,padding-left .14s ease;
}
.mr-item:hover{background:var(--accent-soft);color:var(--accent);padding-left:17px;}
.mr-item b{font-weight:700;}
.mr-item .fa-fire{color:#f1622b;margin-left:auto;font-size:.86rem;}
.mr-item .mr-tag{font-size:.7rem;color:var(--text-muted);font-style:italic;}
.mr-item:hover .mr-tag{color:var(--accent);}
.mr-self{border:1px solid var(--venue);background:var(--venue-soft);}
.mr-self b{color:var(--venue);}
@media(max-width:768px){.more-research{top:10px;left:10px;}.mr-trigger{font-size:.9rem;padding:8px 16px;}}

/* ============ Back-to-top floating button ============ */
.to-top{
  position:fixed;right:16px;bottom:18px;z-index:41;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg-card);color:var(--accent);
  cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.1);font-size:1rem;text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease,background .18s ease;
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--accent-soft);transform:translateY(-3px);}

/* ============ Table of Contents — right-side scroll rail ============ */
.toc-rail{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:40;
}
.toc-rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;align-items:flex-end;}
.toc-rail li{margin:0;}
.toc-rail a{
  display:flex;align-items:center;justify-content:flex-end;gap:11px;
  text-decoration:none;padding:5px 2px;color:var(--text-muted);
  font-size:.78rem;font-weight:500;line-height:1;
}
.toc-text{
  opacity:0;transform:translateX(8px);
  transition:opacity .22s ease,transform .22s ease,color .22s ease,font-weight .22s ease;
  white-space:nowrap;
}
.toc-dot{
  display:block;height:2px;width:16px;border-radius:2px;background:var(--border);flex:none;
  transition:width .24s cubic-bezier(.2,.8,.2,1),background .24s ease,height .24s ease;
}
/* reveal all labels while hovering the rail */
.toc-rail:hover .toc-text{opacity:.65;transform:none;}
.toc-rail a:hover{color:var(--text);}
.toc-rail a:hover .toc-text{opacity:1;}
.toc-rail a:hover .toc-dot{width:26px;background:var(--text-muted);}
/* active section */
.toc-rail a.active .toc-dot{width:36px;height:3px;background:var(--venue);}
.toc-rail a.active .toc-text{opacity:1;transform:none;color:var(--venue);font-weight:700;}
/* nested sub-items (Quantitative / Qualitative under Results) */
.toc-sub{margin-top:1px;}
.toc-sub a{padding:4px 2px;font-size:.72rem;}
.toc-sub .toc-dot{width:10px;background:var(--border);opacity:.85;}
.toc-rail .toc-sub a:hover .toc-dot{width:20px;}
.toc-rail .toc-sub a.active .toc-dot{width:26px;height:3px;background:var(--venue);}
@media(max-width:1100px){.toc-rail{display:none;}}

/* ============ Hero ============ */
.hero{background:var(--bg);}
/* clear space below the top-center More Research button so it doesn't touch the title */
.hero:first-of-type .hero-body{padding-top:4.8rem;}
.esc-logo-row{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:.5rem;}
.esc-corgi{width:86px;height:86px;object-fit:contain;animation:corgiBob 3s ease-in-out infinite;transform-origin:center bottom;}
.esc-corgi:hover{animation-play-state:paused;}
@keyframes corgiBob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-8px) rotate(2deg);}}
.esc-wordmark{
  font-family:'Castoro',serif;font-size:4.4rem;font-weight:700;line-height:1;margin:0;letter-spacing:.02em;
  color:var(--esc);
  background:linear-gradient(92deg,#e8920f 0%,#f7c948 45%,#ffd76a 50%,#f7c948 55%,#e8920f 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:escPop .7s cubic-bezier(.2,.8,.2,1.25) both, escShine 5s linear infinite;
}
@keyframes escPop{0%{opacity:0;transform:scale(.55) rotate(-5deg);}100%{opacity:1;transform:none;}}
@keyframes escShine{to{background-position:220% center;}}
.publication-title{font-weight:600;margin-top:.4rem!important;color:var(--text);text-wrap:balance;}
/* stack the title across two lines */
.title-line{display:block;}
/* the E / S / C that spell out ESC — yellow + underlined in the title */
.esc-letter{color:var(--esc);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700;}
/* yellow "ESC" / E-S-C inside body text (e.g. the abstract) + inline corgi sized to the text */
.esc-inline{color:var(--esc);font-weight:700;}
.esc-corgi-inline{height:1.35em;width:auto;vertical-align:-0.38em;margin:0 1px;display:inline-block;}

.venue-badge{
  display:inline-block;margin:1rem auto .9rem;padding:6px 18px;border-radius:999px;
  font-weight:700;font-size:1rem;letter-spacing:.01em;
  color:#fff;background:var(--venue);
  box-shadow:0 3px 12px color-mix(in srgb,var(--venue) 40%,transparent);
  animation:venuePulse 2.6s ease-in-out infinite;transition:transform .18s ease;
}
.venue-badge:hover{transform:scale(1.05);}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes venuePulse{
  0%,100%{box-shadow:0 3px 12px color-mix(in srgb,var(--venue) 35%,transparent);}
  50%{box-shadow:0 4px 22px color-mix(in srgb,var(--venue) 75%,transparent);}
}
.venue-badge.rainbow{
  background:linear-gradient(90deg,#e23c3c,#e8590c,#e6a817,#2b9d5d,#1c6dd0,#6741d9,#c2255c);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);box-shadow:0 3px 14px rgba(0,0,0,.18);
}

.publication-authors{margin:.7rem 0 .2rem;}
.author-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 9px;margin:3px 0;}
.author-block{font-size:1.05rem;margin:0 2px;}
.author-block a{color:var(--accent);text-decoration:none;}
.author-block a:hover{text-decoration:underline;}
.author-block sup{color:var(--text-muted);font-size:.7em;}

.publication-affiliations{margin:.5rem auto;max-width:760px;font-size:.86rem;line-height:1.7;}
.publication-affiliations .aff{margin:0 7px;white-space:nowrap;display:inline-block;}
.publication-notes{font-size:.84rem;margin-top:.3rem;}
.publication-notes span{margin:0 8px;}

.publication-links{margin-top:1.4rem;display:flex;gap:11px;justify-content:center;flex-wrap:wrap;}
/* force white text in the dark pill buttons (beats the global a{} colour) */
.publication-links .button.is-dark,
.publication-links .button.is-dark span,
.publication-links .button.is-dark i{color:#fff !important;}
.publication-links .button.is-dark{
  background:#1f2329;border:none;font-weight:500;padding-left:20px;padding-right:20px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1.2),background .2s ease,box-shadow .2s ease;
}
.publication-links .button.is-dark .icon{transition:transform .2s ease;}
.publication-links .button.is-dark:hover{
  background:var(--venue);transform:translateY(-4px) scale(1.05);
  box-shadow:0 10px 20px color-mix(in srgb,var(--venue) 38%,transparent);
}
.publication-links .button.is-dark:hover .icon{transform:translateY(-1px) scale(1.18);}
.publication-links .button.is-dark:active{transform:translateY(-1px) scale(1);}
body.dark .publication-links .button.is-dark{background:#2b313a;}
body.dark .publication-links .button.is-dark:hover{background:var(--venue);}

/* ============ TL;DR — hero summary, styled like the Motivation cards ============ */
.tldr{
  max-width:820px;margin:1.8rem auto 0;
  background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
  padding:1.5rem 1.8rem;text-align:center;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  animation:fade .6s ease both;
}
.tldr:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 14px 32px rgba(0,0,0,.09);}
body.dark .tldr:hover{box-shadow:0 14px 32px rgba(0,0,0,.5);}
.tldr-tag{
  display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.02em;
  color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:4px 13px;margin-bottom:.9rem;
}
/* playful clickbait hook — the shocking one-liner that IS the summary */
.tldr-shock{font-size:1.62rem;font-weight:800;line-height:1.3;letter-spacing:-.01em;
  margin:0;color:var(--text);text-wrap:balance;}
.tldr-shock .esc-inline{color:var(--esc);}
/* the witty turn — feature, not the bug */
.tldr-kicker{display:block;margin-top:.5rem;font-size:1.06rem;font-weight:700;
  font-style:italic;color:var(--esc);}
@media(max-width:768px){.tldr-kicker{font-size:.98rem;}}
.shock-emoji{display:inline-block;font-size:1.5rem;transform-origin:70% 70%;
  animation:shockWiggle 2.6s ease-in-out infinite;}
@keyframes shockWiggle{
  0%,70%,100%{transform:rotate(0) scale(1);}
  74%{transform:rotate(-10deg) scale(1.14);}
  80%{transform:rotate(9deg) scale(1.14);}
  86%{transform:rotate(-5deg) scale(1.06);}
  92%{transform:rotate(3deg) scale(1.03);}
}
@media(max-width:768px){.tldr-shock{font-size:1.22rem;}.shock-emoji{font-size:1.22rem;}}
@media(prefers-reduced-motion:reduce){.shock-emoji{animation:none;}}

/* ============ Institution logos ============ */
.logos-section{padding:2.4rem 1.5rem 1rem;}
.org-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:42px 52px;}
/* force an even 6 + 6 split on desktop; let logos flow naturally on mobile */
.logo-break{flex-basis:100%;height:0;}
@media(max-width:768px){.logo-break{display:none;}}
.org-logo{display:inline-flex;align-items:center;transition:transform .2s ease;}
.org-logo:hover{transform:translateY(-3px) scale(1.04);}
.org-logo img{max-height:88px;max-width:240px;object-fit:contain;
  filter:none;transition:transform .25s ease;}
.org-logo-fallback{
  font-size:.82rem;font-weight:500;color:var(--text-muted);border:1px dashed var(--border);
  border-radius:8px;padding:9px 14px;background:var(--bg-alt);max-width:200px;text-align:center;line-height:1.3;
}
body.dark .org-logo img{filter:none;}

/* ============ Teaser ============ */
.teaser .hero-body{padding-top:1.6rem;}
.teaser-img{max-width:1140px;width:100%;margin:0 auto;display:block;}
.teaser .subtitle{max-width:820px;margin:1.2rem auto 0;font-size:1rem;}
/* Hinton quote — prominent band between the teaser and the abstract */
.quote-hero{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2.6rem 1.5rem;}
.big-quote{max-width:780px;margin:0 auto;animation:fade .6s ease both;}
.bq-mark{font-family:'Castoro',serif;font-size:4rem;line-height:1;color:var(--esc);display:block;height:2.6rem;}
.bq-text{font-family:'Castoro',serif;font-style:italic;font-size:2.1rem;color:var(--text);line-height:1.35;margin:0 0 .7rem;}
.bq-cite{font-size:1.02rem;color:var(--text-muted);font-weight:500;margin:0;}
@media(max-width:768px){.bq-text{font-size:1.5rem;}}

/* ============ Findings + highlight cards ============ */
/* figure with a single descriptive caption (no "Figure N." prefix) */
.paper-fig{margin:1.4rem 0 1rem;}
.paper-fig img{width:100%;display:block;margin:0 auto;border:1px solid var(--border);border-radius:10px;background:#fff;}
.paper-fig figcaption{font-size:.85rem;color:var(--text-muted);margin-top:.6rem;text-align:center;line-height:1.5;
  max-width:880px;margin-left:auto;margin-right:auto;}
.paper-fig img{cursor:zoom-in;}
/* outer rounded card: holds the big figure + the yellow Finding box */
.finding-card{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;
  padding:1.4rem;margin-top:1.5rem;transition:transform .22s ease,box-shadow .22s ease;}
.finding-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.08);}
body.dark .finding-card:hover{box-shadow:0 16px 36px rgba(0,0,0,.5);}
.finding-card .paper-fig{margin:0;}
.finding-card .finding-box{margin-top:1.1rem;}
/* paper-style YELLOW boxed Finding callout — stands out like the paper */
.finding-box{background:#fdf3cf;border:2px solid #e6b93f;border-radius:12px;
  padding:1.25rem 1.45rem 1.15rem;box-shadow:0 6px 20px rgba(214,160,40,.22);}
.finding-box p{margin:0;color:#241f0a;font-size:1.06rem;line-height:1.62;}
.finding-box p b{color:#0f0b00;font-weight:700;}
.finding-no{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.76rem;letter-spacing:.07em;
  text-transform:uppercase;color:#6b4e00;background:#f3d574;border:1px solid #e0b53a;border-radius:999px;
  padding:4px 14px;margin-bottom:.7rem;}
.finding-no i{color:#d98a00;font-size:.95rem;}
body.dark .finding-box{box-shadow:0 8px 24px rgba(0,0,0,.45);}

/* ---- Key Findings: story lead-ins (question -> answer narrative) ---- */
.findings-intro{max-width:640px;margin-left:auto;margin-right:auto;font-size:1rem;}
/* the leading question above each finding card */
.find-q{max-width:760px;margin:2.7rem auto 0;text-align:center;}
.find-q-no{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--border);border-radius:999px;padding:5px 14px;}
.find-q-no i{font-size:.86rem;}
.find-q-text{font-family:'Castoro',serif;font-style:italic;font-size:1.7rem;line-height:1.34;
  font-weight:700;color:var(--text);margin:.9rem auto 0;max-width:680px;text-wrap:balance;}
@media(max-width:768px){.find-q-text{font-size:1.32rem;}}
/* connective bridge between components, with a short vertical tick */
.find-bridge{position:relative;max-width:720px;margin:1.9rem auto 0;padding-top:1.85rem;
  text-align:center;font-size:1.28rem;line-height:1.55;color:var(--text-muted);text-wrap:balance;}
.find-bridge::before{content:"";position:absolute;top:0;left:50%;width:2px;height:1.15rem;
  background:var(--border);transform:translateX(-50%);}
.find-bridge b{color:var(--text);font-weight:700;}
@media(max-width:768px){.find-bridge{font-size:1.12rem;}}

/* image lightbox */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;
  justify-content:center;z-index:200;padding:28px;cursor:zoom-out;}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{max-width:95%;max-height:92%;border-radius:8px;background:#fff;cursor:auto;}
.lb-close{position:absolute;top:14px;right:24px;font-size:2.3rem;line-height:1;background:none;border:none;color:#fff;cursor:pointer;}

/* ============ Method ============ */
.method-img{max-width:100%;width:100%;border:1px solid var(--border);border-radius:10px;}
.caption{font-size:.85rem;color:var(--text-muted);margin-top:.7rem;line-height:1.6;max-width:880px;margin-left:auto;margin-right:auto;}

/* ============ Interactive sections ============ */
.interactive-section{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.interactive-section.alt{background:var(--bg);}

/* Emotion wheel */
.rcm-highlight{font-weight:800;color:var(--accent);background:var(--accent-soft);
  padding:1px 7px;border-radius:6px;white-space:nowrap;}
.wheel-svg{max-width:560px;width:100%;cursor:pointer;}
.wheel-svg .quad{stroke:var(--bg);stroke-width:2;transition:opacity .15s,transform .15s;transform-origin:200px 200px;}
.wheel-svg .quad[data-q="nl"]{fill:#e8743b;}   /* negative-low (best)  — coral */
.wheel-svg .quad[data-q="nh"]{fill:#f2c14e;}   /* negative-high        — amber */
.wheel-svg .quad[data-q="ph"]{fill:#5bbf73;}   /* positive-high        — green */
.wheel-svg .quad[data-q="pl"]{fill:#5b9bd5;}   /* positive-low         — blue  */
.wheel-svg .quad{opacity:.45;}
.wheel-svg .quad.active{opacity:1;}
.wheel-svg .quad:hover{opacity:.85;}
.wheel-svg .axis{stroke:var(--text-muted);stroke-width:1.4;stroke-dasharray:3 3;}
.wheel-svg .hub{fill:var(--bg-card);stroke:var(--text-muted);stroke-width:1.4;}
.wheel-svg .hub-text{fill:var(--text);font-size:16px;text-anchor:middle;font-weight:600;}
.wheel-svg .ax-label{fill:var(--text-muted);font-size:15px;text-anchor:middle;font-weight:600;}
.wheel-svg .q-title{fill:#3a2a12;font-size:15px;text-anchor:middle;dominant-baseline:middle;font-weight:700;pointer-events:none;}

.wheel-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.3rem;}
.wp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem;}
.wp-name{font-size:1.15rem;font-weight:700;}
.wp-asr{font-size:1.6rem;font-weight:700;color:var(--venue);}
.wp-bar-wrap{margin:1.6rem 0 1rem;}
/* fixed 0–100% track; baseline tick at 71.6%; colored fill == current ASR */
.wp-track{position:relative;height:40px;border-radius:9px;
  background:var(--bg-alt);border:1px solid var(--border);}
.wp-bar{position:absolute;left:0;top:0;height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--venue),color-mix(in srgb,var(--venue) 80%,#000));
  display:flex;align-items:center;justify-content:flex-end;padding-right:11px;
  color:#fff;font-size:1.1rem;font-weight:800;min-width:2.6em;
  box-shadow:2px 0 8px rgba(0,0,0,.12);
  transition:width .7s cubic-bezier(.34,1.25,.4,1);}
/* fixed faint baseline marker */
.wp-baseline{position:absolute;top:-9px;bottom:-9px;width:0;
  border-left:2px dashed var(--venue);opacity:.5;}
.wp-base-num{position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  font-size:.86rem;font-weight:700;color:var(--venue);white-space:nowrap;}
.wp-note{font-size:.86rem;color:var(--text-muted);min-height:2.4rem;}
.wp-cues-title{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
  font-weight:700;margin:.6rem 0 .4rem;}
.wp-cues{margin:0;padding:0;list-style:none;}
.wp-cues li{font-size:.86rem;font-style:italic;background:var(--bg-alt);border:1px solid var(--border);
  border-radius:7px;padding:6px 10px;margin-bottom:6px;}

/* Walkthrough — chat-style conversation */
.walk-img{max-width:100%;width:100%;border-radius:12px;border:2px solid var(--accent);}
.walk-chat{min-height:380px;display:flex;flex-direction:column;gap:15px;padding:6px 2px;}
.wc-row{display:flex;align-items:flex-end;gap:11px;max-width:90%;opacity:0;transform:translateY(10px);}
.wc-row.left{align-self:flex-start;}
.wc-row.right{align-self:flex-end;flex-direction:row-reverse;}
.wc-row.show{animation:wcIn .45s cubic-bezier(.2,.8,.2,1.1) forwards;}
.wc-row.right.show{animation-name:wcInRight;}
@keyframes wcIn{from{opacity:0;transform:translate(-16px,8px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes wcInRight{from{opacity:0;transform:translate(16px,8px) scale(.96);}to{opacity:1;transform:none;}}
.wc-avatar{width:50px;height:50px;border-radius:50%;object-fit:contain;flex:none;
  border:2px solid var(--border);background:var(--bg-card);padding:3px;}
.wc-row.target .wc-avatar{border-color:var(--accent);}
.wc-row.right .wc-avatar{border-color:#8e7cc3;}
.wc-msg{display:flex;flex-direction:column;gap:4px;min-width:0;}
.wc-row.right .wc-msg{align-items:flex-end;}
.wc-who{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--text-muted);}
.wc-row.target .wc-who{color:var(--accent);}
.wc-row.final .wc-who{color:#2e9e54;}
.wc-row.emotion .wc-who{color:var(--venue);}
.wc-bubble{border:1.6px solid var(--border);background:var(--bg-card);border-radius:15px;
  padding:.72rem 1rem;font-size:1.02rem;line-height:1.4;color:var(--text);box-shadow:0 2px 9px rgba(0,0,0,.05);}
.wc-row.left .wc-bubble{border-bottom-left-radius:5px;}
.wc-row.right .wc-bubble{border-bottom-right-radius:5px;}
.wc-row.final .wc-bubble{border-color:#5bbf73;background:#e7f6ec;}
body.dark .wc-row.final .wc-bubble{background:#15301f;}
.wc-row.emotion .wc-bubble{border-color:var(--venue);background:var(--venue-soft);font-style:italic;font-weight:600;}
.wc-emo{font-size:1.15rem;vertical-align:-2px;margin-left:3px;}
.wc-sub{display:block;font-size:.82rem;color:var(--text-muted);margin-top:3px;font-style:italic;font-weight:400;}
.wc-tag{font-size:.82rem;font-weight:700;}
.ans-wrong{color:#c0392b;}
.ans-right{color:#1e9e54;}
/* Emotional Feedback labelled header (matches the paper figure) */
.wc-fb-label{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--venue);background:var(--venue-soft);
  border:1.6px solid var(--venue);border-radius:9px;padding:4px 11px;}
.wc-fb-label i{font-size:.78rem;}
.tag-wrong{color:#c0392b;font-weight:700;}
.tag-right{color:#1e9e54;font-weight:700;}

/* ============ Results ============ */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:1rem;}
.stat{background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:1.1rem .6rem;text-align:center;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.stat:hover{transform:translateY(-4px);border-color:var(--venue);box-shadow:0 10px 20px rgba(0,0,0,.08);}
body.dark .stat:hover{box-shadow:0 10px 20px rgba(0,0,0,.4);}
.stat-num{font-size:1.9rem;font-weight:700;color:var(--venue);line-height:1;}
.stat-label{font-size:.78rem;color:var(--text-muted);margin-top:.4rem;}
@media(max-width:768px){.stat-row{grid-template-columns:repeat(2,1fr);}}
.res-fam{margin-top:2.4rem;display:flex;align-items:center;gap:10px;}
.res-fam i{color:var(--accent);}
.qual-img{max-width:100%;width:100%;border:1px solid var(--border);border-radius:10px;}

/* Result table images — large framed cards with hover lift */
.res-table-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:18px;
  padding:1.4rem 1.5rem;margin:1.1rem auto 0;max-width:1080px;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.res-table-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 20px 44px rgba(0,0,0,.13);}
body.dark .res-table-card:hover{box-shadow:0 20px 44px rgba(0,0,0,.55);}
.res-table-img{width:100%;display:block;border-radius:10px;background:#fff;cursor:zoom-in;}
/* caption now lives INSIDE the card — bigger, darker, with a divider above */
.res-table-card .caption{
  max-width:none;margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--border);
  font-size:1.05rem;line-height:1.6;color:var(--text);text-align:left;
}
.res-table-card .caption b{color:var(--accent);font-weight:700;}
.cap-note{display:block;margin-top:.55rem;font-size:.92rem;color:var(--text-muted);opacity:1;}

/* invisible scroll-spy anchors inside Results — offset so TOC jumps land cleanly */
#res-intro,#quantitative,#ablation,#qualitative{scroll-margin-top:28px;}
/* keep the Ablation / Qualitative blocks clearly separated from what precedes them */
#ablation,#qualitative{margin-top:2.6rem;}

/* Ablation — 4-up grid of small charts, each with a short insight below */
.ablation-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
  max-width:1180px;margin:1.5rem auto 0;align-items:stretch;
}
.abl-card{
  display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
  padding:.9rem .9rem 1rem;box-shadow:0 4px 16px rgba(0,0,0,.05);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.abl-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 16px 36px rgba(0,0,0,.12);}
body.dark .abl-card:hover{box-shadow:0 16px 36px rgba(0,0,0,.5);}
.abl-img{
  width:100%;aspect-ratio:16/10;object-fit:contain;box-sizing:border-box;padding:6px;
  display:block;border-radius:9px;background:#fff;border:1px solid var(--border);cursor:zoom-in;
}
/* bottom-row tables are wide & short — give them a wider uniform box */
.abl-img.is-table{aspect-ratio:2/1;padding:8px 10px;}
.abl-note{font-size:.88rem;line-height:1.5;color:var(--text-muted);margin:.85rem .2rem 0;text-align:left;}
.abl-note b{display:block;margin-bottom:.2rem;color:var(--accent);font-weight:700;font-size:.96rem;line-height:1.35;}
@media(max-width:1023px){.ablation-grid{grid-template-columns:repeat(2,1fr);gap:1rem;}}
@media(max-width:560px){.ablation-grid{grid-template-columns:1fr;}}

/* ============ Video overview ============ */
.video-frame{
  position:relative;max-width:860px;margin:1.7rem auto 0;
  aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid var(--border);box-shadow:0 12px 38px rgba(0,0,0,.14);background:#0f1318;
}
.video-frame .video-embed{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#0f1318;display:block;}
.video-poster{
  position:absolute;inset:0;width:100%;height:100%;cursor:pointer;border:0;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:radial-gradient(120% 120% at 50% 32%,#1d2532 0%,#0f1318 70%);
}
.video-play{
  width:74px;height:74px;border-radius:50%;padding-left:5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--esc);color:#1b1b1f;font-size:1.55rem;
  box-shadow:0 8px 24px rgba(226,156,56,.5);transition:transform .22s ease,box-shadow .22s ease;
}
.video-poster:hover .video-play{transform:scale(1.08);box-shadow:0 12px 30px rgba(226,156,56,.66);}
.video-soon{font-size:.92rem;letter-spacing:.04em;color:#c7cdd6;font-weight:500;}

/* ============ Off the record (meme) ============ */
.fun-zone{
  background:radial-gradient(82% 120% at 50% -10%,rgba(226,156,56,.16),transparent 60%),var(--bg-alt);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.fun-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.85rem;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--text-muted);
}
.keycap{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.74rem;font-weight:700;letter-spacing:0;text-transform:none;color:#1b1b1f;
  background:linear-gradient(180deg,#fff,#e9ecf1);
  border:1px solid #c7ccd4;border-bottom-width:3px;border-radius:7px;
  padding:3px 8px 4px;box-shadow:0 1px 0 rgba(0,0,0,.12);
}
body.dark .keycap{background:linear-gradient(180deg,#2a313a,#1c222a);border-color:#3a424d;color:#e9edf2;}
.meme-card{
  display:inline-block;max-width:430px;margin:1.8rem auto 0;padding:14px 14px 0;
  background:#fff;border-radius:6px;box-shadow:0 14px 40px rgba(0,0,0,.18);
  transform:rotate(-2.4deg);transition:transform .3s ease,box-shadow .3s ease;
}
body.dark .meme-card{background:#f3f4f6;}
.meme-card:hover{transform:rotate(0) scale(1.02);box-shadow:0 20px 52px rgba(0,0,0,.26);}
.meme-img{display:block;width:100%;border-radius:3px;cursor:zoom-in;}
.meme-cap{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.82rem;color:#5b5f66;padding:.85rem .2rem 1rem;line-height:1.4;
}
@media(max-width:560px){.meme-card{transform:none;max-width:100%;}.meme-card:hover{transform:scale(1.01);}}

/* ============ Share + BibTeX ============ */
.share-card{
  max-width:680px;margin:1.6rem auto 0;padding:1.7rem 1.6rem;
  background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 6px 22px rgba(0,0,0,.05);
}
body.dark .share-card{box-shadow:0 8px 24px rgba(0,0,0,.4);}
.share-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.share-buttons .button.is-dark{background:#1f2329;border:none;transition:transform .18s ease,background .18s ease;}
.share-buttons .button.is-dark,.share-buttons .button.is-dark span,.share-buttons .button.is-dark i{color:#fff !important;}
.share-buttons .button.is-dark:hover{transform:translateY(-3px) scale(1.04);}
/* brand-coloured hovers */
.share-buttons .share-x:hover{background:#000 !important;}
.share-buttons .share-fb:hover{background:#1877f2 !important;}
.share-buttons .share-li:hover{background:#0a66c2 !important;}
.bibtex-box{position:relative;background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.2rem;}
.bibtex-box pre{background:none;color:var(--text);font-size:.84rem;overflow-x:auto;padding:0;}
.copy-btn{position:absolute;top:10px;right:10px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:7px;padding:4px 10px;font-size:.8rem;cursor:pointer;color:var(--text);}
.copy-btn:hover{background:var(--accent-soft);}

/* ============ Motivation cards (VisualMem-style) ============ */
.motiv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:1.6rem;}
.motiv-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
  padding:1.5rem 1.6rem;text-align:left;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.motiv-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 14px 32px rgba(0,0,0,.09);}
body.dark .motiv-card:hover{box-shadow:0 14px 32px rgba(0,0,0,.5);}
.motiv-tag{
  display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.01em;
  color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:4px 13px;margin-bottom:.95rem;
}
.motiv-title{font-size:1.12rem;font-weight:700;color:var(--text);line-height:1.35;margin:0 0 .6rem;}
.motiv-text{font-size:.95rem;color:var(--text-muted);line-height:1.62;margin:0;}
.motiv-text b{color:var(--text);font-weight:700;}
@media(max-width:900px){.motiv-cards{grid-template-columns:1fr;}}

/* ============ Open Directions — What's Next ============ */
.dir-list{max-width:880px;margin:1.9rem auto 0;display:flex;flex-direction:column;gap:16px;}
.dir-card{--dir:#3056d3;display:flex;gap:1.15rem;align-items:flex-start;text-align:left;
  padding:1.4rem 1.6rem;border-radius:16px;
  background:color-mix(in srgb,var(--dir) 7%,var(--bg-card));
  border:1px solid color-mix(in srgb,var(--dir) 24%,var(--border));
  transition:transform .2s ease,box-shadow .2s ease;}
.dir-card:hover{transform:translateY(-3px);
  box-shadow:0 14px 32px color-mix(in srgb,var(--dir) 18%,transparent);}
.dir-ico{flex:0 0 auto;font-size:1.45rem;line-height:1;width:2.7rem;height:2.7rem;
  display:grid;place-items:center;border-radius:13px;
  background:color-mix(in srgb,var(--dir) 15%,var(--bg-card));}
.dir-title{font-size:1.18rem;font-weight:700;line-height:1.3;margin:.15rem 0 .5rem;
  color:color-mix(in srgb,var(--dir) 78%,var(--text));}
.dir-text{font-size:.97rem;color:var(--text-muted);line-height:1.64;margin:0;}
.dir-text b{color:var(--text);font-weight:700;}
@media(max-width:560px){.dir-card{padding:1.2rem;}.dir-title{font-size:1.08rem;}.dir-ico{width:2.4rem;height:2.4rem;font-size:1.3rem;}}
/* closing line — standalone quote (no box, no quote marks) */
.future-quote{position:relative;max-width:760px;margin:2.7rem auto 0;padding-top:1.6rem;
  text-align:center;font-family:'Castoro',serif;font-style:italic;font-weight:600;
  font-size:1.5rem;line-height:1.46;color:var(--text);text-wrap:balance;}
.future-quote::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:46px;height:3px;border-radius:3px;background:var(--esc);}
.future-quote .esc-name{font-style:normal;}
@media(max-width:768px){.future-quote{font-size:1.2rem;}}

/* ============ Footer ============ */
.footer{background:var(--bg-alt);border-top:1px solid var(--border);color:var(--text-muted);}
.footer-corgi{width:48px;height:48px;object-fit:contain;margin-bottom:.5rem;
  animation:corgiBob 3s ease-in-out infinite;transform-origin:center bottom;}
.footer-corgi:hover{animation-play-state:paused;}
.footer-note{font-size:.82rem;}