/* =========================================================================
   kordas.tech - Canton Fair edition. Single stylesheet, zero external requests.
   AXIOM (dark-first, cyan + ice, Inter Tight + JetBrains Mono, zero radius).

   Order: 1 tokens (verbatim) - 2 oklch shim - 3 fonts - 4 page styles.
   Tokens: ~/.claude/skills/kordas-axiom/starters/colors_and_type.css (v2.0)
           sha256 eadab3a2ca376ece7eb44ba32572a924a7a19526540bf199345f51b85ed82e97
           Only the :root block is vendored. The remote font import line of the
           source file is intentionally NOT carried over (no CDN, China-safe).
           tools/build.py re-checks this block against the source on every build.
   ========================================================================= */

/* @tokens-begin - verbatim copy, do not edit by hand */
:root {
  /* ---------------------------------------------------------------------
     AXIOM CORE — palette anchors (oklch + companion hex for older clients)
     --------------------------------------------------------------------- */

  /* Background ramp — dark-first */
  --kt-bg:          #060a10;             /* page (was #f8fafc) */
  --kt-bg-elev:     #0c1220;             /* card / panel (was #ffffff) */
  --kt-bg-tint:     #101828;             /* alt-row, callout (was #f1f5f9) */
  --kt-bg-dark:     #060a10;
  --kt-bg-dark-2:   #0c1220;

  --kt-navy:        #060a10;             /* legacy alias */
  --kt-navy-900:    #060a10;
  --kt-navy-800:    #0c1220;

  /* Accent (cyan) — primary interactive, replaces v1 --kt-blue */
  --kt-blue:        oklch(70% 0.22 220); /* cyan-500 */
  --kt-blue-deep:   oklch(60% 0.20 220); /* cyan hover */
  --kt-blue-light:  oklch(88% 0.08 220); /* ice — secondary accent */
  --kt-blue-pale:   oklch(35% 0.12 220);
  --kt-blue-faint:  oklch(18% 0.08 220);

  /* AXIOM-explicit aliases (use these in new code) */
  --kt-cyan:        oklch(70% 0.22 220);
  --kt-cyan-dim:    oklch(35% 0.12 220);
  --kt-cyan-bg:     oklch(18% 0.08 220);
  --kt-ice:         oklch(88% 0.08 220);

  /* Slate (inverted from v1 — now reads on dark) */
  --kt-slate-900:   #e0ecff;
  --kt-slate-700:   #c0d0e8;
  --kt-slate-600:   #6080a0;             /* sub */
  --kt-slate-500:   #304060;             /* muted */
  --kt-slate-400:   #1a2540;
  --kt-slate-300:   #1a2540;
  --kt-slate-200:   #101828;
  --kt-slate-100:   #0c1220;
  --kt-slate-50:    #060a10;

  /* Semantic — AXIOM oklch */
  --kt-success:     oklch(68% 0.18 145);
  --kt-success-bg:  oklch(20% 0.09 145);
  --kt-warning:     oklch(72% 0.17 75);
  --kt-warning-bg:  oklch(20% 0.08 75);
  --kt-danger:      oklch(62% 0.20 25);
  --kt-danger-bg:   oklch(20% 0.10 25);
  --kt-info:        var(--kt-cyan);
  --kt-info-bg:     var(--kt-cyan-bg);

  /* Foreground (semantic) */
  --kt-fg-1:        #e0ecff;             /* primary text */
  --kt-fg-2:        #6080a0;             /* sub */
  --kt-fg-3:        #304060;             /* muted */
  --kt-fg-4:        #1a2540;             /* dimmed */
  --kt-fg-on-dark:  #e0ecff;
  --kt-fg-on-blue:  #060a10;             /* text on cyan CTA — high contrast */

  /* Borders */
  --kt-border:      #1a2540;
  --kt-border-strong: #304060;
  --kt-border-dark: #1a2540;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — Inter Tight + JetBrains Mono (AXIOM)
     --------------------------------------------------------------------- */
  --kt-font-sans:    'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --kt-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace;
  --kt-font-display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --kt-w-light:     300;
  --kt-w-regular:   400;
  --kt-w-medium:    500;
  --kt-w-semibold:  600;
  --kt-w-bold:      700;

  /* AXIOM type scale */
  --kt-fs-display-xl: clamp(48px, 5vw, 72px);
  --kt-fs-display:    44px;
  --kt-fs-h1:         36px;
  --kt-fs-h2:         24px;
  --kt-fs-h3:         18px;
  --kt-fs-h4:         15px;
  --kt-fs-body-lg:    15px;
  --kt-fs-body:       13px;
  --kt-fs-body-sm:    12px;
  --kt-fs-caption:    11px;
  --kt-fs-micro:      9px;                /* mono uppercase eyebrow */

  --kt-lh-tight:      0.95;
  --kt-lh-snug:       1.2;
  --kt-lh-body:       1.6;
  --kt-lh-loose:      1.75;

  --kt-tracking-tag:    0.10em;
  --kt-tracking-caps:   0.06em;
  --kt-tracking-normal: 0;
  --kt-tracking-tight:  -0.04em;
  --kt-tracking-h1:     -0.03em;
  --kt-tracking-h2:     -0.02em;

  /* ---------------------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------------------- */
  --kt-s-0:  0;
  --kt-s-1:  4px;
  --kt-s-2:  8px;
  --kt-s-3:  12px;
  --kt-s-4:  16px;
  --kt-s-5:  20px;
  --kt-s-6:  24px;
  --kt-s-8:  32px;
  --kt-s-10: 40px;
  --kt-s-12: 48px;
  --kt-s-16: 64px;
  --kt-s-20: 80px;
  --kt-s-24: 96px;

  /* ---------------------------------------------------------------------
     RADIUS — AXIOM is ZERO on every UI element.
     Pill (999px) is reserved EXCLUSIVELY for the logomark bars.
     --------------------------------------------------------------------- */
  --kt-r-xs: 0;
  --kt-r-sm: 0;
  --kt-r-md: 0;
  --kt-r-lg: 0;
  --kt-r-xl: 0;
  --kt-r-pill: 999px;

  /* ---------------------------------------------------------------------
     SHADOWS — AXIOM solid-black drop (not navy-tinted)
     --------------------------------------------------------------------- */
  --kt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --kt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --kt-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
  --kt-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);
  --kt-shadow-xl: 0 16px 56px rgba(0, 0, 0, 0.60);
  --kt-shadow-blue: 0 0 0 1px var(--kt-cyan), 0 4px 20px rgba(0, 200, 255, 0.14);
  --kt-shadow-focus: 0 0 0 1px var(--kt-cyan), 0 4px 20px rgba(0, 200, 255, 0.14);

  --kt-divider: 1px solid var(--kt-border);
  --kt-divider-strong: 1px solid var(--kt-border-strong);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --kt-ease:        cubic-bezier(0.2, 0.7, 0.3, 1);
  --kt-ease-out:    cubic-bezier(0, 0, 0.3, 1);
  --kt-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --kt-dur-fast:   120ms;
  --kt-dur-base:   200ms;
  --kt-dur-slow:   600ms;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --kt-container:    1200px;
  --kt-container-lg: 1320px;
  --kt-container-sm: 720px;
}
/* @tokens-end */

