/* The house faces, served from assets/fonts/ (latin subset, from Google Fonts, SIL OFL 1.1;
   see assets/fonts/README.md), so a take never depends on the network or on Google.
   font-display:block: a scene never paints its first frames in a fallback face. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:block;src:url('fonts/barlow-condensed-500-latin.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:block;src:url('fonts/barlow-condensed-600-latin.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:block;src:url('fonts/barlow-condensed-700-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:block;src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:block;src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:block;src:url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:block;src:url('fonts/ibm-plex-sans-var-latin.woff2') format('woff2')}

/* ==========================================================================
   CK TECH CHECK, animation kit
   Rebrand here. Everything downstream reads these tokens.

   Video rules (2026-09-28 review pass):
   - One plain headline per scene. No eyebrow, no gradient text, no footnote.
   - Text a viewer must read is 40 px or larger; labels 26 px or larger;
     axis ticks 24 px. A 1920 px frame is about 390 px wide on a phone.
   - Nothing below y = 966: YouTube's paused controls cover the bottom band.
   - Hatched fill means a manufacturer claim, solid fill a measurement,
     dashed lines are thresholds or illustrations, never data.
   ========================================================================== */
:root{
  --ink:#0A0D16;
  --panel:#141A28;
  --panel2:#1B2334;
  --rule:#28334C;
  --txt:#EDF1F9;
  --dim:#8C99B0;

  /* CK multimedia spectrum. Front camera is --s1, rear camera is --s5. */
  --s1:#26D9E8;
  --s2:#3F7BF6;
  --s3:#8B5CF6;
  --s4:#F0468C;
  --s5:#FFA92B;
  --spectrum:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5));

  --good:#2BD98E;
  --bad:#FF4D4D;
  --warn:#FFA92B;

  /* Bahnschrift is a Windows system face with a condensed width: if the web font
     ever fails to load, headlines stay condensed instead of widening into Impact. */
  --disp:'Barlow Condensed', 'Bahnschrift', 'Oswald', sans-serif;
  --body:'IBM Plex Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'IBM Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink)}
body{font-family:var(--body);color:var(--txt);-webkit-font-smoothing:antialiased}

