@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&family=IBM+Plex+Sans+Thai+Looped:wght@400;600;700&family=IBM+Plex+Sans+Thai:wght@400;600;700&display=swap");
/* CU Stroke Center — generated by tools/ds-css.mjs from ref/design-system/. Do not edit. */
:root {
  color-scheme: light dark;
  --cross-red: #ed1c24;
  --navy: #1e245e;
  --navy-ink: #1e245e;
  --gold: #b7a074;
  --gold-ink: #8a6d1f;
  --surface: #ffffff;
  --surface-alt: #f6f4f1;
  --surface-raised: #ffffff;
  --ink: #1a1d24;
  --ink-muted: #5a5f6a;
  --border: #dad6cf;
  --border-strong: #8c8579;
  --action: #233a8c;
  --on-action: #ffffff;
  --action-secondary: #e7eaf0;
  --on-action-secondary: #1a1d24;
  --focus: #1f6feb;
  --emergency: #a60c24;
  --on-emergency: #ffffff;
  --found-ink: #8e0a1e;
  --found-surface: #ffe7e8;
  --none-ink: #233a8c;
  --none-surface: #e8ecf7;
  --weak: #ffc233;
  --on-weak: #1a1d24;
  --weak-ink: #8a6d1f;
  --stage: #0b0d12;
  --on-stage: #ffffff;
  --stage-scrim: rgba(0,0,0,0.55);
  --shadow-card: 0 1px 2px rgba(26,29,36,0.08), 0 4px 16px rgba(26,29,36,0.06);
  --shadow-callbar: 0 -4px 16px rgba(26,29,36,0.12);
  --shadow-cue: 0 2px 6px rgba(0,0,0,0.9);
  --font-sans: "IBM Plex Sans Thai", "IBM Plex Sans", "Noto Sans Thai", system-ui, sans-serif;
  --font-looped: "IBM Plex Sans Thai Looped", "IBM Plex Sans Thai", "Noto Sans Thai Looped", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --touch-min: 64px;
  --callbar-height: 80px;
  --content-max: 560px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --navy-ink: #a3b4ee;
    --gold-ink: #b7a074;
    --surface: #0f1218;
    --surface-alt: #1a1e27;
    --surface-raised: #222838;
    --ink: #f2f3f5;
    --ink-muted: #a9afba;
    --border: #333a46;
    --border-strong: #6b7590;
    --action: #8ab4ff;
    --on-action: #0f1218;
    --action-secondary: #2a3247;
    --on-action-secondary: #ffffff;
    --focus: #8ab4ff;
    --found-ink: #ffb3b6;
    --found-surface: #2a1214;
    --none-ink: #c5d0f0;
    --none-surface: #1e2638;
    --weak-ink: #ffc233;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-callbar: 0 -4px 16px rgba(0,0,0,0.6);
  }
}
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); }
.cus-app { font-family: var(--font-looped); color: var(--ink); }
.cus-app :focus-visible, .cus-btn:focus-visible, .cus-callbar a:focus-visible, .cus-onset button:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

/* Button */
.cus-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--radius-md);
  font-family: var(--font-looped); font-size: 26px; line-height: 34px; font-weight: 700; cursor: pointer;
  text-decoration: none; box-sizing: border-box; }
.cus-btn--block { display: flex; width: 100%; }
.cus-btn--primary { background: var(--action); color: var(--on-action); }
.cus-btn--secondary { background: var(--action-secondary); color: var(--on-action-secondary); }
.cus-btn--emergency { background: var(--emergency); color: var(--on-emergency); }
.cus-btn--skip { background: transparent; color: var(--ink); border: 2px solid var(--border-strong); font-size: 22px; font-weight: 600; }
.cus-btn--md { min-height: 52px; font-size: 20px; line-height: 28px; padding: var(--space-2) var(--space-4); }
.cus-btn:disabled { opacity: .45; cursor: not-allowed; }

/* CallBar */
.cus-callbar { position: sticky; bottom: 0; left: 0; right: 0; z-index: 10; box-sizing: border-box;
  height: var(--callbar-height); padding: var(--space-2) var(--space-4); background: var(--surface);
  box-shadow: var(--shadow-callbar); display: flex; }
.cus-callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  background: var(--emergency); color: var(--on-emergency); border-radius: var(--radius-md); text-decoration: none;
  font-family: var(--font-looped); font-size: 26px; line-height: 34px; font-weight: 700; }
.cus-callbar__num { font-family: var(--font-mono); font-size: 30px; letter-spacing: .02em; }
.cus-callbar__tag { font-size: 15px; font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-sm);
  background: var(--on-emergency); color: var(--emergency); }