/* -------------------------------------------------------------------------
   2. oklch shim. Engines without oklch() (older Android WebViews, incl. some
   WeChat builds) would drop every var(--kt-cyan) declaration, which turns the
   cyan CTA transparent with dark text on a dark ground. This block is skipped
   wherever oklch() parses, so the verbatim tokens above stay in charge there.
   cyan + ice: hex documented by the brand (axiom-law.md, tokens.md).
   cyan-dim / cyan-bg / blue-deep: no documented hex, computed from the oklch
   values (OKLab -> sRGB, chroma reduction when out of gamut). Declared deviation.
   ------------------------------------------------------------------------- */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --kt-cyan: #00b8e6;
    --kt-blue: #00b8e6;
    --kt-ice: #c2dceb;
    --kt-blue-light: #c2dceb;
    --kt-cyan-dim: #004359;
    --kt-blue-pale: #004359;
    --kt-cyan-bg: #001622;
    --kt-blue-faint: #001622;
    --kt-blue-deep: #0091b5;
    --kt-info: #00b8e6;
    --kt-info-bg: #001622;
  }
}

/* -------------------------------------------------------------------------
   3. Self-hosted fonts (variable files: Inter Tight spans 100-900, JetBrains
   Mono spans 400-800 - measured, see BUILD_REPORT). Paths are relative to this
   file, so they resolve from / and from /zh/. No CJK webfonts are loaded.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/InterTight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/InterTight-latin.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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/JetBrainsMono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/JetBrainsMono-latin.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;
}

/* -------------------------------------------------------------------------
   4. Page styles. Mobile-first (390 px), desktop from 960 px.
   Conventions: zero radius everywhere (pills exist only as SVG K-mark bars),
   JetBrains Mono for all UI chrome, Inter Tight for headings + body.
   Kept deliberately conservative for in-app WebViews: no inset, no
   aspect-ratio, no vh units, no flex-gap (grid gap only), clamp() always
   preceded by a plain fallback.
   ------------------------------------------------------------------------- */
:root {
  --f-sans: "Inter Tight", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;
  --pad: 20px;
  --sec: 56px;
  /* Latin tracking / case. Collapsed for CJK in the zh block right below. */
  --tr-label: var(--kt-tracking-tag);
  --tr-ui: 0.04em;
  --tr-display: var(--kt-tracking-tight);
  --tr-h2: var(--kt-tracking-h1);
  --tr-h3: var(--kt-tracking-h2);
  --tt-label: uppercase;
  --lh-display: 1;
  --lh-h2: 1.08;
  --lh-body: var(--kt-lh-body);
}
html:lang(zh-Hans) {
  --tr-label: 0;
  --tr-ui: 0;
  --tr-display: 0;
  --tr-h2: 0;
  --tr-h3: 0;
  --tt-label: none;
  --lh-display: 1.22;
  --lh-h2: 1.3;
  --lh-body: var(--kt-lh-loose);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--kt-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px;
}
body {
  position: relative;
  margin: 0;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--kt-slate-700);
  background: var(--kt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(0, 200, 255, 0.16);
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
::selection { background: var(--kt-cyan-dim); color: var(--kt-fg-1); }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--kt-cyan);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* AXIOM signature: page-wide 48 px grid + faint cyan scanlines (fixed). */
body::before,
body::after {
  content: '';
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background-image:
    linear-gradient(var(--kt-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--kt-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.055;
}
body::after {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 200, 255, 0.018) 2px,
    rgba(0, 200, 255, 0.018) 3px
  );
}

.kt-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--kt-container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- shared bits ---------- */
.kt-eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tr-label);
  text-transform: var(--tt-label);
  color: var(--kt-cyan);
}
.kt-cy { color: var(--kt-cyan); }
.kt-rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 18px 0 0;
  border: 0;
  background: var(--kt-cyan);
}
.kt-pills { height: 16px; width: 189px; max-width: 100%; margin: 18px 0; }
.kt-pills .a { fill: var(--kt-cyan); }
.kt-pills .s { fill: var(--kt-fg-3); }
.kt-pills .n { fill: var(--kt-border); }

/* bracket buttons: [ label -> ]. Brackets/arrow are generated content, the DOM
   keeps only the JSON string. */
.kt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tr-ui);
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.kt-btn::before { content: "["; margin-right: 10px; opacity: 0.75; }
.kt-btn::after { content: "]"; margin-left: 10px; opacity: 0.75; }
.kt-btn-arrow .kt-btn-t::after { content: "\2192"; margin-left: 10px; }
.kt-btn-t { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }  /* A11Y-03: label wraps at 200% text size */
@media (max-width: 359px) { .kt-btn { padding-left: 12px; padding-right: 12px; } }  /* keeps the e-mail label on one line at 320 px now that it may shrink */
.kt-btn-primary { background: var(--kt-cyan); color: var(--kt-fg-on-blue); }
.kt-btn-ghost { background: transparent; color: var(--kt-fg-1); border-color: var(--kt-border-strong); }
.kt-btn-sm { min-height: 44px; padding: 8px 12px; font-size: 13px; }
.kt-btn-sm::before { margin-right: 6px; }
.kt-btn-sm::after { margin-left: 6px; }
.kt-btn:active { opacity: 0.85; }
@media (hover: hover) {
  .kt-btn-primary:hover { background: var(--kt-ice); }
  .kt-btn-ghost:hover { border-color: var(--kt-cyan); color: var(--kt-cyan); }
}

/* wordmark: KORDAS (500, cyan) + TECHNOLOGIES (400, muted fg-3), tracking .04em */
.kt-wordmark {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}
.kt-wm-a { font-weight: 500; color: var(--kt-cyan); }
.kt-wm-b { font-weight: 400; color: var(--kt-fg-3); }
/* size comes from the width/height attributes (nav 21x26, footer 28x34) */
.kt-kmark { flex: none; margin-right: 9px; }

/* ---------- banner ---------- */
.kt-banner {
  background: var(--kt-bg-elev);
  border-bottom: 1px solid var(--kt-border);
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--kt-fg-2);
}
html:lang(zh-Hans) .kt-banner { letter-spacing: 0; font-size: 12px; }  /* F02 */
.kt-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}
.kt-banner-text { margin-right: 20px; }
.kt-nb { display: inline-block; max-width: 100%; white-space: normal; }  /* A11Y-03 (was nowrap) */
.kt-banner-status { color: var(--kt-fg-1); }
.kt-banner-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--kt-cyan);
}

/* ---------- nav ---------- */
.kt-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 10, 16, 0.94);
  border-bottom: 1px solid var(--kt-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.kt-nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 6px 14px;
}
.kt-nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
.kt-nav-right { display: flex; align-items: center; }
.kt-lang { display: flex; align-items: center; margin-right: 4px; }
.kt-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--kt-fg-2);
}
.kt-lang a + a { border-left: 1px solid var(--kt-border); }
.kt-lang a[aria-current] { color: var(--kt-cyan); box-shadow: inset 0 -2px 0 var(--kt-cyan); }
@media (hover: hover) {
  .kt-lang a:hover { color: var(--kt-fg-1); }
}
.kt-nav .kt-btn-sm { padding: 8px 10px; }
/* below 390 px the row would overflow: keep the label, drop the bracket glyphs */
@media (max-width: 389px) {
  .kt-nav .kt-btn::before,
  .kt-nav .kt-btn::after { display: none; }
  /* 360 px phones: tighter label tracking keeps the hero eyebrow on one line */
  html:not(:lang(zh-Hans)) .kt-hero .kt-eyebrow { letter-spacing: 0.06em; }
}

