/* Layout-only — ds-* surfaces come from the kit files, do not restyle them here. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;overflow-x:clip}
.lab-bar{
  position:sticky;top:0;z-index:40;
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--border);
  background:color-mix(in oklab,var(--background) 88%,transparent);
  backdrop-filter:blur(10px);
  font-size:.8125rem;
}
.lab-bar a{color:var(--muted-foreground);text-decoration:none;font-weight:500}
.lab-bar a[aria-current="page"]{color:var(--foreground);font-weight:600}
.lab-bar .pair{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
/* Production top bar: same chrome as the lab bar, studio wordmark on the left. */
.site-bar .home{display:flex;align-items:center}
.site-bar .home img{height:1.5rem;width:auto;display:block}
.site-bar .cta{
  color:var(--foreground);font-weight:600;padding:.35rem .75rem;border-radius:999px;
  border:1px solid color-mix(in oklab,var(--primary) 60%,var(--border));
  background:color-mix(in oklab,var(--primary) 18%,transparent);
}
.site-bar .cta:hover{background:color-mix(in oklab,var(--primary) 30%,transparent)}
@media (max-width:520px){.site-bar .pair a:not(.cta){display:none}}
.foot .foot-more{flex-basis:100%;order:3}
.shell{max-width:72rem;margin:0 auto;padding:0 1.25rem 5rem}
.hero{
  display:grid;gap:2.5rem;align-items:center;
  padding:3.5rem 0 3rem;
  min-height:min(88vh,52rem);
}
@media (min-width:900px){
  .hero{grid-template-columns:1.05fr .95fr;gap:3rem;padding-top:4.5rem}
}
.hero-copy{max-width:34rem}
.hero-copy .ds-display{margin-bottom:.75rem;text-wrap:balance}
.hero-copy .ds-supporting{max-width:34ch;margin-bottom:1.4rem}
.beta-box{max-width:28rem}
.beta-box .ds-control-row{grid-template-columns:minmax(0,1fr) auto;margin-top:.35rem}
/* layout's two-col rule is more specific than the kit's 40rem stack; without this the
   primary CTA clips at 320px (minmax 10rem + nowrap button) under overflow-x:clip. */
