@font-face {
    font-family: "StardosStencil";
    src: url("fonts/StardosStencil-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "StardosStencil";
    src: url("fonts/StardosStencil-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --bg-0: #091220;
    --bg-1: #0d1c2d;
    --bg-2: #143449;
    --panel-0: rgba(10, 23, 36, 0.82);
    --panel-1: rgba(17, 31, 50, 0.88);
    --line: rgba(170, 214, 255, 0.25);
    --text-main: #e7f5ff;
    --text-soft: #9ac2d9;
    --accent-hot: #ffb454;
    --accent-cool: #42d9ff;
    --accent-led-off: #203348;
    --accent-led-on: #63ffd4;
    --danger: #ffd494;
    --button-top: #ffe499;
    --button-mid: #ffbf62;
    --button-low: #ec7c29;
    --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.45);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 8px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    font-family: "Avenir Next", "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 25% -20%, #27628d 0%, transparent 40%),
        radial-gradient(circle at 80% 10%, #5b2d62 0%, transparent 35%),
        linear-gradient(165deg, var(--bg-0), var(--bg-1) 48%, var(--bg-2));
    color: var(--text-main);
}

.scene {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 30px);
    isolation: isolate;
}

.scene::before,
.scene::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
    z-index: 0;
}

.scene::before {
    background: #ff2d2d;
}

.scene::after {
    background: transparent;
}

.scene.alarm-active::before,
.scene.alarm-active::after {
    opacity: 1;
}

.scene.alarm-active::before {
    animation: pulseBg 0.5s linear infinite;
}

.scene.alarm-active::after {
    animation: none;
}

.atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.atmosphere-back {
    background:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 28px 28px;
    opacity: 0.35;
}

.atmosphere-front {
    background:
        radial-gradient(circle at 30% 40%, rgba(69, 181, 255, 0.25), transparent 33%),
        radial-gradient(circle at 72% 64%, rgba(255, 177, 90, 0.2), transparent 28%);
    mix-blend-mode: screen;
    opacity: 0.75;
}

