:root {
    color-scheme: dark;
    --shell: #292d30;
    --shell-edge: #53585a;
    --panel: #202427;
    --panel-edge: #444a4c;
    --ink: #d9d8c9;
    --muted: #91958f;
    --green: #16f3c3;
    --green-dim: #0c7667;
    --blue: #91c9ec;
    --yellow: #f3df28;
    --red: #e82e43;
    --font-ui: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-data: "IBM Plex Mono", Consolas, monospace;
}

* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: #111417;
    font-family: var(--font-ui);
    letter-spacing: .025em;
}

button {
    font: inherit;
    color: inherit;
}

.workbench {
    min-height: 100vh;
    padding: clamp(18px, 5vh, 58px) clamp(12px, 4vw, 56px) 36px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(85, 101, 101, .17), transparent 52%),
        repeating-linear-gradient(0deg, transparent 0 49px, rgba(196, 213, 203, .025) 50px),
        #111417;
}

.video-deck {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 auto 15px;
}

.video-screen {
    position: relative;
    min-width: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #4b5557;
    background: #05090a;
    box-shadow: inset 0 0 20px #000, 0 3px 10px #0009;
}

.video-screen video {
    display: block;
    width: 100%;
    height: 100%;
    background: #05090a;
    object-fit: contain;
}

.ad-audio-toggle {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #73817e;
    border-radius: 3px;
    background: #111c;
    color: #e4efec;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
    cursor: pointer;
}

.video-screen.has-ad-audio:hover .ad-audio-toggle,
.video-screen.has-ad-audio:focus-within .ad-audio-toggle {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.video-screen:not(.has-ad-audio) .ad-audio-toggle {
    display: none;
}

.ad-audio-toggle svg {
    width: 20px;
    height: 20px;
}

.ad-audio-toggle[aria-pressed="true"] .audio-waves,
.ad-audio-toggle:not([aria-pressed="true"]) .audio-muted {
    display: none;
}

.ad-audio-toggle[aria-pressed="true"] {
    border-color: #35d9bd;
    color: #8fffe9;
}

.video-screen-label,
.video-screen-placeholder {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    font: 10px var(--font-data);
    color: #9ba9a4;
    text-shadow: 0 1px 4px #000;
}

.video-screen-label {
    top: 8px;
    left: 10px;
    letter-spacing: .08em;
}

.video-screen-placeholder {
    inset: 0;
    display: grid;
    place-items: center;
    color: #58635f;
    transition: opacity .2s ease;
}

.video-screen.is-playing .video-screen-placeholder {
    opacity: 0;
}

.vfd-panel {
    position: relative;
    width: min(1180px, 100%);
    margin: 0 auto 15px;
    min-height: 120px;
    padding: 10px 18px;
    border: 1px solid #4b5557;
    background: #11161a;
    box-shadow: inset 0 0 18px #000, 0 3px 10px #0009;
    overflow: hidden;
}

.vfd-panel video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100px;
    background: #05090a;
    object-fit: contain;
}

.vfd-label,
.vfd-placeholder {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    font: 10px var(--font-data);
    color: #9ba9a4;
    text-shadow: 0 1px 4px #000;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vfd-label {
    top: 8px;
    left: 10px;
}

.vfd-placeholder {
    inset: 0;
    display: grid;
    place-items: center;
    color: #58635f;
    transition: opacity .2s ease;
}

.vfd-panel.is-playing .vfd-placeholder {
    opacity: 0;
}

.console {
    width: min(1180px, 100%);
    padding: 17px;
    border: 1px solid #697174;
    border-radius: 19px;
    background: linear-gradient(145deg, #42484b, #1a1e21 17%, #272b2e 84%, #101316);
    box-shadow: 0 25px 70px #0009, inset 0 1px 1px #ffffff2a, inset 0 -5px 8px #0009;
    position: relative;
}

.console::before,
.console::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    height: 5px;
    border-radius: 50%;
    background: #a5adae;
    opacity: .42;
    filter: blur(2px);
}

.console::before {
    top: 4px;
}

.console::after {
    bottom: 4px;
}