@media (max-width:40rem){
  .beta-box .ds-control-row{grid-template-columns:1fr}
  .beta-box .ds-control-row>.ds-btn{width:100%}
}
.beta-box .fine{font-size:.75rem;color:var(--muted-foreground);margin:.55rem 0 0}
.beta-box .wait-status{font-size:.8125rem;font-weight:600;color:var(--link,var(--primary));margin:.4rem 0 0}
.stage{
  position:relative;isolation:isolate;
  border-radius:calc(var(--radius) + 8px);
  border:1px solid var(--border);
  background:
    radial-gradient(120% 90% at 70% 20%, color-mix(in oklab,var(--primary) 28%, transparent), transparent 55%),
    radial-gradient(80% 70% at 20% 90%, color-mix(in oklab,var(--primary) 12%, transparent), transparent 50%),
    var(--card);
  box-shadow:var(--shadow-lg);
  min-height:18rem;
  display:grid;place-items:center;
  overflow:hidden;
  /* Extra bottom padding keeps the icon clear of the lanes strip. */
  padding:2rem 2rem 7.5rem;
}
.stage::before{
  content:"";position:absolute;inset:auto 12% 14% 12%;height:28%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%);
  filter:blur(8px);z-index:0;pointer-events:none;
}
.stage-icon{
  position:relative;z-index:1;width:min(52%,14rem);
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.45));
  transform-origin:50% 60%;
}
/* Sessions strip — the one asset only Aegis carries: parallel agent lanes */
.lanes{
  position:absolute;z-index:1;left:1.25rem;right:1.25rem;bottom:1.25rem;
  display:grid;gap:.4rem;
  font-family:var(--font-mono);font-size:.68rem;color:var(--muted-foreground);
}
.lane{
  --tone:var(--primary);
  display:grid;grid-template-columns:auto minmax(0,1fr) 5.25rem auto;gap:.6rem;align-items:center;
  padding:.42rem .6rem;border-radius:var(--radius-sm);
  background:color-mix(in oklab,var(--background) 70%,transparent);
  border:1px solid var(--border);
}
.lane .dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--tone);box-shadow:0 0 0 0 var(--tone)}
.lane .meta{display:flex;gap:.5rem;min-width:0;white-space:nowrap}
.lane .who{color:var(--foreground);flex:none}
.lane .task{overflow:hidden;text-overflow:ellipsis;opacity:.75}
.lane .bar{height:.3rem;border-radius:999px;background:var(--secondary);overflow:hidden}
.lane .bar i{display:block;height:100%;background:var(--tone);width:var(--w,0%)}
.lane .state{text-align:right;color:var(--tone);white-space:nowrap;min-width:6ch}
.lane.is-wait{--tone:#d9a441}
.lane.is-done{--tone:#3dba7a}
.lane.is-wait .dot{animation:lane-pulse 1.1s ease-out infinite}
@keyframes lane-pulse{to{box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.lane .dot,.council .dot,.desk-title .live-dot{animation:none}}
@media (max-width:520px){.lane{grid-template-columns:auto minmax(0,1fr) 3.5rem auto}.lane .task{display:none}}
.rail{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.rail .ds-kbd{font-family:var(--font-mono)}
.section{padding:3.25rem 0 0;max-width:40rem}
.section .ds-section-title{margin-bottom:.55rem}
.bullets{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.65rem}
.bullets li{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  font-size:.9375rem;line-height:1.45;
}
.bullets li svg{margin-top:.2rem;flex:none;color:var(--primary)}
.how{margin-top:1.1rem;display:grid;gap:.7rem;padding:0;list-style:none;counter-reset:step}
.how li{
  counter-increment:step;
  display:grid;grid-template-columns:2rem 1fr;gap:.75rem;align-items:start;
  font-size:.9375rem;
}
.how li::before{
  content:counter(step);
  font-family:var(--font-mono);font-size:.75rem;font-weight:600;
  width:2rem;height:2rem;border-radius:999px;
  display:grid;place-items:center;
  background:var(--secondary);color:var(--foreground);border:1px solid var(--border);
}
.closing{margin-top:3.5rem;max-width:34rem}
.closing .ds-section-title{margin-bottom:.4rem}
.foot{
  margin-top:4rem;padding-top:1.25rem;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.8125rem;color:var(--muted-foreground);
}
.foot a{color:var(--muted-foreground)}
/* Only hide reveal targets when JS is running; without it (or if motion.js throws) the page stays readable.
   html.js .reveal is (0,2,1); the reduced-motion rule must match that or motion-off users
   keep opacity:0 when motion.js has not yet (or never) applied inline styles. */
html.js .reveal{opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){html.js .reveal,.reveal{opacity:1;transform:none}}
/* Cerulean lane: sharper, mono status line */
.lane-cerulean .stage{border-radius:var(--radius)}
.lane-cerulean .status-line{font-family:var(--font-mono);font-size:.75rem;color:var(--muted-foreground);margin-bottom:.85rem}
/* Custom lane: more stage presence */
.lane-custom .hero{min-height:min(92vh,56rem)}
.lane-custom .stage{min-height:22rem}
.lane-custom .stage-open{min-height:0}
.lane-custom .stage-icon{width:min(58%,15.5rem)}

/* Greek-myth art lane (custom comp) */
.stage-framed{
  aspect-ratio:1/1;min-height:0;padding:0;
  background:#121720;
}
.stage-framed::before{display:none}
.stage-art{
  position:absolute;inset:0;width:100%;height:100%;
  transform:translateY(-7%) scale(1.06);transform-origin:50% 45%;
  z-index:0;
}
.stage-art img{display:block;width:100%;height:100%;object-fit:cover}
.stage-framed .lanes{z-index:2}
.stage-framed .lane{background:color-mix(in oklab,#121720 78%,transparent)}
/* Open stage: the shield cutout sits on the page canvas itself — no card, no frame.
   Depth comes from a halo behind, a ground shadow below, and the lanes crossing the rim. */
.stage-open{
  aspect-ratio:1/1;min-height:0;padding:0;display:block;
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
}
.stage-open::before{
  content:"";position:absolute;left:16%;right:6%;top:auto;bottom:4%;height:14%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);
  filter:blur(16px);z-index:0;pointer-events:none;
}
.stage-open::after{
  content:"";position:absolute;left:53%;top:50%;width:130%;aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--primary) 26%,transparent),transparent 58%);
  z-index:-1;pointer-events:none;
}
.stage-open .stage-art{
  /* Oversize the art box: the disc only fills ~77% of its own canvas. */
  inset:-9% -4% -3% -12%;width:auto;height:auto;
  transform:none;transform-origin:53% 50%;z-index:1;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.stage-open .stage-art img{object-fit:contain}
/* Disc is centred at 53%/50% with radius ~38.5% of the box; keep the hover sheen on the metal only. */
.stage-open .sheen{
  -webkit-mask-image:radial-gradient(circle at 53% 50%,#000 38%,transparent 38.6%);
  mask-image:radial-gradient(circle at 53% 50%,#000 38%,transparent 38.6%);
  border-radius:0;
}
.stage-open .lanes{left:4%;right:0;bottom:1%;z-index:2}
.stage-open .lane{
  background:color-mix(in oklab,var(--background) 84%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
/* Team mode under the owl's gaze: one job (hub) fans out to four roles, converges to one seal.
   Positions are % of the plate so the composition survives the 3/2 cover-fit; the branch
   tip ends near 50%/55%, so the council starts below-right of it. */
.council{
  position:absolute;left:42%;right:.9rem;top:34%;bottom:.9rem;z-index:2;
  font-family:var(--font-mono);color:var(--muted-foreground);
  /* Type tracks the plate width so labels stay whole on narrow columns. */
  font-size:clamp(.58rem,1.8cqi,.7rem);
}
.art-wide{container-type:inline-size}
.council .threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.council .thread{
  /* Butt caps: a fully retracted dash must leave no cap dot at either end. */
  fill:none;stroke:var(--tone,var(--primary));stroke-width:1.25;stroke-linecap:butt;opacity:.8;
}
.council .thread.is-wait{--tone:#d9a441}
.council .thread.is-done{--tone:#3dba7a}
.council .hub,.council .seal{
  position:absolute;left:0;top:58%;transform:translateY(-50%);
}
/* The lead is the one seat that never leaves: green, like a settled lane, because it owns the approval. */
.council .hub{
  --tone:#3dba7a;
  display:grid;gap:.12rem;padding:.4rem .55rem;width:37%;box-sizing:border-box;
  border-radius:var(--radius-sm);border:1px solid color-mix(in oklab,var(--tone) 35%,var(--border));
  background:color-mix(in oklab,#121720 86%,transparent);
}
.council .hub-k{
  display:flex;align-items:center;gap:.4em;
  font-size:.9em;letter-spacing:.06em;text-transform:uppercase;color:var(--tone);white-space:nowrap;
}
.council .hub-k .dot{width:.45rem;height:.45rem;border-radius:999px;background:var(--tone);box-shadow:0 0 0 0 var(--tone);animation:lane-pulse 1.6s ease-out infinite}
.council .hub-who{color:var(--foreground);font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.council .hub-t{color:var(--muted-foreground);font-size:.92em;line-height:1.3;overflow-wrap:anywhere;margin-top:.1rem}
.council .seat{
  --tone:var(--primary);
  position:absolute;left:50%;right:0;top:calc(var(--i) * 25% + 1%);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.45em;align-items:center;
  padding:.36em .5em;border-radius:var(--radius-sm);
  background:color-mix(in oklab,#121720 84%,transparent);border:1px solid var(--border);
}
.council .seat .dot{width:.45rem;height:.45rem;border-radius:999px;background:var(--tone);box-shadow:0 0 0 0 var(--tone)}
.council .seat .meta{display:grid;min-width:0;line-height:1.25}
.council .seat .role{font-size:.9em;letter-spacing:.08em;text-transform:uppercase;color:var(--tone)}
.council .seat .who{color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.council .seat .state{color:var(--tone);white-space:nowrap;text-align:right;min-width:1ch}
.council .seat .state:empty{display:none}
.council .seat.is-live .dot{animation:lane-pulse 1.3s ease-out infinite}
.council .seat.is-wait{--tone:#d9a441}
.council .seat.is-done{--tone:#3dba7a}
.council .seat.is-done .dot{animation:none}
.council .seal{
  --tone:#3dba7a;
  padding:.4rem .8rem;border-radius:999px;
  border:1.5px solid var(--tone);color:var(--tone);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:color-mix(in oklab,#121720 80%,transparent);
  outline:1px solid color-mix(in oklab,var(--tone) 70%,transparent);outline-offset:3px;
  opacity:0;
}
/* Motion-off / no GSAP: show the resolved state, no threads to draw. */
.council.is-static .threads{display:none}
.council.is-static .seat{--tone:#3dba7a}
.council.is-static .seal{opacity:1}
.council.is-static .hub{display:none}
@media (max-width:520px){
  /* Narrow: the council cannot share a 3/2 plate with the owl, so it sits beneath the plate in flow. */
  .art.art-wide{aspect-ratio:auto}
  .art.art-wide .plate{position:relative;aspect-ratio:3/2;transform:none}
  .council{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:.45rem .6rem;align-items:center;
    padding:.75rem .8rem .85rem;font-size:.68rem;
    background:#121720;border-top:1px solid var(--border);
  }
  .council .threads{display:none}
  .council .hub{position:static;transform:none;width:auto;grid-column:1;grid-row:1/5;align-self:center}
  .council .seat{position:static;grid-column:2}
  .council .seat .state{display:none}
  .council .seal{left:.8rem;top:50%}
  /* is-static hid the hub (display:none) but left an empty 2-col track; collapse to seats + seal. */
  .council.is-static{grid-template-columns:minmax(0,1fr)}
  .council.is-static .seat{grid-column:1}
  .council.is-static .seal{position:static;left:auto;top:auto;transform:none;justify-self:start}
}
.eyebrow{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-foreground);margin:0 0 1rem;
}
.eyebrow .mark{width:20px;height:20px;border-radius:5px}
.eyebrow .brand{color:var(--foreground);font-weight:600;letter-spacing:.06em}
.eyebrow .sep{opacity:.5}
.lane-custom{--ochre:#d9a441;--terracotta:#c9703f}
.kicker{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ochre,var(--primary));margin:0 0 .6rem;
}
.meander{
  height:16px;margin:3.5rem 0 0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23d9a441' stroke-width='1.5' stroke-linecap='square'><path d='M0 1h16M0 15h16'/><path d='M13 15V4H4v8h5V8'/></svg>");
  background-repeat:repeat-x;background-size:16px 16px;
  opacity:.55;
}
.section.split{
  max-width:none;
  display:grid;gap:2.5rem;align-items:center;
}
@media (min-width:900px){
  .section.split{grid-template-columns:1fr 1fr;gap:3.5rem}
  .section.split-rev{grid-template-columns:.8fr 1.2fr}
}
.section.split > div{max-width:36rem}
@media (min-width:900px){.section.split-desk{grid-template-columns:1.1fr .9fr}}
/* The desk: Mission Control as page furniture — a status bar and four worktree tiles, no picture frame. */
.section.split > .desk{position:relative;max-width:none;padding:.25rem 0}
.desk-bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;align-items:baseline;
  padding:0 .25rem .7rem;margin-bottom:.75rem;border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:.7rem;color:var(--muted-foreground);
}
.desk-title{display:inline-flex;align-items:center;gap:.5rem;color:var(--foreground);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.desk-title .live-dot{width:.45rem;height:.45rem;border-radius:999px;background:#3dba7a;box-shadow:0 0 0 0 #3dba7a;animation:lane-pulse 1.8s ease-out infinite}
.desk-stats b{color:var(--foreground);font-weight:600;font-variant-numeric:tabular-nums}
.lanes.tiles{
  position:relative;inset:auto;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;
}
@media (max-width:520px){
  .lanes.tiles{grid-template-columns:1fr}
  .lane.tile{grid-template-columns:auto minmax(0,1fr) auto}
  .lane.tile .task{display:block}
}
.tile{
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"dot who state" "task task task" "bar bar cost";
  gap:.3rem .5rem;padding:.7rem .8rem;
  background:color-mix(in oklab,var(--background) 82%,transparent);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.7);
}
.tile .dot{grid-area:dot}
.tile .meta{display:contents}
.tile .who{grid-area:who;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .task{grid-area:task;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.7}
.tile .bar{grid-area:bar;align-self:center}
.tile .state{grid-area:state;min-width:0}
.tile .cost{grid-area:cost;text-align:right;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.desk .sheen{border-radius:var(--radius)}
.art{
  margin:0;border-radius:calc(var(--radius) + 8px);overflow:hidden;
  border:1px solid var(--border);background:#121720;box-shadow:var(--shadow-lg);
}
.art .plate{position:absolute;inset:0}
.art img{display:block;width:100%;height:100%;object-fit:cover}
.art-wide{aspect-ratio:3/2}
/* Same ratio as the plate art (900x1350) so lid coordinates map 1:1 with no cover-crop. */
.art-tall{aspect-ratio:2/3;max-height:34rem;justify-self:center;width:100%;max-width:22.5rem}
/* Temple: the sun breathes, and each column carries a light that answers a numbered step. */
.sun-glow{
  position:absolute;left:50%;top:33%;width:86%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(212,120,66,.75),rgba(212,120,66,0) 58%);
  mix-blend-mode:screen;opacity:.22;pointer-events:none;
}
.pillar{
  position:absolute;left:var(--l);top:51.4%;width:14.2%;height:39.2%;border-radius:2px;
  background:linear-gradient(90deg,rgba(232,222,198,0),rgba(232,222,198,.95) 46%,rgba(232,222,198,0));
  mix-blend-mode:soft-light;opacity:0;pointer-events:none;
}
.pillar::after{
  content:"";position:absolute;inset:-6% -20%;border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(217,164,65,.55),rgba(217,164,65,0) 65%);
  mix-blend-mode:screen;
}
.how li::before{transition:background-color .35s,border-color .35s,color .35s,box-shadow .35s}
.how li.is-lit::before{
  color:var(--ochre);border-color:color-mix(in oklab,var(--ochre) 55%,var(--border));
  background:color-mix(in oklab,var(--ochre) 16%,var(--secondary));
  box-shadow:0 0 0 3px color-mix(in oklab,var(--ochre) 18%,transparent);
}
.how[data-pillars] li{cursor:default}
.ds-section-title.sub{font-size:1.05rem;margin:1.75rem 0 .25rem}
.how li strong{color:var(--foreground)}
.lane-custom .closing{margin-top:3rem}

/* Depth pass — the art plates are tactile; the page around them should not read as flat UI. */
.lane-custom{
  background:
    radial-gradient(70% 45% at 22% -5%, color-mix(in oklab,var(--primary) 16%,transparent), transparent 70%),
    radial-gradient(50% 40% at 90% 30%, color-mix(in oklab,var(--primary) 8%,transparent), transparent 70%),
    radial-gradient(40% 30% at 85% 85%, color-mix(in oklab,#c9703f 9%,transparent), transparent 70%),
    var(--background);
}
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
}
.lane-custom .hero{position:relative;perspective:1400px}
.lane-custom .hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-12%;top:-8%;width:64%;height:110%;
  background:radial-gradient(closest-side, color-mix(in oklab,var(--primary) 30%,transparent), transparent);
  filter:blur(40px);opacity:.9;
}
.lane-custom .section.split{perspective:1400px}
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt .lanes{transform:translateZ(36px)}
.sheen{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(36% 36% at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .45s;
}
.tilt:hover .sheen{opacity:1}
.stage-framed{box-shadow:var(--shadow-lg), 0 40px 80px -30px color-mix(in oklab,var(--primary) 45%,transparent)}
.stage-open{box-shadow:none}
.art{position:relative;box-shadow:var(--shadow-lg), 0 30px 60px -30px color-mix(in oklab,var(--primary) 35%,transparent)}
.art .plate{transform:scale(1.1);will-change:transform}
.ds-display em{font-style:normal;color:var(--ochre,var(--primary))}
/* Owl mascot — cutout of the plate owl; eyelids are cream overlays GSAP blinks. */
.closing{position:relative;max-width:none;display:grid;gap:2rem;align-items:center}
@media (min-width:760px){.closing{grid-template-columns:minmax(0,34rem) auto;gap:3rem}}
.closing .beta-box{max-width:28rem}
.owl{position:relative;width:clamp(7rem,16vw,11rem);aspect-ratio:490/720;justify-self:center;filter:drop-shadow(0 22px 30px rgba(0,0,0,.5))}
.owl img{display:block;width:100%;height:100%;position:relative;z-index:1}
/* Terracotta sun behind the mascot — echoes the temple plate. */
.owl .sun{
  position:absolute;left:50%;top:30%;width:120%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;background:var(--terracotta,#c9703f);opacity:.85;z-index:0;
  box-shadow:0 0 60px 10px color-mix(in oklab,var(--terracotta,#c9703f) 35%,transparent);
}
.blink-group{position:relative}
/* Eyelid: --x/--y are the eye centre in plate percent, --d the diameter as percent of plate width.
   Sized tight to the eye opening only — no lash line (it read as face motion). */
.lid{
  position:absolute;left:var(--x);top:var(--y);width:var(--d);aspect-ratio:1;
  /* Centre via margins, not translate: GSAP folds a CSS translate into px at first
     touch, which goes stale when the plate resizes. Margin-top % also resolves
     against the containing block width, so this is exactly half the diameter. */
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius:50%;background:var(--c,#e8dec6);
  transform:scaleY(0);transform-origin:50% 0;
  pointer-events:none;z-index:2;overflow:hidden;
}