.machine {
    position: relative;
    z-index: 3;
    width: min(780px, calc(100vw - 16px), calc(100vh - 16px));
    max-width: 100%;
    max-height: calc(100vh - 16px);
    aspect-ratio: 1 / 1;
    border-radius: clamp(20px, 2.4vw, 30px);
    border: 1px solid rgba(201, 226, 255, 0.3);
    background:
        linear-gradient(165deg, rgba(15, 30, 45, 0.92), rgba(8, 18, 31, 0.94) 50%, rgba(15, 34, 52, 0.94)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 10px, rgba(255, 255, 255, 0.01) 10px 20px);
    box-shadow:
        var(--shadow-deep),
        inset 0 0 35px rgba(79, 183, 255, 0.14),
        inset 0 1px 0 rgba(228, 242, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-rows: auto auto auto auto 1fr auto auto;
    gap: clamp(10px, 1.7vw, 16px);
    padding: clamp(14px, 2.4vw, 24px);
    overflow: hidden;
    container-type: inline-size;
}

.launch-stage {
    min-height: clamp(220px, 38vh, 360px);
}

.controls-row {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
    align-items: center;
    gap: clamp(14px, 2.2vw, 24px);
}

.side-controls {
    display: grid;
    gap: 6px;
    align-self: stretch;
    min-width: 0;
    position: relative;
}

.launch-controls {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    position: relative;
}

.launch-controls::before,
.side-controls::before {
    content: "";
    position: absolute;
    height: 6px;
    border-radius: 4px;
    background: repeating-linear-gradient(135deg, rgba(248, 210, 73, 0.92) 0 8px, rgba(14, 21, 28, 0.92) 8px 16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 178, 0.42),
        0 1px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.launch-controls::before {
    left: 10%;
    right: 10%;
    top: -8px;
}

.side-controls::before {
    left: 4%;
    right: 4%;
    top: -8px;
}

.state-plate {
    margin: 0;
    min-width: 132px;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    font-weight: 800;
    color: #e7ffe9;
    background: linear-gradient(180deg, rgba(20, 120, 50, 0.96), rgba(10, 58, 24, 0.98));
    border: 1px solid rgba(176, 255, 192, 0.52);
    border-radius: 6px;
    padding: 6px 10px;
    box-shadow:
        inset 0 1px 0 rgba(228, 255, 236, 0.36),
        0 4px 10px rgba(0, 0, 0, 0.25),
        0 0 10px rgba(67, 214, 101, 0.28);
}

.scene.is-powering .state-plate {
    color: #fff4f4;
    background: linear-gradient(
        180deg,
        rgba(201, 34, 34, 0.98) 0%,
        rgba(124, 18, 18, 0.98) 48%,
        rgba(20, 4, 4, 0.98) 100%
    );
    border-color: rgba(255, 170, 170, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 236, 0.4),
        0 0 12px rgba(255, 72, 72, 0.5);
    animation: statePlateBlink 1.5s cubic-bezier(0.43, 0.02, 0.26, 0.98) infinite;
}

.machine::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: clamp(14px, 2vw, 24px);
    border: 1px solid rgba(163, 200, 228, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.scene.is-powering .machine::before {
    animation: none;
}

.machine::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        repeating-linear-gradient(135deg, rgba(245, 208, 72, 0.86) 0 8px, rgba(16, 22, 28, 0.9) 8px 16px) 50% 10px / 46%
            7px no-repeat,
        repeating-linear-gradient(135deg, rgba(245, 208, 72, 0.78) 0 8px, rgba(16, 22, 28, 0.86) 8px 16px) 50%
            calc(100% - 10px) / 38% 6px no-repeat,
        repeating-linear-gradient(180deg, rgba(245, 208, 72, 0.72) 0 8px, rgba(15, 21, 28, 0.84) 8px 16px) 8px 50% / 5px
            28% no-repeat,
        repeating-linear-gradient(180deg, rgba(245, 208, 72, 0.72) 0 8px, rgba(15, 21, 28, 0.84) 8px 16px)
            calc(100% - 8px) 50% / 5px 28% no-repeat,
        radial-gradient(
            circle at 16px 16px,
            rgba(214, 236, 255, 0.34) 0 2px,
            rgba(9, 18, 28, 0.9) 3px,
            transparent 4px
        ),
        radial-gradient(
            circle at calc(100% - 16px) 16px,
            rgba(214, 236, 255, 0.34) 0 2px,
            rgba(9, 18, 28, 0.9) 3px,
            transparent 4px
        ),
        radial-gradient(
            circle at 16px calc(100% - 16px),
            rgba(214, 236, 255, 0.34) 0 2px,
            rgba(9, 18, 28, 0.9) 3px,
            transparent 4px
        ),
        radial-gradient(
            circle at calc(100% - 16px) calc(100% - 16px),
            rgba(214, 236, 255, 0.34) 0 2px,
            rgba(9, 18, 28, 0.9) 3px,
            transparent 4px
        );
}

.machine-header {
    border: 1px solid rgba(169, 203, 231, 0.3);
    border-radius: 12px;
    padding: 12px 14px;
    background:
        linear-gradient(180deg, rgba(19, 37, 56, 0.84), rgba(10, 20, 33, 0.88)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 12px, rgba(0, 0, 0, 0.03) 12px 24px);
    box-shadow:
        inset 0 1px 0 rgba(227, 241, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45);
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.product-name {
    margin: 0;
    font-size: clamp(0.84rem, 1.7vw, 1.2rem);
    font-weight: 500;
    font-family: "StardosStencil", "Avenir Next", "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
    line-height: 1.16;
    letter-spacing: 0.012em;
    color: #eef8ff;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.32);
    text-transform: uppercase;
}

.product-word {
    display: inline-block;
    margin-right: 0.22em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15),
        0 -1px 0 rgba(0, 0, 0, 0.5);
}

.product-word:last-child {
    margin-right: 0;
}

.product-word::first-letter {
    font-size: 1.26em;
    font-weight: 700;
    line-height: 0.9;
}

.eyebrow-lab {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(255, 160, 160, 0.9);
}

.maker-line {
    margin: 0;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.28em;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(178, 211, 237, 0.34);
    background:
        linear-gradient(180deg, rgba(14, 29, 44, 0.92), rgba(9, 18, 28, 0.98)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 2px, rgba(0, 0, 0, 0.03) 2px 4px);
    box-shadow:
        inset 0 1px 0 rgba(236, 246, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45);
    font-size: clamp(0.6rem, 1.03vw, 0.76rem);
    font-family: "StardosStencil", "Avenir Next", "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
    letter-spacing: 0.08em;
    color: rgba(202, 227, 244, 0.9);
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-align: center;
}

.maker-line-side {
    margin-top: 0;
    box-shadow:
        inset 0 1px 0 rgba(236, 246, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.24);
}

.maker-name {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    color: #d4ecff;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15),
        0 -1px 0 rgba(0, 0, 0, 0.5);
}

.maker-separator {
    display: inline-flex;
    align-items: center;
    color: rgba(172, 204, 226, 0.82);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15),
        0 -1px 0 rgba(0, 0, 0, 0.5);
}

.maker-series {
    display: inline-flex;
    align-items: center;
    color: rgba(178, 211, 237, 0.88);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15),
        0 -1px 0 rgba(0, 0, 0, 0.5);
}

