:root {
  --ink: #eaf2f5;
  --muted: #9aadb9;
  --quiet: #69808d;
  --night: #07111b;
  --panel: #0d1b28;
  --panel-2: #102333;
  --border: rgba(172, 210, 221, .15);
  --grid: rgba(120, 164, 180, .10);
  --teal: #39d6c1;
  --teal-deep: #0b8f87;
  --amber: #ffc05d;
  --coral: #ff806f;
  --blue: #69b9ff;
  --focus: #f8e57a;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 15% -20%, #173247 0, transparent 35rem), var(--night); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.app-shell { width: min(1440px, calc(100% - 48px)); margin: auto; }
.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.28rem; letter-spacing: -.03em; }
.brand img { width: 42px; height: 42px; }
.brand strong { color: var(--teal); }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: .54rem; letter-spacing: .13em; font-weight: 800; }
.header-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .77rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(57, 214, 193, .12); }
.intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: end; padding: 64px 0 40px; }
.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--teal); text-transform: uppercase; letter-spacing: .16em; font-size: .69rem; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 700px; margin-bottom: 18px; font-size: clamp(2.55rem, 5.8vw, 5.8rem); line-height: .96; letter-spacing: -.07em; }
h1 em, h2 em { color: var(--teal); font-style: normal; }
.lede { max-width: 660px; margin-bottom: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.safety-callout { display: flex; gap: 13px; align-items: flex-start; margin: 0; padding: 18px; border: 1px solid rgba(255, 192, 93, .35); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 192, 93, .10), rgba(255, 192, 93, .02)); color: #d5e0e6; font-size: .88rem; line-height: 1.55; }
.safety-callout p { margin: 0; }.safety-callout strong { color: var(--amber); }
.callout-icon { flex: 0 0 23px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--amber); color: #34230d; font-weight: 900; }
.simulator-grid { display: grid; grid-template-columns: minmax(315px, .72fr) minmax(500px, 1.28fr); gap: 18px; }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: 21px; background: linear-gradient(160deg, rgba(19, 46, 63, .96), rgba(8, 22, 34, .98)); box-shadow: 0 18px 48px rgba(0, 0, 0, .17); }
.control-panel { display: flex; flex-direction: column; padding: 25px; }
.road-panel { padding: 25px; }
.panel-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.panel-heading h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.03em; }.panel-heading .section-kicker { margin-bottom: 4px; color: var(--muted); font-size: .62rem; }
.live-badge { padding: 7px 10px; border: 1px solid rgba(57,214,193,.28); border-radius: 999px; background: rgba(57,214,193,.09); color: var(--teal); font-size: .71rem; font-weight: 800; }
.wheel-stage { position: relative; display: grid; place-items: center; min-height: 314px; margin: 8px 0 3px; overflow: hidden; }
.steering-wheel { position: relative; width: min(260px, 78vw); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.steering-wheel:active { cursor: grabbing; }.steering-wheel::after { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(57,214,193,.22); border-radius: 50%; pointer-events: none; }
.steering-wheel svg { width: 100%; height: 100%; transition: transform .12s ease-out; filter: drop-shadow(0 14px 16px rgba(0,0,0,.31)); }.wheel-rim-outer { fill: #09141e; stroke: #496170; stroke-width: 19; }.wheel-rim-inner { fill: none; stroke: #142b3a; stroke-width: 4; }.wheel-spokes { fill: #344e5e; stroke: #617d8d; stroke-width: 2; }.wheel-hub { fill: #152c3b; stroke: var(--teal); stroke-width: 3; }.wheel-center-mark { stroke: var(--teal); stroke-width: 4; stroke-linecap: round; }
.wheel-drag-label { position: absolute; inset: 0; display: grid; place-items: center; color: #bdd0d9; font-size: .57rem; font-weight: 900; letter-spacing: .11em; pointer-events: none; }.degree-mark { position: absolute; color: var(--quiet); font-size: .61rem; font-weight: 800; letter-spacing: .1em; }.degree-top { top: 10px; }.degree-left { left: 0; top: 51%; }.degree-right { right: 0; top: 51%; }
.angle-display { display: grid; justify-items: center; padding: 13px 0 15px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }.angle-display span, .angle-display small { color: var(--muted); font-size: .63rem; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }.angle-display strong { margin: 1px 0; color: var(--teal); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2.25rem; letter-spacing: -.07em; }.angle-display small { color: #b5c5cd; letter-spacing: .06em; }
.range-label { display: flex; justify-content: space-between; margin: 20px 0 8px; color: var(--muted); font-size: .76rem; }.range-label span:last-child { color: var(--teal); font-family: ui-monospace, monospace; }.steering-range { width: 100%; height: 7px; accent-color: var(--teal); cursor: pointer; }.turn-buttons { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 7px; margin-top: 18px; }.secondary-btn, .motion-btn { min-height: 42px; border: 1px solid var(--border); border-radius: 10px; background: #102737; cursor: pointer; font-size: .77rem; font-weight: 750; transition: transform .15s, background .15s, border-color .15s; }.secondary-btn:hover, .motion-btn:hover { transform: translateY(-1px); border-color: rgba(57,214,193,.58); background: #173546; }.secondary-btn:nth-child(2) { color: var(--teal); }.keyboard-tip { margin: 16px 0 0; color: var(--quiet); text-align: center; font-size: .68rem; }kbd { display: inline-grid; place-items: center; min-width: 20px; height: 19px; margin: 0 1px; border: 1px solid var(--border); border-bottom-color: rgba(200,230,238,.38); border-radius: 4px; background: #142837; color: #c8d8df; font: inherit; font-size: .63rem; }
.road-heading { align-items: center; }.path-toggle { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .72rem; font-weight: 700; cursor: pointer; }.path-toggle input { position: absolute; opacity: 0; }.path-toggle span { position: relative; width: 34px; height: 19px; border-radius: 999px; background: #254152; transition: background .15s; }.path-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #9bb1ba; transition: transform .15s, background .15s; }.path-toggle input:checked + span { background: rgba(57,214,193,.35); }.path-toggle input:checked + span::after { transform: translateX(15px); background: var(--teal); }
.road-canvas-wrap { position: relative; min-height: 455px; margin-top: 17px; overflow: hidden; border: 1px solid rgba(128,174,191,.18); border-radius: 15px; background: #07151f; }.road-canvas-wrap::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; box-shadow: inset 0 0 55px rgba(1,7,12,.48); }.road-canvas-wrap canvas { display: block; width: 100%; height: 455px; }.canvas-legend { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 8px 10px; border: 1px solid rgba(159,205,218,.13); border-radius: 8px; background: rgba(8,22,32,.76); backdrop-filter: blur(6px); color: #c1d1d8; font-size: .64rem; }.canvas-legend span { display: flex; align-items: center; gap: 5px; }.legend-line { width: 16px; height: 3px; border-radius: 2px; background: var(--amber); }.rear-line { background: var(--blue); }.legend-dot { width: 8px; height: 8px; border: 2px solid var(--teal); border-radius: 50%; }.motion-indicator { position: absolute; z-index: 2; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(159,205,218,.13); border-radius: 8px; background: rgba(8,22,32,.76); color: var(--muted); font-size: .67rem; }.motion-indicator span { width: 7px; height: 7px; border-radius: 50%; background: #68808d; }.motion-indicator.is-moving { color: #d7e6ea; }.motion-indicator.is-moving span { background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.motion-controls { display: grid; grid-template-columns: 1.15fr 1fr .82fr .72fr; gap: 8px; margin-top: 13px; }.motion-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; }.motion-btn span { font-size: .63rem; }.motion-btn.forward { border-color: rgba(57,214,193,.38); color: var(--teal); }.motion-btn.reverse { border-color: rgba(105,185,255,.30); color: #a6d8ff; }.motion-btn.pause { color: #cad6dc; }.motion-btn.reset { color: var(--amber); }
.telemetry { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 18px 0 62px; }.metric-card { min-height: 112px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(13,32,45,.72); }.metric-card.accent { border-color: rgba(57,214,193,.3); background: linear-gradient(135deg, rgba(57,214,193,.13), rgba(13,32,45,.72)); }.metric-card p { min-height: 30px; margin-bottom: 7px; color: var(--muted); font-size: .7rem; line-height: 1.3; }.metric-card strong { display: block; color: #e9f4f5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.4rem; letter-spacing: -.06em; }.metric-card.accent strong { color: var(--teal); }.metric-card span { display: block; margin-top: 4px; color: var(--quiet); font-size: .65rem; line-height: 1.25; }
.lesson-grid { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 15px; padding: 40px 0 64px; border-top: 1px solid var(--border); }.lesson-copy { padding-right: 28px; }.lesson-copy h2 { margin-bottom: 15px; font-size: clamp(1.75rem, 3vw, 2.7rem); line-height: 1.03; letter-spacing: -.055em; }.lesson-copy p:last-child { color: var(--muted); line-height: 1.65; }.lesson-copy strong { color: var(--amber); }.explain-card { position: relative; padding: 21px 17px 16px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, #0e2130, #0a1722); }.explain-number { display: grid; place-items: center; width: 25px; height: 25px; margin-bottom: 28px; border-radius: 50%; background: rgba(57,214,193,.14); color: var(--teal); font-size: .72rem; font-weight: 900; }.explain-card h3 { margin-bottom: 9px; font-size: .98rem; line-height: 1.22; }.explain-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }.site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 18px 0 36px; border-top: 1px solid var(--border); color: var(--quiet); font-size: .7rem; }.site-footer p { margin: 0; }.site-footer strong { color: #b7cbd3; }
@media (max-width: 1040px) { .simulator-grid { grid-template-columns: .8fr 1.2fr; }.telemetry { grid-template-columns: repeat(3, 1fr); }.lesson-grid { grid-template-columns: repeat(3, 1fr); }.lesson-copy { grid-column: 1 / -1; max-width: 680px; padding-right: 0; } }
@media (max-width: 800px) { .app-shell { width: min(100% - 28px, 680px); }.site-header { min-height: 76px; }.header-note { display: none; }.intro { grid-template-columns: 1fr; gap: 26px; padding: 44px 0 30px; }.simulator-grid { grid-template-columns: 1fr; }.control-panel, .road-panel { padding: 18px; }.wheel-stage { min-height: 282px; }.road-canvas-wrap, .road-canvas-wrap canvas { min-height: 390px; height: 390px; }.telemetry { grid-template-columns: repeat(2, 1fr); margin-bottom: 46px; }.metric-card:last-child { grid-column: span 2; }.lesson-grid { grid-template-columns: 1fr; gap: 10px; padding-top: 32px; }.lesson-copy { grid-column: auto; }.explain-card { padding: 17px; }.explain-number { margin-bottom: 15px; }.site-footer { flex-direction: column; gap: 8px; } }
@media (max-width: 460px) { .app-shell { width: min(100% - 20px, 500px); }.brand { font-size: 1.14rem; }.intro { padding-top: 32px; }.safety-callout { font-size: .81rem; }.degree-left, .degree-right { display: none; }.turn-buttons { grid-template-columns: 1fr 1fr; }.turn-buttons button:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }.road-canvas-wrap, .road-canvas-wrap canvas { min-height: 340px; height: 340px; }.canvas-legend { max-width: 190px; }.motion-controls { grid-template-columns: 1fr 1fr; }.telemetry { gap: 8px; }.metric-card { min-height: 103px; padding: 13px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }