body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding-top: 24px;
    padding-bottom: 140px;

    box-sizing: border-box;

    background: #f0f0f0;
}

/*
 * Main simulator wrapper.
 *
 * The control buttons and explanation strip are
 * positioned relative to this box.
 */
#simulator-container {
    position: relative;

    width: 1400px;
    max-width: 95vw;
}

/*
 * Main SVG simulator.
 */
#simulator {
    display: block;

    width: 100%;
    height: auto;

    border: none;

    visibility: hidden;
}

#simulator.simulator-ready {
    visibility: visible;
}

/*
 * Full-size layer containing all six graphical controls.
 */
#controls-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 150ms ease,
        visibility 150ms ease;
}

/*
 * Hide all six controls after any control is selected.
 */
#controls-overlay.controls-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*
 * Each paired set of buttons is positioned independently.
 */
.control-cluster {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 10px;

    pointer-events: auto;
}

/*
 * Individually positioned pitch controls.
 */
.single-control {
    position: absolute;
    pointer-events: auto;
}

/*
 * Shared graphical button design.
 */
.control-button {
    width: 58px;
    height: 58px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 12px;

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
    touch-action: manipulation;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.28);

    transition:
        transform 100ms ease,
        filter 100ms ease,
        box-shadow 100ms ease;
}

.control-button:hover {
    filter: brightness(1.12);

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.34);
}

.control-button:active {
    transform: scale(0.92);
}

.control-button:focus-visible {
    outline: 4px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

/*
 * Propeller-control buttons.
 */
.prop-button {
    background: #2f80ed;
}

/*
 * Throttle-control buttons.
 */
.throttle-button {
    background: #111111;
}

/*
 * Aircraft-pitch buttons.
 */
.pitch-button {
    background: #666666;
}

/*
 * Manual control placement.
 */
#prop-controls {
    left: 63%;
    top: 8%;
}

#throttle-controls {
    left: 63%;
    top: 21%;
}

#pitch-up-control {
    left: 20%;
    top: 21%;
}

#pitch-down-control {
    left: 20%;
    top: 65%;
}

/*
 * Reset button appears only after one of the six
 * simulator controls is selected.
 */
#reset-button {
    position: absolute;

    left: 50%;
    top: 82%;

    transform: translateX(-50%);

    min-width: 110px;
    min-height: 48px;
    padding: 10px 18px;

    border: 2px solid #444444;
    border-radius: 10px;

    background: #ffffff;
    color: #222222;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    cursor: pointer;
    touch-action: manipulation;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.28);

    /*
     * Hidden when the simulator first loads.
     */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 150ms ease,
        visibility 150ms ease,
        transform 100ms ease;
}

/*
 * This class makes the Reset button visible.
 */
#reset-button.reset-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#reset-button:hover {
    background: #f4f4f4;
}

#reset-button:active {
    transform:
        translateX(-50%)
        scale(0.94);
}

#reset-button:focus-visible {
    outline: 4px solid rgba(47, 128, 237, 0.45);
    outline-offset: 3px;
}

/*
 * Four-step explanation strip.
 *
 * Hidden completely when the simulator first loads.
 */
#sequence-explanation {
    position: absolute;

    left: 0;
    top: 100%;

    width: 100%;
    margin-top: 14px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    background: #ffffff;

    border-top:
        1px solid rgba(0, 0, 0, 0.18);

    border-bottom:
        1px solid rgba(0, 0, 0, 0.18);

    box-sizing: border-box;

    /*
     * Hidden until the prop-forward sequence begins.
     */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(12px);

    transition:
        opacity 250ms ease,
        visibility 250ms ease,
        transform 250ms ease;
}

/*
 * Shown only during the prop-forward explanation sequence.
 */
#sequence-explanation.sequence-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

/*
 * Default step state.
 *
 * Once the strip appears, all steps are ghosted until
 * JavaScript marks one as active.
 */