/* ---------- hero ---------- */
.kt-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 0 44px;
  background: var(--kt-bg);
}
.kt-hero::before,
.kt-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
}
.kt-hero::before {
  background-image:
    linear-gradient(var(--kt-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--kt-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.08;
}
.kt-hero::after {
  background: radial-gradient(circle at 20% 28%, var(--kt-cyan-bg), transparent 62%);
}
.kt-hero-title {
  margin: 14px 0 0;
  font-family: var(--f-sans);
  font-size: 38px;
  font-size: clamp(34px, 9.6vw, 56px);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--kt-fg-1);
}
.kt-h1a, .kt-h1b { display: block; }
html:lang(zh-Hans) .kt-hero-title {
  font-size: 33px;
  font-size: clamp(28px, 8.5vw, 52px);
}
.kt-h1b { color: var(--kt-cyan); }
.kt-hero-lead {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--kt-fg-1);
}
html:lang(zh-Hans) .kt-hero-lead { line-height: 1.75; }
.kt-hero-actions { margin-top: 24px; }
.kt-hero-actions .kt-btn { display: flex; width: 100%; }
.kt-hero-actions .kt-btn + .kt-btn { margin-top: 12px; }
.kt-facts {
  margin-top: 22px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--kt-fg-2);
}
html:lang(zh-Hans) .kt-facts { letter-spacing: 0; font-size: 13px; }
.kt-facts li { display: flex; align-items: center; min-height: 28px; }
.kt-facts li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  background: var(--kt-cyan);
}

/* hero signal panel (static; decorative) */
.kt-signal {
  position: relative;
  overflow: hidden;
  margin-top: 30px;
  padding: 16px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-border);
  box-shadow: var(--kt-shadow-md);
}
.kt-signal::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(circle at 18% 40%, var(--kt-cyan-bg), transparent 70%);
  pointer-events: none;
}
.kt-signal-row { position: relative; display: flex; align-items: center; }
.kt-signal-mark { flex: none; margin-right: 20px; }
.kt-signal-mark svg { width: 62px; height: 76px; }
.kt-signal-legend {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 2.1;
  color: var(--kt-fg-2);
}
.kt-signal-legend div { display: flex; align-items: center; }
.kt-tri {
  flex: none;
  width: 0;
  height: 0;
  margin-right: 9px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.kt-tri-up { border-bottom: 7px solid var(--kt-cyan); }
.kt-tri-down { border-top: 7px solid var(--kt-ice); }
.kt-sig-line { flex: none; width: 16px; height: 1px; margin-right: 8px; background: var(--kt-fg-3); }
.kt-sig-val { margin: 0 6px 0 6px; color: var(--kt-cyan); }
.kt-sig-sep::before { content: "\00b7"; margin-right: 6px; }
.kt-signal-comment {
  position: relative;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--kt-border);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--kt-fg-2);
}

/* ---------- ticker (CSS-only marquee) ---------- */
.kt-ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 40px;
  background: var(--kt-bg-elev);
  border-top: 1px solid var(--kt-border);
  border-bottom: 1px solid var(--kt-border);
}
.kt-ticker-track {
  display: flex;
  width: -webkit-max-content;
  width: max-content;
  height: 100%;
  align-items: center;
  -webkit-animation: kt-pan 80s linear infinite;
  animation: kt-pan 80s linear infinite;
}
.kt-ticker-group { display: flex; flex: none; }
.kt-ticker-item {
  flex: none;
  padding: 0 22px;
  border-right: 1px solid var(--kt-border);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--kt-fg-2);
}
@-webkit-keyframes kt-pan { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-50%); } }
@keyframes kt-pan { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .kt-ticker { height: auto; padding: 6px 0; }
  .kt-ticker-track { -webkit-animation: none; animation: none; width: auto; flex-wrap: wrap; }
  .kt-ticker-group { flex-wrap: wrap; }
  .kt-ticker-group[aria-hidden="true"] { display: none; }
  .kt-ticker-item { padding: 8px 16px; }
}

/* ---------- sections ---------- */
.kt-section {
  position: relative;
  padding: var(--sec) 0;
  border-top: 1px solid var(--kt-border);
}
.kt-ticker + .kt-section,
.kt-stats + .kt-section { border-top: 0; }
.kt-section-head { max-width: 760px; margin-bottom: 28px; }
.kt-section-meta { margin-bottom: 12px; }
.kt-section-code {
  margin-right: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--kt-cyan);
}
.kt-section-meta .kt-eyebrow { color: var(--kt-fg-2); }
.kt-section-head h2 {
  color: var(--kt-fg-1);
  font-size: 30px;
  font-size: clamp(28px, 8vw, 52px);
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
}
.kt-h2a, .kt-h2b { display: block; }
.kt-h2b { color: var(--kt-cyan); }
.kt-lead { margin-top: 18px; max-width: 640px; font-size: 16px; line-height: var(--lh-body); color: var(--kt-slate-700); }

/* border-collapse card grids */
.kt-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1px;
  gap: 1px;
  background: var(--kt-border);
  border: 1px solid var(--kt-border);
}
.kt-grid > * { min-width: 0; background: var(--kt-bg-elev); }
.kt-card { padding: 24px 20px; }
.kt-card h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tr-h3);
  color: var(--kt-fg-1);
}
html:lang(zh-Hans) .kt-card h3 { line-height: 1.35; }
.kt-card p { font-size: 15px; color: var(--kt-slate-700); }
.kt-code {
  display: block;
  margin-bottom: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kt-fg-2);
}
.kt-card .kt-eyebrow { display: block; margin-bottom: 8px; }
.kt-card p + .kt-checks { margin-top: 18px; }
@media (hover: hover) {
  .kt-card:hover { background: var(--kt-bg-tint); box-shadow: inset 0 0 0 1px var(--kt-cyan); }
  .kt-card:hover .kt-code,
  .kt-card:hover .kt-checks,
  .kt-card:hover .kt-lane-count { color: var(--kt-slate-700); }  /* A11Y-02: 11.35:1 on bg-tint */
}

/* check-mark lists drawn in CSS (2 px stroke, no glyph dependency) */
.kt-checks { padding-top: 14px; border-top: 1px solid var(--kt-border); font-family: var(--f-mono); font-size: 12px; line-height: 1.45; color: var(--kt-fg-2); }
.kt-checks li { position: relative; padding: 5px 0 5px 24px; }
.kt-checks li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 10px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--kt-cyan);
  border-bottom: 2px solid var(--kt-cyan);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
html:lang(zh-Hans) .kt-checks { font-size: 13px; }

/* who */
.kt-who-grid { display: block; }
.kt-points { margin-top: 28px; border-top: 1px solid var(--kt-border); }
.kt-points li {
  position: relative;
  padding: 13px 0 13px 28px;
  border-bottom: 1px solid var(--kt-border);
  font-size: 15px;
  color: var(--kt-fg-1);
}
.kt-points li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 21px;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--kt-cyan);
  border-bottom: 2px solid var(--kt-cyan);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* team: roster summary + lanes */
.kt-roster {
  margin-bottom: 16px;
  padding: 20px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-border);
}
.kt-roster-total { display: flex; align-items: baseline; flex-wrap: wrap; }  /* A11Y-03 */
.kt-roster-num {
  margin-right: 12px;
  font-family: var(--f-mono);
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--kt-cyan);
}
.kt-roster-lbl {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: var(--tr-label);
  text-transform: var(--tt-label);
  color: var(--kt-fg-2);
}
.kt-split { margin-top: 20px; }
.kt-split-bar { display: flex; height: 6px; }
.kt-split-bar span { display: block; height: 6px; }
.kt-split-bar span + span { margin-left: 2px; }
.kt-split-a { background: var(--kt-cyan); }
.kt-split-b { background: var(--kt-ice); }
.kt-split-legend { display: flex; margin-top: 10px; font-family: var(--f-mono); font-size: 12px; color: var(--kt-fg-2); }
.kt-split-legend li { margin-right: 22px; }
.kt-split-legend b { margin-right: 6px; font-weight: 500; color: var(--kt-fg-1); }
.kt-roster-summary {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--kt-border);
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--kt-fg-2);
}
.kt-lane-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.kt-lane-top .kt-code { margin-bottom: 0; }
.kt-lane-count { font-family: var(--f-mono); font-size: 11px; letter-spacing: var(--tr-label); text-transform: var(--tt-label); color: var(--kt-fg-2); }
.kt-lane-count b { margin-right: 6px; font-size: 20px; font-weight: 500; color: var(--kt-cyan); }
.kt-tags { display: flex; flex-wrap: wrap; margin-top: 4px; }
.kt-tag {
  margin: 0 6px 6px 0;
  padding: 6px 8px;
  border: 1px solid var(--kt-border);
  background: var(--kt-bg);
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--kt-fg-2);
}

/* stats band */
.kt-stats {
  position: relative;
  z-index: 1;
  padding: 28px 0;
  background: var(--kt-bg-elev);
  border-top: 1px solid var(--kt-border);
  border-bottom: 1px solid var(--kt-border);
}
.kt-stats-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 18px 12px; gap: 18px 12px; }
.kt-stats-cell { min-width: 0; padding-left: 14px; border-left: 1px solid var(--kt-border-strong); }
.kt-stats-num {
  font-family: var(--f-mono);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--kt-cyan);
}
.kt-stats-lbl {
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tr-label);
  text-transform: var(--tt-label);
  color: var(--kt-fg-1);
}
.kt-stats-sub { margin-top: 3px; font-family: var(--f-mono); font-size: 11px; color: var(--kt-fg-2); }

/* process */
.kt-process-step { position: relative; padding: 24px 20px; }
.kt-process-num { margin-bottom: 14px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--kt-cyan); }
.kt-process-step h3 { margin-bottom: 8px; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: var(--tr-h3); color: var(--kt-fg-1); }
.kt-process-step p { margin-bottom: 16px; font-size: 15px; color: var(--kt-slate-700); }
.kt-process-dur {
  display: inline-block;
  padding: 4px 8px;
  background: var(--kt-bg-tint);
  border: 1px solid var(--kt-border);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: var(--tt-label);
  color: var(--kt-slate-700);  /* A11Y-02 = F02: was fg-2, 4.30:1 on bg-tint */
}
/* F02 (CJK legibility): 11 px Chinese labels -> 12 px */
html:lang(zh-Hans) .kt-stats-lbl, html:lang(zh-Hans) .kt-stats-sub,
html:lang(zh-Hans) .kt-lane-count, html:lang(zh-Hans) .kt-process-dur { font-size: 12px; }

/* sourcing */
.kt-src::before { content: ''; display: block; width: 24px; height: 2px; margin-bottom: 16px; background: var(--kt-cyan); }