.faceplate {
    position: relative;
    padding: 15px 18px 12px;
    border: 1px solid #62686a;
    border-radius: 10px;
    background:
        linear-gradient(130deg, rgba(255, 255, 255, .025), transparent 22%),
        #1d2124;
    box-shadow: inset 0 2px 8px #0009, 0 1px 0 #ffffff20;
}

.topbar {
    min-height: 45px;
    display: grid;
    grid-template-columns: 1fr minmax(250px, 1.15fr) 1fr;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #474d4e;
}

.section-label,
.small-label {
    color: #d0d1c6;
    font-size: 15px;
    line-height: 1.1;
    text-transform: uppercase;
}

.section-label {
    text-align: center;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    white-space: nowrap;
}

.brand-mark {
    display: block;
    width: 76px;
    height: 22px;
    object-fit: contain;
}

.brand-name {
    font: 500 18px var(--font-ui);
    color: #c8c9bd;
}

.top-right {
    text-align: right;
}

.console-grid {
    display: grid;
    grid-template-columns: minmax(310px, 1fr) minmax(270px, .91fr) minmax(245px, .86fr);
    gap: 21px;
    padding: 18px 0 15px;
    align-items: start;
}

.control-column {
    min-width: 0;
}

.section-heading {
    min-height: 25px;
    margin-bottom: 9px;
    color: #cfcec0;
    font-size: 14px;
    text-transform: uppercase;
}

.scenario-list {
    display: grid;
    gap: 9px;
}

.route-area {
    display: grid;
    grid-template-columns: repeat(3, minmax(50px, 1fr));
    gap: 7px;
    align-items: start;
}

.route-code {
    padding: 5px 7px;
    background: #e2d3a0;
    color: #262820;
    font: 600 12px/1.1 var(--font-data);
    box-shadow: inset 0 0 0 1px #fff5;
}

.route-code span {
    display: block;
}

.control-stack {
    display: grid;
    justify-items: center;
    gap: 4px;
}

.control-caption {
    color: #c6c7ba;
    text-align: center;
    font-size: 15px;
    line-height: 1.05;
}

.direction-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(50px, 1fr));
    gap: 7px;
    align-items: center;
    margin: 7px 0 0;
}

.direction-controls .down-control {
    grid-column: 2;
}

.direction-controls .ride-control {
    grid-column: 3;
}

.round-control {
    display: grid;
    place-items: center;
    width: 46px;
    aspect-ratio: 1;
    border: 2px solid #90c4e4;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 32%, #343a3d, #101416 72%);
    color: var(--yellow);
    text-shadow: 0 0 8px #f3df28a6;
    font-size: 22px;
    cursor: pointer;
    box-shadow: inset 0 2px 4px #ffffff25, 0 2px 3px #000a;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.round-control:hover {
    transform: translateY(-2px);
    border-color: #dcf5ff;
}

.round-control:active {
    transform: translateY(1px);
}

.round-control:focus-visible,
.action-control:focus-visible,
.scenario-button:focus-visible,
.lever:focus-visible,
.download:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}

.round-control.selected {
    color: #fff;
    background: #17665a;
    box-shadow: 0 0 13px #08dbbb72, inset 0 1px 4px #ffffff4a;
}

.mode-control {
    font: 600 23px var(--font-data);
    color: #d9f6ff;
}

.route-note {
    margin: 3px 0 0 11px;
    color: var(--muted);
    font: 11px var(--font-data);
    text-align: center;
}

.center-column {
    display: grid;
    justify-items: center;
}

.lcd {
    width: 100%;
    height: 108px;
    padding: 13px 12px 10px;
    overflow: hidden;
    border: 5px solid #343c3b;
    border-radius: 3px;
    background-color: #033d37;
    background-image: repeating-linear-gradient(90deg, transparent 0 6px, #ffffff09 7px), repeating-linear-gradient(0deg, transparent 0 7px, #ffffff0b 8px);
    box-shadow: inset 0 0 17px #000, 0 0 15px #00a99429;
    color: #c6fff3;
    font: 600 clamp(13px, 1.55vw, 18px)/1.35 var(--font-data);
    text-align: center;
    text-shadow: 0 0 7px #19ffe4;
}

.lcd-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lcd-line.primary {
    font-size: 1.07em;
}

.lcd-line.distance {
    color: #a4ffe9;
}

.center-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 16px;
}

