/* site/assets/tokens.css — the design system's single source of truth.
   Every page loads these: the homepage through assets/landing.css (tokens +
   chrome + landing, concatenated by site/build.ts) and every other page
   through assets/site.css, where tailwind.css maps them onto @theme so
   utilities and components resolve to the same values. */
:root{
  --bg:#171226; --bg-2:#1c1630; --panel:#231b3b; --panel-2:#2b2148;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.19);
  --ink:#fcf6ff; --ink-2:#cbbde2; --muted:#8e80ac;
  /* the lavender ramp the plum ground resolves to as it lightens */
  --tint-1:#efe6ff; --tint-2:#bcaadd; --tint-3:#7a6c99;
  /* the three arcade hues, in the order a headline runs through them */
  --spectrum:linear-gradient(100deg,#ffd23f,#ff5f9e 52%,#3fd0e8);
  --spectrum-lit:linear-gradient(100deg,#ffe07a,#ff5f9e 46%,#6fe0f2);
  --accent:#ffd23f; --accent-2:#ff7fb4; --accent-3:#3fd0e8;
  /* chart marks: validated for the plum surface (lightness band, chroma, CVD, contrast) */
  --c1:#3fd0e8; --c2:#a98bff; --c3:#ffd23f; --c1-deep:#2597ac;
  --track:rgba(255,255,255,.12);
  /* the same hues as rgb triplets, so rgba() tints stay one edit away */
  --accent-rgb:255,210,63; --accent-2-rgb:255,127,180; --accent-3-rgb:63,208,232;
  --tint-1-rgb:239,230,255; --ink-2-rgb:203,189,226;
  --c1-rgb:63,208,232; --c3-rgb:255,210,63;
  --shade-rgb:14,9,26;
  /* surfaces the ground alone cannot name */
  --plate:#1e1733; --term:#150f26;
  --btn-a:#ffdc63; --btn-b:#ffc01f; --btn-ink:#2a1b10;
  --px:"VT323",ui-monospace,monospace;
  --sans:"IBM Plex Sans",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

/* site/assets/base.css — reset and page ground for the homepage only.
   Docs and playground pages get Tailwind's preflight plus the same ground in
   tailwind.css's base layer; loading this unlayered beside Tailwind would let
   its `*` reset outrank every @layer rule and flatten the prose. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  background-image:
    radial-gradient(ellipse 55% 34% at 50% -6%, rgba(var(--accent-rgb),.10), transparent),
    radial-gradient(ellipse 58% 40% at 50% -4%, rgba(var(--tint-1-rgb),.06), transparent),
    radial-gradient(ellipse 40% 30% at 90% 14%, rgba(var(--accent-rgb),.05), transparent)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
  background:repeating-linear-gradient(0deg, rgba(var(--shade-rgb),.10) 0 1px, transparent 1px 4px)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:radial-gradient(ellipse 94% 90% at 50% 50%, transparent 74%, rgba(var(--shade-rgb),.34) 100%)}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.hud{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.spectrum{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.spectrum.lit{background:var(--spectrum-lit);-webkit-background-clip:text;background-clip:text}
.lit{filter:drop-shadow(0 0 16px rgba(var(--accent-2-rgb),.34))}
.cursor{display:inline-block;width:.5em;height:.95em;background:var(--accent);vertical-align:-.1em;margin-left:.15em;
  box-shadow:0 0 8px rgba(var(--accent-rgb),.55);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}



/* site/assets/chrome.css — the shared shell: nav, resource menu, buttons and
   footer. Loaded by the homepage and, through tailwind.css, by every other
   page, so the chrome is one implementation rather than two. */

/* shared text helpers */
.hud{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.spectrum{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.spectrum.lit{background:var(--spectrum-lit);-webkit-background-clip:text;background-clip:text}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}

/* nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:rgba(var(--shade-rgb),.88);backdrop-filter:blur(9px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:3.6rem}
.mark{display:flex;align-items:center;gap:.55rem}
.mark .nm{font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:1.5rem;font-family:var(--sans);font-weight:500;font-size:.85rem;letter-spacing:.02em;color:var(--ink-2)}
.nav-links a:hover{color:var(--accent)}
.nav-links .ico{display:flex;align-items:center;color:var(--ink-2)}
.nav-links .ico svg{width:1.05rem;height:1.05rem;display:block}
.nav-links .ico:hover{color:var(--accent)}
.menu{position:relative}
.menu-btn{appearance:none;background:none;border:none;cursor:pointer;color:var(--ink-2);
  font:inherit;letter-spacing:.02em;display:flex;align-items:center;gap:.35rem;padding:0}
.menu-btn svg{transition:transform .15s}
.menu:hover .menu-btn,.menu:focus-within .menu-btn{color:var(--accent)}
.menu:hover .menu-btn svg,.menu:focus-within .menu-btn svg{transform:rotate(180deg)}
.menu-list{position:absolute;top:calc(100% + .75rem);left:50%;transform:translateX(-50%) translateY(-.35rem);
  min-width:9.5rem;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:rgba(var(--shade-rgb),.97);backdrop-filter:blur(9px);
  display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .14s,transform .14s,visibility .14s;
  box-shadow:0 18px 44px rgba(var(--shade-rgb),.55)}
.menu:hover .menu-list,.menu:focus-within .menu-list{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu-list::before{content:"";position:absolute;left:0;right:0;top:-.75rem;height:.75rem}
.menu-list a{padding:.6rem .9rem;border-bottom:1px solid var(--line)}
.menu-list a:last-child{border-bottom:none}
.menu-list a:hover{background:var(--panel);color:var(--accent)}


/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans);font-weight:600;font-size:.85rem;letter-spacing:.01em;
  padding:.72rem 1.35rem;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);cursor:pointer;
  background:transparent;transition:color .12s,border-color .12s,filter .12s}
.btn:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.55)}
/* --pri/--sec on the homepage, -primary/-ghost in the docs markup: one look */
.btn--pri,.btn-primary{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:var(--btn-ink);border-color:transparent;
  font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 10px 26px -12px rgba(var(--accent-rgb),.75)}
.btn--pri:hover,.btn-primary:hover{filter:brightness(1.06);color:var(--btn-ink)}
.btn--sec,.btn-ghost{background:transparent}


/* footer */
.foot{border-top:1px solid var(--line);padding:2.2rem 0 3rem;background:var(--bg-2)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center}
.foot .cols2{display:flex;gap:1.3rem;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
.foot .cols2 a:hover{color:var(--accent)}
/* The row carries two groups: this site, then the accounts. A muted dot marks
   the boundary, so the footer stays one line of links instead of growing
   headings. The dot is the first child of the group it opens, so wrapping can
   never leave one stranded at the end of a line. */
.foot .cols2 .fgrp{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:baseline}
.foot .cols2 .fdot{color:var(--muted);opacity:.6}


/* the interactive 3D stage: one implementation for the playground and the homepage */
.pocket-frame {
  width: 100%;
  max-width: 440px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--color-line-2);
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--color-surface-2) 90%, #fff 4%), var(--color-ink-2));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 60px -30px rgba(var(--shade-rgb), 0.7),
    0 0 0 1px rgba(56, 189, 248, 0.05);
}
.pocket-screen {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--bg);
  box-shadow: 0 0 0 6px var(--bg), 0 0 18px -8px rgba(56, 189, 248, 0.22) inset;
  aspect-ratio: 480 / 272;
}
.pocket-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-slate-500);
}
.pg-stage {
  width: 100%;
  margin: 0;
  outline: none;
}
.pg-stage__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  outline: none;
}
.pg-stage__canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: grab;
  touch-action: none;
}
.pg-stage__canvas:active { cursor: grabbing; }
.pg-stage__screen { display: none; }
.pg-stage__status {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 2rem);
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(85, 103, 133, 0.56);
  border-radius: 999px;
  color: var(--color-slate-300);
  background: rgba(6, 10, 18, 0.82);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pg-stage__status-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(var(--accent-2-rgb), 0.82);
  animation: pg-stage-pulse 1.1s ease-in-out infinite alternate;
}
.pg-stage__credit {
  padding: 0.35rem 0.35rem 0;
  color: var(--color-slate-600);
  font-size: 0.66rem;
  line-height: 1.4;
  text-align: right;
}

