:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #171719;
  background: #f5f5f7;
  --accent: #b84121;
  --muted: #5c5c62;
  --line: #dbdbdf;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }
a { color: inherit; text-underline-offset: .22em; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #166ac1; outline-offset: 4px; }
.wrap { width: min(1080px, calc(100% - 48px)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: 8px; z-index: 2; padding: 8px; background: white; transform: translateY(-160%); }
.skip:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--line); background: #fff; }
.header-inner, .footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .84rem; }
.header-inner a:first-child { font-weight: 750; text-decoration: none; }
.header-inner a span, .footer { color: var(--muted); }
.intro { display: grid; grid-template-columns: 2fr 1fr; align-items: end; gap: 36px; padding: clamp(48px, 8vw, 104px) 0 34px; }
.eyebrow, .work-bar, .stage-top { font: 650 .75rem/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .1em; }
.eyebrow { color: var(--accent); }
h1 { margin: 10px 0 12px; font-size: clamp(2.9rem, 8.5vw, 7rem); letter-spacing: -.075em; line-height: .97; }
h1 span { color: var(--accent); }
.subtitle { color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.45; }
.intro-note { border-left: 1px solid var(--line); padding: 0 0 0 22px; }
.intro-note p + p { margin-top: 8px; line-height: 1.55; }
.work { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.work-bar, .stage-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 24px; }
.work-bar { color: var(--muted); }
.stage { position: relative; overflow: hidden; background: #18181b; color: #fff; --signal: #ff9168; }
.stage-top { border-bottom: 1px solid #36363a; color: #ceced3; }
.stage-top strong { color: #fff; font-variant-numeric: tabular-nums; }
.stage[data-phase="windup"] #phase, .stage[data-phase="window"] #phase { color: var(--signal); }
.arena { display: block; width: min(100%, 780px); margin-inline: auto; }
.core { fill: #b7b7bd; }
.threat, .strike { color: var(--signal); opacity: 0; }
.stage[data-phase="windup"] .threat, .stage[data-phase="window"] .threat { opacity: 1; }
.stage[data-phase="window"] .core { fill: var(--signal); }
.stage[data-phase="result"] .strike { opacity: 1; }
.player { transition: transform .18s ease-out; }
.player.is-dodging { transform: translateX(-102px); }
.stage-bottom { padding: 0 24px 21px; }
.stage-bottom p { min-height: 1.5em; line-height: 1.5; font-weight: 650; }
.meter { height: 3px; margin-top: 12px; border-radius: 3px; background: #424246; }
.meter span { display: block; width: 100%; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; }
.controls { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 22px; padding: 18px 24px; }
.actions, .camera-state { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.camera-state { justify-content: end; }
.camera-state p { max-width: 29ch; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.camera-state video { width: 76px; aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; transform: scaleX(-1); background: #18181b; }
button { cursor: pointer; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; background: #fff; color: #171719; font-size: .87rem; font-weight: 650; }
button:first-child { background: #171719; color: white; border-color: #171719; }
button:enabled:hover { box-shadow: inset 0 0 0 1px currentColor; }
button:disabled { cursor: default; opacity: .52; }
kbd { display: inline-block; margin-left: 3px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; font-size: .72rem; }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 36px 0 54px; }
.notes > div { border-top: 1px solid var(--line); padding-top: 16px; }
.notes h2 { font-size: 1.2rem; margin: 8px 0; }
.notes h2 + p { color: var(--muted); line-height: 1.6; max-width: 54ch; }
.footer { border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .intro, .controls { grid-template-columns: 1fr; gap: 16px; }
  .camera-state { justify-content: start; }
  .camera-state p { max-width: 36ch; }
}

@media (max-width: 480px) {
  .wrap { width: calc(100% - 28px); }
  .notes { grid-template-columns: 1fr; gap: 20px; }
  .work-bar, .stage-top, .stage-bottom, .controls { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .player { transition: none; }
}