.maker-tm {
    margin-left: 0.2em;
    font-size: 0.68em;
    letter-spacing: 0.05em;
    vertical-align: super;
    color: rgba(210, 232, 247, 0.92);
}

.status-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 1.4vw, 12px);
}

.status-light {
    height: clamp(12px, 2vw, 16px);
    border-radius: 999px;
    background: linear-gradient(180deg, #2b3f58, #192837);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
    transition:
        box-shadow 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.status-light.active {
    background: linear-gradient(180deg, #ffe6ba, #ffb454);
    box-shadow:
        0 0 16px rgba(255, 189, 92, 0.82),
        0 0 34px rgba(255, 132, 32, 0.52);
    transform: translateY(-1px);
}

.charge-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.charge-track {
    position: relative;
    height: clamp(18px, 2.4vw, 24px);
    border-radius: 999px;
    background: rgba(12, 21, 32, 0.75);
    border: 1px solid rgba(164, 211, 255, 0.25);
    overflow: hidden;
}

.charge-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background:
        linear-gradient(90deg, #65f07a, #8dffaa 34%, #ffd085 78%, #ff9f3f),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.14) 0 10px, rgba(255, 255, 255, 0.04) 10px 20px);
    box-shadow: 0 0 30px rgba(129, 250, 143, 0.45);
    transition: width 120ms linear;
}

.charge-label {
    margin: 0;
    min-width: 58px;
    text-align: right;
    font-weight: 700;
    font-family: "StardosStencil", "Avenir Next", "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
    color: #d8ecff;
}

.led-array {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 4px;
}

.led-segment {
    height: clamp(12px, 1.4vw, 14px);
    border-radius: 999px;
    background: linear-gradient(180deg, #22374d, #152534);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
    transition:
        background 140ms ease,
        box-shadow 160ms ease;
}

.led-segment.active {
    background: linear-gradient(180deg, #d1ffd8, #79ff97 45%, #39d867);
    box-shadow:
        0 0 16px rgba(112, 255, 153, 0.8),
        0 0 30px rgba(57, 216, 103, 0.45);
}

.terminal-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(8px, 1.4vw, 12px);
    padding: 6px 8px;
    border-radius: 12px;
    border: 1px solid rgba(173, 208, 232, 0.24);
    background: linear-gradient(180deg, rgba(16, 31, 48, 0.84), rgba(9, 18, 28, 0.9));
    box-shadow: inset 0 0 16px rgba(76, 118, 153, 0.18);
    justify-self: stretch;
}

.terminal-lamps {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.terminal-lamp {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.25);
}

.lamp-red {
    background: #9f2828;
}

.lamp-amber {
    background: #936d25;
}

.lamp-green {
    background: #1f7f40;
}

.terminal-dials {
    display: grid;
    grid-template-columns: repeat(4, minmax(34px, 56px));
    justify-content: end;
    gap: 4px 6px;
    min-width: 0;
}

.dial {
    position: relative;
    width: clamp(36px, 6vw, 56px);
    height: clamp(30px, 4.6vw, 46px);
    border-radius: 9px;
    border: 1px solid rgba(193, 218, 235, 0.3);
    background:
        radial-gradient(circle at 50% 72%, rgba(18, 33, 48, 0.8), rgba(9, 16, 25, 0.96) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    overflow: hidden;
}

.dial::before {
    content: "";
    position: absolute;
    left: 11%;
    right: 11%;
    top: 46%;
    height: 8px;
    border-top: 1px solid rgba(174, 204, 226, 0.25);
}

.dial-needle {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 3px;
    height: clamp(14px, 2.3vw, 20px);
    margin-left: -1.5px;
    border-radius: 3px;
    background: linear-gradient(180deg, #ff7c7c, #bc2f2f);
    transform-origin: 50% 100%;
    box-shadow: 0 0 8px rgba(255, 73, 73, 0.55);
    transition: transform 90ms linear;
}

.dial-needle-left {
    --needle-angle: -34deg;
    transform: rotate(var(--needle-angle));
}

.dial-needle-right {
    --needle-angle: -18deg;
    transform: rotate(var(--needle-angle));
}

.dial-needle-fuel {
    --needle-angle: 42deg;
    transform: rotate(var(--needle-angle));
}

.dial-needle-speed {
    --needle-angle: -44deg;
    transform: rotate(var(--needle-angle));
}

.dial-center {
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: #c5d5e2;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.dial-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    text-align: center;
    font-size: clamp(0.38rem, 0.9vw, 0.52rem);
    letter-spacing: 0.08em;
    color: #a6c0d1;
    font-weight: 700;
}

.dial-mark {
    position: absolute;
    top: 11px;
    font-size: clamp(0.34rem, 0.74vw, 0.44rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #8fb1c7;
}

.dial-mark-left {
    left: 8px;
}

.dial-mark-right {
    right: 8px;
}

.scene.is-powering .lamp-red {
    background: #ff5858;
    box-shadow:
        0 0 14px rgba(255, 64, 64, 0.95),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.scene.is-powering .lamp-amber {
    animation: lampBlink 0.7s steps(2, end) infinite;
}

.scene.is-powering .lamp-green {
    background: #4bff85;
    box-shadow:
        0 0 11px rgba(95, 255, 142, 0.8),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.scene.is-powering .dial-needle-left {
    animation: dialSweepLeft 1.6s ease-in-out infinite alternate;
}

.scene.is-powering .dial-needle-right {
    animation: dialSweepRight 1.2s ease-in-out infinite alternate;
}

.terminal-lamp.hot {
    filter: saturate(1.25) brightness(1.15);
}

.terminal-lamp.pulse {
    animation: lampPulse 0.42s ease-in-out infinite alternate;
}

.scene.is-powering .dial-needle-left,
.scene.is-powering .dial-needle-right {
    animation: none;
}

.launch-stage {
    position: relative;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(214, 241, 255, 0.55);
    background: linear-gradient(180deg, #89d5ff 0%, #a7e2ff 28%, #d4f4ff 53%, #7dc96d 54%, #57b74d 72%, #3f9b3f 100%);
    box-shadow:
        inset 0 0 0 5px rgba(245, 252, 255, 0.4),
        inset 0 -18px 26px rgba(36, 98, 44, 0.22);
    overflow: hidden;
}

.blast-doors {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.blast-door {
    position: absolute;
    top: 0;
    width: 50.2%;
    height: 100%;
    background:
        linear-gradient(
            130deg,
            rgba(219, 229, 238, 0.9),
            rgba(125, 141, 158, 0.95) 36%,
            rgba(84, 98, 114, 0.96) 62%,
            rgba(45, 57, 70, 0.98) 100%
        ),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 10px, rgba(0, 0, 0, 0.07) 10px 20px);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(239, 248, 255, 0.22),
        inset 0 0 22px rgba(11, 17, 23, 0.48);
    transition: transform 980ms cubic-bezier(0.2, 0.92, 0.24, 1);
}

.blast-door-left {
    left: 0;
    border-right: 1px solid rgba(20, 28, 38, 0.72);
    transform: translateX(0%);
}

.blast-door-right {
    right: 0;
    border-left: 1px solid rgba(20, 28, 38, 0.72);
    transform: translateX(0%);
}

.scene.doors-open .blast-door-left {
    transform: translateX(-102%);
}

.scene.doors-open .blast-door-right {
    transform: translateX(102%);
}

.beam {
    position: absolute;
    left: 7%;
    right: 7%;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(250, 255, 255, 0.8), rgba(121, 136, 152, 0.95));
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 2px rgba(0, 0, 0, 0.45);
}

.beam-a {
    top: 18%;
}

.beam-b {
    top: 44%;
}

.beam-c {
    top: 70%;
}

.door-seam {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    margin-left: -2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(20, 32, 45, 0.65));
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.24);
    opacity: 1;
    transition: opacity 160ms ease 860ms;
}

.scene.doors-open .door-seam {
    opacity: 0;
    transition-delay: 0ms;
}

.launch-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.9) 0 11%, transparent 12%),
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.86) 0 9%, transparent 10%),
        radial-gradient(circle at 71% 18%, rgba(255, 255, 255, 0.9) 0 13%, transparent 14%),
        radial-gradient(circle at 78% 19%, rgba(255, 255, 255, 0.86) 0 9%, transparent 10%),
        radial-gradient(circle at 51% 33%, rgba(255, 255, 255, 0.76) 0 8%, transparent 9%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    opacity: 0.72;
}

.launch-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 38%),
        radial-gradient(circle at 50% 82%, rgba(255, 244, 176, 0.24), transparent 38%);
    pointer-events: none;
}

.horizon-line {
    position: absolute;
    top: 53%;
    left: 8%;
    width: 84%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(240, 253, 255, 0.9), transparent);
}