.pg-stage__viewport:focus-visible .pg-stage__canvas {
  border-radius: 0.8rem;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--color-brand-2) 78%, white);
}
.pg-stage.is-ready .pg-stage__status {
  opacity: 0;
  transform: translate(-50%, 5px);
  pointer-events: none;
}
.pg-stage.has-error .pg-stage__viewport { height: auto; }
.pg-stage.has-error .pg-stage__canvas { display: none; }
.pg-stage.has-error .pg-stage__screen {
  display: block;
  width: min(100%, 480px);
  height: auto;
  margin: 0 auto;
  border-radius: 0.65rem;
  background: #000;
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px var(--color-line-2), 0 24px 54px -34px #000;
}
.pg-stage.has-error .pg-stage__viewport:focus-visible .pg-stage__screen {
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--color-brand-2) 78%, white),
    0 24px 54px -34px #000;
}
.pg-stage.has-error .pg-stage__status {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.44);
}
.pg-stage.has-error .pg-stage__status-dot {
  background: #f87171;
  box-shadow: none;
  animation: none;
}
.pg-stage__credit a {
  color: var(--color-slate-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pg-stage__credit a:hover { color: var(--color-slate-200); }
@keyframes pg-stage-pulse {
  from { opacity: 0.35; transform: scale(0.78); }
  to { opacity: 1; transform: scale(1); }
}

/* pocketjs.dev homepage sections. Tokens and chrome live beside this file. */
/* hero: the demo wall runs full bleed behind everything, nav included */
.hero{position:relative;overflow:hidden;margin-top:-3.6rem;padding:calc(3.6rem + clamp(3rem,8vw,6rem)) 0 clamp(3rem,8vw,6rem);
  min-height:min(92vh,880px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:0}
/* the wall is texture, not content: darkened, softened, and scrimmed so type stays first */
.hero-bg video{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.62) blur(.8px)}
.hero-bg .scrim{position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(var(--shade-rgb),.96) 0%, rgba(var(--shade-rgb),.92) 42%, rgba(var(--shade-rgb),.72) 72%, rgba(var(--shade-rgb),.84) 100%),
    linear-gradient(180deg, rgba(var(--shade-rgb),.55) 0%, transparent 22%, transparent 70%, rgba(var(--shade-rgb),.92) 100%),
    radial-gradient(ellipse 86% 76% at 50% 50%, transparent 46%, rgba(var(--shade-rgb),.78) 100%)}
.hero-bg .scrim::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(var(--shade-rgb),.10) 0 1px, transparent 1px 3px)}
.hero-in{position:relative;z-index:1;width:100%}
.hero-in .col{max-width:min(44rem,58vw)}
.plate{position:relative;border-radius:20px;border:1px solid rgba(var(--accent-rgb),.28);background:
    radial-gradient(ellipse 70% 90% at 30% 40%, rgba(var(--accent-2-rgb),.14), transparent 70%), var(--plate);
  padding:clamp(1rem,2.5vw,1.7rem) clamp(1rem,2.5vw,1.6rem);overflow:hidden;
  box-shadow:inset 0 0 60px rgba(var(--accent-rgb),.09), inset 0 0 3px rgba(var(--accent-rgb),.22), 0 20px 60px rgba(var(--shade-rgb),.5)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(var(--shade-rgb),.10) 0 1px, transparent 1px 3px)}
