:root {
    --bg0: #0b0e14;
    --bg1: #070a0e;
    --cream: #efe9dc;
    --muted: #818b9a;
    --wood-hi: #835838;
    --wood: #5d3e29;
    --wood-lo: #3b2616;
    --panel: #4a3120;
    --grille: #31200f;
    --screen: #070907;
    --phos: #e9e9e4;
    --phos-bright: #f7f7f4;
    --phos-dim: #9a9a93;
    --key: #1a1a1a;
    --key-hi: #2b2b2b;
    --keytext: #ece7dd;
    --led: #ff4a38;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "DejaVu Sans Mono", "Courier New", monospace;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    color: var(--cream);
    font-family: var(--mono);
    background: url("/static/images/background.svg") #121622;
    background-size: 50px;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    min-height: 100%;
}

.head {
    text-align: center;
    margin-bottom: 2.4rem;
}

.head h1 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.01em;
    font-size: clamp(2.3rem, 6vw, 3.9rem);
    color: var(--cream);
}

.head p {
    margin: .9rem 0 0;
    font-weight: 400;
    /* color: var(--muted); */
    font-size: clamp(.95rem, 2.2vw, 1.15rem);
    letter-spacing: .02em;
}

/* ---------- cabinet ---------- */
.tv {
    width: min(1000px, 100%);
}

.cabinet {
    display: flex;
    gap: 1.4rem;
    padding: 1.5rem;
    border-radius: 1.7rem;
    background: linear-gradient(180deg, var(--wood-hi) 0%, var(--wood) 46%, var(--wood-lo) 100%);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, .10) inset,
        0 -22px 44px rgba(0, 0, 0, .32) inset,
        0 44px 80px -30px rgba(0, 0, 0, .8);
    border: 1px solid rgba(0, 0, 0, .35);
}

/* speaker grille */
.grille {
    flex: 0 0 62px;
    border-radius: .8rem;
    position: relative;
    overflow: hidden;
    background: var(--grille);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .5) inset;
}

.grille::before {
    content: "";
    position: absolute;
    inset: 16px 15px;
    border-radius: .35rem;
    background: repeating-linear-gradient(#241811 0 4px, #100a06 4px 9px);
}

/* ---------- screen ---------- */
.screen {
    flex: 1 1 auto;
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 1.1rem;
    background: var(--screen);
    box-shadow: 0 0 0 4px #0a0a0a, 0 0 0 12px #241a12, 0 16px 40px rgba(0, 0, 0, .6) inset;
}

.tube-area {
    position: absolute;
    inset: 0;
    transform-origin: center;
    transition: transform .34s ease, filter .34s ease;
}

.noise,
.tube {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.noise {
    image-rendering: pixelated;
    z-index: 0;
}

.tube {
    z-index: 1;
    opacity: .9;
    filter: grayscale(1) contrast(1.05);
    transition: opacity .26s, filter .26s;
}

.osd {
    position: absolute;
    top: .7rem;
    right: 1rem;
    z-index: 3;
    font-size: clamp(.72rem, 1.7vw, .92rem);
    letter-spacing: .24em;
    color: var(--phos);
    padding: .22rem .55rem;
    border-radius: .32rem;
    background: rgba(0, 0, 0, .4);
    text-shadow: 0 0 8px rgba(255, 255, 255, .35);
    transition: opacity .18s ease;
}

.screen.switching .tube {
    opacity: .14;
    filter: grayscale(1) contrast(.4) brightness(1.4);
}

.scan {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    mix-blend-mode: overlay;
    background: repeating-linear-gradient(rgba(0, 0, 0, .22) 0 1px, rgba(255, 255, 255, .015) 1px 3px);
}

.scan::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 26%;
    background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
    animation: roll 8s linear infinite;
}

.glass {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(120% 70% at 26% 12%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 44%),
        radial-gradient(150% 130% at 50% 52%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .45) 100%);
}

/* ---------- controls ---------- */
.controls {
    flex: 0 0 clamp(190px, 25%, 238px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: .5rem .35rem;
}

.clabel {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .34em;
    color: #e4d6bd;
    opacity: .85;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.key {
    font: 700 1.05rem/1 var(--mono);
    color: var(--keytext);
    cursor: pointer;
    padding: .62rem 0;
    border: 1px solid #0a0a0a;
    border-radius: .6rem;
    background: linear-gradient(#242424, #141414);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 2px 5px rgba(0, 0, 0, .45);
}

.key:hover {
    background: linear-gradient(#2c2c2c, #191919);
}

.key:active,
.key.on {
    transform: translateY(1px);
    color: var(--phos);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .6) inset;
}

.key:focus-visible {
    outline: 2px solid var(--phos);
    outline-offset: 2px;
}

.dial {
    margin-top: .3rem;
    text-align: center;
}

.knob {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: 0 auto .45rem;
    background: radial-gradient(circle at 38% 30%, #dadde2, #9aa0a8 56%, #6b717a 100%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 2px 3px rgba(255, 255, 255, .5) inset, 0 -7px 12px rgba(0, 0, 0, .35) inset;
    position: relative;
}

.knob::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 3px;
    height: 24px;
    background: #20242a;
    border-radius: 2px;
    transform: translateX(-50%);
}

.ctl-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: #e4d6bd;
    opacity: .8;
}

.pwr {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--led);
    box-shadow: 0 0 10px var(--led);
    animation: pulse 3.4s ease-in-out infinite;
}

@keyframes roll {
    from {
        transform: translateY(-120%)
    }

    to {
        transform: translateY(520%)
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: .6
    }

    50% {
        opacity: 1
    }
}

@media (max-width:820px) {
    .cabinet {
        flex-direction: column;
    }

    .grille {
        flex-basis: 34px;
    }

    .grille::before {
        inset: 8px 16px;
        background: repeating-linear-gradient(90deg, #241811 0 4px, #100a06 4px 9px);
    }

    .controls {
        flex-basis: auto;
    }

    .keypad {
        grid-template-columns: repeat(5, 1fr);
    }

    .pwr {
        margin-top: 1rem;
    }
}

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

    .scan::after,
    .led {
        animation: none;
    }

    .tube-area {
        transition: none;
    }
}