/* send: numbered checklist */
.kt-checklist { max-width: 760px; counter-reset: kt-n; border-top: 1px solid var(--kt-border); }
.kt-checklist li {
  counter-increment: kt-n;
  display: flex;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--kt-border);
  font-size: 16px;
  color: var(--kt-fg-1);
}
.kt-checklist li::before {
  content: counter(kt-n, decimal-leading-zero);
  flex: none;
  min-width: 40px;
  padding-top: 3px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--kt-cyan);
}
.kt-note { max-width: 760px; margin-top: 22px; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; color: var(--kt-ice); }
html:lang(zh-Hans) .kt-note { font-size: 14px; }
.kt-note::before { content: "// "; color: var(--kt-cyan); }

/* faq: native <details>, no script */
.kt-faq { max-width: 820px; border-top: 1px solid var(--kt-border); }
.kt-faq details { border-bottom: 1px solid var(--kt-border); }
.kt-faq summary {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 16px 40px 16px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kt-fg-1);
  cursor: pointer;
  list-style: none;
}
.kt-faq summary::-webkit-details-marker { display: none; }
.kt-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 12px;
  width: 24px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: var(--kt-cyan);
}
.kt-faq details[open] summary::after { content: "\2212"; }
.kt-faq-a { padding: 0 40px 20px 0; }
.kt-faq-a p { font-size: 15px; color: var(--kt-slate-700); }

/* contact */
.kt-contact-grid { display: block; }
.kt-wechat {
  margin-top: 28px;
  padding: 24px 20px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-cyan);
  box-shadow: var(--kt-shadow-md);
}
.kt-wechat-label { display: flex; align-items: center; margin-bottom: 10px; color: var(--kt-cyan); }
.kt-wechat-label .kt-ico { width: 18px; height: 18px; margin-right: 10px; }
.kt-wechat-id {
  font-family: var(--f-mono);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--kt-fg-1);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.kt-qr { margin-top: 22px; }
.kt-qr-tile { display: inline-block; padding: 0; } /* the PNG carries its own background (panel colour) and 4-module quiet zone */
.kt-qr-tile img { width: 232px; height: auto; max-width: 100%; }
.kt-qr figcaption { margin-top: 12px; max-width: 320px; font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--kt-fg-2); }
html:lang(zh-Hans) .kt-qr figcaption { font-size: 13px; }
.kt-contact-list { margin-top: 16px; background: var(--kt-bg-elev); border: 1px solid var(--kt-border); }
.kt-contact-list li + li { border-top: 1px solid var(--kt-border); }
.kt-contact-row { display: flex; align-items: center; min-height: 56px; padding: 13px 16px; color: var(--kt-fg-1); }
a.kt-contact-row:active { background: var(--kt-bg-tint); }
.kt-ico { display: block; flex: none; width: 20px; height: 20px; }
.kt-contact-row .kt-ico { margin-right: 14px; color: var(--kt-fg-2); }
a.kt-contact-row .kt-ico { color: var(--kt-cyan); }
.kt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kt-contact-value { display: block; min-width: 0; font-family: var(--f-mono); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
a.kt-contact-row .kt-contact-value { color: var(--kt-cyan); }
.kt-person { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--kt-border); }
.kt-person-name { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--kt-fg-1); }
.kt-person-role { margin-top: 4px; font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--kt-fg-2); }
@media (hover: hover) {
  a.kt-contact-row:hover { background: var(--kt-bg-tint); }
}

/* ---------- footer ---------- */
.kt-footer {
  position: relative;
  z-index: 1;
  padding: 40px 0 32px;
  background: var(--kt-bg);
  border-top: 1px solid var(--kt-border);
}
.kt-footer-brand { display: flex; align-items: center; }
.kt-footer-brand .kt-kmark { margin-right: 12px; }
.kt-footer-brand .kt-wordmark { font-size: 14px; white-space: normal; }  /* A11Y-03 */
.kt-footer-tagline { margin-top: 16px; font-family: var(--f-mono); font-size: 12px; color: var(--kt-fg-2); }
.kt-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--kt-border);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--kt-fg-2);
}
.kt-footer-meta span { display: block; }
.kt-footer .kt-lang { margin: 8px 0 0 -6px; }

/* ---------- 404 ---------- */
.kt-nf { padding: 64px 0 96px; }
.kt-nf-code { font-family: var(--f-mono); font-size: 72px; font-size: clamp(64px, 24vw, 140px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--kt-cyan); }
.kt-nf h1 { margin-top: 12px; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: var(--tr-h2); color: var(--kt-fg-1); }
.kt-nf-sub { margin-top: 8px; font-size: 18px; color: var(--kt-fg-2); }
.kt-nf-actions { margin-top: 28px; }
.kt-nf-actions .kt-btn { display: flex; width: 100%; }
.kt-nf-actions .kt-btn + .kt-btn { margin-top: 12px; }