.reggie {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-40%, 115%) scale(1.35) rotate(-18deg);
    transform-origin: center center;
    will-change: transform, opacity;
    opacity: 0;
    transition: opacity 180ms linear;
}

.reggie.hidden {
    display: none;
}

.reggie-shadow {
    position: absolute;
    left: 50%;
    top: 86%;
    width: 120px;
    height: 26px;
    margin-left: -60px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(39, 86, 32, 0.42), rgba(39, 86, 32, 0));
    filter: blur(2px);
    transform: scale(1);
    opacity: 0.56;
}

.speech-bubble {
    position: absolute;
    left: -24px;
    top: -62px;
    min-width: 130px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(201, 230, 255, 0.45);
    background: rgba(247, 252, 255, 0.95);
    color: #17324b;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.speech-bubble::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid rgba(247, 252, 255, 0.95);
}

.wheel-and-hamster {
    --dur: 0.85s;
    position: relative;
    width: 116px;
    height: 84px;
}

.hamster,
.hamster div {
    position: absolute;
}

.hamster {
    top: 20px;
    left: 14px;
    width: 88px;
    height: 52px;
    animation: hamster 0.9s ease-in-out infinite;
}

.hamster__body {
    animation: hamsterBody var(--dur) ease-in-out infinite;
    background: hsl(32, 88%, 90%);
    border-radius: 50% 28% 50% 30% / 18% 60% 40% 42%;
    box-shadow:
        0.08em 0.64em 0 hsl(30, 82%, 56%) inset,
        0.15em -0.42em 0 hsl(30, 85%, 81%) inset;
    width: 64px;
    height: 42px;
    left: 25px;
    top: 4px;
    transform-origin: 20% 50%;
}

