:root {
      --ink: #10172a;
      --ink-deep: #080d19;
      --cream: #f7f2e7;
      --paper: #e9e3d5;
      --blue: #175dff;
      --electric: #86f0ff;
      --yellow: #ffd329;
      --orange: #ff7448;
      --red: #ff3e62;
      --lime: #b8ff35;
      --line: rgba(247, 242, 231, .18);
      --shadow: 12px 14px 0 var(--ink-deep);
      --round: 20px;
      --bounce: cubic-bezier(.34, 1.56, .64, 1);
      --press: cubic-bezier(.4, 0, .2, 1);
    }

    * { box-sizing: border-box; }

    html { min-height: 100%; background: var(--ink-deep); overflow-x: hidden; }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      overflow-x: hidden;
      color: var(--cream);
      background:
        radial-gradient(circle at 8% 10%, rgba(23, 93, 255, .48) 0 1%, transparent 25%),
        radial-gradient(circle at 94% 88%, rgba(255, 211, 41, .24) 0 1%, transparent 30%),
        linear-gradient(119deg, #10172a 0%, #111b35 48%, #0b1120 100%);
      font-family: "Arial Black", Impact, Haettenschweiler, sans-serif;
      letter-spacing: .015em;
    }

    button, input { font: inherit; }
    button { cursor: pointer; }

    .noise,
    .grid,
    .sticker-spray,
    .background-word {
      position: fixed;
      pointer-events: none;
      inset: 0;
      overflow: hidden;
    }

    .noise {
      opacity: .14;
      z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E");
      mix-blend-mode: soft-light;
    }

    .grid {
      z-index: 0;
      opacity: .15;
      background-image:
        linear-gradient(rgba(247,242,231,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247,242,231,.12) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
    }

    .background-word {
      z-index: 0;
      display: grid;
      place-items: center;
      color: rgba(247, 242, 231, .028);
      font-size: clamp(9rem, 25vw, 30rem);
      line-height: .7;
      font-style: italic;
      white-space: nowrap;
      transform: rotate(-9deg) translateY(-1vh);
      user-select: none;
    }

    .sticker-spray { z-index: 1; }
    .spray {
      position: absolute;
      width: 145px;
      height: 78px;
      border-radius: 49% 51% 47% 53% / 57% 45% 55% 43%;
      background: var(--yellow);
      filter: blur(.2px);
      opacity: .92;
    }
    .spray::after {
      content: "";
      position: absolute;
      inset: 14px -24px -13px 22px;
      border-radius: inherit;
      border: 3px solid rgba(255, 211, 41, .78);
      transform: rotate(8deg);
    }
    .spray.one { top: 15%; left: -72px; transform: rotate(-28deg); animation: spray-drift-one 11s ease-in-out infinite; }
    .spray.two { right: -80px; bottom: 14%; width: 184px; background: var(--red); transform: rotate(37deg); animation: spray-drift-two 13s ease-in-out infinite; animation-delay: -4s; }
    .spray.two::after { border-color: rgba(255, 62, 98, .62); }
    .spray.three { top: 43%; right: 3.5%; width: 46px; height: 46px; background: var(--electric); transform: rotate(23deg); animation: spray-drift-three 9s ease-in-out infinite; animation-delay: -2s; }

    .site-shell {
      position: relative;
      z-index: 2;
      width: min(1460px, 100%);
      min-height: 100vh;
      margin: 0 auto;
      padding: clamp(18px, 3vw, 46px);
      display: grid;
      grid-template-columns: minmax(158px, .72fr) minmax(420px, 2.45fr) minmax(158px, .72fr);
      grid-template-rows: minmax(122px, 1fr) auto minmax(118px, 1fr);
      gap: 20px clamp(18px, 2.2vw, 37px);
    }

    .corner {
      position: relative;
      align-self: start;
    }

    .corner-card {
      border: 3px solid var(--cream);
      box-shadow: 7px 8px 0 rgba(8, 13, 25, .8);
    }

    .eyebrow,
    .tiny-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font: 700 10px/1 Arial, sans-serif;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .eyebrow::before,
    .tiny-label::before {
      content: "";
      width: 8px;
      height: 8px;
      display: inline-block;
      background: currentColor;
      transform: rotate(45deg);
    }

    .ballright-card {
      grid-column: 1;
      grid-row: 1;
      width: 176px;
      padding: 13px 13px 12px;
      color: var(--ink-deep);
      background: var(--yellow);
      --base-rot: -6deg;
      --sway: 4.5deg;
      --bob: -7px;
      transform: rotate(var(--base-rot));
      transition: transform .32s var(--bounce), box-shadow .32s var(--bounce);
      animation: card-idle 4.4s ease-in-out infinite;
      will-change: transform;
    }
    .ballright-card:hover {
      transform: rotate(-2deg) scale(1.07) translateY(-3px);
      animation-play-state: paused;
    }
    .ballright-card:active {
      transform: rotate(-4deg) scale(.97) translateY(1px);
      transition-duration: .09s;
      transition-timing-function: var(--press);
    }
    .ballright-card .eyebrow { color: #592e00; }
    .ballright-card h2 {
      margin: 8px 0 1px;
      font-size: clamp(27px, 3vw, 38px);
      line-height: .78;
      letter-spacing: -.075em;
      font-style: italic;
      transform: scaleX(1.03);
    }
    .ballright-card p {
      margin: 10px 0 0;
      padding-top: 8px;
      border-top: 2px solid var(--ink-deep);
      font: 800 10px/1.15 Arial, sans-serif;
      letter-spacing: .075em;
      text-transform: uppercase;
    }
    .ball-orbit {
      position: absolute;
      right: -21px;
      bottom: -23px;
      width: 51px;
      height: 51px;
      display: grid;
      place-items: center;
      border: 3px solid var(--ink-deep);
      border-radius: 50%;
      color: var(--cream);
      background: var(--blue);
      font-size: 23px;
      transform: rotate(11deg);
      box-shadow: 4px 5px 0 var(--ink-deep);
      animation: orbit-float 2.6s ease-in-out infinite;
    }

    .main-stage {
      grid-column: 2;
      grid-row: 1 / 4;
      position: relative;
      align-self: center;
      justify-self: center;
      width: min(100%, 790px);
      padding: 25px 0 20px;
    }

    .masthead {
      position: relative;
      z-index: 2;
      margin: 0 0 -17px 5.8%;
      pointer-events: none;
    }
    .masthead-top {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--electric);
      font: 800 11px/1 Arial, sans-serif;
      letter-spacing: .19em;
      text-transform: uppercase;
    }
    .masthead-top span { color: var(--yellow); }
    .masthead h1 {
      margin: 5px 0 0;
      color: var(--cream);
      font-size: clamp(56px, 11.2vw, 132px);
      line-height: .71;
      letter-spacing: -.095em;
      font-style: italic;
      text-shadow: 5px 5px 0 var(--blue), 9px 9px 0 var(--ink-deep);
      transform: scaleX(1.03);
      user-select: none;
    }
    .masthead h1 .accent { color: var(--yellow); }

    .media-shell {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: clamp(10px, 1.6vw, 15px);
      border: 4px solid var(--cream);
      border-radius: 5px;
      color: var(--ink);
      background: var(--cream);
      box-shadow: 13px 14px 0 rgba(8, 13, 25, .92), -7px -7px 0 var(--blue);
      transform: rotate(-.7deg);
      animation: shell-idle 8s ease-in-out infinite;
      will-change: transform;
    }


    .screen {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border: 4px solid var(--ink-deep);
      background:
        radial-gradient(circle at 16% 80%, rgba(255, 211, 41, .28) 0 3%, transparent 3.5%),
        linear-gradient(130deg, #123caa 0%, #175dff 43%, #122957 43%, #10172a 100%);
      isolation: isolate;
    }

    .screen::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      opacity: .2;
      background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(247,242,231,.22) 5px 6px);
      mix-blend-mode: screen;
    }

    .screen-topbar {
      position: absolute;
      inset: 0 0 auto;
      z-index: 9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      height: 38px;
      padding: 0 12px;
      color: var(--cream);
      border-bottom: 2px solid rgba(247,242,231,.82);
      background: rgba(8, 13, 25, .84);
      font: 800 10px/1 Arial, sans-serif;
      letter-spacing: .13em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .15s ease;
    }
    .screen-topbar:hover,
    .screen-topbar:focus-visible { background: rgba(8, 13, 25, .95); }
    .screen-topbar span:first-child {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .screen-topbar span:first-child::before {
      content: "";
      flex: 0 0 auto;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
      animation: pulse 1.6s ease-out infinite;
    }
    #screenAttentionHint {
      flex: 0 0 auto;
      color: var(--lime);
      opacity: .9;
    }

    .placeholder-content {
      position: absolute;
      inset: 38px 0 0;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: clamp(8px, 1.5vw, 15px);
      padding: 25px;
      text-align: center;
      color: var(--cream);
    }
    .rage-stamp {
      position: relative;
      display: grid;
      place-items: center;
      width: clamp(69px, 10.5vw, 102px);
      aspect-ratio: 1;
      border: 4px solid var(--yellow);
      border-radius: 50%;
      color: var(--ink-deep);
      background: var(--yellow);
      box-shadow: 5px 5px 0 var(--ink-deep);
      transform: rotate(-8deg);
      transition: transform .28s var(--bounce);
      animation: stamp-idle 3s ease-in-out infinite;
      will-change: transform;
    }
    .rage-stamp::before {
      content: "";
      position: absolute;
      inset: 8px;
      border: 2px dashed var(--ink-deep);
      border-radius: inherit;
    }
    .rage-stamp span {
      position: relative;
      z-index: 1;
      font-size: clamp(22px, 4vw, 39px);
      line-height: .7;
      letter-spacing: -.11em;
      font-style: italic;
    }
    .rage-stamp small {
      position: relative;
      z-index: 1;
      margin-top: 3px;
      font: 800 clamp(7px, 1vw, 9px)/1 Arial, sans-serif;
      letter-spacing: .11em;
    }
    .screen:hover .rage-stamp { transform: rotate(8deg) scale(1.1); animation-play-state: paused; }
    .screen:active .rage-stamp { transform: rotate(-6deg) scale(.96); transition-duration: .09s; transition-timing-function: var(--press); }

    .placeholder-content h2 {
      max-width: 500px;
      margin: 0;
      font-size: clamp(27px, 4.5vw, 50px);
      line-height: .82;
      letter-spacing: -.067em;
      font-style: italic;
      text-shadow: 3px 3px 0 var(--ink-deep);
    }
    .placeholder-content p {
      max-width: 390px;
      margin: 0;
      font: 800 clamp(9px, 1.35vw, 12px)/1.35 Arial, sans-serif;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--electric);
    }

    .floating-ball {
      position: absolute;
      z-index: 1;
      right: 11%;
      bottom: 9%;
      width: clamp(38px, 6.1vw, 63px);
      height: clamp(38px, 6.1vw, 63px);
      border: 3px solid var(--ink-deep);
      border-radius: 50%;
      background: var(--red);
      box-shadow: 5px 6px 0 var(--ink-deep);
      animation: bounce 3.1s ease-in-out infinite;
    }
    .floating-ball::before,
    .floating-ball::after {
      content: "";
      position: absolute;
      width: 48%; height: 48%;
      border: 2px solid var(--ink-deep);
      border-radius: 50%;
    }
    .floating-ball::before { left: 25%; top: -3px; }
    .floating-ball::after { right: -2px; bottom: 20%; }

    .screen-action {
      position: absolute;
      z-index: 5;
      left: 50%;
      bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 9px 12px 9px 9px;
      border: 3px solid var(--ink-deep);
      color: var(--ink-deep);
      background: var(--cream);
      box-shadow: 4px 4px 0 var(--ink-deep);
      font: 900 10px/1 Arial, sans-serif;
      letter-spacing: .095em;
      text-transform: uppercase;
      transform: translateX(-50%) rotate(-1.5deg);
      transition: transform .22s var(--bounce), box-shadow .22s var(--bounce), background .15s ease, color .15s ease;
    }
    .screen-action:hover {
      color: var(--cream);
      background: var(--red);
      box-shadow: 6px 7px 0 var(--ink-deep);
      transform: translateX(-50%) translateY(-3px) rotate(1.5deg) scale(1.05);
    }
    .screen-action:active {
      box-shadow: 1px 1px 0 var(--ink-deep);
      transform: translateX(-49%) translateY(3px) rotate(-1.5deg) scale(.97);
      transition-duration: .08s;
      transition-timing-function: var(--press);
    }
    .play-triangle {
      width: 0; height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 10px solid currentColor;
    }

    .clip-frame {
      position: absolute;
      z-index: 7;
      inset: 0;
      display: none;
      width: 100%;
      height: 100%;
      border: 0;
      background: #000;
    }
    .screen.is-playing .clip-frame { display: block; }
    .screen.is-playing .placeholder-content,
    .screen.is-playing .floating-ball,
    .screen.is-playing .screen-action { display: none; }

    .screen-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 12px 2px 0;
      color: var(--ink-deep);
      font: 800 9px/1 Arial, sans-serif;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .screen-footer .clip-id { color: var(--blue); }
    .screen-footer .mark { display: inline-flex; gap: 3px; align-items: center; }
    .screen-footer .mark i { display: inline-block; width: 6px; height: 6px; background: var(--red); transform: rotate(45deg); }

    .clip-tools {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: center;
      gap: 9px;
      margin-top: 19px;
    }
    .tool-button {
      padding: 9px 12px;
      border: 2px solid var(--cream);
      color: var(--cream);
      background: rgba(8,13,25,.76);
      box-shadow: 4px 4px 0 var(--ink-deep);
      font: 800 9px/1 Arial, sans-serif;
      letter-spacing: .11em;
      text-transform: uppercase;
      transition: transform .22s var(--bounce), box-shadow .22s var(--bounce), background .14s ease, color .14s ease;
    }
    .tool-button:hover {
      color: var(--ink-deep);
      background: var(--lime);
      transform: translate(-2px, -3px) rotate(-2deg) scale(1.04);
      box-shadow: 6px 7px 0 var(--ink-deep);
    }
    .tool-button:active {
      transform: translate(2px, 2px) rotate(0deg) scale(.97);
      box-shadow: 1px 1px 0 var(--ink-deep);
      transition-duration: .08s;
      transition-timing-function: var(--press);
    }
    .tool-button.secondary { border-color: var(--electric); color: var(--electric); }
    .tool-button.secondary:hover { color: var(--ink-deep); background: var(--electric); }

    .reactions-bar {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .reaction-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 11px;
      border: 2px solid var(--cream);
      color: var(--cream);
      background: rgba(8,13,25,.76);
      box-shadow: 3px 3px 0 var(--ink-deep);
      font: 800 15px/1 Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: transform .18s var(--bounce), box-shadow .18s var(--bounce), background .14s ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .reaction-pill:hover {
        background: rgba(8,13,25,.92);
        transform: translate(-1px, -2px) scale(1.05);
        box-shadow: 5px 5px 0 var(--ink-deep);
      }
    }
    .reaction-pill:active {
      transform: scale(.9);
      transition-duration: .08s;
      transition-timing-function: var(--press);
    }
    .reaction-pill.is-pressed { animation: reaction-bump .32s var(--bounce); }

    .reaction-fly {
      position: absolute;
      bottom: 8%;
      z-index: 8;
      font-size: 26px;
      pointer-events: none;
      animation: reaction-float 2.1s ease-out forwards;
    }

    .viewer-count {
      grid-column: 1;
      grid-row: 3;
      align-self: end;
      justify-self: start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: max-content;
      padding: 10px 13px;
      border: 3px solid var(--cream);
      color: var(--cream);
      background: rgba(8,13,25,.72);
      box-shadow: 6px 7px 0 rgba(8,13,25,.8);
      font: 800 9px/1 Arial, sans-serif;
      letter-spacing: .1em;
      text-transform: uppercase;
      transform: rotate(-1.5deg);
      animation: shell-idle 7s ease-in-out infinite;
    }
    .viewer-count b { color: var(--lime); font-size: 13px; margin-left: 1px; }
    .viewer-dot {
      position: relative;
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--lime);
    }
    .viewer-dot::after {
      content: "";
      position: absolute;
      inset: -4px;
      border: 2px solid var(--lime);
      border-radius: 50%;
      animation: pulse 1.6s ease-out infinite;
    }

    .callout {
      display: inline-flex;
      align-items: center;
      width: max-content;
      max-width: 100%;
      padding: 10px 12px;
      border: 3px solid var(--ink-deep);
      box-shadow: 5px 5px 0 var(--ink-deep);
      font: 900 11px/1 Arial, sans-serif;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .variant-stack {
      grid-column: 1;
      grid-row: 3;
      align-self: end;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding-bottom: 10px;
    }
    .variant-stack .label-1 {
      color: var(--ink-deep);
      background: var(--lime);
      --base-rot: 5deg;
      --sway: 4.5deg;
      --bob: -5px;
      transform: rotate(var(--base-rot));
      transition: transform .28s var(--bounce), box-shadow .28s var(--bounce);
      animation: card-idle 3.8s ease-in-out infinite;
      will-change: transform;
    }
    .variant-stack .label-2 {
      color: var(--cream);
      background: var(--red);
      --base-rot: -3deg;
      --sway: -4.5deg;
      --bob: -5px;
      transform: rotate(var(--base-rot));
      transition: transform .28s var(--bounce), box-shadow .28s var(--bounce);
      animation: card-idle 4.4s ease-in-out infinite;
      animation-delay: -.9s;
      will-change: transform;
    }
    .variant-stack .label-1:hover,
    .variant-stack .label-2:hover {
      transform: rotate(0deg) scale(1.08) translateY(-2px);
      animation-play-state: paused;
    }
    .variant-stack .label-1:active,
    .variant-stack .label-2:active {
      transform: scale(.95) translateY(1px);
      transition-duration: .09s;
      transition-timing-function: var(--press);
    }
    .variant-stack .label-3 {
      padding: 0;
      color: var(--yellow);
      border: 0;
      box-shadow: none;
      background: transparent;
      transform: rotate(2deg);
      font-size: 12px;
      animation: label3-drift 3.2s ease-in-out infinite;
    }
    .variant-stack .label-3::before { content: "✦"; margin-right: 8px; color: var(--electric); font-size: 16px; }

    .ballright-radio {
      grid-column: 3;
      grid-row: 2;
      position: relative;
      align-self: center;
      justify-self: end;
      width: min(208px, 100%);
      padding: 16px 10px 11px;
      border: 3px solid var(--ink-deep);
      color: var(--cream);
      background: var(--orange);
      box-shadow: 8px 9px 0 var(--ink-deep);
      --base-rot: 3.5deg;
      --sway: -4deg;
      --bob: -6px;
      transform: rotate(var(--base-rot));
      transition: transform .3s var(--bounce), box-shadow .3s var(--bounce), background .25s ease;
      animation: card-idle 5s ease-in-out infinite;
      animation-delay: -2.5s;
      will-change: transform;
    }
    .ballright-radio::before {
      /* broadcast ring — a signal pulse that only appears while live */
      content: "";
      position: absolute;
      inset: -7px;
      border: 2px solid var(--red);
      border-radius: inherit;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
    }
    .ballright-radio.is-live::before {
      opacity: .6;
      animation: pulse 1.5s ease-out infinite;
    }
    .ballright-radio:hover {
      transform: rotate(1deg) translateY(-4px) scale(1.03);
      animation-play-state: paused;
    }
    .ballright-radio.is-live:hover { animation-play-state: running; }
    .ballright-radio:active:not(:has(.radio-toggle:active)) {
      transform: rotate(3deg) translateY(1px) scale(.98);
      transition-duration: .09s;
      transition-timing-function: var(--press);
    }
    .radio-handle {
      position: absolute;
      z-index: -1;
      top: -18px;
      left: 50%;
      width: 93px;
      height: 28px;
      border: 4px solid var(--ink-deep);
      border-bottom: 0;
      border-radius: 17px 17px 0 0;
      background: var(--yellow);
      transform: translateX(-50%);
    }
    .radio-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
      color: var(--ink-deep);
    }
    .radio-header strong {
      font-size: 16px;
      line-height: .8;
      letter-spacing: -.06em;
      font-style: italic;
    }
    .radio-header small {
      font: 900 8px/1 Arial, sans-serif;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .radio-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 27px;
      height: 27px;
      flex: 0 0 27px;
      padding: 0;
      border: 2px solid var(--ink-deep);
      border-radius: 50%;
      color: var(--ink-deep);
      background: var(--lime);
      box-shadow: 2px 2px 0 var(--ink-deep);
      transition: transform .2s var(--bounce), box-shadow .2s var(--bounce), background .15s ease;
    }
    .radio-toggle:hover { transform: scale(1.14) rotate(-8deg); box-shadow: 3px 3px 0 var(--ink-deep); }
    .radio-toggle:active {
      transform: translate(1px, 1px) scale(.92) rotate(0deg);
      box-shadow: 1px 1px 0 var(--ink-deep);
      transition-duration: .08s;
      transition-timing-function: var(--press);
    }
    .radio-icon {
      width: 16px;
      height: 16px;
      transition: transform .18s var(--bounce);
    }
    .icon-muted, .icon-live { fill: currentColor; }
    /* Only one of the two icons is ever in the document flow at a time,
       so the button doesn't need any extra sizing rules to swap them. */
    .icon-live { display: none; }
    .ballright-radio.is-live .icon-muted { display: none; }
    .ballright-radio.is-live .icon-live { display: block; }
    .radio-toggle:active .radio-icon { transform: scale(.85); }
    .radio-face {
      display: grid;
      grid-template-columns: 1fr 1.12fr 1fr;
      gap: 7px;
      align-items: center;
      padding: 7px;
      border: 3px solid var(--ink-deep);
      background: var(--blue);
    }
    .radio-speaker {
      display: grid;
      place-items: center;
      aspect-ratio: 1;
      border: 3px solid var(--ink-deep);
      border-radius: 50%;
      background: var(--yellow);
      box-shadow: inset 0 0 0 4px var(--orange);
      animation: speaker-pulse 1.9s ease-in-out infinite;
    }
    .radio-speaker:nth-child(3) { animation-delay: -.6s; }
    .radio-speaker::before {
      content: "";
      width: 38%;
      aspect-ratio: 1;
      border: 3px solid var(--ink-deep);
      border-radius: 50%;
      background: var(--ink-deep);
      box-shadow: 0 0 0 4px var(--cream);
    }
    .radio-deck {
      min-width: 0;
      padding: 5px;
      border: 2px solid var(--ink-deep);
      color: var(--lime);
      background: var(--ink-deep);
    }
    .radio-deck-label {
      display: block;
      overflow: hidden;
      text-align: center;
      white-space: nowrap;
      font: 900 7px/1 Arial, sans-serif;
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .radio-wave {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      height: 25px;
      margin-top: 4px;
      border-top: 1px solid rgba(184,255,53,.35);
      border-bottom: 1px solid rgba(184,255,53,.35);
    }
    .radio-wave i {
      display: block;
      width: 3px;
      height: 5px;
      background: currentColor;
      transform-origin: center;
      /* idle hum — bars keep moving softly even while muted, so the
         station reads as always-broadcasting, same as the main screen */
      animation: equalize 1.3s ease-in-out infinite alternate;
    }
    .radio-wave i:nth-child(2), .radio-wave i:nth-child(5) { height: 13px; animation-delay: -.3s; }
    .radio-wave i:nth-child(3), .radio-wave i:nth-child(4) { height: 19px; animation-delay: -.55s; }
    .radio-state {
      display: block;
      margin-top: 5px;
      overflow: hidden;
      color: var(--cream);
      text-align: center;
      white-space: nowrap;
      font: 800 7px/1 Arial, sans-serif;
      letter-spacing: .09em;
      text-transform: uppercase;
      transition: color .2s ease;
    }
    .radio-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
      color: var(--ink-deep);
      font: 900 8px/1 Arial, sans-serif;
      letter-spacing: .095em;
      text-transform: uppercase;
    }
    .radio-foot span { display: inline-flex; align-items: center; gap: 4px; }
    .radio-foot span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
    .ballright-radio.is-live {
      background: var(--yellow);
      box-shadow: 11px 11px 0 var(--red), 8px 9px 0 var(--ink-deep);
      animation: radio-thump .72s steps(2, jump-none) infinite;
    }
    .ballright-radio.is-live .radio-toggle { background: var(--red); color: var(--cream); }
    .ballright-radio.is-live .radio-wave i { animation: equalize .42s ease-in-out infinite alternate; }
    .ballright-radio.is-live .radio-wave i:nth-child(2),
    .ballright-radio.is-live .radio-wave i:nth-child(5) { animation-delay: -.17s; }
    .ballright-radio.is-live .radio-wave i:nth-child(3) { animation-delay: -.31s; }
    .ballright-radio.is-live .radio-wave i:nth-child(4) { animation-delay: -.08s; }
    .credit-card {
      grid-column: 3;
      grid-row: 3;
      align-self: end;
      justify-self: end;
      width: min(202px, 100%);
      padding: 13px;
      color: var(--ink-deep);
      background: var(--cream);
      --base-rot: -4deg;
      --sway: 4deg;
      --bob: -6px;
      transform: rotate(var(--base-rot));
      transition: transform .32s var(--bounce), box-shadow .32s var(--bounce);
      animation: card-idle 6s ease-in-out infinite;
      animation-delay: -3.4s;
      will-change: transform;
    }
    .credit-card:hover {
      transform: rotate(-1deg) scale(1.05) translateY(-3px);
      animation-play-state: paused;
    }
    .credit-card:active {
      transform: rotate(-3deg) scale(.97) translateY(1px);
      transition-duration: .09s;
      transition-timing-function: var(--press);
    }
    .credit-card .eyebrow { color: var(--blue); }
    .credit-card p {
      margin: 9px 0 0;
      padding-top: 9px;
      border-top: 2px solid var(--ink-deep);
      font: 800 10px/1.3 Arial, sans-serif;
      letter-spacing: .045em;
      text-transform: uppercase;
    }
    .credit-card p strong { color: var(--blue); }
    .credit-card small {
      display: block;
      margin-top: 7px;
      color: #55607a;
      font: 700 8px/1.3 Arial, sans-serif;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .ticker {
      position: fixed;
      z-index: 10;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      border-top: 3px solid var(--ink-deep);
      color: var(--ink-deep);
      background: var(--yellow);
      white-space: nowrap;
    }
    .ticker-track {
      display: inline-block;
      min-width: 100%;
      padding: 9px 0 8px;
      font-size: 13px;
      line-height: 1;
      letter-spacing: .09em;
      text-transform: uppercase;
      animation: marquee 26s linear infinite;
    }
    .ticker-track span { padding: 0 20px; }
    .ticker-track b { color: var(--red); }

    .modal-backdrop {
      position: fixed;
      z-index: 20;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 22px;
      opacity: 0;
      visibility: hidden;
      background: rgba(8,13,25,.76);
      backdrop-filter: blur(5px);
      transition: opacity .18s ease, visibility .18s ease;
    }
    .modal-backdrop.is-open { opacity: 1; visibility: visible; }
    .clip-modal {
      width: min(510px, 100%);
      padding: 21px;
      border: 4px solid var(--ink-deep);
      color: var(--ink-deep);
      background: var(--cream);
      box-shadow: 11px 12px 0 var(--blue);
      transform: rotate(-3deg) translateY(18px) scale(.92);
      transition: transform .32s var(--bounce);
    }
    .modal-backdrop.is-open .clip-modal { transform: rotate(-1deg) translateY(0) scale(1); }
    .modal-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
    .modal-heading h2 { margin: 6px 0 0; font-size: 28px; line-height: .85; letter-spacing: -.065em; font-style: italic; }
    .close-button {
      width: 31px;
      height: 31px;
      flex: 0 0 31px;
      border: 2px solid var(--ink-deep);
      color: var(--cream);
      background: var(--red);
      font-size: 20px;
      line-height: 20px;
      transition: transform .2s var(--bounce), background .15s ease;
    }
    .close-button:hover { transform: rotate(90deg) scale(1.12); background: var(--ink-deep); }
    .close-button:active {
      transform: rotate(90deg) scale(.9);
      transition-duration: .08s;
      transition-timing-function: var(--press);
    }
    .clip-modal p {
      margin: 16px 0 10px;
      font: 700 11px/1.35 Arial, sans-serif;
      letter-spacing: .04em;
    }
    .clip-modal label { display: block; margin-bottom: 7px; font: 800 9px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
    .clip-modal input {
      width: 100%;
      padding: 12px;
      border: 3px solid var(--ink-deep);
      border-radius: 0;
      outline: none;
      color: var(--ink-deep);
      background: white;
      font: 700 14px/1.2 Arial, sans-serif;
    }
    .clip-modal input:focus { border-color: var(--blue); box-shadow: 3px 3px 0 var(--yellow); }
    .modal-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 13px; }
    .modal-hint { color: #536075; font: 700 9px/1.25 Arial, sans-serif; letter-spacing: .04em; }
    .load-button {
      padding: 11px 14px;
      border: 3px solid var(--ink-deep);
      color: var(--cream);
      background: var(--blue);
      box-shadow: 4px 4px 0 var(--ink-deep);
      font: 900 10px/1 Arial, sans-serif;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: transform .22s var(--bounce), box-shadow .22s var(--bounce), background .15s ease;
    }
    .load-button:hover {
      background: var(--red);
      transform: translate(-2px, -3px) scale(1.04);
      box-shadow: 7px 8px 0 var(--ink-deep);
    }
    .load-button:active {
      transform: translate(2px, 2px) scale(.97);
      box-shadow: 1px 1px 0 var(--ink-deep);
      transition-duration: .08s;
      transition-timing-function: var(--press);
    }
    .input-error { min-height: 16px; margin: 8px 0 0; color: #cb153c; font: 700 10px/1.2 Arial, sans-serif; }

    @keyframes card-idle {
      0%, 100% { transform: rotate(var(--base-rot)) translateY(0); }
      50% { transform: rotate(calc(var(--base-rot) + var(--sway))) translateY(var(--bob)); }
    }
    @keyframes orbit-float {
      0%, 100% { transform: rotate(9deg) translateY(0); }
      50% { transform: rotate(25deg) translateY(-6px); }
    }
    @keyframes label3-drift {
      0%, 100% { transform: rotate(4deg) translateY(0); }
      50% { transform: rotate(-4deg) translateY(-4px); }
    }
    @keyframes stamp-idle {
      0%, 100% { transform: rotate(-9deg) translateY(0); }
      50% { transform: rotate(-2deg) translateY(-5px); }
    }
    @keyframes shell-idle {
      0%, 100% { transform: rotate(-.7deg) translateY(0); }
      50% { transform: rotate(-1.6deg) translateY(-4px); }
    }
    @keyframes speaker-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
    @keyframes spray-drift-one {
      0%, 100% { transform: rotate(-28deg) translate(0, 0); }
      50% { transform: rotate(-23deg) translate(9px, -8px); }
    }
    @keyframes spray-drift-two {
      0%, 100% { transform: rotate(37deg) translate(0, 0); }
      50% { transform: rotate(32deg) translate(-9px, 8px); }
    }
    @keyframes spray-drift-three {
      0%, 100% { transform: rotate(23deg) translate(0, 0); }
      50% { transform: rotate(29deg) translate(-6px, 6px); }
    }
    @keyframes radio-thump {
      0%, 100% { transform: rotate(3.5deg) translate(0, 0); }
      50% { transform: rotate(2.4deg) translate(-1px, 2px); }
    }
    @keyframes equalize {
      from { transform: scaleY(.28); }
      to { transform: scaleY(1.16); }
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0) rotate(0); }
      48% { transform: translateY(-12px) rotate(15deg); }
    }
    @keyframes pulse {
      0% { transform: scale(.85); opacity: 1; }
      100% { transform: scale(1.4); opacity: .2; }
    }
    @keyframes flicker {
      0%, 70% { filter: saturate(1); }
      71%, 100% { filter: saturate(.45) brightness(1.24); }
    }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes reaction-float {
      0% { transform: translate(0, 0) scale(.6); opacity: 0; }
      15% { opacity: 1; transform: translate(0, -14px) scale(1); }
      100% { transform: translate(var(--drift, 0px), -220px) scale(1.15); opacity: 0; }
    }
    @keyframes reaction-bump {
      0% { transform: scale(1); }
      45% { transform: scale(1.5); }
      100% { transform: scale(1); }
    }

    @media (max-width: 850px) {
      body { overflow-x: hidden; }
      .site-shell {
        width: min(730px, 100%);
        padding: 25px 20px 52px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 17px;
      }
      .main-stage { order: 1; width: min(100%, 700px); padding: 13px 0 3px; }
      .ballright-card { order: 2; align-self: flex-start; }
      .score-card { order: 3; align-self: flex-end; margin-top: calc(-57.9px - 4.72vw); }
      .ballright-radio { order: 4; align-self: flex-end; margin-top: 9px; }
      .variant-stack { order: 5; align-self: flex-end; margin-top: calc(-61.5px - 5vw); }
      .viewer-count { order: 5; align-self: flex-start; margin-top: 9px; }
      .credit-card { order: 6; align-self: flex-start; margin-top: 12px; }
      .masthead { margin-bottom: -12px; }
      .masthead h1 { font-size: clamp(54px, 15vw, 110px); }
      .media-shell::before { box-shadow: -355px 342px 0 -7px var(--red); }
    }

    @media (max-width: 490px) {
      .site-shell { padding: 21px 15px 51px; }
      .masthead-top { font-size: 8px; letter-spacing: .13em; }
      .masthead h1 { font-size: 55px; }
      .media-shell { border-width: 3px; box-shadow: 8px 9px 0 var(--ink-deep), -5px -5px 0 var(--blue); }
      .screen { border-width: 3px; }
      .screen-topbar { height: 28px; padding: 0 8px; font-size: 7px; }
      .placeholder-content { inset: 28px 0 0; padding: 16px; }
      .placeholder-content h2 { font-size: 25px; }
      .placeholder-content p { font-size: 8px; }
      .screen-action { bottom: 10px; padding: 7px 8px; font-size: 8px; }
      .screen-footer { margin-top: 9px; font-size: 7px; letter-spacing: .08em; }
      .clip-tools { margin-top: 15px; }
      .tool-button { padding: 8px 9px; font-size: 8px; }
      .reaction-pill { padding: 6px 9px; font-size: 11px; }
      .viewer-count { padding: 8px 10px; font-size: 8px; }
      .ballright-card { width: 150px; }
      .score-card { width: 154px; margin-top: -81px; }
      .ballright-radio { width: 187px; padding: 14px 8px 9px; }
      .radio-header strong { font-size: 14px; }
      .credit-card { width: 178px; margin-top: 12px; }
      .callout { font-size: 9px; padding: 8px 9px; }
      .ticker-track { font-size: 10px; }
      .modal-actions { align-items: flex-end; }
      .modal-hint { max-width: 185px; }
    }



@media (min-width: 851px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}