:root {
  color-scheme: light;
  font-family: Inter, system-ui, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", sans-serif;
  --canvas: #f7f7f4;
  --canvas-soft: #fafaf7;
  --card: #ffffff;
  --surface-strong: #e6e5e0;
  --hairline: #e6e5e0;
  --hairline-soft: #efeee8;
  --hairline-strong: #cfcdc4;
  --ink: #26251e;
  --body: #5a5852;
  --muted: #807d72;
  --muted-soft: #a09c92;
  --primary: #f54e00;
  --primary-active: #d04200;
  --success: #1f8a65;
  --error: #cf2d56;
  background: var(--canvas);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
button, input { font: inherit; }
button { color: var(--ink); border: 1px solid var(--hairline-strong); background: var(--card); border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: 14px; font-weight: 500; }
button:active { background: var(--hairline-soft); }
button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
button:disabled { opacity: .38; cursor: not-allowed; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 400; letter-spacing: -.72px; line-height: 1.2; }
h2 { font-size: 1rem; font-weight: 650; }
.eyebrow { display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.desktop-shell { width: min(1480px, 100%); margin: 0 auto; padding: 20px; }
.topbar, .controller-head, .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar { margin-bottom: 14px; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.mode-switch { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--card); }
.mode-switch button { padding: 8px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--body); font-size: 12px; }
.mode-switch button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.practice-picker { display: grid; gap: 3px; color: var(--muted); font-size: .62rem; }
.practice-picker select { min-width: 142px; padding: 7px 30px 7px 9px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: .75rem; }
.practice-picker select:disabled { opacity: .48; }
.connection { color: var(--muted); font-size: .86rem; }
.connection span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #8c9790; margin-right: 7px; }
.connection.connected span { background: var(--success); box-shadow: none; }
.simulation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.drive-screen { position: relative; aspect-ratio: 16/9; min-height: 380px; overflow: hidden; border: 1px solid var(--hairline-strong); border-radius: 12px; background: #7898aa; box-shadow: none; }
#road { width: 100%; height: 100%; display: block; cursor: default; touch-action: none; }
#road.steering-hover { cursor: grab; }
#road.steering-grabbed { cursor: grabbing; }
.scene-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--canvas); color: var(--body); z-index: 4; transition: opacity .35s ease; }
.scene-loading.done { opacity: 0; pointer-events: none; }
.sim-side-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; overflow: visible; }
.side-card { min-width: 0; padding: 10px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--card); }
.side-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.side-card-head button { padding: 6px 10px; font-size: .72rem; }
.hud { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.hud > div { min-width: 0; padding: 7px 8px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--canvas-soft); color: var(--ink); }
.hud small { color: var(--muted); display: block; font-size: .7rem; }
.hud strong { font-size: 1.12rem; margin-right: 3px; }
.hud b { display: block; margin-top: 2px; font-size: .76rem; }
.hud #parking-status { grid-column: 1 / -1; }
.hud span { color: var(--body); font-size: .78rem; }
.drive-checklist { grid-column: 1 / -1; color: var(--ink); }
.drive-checklist > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.drive-checklist small { color: var(--muted); font-size: .62rem; }
.drive-checklist strong { font-size: .82rem; }
.drive-checklist ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 6px; margin: 7px 0 0; padding: 0; list-style: none; }
.drive-checklist li { min-width: 0; padding: 3px 5px; border-left: 2px solid var(--hairline); color: var(--body); font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drive-checklist li::before { content: "□"; margin-right: 6px; }
.drive-checklist li.done { color: var(--muted); text-decoration: line-through; }
.drive-checklist li.done::before { content: "✓"; color: var(--success); text-decoration: none; }
.drive-checklist li.current { border-left-color: var(--primary); background: #fff4ee; color: var(--ink); }
.drive-checklist p { margin: 7px 0 0; color: var(--primary); font-size: .68rem; line-height: 1.35; }
.drive-checklist .route-order { display: grid; justify-content: stretch; gap: 3px; margin: -1px -1px 8px; padding: 7px; border: 1px solid #f0c6b2; border-radius: 7px; background: #fff4ee; }
.drive-checklist .route-order strong { line-height: 1.4; }
.drive-checklist.compact { min-width: 0; }
.drive-checklist.compact ol { display: none; }
.signal-view { position: absolute; left: 50%; bottom: 24%; z-index: 3; width: 110px; display: flex; justify-content: space-between; transform: translateX(-50%); padding: 3px 10px; border: 1px solid #70766e99; border-radius: 999px; background: #121612d9; pointer-events: none; }
.signal-view span { min-width: 28px; border-radius: 999px; opacity: .12; color: #63ed77; font-size: 1.28rem; font-weight: 800; line-height: 1; text-align: center; }
.signal-view span.active { opacity: 1; background: #2d7438; text-shadow: 0 0 9px #37f45c; animation: indicator-blink .72s steps(1) infinite; }
@keyframes indicator-blink { 50% { opacity: .55; text-shadow: none; } }
.semantic-legend { position: absolute; top: 62px; right: 18px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 9px 11px; border: 1px solid var(--hairline-strong); border-radius: 8px; background: #f7f7f4eb; color: var(--ink); font-size: .68rem; }
.semantic-legend[hidden] { display: none; }
.semantic-legend span { display: flex; align-items: center; gap: 5px; }
.semantic-legend i { width: 10px; height: 10px; border-radius: 2px; }
.semantic-legend .road { background: #808080; }
.semantic-legend .marking { background: #f5f5f5; }
.semantic-legend .forbidden { background: #5c2626; }
.semantic-legend .tree { background: #3c9630; }
.display-panel { grid-column: 1 / -1; }
.view-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.view-controls button { min-width: 0; padding: 8px 7px; background: var(--card); color: var(--ink); font-size: .72rem; }
.view-controls button:last-child { grid-column: 1 / -1; }
.keyboard-panel > summary { cursor: pointer; list-style: none; }
.keyboard-panel > summary::-webkit-details-marker { display: none; }
.keyboard-panel > summary::after { content: "開く ＋"; margin-left: auto; color: var(--muted); font-size: .72rem; }
.keyboard-panel[open] > summary::after { content: "閉じる −"; }
.keyboard-panel[open] .keyboard-map { margin-top: 14px; }
.keyboard-note { color: var(--muted); font-size: .72rem; }
.overhead-guide-frame { overflow: hidden; }
.overhead-guide-frame .side-card-head { margin: 0 0 8px; }
.overhead-guide-frame #overhead-road { width: 100%; aspect-ratio: 10/7; display: block; border: 1px solid var(--hairline-strong); border-radius: 8px; background: #7898aa; }
.overhead-guide-frame #overhead-road[hidden] { display: none; }
.overhead-guide-frame.collapsed .side-card-head { margin-bottom: 0; }
.source-strip { margin-top: 7px; }
.source-note { color: var(--muted); font-size: .62rem; line-height: 1.4; }
.source-note a { color: var(--ink); }
.keyboard-panel { margin-top: 14px; }
.last-key { color: var(--muted); font-size: .76rem; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.last-key b { color: var(--ink); font-weight: 600; }
.keyboard-map { display: grid; gap: 7px; padding: 15px; overflow-x: auto; border: 1px solid var(--hairline); border-radius: 12px; background: var(--canvas-soft); }
.keyboard-row { min-width: 1080px; display: grid; grid-template-columns: 1.35fr repeat(13, 1fr); gap: 6px; align-items: end; }
.keyboard-key { position: relative; min-width: 0; min-height: 64px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px; padding: 8px; border: 1px solid var(--hairline-strong); border-bottom-width: 3px; border-radius: 6px; background: var(--card); color: var(--ink); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; transition: transform 70ms ease, background 70ms ease; }
.keyboard-key b { font-size: .82rem; }
.keyboard-key small { color: var(--muted); font-size: .56rem; }
.keyboard-key .key-action, .arrow-cluster .key-action { position: absolute; left: 5px; right: 5px; top: 5px; min-height: 25px; display: grid; place-items: center; padding: 3px; border-radius: 4px; background: var(--ink); color: var(--canvas); font-size: .58rem; font-weight: 600; line-height: 1.1; text-align: center; white-space: nowrap; }
.keyboard-key.ghost { opacity: .48; min-height: 48px; background: var(--canvas-soft); }
.keyboard-key.mapped { border-color: var(--hairline-strong); background: var(--card); }
.keyboard-key.steering-key .key-action { background: var(--ink); }
.keyboard-key.key-shift { grid-column: span 2; }
.keyboard-key.key-control, .keyboard-key.key-eisu, .keyboard-key.key-kana { grid-column: span 2; }
.keyboard-key.key-space { grid-column: span 4; }
.bottom-row { grid-template-columns: repeat(17, 1fr); }
.arrow-cluster { position: relative; grid-column: span 3; min-height: 70px; display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: 1fr 1fr; justify-content: center; align-items: end; gap: 3px; padding-top: 29px; }
.arrow-cluster .key-action { top: 0; }
.arrow-cluster kbd { min-height: 28px; display: grid; place-items: center; border: 1px solid var(--hairline-strong); border-bottom-width: 3px; border-radius: 5px; background: var(--card); color: var(--ink); }
.arrow-cluster kbd:first-of-type { grid-column: 2; }
.arrow-cluster kbd:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.arrow-cluster kbd:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.arrow-cluster kbd:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.arrow-cluster.pressed kbd { transform: translateY(2px); border-bottom-width: 1px; background: var(--primary); color: #fff; }
.keyboard-key.pressed { transform: translateY(2px); border-bottom-width: 1px; background: var(--primary); color: #fff; }
.adjustment-console { grid-column: 1 / -1; display: grid; gap: 7px; }
.adjustment-console .side-card-head { margin-bottom: 0; }
.adjustment-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.adjustment-buttons button { min-width: 0; padding: 8px 5px; font-size: .68rem; }
.adjustment-buttons button:nth-last-child(-n + 2) { grid-column: span 1; }
.adjustment-buttons button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.adjustment-readout { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; padding: 7px 9px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--canvas-soft); }
.adjustment-readout small { grid-column: 1 / -1; }
.adjustment-readout span, .adjustment-readout small { color: var(--muted); font-size: .68rem; }
.adjustment-readout b { color: var(--ink); }
.lower-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.panel { padding: 20px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); }
.panel-head { margin-bottom: 13px; }
.panel-head button { padding: 7px 11px; font-size: .82rem; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; }
.check-grid div { min-width: 0; padding: 7px 8px; border: 1px solid var(--hairline-soft); border-radius: 7px; background: var(--canvas-soft); color: var(--body); font-size: .66rem; }
.check-grid b { display: block; margin-top: 4px; color: var(--ink); }
.check-grid small { display: block; margin-top: 2px; color: var(--muted); font-size: .56rem; }
.check-grid b.outside { color: var(--error); }
#events { margin: 12px 0 0; padding-left: 22px; color: var(--body); }
#events li { padding: 3px 0; }
#events .empty { color: var(--muted); }

.controller-page { touch-action: manipulation; user-select: none; }
.controller-shell { width: min(520px, 100%); min-height: 100vh; margin: 0 auto; padding: 16px; display: grid; gap: 12px; }
.controller-head { padding: 2px 2px 8px; }
.controller-connection { color: #9eb4a4; font-size: .78rem; }
.controller-connection.ok { color: #65dc89; }
.steering-area { padding: 16px; display: grid; gap: 10px; justify-items: stretch; border: 1px solid #35493d; border-radius: 16px; background: #17221bde; }
.steering-area label { display: flex; justify-content: space-between; color: #c9d5cc; }
.wheel { width: 122px; height: 122px; margin: 0 auto 2px; border: 10px solid #e1e8e3; border-radius: 50%; position: relative; transition: transform 70ms linear; }
.wheel::before, .wheel::after, .wheel i { content: ""; position: absolute; background: #e1e8e3; border-radius: 4px; }
.wheel::before { width: 8px; height: 59px; left: 47px; top: 4px; }
.wheel::after { width: 70px; height: 8px; left: 16px; top: 47px; }
.wheel i { width: 30px; height: 30px; left: 36px; top: 36px; border-radius: 50%; }
#steering { width: 100%; accent-color: #d28c27; }
.secondary { background: #26372d; }
.signal-buttons, .check-buttons, .pedal-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hazard-button { background: #5a381d; border-color: #b47734; }
.drive-controls { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.gear-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 5px; border: 1px solid #3d5144; border-radius: 14px; background: #17221b; }
.gear-selector button { min-width: 0; padding: 12px 6px; font-weight: 700; }
.pedal-buttons button { min-height: 110px; font-weight: 700; font-size: 1.05rem; }
.brake { background: #5b2927; border-color: #98504a; }
.accelerator { background: #1e6b3d; border-color: #48a66b; }
.pedal-buttons button.pressed { filter: brightness(1.35); transform: translateY(2px); }
.touch-note { color: #94a399; text-align: center; font-size: .78rem; padding-bottom: 8px; }

/* Cursor-inspired editorial surface for the Android controller. */
.controller-page { background: var(--canvas); color: var(--ink); }
.controller-connection { color: var(--muted); }
.controller-connection.ok { color: var(--success); }
.steering-area { border-color: var(--hairline); border-radius: 12px; background: var(--card); }
.steering-area label { color: var(--body); }
.wheel { border-color: var(--ink); }
.wheel::before, .wheel::after, .wheel i { background: var(--ink); }
#steering { accent-color: var(--primary); }
.secondary { background: var(--card); }
.hazard-button { background: var(--card); border-color: var(--hairline-strong); }
.gear-selector { border-color: var(--hairline); border-radius: 12px; background: var(--canvas-soft); }
.brake, .accelerator { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.pedal-buttons button.pressed { background: var(--primary); border-color: var(--primary); filter: none; }
.touch-note { color: var(--muted); }
@media (max-width: 980px) {
  .simulation-layout { grid-template-columns: 1fr; }
  .sim-side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .desktop-shell { padding: 10px; }
  .drive-screen { min-height: 280px; }
  .sim-side-panel { grid-template-columns: 1fr; }
  .lower-grid { grid-template-columns: 1fr; }
  .topbar, .top-actions { align-items: flex-start; }
  .top-actions { flex-direction: column-reverse; }
  .mode-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .keyboard-map { margin-inline: -6px; padding: 10px; }
}