:root {
    color-scheme: dark; /* a monitor is dark in light mode too */
}

body {
    --bg: #000;
    --surface: #0b0b16;
    --text: #f4f4f4;
    --border: #5a5a78;
    --accent: #ffd84d;
    --accent-2: #5fe3e3;
    --deco: #5fe3e3;
    --hard-shadow: rgba(0, 0, 0, 0.85);
    --bg-art: none; /* the bars below are the background */

    --bar-1: #c0c0c0;
    --bar-2: #c0c000;
    --bar-3: #00c0c0;
    --bar-4: #00c000;
    --bar-5: #c000c0;
    --bar-6: #c00000;
    --bar-7: #0000c0;
    --black: #101010;

    background: var(--black);
}

/* The screen: colour bars, a reverse strip, scan lines and a darkened edge,
   fixed behind everything. */
.ccv-bars {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
                to right,
                var(--bar-1) 0 14.28%,
                var(--bar-2) 0 28.57%,
                var(--bar-3) 0 42.85%,
                var(--bar-4) 0 57.14%,
                var(--bar-5) 0 71.42%,
                var(--bar-6) 0 85.71%,
                var(--bar-7) 0 100%
            )
            0 0 / 100% 68% no-repeat,
        linear-gradient(
                to right,
                var(--bar-7) 0 14.28%,
                var(--black) 0 28.57%,
                var(--bar-5) 0 42.85%,
                var(--black) 0 57.14%,
                var(--bar-3) 0 71.42%,
                var(--black) 0 85.71%,
                var(--bar-1) 0 100%
            )
            0 72% / 100% 8% no-repeat,
        var(--black);
}

.ccv-bars::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6));
}

/* Switching on, once. Skipped for anyone who asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
    .ccv-bars {
        animation: ccv-on 0.55s ease-out;
    }
}

@keyframes ccv-on {
    from {
        filter: brightness(2.5);
        transform: scaleY(0.02);
    }
    60% {
        filter: brightness(1.6);
    }
}

/* OSD text: black label, white mono capitals */
.ccv-top a,
.ccv-top span,
.ccv-label,
.ccv-hint,
.ccv-keybar :is(button, a) {
    font: 700 0.8rem/1.2 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: #000;
}

/* Stays at the top while the page scrolls, so the way back is always there.
   Solid black with a white edge, like the key bar at the bottom. */
.ccv-top {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: #000;
    border-bottom: 2px solid #fff;
}

.ccv-top a,
.ccv-top span {
    padding: 0.4rem 0.7rem;
    text-decoration: none;
}

/* The way back to the rest of the site. It has to read as a button, not as
   another label, so it gets an outline. The arrow nudges toward the corner
   three times when the page opens (it never loops) and again on hover. */
