@layer sections {
  :root {
    interpolate-size: allow-keywords;
  }

  .about,
  .systems,
  .features,
  .screens,
  .keys,
  .install,
  .hup,
  .faq {
    position: relative;
    padding-block: clamp(5rem, 3rem + 7vw, 9rem);
  }

  .about,
  .screens,
  .install,
  .faq {
    background: var(--night-1);
  }

  .systems,
  .features,
  .keys,
  .hup {
    background: var(--night-2);
  }

  /* A horizon line between sections: magenta in the middle, fading out. */
  .systems::before,
  .features::before,
  .screens::before,
  .keys::before,
  .install::before,
  .hup::before,
  .faq::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(241 25 160 / 0.55), transparent);
  }

  .intro {
    max-width: 62ch;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    font-size: var(--step-1);
    color: var(--ink-2);
  }

  /* -------------------------------------------------------------------
     About: the app's own screen, banner and selectors on top, a window
     below, and a message window on top of that.
     ------------------------------------------------------------------- */
  .tui--about {
    padding: clamp(1rem, 3vw, 2.25rem);
    border: 1px solid #2b2040;
    border-radius: 12px;
    background: #0a0611;
    box-shadow:
      0 2.5rem 6rem rgb(0 0 0 / 0.55),
      inset 0 0 6rem rgb(130 228 220 / 0.04);
  }

  .tui-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem 3rem;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
  }

  .banner {
    font: 600 clamp(0.6rem, 0.42rem + 0.65vw, 0.98rem) / 1.12 var(--font-mono);
    white-space: pre;
  }

  /* The banner is the app's logo in the TUI's line colors. Its lines are
     drawn as generated content, like a background image, which keeps the
     dark lines out of the contrast checks for text. */
  .banner [data-art]::before {
    content: attr(data-art);
  }

  .banner .b1 { color: #3c4f92; }
  .banner .b2 { color: #bff1fe; }
  .banner .b3 { color: #1b0d35; }
  .banner .b4 { color: #7c8eb5; }
  .banner .b5 { color: #2d3588; }
  .banner .b6 { color: #b4effe; }
  .banner .b7 { color: #28254c; }
  .banner .bo { color: var(--magenta); }

  /* System and Sort share the first row, as in the app's header. */
  .selectors {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 0.6rem 1.5rem;
    font: 400 var(--step--1) / 1.2 var(--font-mono);
  }

  .selector {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .selector__label {
    display: grid;
    min-width: 7ch;
    text-align: right;
  }

  .selector__label kbd {
    all: unset;
    font-size: 0.9em;
    color: var(--ink-3);
  }

  .selector__box {
    display: flex;
    align-items: center;
    gap: 1ch;
    width: clamp(12rem, 28vw, 22rem);
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--blue);
    color: var(--ink);
  }

  .selector__box::before {
    content: "";
    width: 0.6em;
    height: 0.38em;
    background: var(--blue);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .selector--sort .selector__label {
    min-width: 5ch;
  }

  .selector--sort .selector__box {
    width: clamp(8rem, 13vw, 11rem);
  }

  @media (width < 40rem) {
    .selectors {
      grid-template-columns: auto;
    }

    .selector--sort .selector__label {
      min-width: 7ch;
    }

    .selector--sort .selector__box {
      width: clamp(12rem, 28vw, 22rem);
    }
  }

  .tui--window .tui__body {
    padding: clamp(1.25rem, 4vw, 3rem);
  }

  .prose p {
    color: var(--ink-2);
  }

  .prose .lead {
    font-size: var(--step-1);
    color: var(--ink);
  }

  .tui--msg {
    --c: var(--magenta);
    max-width: 44rem;
    margin-block: 2.5rem;
    margin-inline: auto clamp(-5.5rem, 4rem - 10vw, 0rem);
  }

  .msg-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    margin-bottom: 1.1rem;
    font: 400 var(--step--1) / 1.5 var(--font-mono);
  }

  .msg-head div {
    display: flex;
    gap: 0.8ch;
  }

  .msg-head dt {
    color: var(--ink-3);
  }

  .msg-head dt::after {
    content: ":";
  }

  .msg-head div:first-child dd {
    padding-inline: 0.5ch;
    color: #000;
    background: var(--yellow);
  }

  .msg-head dd {
    color: var(--ink);
  }

  .tui--msg blockquote {
    margin-block: 1.2rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--yellow);
    font-family: var(--font-mono);
    color: var(--ink);
  }

  .tui--msg blockquote p {
    color: var(--ink);
  }

  .tui--msg blockquote p + p {
    margin-top: 0.4rem;
    color: var(--pink);
  }

  .tui--msg strong {
    color: var(--yellow);
  }

  .tui--msg .tui__body > p + p,
  .tui--msg blockquote + p {
    margin-top: 1rem;
  }

  .prose .aside {
    font-family: var(--font-mono);
    color: var(--pink);
  }

  /* -------------------------------------------------------------------
     Systems: modem front panels; every LED is a capability.
     ------------------------------------------------------------------- */
  .modems {
    --gap: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
  }

  .modem {
    display: flex;
    flex: 0 1 calc((100% - 2 * var(--gap)) / 3);
    flex-direction: column;
    gap: 1rem;
    min-width: min(100%, 18rem);
  }

  @media (width < 64rem) {
    .modem {
      flex-basis: calc((100% - var(--gap)) / 2);
    }
  }

  .modem > p {
    color: var(--ink-2);
  }

  .modem .cmd {
    margin-top: auto;
  }

  .modem__plate {
    position: relative;
    container-type: inline-size;
    padding: 1.15rem 1.25rem 1.1rem;
    border-radius: 10px 10px 18px 18px;
    background:
      linear-gradient(100deg, rgb(255 255 255 / 0.06), transparent 40%),
      linear-gradient(#2b2534, #18141e 62%, #100d15);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.14),
      inset 0 -4px 0 rgb(0 0 0 / 0.55),
      0 0 0 1px #08060b,
      0 1.4rem 2.2rem rgb(0 0 0 / 0.5);
  }

  .modem__plate::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: min(4.6rem, 18cqi);
    height: 1.4rem;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, #07050a 0 3px, transparent 3px 7px);
  }

  .modem__name {
    margin-bottom: 1.15rem;
    font: 700 min(1.2rem, 6.2cqi) / 1.1 var(--font-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ebe5f7;
  }

  .modem__leds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.05rem;
    font: 600 0.7rem / 1 var(--font-mono);
    letter-spacing: 0.08em;
    color: #8c80a2;
  }

  .led {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
  }

  .led::before {
    content: "";
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #4b3e57, #231b2a);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.6);
  }

  .led--on {
    color: #d6fbf8;
  }

  .led--on::before {
    background: radial-gradient(circle at 40% 35%, #f2fffd, var(--cyan) 45%, #2e9d94);
    box-shadow: 0 0 0.45rem var(--cyan), 0 0 1.1rem rgb(130 228 220 / 0.45);
  }

  .led--rd,
  .led--sd {
    margin-left: auto;
  }

  .led--sd {
    margin-left: 0;
  }

  .led--rd::before,
  .led--sd::before {
    background: radial-gradient(circle at 40% 35%, #ffe6f5, var(--magenta) 50%, #8f0c5d);
    box-shadow: 0 0 0.45rem var(--magenta), 0 0 1rem rgb(241 25 160 / 0.5);
    animation: led-blink 1.7s steps(1, end) infinite;
  }

  .led--sd::before {
    animation-duration: 2.3s;
    animation-direction: reverse;
  }

  .modem:nth-child(2) .led::before { animation-delay: -0.6s; }
  .modem:nth-child(3) .led::before { animation-delay: -1.1s; }
  .modem:nth-child(4) .led::before { animation-delay: -0.3s; }
  .modem:nth-child(5) .led::before { animation-delay: -1.4s; }

  @keyframes led-blink {
    0%, 22%, 48%, 71% {
      background: radial-gradient(circle at 40% 35%, #4b3e57, #231b2a);
      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.6);
    }
    12%, 35%, 60%, 88% {
      background: radial-gradient(circle at 40% 35%, #ffe6f5, var(--magenta) 50%, #8f0c5d);
    }
  }

  .legend {
    margin-top: clamp(2rem, 4vw, 3rem);
    font: 400 var(--step--1) / 1.6 var(--font-mono);
    color: var(--ink-3);
  }

  .legend b {
    font-weight: 600;
    color: #d6fbf8;
  }

  /* -------------------------------------------------------------------
     Features: TUI windows of different sizes, each with a small
     illustration of what it describes.
     ------------------------------------------------------------------- */
  .bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: clamp(1.25rem, 2.4vw, 2rem);
  }

  .tile {
    --c: var(--blue);
    display: flex;
    flex-direction: column;
    grid-column: span 2;
  }

  .tile .tui__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(1rem, 2vw, 1.4rem);
  }

  .tile .tui__body > p {
    font-size: var(--step--1);
    color: var(--ink-2);
  }

  .tile--feed {
    --c: var(--cyan);
    grid-column: span 4;
  }

  .tile--wm {
    --c: var(--magenta);
    grid-row: span 2;
  }

  .tile--fast,
  .tile--sort { --c: var(--yellow); }

  .tile--open { --c: var(--magenta); }

  .tile--creds { --c: var(--cyan); }

  .tile--platforms {
    grid-column: span 4;
  }

  .tile:focus-visible {
    outline-offset: 6px;
  }

  @media (width < 64rem) {
    .bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tile,
    .tile--wm {
      grid-column: span 1;
      grid-row: auto;
    }

    .tile--feed,
    .tile--platforms {
      grid-column: span 2;
    }
  }

  @media (width < 40rem) {
    .bento {
      grid-template-columns: minmax(0, 1fr);
    }

    .tile,
    .tile--feed,
    .tile--platforms {
      grid-column: auto;
    }
  }

  /* One feed */
  .ill-feed {
    display: grid;
    grid-template-columns: auto minmax(2rem, 1fr) minmax(9rem, 15rem);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 0 0.75rem;
    height: 11.5rem;
  }

  .ill-feed__src {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    align-items: center;
    height: 100%;
    font: 600 0.72rem / 1 var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--ink-3);
  }

  .ill-feed__lines {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .ill-feed__src {
    grid-column: 1;
    grid-row: 1;
  }

  .ill-feed__lines path {
    fill: none;
    stroke: var(--cyan-deep);
    stroke-width: 1.5;
    stroke-dasharray: 3 9;
    vector-effect: non-scaling-stroke;
    animation: flow 1.1s linear infinite;
  }

  .ill-feed__lines path:nth-child(2n) {
    stroke: var(--magenta);
    animation-duration: 1.5s;
  }

  @keyframes flow {
    to { stroke-dashoffset: -12; }
  }

  .ill-feed__list {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem;
    border: 1.5px solid var(--cyan);
    background: var(--night-0);
  }

  .ill-feed__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
    font: 600 0.72rem / 1 var(--font-mono);
    color: var(--ink-3);
  }

  .spinner {
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid rgb(241 25 160 / 0.25);
    border-top-color: var(--magenta);
    border-radius: 50%;
    animation: spin 0.9s steps(8, end) infinite;
  }

  @keyframes spin {
    to { rotate: 1turn; }
  }

  .ill-feed__count {
    counter-reset: n var(--count);
    animation: count 6s linear infinite;
  }

  .ill-feed__count::after {
    content: counter(n) "/5 loaded";
  }

  @keyframes count {
    0% { --count: 0; }
    55%, 100% { --count: 5; }
  }

  .ill-feed .row {
    height: 0.9rem;
    border-radius: 2px;
    background:
      linear-gradient(90deg, var(--yellow) 0 2.2rem, transparent 2.2rem 2.6rem, rgb(236 230 246 / 0.55) 2.6rem 78%, transparent 78%);
    animation: row-in 6s steps(1, end) infinite;
    animation-delay: calc(var(--i) * 0.55s - 0.55s);
  }

  .ill-feed .row:nth-of-type(2n) {
    background:
      linear-gradient(90deg, var(--yellow) 0 1.6rem, transparent 1.6rem 2rem, rgb(236 230 246 / 0.55) 2rem 62%, transparent 62%);
  }

  @keyframes row-in {
    0% { opacity: 0; }
    6%, 92% { opacity: 1; }
  }

  /* Windows on windows */
  .tile--wm .tui__body {
    perspective: 1100px;
  }

  .ill-wm {
    position: relative;
    flex: 1;
    min-height: 15rem;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .ill-wm__win {
    position: absolute;
    display: block;
    width: 70%;
    height: 52%;
    border: 1.5px solid var(--wc, var(--cyan));
    background:
      repeating-linear-gradient(transparent 0 0.6rem, rgb(236 230 246 / 0.16) 0.6rem 0.95rem, transparent 0.95rem 1.4rem)
        0.8rem 2.2rem / calc(100% - 1.6rem) calc(100% - 2.9rem) no-repeat,
      var(--panel);
    box-shadow: 0.55rem 0.45rem 0 rgb(0 0 0 / 0.65);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .ill-wm__win b {
    display: block;
    font: 600 0.72rem / 1.6 var(--font-mono);
    text-align: center;
    color: var(--night-0);
    background: var(--wc, var(--cyan));
  }

  .ill-wm__win--1 {
    --wc: #4a3d61;
    left: 0;
    top: 0;
    width: 84%;
    height: 76%;
  }

  .ill-wm__win--1 b {
    color: var(--ink-2);
  }

  .ill-wm__win--2 {
    --wc: var(--cyan);
    left: 10%;
    top: 20%;
  }

  .ill-wm__win--3 {
    --wc: var(--magenta);
    left: 26%;
    top: 44%;
    width: 66%;
    height: 44%;
  }

  .tile--wm:is(:hover, :focus-visible) .ill-wm {
    transform: rotateX(22deg) rotateY(-34deg) scale(0.86);
  }

  .tile--wm:is(:hover, :focus-visible) .ill-wm__win--1 { transform: translateZ(-70px); }
  .tile--wm:is(:hover, :focus-visible) .ill-wm__win--2 { transform: translateZ(10px); }
  .tile--wm:is(:hover, :focus-visible) .ill-wm__win--3 { transform: translateZ(90px); }

  /* Threads */
  .ill-thread {
    display: grid;
    gap: 0.45rem;
    font: 600 0.75rem / 1 var(--font-mono);
  }

  .ill-thread li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 1.5rem;
    padding-left: var(--indent, 0);
  }

  .ill-thread li::after {
    content: "";
    flex: 1;
    height: 0.55rem;
    border-radius: 2px;
    background: rgb(236 230 246 / 0.3);
  }

  .ill-thread .d1 { --indent: 1.4rem; }
  .ill-thread .d2 { --indent: 2.8rem; }

  .ill-thread span {
    padding: 0.2rem 0.35rem;
    color: #000;
    background: var(--yellow);
  }

  .ill-thread .d2 span {
    background: var(--magenta);
    color: #fff;
  }

  .ill-thread kbd {
    order: 3;
    font-size: 0.72rem;
  }

  /* Inline images: a 96 px copy of the logo drawn with square pixels;
     hovering or focusing shows the full image. */
  .ill-pixels {
    position: relative;
    aspect-ratio: 847 / 525;
    max-height: 8.5rem;
    background:
      url("../img/logo/neonmodem-pixels.webp") center / contain no-repeat;
    image-rendering: pixelated;
  }

  .ill-pixels img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s;
  }

  .tile--images:is(:hover, :focus-visible) .ill-pixels img {
    opacity: 1;
  }

  /* Themes: the same mock in the dark and the light half of the theme. */
  .ill-theme {
    --bg: var(--night-0);
    --fg: rgb(236 230 246 / 0.45);
    --bar: var(--cyan);
    display: grid;
    gap: 0.45rem;
    padding: 0 0 0.7rem;
    border: 1.5px solid var(--bar);
    background: var(--bg);
    transition: background-color 0.4s, border-color 0.4s;
  }

  .ill-theme__bar {
    height: 1rem;
    background: var(--bar);
    transition: background-color 0.4s;
  }

  .ill-theme__row {
    height: 0.75rem;
    margin-inline: 0.7rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--fg) 0 70%, transparent 70%);
  }

  .ill-theme__row--sel {
    background: linear-gradient(90deg, var(--magenta) 0 85%, transparent 85%);
  }

  .tile--themes:is(:hover, :focus-visible) .ill-theme {
    --bg: #f6f3fb;
    --fg: rgb(51 51 51 / 0.55);
    --bar: #3fb7ad;
  }

  /* Sorting: the sort order picker with Hot selected. */
  .ill-sort {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--rule);
    font: 400 0.78rem / 1.5 var(--font-mono);
    color: var(--ink-2);
    background: var(--night-0);
  }

  .ill-sort li {
    padding-left: 0.7rem;
    border-left: 2px solid transparent;
  }

  .ill-sort .ill-sort__sel {
    border-left-color: var(--yellow);
    color: var(--magenta);
  }

  /* Open with: the dialog that lists the configured commands. */
  .ill-open {
    display: grid;
    gap: 0.2rem;
    padding-bottom: 0.7rem;
    border: 2px solid var(--cyan);
    font: 400 0.78rem / 1.5 var(--font-mono);
    color: var(--ink-2);
    background: var(--night-0);
    box-shadow: 0.5rem 0.4rem 0 rgb(0 0 0 / 0.6);
  }

  .ill-open__title {
    margin-bottom: 0.4rem;
    padding: 0.1rem 0.8rem;
    font-weight: 600;
    text-align: center;
    color: var(--night-0);
    background: var(--cyan);
  }

  .ill-open span {
    margin-inline: 0.9rem;
    padding-left: 0.7rem;
    border-left: 2px solid transparent;
  }

  .ill-open .ill-open__sel {
    border-left-color: var(--yellow);
    color: var(--magenta);
  }

  /* Password managers: a credential read from a command. */
  .ill-toml {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--rule);
    font: 400 0.78rem / 1.6 var(--font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink-2);
    background: var(--night-0);
  }

  .ill-toml__sec { color: var(--blue); }
  .ill-toml__key { color: var(--cyan); }
  .ill-toml__str { color: var(--yellow); }

  /* Read-only: the last lines of the username menu. */
  .ill-prompt {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--rule);
    font: 400 0.78rem / 1.5 var(--font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink-2);
    background: var(--night-0);
  }

  .ill-prompt b {
    font-weight: 600;
    color: var(--cyan);
  }

  .caret {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    vertical-align: -0.2em;
    background: var(--cyan);
    animation: caret 1.06s steps(1, end) infinite;
  }

  @keyframes caret {
    50% { opacity: 0; }
  }

  /* Fast: measured load times as bars. */
  .speeds {
    display: grid;
    gap: 0.8rem;
    font-size: var(--step--1);
  }

  .speeds div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem 1rem;
  }

  .speeds dt {
    color: var(--ink-2);
  }

  .speeds dd {
    font: 600 var(--step-0) / 1 var(--font-mono);
    color: var(--yellow);
  }

  .speeds div::after {
    content: "";
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--yellow), var(--magenta)) 0 0 / var(--w, 50%) 100% no-repeat,
      rgb(255 255 255 / 0.06);
  }

  .speeds div:nth-child(1) { --w: 87%; }
  .speeds div:nth-child(2) { --w: 93%; }
  .speeds div:nth-child(3) { --w: 27%; }
  .speeds div:nth-child(4) { --w: 20%; }

  .note {
    font: 400 0.78rem / 1.5 var(--font-mono);
    color: var(--ink-3) !important;
  }

  /* Single binary */
  .ill-file {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font: 600 0.8rem / 1 var(--font-mono);
  }

  .ill-file span {
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--magenta);
    color: var(--ink);
    background: rgb(241 25 160 / 0.1);
  }

  .ill-file span + span {
    border-color: var(--cyan);
    background: rgb(130 228 220 / 0.08);
  }

  .ill-file span + span::after {
    content: " 0600";
    color: var(--ink-3);
  }

  /* Platforms */
  .marquee {
    display: grid;
    gap: 0.6rem;
    overflow: hidden;
    mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }

  .marquee__row {
    display: flex;
    gap: 0.6rem;
    width: max-content;
    font: 600 0.78rem / 1 var(--font-mono);
    animation: marquee 48s linear infinite;
  }

  .marquee__row--rev {
    animation-direction: reverse;
    animation-duration: 56s;
  }

  .marquee__row span {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--rule);
    color: var(--ink-2);
    background: var(--night-0);
  }

  .marquee:hover .marquee__row {
    animation-play-state: paused;
  }

  @keyframes marquee {
    to { translate: -50% 0; }
  }

  /* -------------------------------------------------------------------
     Screenshots: a CRT in the beige of the 3278 with eight channels.
     ------------------------------------------------------------------- */
  .tv {
    position: relative;
  }

  .tv__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .tv__set {
    max-width: 60rem;
    margin-inline: auto;
    padding: clamp(0.9rem, 3vw, 2.2rem) clamp(0.9rem, 3vw, 2.2rem) clamp(1rem, 2.5vw, 1.8rem);
    border-radius: clamp(1.2rem, 3vw, 2.4rem);
    background:
      radial-gradient(120% 90% at 25% 15%, #ece7d6, transparent 60%),
      linear-gradient(#e2dcc8, #c6bfa7);
    box-shadow:
      inset 0 0.3rem 0 rgb(255 255 255 / 0.55),
      inset 0 -0.6rem 0 rgb(0 0 0 / 0.14),
      0 0 0 1px #8b846f,
      0 2.5rem 5rem rgb(0 0 0 / 0.55),
      0 0 6rem rgb(241 25 160 / 0.12);
  }

  .tv__glass {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: clamp(0.9rem, 2.5vw, 1.7rem) / clamp(1.1rem, 3vw, 2rem);
    background: #000;
    box-shadow:
      0 0 0 clamp(0.4rem, 1vw, 0.7rem) #1d1a20,
      0 0 0 clamp(0.55rem, 1.3vw, 0.95rem) #2f2b34,
      0 0 2.5rem rgb(130 228 220 / 0.25);
  }

  .tv__glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background:
      repeating-linear-gradient(0deg, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px),
      radial-gradient(70% 55% at 28% 18%, rgb(255 255 255 / 0.12), transparent 60%),
      radial-gradient(120% 120% at 50% 50%, transparent 58%, rgb(0 0 0 / 0.6));
    box-shadow: inset 0 0 3rem rgb(0 0 0 / 0.7);
    pointer-events: none;
  }

  .ch {
    position: absolute;
    inset: 0;
    display: none;
    animation: roll 0.55s cubic-bezier(0.3, 0.7, 0.3, 1) both;
  }

  .ch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Static noise for a moment after a channel change. */
  .ch::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .85 0 0 0 0 .95 0 0 0 1.6 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
      0 0 / 180px 180px,
      #16121b;
    opacity: 0;
    pointer-events: none;
    animation: static 0.42s steps(5, end) backwards;
  }

  @keyframes static {
    0% { opacity: 1; background-position: 0 0, 0 0; }
    40% { opacity: 1; background-position: 63px 41px, 0 0; }
    80% { opacity: 0.6; background-position: 17px 97px, 0 0; }
    100% { opacity: 0; background-position: 101px 13px, 0 0; }
  }

  @keyframes roll {
    0% { translate: 0 -8%; filter: brightness(2.4) saturate(0.4); }
    45% { translate: 0 2%; }
    100% { translate: 0 0; filter: none; }
  }

  .ch figcaption {
    position: absolute;
    inset: auto 0 0;
    z-index: 4;
    padding: 2.5rem clamp(1rem, 3vw, 1.75rem) clamp(0.9rem, 2.4vw, 1.4rem);
    font-size: var(--step--1);
    color: var(--ink);
    background: linear-gradient(transparent, rgb(5 3 10 / 0.92) 55%);
  }

  /* On a phone the caption would cover most of the picture, hence it
     follows the picture, and the scanlines stay on the picture. */
  @media (width < 40rem) {
    .tv__glass {
      aspect-ratio: auto;
    }

    .tv__glass::after {
      bottom: auto;
      aspect-ratio: 4 / 3;
    }

    .ch {
      position: relative;
    }

    .ch img {
      height: auto;
    }

    /* Room for the longest caption, so the channel buttons don't move
       when the channel changes. */
    .ch figcaption {
      position: static;
      min-height: calc(3lh + 1.25rem + clamp(0.9rem, 2.4vw, 1.4rem));
      padding-top: 0.9rem;
      background: none;
    }
  }

  @media (width < 26.25rem) {
    .ch figcaption {
      min-height: calc(4lh + 1.25rem + clamp(0.9rem, 2.4vw, 1.4rem));
    }
  }

  .tv__zoom {
    position: absolute;
    top: clamp(0.6rem, 2vw, 1rem);
    right: clamp(0.6rem, 2vw, 1rem);
    z-index: 4;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--cyan);
    border-radius: 4px;
    font: 600 0.78rem / 1 var(--font-mono);
    color: var(--cyan);
    background: rgb(5 3 10 / 0.75);
  }

  .tv__zoom:hover {
    color: var(--night-0);
    background: var(--cyan);
  }

  .tv__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  }

  .tv__label {
    margin-right: 0.3rem;
    font: 600 0.78rem / 1 var(--font-mono);
    letter-spacing: 0.12em;
    color: #6d6653;
  }

  .tv__panel label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6rem 0.85rem;
    border-radius: 0.4rem;
    font: 600 0.82rem / 1 var(--font-mono);
    color: #3b362f;
    background: linear-gradient(#f6f2e6, #d9d2bc);
    box-shadow:
      inset 0 1px 0 #fff,
      0 0.32rem 0 #a49c84,
      0 0.5rem 0.7rem rgb(0 0 0 / 0.3);
    cursor: pointer;
    user-select: none;
    transition: translate 0.08s, box-shadow 0.08s;
  }

  .tv__panel label b {
    color: var(--magenta);
  }

  /* Two rows of five buttons with the CH label in front of both. */
  @media (width >= 40rem) {
    .tv__panel {
      display: grid;
      grid-template-columns: auto repeat(5, auto);
      justify-content: center;
    }

    .tv__label {
      grid-row: span 2;
    }
  }

  .tv__panel label:hover {
    background: linear-gradient(#fffcf2, #e2dcc7);
  }

  /* Zoom view */
  .zoom {
    width: min(94vw, 82rem);
    max-height: 94vh;
    padding: 0;
    overflow: auto;
    border: 2px solid var(--cyan);
    border-radius: 6px;
    color: var(--ink);
    background: var(--night-0);
    box-shadow: 1rem 0.8rem 0 rgb(0 0 0 / 0.6);
    opacity: 1;
    scale: 1;
    transition:
      opacity 0.2s,
      scale 0.2s,
      overlay 0.2s allow-discrete,
      display 0.2s allow-discrete;
  }

  .zoom:not(:popover-open) {
    opacity: 0;
    scale: 0.96;
  }

  @starting-style {
    .zoom:popover-open {
      opacity: 0;
      scale: 0.96;
    }
  }

  .zoom::backdrop {
    background: rgb(5 3 10 / 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  /* The zoom view shows the image of the checked channel. Previous and
     Next are labels of the channel radios, which switch the TV and the
     zoom view together. With the keyboard the radios stay reachable
     while the zoom view is open. */
  .zoom__img {
    display: none;
    width: 100%;
    height: auto;
    animation: roll 0.55s cubic-bezier(0.3, 0.7, 0.3, 1) both;
  }

  .zoom__step {
    display: none;
  }

  .zoom__nav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.8rem;
  }

  .zoom__nav :is(button, label) {
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--cyan);
    border-radius: 4px;
    font: 600 var(--step--1) / 1 var(--font-mono);
    color: var(--cyan);
    background: transparent;
    cursor: pointer;
    user-select: none;
  }

  .zoom__nav :is(button, label):hover {
    color: var(--night-0);
    background: var(--cyan);
  }

  /* -------------------------------------------------------------------
     Keys: the keyboard and the reference light each other up.
     ------------------------------------------------------------------- */
  .keys__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  @media (width < 60rem) {
    .keys__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (width >= 60rem) {
    .kb {
      position: sticky;
      top: calc(var(--bar-h) + 2rem);
    }
  }

  .kb {
    position: relative;
    padding: clamp(0.7rem, 2vw, 1.3rem);
    border-radius: 1rem;
    background: linear-gradient(#ddd7c4, #c3bca4);
    box-shadow:
      inset 0 0.25rem 0 rgb(255 255 255 / 0.5),
      inset 0 -0.6rem 0 rgb(0 0 0 / 0.16),
      0 0 0 1px #8b846f,
      0 2rem 4rem rgb(0 0 0 / 0.5);
    transform: perspective(1400px) rotateX(16deg);
    transform-origin: 50% 100%;
  }

  .kb__row {
    display: flex;
    gap: clamp(0.2rem, 0.6vw, 0.4rem);
  }

  .kb__row + .kb__row {
    margin-top: clamp(0.2rem, 0.6vw, 0.4rem);
  }

  .k {
    display: grid;
    flex: 1 1 0;
    place-items: center;
    min-width: 0;
    height: clamp(1.7rem, 3.6vw, 2.7rem);
    padding-bottom: 0.25rem;
    border-radius: 0.35rem;
    font: 600 clamp(0.55rem, 0.4rem + 0.4vw, 0.8rem) / 1 var(--font-mono);
    color: #5a5446;
    background: linear-gradient(#fcf9f0, #e5dfcd);
    box-shadow: inset 0 -0.3rem 0 #c2bba4, 0 0.14rem 0 #8b846f;
    transition: translate 0.1s, box-shadow 0.1s, background 0.1s;
  }

  .k--w15 { flex-grow: 1.5; }
  .k--w18 { flex-grow: 1.8; }
  .k--w2 { flex-grow: 2; }
  .k--w22 { flex-grow: 2.2; }
  .k--w23 { flex-grow: 2.3; }
  .k--w27 { flex-grow: 2.7; }
  .k--space { flex-grow: 6.5; }

  .k--used {
    color: #fff;
    background: linear-gradient(#ff5ab9, var(--magenta));
    box-shadow:
      inset 0 -0.3rem 0 #a30f6b,
      0 0.14rem 0 #5d0a3d,
      0 0 1rem rgb(241 25 160 / 0.5);
  }

  .keymaps {
    display: grid;
    gap: 2.2rem;
  }

  .keymap {
    width: 100%;
    font-size: var(--step--1);
  }

  .keymap caption {
    padding-bottom: 0.6rem;
    font: 600 var(--step-0) / 1.2 var(--font-mono);
    text-align: left;
    color: var(--cyan);
  }

  .keymap tr {
    border-top: 1px solid var(--rule);
    transition: background-color 0.15s;
  }

  .keymap th {
    width: 7.5rem;
    padding: 0.5rem 1rem 0.5rem 0.4rem;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
  }

  .keymap td {
    padding: 0.5rem 0.4rem 0.5rem 0;
    color: var(--ink-2);
  }

  .keymap tr:hover {
    background: rgb(241 25 160 / 0.12);
  }

  /* -------------------------------------------------------------------
     Install: three steps, tabs made of radio buttons.
     ------------------------------------------------------------------- */
  .steps {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    max-width: 58rem;
    counter-reset: step;
  }

  .step {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0.9rem 1.4rem;
    counter-increment: step;
  }

  .step::before {
    content: counter(step);
    grid-row: 1 / span 6;
    font: 700 var(--step-3) / 1 var(--font-display);
    color: var(--magenta);
    text-shadow: 0 0 1.2rem rgb(241 25 160 / 0.6);
  }

  .step > * {
    grid-column: 2;
  }

  .step > p {
    max-width: 64ch;
    color: var(--ink-2);
  }

  .step__title {
    font-size: var(--step-2);
  }

  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .tabs__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .tabs__tab {
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    font: 600 var(--step--1) / 1 var(--font-mono);
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
  }

  .tabs__tab:hover {
    color: var(--ink);
    border-color: var(--cyan);
  }

  .tabs__radio:checked + .tabs__tab {
    border-color: var(--cyan);
    color: var(--night-0);
    background: var(--cyan);
  }

  .tabs__radio:focus-visible + .tabs__tab {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
  }

  .tabs__panel {
    display: none;
    flex: 1 0 100%;
    min-width: 0;
    margin-top: 0.6rem;
  }

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

  .tabs__panel > p {
    max-width: 64ch;
    color: var(--ink-2);
  }

  .term-out code > span {
    display: inline-block;
    max-width: 100%;
  }

  .term-out .ln {
    width: calc(var(--n) * 1ch);
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    animation: type-ln 0.9s steps(var(--n), end) backwards;
  }

  @keyframes type-ln {
    from { width: 0; }
  }

  /* The command types out, then the lines of the transcript appear one
     after the other. */
  .term-out code > span:nth-child(2) { animation-delay: 1s; }
  .term-out code > span:nth-child(3) { animation-delay: 1.25s; }
  .term-out code > span:nth-child(4) { animation-delay: 1.5s; }
  .term-out code > span:nth-child(5) { animation-delay: 1.75s; }
  .term-out code > span:nth-child(6) { animation-delay: 2s; }
  .term-out code > span:nth-child(7) { animation-delay: 2.25s; }
  .term-out code > span:nth-child(8) { animation-delay: 2.5s; }
  .term-out code > span:nth-child(9) { animation-delay: 2.75s; }
  .term-out code > span:nth-child(10) { animation-delay: 3s; }
  .term-out code > span:nth-child(11) { animation-delay: 3.25s; }
  .term-out code > span:nth-child(12) { animation-delay: 3.5s; }
  .term-out code > span:nth-child(13) { animation-delay: 3.75s; }
  .term-out code > span:nth-child(14) { animation-delay: 4s; }
  .term-out code > span:nth-child(15) { animation-delay: 4.25s; }
  .term-out code > span:nth-child(16) { animation-delay: 4.5s; }

  .term-out .out {
    animation: appear 0.01s backwards;
  }

  /* The option picked in a menu and what was typed at a prompt. */
  .term-out .pick {
    color: var(--cyan);
  }

  .term-out .in {
    color: var(--ink);
  }

  .term-out {
    container: term / inline-size;
  }

  .term-out .out {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* The longest command has 69 characters. In a narrower box the commands
     wrap and appear without typing. */
  @container term (width < 69ch) {
    .term-out .ln {
      width: auto;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      animation: none;
    }
  }

  .paths {
    width: 100%;
    margin-top: 0.4rem;
    font-size: var(--step--1);
  }

  .paths caption {
    padding-bottom: 0.5rem;
    font: 600 var(--step--1) / 1.2 var(--font-mono);
    text-align: left;
    color: var(--cyan);
  }

  .paths tr {
    border-top: 1px solid var(--rule);
  }

  .paths th {
    padding: 0.5rem 1rem 0.5rem 0;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
    color: var(--ink-2);
  }

  .paths td {
    padding: 0.5rem 0;
  }

  .paths code {
    overflow-wrap: anywhere;
  }

  @media (width < 40rem) {
    .step {
      grid-template-columns: minmax(0, 1fr);
    }

    .step::before {
      grid-row: auto;
    }

    .step > * {
      grid-column: 1;
    }
  }

  /* -------------------------------------------------------------------
     Hyperuplink
     ------------------------------------------------------------------- */
  .hup__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  @media (width < 56rem) {
    .hup__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .hup__art {
    display: block;
    perspective: 1200px;
  }

  .hup__art img {
    border-radius: 8px;
    box-shadow:
      var(--shadow-hard),
      0 0 3.5rem rgb(108 161 208 / 0.3);
    transform: rotateY(10deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .hup__art:hover img,
  .hup__art:focus-visible img {
    transform: none;
  }

  .hup__copy {
    container-type: inline-size;
  }

  .hup__copy .chrome {
    font-size: min(var(--step-chrome), 8.6cqi);
  }

  .hup__copy p:not([class]) {
    color: var(--ink-2);
  }

  .hup__copy p + p {
    margin-top: 1rem;
  }

  .hup__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem !important;
  }

  /* -------------------------------------------------------------------
     FAQ: a BBS menu.
     ------------------------------------------------------------------- */
  .faq__list {
    display: grid;
    gap: 0.75rem;
    max-width: 54rem;
    counter-reset: q;
  }

  .faq details {
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--panel);
    counter-increment: q;
    transition: border-color 0.2s;
  }

  .faq details[open] {
    border-color: var(--cyan);
  }

  .faq summary {
    display: flex;
    gap: 1.1rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::before {
    content: "[" counter(q) "]";
    flex: none;
    min-width: 3ch;
    font-family: var(--font-mono);
    color: var(--magenta);
  }

  .faq summary::after {
    content: "+";
    margin-left: auto;
    font-family: var(--font-mono);
    color: var(--ink-3);
    transition: rotate 0.25s;
  }

  .faq details[open] summary::after {
    rotate: 45deg;
    color: var(--cyan);
  }

  .faq summary:hover {
    color: #fff;
  }

  .faq details > p {
    max-width: 68ch;
    padding: 0 1.25rem 1.25rem calc(1.25rem + 4.1ch + 1.1rem);
    color: var(--ink-2);
  }

  @media (width < 40rem) {
    .faq details > p {
      padding-left: 1.25rem;
    }
  }

  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 0.3s ease,
      content-visibility 0.3s allow-discrete;
  }

  .faq details[open]::details-content {
    block-size: auto;
  }

  /* -------------------------------------------------------------------
     Footer: dawn over the same skyline.
     ------------------------------------------------------------------- */
  .dawn {
    position: relative;
    overflow: clip;
    padding-top: clamp(15rem, 28vw, 24rem);
    background: #030106;
  }

  .dawn__scene {
    position: absolute;
    inset: 0 0 auto;
    height: clamp(15rem, 28vw, 24rem);
    overflow: hidden;
  }

  .dawn__sky {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(45% 80% at 50% 100%, rgb(255 154 60 / 0.6), transparent 70%),
      radial-gradient(90% 60% at 50% 100%, rgb(241 25 160 / 0.45), transparent 75%),
      linear-gradient(var(--night-1), #2a0f3a 35%, #6a1a52 70%, #c43a63);
  }

  .dawn__sun {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: clamp(13rem, 32vw, 28rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(var(--yellow) 8%, #ff9a3c 45%, var(--magenta) 88%);
    mask: linear-gradient(
      #000 0 48%,
      transparent 48% 52%,
      #000 52% 59%,
      transparent 59% 64%,
      #000 64% 70%,
      transparent 70% 76%,
      #000 76% 81%,
      transparent 81% 88%,
      #000 88% 92%,
      transparent 92%
    );
    translate: -50% 22%;
  }

  .dawn__skyline {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: 72%;
    max-width: none;
  }

  .dawn__skyline-fill {
    fill: #030106;
  }

  .dawn__skyline-line {
    fill: none;
    stroke: #ff7ab8;
    stroke-width: 3;
  }

  .dawn__copy {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.6rem;
    padding-block: clamp(1rem, 3vw, 2rem) 3.5rem;
    text-align: center;
  }

  .nocarrier {
    font: 600 var(--step-3) / 1 var(--font-mono);
    letter-spacing: 0.12em;
    color: var(--ink);
  }

  .nocarrier::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.95em;
    margin-left: 0.35em;
    vertical-align: -0.1em;
    background: var(--cyan);
    animation: caret 1.06s steps(1, end) infinite;
  }

  .dawn__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    font: 500 var(--step--1) / 1.5 var(--font-mono);
  }

  .credits {
    max-width: 64ch;
    font-size: var(--step--1);
    color: var(--ink-3);
  }

  .credits a {
    color: var(--ink-2);
  }
}

/* Generated: one rule per channel, tab and key. */
@layer sections {
  .tv:has(#ch-1:checked) .ch--1 { display: block; }
  .tv:has(#ch-2:checked) .ch--2 { display: block; }
  .tv:has(#ch-3:checked) .ch--3 { display: block; }
  .tv:has(#ch-4:checked) .ch--4 { display: block; }
  .tv:has(#ch-5:checked) .ch--5 { display: block; }
  .tv:has(#ch-6:checked) .ch--6 { display: block; }
  .tv:has(#ch-7:checked) .ch--7 { display: block; }
  .tv:has(#ch-8:checked) .ch--8 { display: block; }
  .tv:has(#ch-9:checked) .ch--9 { display: block; }
  .tv:has(#ch-10:checked) .ch--10 { display: block; }
  .screens:has(#ch-1:checked) :is(.zoom__img--1, .zoom__step--1) { display: block; }
  .screens:has(#ch-2:checked) :is(.zoom__img--2, .zoom__step--2) { display: block; }
  .screens:has(#ch-3:checked) :is(.zoom__img--3, .zoom__step--3) { display: block; }
  .screens:has(#ch-4:checked) :is(.zoom__img--4, .zoom__step--4) { display: block; }
  .screens:has(#ch-5:checked) :is(.zoom__img--5, .zoom__step--5) { display: block; }
  .screens:has(#ch-6:checked) :is(.zoom__img--6, .zoom__step--6) { display: block; }
  .screens:has(#ch-7:checked) :is(.zoom__img--7, .zoom__step--7) { display: block; }
  .screens:has(#ch-8:checked) :is(.zoom__img--8, .zoom__step--8) { display: block; }
  .screens:has(#ch-9:checked) :is(.zoom__img--9, .zoom__step--9) { display: block; }
  .screens:has(#ch-10:checked) :is(.zoom__img--10, .zoom__step--10) { display: block; }
  .tv:has(#ch-1:checked) label[for="ch-1"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-2:checked) label[for="ch-2"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-3:checked) label[for="ch-3"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-4:checked) label[for="ch-4"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-5:checked) label[for="ch-5"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-6:checked) label[for="ch-6"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-7:checked) label[for="ch-7"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-8:checked) label[for="ch-8"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-9:checked) label[for="ch-9"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-10:checked) label[for="ch-10"] { translate: 0 0.28rem; box-shadow: inset 0 1px 0 #fff, 0 0.04rem 0 #a49c84, 0 0.15rem 0.3rem rgb(0 0 0 / 0.3); background: linear-gradient(#e9e3d0, #cfc8b1); }
  .tv:has(#ch-1:focus-visible) label[for="ch-1"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tv:has(#ch-2:focus-visible) label[for="ch-2"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tv:has(#ch-3:focus-visible) label[for="ch-3"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tv:has(#ch-4:focus-visible) label[for="ch-4"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tv:has(#ch-5:focus-visible) label[for="ch-5"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tv:has(#ch-6:focus-visible) label[for="ch-6"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tv:has(#ch-7:focus-visible) label[for="ch-7"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tv:has(#ch-8:focus-visible) label[for="ch-8"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tv:has(#ch-9:focus-visible) label[for="ch-9"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tv:has(#ch-10:focus-visible) label[for="ch-10"] { outline: 2px solid var(--magenta); outline-offset: 3px; }
  .tabs:has(#get-bin:checked) > [data-tab="get-bin"] { display: block; }
  .tabs:has(#get-aur:checked) > [data-tab="get-aur"] { display: block; }
  .tabs:has(#get-netbsd:checked) > [data-tab="get-netbsd"] { display: block; }
  .tabs:has(#get-src:checked) > [data-tab="get-src"] { display: block; }
  .tabs:has(#con-lemmy:checked) > [data-tab="con-lemmy"] { display: block; }
  .tabs:has(#con-discourse:checked) > [data-tab="con-discourse"] { display: block; }
  .tabs:has(#con-lobsters:checked) > [data-tab="con-lobsters"] { display: block; }
  .tabs:has(#con-hn:checked) > [data-tab="con-hn"] { display: block; }
  .tabs:has(#con-hup:checked) > [data-tab="con-hup"] { display: block; }
  .keys:has(.k[data-k="esc"]:hover) tr[data-k="esc"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="bang"]:hover) tr[data-k="bang"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="num"]:hover) tr[data-k="num"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="tab"]:hover) tr[data-k="tab"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="q"]:hover) tr[data-k="q"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="e"]:hover) tr[data-k="e"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="r"]:hover) tr[data-k="r"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="t"]:hover) tr[data-k="t"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="o"]:hover) tr[data-k="o"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="s"]:hover) tr[data-k="s"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="j"]:hover) tr[data-k="j"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="k"]:hover) tr[data-k="k"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="enter"]:hover) tr[data-k="enter"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="z"]:hover) tr[data-k="z"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="n"]:hover) tr[data-k="n"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(.k[data-k="slash"]:hover) tr[data-k="slash"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(tr[data-k="esc"]:hover) .k[data-k="esc"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="bang"]:hover) .k[data-k="bang"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="num"]:hover) .k[data-k="num"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="tab"]:hover) .k[data-k="tab"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="q"]:hover) .k[data-k="q"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="e"]:hover) .k[data-k="e"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="r"]:hover) .k[data-k="r"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="t"]:hover) .k[data-k="t"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="o"]:hover) .k[data-k="o"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="s"]:hover) .k[data-k="s"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="j"]:hover) .k[data-k="j"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="k"]:hover) .k[data-k="k"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="enter"]:hover) .k[data-k="enter"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="z"]:hover) .k[data-k="z"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="n"]:hover) .k[data-k="n"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-k="slash"]:hover) .k[data-k="slash"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(tr[data-mod="ctrl"]:hover) .k[data-k="ctrl"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(.k[data-k="ctrl"]:hover) tr[data-mod="ctrl"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(tr[data-mod="shift"]:hover) .k[data-k="shift"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
  .keys:has(.k[data-k="shift"]:hover) tr[data-mod="shift"] { background: rgb(255 213 0 / 0.14); }
  .keys:has(tr[data-k="r"]:hover) .k[data-k="enter"] { translate: 0 0.22rem; color: #000; background: linear-gradient(#fff36b, var(--yellow)); box-shadow: inset 0 -0.1rem 0 #b39500, 0 0.04rem 0 #6b5a00, 0 0 1.4rem rgb(255 213 0 / 0.7); }
}