.plate .rail{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--spectrum)}
.hero h1{font-family:var(--px);font-size:clamp(2.7rem,6.6vw,4.9rem);line-height:.92;text-transform:uppercase;letter-spacing:.005em}
.hero .sub{margin-top:1.5rem;color:var(--ink-2);max-width:52ch;font-size:1.05rem}
.hero .sub strong{color:var(--ink)}
.hero .ctas{margin-top:1.7rem;display:flex;gap:.8rem;flex-wrap:wrap}
/* terminal */
.term{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:var(--term);box-shadow:inset 0 0 40px rgba(var(--accent-rgb),.045)}
.term .bar{display:flex;align-items:center;gap:.45rem;border-bottom:1px solid var(--line);padding:.5rem .8rem;background:var(--panel)}
.term .bar i{width:.55rem;height:.55rem;border-radius:50%;background:var(--tint-3)}
.term .bar i.on{background:var(--accent);box-shadow:0 0 7px var(--accent)}
.term pre{padding:.9rem 1rem;font-family:var(--mono);font-size:.78rem;line-height:1.9;color:var(--ink-2);overflow-x:auto}
.term pre b{color:var(--accent);font-weight:500;text-shadow:0 0 10px rgba(var(--accent-rgb),.35)}
.term pre .dim{color:var(--muted)}

/* sections */
.sect{border-top:1px solid var(--line);padding:clamp(2.6rem,6.5vw,4.2rem) 0}
.shead{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:.9rem;flex-wrap:wrap}
.vwrap{position:relative;display:inline-block}
.vwrap .verb{font-family:var(--px);font-size:clamp(2.1rem,4.8vw,3.2rem);line-height:1;text-transform:uppercase}
.vwrap .vrail{position:absolute;left:0;right:0;bottom:-.3rem;height:2px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.85), rgba(var(--accent-rgb),.12) 70%, transparent)}
.shead .fill{flex:1;height:1px;background:repeating-linear-gradient(90deg,rgba(var(--accent-rgb),.22) 0 6px,transparent 6px 12px);align-self:center}
.slede{color:var(--muted);max-width:66ch;margin-bottom:1.7rem}
.slede b{color:var(--ink-2);font-weight:400}
.slede code{font-family:var(--mono);font-size:.9em;color:var(--ink-2)}
.cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.2rem);align-items:start}

/* orders of magnitude, on a linear scale drawn from zero: at full scale the
   handheld is a hairline next to the phone, so the left edge gets magnified.
   Bars grow once, when the panel scrolls into view (landing.js). */
.scale{border-radius:14px;border:1px solid var(--line);background:var(--panel);padding:1.2rem 1.3rem 1.3rem;margin-bottom:clamp(1.3rem,3vw,2.2rem)}
.sc-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.sc-head .lb{font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;color:var(--accent)}
.sc-grp{position:relative}
.sc-grp+.sc-grp{margin-top:1.5rem}
.sc-grp.zoomed{margin-top:.15rem}
.sc-cap{font-family:var(--mono);font-size:.62rem;letter-spacing:.03em;color:var(--muted);
  margin-bottom:.6rem}
.sc-bar{display:grid;grid-template-columns:12.5rem minmax(0,1fr) 4.6rem;gap:.8rem;align-items:center;padding:.2rem 0}
.sc-nm{font-family:var(--mono);font-size:.68rem;color:var(--ink-2);text-align:right}
.sc-tr{position:relative;height:.85rem;background:var(--track)}
.sc-fi{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:0 2px 2px 0}
.sc-fi.phone{background:var(--c2)}
.sc-fi.psp{background:var(--tint-2)}
.sc-fi.app{background:var(--c1);box-shadow:0 0 14px rgba(var(--c1-rgb),.55)}
/* the 32 MB sliver is real at this scale: a hairline marker keeps it findable */
.sc-hair{position:absolute;top:-.25rem;bottom:-.25rem;width:1px;background:var(--tint-1);opacity:0}
.sc-v{font-family:var(--mono);font-size:.72rem;color:var(--ink);text-align:right}
.sc-zoomrow{padding:0;align-items:stretch}
/* the beam opens downward from the hairline onto the whole bar below, so the
   shape reads as a magnification rather than another bar */
