:root {
  color-scheme: dark;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: 22px;
  font-synthesis: none;
  --ink: #f6f3e8;
  --muted: #cfdbd3;
  --accent: #ecd68b;
  --panel: #243d35;
  --danger: #ce483b;
}
* { box-sizing: border-box; letter-spacing: 0; }
html, body, #railway { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #242b29; color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #fff2ac; outline-offset: 4px; }
button:disabled { cursor: default; opacity: .6; }
[hidden] { display: none !important; }
#scene { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#scene:focus-visible { outline: 3px solid #fff2ac; outline-offset: -5px; }
.masthead { position: absolute; top: max(18px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; }
.wordmark { font-size: 26px; font-weight: 700; color: #fffbed; text-shadow: 0 2px 8px #17261acc; white-space: nowrap; }
.wordmark span { font-size: 20px; font-weight: 500; color: #e4edd9; margin-left: 12px; }
.view-tools { display: flex; gap: 8px; pointer-events: auto; }
.camera-tools, .utility-tools { display: flex; gap: 8px; }
.icon-button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; background: #21352cce; border: 1px solid #e3edd344; color: #fffbea; border-radius: 4px; font-size: 32px; line-height: 1; box-shadow: 0 2px 8px #18241b33; }
.icon-button:hover, .icon-button[aria-pressed="true"] { background: #48674bef; border-color: #e3edd3a8; }
.view-button { display: flex; gap: 7px; width: auto; padding: 0 12px; font-size: 22px; }
.view-button span[aria-hidden] { font-size: 27px; }
.camera-tools .icon-button { min-width: 44px; min-height: 44px; }
.sound-button { font-size: 27px; }
.sound-button.view-button { font-size: 22px; }
#sound-panel { position: fixed; z-index: 50; top: 80px; right: max(24px, env(safe-area-inset-right)); width: min(380px, calc(100% - 26px)); max-height: calc(100dvh - 100px); overflow: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid #abbfaf; border-radius: 6px; background: #203d32fa; box-shadow: 0 8px 26px #10251b80; font-size: 22px; }
.sound-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.sound-heading h2 { margin: 0; font-size: 24px; font-weight: 600; }
.sound-heading .icon-button { width: 44px; height: 44px; box-shadow: none; }
.sound-master { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; position: relative; }
.sound-master > span:first-child { margin-right: auto; }
.sound-master input { position: absolute; right: 0; width: 56px; height: 36px; opacity: 0; cursor: pointer; }
.sound-switch { width: 56px; height: 32px; border: 1px solid #bbccc0; border-radius: 16px; background: #152920; padding: 3px; pointer-events: none; }
.sound-switch::before { content: ''; display: block; width: 24px; height: 24px; border-radius: 50%; background: #c9d6cc; transition: transform 120ms; }
.sound-master input:checked + .sound-switch { background: #829954; border-color: #dbe6b2; }
.sound-master input:checked + .sound-switch::before { transform: translateX(23px); background: #fff3c3; }
.sound-master input:focus-visible + .sound-switch { outline: 3px solid #fff2ac; outline-offset: 4px; }
.sound-level { display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: 4px 12px; margin-top: 15px; }
.sound-level output { text-align: right; font-variant-numeric: tabular-nums; color: #f0d98f; }
.sound-level input { grid-column: 1 / -1; width: 100%; min-width: 0; height: 38px; margin: 0; accent-color: #e1c577; cursor: pointer; }
.sound-footer { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 14px; }
#sound-status { color: #cfdbd3; font-size: 22px; overflow-wrap: anywhere; }
#train-whistle { flex-shrink: 0; min-height: 46px; padding: 6px 12px; border: 1px solid #d2e0be65; border-radius: 4px; background: #3b7255; color: #fffbe7; font-size: 22px; }
#tooltip { position: fixed; z-index: 20; pointer-events: none; padding: 8px 13px; background: #172b23f5; border: 1px solid #d9dec176; color: #fffbe9; font-size: 22px; line-height: 1.3; border-radius: 4px; max-width: min(360px, calc(100vw - 24px)); box-shadow: 0 3px 16px #06130b33; }
#notice { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 40px); padding: 8px 16px; color: #fffce9; text-align: center; font-size: 22px; line-height: 1.3; background: #1b3027e8; border-radius: 4px; opacity: 0; transition: opacity 180ms; pointer-events: none; z-index: 10; }
#notice.visible { opacity: 1; }
#boot { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; background: #263e33; text-align: center; }
.boot-name { font-size: 44px; font-weight: 700; }
#boot p { font-size: 23px; line-height: 1.5; max-width: 760px; }
#boot-detail { color: #efe3be; overflow-wrap: anywhere; }
.boot-track { width: min(300px, 75vw); height: 8px; border-block: 2px solid #b4c2ac; }
.boot-track span { display: block; width: 55px; height: 12px; margin-top: -4px; background: #e9c264; animation: rail-loading 1.6s ease-in-out infinite alternate; }
#boot.failed .boot-track { display: none; }
#boot-retry { background: #e8d398; color: #243b31; padding: 10px 24px; border: 0; border-radius: 4px; font-size: 22px; }
.noscript { position: fixed; left: 10%; right: 10%; top: 40%; font-size: 26px; text-align: center; }
@keyframes rail-loading { to { transform: translateX(240px); } }
#accessible-controls { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); bottom: 0; left: 0; }
#accessible-controls:focus-within, #accessible-controls.compact { width: 100%; height: auto; min-height: 236px; overflow: visible; clip-path: none; z-index: 30; padding: 8px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 5px solid #aa8253; background: #244438f5; box-shadow: 0 -3px 12px #142c2a66; }
.control-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.control-tabs { display: flex; gap: 2px; margin-right: auto; }
.control-tabs button, .mode-button { border: 1px solid #d4dfc963; border-radius: 3px; background: #132d24; color: #fffbed; font-size: 22px; min-height: 44px; padding: 4px 12px; }
.control-tabs button[aria-selected="true"] { background: #dace97; color: #243d31; border-color: #e8dca7; }
.mode-button { color: #f3e4a2; min-width: 82px; padding-inline: 10px; }
.stop-button { width: 47px; height: 47px; border: 4px solid #eab3a7; border-radius: 50%; background: #b83329; color: #fff; font-size: 23px; line-height: 1; }
.stop-button[aria-pressed="true"] { background: #691d18; border-color: #fff0cf; box-shadow: inset 0 3px 7px #250000; }
.train-bank { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .75fr); gap: 18px; align-items: end; }
.throttles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.throttle { display: grid; grid-template-rows: 32px 80px 29px; justify-items: center; align-items: center; min-width: 0; }
.train-select { border: 0; background: none; color: #faf6e3; font-size: 22px; padding: 2px 5px; min-height: 32px; max-width: 100%; border-bottom: 3px solid transparent; }
.train-select[aria-pressed="true"] { color: #fff0b5; border-color: #f6d475; }
.throttle input { appearance: none; writing-mode: vertical-lr; direction: rtl; width: 44px; height: 76px; background: transparent; margin: 0; cursor: ns-resize; }
.throttle input::-webkit-slider-runnable-track { width: 10px; background: #13271f; border: 1px solid #afc6a66b; border-radius: 3px; }
.throttle input::-webkit-slider-thumb { appearance: none; width: 38px; height: 19px; margin-left: -15px; border: 2px solid #ffe9a5; border-radius: 4px; background: #cba657; box-shadow: 0 2px 3px #08140c; }
.throttle output { font-size: 22px; color: #e3efd8; font-variant-numeric: tabular-nums; }
.dispatch-bank { display: grid; gap: 8px; }
.destination { width: 100%; min-height: 45px; font-size: 22px; border-radius: 3px; padding: 3px 6px; color: #fff6cf; background: #173127; border: 1px solid #c4d2ac6b; }
.dispatch-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dispatch-buttons button, .job-button { min-height: 47px; border: 1px solid #d2e0be65; border-radius: 4px; padding: 5px 9px; background: #3b7255; color: #fffbe7; font-size: 22px; }
.dispatch-buttons .hold-button { background: #795135; }
.dispatch-buttons .hold-button[aria-pressed="true"] { background: #af7638; border-color: #ffe0a0; }
.selected-status { min-height: 27px; text-align: center; color: #f0d98f; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.works-bank { display: grid; gap: 13px; }
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.job-button { background: #345c51; min-height: 66px; line-height: 1.15; }
.job-button.running { border-color: #e2c67b; color: #fff0a8; }
.job-button.waiting { background: #6a5631; }
.environment-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.environment-controls button { border: 1px solid #c4d2ac6b; border-radius: 3px; background: #173127; color: #fff7d3; min-height: 47px; font-size: 22px; }
.environment-controls button[aria-pressed="true"] { color: #ffdb7a; }
@media (max-width: 1100px) {
  #accessible-controls.compact { height: 260px; }
  .masthead { top: max(10px, env(safe-area-inset-top)); left: max(13px, env(safe-area-inset-left)); right: max(13px, env(safe-area-inset-right)); }
  .wordmark { font-size: 24px; }
  .wordmark span { display: none; }
  .view-tools, .camera-tools, .utility-tools { gap: 6px; }
  .icon-button { width: 43px; height: 43px; }
  .view-button { width: auto; }
  .train-bank { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .throttle { grid-template-rows: 31px 67px 28px; }
  .throttle input { height: 62px; }
  .dispatch-bank { grid-template-columns: minmax(0, 1fr) 147px; gap: 7px; }
  .selected-status { display: none; }
  .dispatch-buttons { gap: 6px; }
  .dispatch-buttons button { padding-inline: 4px; }
  #notice { top: 65px; font-size: 22px; }
}
@media (max-width: 760px) {
  .masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .wordmark { grid-column: 1; grid-row: 1; }
  .view-tools { display: contents; }
  .utility-tools { grid-column: 2; grid-row: 1; pointer-events: auto; }
  .camera-tools { grid-column: 1 / -1; grid-row: 2; justify-self: end; pointer-events: auto; }
  #notice { top: 110px; }
  #sound-panel { top: 110px; right: max(13px, env(safe-area-inset-right)); max-height: calc(100dvh - 126px); }
}
@media (max-width: 450px) {
  .wordmark { font-size: 22px; }
  .view-tools { gap: 4px; }
  .icon-button { width: 40px; height: 40px; }
  .view-button { width: auto; padding-inline: 10px; }
  .control-tabs button, .mode-button { padding-inline: 8px; }
  .control-nav { gap: 6px; }
  .train-select { font-size: 22px; padding-inline: 0; }
  .throttles { gap: 4px; }
  .destination { font-size: 22px; }
}
@media (max-width: 1100px) and (max-height: 560px) and (orientation: landscape) {
  #accessible-controls.compact, #accessible-controls:focus-within { min-height: 142px; height: 142px; padding-top: 6px; }
  .control-nav { width: 166px; height: 119px; flex-wrap: wrap; align-content: center; gap: 8px; margin: 0; }
  .control-tabs { width: 100%; }
  .control-tabs button { flex: 1; }
  .control-bank { position: absolute; left: 190px; right: 12px; top: 9px; overflow-x: auto; overscroll-behavior-x: contain; }
  .train-bank { grid-template-columns: minmax(330px, 1fr) minmax(180px, .55fr); gap: 8px; }
  .throttles { gap: 6px; }
  .train-select { padding-inline: 0; }
  .throttle { grid-template-rows: 30px 61px 25px; }
  .throttle input { height: 56px; }
  .dispatch-bank { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .works-bank { display: grid; grid-template-columns: minmax(330px, 1fr) 140px; gap: 12px; }
  .jobs { gap: 8px; }
  .job-button { min-height: 100px; }
  .environment-controls { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 360px) {
  .sound-button span:not([aria-hidden]) { display: none; }
  .sound-button.view-button { width: 44px; justify-content: center; padding: 0; }
  .camera-tools { gap: 4px; }
  .camera-tools .view-button { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-track span { animation: none; }
  #notice { transition: none; }
  .sound-switch::before { transition: none; }
}