.action-control {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.action-disc {
    width: 46px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 2px solid #91c9ec;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 33%, #3b4143, #101315 70%);
    box-shadow: inset 0 2px 5px #ffffff27, 0 2px 4px #000a;
    font-size: 20px;
}

.action-control.enter .action-disc {
    color: #ff3552;
}

.action-control.stop .action-disc {
    color: #3ef1d1;
}

.action-control.active .action-disc {
    box-shadow: 0 0 0 2px #12e5bf80, 0 0 14px #12e5bf80, inset 0 2px 5px #ffffff27, 0 2px 4px #000a;
}

.action-control.enter .control-caption {
    color: #edb1b4;
}

.download-row {
    display: grid;
    justify-items: center;
    margin-top: 18px;
}

.download {
    width: 92px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 4px solid #5a5141;
    border-radius: 7px;
    background: linear-gradient(#d8c997, #8f8465);
    color: #202323;
    cursor: pointer;
    box-shadow: 0 3px 6px #000b, inset 0 1px 2px #fff9;
}

.download span {
    width: 64px;
    height: 22px;
    border: 1px solid #1c2020;
    border-radius: 4px;
    background: radial-gradient(#111 2px, transparent 3px) 0 0 / 13px 12px, #d7d1bd;
}

.download-caption {
    margin-top: 4px;
    font-size: 15px;
}

.lever-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.lever-label {
    color: #e0dfcf;
    font: 600 14px var(--font-ui);
}

.lever {
    position: relative;
    width: 50px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at 44% 40%, #c3b99a 0 12%, #635f52 38%, #292d2c 68%);
    cursor: pointer;
    box-shadow: 0 2px 6px #000a, inset 0 2px 2px #ffffff44;
}

.lever::after {
    content: "↖";
    position: absolute;
    inset: 6px;
    display: grid;
    place-items: center;
    border: 1px solid #8c897c;
    border-radius: 50%;
    background: radial-gradient(#828175, #393d3d 70%);
    color: #f0e6c9;
    font-size: 19px;
    text-shadow: 0 1px 2px #000;
    transition: transform .18s ease;
}

.lever.reverse::after {
    transform: scaleX(-1);
}

.scenario-column {
    border-left: 1px solid #42484a;
    padding-left: 18px;
}

.scenario-title {
    text-align: center;
    margin-bottom: 10px;
}

.scenario-list {
    display: grid;
    gap: 9px;
}

.scenario-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(40px, 1fr));
    align-items: center;
    gap: 9px;
}

.scenario-name {
    grid-column: 2 / -1;
    margin-top: -7px;
    color: #c8c8bb;
    font-size: 14px;
    text-align: center;
}

.scenario-name:first-child {
    grid-column: auto;
}

.scenario-button {
    width: 43px;
    aspect-ratio: 1;
    justify-self: center;
    border: 2px solid #8fc6e7;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, #343a3d, #101416 72%);
    color: #e9f4f1;
    font: 600 18px var(--font-data);
    cursor: pointer;
    box-shadow: inset 0 2px 4px #ffffff24, 0 2px 4px #000a;
    transition: .13s ease;
}

.scenario-button:hover {
    border-color: #e1f8ff;
    transform: translateY(-2px);
}

.scenario-button:disabled {
    border-color: #4a5560;
    color: #7d858c;
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(1);
}

.scenario-button:disabled:hover {
    border-color: #4a5560;
    transform: none;
}

.scenario-button[aria-pressed="true"] {
    border-color: #e1e532;
    color: #fff;
    box-shadow: 0 0 12px #d8e6256b, inset 0 0 9px #b9d51f40;
}

.scenario-label {
    grid-column: 1 / -1;
    margin: -6px 0 1px;
    color: #c4c5b9;
    text-align: center;
    font-size: 14px;
}

.statusbar {
    min-height: 61px;
    display: grid;
    grid-template-columns: 1.1fr repeat(7, minmax(48px, .7fr)) 1.1fr;
    gap: 5px;
    align-items: end;
    padding-top: 9px;
    border-top: 1px solid #414748;
}

.status-item {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 5px;
    color: #c5c7bb;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}

.status-light {
    width: 16px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #344340;
    box-shadow: inset 0 1px 4px #000, 0 0 4px #000;
    transition: background .2s, box-shadow .2s;
}

.status-light.on {
    background: #d9ed14;
    box-shadow: 0 0 13px #c9ff10a8, inset 0 1px 3px #fff8;
}

.status-light.red {
    background: #ed2845;
    box-shadow: 0 0 12px #ff214c9e;
}

.status-light.green {
    background: #53e999;
    box-shadow: 0 0 12px #39ff9566;
}

.status-light.blue {
    background: #42b5ed;
    box-shadow: 0 0 12px #42b5ed66;
}

.indicator-box {
    width: min(100%, 100px);
    height: 29px;
    border: 3px solid #343a3b;
    background: #111718;
    box-shadow: inset 0 0 8px #000;
}

.indicator-box.sd {
    height: 19px;
    border-color: #2c373a;
    background: linear-gradient(#0b1215, #142329);
}

.indicator-box.sd.empty::after {
    display: none;
}

.indicator-box.sd::after {
    content: "";
    display: block;
    width: 82%;
    height: 5px;
    margin: 4px auto;
    background: #1775c3;
    box-shadow: 0 0 5px #1385ff;
}

.status-name {
    line-height: 1;
}

.message-strip {
    min-height: 24px;
    padding-top: 8px;
    color: #8a938c;
    font: 10px var(--font-data);
    text-align: center;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .console-grid {
        grid-template-columns: minmax(280px, 1fr) minmax(240px, .9fr);
        gap: 17px;
    }

    .scenario-column {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid #42484a;
        padding: 12px 0 0;
    }

    .scenario-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .scenario-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .scenario-row + .scenario-row {
        border-left: 1px solid #42484a;
        padding-left: 12px;
    }

    .scenario-label {
        margin: 1px 0 0;
    }
}

@media (max-width: 620px) {
    .workbench {
        display: block;
        padding: 18px 8px;
    }

    .console {
        padding: 9px;
        border-radius: 13px;
    }

    .video-deck {
        width: min(100%, 480px);
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .faceplate {
        padding: 12px 10px 9px;
    }

    .topbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-bottom: 9px;
    }

    .topbar>.section-label {
        font-size: 13px;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .topbar>.section-label:first-child {
        order: 2;
        padding-top: 6px;
        border-top: 1px solid #383f40;
    }

    .brand {
        order: 1;
        justify-content: start;
        gap: 7px;
    }

    .brand-mark {
        width: 60px;
        height: 17px;
    }

    .brand-name {
        font-size: 16px;
    }

    .top-right {
        order: 3;
        padding-top: 6px;
        border-top: 1px solid #383f40;
    }

    .console-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 13px 0;
    }

    .console-grid>* {
        width: 100%;
    }

    .left-column {
        max-width: 420px;
        margin: auto;
    }

    .center-column {
        padding: 0 8px;
    }

    .scenario-column {
        grid-column: auto;
    }

    .scenario-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .scenario-row {
        grid-template-columns: repeat(3, minmax(40px, 1fr));
    }

    .scenario-row + .scenario-row {
        border-left: 0;
        border-top: 1px solid #42484a;
        padding: 8px 0 0;
    }

    .scenario-name {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0;
    }

    .scenario-button {
        grid-row: 2;
        width: 38px;
    }

    .scenario-label {
        grid-row: 3;
    }

    .statusbar {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 12px;
        padding-top: 13px;
    }

    .status-item {
        font-size: 13px;
    }

    .status-item:first-child {
        grid-column: 1;
    }

    .status-item:last-child {
        grid-column: 4;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
    }
}

.mode-off > * {
    visibility: hidden;
}