.hamster__head {
    animation: hamsterHead var(--dur) ease-in-out infinite;
    background: hsl(30, 88%, 56%);
    border-radius: 70% 30% 0 100% / 40% 26% 26% 62%;
    box-shadow:
        0 -0.25em 0 hsl(30, 90%, 80%) inset,
        0.75em -1.3em 0 hsl(30, 90%, 90%) inset;
    top: -2px;
    left: -30px;
    width: 40px;
    height: 34px;
    transform-origin: 100% 50%;
}

.hamster__ear {
    animation: hamsterEar var(--dur) ease-in-out infinite;
    background: hsl(0, 90%, 85%);
    border-radius: 50%;
    box-shadow: -0.2em 0 hsl(30, 90%, 55%) inset;
    top: -4px;
    right: -3px;
    width: 12px;
    height: 12px;
    transform-origin: 50% 75%;
}

.hamster__eye {
    animation: hamsterEye var(--dur) linear infinite;
    background-color: #000;
    border-radius: 50%;
    top: 8px;
    left: 18px;
    width: 7px;
    height: 7px;
}

.hamster__nose {
    background: hsl(0, 90%, 75%);
    border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
    top: 16px;
    left: 0;
    width: 4px;
    height: 5px;
}

.hamster__limb--fr,
.hamster__limb--fl {
    clip-path: polygon(0 0, 100% 0, 70% 80%, 60% 100%, 0% 100%, 40% 80%);
    top: 26px;
    left: 9px;
    width: 14px;
    height: 21px;
    transform-origin: 50% 0;
}

.hamster__limb--fr {
    animation: hamsterFRLimb var(--dur) linear infinite;
    background: linear-gradient(hsl(30, 90%, 80%) 80%, hsl(0, 90%, 75%) 80%);
    transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
    animation: hamsterFLLimb var(--dur) linear infinite;
    background: linear-gradient(hsl(30, 90%, 90%) 80%, hsl(0, 90%, 85%) 80%);
    transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
    border-radius: 0.75em 0.75em 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 90%, 70% 100%, 30% 100%, 40% 90%, 0 30%);
    top: 13px;
    left: 40px;
    width: 20px;
    height: 30px;
    transform-origin: 50% 30%;
}

.hamster__limb--br {
    animation: hamsterBRLimb var(--dur) linear infinite;
    background: linear-gradient(hsl(30, 90%, 80%) 90%, hsl(0, 90%, 75%) 90%);
    transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
    animation: hamsterBLLimb var(--dur) linear infinite;
    background: linear-gradient(hsl(30, 90%, 90%) 90%, hsl(0, 90%, 85%) 90%);
    transform: rotate(-25deg);
}

