.starter-page {
  --field: #0b1a2d;
  --error: #ffb4a9;
  margin: 0;
  line-height: 1.55;
}
html[data-theme="light"] .starter-page { --field: #fff; --error: #9a2416; }
.starter-page * { box-sizing: border-box; }
.starter-page [hidden] { display: none !important; }
.starter-page a { color: inherit; }
.starter-page button, .starter-page input { font: inherit; }
.starter-page button { cursor: pointer; }
.starter-page :is(a, button, summary, input):focus-visible, .first-console:focus-visible, #finished-title:focus-visible {
  outline: 3px solid var(--street-ice); outline-offset: 3px;
}
.first-skipnav { position: absolute; top: 5px; left: 5px; z-index: 2; transform: translateY(-150%); padding: 10px; background: var(--street-panel); }
.first-skipnav:focus { transform: translateY(0); }
.first-top, .first-main { width: min(1170px, calc(100% - 64px)); margin-inline: auto; }
.first-top { display: flex; justify-content: space-between; align-items: center; min-height: 66px; border-bottom: 1px solid var(--street-line); }
.first-top a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.first-brand { gap: 13px; font-size: 18px; font-weight: 800; letter-spacing: .06em; }
.first-top .first-back { color: var(--street-muted); font-size: .88rem; }
.first-back:hover, .first-pass:hover, .first-replay:hover { text-decoration: underline; }
.first-intro { padding: clamp(23px, 4vw, 54px) 0 clamp(18px, 2.5vw, 36px); }
.first-intro .first-kicker { display: flex; align-items: center; gap: 9px; color: var(--street-ice); font-size: .76rem; font-weight: 700; letter-spacing: .06em; }
.first-kicker::before { content: ""; width: 14px; height: 5px; background: #83d9ff; box-shadow: 3px -3px #367db0; }
.first-kicker span { opacity: .65; }
.first-intro h1 { margin: 7px 0 8px; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 850; }
.first-intro p, .first-console p, .first-help p { margin: 0; color: var(--street-muted); }
.first-stage { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(315px, 1fr); gap: 18px; align-items: stretch; }
.first-station, .first-console, .first-help { border: 1px solid var(--street-line); background: var(--street-panel); min-width: 0; }
.first-station { margin: 0; display: flex; flex-direction: column; }
.first-station figcaption, .first-caption { margin: 0; padding: 10px 16px; }
.first-station figcaption { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: .94rem; border-bottom: 1px solid var(--street-line); }
.first-led { width: 8px; height: 8px; background: var(--street-ice); }
.first-caption { color: var(--street-muted); border-top: 1px solid var(--street-line); font-size: .8rem; }
.first-scene { container-type: inline-size; position: relative; width: 100%; margin-block: auto; aspect-ratio: 360 / 189; background: #102843; }
.first-scene canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.first-sign { position: absolute; top: 27.5%; bottom: 49.2%; left: 16.9%; right: 16.9%; display: grid; align-content: center; padding-inline: 2%; overflow: hidden; text-align: center; color: #92b4c6; font: 700 clamp(13px, 3.65cqw, 28px)/1.15 var(--street-mono); overflow-wrap: anywhere; white-space: pre-wrap; }
.first-sign.is-lit { color: #d1fd71; text-shadow: 0 0 10px #b1f67575; }
.first-console { padding: clamp(18px, 2vw, 29px); background: linear-gradient(135deg, var(--street-raised), var(--street-panel) 73%); border-top: 3px solid var(--street-ice); align-content: center; }
.first-console h2 { margin: 0 0 5px; font-size: clamp(1.35rem, 2.2vw, 1.83rem); line-height: 1.3; }
.first-console p { font-size: .9rem; }
.first-field { display: flex; margin-block: 13px 12px; gap: 6px; }
.first-field input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid var(--street-line); background: var(--field); color: var(--street-text); border-radius: 0; }
.first-field input::placeholder { color: var(--street-muted); opacity: .84; }
.first-field input[aria-invalid="true"] { border-color: var(--error); }
.first-field button, .first-secondary { border: 1px solid var(--street-line); color: var(--street-text); background: var(--street-panel); }
.first-field button { padding: 7px 10px; min-height: 44px; }
.first-field button:hover, .first-secondary:hover { border-color: var(--street-ice); }
.first-console .first-error { color: var(--error); margin-block: -3px 9px; }
.first-code { padding: 10px 12px; background: #0a1826; border-left: 3px solid #6498b5; }
.first-code-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; font-size: .72rem; color: #c2d5df; }
.first-code-label span { color: #98b3c6; }
.first-code code { display: block; color: #eaf3f8; margin-top: 5px; font: 600 .96rem/1.6 var(--street-mono); overflow-wrap: anywhere; white-space: pre-wrap; }
.first-code b { color: #83d9ff; }
.first-code code span { color: #d1fd71; }
.first-primary, .first-secondary { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 45px; text-decoration: none; width: 100%; padding: 8px 12px; font-weight: 750; }
.starter-page .first-primary { border: 1px solid #b6d65c; color: var(--street-active-ink); background: var(--street-active); margin-top: 16px; }
.first-primary:hover { filter: brightness(1.05); }
.first-secondary { margin-top: 8px; }
.first-pass, .first-replay { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 0; font-size: .84rem; color: var(--street-muted); text-decoration: none; }
.first-replay { border: 0; background: none; }
#finished-title span { color: var(--street-ice); }
#receipt { margin: 12px 0; border-left: 3px solid var(--street-ice); padding: 8px 12px; background: var(--field); color: var(--street-text); overflow-wrap: anywhere; white-space: pre-wrap; }
.first-help { margin-top: 16px; }
.first-help summary { cursor: pointer; min-height: 45px; padding: 11px 16px; color: var(--street-text); font-weight: 650; font-size: .92rem; }
.first-help p { padding: 0 16px 14px; max-width: 71ch; font-size: .91rem; }
.first-storage { margin: 12px 0 28px; color: var(--street-muted); font-size: .8rem; }
@media (max-width: 800px) {
  .first-top, .first-main { width: calc(100% - 36px); }
  .first-stage { grid-template-columns: minmax(0, 1.28fr) minmax(285px, 1fr); gap: 12px; }
}
@media (max-width: 650px) {
  .first-top, .first-main { width: calc(100% - 28px); }
  .first-top { min-height: 50px; }
  .first-brand { font-size: 1rem; }
  .first-intro { padding: 17px 0 16px; }
  .first-intro p { font-size: .88rem; }
  .first-stage { grid-template-columns: 1fr; gap: 12px; }
  .first-station figcaption, .first-caption { padding: 5px 11px; }
  .first-station figcaption { font-size: .83rem; }
  .first-caption { font-size: .75rem; }
  .first-console { padding: 15px; }
}