body.bg-light{background:#F2F5FA}
body.bg-green{background:#00B140}
body.bg-magenta{background:#FF00FF}
body.bg-clear{background:#000}

#wrap{position:fixed;inset:0;display:grid;place-items:center}
#stage{
  width:1920px;height:1080px;position:relative;flex:none;overflow:hidden;
  transform-origin:center center;
  padding:74px 96px 114px;
  font-variant-numeric:tabular-nums;
  font-stretch:condensed;
}
body.bg-light #stage{--txt:#0A0D16;--dim:#5A6880;--panel:#FFFFFF;--panel2:#EAEFF7;--rule:#C9D3E3}

/* ---------- structure ---------- */
.body{height:100%;display:flex;flex-direction:column}
/* the scene's content sits centred in the space under the headline */
/* "safe" keeps a too-tall scene from centring up into its own headline */
.main{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe center;padding-top:24px}

h1.hl{
  font-family:var(--disp);font-weight:700;font-size:72px;line-height:.98;
  letter-spacing:0;text-transform:uppercase;max-width:1728px;text-wrap:balance;
}
h1.hl em{font-style:normal;color:inherit}
.sub{font-size:30px;color:var(--dim);margin-top:14px;max-width:1400px;line-height:1.3;text-wrap:balance}

/* one short caption per scene, at most twelve words */
.cap{font-size:34px;line-height:1.3;color:var(--txt);text-wrap:balance}
.cap .dim{color:var(--dim)}

/* ---------- reveal ---------- */
.r{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s cubic-bezier(.2,.85,.25,1)}
.r.in{opacity:1;transform:none}
.rs{opacity:0;transform:scale(.94);transition:opacity .5s ease, transform .5s cubic-bezier(.2,.85,.25,1)}
.rs.in{opacity:1;transform:none}

/* ---------- panels ---------- */
.card{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:30px 32px;position:relative;overflow:hidden}
.card h3{font-family:var(--disp);font-weight:600;font-size:44px;text-transform:uppercase;line-height:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}

/* a label: small caps in the body face, never tracked mono */
.k{font-family:var(--body);font-weight:600;font-size:26px;letter-spacing:.03em;text-transform:uppercase;color:var(--dim);line-height:1.2}

/* ---------- bars ---------- */
.track{height:56px;border-radius:6px;background:var(--panel2);position:relative;overflow:hidden}
.fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;transition:width 1.15s cubic-bezier(.16,1,.3,1)}
.fill.front{background:var(--s1)}
.fill.rear{background:var(--s5)}
.fill.flat{background:var(--dim)}
.fill.bad{background:var(--bad)}
.fill.good{background:var(--good)}

/* claimed vs measured: a hatched fill is a manufacturer claim */
.hatch{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.34) 0 7px,transparent 7px 16px);background-color:#3A4560}

.big{font-family:var(--disp);font-weight:700;font-size:150px;line-height:.86;letter-spacing:-.01em}
.big small{font-family:var(--body);font-size:40px;color:var(--dim);font-weight:500;margin-left:12px;letter-spacing:0}

/* ---------- shared scene parts ---------- */
.ttl{font-family:var(--disp);font-weight:600;font-size:46px;line-height:1;text-transform:uppercase}
.num{font-family:var(--disp);font-weight:700;font-size:96px;line-height:.9;font-variant-numeric:normal}
.num small{font-family:var(--body);font-weight:500;font-size:34px;color:var(--dim);margin-left:10px}
.note{font-size:28px;line-height:1.3;color:var(--dim)}
.frame{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--rule);background:#000}
.frame>img{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.claim{display:inline-block;font-size:24px;font-weight:600;padding:6px 14px;border-radius:6px;border:2px dashed var(--dim);color:var(--txt);background:rgba(10,13,22,.8)}
.ax{font-family:var(--mono);font-size:24px;fill:var(--dim)}
.axl{font-family:var(--body);font-size:26px;font-weight:600;fill:var(--dim);letter-spacing:.02em}

svg{display:block;overflow:visible}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
.bad-t{color:var(--bad)}
.good-t{color:var(--good)}
.s1{color:var(--s1)}
.s5{color:var(--s5)}

/* ---------- operator UI (never recorded) ---------- */
#ui{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;gap:8px;align-items:center;z-index:99;
  background:rgba(10,13,22,.88);border:1px solid #28334C;border-radius:999px;
  padding:8px 10px;backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  transition:opacity .35s ease;color:#EDF1F9;
}
#ui.hide{opacity:0;pointer-events:none}
#ui button,#ui a{
  font:inherit;color:#EDF1F9;background:#1B2334;border:1px solid #28334C;
  border-radius:999px;padding:8px 14px;cursor:pointer;text-decoration:none;
}
#ui button:hover,#ui a:hover{border-color:#26D9E8;color:#26D9E8}
#ui button:focus-visible,#ui a:focus-visible{outline:2px solid #26D9E8;outline-offset:2px}
#ui .nm{padding:0 10px;color:#8C99B0;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ui .hint{color:#56647C;padding-right:6px}

@media (prefers-reduced-motion: reduce){
  .r,.rs,.fill{transition-duration:1ms !important}
}

/* ============================================================
   WEB EMBED OVERRIDES (site copy only, added by tools/port-animation-kit.py)
   The kit records these scenes for video, with an operator bar and background keys.
   Embedded in a post the bar is hidden, the stage is pinned to the top-left and
   scaled from 0 0 so it fills a 16:9 frame exactly whatever the centring has done,
   and the background stays the kit's dark ink. The kit's own files are untouched.
   ============================================================ */
#ui{display:none!important}
#wrap{display:block!important;overflow:hidden!important;cursor:pointer}
#stage{position:absolute!important;left:0!important;top:0!important;transform-origin:0 0!important}
body.bg-light,body.bg-green,body.bg-magenta,body.bg-clear{background:var(--ink)!important}