.sc-zoom{display:block;width:100%;height:1.4rem;clip-path:inset(0 0 100% 0);opacity:0}
.sc-zoom line{stroke:rgba(var(--accent-rgb),.55);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 2}
.scale.on .sc-zoom{animation:scbeam .7s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:1.2s}
@keyframes scbeam{from{clip-path:inset(0 0 100% 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
.scale.on .sc-fi{animation:scgrow .9s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s)}
.scale.on .sc-hair{animation:schair .5s ease-out forwards;animation-delay:1.1s}
@keyframes scgrow{from{width:0}to{width:var(--w)}}
@keyframes schair{to{opacity:.9}}
@media (prefers-reduced-motion: reduce){
  .sc-fi{width:var(--w)}
  .sc-hair{opacity:.9}
  .sc-zoom{clip-path:none;opacity:1}
  .scale.on .sc-fi,.scale.on .sc-hair,.scale.on .sc-zoom{animation:none}
}
@media (max-width:620px){
  .sc-bar{grid-template-columns:1fr;gap:.15rem;padding:.35rem 0}
  .sc-nm,.sc-v{text-align:left}
  .sc-zoomrow{display:block}
  .sc-zoom{margin:.2rem 0 .4rem}
}

/* charts */
.chartset{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.3rem,3vw,2.2rem)}
.card{border:1px solid var(--line);background:var(--panel);padding:1.1rem 1.2rem 1.2rem}
.card h3{font-size:.95rem;font-weight:600;letter-spacing:-.005em}
.card .sub{margin-top:.2rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chart{margin-top:1.1rem}
.chart+.chart{margin-top:1.4rem;padding-top:1.2rem;border-top:1px dashed var(--line)}
.ct{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.row{display:grid;grid-template-columns:5.4rem minmax(0,1fr) 4.6rem;gap:.6rem;align-items:center;padding:.16rem 0}
.row .nm{font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
.row .track{height:.7rem;background:var(--track);position:relative}
.row .fill{position:absolute;left:0;top:0;bottom:0;border-radius:0 3px 3px 0}
.row .val{font-family:var(--mono);font-size:.72rem;color:var(--ink);text-align:right}
.row.hl .nm{color:var(--ink);font-weight:600}
.f1{background:var(--c1)} .f2{background:var(--c2)} .f3{background:var(--c3)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.9rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:.4rem}
.legend i{width:.6rem;height:.6rem;flex-shrink:0}
/* budget bar */
.budget{position:relative;height:1.5rem;background:var(--track);display:flex;gap:2px;margin-top:1.35rem}
.budget .seg{height:100%;position:relative}
.budget .seg.js{background:var(--c1)}
.budget .seg.cpu{background:var(--c1-deep)}
.budget .mk{position:absolute;top:-.35rem;bottom:-.35rem;width:2px;background:var(--tint-1);box-shadow:0 0 8px rgba(var(--tint-1-rgb),.5)}
.budget .mk::after{content:attr(data-l);position:absolute;top:-1.15rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;white-space:nowrap;color:var(--tint-1)}
.bscale{display:flex;justify-content:space-between;margin-top:.35rem;font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.note{margin-top:1rem;color:var(--ink-2);font-size:.92rem;max-width:58ch}
.note strong{color:var(--ink)}
.note.sm{font-size:.85rem;color:var(--muted)}
.note.sm strong{color:var(--ink-2)}

/* two paths from a component to a pixel: the stages light up in order, at the
   same pace per stage, so the longer pipeline visibly takes longer to finish. */
.arch{border:1px solid var(--line);background:var(--panel);padding:1.1rem 1.2rem 1.2rem;position:relative}
.arch .lb{font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;color:var(--accent);margin-bottom:1rem}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start}
.vs-h{margin-bottom:.55rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.vs-t{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink)}
.vs-th{display:block;margin-top:.2rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.vs-pocket .vs-h{border-bottom-color:rgba(var(--accent-rgb),.45)}
.vs-pocket .vs-th{color:var(--accent-2)}
.lyr{list-style:none;position:relative}
.lyr li{display:flex;align-items:baseline;gap:.4rem;font-family:var(--mono);font-size:.62rem;line-height:1.25;
  color:var(--muted);border:1px solid var(--line);background:var(--bg);padding:.3rem .45rem;margin-bottom:.22rem}
.lyr li i{margin-left:auto;font-style:normal;font-size:.54rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tint-3);flex-shrink:0}
.vs-pocket .lyr li{color:var(--ink-2);border-color:rgba(var(--accent-rgb),.22)}
.lyr li.hop{border-style:dashed;border-color:rgba(var(--c3-rgb),.4);color:var(--c3);background:rgba(var(--c3-rgb),.05)}
.lyr li.hop::before{content:"⇄";margin-right:.15rem}
.done{margin-top:.45rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--muted);padding:.32rem .45rem;text-align:center}
/* one cycle, one step per stage: pocket settles early and waits */
.lyr li,.done{animation-duration:6s;animation-timing-function:linear;animation-iteration-count:infinite;
  animation-delay:calc(var(--i) * .3s)}
.vs-pocket .lyr li,.vs-pocket .done{animation-name:litp}
.vs-web .lyr li{animation-name:litw}
.vs-web .lyr li.hop{animation-name:lith}
.vs-web .done{animation-name:litw}
@keyframes litp{
  0%{border-color:rgba(var(--accent-rgb),.85);color:var(--accent);background:rgba(var(--accent-rgb),.10)}
  4%{border-color:rgba(var(--accent-rgb),.85);color:var(--accent);background:rgba(var(--accent-rgb),.10)}
  12%,100%{border-color:rgba(var(--accent-rgb),.22);color:var(--ink-2);background:var(--bg)}}
@keyframes litw{
  0%{border-color:rgba(var(--c3-rgb),.8);color:#e8b01f;background:rgba(var(--c3-rgb),.10)}
  4%{border-color:rgba(var(--c3-rgb),.8);color:#e8b01f;background:rgba(var(--c3-rgb),.10)}
  12%,100%{border-color:var(--line);color:var(--muted);background:var(--bg)}}
@keyframes lith{
  0%{border-color:rgba(var(--c3-rgb),.9);color:#ffd23f;background:rgba(var(--c3-rgb),.18)}
  4%{border-color:rgba(var(--c3-rgb),.9);color:#ffd23f;background:rgba(var(--c3-rgb),.18)}
  12%,100%{border-color:rgba(var(--c3-rgb),.4);color:var(--c3);background:rgba(var(--c3-rgb),.05)}}

/* Beyond 2D UI: one guest, a rotating set of native cores. A single 10.5s
   cycle drives the composition name, which cores are mounted, and the screen,
   so the three read as one machine being reassembled. */
.mods{border:1px solid var(--line);background:var(--panel);padding:1.1rem 1.2rem 1.2rem}
.mods-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.mods-head .lb{font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;color:var(--accent)}
.mods-now{position:relative;font-family:var(--px);font-size:1.3rem;line-height:1;min-width:9rem;text-align:right}
.mods-now i{position:absolute;right:0;top:0;font-style:normal;white-space:nowrap;opacity:0;
  background:var(--spectrum-lit);-webkit-background-clip:text;background-clip:text;color:transparent}
.mods-guest{border:1px solid rgba(var(--accent-rgb),.35);background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),transparent);
  padding:.6rem .8rem;text-align:center;animation:guestbeat 3.5s ease-in-out infinite}
.mods-guest b{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink)}
.mods-guest span{display:block;margin-top:.15rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
@keyframes guestbeat{0%,100%{box-shadow:0 0 0 rgba(var(--accent-rgb),0)}50%{box-shadow:0 0 22px rgba(var(--accent-rgb),.10) inset}}
/* the op vocabulary crossing between guest and cores */
.mods-bus{position:relative;height:1.5rem;margin:0 auto;width:1px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.5),rgba(var(--accent-rgb),.15));overflow:visible}
.mods-bus .spark{position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 9px rgba(var(--accent-rgb),.9);animation:busdrop 3.5s cubic-bezier(.4,0,.6,1) infinite}
@keyframes busdrop{0%{top:0;opacity:0}12%{opacity:1}70%{top:1.2rem;opacity:1}88%,100%{top:1.2rem;opacity:0}}
.mods-row{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.4rem}
.mods-row.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mod.wide{width:100%}
.mod{font-family:var(--mono);font-size:.62rem;line-height:1.3;border:1px solid var(--line);background:var(--bg);
  padding:.35rem .45rem;color:var(--muted);text-align:center}
.mod em{display:block;font-style:normal;font-size:.54rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tint-3);margin-top:.15rem}
.mod.always{border-color:rgba(var(--accent-rgb),.45);color:var(--ink-2)}
.mod.always em{color:var(--accent-2)}
/* mounted windows inside the shared cycle: 1 = 0-33%, 2 = 33-66%, 3 = 66-100% */
.mod.m1,.mod.m2,.mod.m3,.mod.m23{animation-duration:10.5s;animation-timing-function:linear;animation-iteration-count:infinite}
.mod.m1{animation-name:mount1} .mod.m2{animation-name:mount2}
.mod.m3{animation-name:mount3} .mod.m23{animation-name:mount23}
@keyframes mount1{0%,31%{border-color:rgba(var(--accent-rgb),.45);color:var(--ink-2);background:rgba(var(--accent-rgb),.06)}
  35%,100%{border-color:var(--line);color:var(--muted);background:var(--bg)}}
@keyframes mount2{0%,32%{border-color:var(--line);color:var(--muted);background:var(--bg)}
  36%,64%{border-color:rgba(var(--accent-rgb),.45);color:var(--ink-2);background:rgba(var(--accent-rgb),.06)}
  68%,100%{border-color:var(--line);color:var(--muted);background:var(--bg)}}
@keyframes mount3{0%,65%{border-color:var(--line);color:var(--muted);background:var(--bg)}
  69%,98%{border-color:rgba(var(--accent-rgb),.45);color:var(--ink-2);background:rgba(var(--accent-rgb),.06)}
  100%{border-color:var(--line);color:var(--muted);background:var(--bg)}}
@keyframes mount23{0%,32%{border-color:var(--line);color:var(--muted);background:var(--bg)}
  36%,98%{border-color:rgba(var(--accent-rgb),.45);color:var(--ink-2);background:rgba(var(--accent-rgb),.06)}
  100%{border-color:var(--line);color:var(--muted);background:var(--bg)}}
.mods .pnote{margin-top:.9rem;padding-top:.7rem;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.65}
.mods .pnote b{color:var(--ink-2);font-weight:500}
/* the screen crossfades with the composition */
.screens .scr{aspect-ratio:16/9;position:relative}
.screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
/* the name and the screen switch on a hard cut: a crossfade would overlap two
   names into garbled text and two screenshots into a double exposure */
.ph1,.ph2,.ph3{animation-duration:10.5s;animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.ph1{animation-name:phase1} .ph2{animation-name:phase2} .ph3{animation-name:phase3}
@keyframes phase1{0%{opacity:1}33.34%{opacity:0}100%{opacity:0}}
@keyframes phase2{0%{opacity:0}33.34%{opacity:1}66.67%{opacity:0}100%{opacity:0}}
@keyframes phase3{0%{opacity:0}66.67%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .mods-guest,.mods-bus .spark,.mod,.ph1,.ph2,.ph3{animation:none}
  .mods-now i.ph1{opacity:1}
  .screens img.ph3{opacity:1}
  .mod.m1,.mod.m2,.mod.m3,.mod.m23{border-color:rgba(var(--accent-rgb),.3);color:var(--ink-2)}
}

/* frame + effect animation */
.tl{border:1px solid var(--line);background:var(--panel);padding:1.1rem 1.2rem 1.2rem;overflow:hidden}
.tl .lb{font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;color:var(--accent);margin-bottom:1.1rem}
.lane{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:.7rem;align-items:center;margin-bottom:.5rem}
.lane .ln{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}
.cells{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;position:relative}
.cells .c{height:1.35rem;border:1px solid var(--line);background:var(--bg);
  font-family:var(--mono);font-size:.58rem;color:var(--muted);display:flex;align-items:center;justify-content:center}
.cells .c.tick{animation:tickon 4.8s steps(1) infinite}
.cells .c:nth-child(1).tick{animation-delay:0s} .cells .c:nth-child(2).tick{animation-delay:.6s}
.cells .c:nth-child(3).tick{animation-delay:1.2s} .cells .c:nth-child(4).tick{animation-delay:1.8s}
.cells .c:nth-child(5).tick{animation-delay:2.4s} .cells .c:nth-child(6).tick{animation-delay:3s}
.cells .c:nth-child(7).tick{animation-delay:3.6s} .cells .c:nth-child(8).tick{animation-delay:4.2s}
@keyframes tickon{0%{background:rgba(var(--accent-rgb),.16);border-color:rgba(var(--accent-rgb),.7);color:var(--accent)}
  12.5%,100%{background:var(--bg);border-color:var(--line);color:var(--muted)}}
.cells .ph{position:absolute;top:-.2rem;bottom:-.2rem;width:calc(12.5% - 2px);border:1px solid rgba(var(--accent-rgb),.55);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.22) inset;animation:sweep 4.8s steps(8) infinite;pointer-events:none}
@keyframes sweep{from{transform:translateX(0)} to{transform:translateX(800%)}}
/* the arrive chip sits in the fourth cell of the same eight-column grid the
   tape uses, so it points at frame +3 in every engine instead of at a
   hand-tuned percentage (Safari resolved that differently) */
.wallclock{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;height:1.6rem;margin-bottom:.1rem}
.wallclock .arrive{grid-column:4;grid-row:1;position:relative;justify-self:start;align-self:start;
  font-family:var(--mono);font-size:.6rem;color:var(--c3);white-space:nowrap;
  animation:arrive 4.8s linear infinite;opacity:0;
  background:rgba(var(--shade-rgb),.95);border:1px solid rgba(var(--c3-rgb),.55);padding:.14rem .35rem}
.wallclock .arrive::after{content:"";position:absolute;left:.1rem;top:1.4rem;width:1px;height:.5rem;background:var(--c3)}
@keyframes arrive{0%,38%{opacity:0} 41%,49%{opacity:1} 52%,100%{opacity:0}}
.deliver{position:absolute;left:calc(50% - 1px);top:-.1rem;bottom:-.1rem;width:2px;background:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.8);animation:deliver 4.8s linear infinite;opacity:0}
.deliver::after{content:"delivered at the boundary";position:absolute;left:.35rem;top:-1.55rem;
  font-family:var(--mono);font-size:.6rem;color:var(--accent);white-space:nowrap;
  background:rgba(var(--shade-rgb),.95);border:1px solid rgba(var(--accent-rgb),.45);padding:.14rem .35rem}
@keyframes deliver{0%,49%{opacity:0} 51%,66%{opacity:1} 70%,100%{opacity:0}}
.tl .pnote{margin-top:1rem;padding-top:.7rem;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.7}
.tl .pnote b{color:var(--ink-2);font-weight:500}
@media (prefers-reduced-motion: reduce){
  .stack .pulse,.fanout i,.cells .c.tick,.cells .ph,.wallclock .arrive,.deliver,.cursor{animation:none}
  .wallclock .arrive,.deliver{opacity:1}
}

/* the frame contract, set like a paper */
.eqbox{margin-top:1rem;border:1px solid var(--line);background:var(--panel);padding:1.5rem 1.2rem 1.1rem;text-align:center}
.eq{font-family:"STIX Two Text",Georgia,serif;font-size:1.35rem;color:var(--ink);line-height:1.9;letter-spacing:.01em}
.eq em{font-style:italic;font-weight:600}
.eq sub{font-size:.62em;vertical-align:-.25em;padding-left:.02em}
.eq .v{font-style:normal}
.eqbox figcaption{margin-top:.9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}

/* delivery-frame histograms, redrawn from the published run */
.hist{width:100%;height:auto;margin:.9rem 0 .2rem}

/* delivery-frame distribution */
.dl{display:grid;grid-template-columns:7.4rem minmax(0,1fr) 4.6rem;gap:.6rem;align-items:center;margin-top:1.5rem}
.dln{font-family:var(--mono);font-size:.7rem;color:var(--ink-2);text-align:right}
.dtrack{height:1.35rem;background:var(--track);position:relative}
.spike{position:absolute;top:0;bottom:0;left:16.7%;width:3px;background:var(--c1);box-shadow:0 0 12px rgba(var(--c1-rgb),.9)}
.spike::after{content:attr(data-l);position:absolute;left:50%;transform:translateX(-50%);top:-1.05rem;
  font-family:var(--mono);font-size:.6rem;color:var(--accent)}
.band{position:absolute;inset:0;opacity:.85;
  background:repeating-linear-gradient(90deg, var(--c3) 0 2px, transparent 2px 7px)}
.dv{font-family:var(--mono);font-size:.7rem;color:var(--ink);text-align:right}
.dscale{display:flex;justify-content:space-between;margin:.35rem 0 0 8rem;
  font-family:var(--mono);font-size:.6rem;color:var(--muted)}

/* the organization band */
.labband{margin-top:1.6rem;border:1px solid rgba(var(--accent-rgb),.24);
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.07), transparent 65%);
  padding:1.2rem 1.3rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;align-items:center}