/* ---------- 640+ ---------- */
@media (min-width: 640px) {
  :root { --pad: 28px; --sec: 72px; }
  .kt-nav-inner { padding-left: var(--pad); padding-right: var(--pad); }
  .kt-nav .kt-btn-sm { padding: 8px 14px; }
  .kt-banner-inner { flex-wrap: nowrap; }
  .kt-hero { padding: 56px 0 64px; }
  .kt-hero-actions .kt-btn { display: inline-flex; width: auto; }
  .kt-hero-actions .kt-btn + .kt-btn { margin-top: 0; margin-left: 12px; }
  .kt-facts { display: flex; flex-wrap: wrap; }
  .kt-facts li { margin-right: 28px; }
  .kt-grid { grid-template-columns: repeat(2, 1fr); }
  .kt-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kt-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .kt-nf-actions .kt-btn { display: inline-flex; width: auto; }
  .kt-nf-actions .kt-btn + .kt-btn { margin-top: 0; margin-left: 12px; }
  .kt-footer-legal { flex-wrap: nowrap; }
}

/* ---------- 960+ ---------- */
@media (min-width: 960px) {
  :root { --pad: 32px; --sec: 104px; }
  html { scroll-padding-top: 84px; }
  .kt-nav .kt-kmark { width: 25px; height: 30px; margin-right: 11px; }
  .kt-wordmark { font-size: 13px; }
  .kt-nav-inner { min-height: 64px; }
  .kt-lang a { min-width: 44px; font-size: 14px; }
  .kt-hero { padding: 84px 0 92px; }
  .kt-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; grid-gap: 64px; gap: 64px; align-items: center; }
  .kt-hero-title { font-size: 64px; font-size: clamp(52px, 4.9vw, 70px); }
  html:lang(zh-Hans) .kt-hero-title { font-size: 56px; font-size: clamp(44px, 4.4vw, 62px); }
  .kt-hero-lead { font-size: 18px; }
  .kt-signal { margin-top: 0; padding: 40px 36px 28px; }
  .kt-signal-row { flex-direction: column; align-items: flex-start; }
  .kt-signal-mark { margin: 0 0 28px; }
  .kt-signal-mark svg { width: 138px; height: 168px; }
  .kt-signal-legend { font-size: 13px; }
  .kt-signal-comment { margin-top: 28px; font-size: 12px; }
  .kt-section-head { margin-bottom: 44px; }
  .kt-section-head h2 { font-size: 48px; font-size: clamp(38px, 4vw, 52px); }
  .kt-who-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-gap: 72px; gap: 72px; align-items: start; }
  .kt-who-grid .kt-section-head { margin-bottom: 0; }
  .kt-points { margin-top: 0; }
  .kt-g3 { grid-template-columns: repeat(3, 1fr); }
  .kt-g4 { grid-template-columns: repeat(4, 1fr); }
  .kt-g3 > :last-child:nth-child(odd),
  .kt-g4 > :last-child:nth-child(odd) { grid-column: auto; }
  .kt-g3 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .kt-g3 > :last-child:nth-child(3n+2) { grid-column: span 2; }
  .kt-g4 > :last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .kt-g4 > :last-child:nth-child(4n+2) { grid-column: span 3; }
  .kt-g4 > :last-child:nth-child(4n+3) { grid-column: span 2; }
  .kt-card { padding: 32px 28px; }
  .kt-roster { display: grid; grid-template-columns: auto 1fr auto; grid-gap: 48px; gap: 48px; align-items: center; padding: 28px 32px; }
  .kt-split { margin-top: 0; }
  .kt-roster-summary { margin-top: 0; padding-top: 0; border-top: 0; max-width: 260px; line-height: 1.6; }
  .kt-stats { padding: 44px 0; }
  .kt-stats-num { font-size: 36px; }
  .kt-process-step { padding: 28px 24px; }
  .kt-process .kt-process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 34px;
    z-index: 2;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--kt-fg-3);
    border-right: 2px solid var(--kt-fg-3);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: var(--kt-bg-elev);
  }
  .kt-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; grid-gap: 72px; gap: 72px; align-items: start; }
  .kt-contact-intro .kt-section-head { margin-bottom: 0; }
  .kt-person { margin-top: 40px; }
  .kt-wechat { margin-top: 0; padding: 32px 32px 28px; }
  .kt-wechat-id { font-size: 40px; }
  .kt-qr-tile img { width: 256px; height: auto; }
  .kt-footer { padding: 56px 0 40px; }
  .kt-footer-legal { margin-top: 36px; }
}

/* ---------- blueprint art (inline SVG from src/art/*.svg via build.py art(); decorative, aria-hidden) ----------
   Static by default: every line is drawn without animation. Motion (draw-in, signal pulses, scan line) only under
   prefers-reduced-motion: no-preference; pulses and the scan line stay hidden otherwise. No pathLength, no ids. */
