@layer scene {
  /* -------------------------------------------------------------------
     CRT power-on, once per page load. The resting state is invisible, so
     without animations nothing is drawn.
     ------------------------------------------------------------------- */
  body::before,
  body::after {
    content: "";
    position: fixed;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
  }

  body::before {
    inset: 0;
    background: #000;
    animation: boot-black 1s ease-in backwards;
  }

  body::after {
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #e9fffd;
    box-shadow: 0 0 1.2rem 0.15rem #82e4dc;
    animation: boot-line 1s ease-out backwards;
  }

  @keyframes boot-black {
    0%, 42% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes boot-line {
    0% { opacity: 1; transform: scale(0, 1); }
    28% { opacity: 1; transform: scale(1, 1); }
    52% { opacity: 0.55; transform: scale(1, 180); }
    100% { opacity: 0; transform: scale(1, 260); }
  }

  /* -------------------------------------------------------------------
     Hero: the logo composition on a 1920x1152 artboard. The artboard
     keeps its pixel coordinates and is scaled as a whole; --k is the
     scale factor as a plain number (tan(atan2()) turns the length ratio
     into one).
     The copy starts at 80% of the artboard height and needs --copy-h
     below that. The tip of the triangle is at 18.5%, and --art-top keeps
     it under the header. The third term of --art-w shrinks the artboard
     on short screens until the copy and the modem line fit in --hero-h.
     ------------------------------------------------------------------- */
  .hero {
    --hero-h: max(100svh, 38rem);
    --copy-h: 20rem;
    --art-w: min(
      200vw,
      150svh,
      calc((var(--hero-h) - var(--bar-h) - var(--copy-h)) / 0.384)
    );
    --art-h: calc(var(--art-w) * 0.6);
    --art-top: max(
      calc(var(--bar-h) - var(--art-h) * 0.16),
      calc(var(--hero-h) - var(--copy-h) - var(--art-h) * 0.79)
    );
    --k: tan(atan2(var(--art-w), 1920px));

    position: relative;
    isolation: isolate;
    min-height: var(--hero-h);
    overflow: clip;
    transition:
      --px 1.4s cubic-bezier(0.2, 0.7, 0.2, 1),
      --py 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* The tagline wraps to four lines on a phone. */
  @media (width < 44rem) {
    .hero {
      --copy-h: 23.5rem;
    }
  }

  /* The hero's bottom edge fades into the terminal stage below it. */
  .hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 18svh;
    background: linear-gradient(transparent, var(--night-0));
    pointer-events: none;
  }

  .hero__sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(120% 70% at 50% 62%, var(--haze) 0%, #1c0d30 38%, var(--night-1) 62%, var(--night-0) 100%);
  }

  .hero__sky::before,
  .hero__sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 27% 8%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 44% 22%, #d9fffb 50%, transparent 51%),
      radial-gradient(1px 1px at 63% 11%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 78% 26%, #ffe3f6 50%, transparent 51%),
      radial-gradient(1px 1px at 91% 7%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 5% 34%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 55% 37%, #fff 50%, transparent 51%);
    background-size: 640px 420px;
    opacity: 0.55;
  }

  .hero__sky::after {
    background-size: 910px 560px;
    background-position: 230px 90px;
    animation: twinkle 4.6s ease-in-out infinite alternate;
  }

  @keyframes twinkle {
    from { opacity: 0.15; }
    to { opacity: 0.75; }
  }

  .hero__art {
    position: absolute;
    left: 50%;
    top: var(--art-top);
    width: 1920px;
    height: 1152px;
    margin-left: -960px;
    perspective: 1500px;
    transform: scale(var(--k));
    transform-origin: 50% 0;
    pointer-events: none;
  }

  .hero__art > * {
    position: absolute;
  }

  .art-stars {
    left: 65px;
    top: 25px;
    width: 1764px;
    height: 980px;
    max-width: none;
    translate: calc(var(--px) * -14px) calc(var(--py) * -8px);
  }

  .art-skyline {
    inset: 0;
    width: 1920px;
    height: 1152px;
    max-width: none;
    overflow: visible;
    translate: calc(var(--px) * -24px) calc(var(--py) * -6px);
  }

  .art-skyline__haze {
    fill: none;
    stroke: var(--cyan-deep);
    stroke-width: 16;
    opacity: 0.5;
  }

  .art-skyline__fill {
    fill: #030106;
  }

  .art-skyline__line {
    fill: none;
    stroke: #4fc8be;
    stroke-width: 3;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: draw 2.2s cubic-bezier(0.5, 0, 0.3, 1) 0.6s backwards;
  }

  .art-skyline__dot {
    fill: #d6fffb;
    filter: drop-shadow(0 0 6px #82e4dc) drop-shadow(0 0 14px #4cc4ba);
  }

  @keyframes draw {
    from { stroke-dashoffset: 1; }
  }

  .art-signal {
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 22%, #b8fff8 34%, rgb(130 228 220 / 0.6) 50%, transparent 70%);
    offset-path: path("M0 589H227V681H262V498H289V530H339V643H378V550H436V589H465V720H517V564H574V639H599V491H642V581H696V493H780V654H795V589H822V730H841V558H868V678H889V524H946V589H1000V556H1043V589H1120V456H1168V589H1194V711H1218V633H1303V514H1330V620H1351V589H1396V719H1413V539H1470V589H1493V562H1529V514H1565V658H1597V482H1624V521H1680V589H1751");
    offset-rotate: 0deg;
    offset-distance: 100%;
    translate: calc(var(--px) * -24px) calc(var(--py) * -6px);
    animation: signal 16s linear 2.8s infinite backwards;
  }

  @keyframes signal {
    from { offset-distance: 0%; opacity: 0; }
    3% { opacity: 1; }
    97% { opacity: 1; }
    to { offset-distance: 100%; opacity: 0; }
  }

  /* The grid floor: a ground plane below eye level, between the back and
     the front layers of the artboard. The vanishing point sits on the
     skyline's ground line. All sizes follow the artboard height (--A). */
  .hero__floor {
    --A: var(--art-h);
    position: absolute;
    inset: calc(var(--art-top) + var(--art-h) * 0.5113) 0 0;
    overflow: hidden;
    perspective: calc(var(--A) * 1.5);
    perspective-origin: calc(50% + var(--px) * 3vw) 0;
    mask: linear-gradient(to bottom, transparent 0, #000 14%, #000 42%, rgb(0 0 0 / 0.55) 100%);
    pointer-events: none;
  }

  .hero__floor::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--A) * 0.14);
    background: radial-gradient(60% 100% at 50% 0%, rgb(241 25 160 / 0.32), transparent 70%);
  }

  .hero__grid {
    --cell: calc(var(--A) * 0.085);
    --halo: rgb(0 0 0 / 0.22);
    --h: calc(var(--A) * 0.3);
    --zc: calc(var(--A) * -1.9);
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--A) * 4.6);
    height: calc(var(--A) * 6.2);
    margin: calc(var(--A) * -3.1) 0 0 calc(var(--A) * -2.3);
    transform: translate3d(0, var(--h), var(--zc)) rotateX(90deg);
    background: linear-gradient(
      90deg,
      var(--magenta) 30%,
      #ff5a7e 42%,
      #ffa23a 47.5%,
      var(--yellow) 50%,
      #ffa23a 52.5%,
      #ff5a7e 58%,
      var(--magenta) 70%
    );
    mask:
      linear-gradient(90deg,
        transparent calc(50% - 5px), var(--halo) calc(50% - 5px),
        var(--halo) calc(50% - 1px), #000 calc(50% - 1px),
        #000 calc(50% + 1px), var(--halo) calc(50% + 1px),
        var(--halo) calc(50% + 5px), transparent calc(50% + 5px))
        50% 0 / var(--cell) var(--cell),
      linear-gradient(0deg,
        transparent calc(50% - 5px), var(--halo) calc(50% - 5px),
        var(--halo) calc(50% - 1px), #000 calc(50% - 1px),
        #000 calc(50% + 1px), var(--halo) calc(50% + 1px),
        var(--halo) calc(50% + 5px), transparent calc(50% + 5px))
        50% 0 / var(--cell) var(--cell);
    animation: floor 2.6s linear infinite;
  }

  @keyframes floor {
    from { transform: translate3d(0, var(--h), calc(var(--zc) - var(--cell))) rotateX(90deg); }
    to { transform: translate3d(0, var(--h), var(--zc)) rotateX(90deg); }
  }

  .art-triangle {
    left: 484px;
    top: 185px;
    width: 816px;
    height: 737px;
    max-width: none;
    overflow: visible;
    transform-origin: 62% 56%;
    translate: calc(var(--px) * 34px) calc(var(--py) * 20px);
    animation: tri-float 19s ease-in-out infinite alternate;
  }

  .art-triangle polygon {
    fill: none;
    stroke-linejoin: miter;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: draw-tri 1.6s cubic-bezier(0.6, 0, 0.3, 1) 0.9s backwards;
  }

  .art-triangle__glow {
    stroke: var(--cyan-deep);
    stroke-width: 34;
    opacity: 0.55;
  }

  .art-triangle__body {
    stroke: var(--cyan);
    stroke-width: 18.5;
  }

  .art-triangle__highlight {
    stroke: #ccffff;
    stroke-width: 2.6;
  }

  .art-triangle__shade {
    stroke: #1f504c;
    stroke-width: 1.8;
  }

  @keyframes draw-tri {
    from { stroke-dashoffset: 100; }
  }

  @keyframes tri-float {
    from { transform: rotateY(-16deg) rotateX(7deg) rotateZ(-2deg); }
    to { transform: rotateY(16deg) rotateX(-7deg) rotateZ(2deg); }
  }

  .art-logo {
    left: 513px;
    top: 307px;
    width: 847px;
    height: 525px;
    translate: calc(var(--px) * 18px) calc(var(--py) * 12px);
    animation: logo-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s backwards;
  }

  .art-logo img {
    width: 100%;
    height: 100%;
  }

  .art-logo__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 44%,
        rgb(255 255 255 / 0.95) 50%,
        transparent 56%
      )
      no-repeat;
    background-size: 320% 100%;
    background-position: 120% 0;
    mask: url("../img/logo/neonmodem.webp") 0 0 / 100% 100% no-repeat luminance;
    mix-blend-mode: screen;
    animation: shine 7.5s ease-in-out 2.6s infinite;
  }

  @keyframes logo-in {
    from { opacity: 0; scale: 1.08; filter: brightness(2.2) blur(6px); }
  }

  @keyframes shine {
    0% { background-position: 120% 0; }
    16%, 100% { background-position: -20% 0; }
  }

  .art-overdrive {
    left: 615px;
    top: 479px;
    width: 639px;
    height: 211px;
    translate: calc(var(--px) * 36px) calc(var(--py) * 22px);
    animation: neon-on 1.8s steps(1, end) 1.4s backwards;
  }

  .art-overdrive img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .art-overdrive__glow {
    filter: blur(14px) saturate(1.5);
    opacity: 0.75;
    animation: hum 2.8s ease-in-out 3.4s infinite alternate;
  }

  @keyframes neon-on {
    0% { opacity: 0; }
    8% { opacity: 0.85; }
    11% { opacity: 0.1; }
    19% { opacity: 1; }
    22% { opacity: 0.25; }
    34% { opacity: 1; }
    36% { opacity: 0.5; }
    41% { opacity: 1; }
  }

  @keyframes hum {
    from { opacity: 0.55; }
    to { opacity: 0.95; }
  }

  /* Hover zones: an invisible grid; the hovered cell sets --px/--py on
     the section, the registered properties transition, and every layer
     shifts by its own depth. */
  .zones {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
  }

  .hero__zones {
    grid-template: repeat(3, 1fr) / repeat(5, 1fr);
  }

  /* The copy box covers most hover zones, hence only its links take the
     pointer. */
  .hero__copy {
    position: relative;
    z-index: 3;
    isolation: isolate;
    padding: calc(var(--art-top) + var(--art-h) * 0.8) var(--gutter) 6.5rem;
    text-align: center;
    pointer-events: none;
  }

  .hero__cta a {
    pointer-events: auto;
  }

  /* A dark scrim under the copy, so the grid stays behind the text. */
  .hero__copy::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3.5rem;
    z-index: -1;
    width: min(64rem, 120%);
    height: 20rem;
    translate: -50% 0;
    background: radial-gradient(closest-side, rgb(5 3 10 / 0.88), rgb(5 3 10 / 0.6) 55%, transparent);
    pointer-events: none;
  }

  .tagline {
    font: 600 var(--step-2) / 1.3 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cyan);
    text-shadow:
      0 0 1.1rem rgb(130 228 220 / 0.7),
      0 0 0.2rem rgb(130 228 220 / 0.5),
      0 0.15rem 0.8rem #000;
    animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1.6s backwards;
  }

  .subtitle {
    margin-top: 0.9rem;
    font-style: italic;
    font-size: var(--step-0);
    color: var(--yellow);
    text-shadow: 0 0.1rem 0.6rem #000, 0 0 1.4rem #000;
    animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1.8s backwards;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.25rem;
    margin-top: 2rem;
    animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 2s backwards;
  }

  @keyframes rise {
    from { opacity: 0; translate: 0 1rem; }
  }

  .modem-line {
    position: absolute;
    inset: auto var(--gutter) 1.4rem;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.4rem;
    font: 500 var(--step--1) / 1.2 var(--font-mono);
    letter-spacing: 0.08em;
    color: var(--ink-3);
    pointer-events: none;
  }

  .modem-line__dial {
    width: calc(18ch + 18 * 0.08em);
    overflow: hidden;
    white-space: nowrap;
    animation: type 1.1s steps(18, end) 1s backwards;
  }

  .modem-line__connect {
    color: var(--cyan);
    animation: appear 0.01s 2.3s backwards;
  }

  .modem-line__leds {
    display: flex;
    gap: 1rem;
    margin-left: auto;
  }

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

  @keyframes appear {
    from { opacity: 0; }
  }

  .lamp {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
  }

  .lamp::before {
    content: "";
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0.5em var(--cyan), 0 0 0.15em #fff inset;
  }

  .lamp--rd::before,
  .lamp--sd::before {
    background: var(--magenta);
    box-shadow: 0 0 0.5em var(--magenta), 0 0 0.15em #fff inset;
  }

  .lamp--cd::before {
    animation: lamp-off 0.01s 2.3s backwards;
  }

  .lamp--rd::before {
    animation: blink 1.3s steps(1, end) 2.4s infinite;
  }

  .lamp--sd::before {
    animation: blink 1.9s steps(1, end) 2.7s infinite reverse;
  }

  @keyframes lamp-off {
    from { background: #3a2c4c; box-shadow: none; }
  }

  @keyframes blink {
    0%, 30%, 55%, 80% { background: #3a2c4c; box-shadow: none; }
    15%, 40%, 70%, 90% { background: var(--magenta); }
  }

  /* -------------------------------------------------------------------
     Demo: the terminal, built from boxes in em, so one font-size (--tm)
     scales the whole model. Rotation, zoom and tilt come from registered
     properties; the faces shade themselves from the resulting angles.
     ------------------------------------------------------------------- */
  .demo {
    --tm: clamp(5px, min(0.8vw, 1.12svh), 11px);
    position: relative;
    transition:
      --tyaw 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
      --tpitch 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .demo__stage {
    position: relative;
    height: max(100svh, 40rem);
    overflow: clip;
    perspective: calc(var(--tm) * 230);
    perspective-origin: 62% 40%;
    background:
      radial-gradient(70% 55% at 62% 58%, rgb(44 22 72 / 0.85), transparent 75%),
      linear-gradient(var(--night-0), var(--night-1) 70%);
  }

  .demo__zones {
    grid-template: repeat(4, 1fr) / repeat(6, 1fr);
  }

  .term-zoom {
    position: absolute;
    left: 63%;
    top: 52%;
    width: 0;
    height: 0;
    font-size: var(--tm);
    transform-style: preserve-3d;
    transform-origin: -2.6em -5.8em 12em;
    transform: translate(var(--sx), var(--sy)) scale(var(--zoom));
    will-change: transform;
  }

  .term-rig,
  .term-tilt,
  .term-sway,
  .term,
  .tm-box {
    transform-style: preserve-3d;
  }

  .term-rig {
    transform: translateY(var(--lift)) rotateX(var(--pitch)) rotateY(var(--yaw));
  }

  .term-tilt {
    transform:
      rotateX(calc(var(--tpitch) * var(--tiltk)))
      rotateY(calc(var(--tyaw) * var(--tiltk)));
  }

  .term-sway {
    animation: sway 11s ease-in-out infinite alternate;
  }

  @keyframes sway {
    from {
      transform:
        translateY(calc(-0.5em * var(--tiltk)))
        rotateY(calc(-2.5deg * var(--tiltk)));
    }
    to {
      transform:
        translateY(calc(0.5em * var(--tiltk)))
        rotateY(calc(2.5deg * var(--tiltk)));
    }
  }

  .term {
    --ytot: calc(var(--yaw) + var(--tyaw) * var(--tiltk));
    --ptot: calc(var(--pitch) + var(--tpitch) * var(--tiltk));
    position: absolute;
    transform: translateY(23.5em);
  }

  .tm-box {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate3d(var(--x, 0em), var(--y, 0em), var(--z, 0em));
  }

  .tm-f {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
    background: var(--face, #cfc8b1);
  }

  /* Shade layer: black at an opacity computed from the face's angle to
     the viewer; tint layer: the magenta and cyan rim light. */
  .tm-f::before,
  .tm-f::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transform-style: flat;
  }

  .tm-f::before {
    background: var(--tint, none);
  }

  .tm-f::after {
    background: #07040c;
    opacity: clamp(0, var(--shade, 0), 0.92);
  }

  .tm-f--front {
    width: var(--w);
    height: var(--h);
    margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
    transform: translateZ(calc(var(--d) / 2));
    --shade: calc(0.1 + 0.14 * (1 - cos(var(--ytot))));
  }

  .tm-f--left {
    width: var(--d);
    height: var(--h);
    margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2);
    transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
    --shade: calc(0.5 - 0.42 * sin(var(--ytot)));
    --tint: linear-gradient(90deg, rgb(241 25 160 / 0.32), rgb(241 25 160 / 0.08));
    --face: #c2bba3;
  }

  .tm-f--right {
    width: var(--d);
    height: var(--h);
    margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2);
    transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
    --shade: calc(0.5 + 0.42 * sin(var(--ytot)));
    --tint: linear-gradient(270deg, rgb(130 228 220 / 0.3), rgb(130 228 220 / 0.06));
    --face: #c2bba3;
  }

  .tm-f--top {
    width: var(--w);
    height: var(--d);
    margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2);
    transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
    --shade: calc(0.32 + 0.5 * sin(var(--ptot)));
    --tint: linear-gradient(90deg, rgb(241 25 160 / 0.14), rgb(130 228 220 / 0.14));
    --face: #ddd7c3;
  }

  /* Head: a box with chamfered front edges. */
  .tm-head {
    --w: 46em;
    --h: 38em;
    --d: 40em;
    --y: -28em;
    --z: -8em;
  }

  .tm-head > .tm-f--top {
    height: 37.6em;
    margin: -18.8em 0 0 -23em;
    transform: translate3d(0, -19em, -1.2em) rotateX(90deg);
  }

  .tm-head > .tm-f--left,
  .tm-head > .tm-f--right {
    width: 37.6em;
    margin: -19em 0 0 -18.8em;
  }

  .tm-head > .tm-f--left {
    transform: translate3d(-23em, 0, -1.2em) rotateY(-90deg);
  }

  .tm-head > .tm-f--right {
    transform: translate3d(23em, 0, -1.2em) rotateY(90deg);
  }

  .tm-head > .tm-f,
  .tm-chamfer {
    box-shadow: 0 0 0 0.07em var(--seam, #cdc6af);
  }

  .tm-head > .tm-f--front {
    width: 41.2em;
    height: 33.2em;
    margin: -16.6em 0 0 -20.6em;
    border-radius: 0.5em;
    transform: translateZ(20em);
    background:
      radial-gradient(120% 90% at 30% 20%, #ebe6d4, transparent 60%),
      linear-gradient(#e2dcc8, #cdc6ae);
  }

  .tm-chamfer {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
    background: #d3ccb5;
  }

  .tm-chamfer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #07040c;
    opacity: clamp(0, var(--shade, 0), 0.92);
  }

  .tm-chamfer--top {
    width: 41.2em;
    height: 3.394em;
    margin: -1.697em 0 0 -20.6em;
    transform: translate3d(0, -17.8em, 18.8em) rotateX(45deg);
    background: #e6e0cd;
    --shade: calc(0.12 + 0.3 * sin(var(--ptot)));
  }

  .tm-chamfer--bottom {
    width: 41.2em;
    height: 3.394em;
    margin: -1.697em 0 0 -20.6em;
    transform: translate3d(0, 17.8em, 18.8em) rotateX(-45deg);
    --shade: calc(0.55 - 0.3 * sin(var(--ptot)));
  }

  .tm-chamfer--left {
    width: 3.394em;
    height: 33.2em;
    margin: -16.6em 0 0 -1.697em;
    transform: translate3d(-21.8em, 0, 18.8em) rotateY(-45deg);
    --shade: calc(0.32 - 0.3 * sin(var(--ytot)));
  }

  .tm-chamfer--right {
    width: 3.394em;
    height: 33.2em;
    margin: -16.6em 0 0 -1.697em;
    transform: translate3d(21.8em, 0, 18.8em) rotateY(45deg);
    --shade: calc(0.32 + 0.3 * sin(var(--ytot)));
  }

  /* Corner squares behind the chamfer ends: they close the notch where two
     chamfers meet and the small facet hole between them. */
  .tm-corner {
    position: absolute;
    left: 0;
    top: 0;
    width: 4.8em;
    height: 4.8em;
    margin: -2.4em 0 0 -2.4em;
    backface-visibility: hidden;
    background: #cfc8b1;
  }

  .tm-corner--tl {
    transform: translate3d(-20.6em, -16.6em, 17.6em);
  }

  .tm-corner--tr {
    transform: translate3d(20.6em, -16.6em, 17.6em);
  }

  .tm-corner--bl {
    transform: translate3d(-20.6em, 16.6em, 17.6em);
    background: #9d9680;
  }

  .tm-corner--br {
    transform: translate3d(20.6em, 16.6em, 17.6em);
    background: #9d9680;
  }

  .tm-brand {
    position: absolute;
    top: 0.55em;
    left: 0;
    right: 0;
    font: 400 0.95em / 1 var(--font-display);
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
    color: #b8b096;
    text-shadow: 0 0.08em 0 rgb(255 255 255 / 0.55), 0 -0.06em 0 rgb(0 0 0 / 0.2);
  }

  .tm-bezel {
    position: absolute;
    left: 1.4em;
    top: 2.4em;
    width: 38.4em;
    height: 29.4em;
    border-radius: 2.2em;
    background: linear-gradient(#27242b, #19171d);
    box-shadow:
      inset 0 0 0 0.35em #302c34,
      inset 0 1.2em 2.2em rgb(0 0 0 / 0.6),
      0 0.18em 0 rgb(255 255 255 / 0.45),
      0 -0.12em 0 rgb(0 0 0 / 0.25);
  }

  .crt {
    position: absolute;
    left: 2.6em;
    top: 2.4em;
    width: 28em;
    height: 21em;
    overflow: hidden;
    border-radius: 2.3em / 2.8em;
    background: #050308;
    box-shadow:
      0 0 0 0.55em #0b0a0e,
      0 0 0 0.75em #2d2931,
      0 0 4em rgb(130 228 220 / 0.25);
  }

  .crt video,
  .crt__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .crt__poster {
    display: none;
  }

  .demo__file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .crt::before,
  .crt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .crt::before {
    background: repeating-linear-gradient(
      0deg,
      rgb(0 0 0 / 0.32) 0 0.09em,
      transparent 0.09em 0.27em
    );
    animation: flicker 5s steps(2, end) infinite;
  }

  .crt::after {
    background:
      radial-gradient(70% 55% at 28% 18%, rgb(255 255 255 / 0.16), transparent 60%),
      radial-gradient(120% 120% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.65) 100%);
    box-shadow: inset 0 0 2.5em rgb(0 0 0 / 0.7);
  }

  @keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.86; }
  }

  .tm-button {
    position: absolute;
    left: 32.6em;
    width: 2.6em;
    height: 1.6em;
    border-radius: 0.3em;
    background: linear-gradient(#5c7899, #3a4d67);
    box-shadow: inset 0 0.15em 0 rgb(255 255 255 / 0.28), 0 0.22em 0 #0c0b0f;
  }

  .tm-button--a { top: 3.2em; }
  .tm-button--b { top: 5.8em; }

  .tm-knob {
    position: absolute;
    left: 32.8em;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #f6f2e7, #b9b29b 58%, #847d68);
    box-shadow: 0 0.25em 0.35em rgb(0 0 0 / 0.65);
  }

  .tm-knob--a { top: 15.6em; }
  .tm-knob--b { top: 19.2em; }

  .tm-power {
    position: absolute;
    left: 2.8em;
    top: 25em;
    width: 1.6em;
    height: 2.8em;
    border-radius: 0.25em;
    background: linear-gradient(#e2344d, #a1172d);
    box-shadow: inset 0 0.2em 0 rgb(255 255 255 / 0.35), 0 0.22em 0 #0c0b0f;
  }

  .tm-badge {
    position: absolute;
    left: 5.4em;
    top: 25.6em;
    font: 600 1.15em / 1 var(--font-mono);
    letter-spacing: 0.18em;
    color: #8b8698;
  }

  .tm-slot {
    position: absolute;
    right: 2.6em;
    bottom: 2.5em;
    width: 7em;
    height: 0.55em;
    border-radius: 0.3em;
    background: #0b0a0e;
    box-shadow: 0 0.12em 0 rgb(255 255 255 / 0.08);
  }

  /* Neck */
  .tm-neck {
    --w: 30em;
    --h: 9em;
    --d: 26em;
    --y: -4.5em;
    --z: -12em;
  }

  .tm-neck > .tm-f--front {
    background: linear-gradient(#a59e88, #c8c1aa);
    --shade: calc(0.25 + 0.14 * (1 - cos(var(--ytot))));
  }

  /* Keyboard: a wedge, 3.5em high at the front and 7em at the back. */
  .tm-kb {
    --w: 56em;
    --h: 7em;
    --d: 22em;
    --y: -3.5em;
    --z: 13em;
  }

  .tm-kb__top {
    width: 56em;
    height: 22.28em;
    margin: -11.14em 0 0 -28em;
    border-radius: 0.6em 0.6em 0 0;
    transform: translateY(-1.75em) rotateX(80.96deg);
    background:
      linear-gradient(rgb(130 228 220 / 0.14), transparent 45%),
      linear-gradient(#d9d3bf, #ccc5ae);
    --shade: calc(0.16 + 0.45 * sin(var(--ptot)));
    --tint: linear-gradient(90deg, rgb(241 25 160 / 0.12), rgb(130 228 220 / 0.12));
  }

  .tm-kb__front {
    width: 56em;
    height: 3.5em;
    margin: -1.75em 0 0 -28em;
    transform: translateY(1.75em) translateZ(11em);
    background: linear-gradient(#c5bea7, #a9a28b);
    --shade: calc(0.12 + 0.14 * (1 - cos(var(--ytot))));
  }

  .tm-kb__right {
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
  }

  .tm-kb__left {
    clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%);
  }

  /* Rows of keys: one element per row segment, the gaps cut by a mask,
     the lower 28 % of each key darker as its front face. */
  .tm-keys {
    position: absolute;
    height: 2.5em;
    border-radius: 0.2em;
    background: linear-gradient(#f6f2e5 0 70%, #a7a089 70% 100%);
    mask: repeating-linear-gradient(90deg, #000 0 2.45em, transparent 2.45em 2.95em);
  }

  .tm-keys--dark,
  .tm-keys--l1, .tm-keys--l2, .tm-keys--l3, .tm-keys--l4, .tm-keys--l5,
  .tm-keys--r1, .tm-keys--r2, .tm-keys--r3, .tm-keys--r4, .tm-keys--r5,
  .tm-keys--fn {
    background: linear-gradient(#55505b 0 70%, #2a272e 70% 100%);
  }

  .tm-keys--fn {
    left: 2.2em;
    top: 1.4em;
    width: 41.1em;
    height: 1.9em;
  }

  .tm-keys--fx {
    left: 46.2em;
    top: 1.4em;
    width: 8.4em;
    height: 1.9em;
    background: linear-gradient(90deg, #4a77c4 0 33%, #4a77c4 33% 66%, #d23a52 66%);
    mask: repeating-linear-gradient(90deg, #000 0 2.45em, transparent 2.45em 2.95em);
  }

  .tm-keys--l1, .tm-keys--l2, .tm-keys--l3, .tm-keys--l4, .tm-keys--l5 {
    left: 2.2em;
    width: 5.4em;
  }

  .tm-keys--r1, .tm-keys--r2, .tm-keys--r3, .tm-keys--r4, .tm-keys--r5 {
    left: 46.2em;
    width: 8.4em;
  }

  .tm-keys--m1, .tm-keys--m2, .tm-keys--m3, .tm-keys--m4 {
    left: 8.9em;
    width: 35.9em;
  }

  .tm-keys--l1, .tm-keys--r1, .tm-keys--m1 { top: 4.5em; }
  .tm-keys--l2, .tm-keys--r2, .tm-keys--m2 { top: 7.6em; }
  .tm-keys--l3, .tm-keys--r3, .tm-keys--m3 { top: 10.7em; }
  .tm-keys--l4, .tm-keys--r4, .tm-keys--m4 { top: 13.8em; }
  .tm-keys--l5, .tm-keys--r5 { top: 16.9em; }

  .tm-keys--m2 { left: 10.1em; }
  .tm-keys--m3 { left: 10.9em; width: 33.9em; }
  .tm-keys--m4 { left: 12.3em; width: 30.5em; }

  .tm-keys--space {
    left: 15.5em;
    top: 16.9em;
    width: 22em;
    mask: none;
  }

  /* Floor under the terminal, in the same 3D space. */
  .tm-floor {
    position: absolute;
    left: 0;
    top: 0;
    width: 170em;
    height: 170em;
    margin: -85em 0 0 -85em;
    transform: rotateX(90deg);
    background:
      radial-gradient(closest-side, rgb(0 0 0 / 0.85) 0 12%, transparent 26%),
      radial-gradient(closest-side, rgb(130 228 220 / 0.3), rgb(241 25 160 / 0.14) 40%, transparent 75%),
      repeating-linear-gradient(90deg, rgb(241 25 160 / 0.5) 0 0.18em, transparent 0.18em 9em),
      repeating-linear-gradient(0deg, rgb(241 25 160 / 0.5) 0 0.18em, transparent 0.18em 9em);
    mask: radial-gradient(closest-side, #000 35%, transparent 100%);
  }

  .demo__copy {
    position: absolute;
    left: var(--gutter);
    top: 50%;
    z-index: 3;
    width: min(31rem, 38vw);
    translate: 0 -50%;
    pointer-events: none;
  }

  .demo__cap + .demo__cap {
    margin-top: 2.5rem;
  }

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

  .demo__big {
    margin-bottom: 0.7rem;
    font: 400 clamp(1.35rem, 1.1rem + 1.2vw, 2.05rem) / 1.25 var(--font-display);
    letter-spacing: 0.01em;
    color: var(--ink) !important;
    text-shadow: 0 0 1.4rem rgb(241 25 160 / 0.45);
  }

  .demo__fade {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: var(--night-1);
    opacity: 0;
    pointer-events: none;
  }

  @media (width < 52rem) {
    .demo__stage {
      height: auto;
      min-height: 0;
      padding: calc(var(--bar-h) + 2rem) var(--gutter) 3rem;
      perspective-origin: 50% 30%;
    }

    .term-zoom {
      position: relative;
      left: 50%;
      top: auto;
      display: block;
      height: calc(var(--tm) * 60);
      margin-top: calc(var(--tm) * 6);
    }

    .term-rig {
      position: absolute;
      top: calc(var(--tm) * 26);
    }

    .demo {
      --tm: clamp(4.5px, 1.45vw, 8px);
    }

    .demo__copy {
      position: relative;
      left: auto;
      top: auto;
      width: auto;
      translate: none;
    }
  }
}

@layer scene {
  .hero:has(.hero__zones > i:nth-child(1):hover) { --px: -1; --py: -1; }
  .hero:has(.hero__zones > i:nth-child(2):hover) { --px: -0.5; --py: -1; }
  .hero:has(.hero__zones > i:nth-child(3):hover) { --px: 0; --py: -1; }
  .hero:has(.hero__zones > i:nth-child(4):hover) { --px: 0.5; --py: -1; }
  .hero:has(.hero__zones > i:nth-child(5):hover) { --px: 1; --py: -1; }
  .hero:has(.hero__zones > i:nth-child(6):hover) { --px: -1; --py: 0; }
  .hero:has(.hero__zones > i:nth-child(7):hover) { --px: -0.5; --py: 0; }
  .hero:has(.hero__zones > i:nth-child(8):hover) { --px: 0; --py: 0; }
  .hero:has(.hero__zones > i:nth-child(9):hover) { --px: 0.5; --py: 0; }
  .hero:has(.hero__zones > i:nth-child(10):hover) { --px: 1; --py: 0; }
  .hero:has(.hero__zones > i:nth-child(11):hover) { --px: -1; --py: 1; }
  .hero:has(.hero__zones > i:nth-child(12):hover) { --px: -0.5; --py: 1; }
  .hero:has(.hero__zones > i:nth-child(13):hover) { --px: 0; --py: 1; }
  .hero:has(.hero__zones > i:nth-child(14):hover) { --px: 0.5; --py: 1; }
  .hero:has(.hero__zones > i:nth-child(15):hover) { --px: 1; --py: 1; }

  .demo:has(.demo__zones > i:nth-child(1):hover) { --tyaw: -18deg; --tpitch: 10deg; }
  .demo:has(.demo__zones > i:nth-child(2):hover) { --tyaw: -11deg; --tpitch: 10deg; }
  .demo:has(.demo__zones > i:nth-child(3):hover) { --tyaw: -4deg; --tpitch: 10deg; }
  .demo:has(.demo__zones > i:nth-child(4):hover) { --tyaw: 4deg; --tpitch: 10deg; }
  .demo:has(.demo__zones > i:nth-child(5):hover) { --tyaw: 11deg; --tpitch: 10deg; }
  .demo:has(.demo__zones > i:nth-child(6):hover) { --tyaw: 18deg; --tpitch: 10deg; }
  .demo:has(.demo__zones > i:nth-child(7):hover) { --tyaw: -18deg; --tpitch: 4deg; }
  .demo:has(.demo__zones > i:nth-child(8):hover) { --tyaw: -11deg; --tpitch: 4deg; }
  .demo:has(.demo__zones > i:nth-child(9):hover) { --tyaw: -4deg; --tpitch: 4deg; }
  .demo:has(.demo__zones > i:nth-child(10):hover) { --tyaw: 4deg; --tpitch: 4deg; }
  .demo:has(.demo__zones > i:nth-child(11):hover) { --tyaw: 11deg; --tpitch: 4deg; }
  .demo:has(.demo__zones > i:nth-child(12):hover) { --tyaw: 18deg; --tpitch: 4deg; }
  .demo:has(.demo__zones > i:nth-child(13):hover) { --tyaw: -18deg; --tpitch: -2deg; }
  .demo:has(.demo__zones > i:nth-child(14):hover) { --tyaw: -11deg; --tpitch: -2deg; }
  .demo:has(.demo__zones > i:nth-child(15):hover) { --tyaw: -4deg; --tpitch: -2deg; }
  .demo:has(.demo__zones > i:nth-child(16):hover) { --tyaw: 4deg; --tpitch: -2deg; }
  .demo:has(.demo__zones > i:nth-child(17):hover) { --tyaw: 11deg; --tpitch: -2deg; }
  .demo:has(.demo__zones > i:nth-child(18):hover) { --tyaw: 18deg; --tpitch: -2deg; }
  .demo:has(.demo__zones > i:nth-child(19):hover) { --tyaw: -18deg; --tpitch: -8deg; }
  .demo:has(.demo__zones > i:nth-child(20):hover) { --tyaw: -11deg; --tpitch: -8deg; }
  .demo:has(.demo__zones > i:nth-child(21):hover) { --tyaw: -4deg; --tpitch: -8deg; }
  .demo:has(.demo__zones > i:nth-child(22):hover) { --tyaw: 4deg; --tpitch: -8deg; }
  .demo:has(.demo__zones > i:nth-child(23):hover) { --tyaw: 11deg; --tpitch: -8deg; }
  .demo:has(.demo__zones > i:nth-child(24):hover) { --tyaw: 18deg; --tpitch: -8deg; }
}