*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F9F9F7;color:#111111;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23111111' fill-opacity='0.05' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E")}
a{color:#111111;text-decoration:none}
a:hover{color:#1A8341}
::selection{background:#111111;color:#F9F9F7}
sup{font-size:0.6em;vertical-align:super}
sub{font-size:0.66em}
pre{margin:0}

@keyframes rl2bob{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(6px);opacity:.85}}
@keyframes rl2wheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(9px);opacity:0}}
@keyframes archfill{from{width:0%}to{width:100%}}
@keyframes rl2spin{to{transform:rotate(360deg)}}
@keyframes archcapin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes bargrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.rev{opacity:0;transform:translateY(38px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}
/* below the sidebar breakpoint, the section TOC becomes a horizontal bar under the header (see mobile block at end) */
@media (max-width:1239px) and (min-width:761px){#side-toc{display:none}}

/* hover states (replaces design's style-hover attribute) */
.hv-green:hover{color:#1A8341}
.hv-invert{transition:all .2s}
.hv-invert:hover{background:#111111;color:#F9F9F7}
.hv-card{transition:transform .2s ease-out,box-shadow .2s ease-out}
.hv-card:hover{box-shadow:0 10px 26px rgba(17,17,17,0.10);transform:translateY(-3px)}
.hv-marker{transition:background .2s,color .2s,box-shadow .2s}
.hv-marker:hover{box-shadow:0 0 0 4px rgba(26,131,65,0.22),0 2px 8px rgba(0,0,0,0.28)}

/* bar entrance animation */
.bench-grown rect.bar{transform-box:fill-box;transform-origin:bottom;animation:bargrow .7s cubic-bezier(.2,.7,.2,1) both}
/* error bars + value labels fade in only after the bars have grown */
@keyframes annofade{from{opacity:0}to{opacity:1}}
.bench-grown .bar-anno{opacity:0;animation:annofade .45s ease .72s both}
@media (prefers-reduced-motion:reduce){.bench-grown rect.bar{animation:none}.bench-grown .bar-anno{animation:none;opacity:1}}
/* combined-scaling horizontal bars grow from the left, whiskers/labels/gains fade in after */
@keyframes hbargrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.samples-grown rect.hbar{transform-box:fill-box;transform-origin:left;animation:hbargrow .7s cubic-bezier(.2,.7,.2,1) both}
.samples-grown .hbar-anno{opacity:0;animation:annofade .45s ease .72s both}
@media (prefers-reduced-motion:reduce){.samples-grown rect.hbar{animation:none}.samples-grown .hbar-anno{animation:none;opacity:1}}

/* demo "RL² in action" carousel */
.demo-ex{display:none}
.demo-ex.on{display:block;animation:archcapin .4s ease both}
.demo-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.demo-block{position:relative;border:1px solid #111111;border-radius:13px;overflow:hidden;background:#0A0A0A}
.demo-block.is-plot{background:#FFFFFF}
.demo-block .demo-tag{position:absolute;left:9px;top:9px;z-index:6;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;background:rgba(10,10,10,0.74);color:#F9F9F7;font-family:'Chakra Petch';font-size:9.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;backdrop-filter:blur(3px)}
.demo-block.is-plot .demo-tag{background:rgba(17,17,17,0.86)}
.demo-block.is-hero{border-color:#1A8341;box-shadow:0 0 0 1px #1A8341}
.demo-block.is-hero .demo-tag{background:#1A8341;color:#F9F9F7}
/* single-baseline example (e.g. Pan cleaning): match the width of one "ours" video on desktop */
.demo-grid-solo{max-width:calc(50% - 6px);margin:0 auto;grid-template-columns:1fr}
/* on phones the "ours" videos stack full-width, so the lone baseline must too (else it looks shrunk) */
@media (max-width:600px){.demo-grid{grid-template-columns:1fr}.demo-grid-solo{max-width:none}.demo-span2{grid-column:auto!important}}

/* grouped baseline vs. proposed */
.demo-group{border:1px solid #E5E5E0;border-radius:14px;padding:12px 12px 13px;background:#FCFCFB;transition:opacity .45s ease,filter .45s ease,box-shadow .3s ease}
.demo-group + .demo-group{margin-top:12px}
.demo-group.base{border-color:#EBD3CF;background:#FBF6F5}
.demo-group.ours{border-color:#1A8341;background:#F3FAF5}
.demo-group:not(.active){opacity:.42;filter:grayscale(.5)}
.demo-group.ours.active{box-shadow:0 0 0 1px #1A8341,0 8px 22px rgba(26,131,65,0.13)}
.demo-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.demo-group-titrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.demo-group-eyebrow{font-family:'Chakra Petch';font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase}
.demo-group.base .demo-group-eyebrow{color:#B91C1C}
.demo-group.ours .demo-group-eyebrow{color:#1A8341}
.demo-group-sub{font-family:'DM Sans';font-size:13px;line-height:1.4;color:#525252;margin-top:3px}
.demo-chip{font-family:'Chakra Petch';font-size:9.5px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}
.demo-chip.fail{background:#FBE3E0;color:#B91C1C;border:1px solid #EBC4BF}
.demo-chip.ok{background:#DCF3E4;color:#1A8341;border:1px solid #B7E3C6}
.demo-status{font-family:'Chakra Petch';font-size:9.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#8A8A8A;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.demo-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.demo-status.live{color:#1A8341}
.demo-status.live .dot{animation:rl2pulse 1.1s ease-in-out infinite}
@keyframes rl2pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.demo-flow{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 0 8px;font-family:'Chakra Petch';font-size:9.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#A3A3A3}
.demo-flow svg{width:15px;height:15px}

/* task gallery */
.gal-card{background:#F9F9F7;border:1px solid #111111;border-radius:16px;padding:16px 16px 17px}
.gal-card + .gal-card{margin-top:16px}
.gal-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:14px;flex-wrap:wrap}
.gal-methods{display:grid;gap:12px;align-items:start}
.gal-methods.env{grid-template-columns:1fr 1fr 2fr}
.gal-methods.prompt{grid-template-columns:1fr 2fr}
.gal-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.gal-group-label{font-family:'Chakra Petch';font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#525252}
.gal-group.combo .gal-group-label{color:#1A8341}
.gal-tiles{display:grid;grid-template-columns:1fr;gap:8px}
.gal-group.combo .gal-tiles{grid-template-columns:1fr 1fr}
.gal-tile{position:relative;aspect-ratio:4/3;border:1px solid #111111;border-radius:11px;overflow:hidden;background:#0A0A0A}
.gal-tile.plot{background:#FFFFFF}
.gal-tile.ours{border-color:#1A8341;box-shadow:0 0 0 1px #1A8341}
.gal-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal-tile.plot video{object-fit:contain;background:#FFFFFF}
.gal-tag{position:absolute;left:8px;top:8px;z-index:3;padding:4px 8px;border-radius:6px;background:rgba(10,10,10,0.74);color:#F9F9F7;font-family:'Chakra Petch';font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;backdrop-filter:blur(3px)}
.gal-tile.plot .gal-tag{background:rgba(17,17,17,0.86)}
.gal-tile.ours .gal-tag{background:#1A8341}
/* gallery: on phones stack every video full-width so all tiles share the same
   dimensions (side-by-side columns squeeze the adaptive-steering + CP-band pair
   into a smaller size than the rephrase clip) */
@media (max-width:760px){
  .gal-methods.prompt,.gal-methods.env{grid-template-columns:1fr;overflow-x:visible}
  .gal-group.combo .gal-tiles{grid-template-columns:1fr}
}

/* ============ mobile (<=760px) ============ */
@media (max-width:760px){
  /* 1 + 5. header: keep the RL²-VLA logo on one line and surface the section menu as a scrollable bar */
  header > div{padding:0 14px!important;gap:10px!important}
  .site-logo{white-space:nowrap;font-size:17px!important}
  .site-nav a{padding:0 8px!important;font-size:10px!important;letter-spacing:0.07em!important}

  #side-toc{display:block;position:fixed;top:56px!important;left:0!important;right:0!important;width:100%!important;z-index:150;background:rgba(249,249,247,0.94);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #E2E2DC;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #toc-nav{display:flex;align-items:center;padding:0 10px;white-space:nowrap}
  #toc-nav a{white-space:nowrap;padding:11px 12px!important;border-left:none!important}
  /* offset anchor jumps so section tops clear both fixed bars */
  html{scroll-padding-top:104px}

  /* 2. overview metrics: scroll horizontally rather than squeezing 5 columns into the viewport */
  .metrics-grid{grid-template-columns:repeat(5,minmax(130px,1fr))!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch}

  /* 3. poster figure: shrink the vertical padding on phones (desktop value is too large) */
  .fig1-box{padding:10px 0!important}
}