.labband .lb{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.03em;
  color:var(--accent);margin-bottom:.5rem}
.labband p{font-size:.96rem;color:var(--ink-2);max-width:62ch}
.labband p strong{color:var(--ink)}
.labctas{display:flex;gap:.7rem;flex-wrap:wrap}

  text-shadow:0 0 12px rgba(var(--accent-rgb),.3);overflow-x:auto}
.thm p{font-size:.88rem;color:var(--ink-2)}
.thm p strong{color:var(--ink)}
.thm .lb{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.03em;color:var(--accent);margin-bottom:.45rem}

/* CRT frames */
.frame{border:1px solid rgba(var(--accent-rgb),.20);background:#000;padding:.45rem;box-shadow:0 0 22px rgba(var(--accent-rgb),.06)}
.frame .scr{position:relative;overflow:hidden;background:#000}
.frame .scr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(var(--shade-rgb),.06) 0 1px, transparent 1px 3px),
             radial-gradient(ellipse 92% 88% at 50% 50%, transparent 64%, rgba(var(--shade-rgb),.26) 100%);
  box-shadow:inset 0 0 34px rgba(var(--accent-rgb),.12), inset 0 0 4px rgba(var(--accent-rgb),.22)}
.frame img{width:100%}
.frame .cap{font-family:var(--mono);font-size:.68rem;color:var(--muted);padding:.55rem .2rem .1rem;line-height:1.55;
  display:flex;gap:.5rem;align-items:baseline}