.ccv-top a {
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.ccv-top a::before {
    content: "\25C2";
    content: "\25C2" / "";
    display: inline-block;
    margin-right: 0.6em;
    animation: ccv-nudge 0.7s ease-in-out 1.2s 3;
    transition: transform 0.15s;
}

.ccv-top a:hover::before,
.ccv-top a:focus-visible::before {
    transform: translateX(-0.25rem);
}

.ccv-top a:hover {
    color: #000;
    background: var(--accent);
    border-color: var(--accent);
}

.ccv-top a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@keyframes ccv-nudge {
    50% {
        transform: translateX(-0.4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccv-top a::before {
        animation: none;
        transition: none;
    }
}

/* The menu */
.ccv-panels {
    width: min(100% - 2rem, 42rem);
    margin: 1.5rem auto 6rem;
    display: grid;
    gap: 1.75rem;
}

/* First screen: mostly the bars, with the title like a TV's "no signal" label */
.ccv-hero {
    display: grid;
    min-height: 68dvh;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    text-align: center;
}

.ccv-label {
    padding: 0.9rem 1.5rem;
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.ccv-label h1 {
    font-size: clamp(1.1rem, 5vw, 1.9rem);
    line-height: 1.3;
}

.ccv-state {
    margin-top: 0.4rem;
    color: var(--accent);
}

.ccv-lede p + p {
    margin-top: 0.8rem;
}

.ccv-lede {
    max-width: 30rem;
    font-size: 0.85rem;
    line-height: 1.6;
    letter-spacing: 0.06em;
    outline: 0;
    padding: 0.6rem 1rem;
}

/* A menu panel: blue title bar, near-black body, hard shadow */
.ccv-panel {
    padding-bottom: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 2px solid #f4f4f4;
    box-shadow: 6px 6px 0 var(--hard-shadow);
}

.ccv-panel > h2 {
    padding: 0.4rem 1rem;
    font: 700 0.85rem/1.4 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bar-7);
}

.ccv-panel > :not(h2) {
    margin-inline: 1rem;
}

.ccv-panel > * + * {
    margin-top: 0.9rem;
}

.ccv-panel > h2 + * {
    margin-top: 1rem;
}

.ccv-panel a:not(.btn) {
    color: var(--accent);
}

.ccv-panel a:not(.btn):hover {
    color: var(--accent-2);
}

/* Facts as a readout: LABEL ........ value */
.ccv-readout {
    display: grid;
    gap: 0.4rem;
    font: 0.9rem/1.5 var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ccv-readout > div {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.ccv-readout dt {
    flex: none;
    font-weight: 700;
    color: var(--accent);
}

.ccv-readout dd {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: 0.5rem;
    text-align: right;
}

.ccv-readout dd::before {
    content: "";
    flex: 1;
    min-width: 1rem;
    border-bottom: 2px dotted var(--border);
}

/* Controls as big key caps */
.ccv-keys {
    display: grid;
    gap: 0.75rem;
    list-style: none;
}

.ccv-keys li {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ccv-keys kbd {
    flex: none;
    min-width: 4rem;
    padding: 0.35rem 0.8rem 0.25rem;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    border-bottom-width: 6px;
}

/* The feature list uses the site's ▸ marker */
.ccv-list {
    display: grid;
    gap: 0.5rem;
    list-style: none;
}

.ccv-list li {
    padding-left: 1.4rem;
    text-indent: -1.4rem;
}

.ccv-list li::before {
    content: "\25B8\00a0";
    color: var(--deco);
}

/* The two buttons along the bottom, like the app's keys */
.ccv-keybar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: #000;
    border-top: 2px solid #fff;
}

.ccv-keybar[hidden],
.ccv-hint[hidden] {
    display: none;
}

.ccv-keybar :is(button, a) {
    padding: 0.6rem 0.9rem;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 3px 3px 0 var(--hard-shadow);
}

.ccv-keybar :is(button, a):hover {
    color: #000;
    background: var(--accent);
}

.ccv-keybar :is(button, a):hover kbd {
    color: #000;
}

.ccv-keybar button[aria-pressed="true"] {
    color: #000;
    background: var(--accent);
    box-shadow: 0 0 0 var(--hard-shadow);
    transform: translate(3px, 3px);
}

.ccv-keybar :is(button, a):focus-visible {
    outline: 2px solid var(--deco);
    outline-offset: 3px;
}

.ccv-keybar kbd {
    margin-right: 0.35rem;
    padding: 0.1rem 0.4rem;
    color: #fff;
    background: transparent;
    border-width: 1px;
    border-bottom-width: 3px;
}

/* Menu hidden (the S key): just the picture */
.ccv-panels,
.ccv-top {
    transition: opacity 0.15s;
}

body.ccv-clear {
    overflow: hidden;
}

body.ccv-clear .ccv-panels,
body.ccv-clear .ccv-top {
    opacity: 0;
    visibility: hidden;
}

.ccv-hint {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    padding: 0.7rem 1.1rem;
    outline: 2px solid #fff;
    outline-offset: 3px;
    transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
    .ccv-panels,
    .ccv-top {
        transition: none;
    }
}

@media (max-width: 44rem) {
    html {
        font-size: 100%;
    }

    .ccv-panels {
        width: calc(100% - 1.5rem);
        margin-top: 1rem;
    }

    .ccv-top {
        padding: 0.5rem 0.75rem;
    }

    .ccv-readout {
        font-size: 0.8rem;
    }

    .ccv-keybar :is(button, a) {
        flex: 1;
        padding: 0.7rem 0.5rem;
        font-size: 0.75rem;
        letter-spacing: 0.08em;
    }
}