/* Self-hosted display face. cktechcheck.com serves every font from its own origin
   and no page on the site makes a third-party request, so the upstream Google Fonts
   @import was removed here rather than shipped. Oswald was already the designer's
   own second choice in the display stack and is already on this origin, so the
   condensed look survives without the outside call. Mono and body fall back to
   system faces. The video kit keeps the original @import and is untouched. */
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url('/wp-content/uploads/elementor/google-fonts/fonts/oswald-tk3iwkuhhaijg752gt8g.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   CK TECH CHECK — animation kit
   Rebrand here. Everything downstream reads these tokens.
   ========================================================================== */
:root{
  --ink:#0A0D16;
  --panel:#141A28;
  --panel2:#1B2334;
  --rule:#28334C;
  --txt:#EDF1F9;
  --dim:#7C8AA3;

  /* CK multimedia spectrum */
  --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;

  --disp:'Oswald', 'Barlow Condensed', Impact, sans-serif;
  --body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, Consolas, 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;
  transform-origin:center center;
  padding:74px 96px;
  font-variant-numeric:tabular-nums;
}
body.bg-light #stage{--txt:#0A0D16;--dim:#5A6880;--panel:#FFFFFF;--panel2:#EAEFF7;--rule:#C9D3E3}

/* ---------- structure ---------- */
.slug{
  position:absolute;top:34px;left:96px;right:96px;
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:15px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
}
.slug .mark{width:34px;height:8px;border-radius:2px;background:var(--spectrum)}
.slug .sec{margin-left:auto;opacity:.75}

/* the signature device: a calibrated measurement rail */
.rail{display:none}
.rail:before{
  content:'';position:absolute;left:0;right:0;top:7px;height:2px;
  background:linear-gradient(90deg,var(--rule),transparent);
}
.rail i{position:absolute;top:0;width:2px;height:16px;background:var(--rule)}
.rail i.maj{height:16px;background:var(--dim)}

h1.hl{
  font-family:var(--disp);font-weight:700;font-size:74px;line-height:.95;
  letter-spacing:-.005em;text-transform:uppercase;
}
h1.hl em{font-style:normal;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:25px;color:var(--dim);margin-top:12px;max-width:1180px;line-height:1.35}
.eyebrow{font-family:var(--mono);font-size:16px;letter-spacing:.22em;text-transform:uppercase;color:var(--s1);margin-bottom:14px}

.foot{
  position:absolute;left:96px;right:96px;bottom:46px;
  font-family:var(--mono);font-size:19px;color:var(--dim);letter-spacing:.02em;
  display:flex;gap:16px;align-items:baseline;
}
.foot b{color:var(--txt);font-weight:600}

.body{margin-top:30px}

/* ---------- 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.hi{border-color:var(--s1)}
.card.bad{border-color:var(--bad)}
.card.good{border-color:var(--good)}
.card h3{font-family:var(--disp);font-weight:600;font-size:40px;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.card .k{font-family:var(--mono);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}

/* ---------- bars ---------- */
.row{display:grid;grid-template-columns:300px 1fr 230px;align-items:center;gap:26px;margin-bottom:26px}
.row .lab{font-family:var(--disp);font-size:34px;text-transform:uppercase;font-weight:600;line-height:1.05}
.row .lab small{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;font-weight:400;margin-top:4px}
.track{height:44px;border-radius:5px;background:var(--panel2);position:relative;overflow:hidden}
.fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:5px;transition:width 1.15s cubic-bezier(.16,1,.3,1)}
.fill.spec{background:var(--spectrum)}
.fill.flat{background:var(--dim)}
.fill.bad{background:var(--bad)}
.fill.good{background:var(--good)}
.fill.warn{background:var(--warn)}
.val{font-family:var(--disp);font-size:44px;font-weight:700;text-align:right;line-height:1}
.val small{font-family:var(--mono);font-size:16px;color:var(--dim);letter-spacing:.1em;margin-left:8px;font-weight:400}

/* claimed vs measured semantics: hatched = manufacturer claim */
.hatch{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 8px,transparent 8px 17px);background-color:var(--panel2);border:1px dashed var(--dim)}

.tag{display:inline-block;font-family:var(--mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:4px;border:1px solid var(--rule);color:var(--dim)}
.tag.m{color:var(--s1);border-color:var(--s1)}
.tag.c{color:var(--dim)}
.tag.bad{color:var(--bad);border-color:var(--bad)}
.tag.good{color:var(--good);border-color:var(--good)}

.big{font-family:var(--disp);font-weight:700;font-size:150px;line-height:.86;letter-spacing:-.02em}
.big small{font-family:var(--mono);font-size:30px;letter-spacing:.06em;color:var(--dim);font-weight:400;margin-left:12px}

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

/* ---------- 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:.1em;text-transform:uppercase;
  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:#7C8AA3;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ui .hint{color:#4E5B72;padding-right:6px}

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

/* ============================================================
   WEB EMBED OVERRIDES (site copy only)
   These scenes double as video overlays, where the CK Tech Check
   slug, the section label and the operator controls are wanted.
   Embedded in a post they are noise, so this copy hides them.
   The originals in the video kit are untouched.
   ============================================================ */
.slug{display:none!important}
.eyebrow{display:none!important}
#ui{display:none!important}
#wrap{cursor:pointer}

/* Deterministic fit for embedding.
   Upstream centres the 1920x1080 stage with grid `place-items:center` and then
   scales it about `center center`. Those two have to agree, and if the centring
   has not resolved when the transform applies, the stage ends up offset right by
   (1920 - frameWidth) / 2 and the right edge is clipped. Pinning the stage to the
   top-left and scaling from 0 0 removes that dependency: scale(s) then maps the
   stage onto exactly 0..1920s by 0..1080s, which fills a 16:9 frame precisely. */
#wrap{display:block!important;overflow:hidden!important}
#stage{position:absolute!important;left:0!important;top:0!important;
  transform-origin:0 0!important}