.hamster__tail {
    animation: hamsterTail var(--dur) linear infinite;
    background: hsl(0, 90%, 85%);
    border-radius: 0.25em 50% 50% 0.25em;
    box-shadow: 0 -0.2em 0 hsl(0, 90%, 75%) inset;
    top: 22px;
    right: -7px;
    width: 16px;
    height: 8px;
    transform: rotate(30deg) translateZ(-1px);
}

.launch-button {
    justify-self: center;
    align-self: center;
    position: relative;
    width: clamp(118px, 24vw, 154px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 0;
    font-size: clamp(1rem, 2.3vw, 1.28rem);
    letter-spacing: 0.18em;
    font-family: "StardosStencil", "Avenir Next", "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
    color: #ffe6e6;
    font-weight: 800;
    background:
        radial-gradient(circle at 44% 30%, #ff9191 0%, #df3636 36%, #9f1717 72%, #621010 100%),
        repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0 6px, rgba(0, 0, 0, 0.05) 6px 12px);
    border: 3px solid rgba(255, 215, 215, 0.58);
    box-shadow:
        0 12px 0 #3f0909,
        0 25px 34px rgba(0, 0, 0, 0.5),
        inset 0 3px 0 rgba(255, 238, 238, 0.75),
        inset 0 -10px 22px rgba(73, 8, 8, 0.65);
    cursor: pointer;
    transition:
        transform 120ms ease,
        filter 120ms ease,
        box-shadow 120ms ease;
    overflow: hidden;
}

.launch-button::before {
    content: "";
    position: absolute;
    inset: 22% 10%;
    border-radius: 999px;
    background: repeating-linear-gradient(145deg, rgba(0, 0, 0, 0.56) 0 6px, rgba(255, 255, 255, 0.08) 6px 12px);
    opacity: 0.34;
    mix-blend-mode: multiply;
}

.launch-button::after {
    content: "";
    position: absolute;
    inset: 10% 12% auto;
    height: 24%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0));
}

.launch-button:active {
    transform: translateY(6px) scale(0.985);
    box-shadow:
        0 5px 0 #3f0909,
        0 12px 20px rgba(0, 0, 0, 0.35),
        inset 0 2px 0 rgba(255, 238, 238, 0.6),
        inset 0 -8px 16px rgba(73, 8, 8, 0.6);
}

.launch-button[disabled] {
    cursor: wait;
    filter: grayscale(0.18) brightness(0.86);
}

.launch-button > span {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.flash {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255, 244, 202, 0.56), rgba(255, 244, 202, 0));
    opacity: 0;
}

@keyframes pulseBg {
    0% {
        opacity: 0.48;
    }
    100% {
        opacity: 0;
    }
}

@keyframes statePlateBlink {
    0%,
    100% {
        filter: brightness(1);
        background: linear-gradient(
            180deg,
            rgba(176, 30, 30, 0.98) 0%,
            rgba(110, 15, 15, 0.98) 50%,
            rgba(18, 4, 4, 0.98) 100%
        );
        box-shadow:
            inset 0 1px 0 rgba(255, 236, 236, 0.4),
            0 0 10px rgba(255, 72, 72, 0.38),
            0 0 22px rgba(255, 28, 28, 0.2);
    }
    50% {
        filter: brightness(1.22);
        background: linear-gradient(
            180deg,
            rgba(236, 52, 52, 0.99) 0%,
            rgba(154, 22, 22, 0.99) 46%,
            rgba(30, 6, 6, 0.99) 100%
        );
        box-shadow:
            inset 0 1px 0 rgba(255, 244, 244, 0.54),
            0 0 18px rgba(255, 88, 88, 0.72),
            0 0 34px rgba(255, 30, 30, 0.38);
    }
}

@keyframes lampBlink {
    0%,
    45% {
        background: #8e6a23;
        box-shadow: none;
    }
    50%,
    100% {
        background: #ffc450;
        box-shadow:
            0 0 11px rgba(255, 196, 80, 0.8),
            inset 0 1px 1px rgba(255, 255, 255, 0.55);
    }
}

@keyframes dialSweepLeft {
    from {
        transform: rotate(-44deg);
    }
    to {
        transform: rotate(36deg);
    }
}

@keyframes dialSweepRight {
    from {
        transform: rotate(-28deg);
    }
    to {
        transform: rotate(52deg);
    }
}