.frame .cap::before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);flex-shrink:0;transform:translateY(-.15rem)}
.frame .cap b{color:var(--tint-1);font-weight:400}

.receipts{margin-top:1.4rem;display:flex;gap:1.2rem;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem}
.receipts span{color:var(--muted);text-transform:uppercase;letter-spacing:.14em}
.receipts a{color:var(--accent-3)} .receipts a:hover{color:var(--accent)}

/* code tabs */
.code{border:1px solid var(--line-2);background:var(--term)}
.subtabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel)}
.subtab{appearance:none;background:none;border:none;border-right:1px solid var(--line);cursor:pointer;
  font-family:var(--mono);font-size:.72rem;padding:.65rem 1rem;color:var(--muted);letter-spacing:.04em}
.subtab:hover{color:var(--ink-2)}
.subtab.on{color:var(--accent);background:var(--bg);box-shadow:inset 0 -2px 0 var(--accent)}
.code pre{display:none;padding:1rem 1.1rem;overflow-x:auto;font-family:var(--mono);font-size:.72rem;line-height:1.62;color:var(--ink-2)}
.code pre.on{display:block}
.kw{color:var(--accent-3)} .str{color:var(--accent-2)} .cmp{color:var(--c2)}

/* ecosystem */
.eco{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.ecard{border:1px solid var(--line-2);background:var(--panel);display:flex;flex-direction:column}
.ecard .scr{position:relative;overflow:hidden;background:#000;aspect-ratio:16/10}
.ecard .scr img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ecard .scr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(var(--shade-rgb),.06) 0 1px, transparent 1px 3px),
             radial-gradient(ellipse 92% 88% at 50% 50%, transparent 64%, rgba(var(--shade-rgb),.26) 100%);
  box-shadow:inset 0 0 30px rgba(var(--accent-rgb),.10)}
