/* Measured from benji.org on 2026-11-01. Research and exceptions:
   docs/research/2026-11-01/benji-motion-references.md.
   Inter is bundled from the existing Fontsource dependency under the OFL. */
@font-face {
  font-family:'Inter Variable';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('./fonts/inter-latin-wght-normal.woff2') format('woff2');
}
:root {
  --ds-font:'Inter Variable',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ds-paper:#fdfdfc;--ds-ink:#111;--ds-muted:rgba(0,0,0,.4);--ds-rule:#f2f2f2;
  --ds-surface:#fff;--ds-font-body:14px;--ds-line-body:20px;--ds-weight-body:460;
  --ds-tracking:-.09008px;--ds-measure:550px;--ds-gutter:24px;
  --ds-radius-stage:8px;--ds-stage-shadow:inset 0 0 0 1px #f2f2f2;
  --ds-icon-size:16px;--ds-icon-inset:12px;--ds-hit-size:44px;
  --ds-control-rest:.35;--ds-control-hover:.6;--ds-control-disabled:.15;
  --ds-ease-morph:cubic-bezier(.32,.72,0,1);--ds-duration-morph:300ms;
  --ds-duration-hover:150ms;--ds-duration-outline:80ms;--ds-duration-label:100ms;
  --ds-focus:rgba(0,122,255,.5);--ds-accent:#8861ce;
  --ds-reading-fade:linear-gradient(#fff 0%,rgba(255,255,255,.737) 19%,rgba(255,255,255,.54) 34%,rgba(255,255,255,.38) 47%,rgba(255,255,255,.28) 56.5%,rgba(255,255,255,.192) 65%,rgba(255,255,255,.125) 73%,rgba(255,255,255,.075) 80.2%,rgba(255,255,255,.043) 86.1%,rgba(255,255,255,.02) 91%,rgba(255,255,255,.008) 95.2%,rgba(255,255,255,.004) 98.2%,transparent);
}

/* Shared exhibit atoms. Transparent hit area is an accessibility adaptation;
   the visible 16px icon retains the reference's 12px corner inset. */
.ui-stage {position:relative;min-height:230px;background:var(--ds-surface);border:0;border-radius:var(--ds-radius-stage);box-shadow:var(--ds-stage-shadow);}
.ui-control {position:absolute;z-index:3;top:-2px;display:grid;place-items:center;width:var(--ds-hit-size);height:var(--ds-hit-size);padding:14px;border:0;border-radius:7px;color:#000;background:transparent;cursor:pointer;touch-action:manipulation;}
.ui-control[data-restart]{left:-2px;}.ui-control[data-play]{right:-2px;}
.ui-control svg{display:block;width:16px;height:16px;opacity:var(--ds-control-rest);pointer-events:none;}
.ui-control:hover:not(:disabled) svg{opacity:var(--ds-control-hover);}
.ui-control:active:not(:disabled){transform:scale(.95);}
.ui-control:disabled svg{opacity:var(--ds-control-disabled);}.ui-control:disabled{cursor:default;}
.ui-control:focus-visible{outline:2px solid var(--ds-focus);outline-offset:-5px;}
.ui-control:focus-visible svg{opacity:var(--ds-control-hover);}
.ui-caption{font:460 12px/20px var(--ds-font);letter-spacing:var(--ds-tracking);color:var(--ds-muted);text-align:center;margin:0;padding-top:12px;}
.ui-section-heading{position:relative;padding:64px 0 24px;margin:0;}
.ui-section-heading::after{content:'';display:block;height:1px;background:var(--ds-rule);}
.ui-section-heading>span{position:absolute;top:64px;transform:translateY(-55%);padding-right:8px;background:var(--ds-paper);font:600 14px/normal var(--ds-font);letter-spacing:-.13008px;}
.ui-copy{font:460 14px/20px var(--ds-font);letter-spacing:var(--ds-tracking);color:var(--ds-ink);}
@media(prefers-reduced-motion:reduce){.ui-control:active:not(:disabled){transform:none;}}