.sequence-step {
    min-height: 94px;
    padding: 14px 16px;

    display: flex;
    align-items: flex-start;
    gap: 10px;

    border-right:
        1px solid rgba(0, 0, 0, 0.18);

    box-sizing: border-box;

    opacity: 0.32;

    transition:
        opacity 250ms ease,
        background 250ms ease,
        box-shadow 250ms ease;
}

.sequence-step:last-child {
    border-right: none;
}

.sequence-step-number {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #d7d7d7;
    color: #222222;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.sequence-step-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;

    color: #222222;

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.25;
}

.sequence-step-text strong {
    font-size: 14px;
    font-weight: 700;
}

.sequence-step-text span {
    font-size: 13px;
}

/*
 * Active explanation step.
 */
.sequence-step.step-active {
    opacity: 1;

    background:
        rgba(47, 128, 237, 0.08);

    box-shadow:
        inset 0 4px 0 #2f80ed;
}

.sequence-step.step-active
.sequence-step-number {
    background: #2f80ed;
    color: #ffffff;
}

/*
 * Tablet layout for the explanation strip.
 */

 /*
 * ==========================================================
 * Simulator mode selector
 * ==========================================================
 *
 * This control sits above the SVG and remains visible after
 * the six graphical controls are hidden.
 */

.simulator-mode-control {
    position: absolute;

    left: 50%;
    top: 4%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 12px;

    z-index: 10;

    font-family: Arial, sans-serif;
}

.mode-label {
    color: #666666;

    font-size: 16px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        color 180ms ease,
        opacity 180ms ease;
}

.mode-label.mode-label-active {
    color: #111111;
}

/*
 * iPhone-style mode switch.
 */
.mode-toggle {
    position: relative;

    width: 76px;
    height: 34px;
    padding: 0;

    border: 2px solid #444444;
    border-radius: 999px;

    background: #d7d7d7;

    cursor: pointer;
    touch-action: manipulation;

    box-sizing: border-box;

    transition:
        background 180ms ease,
        border-color 180ms ease;
}

.mode-toggle-knob {
    position: absolute;

    left: 3px;
    top: 50%;

    width: 26px;
    height: 26px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #2f80ed;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.32);

    transition:
        left 220ms ease,
        background 180ms ease;
}

/*
 * Applied by JavaScript when Instant Response is active.
 */
.mode-toggle.mode-instant {
    background: #dbeafe;
    border-color: #2f80ed;
}

.mode-toggle.mode-instant
.mode-toggle-knob {
    left: 43px;
}

.mode-toggle:hover {
    filter: brightness(1.04);
}

.mode-toggle:active
.mode-toggle-knob {
    width: 29px;
}

.mode-toggle:focus-visible {
    outline: 4px solid rgba(47, 128, 237, 0.4);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    #sequence-explanation {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sequence-step:nth-child(2) {
        border-right: none;
    }

    .sequence-step:nth-child(-n + 2) {
        border-bottom:
            1px solid rgba(0, 0, 0, 0.18);
    }
}

/*
 * Mobile controls.
 */
@media (max-width: 700px) {
    .control-button {
        width: 52px;
        height: 52px;

        border-radius: 11px;

        font-size: 27px;
    }

    .control-cluster {
        gap: 8px;
    }

    #reset-button {
        min-width: 100px;
        min-height: 48px;
        padding: 9px 15px;

        font-size: 16px;
    }

    .simulator-mode-control {
    top: 2%;
    gap: 8px;
}

.mode-label {
    font-size: 13px;
}

.mode-toggle {
    width: 64px;
    height: 30px;
}

.mode-toggle-knob {
    width: 22px;
    height: 22px;
}

.mode-toggle.mode-instant
.mode-toggle-knob {
    left: 36px;
}
}

/*
 * Narrow mobile explanation layout.
 */
@media (max-width: 520px) {
    #sequence-explanation {
        grid-template-columns: 1fr;
    }

    .sequence-step {
        min-height: auto;

        border-right: none;
        border-bottom:
            1px solid rgba(0, 0, 0, 0.18);
    }

    .sequence-step:last-child {
        border-bottom: none;
    }
}