.ecard .bd{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.ecard h4{font-size:1rem;font-weight:700}
.ecard h4 span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:.4rem;font-weight:400}
.ecard p{font-size:.82rem;color:var(--muted);line-height:1.5;flex:1}
.ecard p b{color:var(--accent);font-weight:500}
.ecard .story{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-3)}
.ecard .story:hover{color:var(--accent)}

/* sponsor gallery: avatars only, generated from site/sponsors.json */
.spon-gallery{display:flex;flex-wrap:wrap;gap:.8rem}
.spon-gallery a{display:block;width:3.4rem;height:3.4rem;border-radius:50%;overflow:hidden;
  border:1px solid var(--line-2);background:var(--panel);filter:grayscale(.35);
  transition:filter .18s,border-color .18s,transform .18s}
.spon-gallery a:hover{filter:none;border-color:rgba(var(--accent-rgb),.65);transform:translateY(-2px)}
.spon-gallery img{width:100%;height:100%;object-fit:cover}

@media (max-width:1000px){
  /* the hero is a flex row on wide screens; stack it here so the note flows below */
  .hero{min-height:auto;display:block}
  .hero-in .col{max-width:100%}
  .hero-bg .scrim{background:
    linear-gradient(180deg, rgba(var(--shade-rgb),.93) 0%, rgba(var(--shade-rgb),.96) 50%, rgba(var(--shade-rgb),.92) 100%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 46%, rgba(var(--shade-rgb),.75) 100%)}
  .hero-note{position:static;margin:1.6rem clamp(1.25rem,4vw,2.5rem) 0;text-align:left}
  .cols,.chartset,.vs,.labband{grid-template-columns:1fr}
  .eco{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  /* the mid-frame arrival chip must not widen the page on a phone */
  .wallclock .arrive{font-size:.52rem;padding:.1rem .28rem}
  .lane{grid-template-columns:4.4rem minmax(0,1fr)}
  .dl{grid-template-columns:5.4rem minmax(0,1fr) 3.9rem}
  .dscale{margin-left:5.4rem}
  /* keep every nav item, icons included: tighten the type instead of hiding links */
  .nav-links{gap:.75rem;font-size:.62rem;letter-spacing:.06em}
  .nav-links .ico svg{width:.95rem;height:.95rem}
  .mark .nm{font-size:.95rem}
.eco{grid-template-columns:1fr}.row{grid-template-columns:4.4rem minmax(0,1fr) 4rem}}



/* readout tiles: a machine-reported number and what it means */
.reads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.read{border:1px solid var(--line);padding:.85rem 1rem .95rem;position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.05), transparent), var(--panel)}
.read::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(var(--shade-rgb),.05) 0 1px, transparent 1px 3px)}
.read b{display:block;font-family:var(--px);font-size:2.1rem;line-height:1;color:var(--accent);
  text-shadow:0 0 18px rgba(var(--accent-rgb),.55)}