.kt-bp .bp-a, .kt-bp .bp-b, .kt-bp .bp-c, .kt-bp .bp-d { fill: none; }
.kt-bp .bp-a { stroke: var(--kt-cyan); stroke-width: 1.2; }
.kt-bp .bp-b { stroke: var(--kt-ice); stroke-opacity: 0.85; }
.kt-bp .bp-c { stroke: var(--kt-fg-3); }
.kt-bp .bp-d { stroke: var(--kt-fg-2); stroke-width: 0.8; }
.kt-bp .bp-cl { stroke-dasharray: 9 3 2 3; }
.kt-bp .bp-hid { stroke-dasharray: 4 3; }
.kt-bp .bp-fill { fill: var(--kt-cyan-bg); }
.kt-bp .bp-dot { fill: var(--kt-cyan); }
.kt-bp text { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.04em; fill: var(--kt-fg-2); }
.kt-bp .bp-tc, .kt-bp .bp-tc text { fill: var(--kt-cyan); }  /* class on <text>/<tspan> or on a parent <g> */
.kt-bp .bp-tz, .kt-bp .bp-tz text { fill: var(--kt-fg-3); font-size: 7px; }
.kt-bp .bp-pulse, .kt-bp .bp-scan { opacity: 0; }
.kt-bp .bp-pulse { fill: none; stroke: var(--kt-ice); stroke-width: 2.2; stroke-dasharray: 3 47; }
.kt-bp .bp-scan { stroke: var(--kt-cyan); }
@media (prefers-reduced-motion: no-preference) {
  .kt-bp .bp-draw { stroke-dasharray: 1600; animation: kt-bp-draw 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .kt-bp .bp-tr { animation-delay: 0.5s; }
  .kt-bp .bp-late { animation: kt-bp-fade 0.6s ease-out 1.3s both; }
  .kt-bp .bp-pulse { animation: kt-bp-in 0.3s linear 2s both, kt-bp-flow 2.6s linear 2s infinite; }
  .kt-bp .bp-scan { animation: kt-bp-scan 7s linear 2.4s infinite; }
}
@keyframes kt-bp-draw { from { stroke-dashoffset: 1600; } }
@keyframes kt-bp-fade { from { opacity: 0; } }
@keyframes kt-bp-in { to { opacity: 1; } }
@keyframes kt-bp-flow { to { stroke-dashoffset: -50; } }
@keyframes kt-bp-scan {
  0% { opacity: 0; transform: translateY(0); }
  6%, 90% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(244px); }
}
/* fixed-ratio box (no aspect-ratio property, see header note) */
.kt-art { position: relative; height: 0; overflow: hidden; }
.kt-art .kt-bp { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* hero signal panel -> blueprint sheet with a title block (the hero.signal copy stays) */
.kt-signal.kt-sheet { padding: 10px; }
.kt-sheet-art { padding-bottom: 67%; }
.kt-sheet .kt-signal-row { margin-top: 10px; border: 1px solid var(--kt-border); }
.kt-sheet .kt-signal-mark { -ms-flex-item-align: stretch; align-self: stretch; display: flex; align-items: center; margin: 0; padding: 8px 14px; border-right: 1px solid var(--kt-border); }
.kt-sheet .kt-signal-mark svg { width: 30px; height: 37px; }
.kt-sheet .kt-signal-legend { padding: 4px 14px; line-height: 1.9; }
.kt-sheet .kt-signal-comment { margin-top: 0; padding: 8px 14px; border: 1px solid var(--kt-border); border-top: 0; }
@media (min-width: 960px) {
  .kt-signal.kt-sheet { padding: 14px; }
  .kt-sheet .kt-signal-row { flex-direction: row; align-items: stretch; }
  .kt-sheet .kt-signal-mark { margin: 0; padding: 10px 18px; }
  .kt-sheet .kt-signal-mark svg { width: 40px; height: 49px; }
  .kt-sheet .kt-signal-comment { margin-top: 0; font-size: 11px; }
}

/* card drawings (sourcing + build): 240x100 viewBox */
.kt-card-art { padding-bottom: 41.6667%; margin-bottom: 18px; }
.kt-src.kt-has-art::before { display: none; }
/* send: drawing panel only where the checklist leaves an empty column */
.kt-send-art { display: none; }
@media (min-width: 960px) {
  .kt-send-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-gap: 64px; gap: 64px; align-items: center; }
  .kt-send-art { display: block; padding-bottom: 83.3333%; }
}

/* QR: cyan crop marks around the tile ("scan here"); solid hairline segments, not a decorative gradient */
.kt-qr-tile { position: relative; }
.kt-qr-tile::before {
  content: '';
  position: absolute;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
  pointer-events: none;
  background:
    linear-gradient(var(--kt-cyan), var(--kt-cyan)) left top / 18px 2px no-repeat,
    linear-gradient(var(--kt-cyan), var(--kt-cyan)) left top / 2px 18px no-repeat,
    linear-gradient(var(--kt-cyan), var(--kt-cyan)) right top / 18px 2px no-repeat,
    linear-gradient(var(--kt-cyan), var(--kt-cyan)) right top / 2px 18px no-repeat,
    linear-gradient(var(--kt-cyan), var(--kt-cyan)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--kt-cyan), var(--kt-cyan)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--kt-cyan), var(--kt-cyan)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--kt-cyan), var(--kt-cyan)) right bottom / 2px 18px no-repeat;
}

/* process: step number as a PCB pad with a trace running to the next step */
.kt-process-num { display: flex; align-items: center; }
.kt-process-num::before { content: ''; flex: none; width: 7px; height: 7px; margin-right: 10px; border: 1px solid var(--kt-cyan); background: var(--kt-cyan-bg); }
.kt-process-num::after { content: ''; flex: 1 1 auto; height: 1px; margin-left: 12px; background: var(--kt-border-strong); }