@keyframes lampPulse {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.14);
    }
}

.scene.strobe .flash {
    animation: strobe 360ms ease-out;
}

.scene.tension .machine {
    animation: tension 420ms cubic-bezier(0.21, 1, 0.22, 1);
}

.scene.cooldown .status-light.active,
.scene.cooldown .led-segment.active {
    filter: saturate(0.78) brightness(0.78);
}

@keyframes tension {
    0% {
        transform: translate(0, 0);
    }
    18% {
        transform: translate(-2px, 1px);
    }
    36% {
        transform: translate(2px, -1px);
    }
    54% {
        transform: translate(-3px, 0);
    }
    72% {
        transform: translate(2px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes strobe {
    from {
        opacity: 0.95;
    }
    to {
        opacity: 0;
    }
}

@keyframes hamster {
    from,
    to {
        transform: rotate(4deg) translate(-6px, 2px);
    }
    50% {
        transform: rotate(0deg) translate(-6px, 2px);
    }
}

@keyframes hamsterHead {
    from,
    25%,
    50%,
    75%,
    to {
        transform: rotate(0);
    }
    12.5%,
    37.5%,
    62.5%,
    87.5% {
        transform: rotate(8deg);
    }
}

@keyframes hamsterEye {
    from,
    90%,
    to {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0);
    }
}

@keyframes hamsterEar {
    from,
    25%,
    50%,
    75%,
    to {
        transform: rotate(0);
    }
    12.5%,
    37.5%,
    62.5%,
    87.5% {
        transform: rotate(12deg);
    }
}

@keyframes hamsterBody {
    from,
    25%,
    50%,
    75%,
    to {
        transform: rotate(0);
    }
    12.5%,
    37.5%,
    62.5%,
    87.5% {
        transform: rotate(-2deg);
    }
}

@keyframes hamsterFRLimb {
    from,
    25%,
    50%,
    75%,
    to {
        transform: rotate(50deg) translateZ(-1px);
    }
    12.5%,
    37.5%,
    62.5%,
    87.5% {
        transform: rotate(-30deg) translateZ(-1px);
    }
}

@keyframes hamsterFLLimb {
    from,
    25%,
    50%,
    75%,
    to {
        transform: rotate(-30deg);
    }
    12.5%,
    37.5%,
    62.5%,
    87.5% {
        transform: rotate(50deg);
    }
}

@keyframes hamsterBRLimb {
    from,
    25%,
    50%,
    75%,
    to {
        transform: rotate(-60deg) translateZ(-1px);
    }
    12.5%,
    37.5%,
    62.5%,
    87.5% {
        transform: rotate(20deg) translateZ(-1px);
    }
}

@keyframes hamsterBLLimb {
    from,
    25%,
    50%,
    75%,
    to {
        transform: rotate(20deg);
    }
    12.5%,
    37.5%,
    62.5%,
    87.5% {
        transform: rotate(-60deg);
    }
}

@keyframes hamsterTail {
    from,
    25%,
    50%,
    75%,
    to {
        transform: rotate(30deg) translateZ(-1px);
    }
    12.5%,
    37.5%,
    62.5%,
    87.5% {
        transform: rotate(10deg) translateZ(-1px);
    }
}

@media (max-width: 700px) {
    .machine {
        width: min(760px, calc(100vw - 10px));
        height: min(calc(100dvh - 10px), calc(100vh - 10px));
        aspect-ratio: auto;
        grid-template-rows: auto auto auto auto 1fr auto;
        gap: 7px;
        padding: 8px 9px;
    }

    .machine-header {
        padding: 8px 10px;
    }

    .status-row {
        gap: 6px;
    }

    .status-light {
        height: 10px;
    }

    .led-array {
        gap: 3px;
    }

    .led-segment {
        height: 9px;
    }

    .controls-row {
        grid-template-columns: minmax(92px, 0.82fr) minmax(0, 1.18fr);
        align-items: end;
        gap: 10px;
    }

    .terminal-panel {
        width: 100%;
        padding: 4px 6px;
    }

    .side-controls {
        width: 100%;
    }

    .maker-line {
        padding: 4px 6px;
        font-size: clamp(0.5rem, 1.85vw, 0.62rem);
    }

    .charge-track {
        height: clamp(12px, 1.8vw, 16px);
    }

    .charge-label {
        min-width: 46px;
        font-size: 0.82rem;
    }

    .launch-button {
        width: clamp(84px, 18vw, 110px);
    }

    .launch-stage {
        min-height: clamp(95px, 18vh, 150px);
    }

    .launch-controls::before,
    .side-controls::before {
        height: 4px;
        top: -5px;
    }

    .machine::after {
        background:
            repeating-linear-gradient(135deg, rgba(245, 208, 72, 0.86) 0 8px, rgba(16, 22, 28, 0.9) 8px 16px) 50% 7px /
                40% 5px no-repeat,
            repeating-linear-gradient(135deg, rgba(245, 208, 72, 0.78) 0 8px, rgba(16, 22, 28, 0.86) 8px 16px) 50%
                calc(100% - 7px) / 32% 5px no-repeat,
            radial-gradient(
                circle at 14px 14px,
                rgba(214, 236, 255, 0.3) 0 2px,
                rgba(9, 18, 28, 0.9) 3px,
                transparent 4px
            ),
            radial-gradient(
                circle at calc(100% - 14px) 14px,
                rgba(214, 236, 255, 0.3) 0 2px,
                rgba(9, 18, 28, 0.9) 3px,
                transparent 4px
            ),
            radial-gradient(
                circle at 14px calc(100% - 14px),
                rgba(214, 236, 255, 0.3) 0 2px,
                rgba(9, 18, 28, 0.9) 3px,
                transparent 4px
            ),
            radial-gradient(
                circle at calc(100% - 14px) calc(100% - 14px),
                rgba(214, 236, 255, 0.3) 0 2px,
                rgba(9, 18, 28, 0.9) 3px,
                transparent 4px
            );
    }

    .terminal-dials {
        grid-template-columns: repeat(4, minmax(30px, 44px));
        gap: 3px 4px;
    }

    .speech-bubble {
        transform: scale(0.88);
        transform-origin: top left;
    }
}

@media (max-width: 560px) {
    .scene {
        padding: 8px;
    }

    .product-name {
        white-space: normal;
        text-wrap: balance;
        font-size: clamp(0.72rem, 3.05vw, 0.92rem);
        line-height: 1.14;
    }

    .maker-line {
        font-size: clamp(0.52rem, 2.2vw, 0.64rem);
        letter-spacing: 0.06em;
        padding: 6px 8px;
    }

    .controls-row {
        grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.2fr);
        gap: 8px;
    }

    .state-plate {
        min-width: 92px;
        font-size: 0.64rem;
        letter-spacing: 0.12em;
        padding: 5px 8px;
    }

    .charge-track {
        height: 11px;
    }

    .terminal-dials {
        gap: 3px;
        grid-template-columns: repeat(4, minmax(28px, 40px));
    }

    .dial {
        width: clamp(30px, 6vw, 40px);
        height: clamp(26px, 4.4vw, 34px);
    }

    .terminal-lamp {
        width: 10px;
        height: 10px;
    }

    .dial-label {
        letter-spacing: 0.05em;
    }

    .launch-stage {
        min-height: clamp(120px, 20vh, 170px);
    }
}

@media (max-width: 860px) {
    .controls-row {
        grid-template-columns: minmax(96px, 0.84fr) minmax(0, 1.16fr);
        align-items: end;
    }

    .side-controls {
        width: 100%;
    }

    .terminal-panel {
        width: 100%;
    }
}

@media (max-height: 760px) {
    .scene {
        padding: 8px;
    }

    .machine {
        gap: 9px;
        padding: clamp(10px, 1.8vw, 16px);
    }

    .controls-row {
        grid-template-columns: minmax(92px, 0.82fr) minmax(0, 1.18fr);
        align-items: end;
        gap: 8px;
    }

    .side-controls {
        width: 100%;
    }

    .charge-track {
        height: 12px;
    }

    .launch-stage {
        min-height: clamp(130px, 22vh, 190px);
    }

    .launch-button {
        width: clamp(92px, 19vw, 120px);
    }
}

@media (max-height: 640px) {
    .machine {
        gap: 6px;
        padding: 6px 7px;
    }

    .product-name {
        font-size: clamp(0.68rem, 2.4vh, 0.9rem);
        line-height: 1.12;
    }

    .maker-line {
        font-size: clamp(0.5rem, 1.9vh, 0.62rem);
        padding: 5px 7px;
    }

    .charge-track {
        height: 10px;
    }

    .launch-stage {
        min-height: clamp(78px, 14vh, 116px);
    }

    .status-light {
        height: 10px;
    }

    .led-segment {
        height: 10px;
    }

    .speech-bubble {
        top: -54px;
        transform: scale(0.82);
        transform-origin: top left;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}