.read b.st{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.read span{position:relative;display:block;margin-top:.35rem;font-size:.74rem;line-height:1.45;color:var(--muted)}

/* framework names in prose: plain text with a hairline, nothing louder. Named
   .olink, not .pl: short layout class names collide with prose classes, and a
   link rule that leaks onto a panel underlines the whole panel. */
.olink{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:rgba(var(--ink-2-rgb),.4)}
.olink:hover{color:var(--accent);text-decoration-color:rgba(var(--accent-rgb),.6)}

/* motion: six recorded clips, engine output, looping */
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.mcell{border:1px solid rgba(var(--accent-rgb),.20);background:#000;padding:.4rem}
.mcell .scr{position:relative;overflow:hidden;background:#000;aspect-ratio:154/121}
.mcell .scr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(var(--shade-rgb),.06) 0 1px, transparent 1px 3px);
  box-shadow:inset 0 0 26px rgba(var(--accent-rgb),.10)}
.mcell img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.mcell figcaption{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:.4rem .1rem 0}

/* compatibility: what it runs on, split by operating system and by device */
.cpanel{border:1px solid var(--line);background:var(--panel);padding:1.1rem 1.2rem 1.2rem}
.cpanel .lb{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.9rem}
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.cchip{position:relative;display:block;font-family:var(--mono);font-size:.64rem;line-height:1.25;
  border:1px solid var(--line);background:var(--bg);padding:.4rem 1.3rem .4rem .5rem;color:var(--ink-2);
  text-decoration:none;transition:color .12s,border-color .12s,background .12s}
/* each entry carries its receipt, so the chip needs to read as a link */
.cchip::after{content:"↗";position:absolute;right:.45rem;top:.32rem;font-size:.6rem;line-height:1;
  color:var(--muted);opacity:.5;transition:color .12s,opacity .12s}
.cchip:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.05)}
.cchip:hover em{color:rgba(var(--accent-rgb),.7)}
.cchip:hover::after{color:var(--accent);opacity:1}
.cchip em{display:block;font-style:normal;font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:.15rem}
@media (max-width:620px){
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cgrid{grid-template-columns:1fr}
}

/* motion: the handheld floats on the page, no frame and no plate behind it */
.motion-stage{margin:0;border:0;background:transparent;padding:0}
.motion-stage .pg-stage__viewport{background:transparent;border:0}
.motion-stage .pg-stage__status{justify-content:center}
/* The status pill fades out once the runtime is live, so the control hint is its
   own line under the model. It appears with the model and never in the 2D
   fallback, where there are no buttons to press. */
.stage-hint{margin:.55rem 0 0;font-family:var(--mono);font-size:.66rem;line-height:1.4;
  color:var(--muted);text-align:center;opacity:0;transition:opacity .3s ease}
.pg-stage.is-ready .stage-hint{opacity:1}
.pg-stage.has-error .stage-hint{display:none}
.spon-cta{margin-top:1.4rem;display:inline-flex;gap:.5rem;align-items:center}