/* StepTracker */
.cus-steps { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-family: var(--font-looped); }
.cus-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  color: var(--ink-muted); font-size: 15px; line-height: 20px; font-weight: 600; }
.cus-steps__dot { width: 44px; height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 20px; font-weight: 700; border: 2px solid var(--border-strong);
  color: var(--ink-muted); background: var(--surface); box-sizing: border-box; }
.cus-steps li[data-status="current"] { color: var(--ink); }
.cus-steps li[data-status="current"] .cus-steps__dot { background: var(--action); border-color: var(--action); color: var(--on-action); }
.cus-steps li[data-status="none"] .cus-steps__dot { background: var(--none-surface); border-color: var(--none-ink); color: var(--none-ink); }
.cus-steps li[data-status="found"] .cus-steps__dot { background: var(--emergency); border-color: var(--emergency); color: var(--on-emergency); }
.cus-steps li[data-status="skipped"] .cus-steps__dot { border-style: dashed; }

/* CameraStage */
.cus-stage { position: relative; background: var(--stage); color: var(--on-stage); aspect-ratio: 3 / 4; max-height: 55dvh;
  width: 100%; overflow: hidden; font-family: var(--font-looped); }
.cus-stage > video, .cus-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cus-stage--mirror > video, .cus-stage--mirror > canvas { transform: scaleX(-1); }
.cus-stage__privacy { position: absolute; top: var(--space-2); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 15px; line-height: 20px; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--stage-scrim); }
.cus-stage__hud { position: absolute; left: var(--space-2); top: 40px; padding: 6px var(--space-2); border-radius: var(--radius-sm);
  background: var(--stage-scrim); font: 700 16px/21px var(--font-mono); white-space: pre; }
.cus-stage__cue { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); text-align: center;
  font-size: 32px; line-height: 42px; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.cus-stage__count { display: block; font-family: var(--font-mono); font-size: 44px; line-height: 48px; color: var(--weak); }

/* Verdict */
.cus-verdict { border-radius: var(--radius-md); padding: var(--space-4); font-family: var(--font-looped); }
.cus-verdict__title { margin: 0; font-size: 30px; line-height: 40px; font-weight: 700; }
.cus-verdict__detail { margin: var(--space-1) 0 0; font-size: 20px; line-height: 30px; }
.cus-verdict--found { background: var(--found-surface); color: var(--found-ink); }
.cus-verdict--none { background: var(--none-surface); color: var(--none-ink); }
.cus-verdict--weak { background: var(--surface-alt); color: var(--weak-ink); border: 2px solid var(--weak); }
.cus-verdict--skipped { background: var(--surface-alt); color: var(--ink-muted); border: 2px dashed var(--border-strong); }
.cus-verdict--running { background: var(--surface-alt); color: var(--ink-muted); }
.cus-verdict--running .cus-verdict__title { font-size: 24px; line-height: 34px; }

/* OnsetPicker */
.cus-onset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-family: var(--font-looped); }
.cus-onset legend { font-size: 28px; line-height: 40px; font-weight: 600; margin-bottom: var(--space-3); padding: 0; }
.cus-onset button { min-height: var(--touch-min); text-align: left; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  border: 2px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); font: 600 24px/32px var(--font-looped); cursor: pointer; }
.cus-onset button[aria-pressed="true"] { border-color: var(--action); background: var(--action); color: var(--on-action); }

/* Countdown */
.cus-countdown { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--emergency); color: var(--on-emergency); font-family: var(--font-looped); text-align: center; }
.cus-countdown__label { font-size: 20px; line-height: 28px; font-weight: 600; }
.cus-countdown__time { font-family: var(--font-mono); font-size: 44px; line-height: 48px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cus-countdown__lkw { font-size: 15px; line-height: 22px; }
.cus-countdown--expired { background: var(--surface-alt); color: var(--ink); border: 2px solid var(--emergency); }

/* Notice */
.cus-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-family: var(--font-looped); font-size: 20px; line-height: 30px; }
.cus-notice__tag { flex: none; font-size: 15px; line-height: 20px; font-weight: 700; padding: 3px var(--space-2); border-radius: var(--radius-sm); margin-top: 4px; }
.cus-notice--practice { background: var(--weak); color: var(--on-weak); }
.cus-notice--practice .cus-notice__tag { background: var(--on-weak); color: var(--weak); }
.cus-notice--warn { background: var(--surface-alt); color: var(--ink); border: 2px solid var(--weak); }
.cus-notice--warn .cus-notice__tag { background: var(--weak); color: var(--on-weak); }
.cus-notice--info { background: var(--none-surface); color: var(--none-ink); }
.cus-notice--info .cus-notice__tag { background: var(--none-ink); color: var(--none-surface); }