/**
 * Vintage TV skin (inc/tv-card.php, assets/js/tv-card.js).
 *
 * The CSS TV from the owner's CodePen "CodePen TV - 100% Pure CSS" (pen
 * zxZENow), re-scoped to .wwp-tv and re-driven by classes instead of hidden
 * radio inputs. GENERATED from the pen's own units: every "N rem" is
 * calc(N * var(--u)), so the whole set scales with its card (--u below).
 * Needs native CSS nesting, :has() and container query units (Chrome 120+,
 * Safari 17.2+, Firefox 117+).
 */

/* ---- the card around the set ---- */
.wwp-vinyl.is-tv {
	flex: 0 0 auto;
	min-height: 0;
	background: none;
	box-shadow: none;
	border-radius: 14px 14px 0 0;
}

article:has(> .wwp-vinyl.is-tv) .article-meta-head {
	display: block;
}

/* The title says what it is; the category label above it is noise on this card. */
article:has(> .wwp-vinyl.is-tv) .cat-links {
	display: none;
}

/* No "Video" chip on the TV card: the set is what it is. (The author's avatar lives in the
   footer strip on every card now - inc/card-footer.php.) */
article:has(> .wwp-vinyl.is-tv) .king-post-format {
	display: none;
}

article:has(> .wwp-vinyl.is-tv) > .article-meta {
	flex: 1 1 auto;
	padding-top: 0;
}

.wwp-tv-host {
	/* A size container: the set picks its layout from the cover's own proportions. */
	container-type: size;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* As tall as the stacked set (134 x 138) at this width, never taller than the other covers.
	   A fixed cover height left narrow cards (about 214px wide in a 4-column grid) with the set
	   centred and ~40px of empty card above it (owner, 2026-10-17: "a block of space between the
	   top of the TV and the card"). Now the set starts at the top of the card. */
	aspect-ratio: 134 / 138;
	max-height: var(--wwp-card-cover-h, 300px);
	overflow: hidden;
	background: transparent;
}

.wwp-tv {
	/* Stacked set (square covers): 134 units wide, 138 tall. Sized by WIDTH so it is full-bleed like the
	   covers; the few px of rim that overflow top and bottom are clipped by the cover. */
	--u: calc(100cqw / 134);
	flex: none;
}

/* ---- the TV Guide under the set (inc/tv-card.php wwp_tv_guide) ---- */
.wwp-vinyl.is-tv:has( > .wwp-tv-guide ) {
	flex-direction: column;
	align-items: stretch;
}

.wwp-tv-guide {
	flex: 0 1 auto;
	margin: 8px 8px 0;
	padding: 6px 8px 4px;
	border-radius: 10px;
	background: linear-gradient( 180deg, rgba( 3, 71, 70, .55 ), rgba( 6, 11, 13, .7 ) );
	box-shadow: inset 0 0 0 1px rgba( 246, 210, 122, .22 );
	font-size: 11px;
	line-height: 1.3;
	color: #eef6f5;
}

.wwp-tv-guide__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #f6d27a;
}

.wwp-tv-guide__clock {
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	color: rgba( 238, 246, 245, .6 );
}

.wwp-tv-guide__list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* About three channels in view; the lit one is scrolled into it. */
	max-height: 7.4em;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba( 246, 210, 122, .35 ) transparent;
}

.wwp-tv-guide__row {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: grid;
	grid-template-columns: 2.2em 1fr;
	column-gap: 6px;
	width: 100%;
	padding: 3px 4px;
	border-radius: 6px;
	border-left: 2px solid transparent;
}

.wwp-tv-guide__row:hover,
.wwp-tv-guide__row:focus-visible {
	background: rgba( 255, 255, 255, .06 );
}

.wwp-tv-guide__row:focus-visible {
	outline: 1px solid #7ff3e6;
}

.wwp-tv-guide__n {
	grid-row: span 2;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	color: rgba( 238, 246, 245, .55 );
}

.wwp-tv-guide__ch {
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wwp-tv-guide__now,
.wwp-tv-guide__next {
	grid-column: 2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: rgba( 238, 246, 245, .7 );
}

.wwp-tv-guide__next {
	display: none;
	font-size: 10px;
	color: rgba( 238, 246, 245, .45 );
}

/* Live channels carry the on-air dot (red is for live only). */
.wwp-tv-guide__row.is-live .wwp-tv-guide__ch::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 5px;
	border-radius: 50%;
	background: #e5322d;
	vertical-align: middle;
}

.wwp-tv-guide__row.is-off .wwp-tv-guide__now {
	color: rgba( 238, 246, 245, .4 );
	font-style: italic;
}

/* The channel the dial is on. */
.wwp-tv-guide__row.is-current {
	border-left-color: #f6d27a;
	background: rgba( 246, 210, 122, .1 );
}

.wwp-tv-guide__row.is-current .wwp-tv-guide__n,
.wwp-tv-guide__row.is-current .wwp-tv-guide__ch {
	color: #f6d27a;
}

.wwp-tv-guide__row.is-current .wwp-tv-guide__now {
	color: #7ff3e6;
}

.wwp-tv-guide__row.is-current .wwp-tv-guide__next {
	display: block;
}

/* Wide covers: screen and controls side by side with a speaker strip under, 174 units wide, 118 tall. */
@container (min-aspect-ratio: 11/10) {
	.wwp-tv {
		--u: min(calc(100cqw / 174), calc(100cqh / 118));
	}
}

/* The pen's TV, re-scoped to .wwp-tv and re-driven by classes (see tv-card.js).
   Authored in the pen's own units (rem); the build turns N rem into
   calc(N * var(--u)) so the whole set scales with its card. */

.wwp-tv {
  --body: #2d313b;
  --body-hsl: 30, 7%, 12%;
  --wht: #f2fdff;
  --wht-hsl: 30, 20%, 95%;
  --cube: calc(30 * var(--u));
  --dark: hsla(var(--body-hsl), 0.5);
  --grey: #7fe160;
  --time: 10s;
  --pixel: #0e1e2c;
  --metal: #847e75;
  --r: hsla(180, 100%, 50%, 0.2);
  --g: hsla(300, 100%, 50%, 0.2);
  font-size: calc(1 * var(--u));
  line-height: 1;
  text-align: left;

  &,
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-shadow: none;
    font: inherit;
    color: inherit;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* everything inside the set is placed by the pen's own absolutes. :where() keeps this
     rule as weak as the pen's "content *" was, so the pen's own exceptions (the grille
     slats, the dial hit areas) still win, as they did in the pen */
  :where(.wwp-tv__body) *,
  :where(.wwp-tv__body) *::before,
  :where(.wwp-tv__body) *::after,
  :where(.wwp-tv__body)::before,
  :where(.wwp-tv__body)::after {
    position: absolute;
  }

  .wwp-tv__body {
    set,
    crt,
    panel,
    knobs,
    grill,
    knobs div,
    .badge,
    span,
    flex {
      position: relative;
    }
  }

  crt div,
  screen > u,
  light,
  effects,
  test {
    width: 100%;
    height: 100%;
  }

  .wwp-tv__body {
    position: relative;
    display: block;
    /* stacked layout (square covers): the cabinet is the pen's portrait set, 4:3 screen on top */
    width: min(100cqw, calc(134 * var(--u)));
    margin: auto;
    border-radius: calc(4 * var(--u));
    box-shadow: 0 0 0 calc(2 * var(--u)) var(--body), 0 0 calc(3 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55);
    background: radial-gradient(circle at 100% 0, #d8d19d, #77533d, var(--body)) hsla(var(--wht-hsl), 0.9);
  }

  .squircle {
    border-radius: calc(100% - calc(19 * var(--u))) / calc(43 * var(--u));
    inset: -50%;
    margin: auto;
    corner-shape: squircle;
    overflow: hidden;
  }

  .d-flex {
    display: flex;
  }

  .d-block {
    display: block;
  }

  flex {
    flex: 1 1 auto;
  }

  .text-center {
    text-align: center;
  }

  .my-md {
    margin-block: calc(1 * var(--u));
  }

  .text-white {
    color: var(--wht);
    text-transform: uppercase;
    text-shadow: calc(-0.1 * var(--u)) calc(0.1 * var(--u)) 0 var(--body), calc(0.05 * var(--u)) calc(-0.05 * var(--u)) 0 #fff;
  }

  /* the labels would be a few pixels tall at card size; the controls carry aria-labels */
  .my-md {
    display: none;
  }

  set {
    display: flex;
    flex-direction: column;
    padding: calc(2 * var(--u));
    gap: calc(4 * var(--u));
    margin: auto;
    width: 100%;
    filter: drop-shadow(calc(0.2 * var(--u)) 0 0 #00ff0033) drop-shadow(calc(-0.2 * var(--u)) 0 0 #ff00ff33);

    panel {
      flex: 1 1 auto;
    }

    &:after {
      width: 100%;
      height: 100%;
      background: radial-gradient(at 40% 40%, transparent, transparent, #a64c2f),
        linear-gradient(transparent, #780d7c);
      content: "";
      z-index: 10;
      inset: 0;
      mix-blend-mode: color;
      opacity: 0.3;
      filter: blur(calc(2 * var(--u)));
      border-radius: calc(4 * var(--u));
      pointer-events: none;
    }
  }

  panel {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: calc(1 * var(--u));
    border-radius: calc(3 * var(--u));
    padding: calc(1 * var(--u));
    margin: calc(-1 * var(--u));
    background: var(--body);
    box-shadow: calc(-0.1 * var(--u)) calc(0.1 * var(--u)) calc(0.1 * var(--u)) #00000033, inset 0 0 calc(0.5 * var(--u)) #423d3a,
      calc(-0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) #36323a;
    font-size: calc(2 * var(--u));
  }

  grill,
  knobs {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    gap: calc(1 * var(--u));
    background: #3a353e;
    padding: calc(1 * var(--u));
    border-radius: calc(2 * var(--u));
    border: solid calc(1 * var(--u)) #44424e;
    box-shadow: inset calc(-0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) var(--dark),
      calc(-0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) #36323a;

    &:after {
      width: 100%;
      height: 100%;
      background: radial-gradient(at 60% 40%, var(--wht), transparent);
      content: "";
      transform: translate3d(calc(-1 * var(--u)), 0, 0);
      border-radius: calc(1 * var(--u));
      z-index: 2;
      opacity: 0.1;
      pointer-events: none;
    }

    speaker {
      max-width: 80%;
      max-height: 80%;
      background: conic-gradient(from 180deg, var(--body), #1e2128, var(--body));
      margin: auto;
      border-radius: 50%;
      inset: 0;
      box-shadow: calc(-0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) hsla(var(--wht-hsl), 0.1),
        calc(0.5 * var(--u)) calc(-0.5 * var(--u)) calc(0.5 * var(--u)) hsla(var(--body-hsl), 0.5);
    }

    > u {
      display: block;
      height: calc(0.98 * var(--u));
      background: #44424e;
      border-radius: calc(0.5 * var(--u));
      box-shadow: calc(-0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) var(--dark),
        inset calc(-0.2 * var(--u)) calc(0.2 * var(--u)) calc(0.2 * var(--u)) hsla(var(--wht-hsl), 0.1);
      position: relative;
      z-index: 1;
    }
  }

  grill {
    flex: 3 1 0;
    min-width: 0;
  }

  /* a short grille: the set is a row of controls here, not a tall side panel */
  grill > u:nth-of-type(n + 11) {
    display: none;
  }

  knobs {
    flex: 11 1 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;

    div {
      border-radius: calc(0.5 * var(--u));
      background: repeating-linear-gradient(
          90deg,
          transparent,
          transparent calc(0.5 * var(--u)),
          hsla(var(--body-hsl), 0.01) calc(0.5 * var(--u)),
          hsla(var(--wht-hsl), 0.025) calc(1 * var(--u))
        ),
        radial-gradient(at 30% 70%, hsla(var(--body-hsl), 0.5), transparent),
        #454149;
      box-shadow: calc(-0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) var(--dark),
        inset calc(-0.2 * var(--u)) calc(0.2 * var(--u)) calc(0.2 * var(--u)) hsla(var(--wht-hsl), 0.1),
        inset 0 0 0 calc(1 * var(--u)) #44424e,
        inset calc(-1.25 * var(--u)) calc(1.25 * var(--u)) calc(0.5 * var(--u)) var(--dark),
        inset calc(-1.25 * var(--u)) calc(1.25 * var(--u)) calc(0.5 * var(--u)) var(--dark);
      padding: calc(2 * var(--u));
    }

    div:nth-of-type(1),
    div:nth-of-type(2) {
      flex: 0 0 auto;
    }
  }

  /* the plate: the record label, whatever label the song / channel carries */
  .badge {
    width: 8em;
    height: 6em;
    display: block;
    border-radius: 0.5em;
    background: linear-gradient(45deg, #908e95, #928b90, #a3a3a8, #575356);
    box-shadow: -0.25em 0.25em 0.25em var(--dark),
      inset -0.2em 0.2em 0.2em hsla(var(--wht-hsl), 0.1),
      inset 0 0 0 0.5em #44424e,
      inset -0.75em 0.75em 0.5em var(--dark);
    margin: auto;
    z-index: 3;
    transition: filter 0.2s ease-in-out;

    &:hover {
      filter: brightness(1.2) contrast(1.2);
    }
  }

  /* the label as a small black record: grooves, then the label in the middle */
  .badge {
    width: 7em;
    height: 7em;
    background: none;
    box-shadow: none;

    &:hover {
      filter: brightness(1.15);
    }
  }

  .wwp-tv__logo {
    inset: 0;
    margin: auto;
    width: 6.6em;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background:
      radial-gradient(circle, transparent 0 39%, rgba(255, 255, 255, 0.07) 40%, transparent 41%),
      repeating-radial-gradient(circle, #121214 0 0.18em, #26262b 0.18em 0.32em);
    box-shadow: 0 0.35em 0.7em rgba(0, 0, 0, 0.55), inset 0 0 0 0.12em #0b0b0d;
    animation: wwptv-spin 6s linear infinite paused;
    transition: opacity 0.35s ease;

    img {
      inset: 0;
      margin: auto;
      /* the WorldWidePop PNG's disc fills ~87% of its square, corners are a baked
         checkerboard: clip to the disc. Shows as a label 40% of the record. */
      width: 46%;
      height: 46%;
      object-fit: cover;
      clip-path: circle(43.5% at 50% 50%);
    }

    /* sheen across the grooves */
    &::after {
      content: "";
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(-45deg, transparent 30%, rgba(255, 255, 255, 0.12), transparent 70%);
    }
  }

  &.is-on .wwp-tv__logo {
    animation-play-state: running;
  }

  .wwp-tv__logo.is-swapping {
    opacity: 0;
  }

  /* power */
  .wwp-tv__power,
  .power u,
  .tuning u {
    position: relative;
    display: block;

    &,
    &:before,
    &:after {
      aspect-ratio: 1/1;
      border-radius: 50%;
    }
  }

  .wwp-tv__power {
    width: 6em;
    background: var(--body);
    box-shadow: -0.2em 0.2em 0.2em hsla(var(--wht-hsl), 0.1),
      0.2em -0.2em 0.2em hsla(var(--body-hsl), 0.5);
    z-index: 5;
    inset: 0;
    margin: auto;

    &:after,
    &:before {
      content: "";
      width: 4em;
      inset: 0;
      margin: auto;
    }

    &:after {
      background: radial-gradient(transparent, #ff0199, transparent);
      mix-blend-mode: lighten;
      opacity: 0;
    }

    &:before {
      background: #792e5b;
      box-shadow: -1em 1em 1em hsla(var(--body-hsl), 0.5),
        inset -1em 1em 1em hsla(var(--body-hsl), 0.5),
        inset -0.25em 0.25em 0.1em hsla(var(--wht-hsl), 0.5),
        inset 0.25em -0.25em 0.1em hsla(var(--body-hsl), 0.5),
        inset 0 0 0 0.5em var(--metal), inset 0 0 0 0.6em var(--body),
        inset -0.6em 0.6em 0 hsla(var(--wht-hsl), 0.5),
        inset 0.6em -0.6em 0 hsla(var(--body-hsl), 0.5),
        inset 0 0 0 0.8em hsla(var(--body-hsl), 0.2);
      transition: all 0.2s ease-in-out;
    }

    &:hover:before,
    &:focus-visible:before {
      filter: brightness(1.2) contrast(1.2);
    }
  }

  &.is-on .wwp-tv__power {
    &:before {
      filter: brightness(1.5) contrast(1.2);
      box-shadow: inset 0 0 0.2em 0.1em var(--body),
        inset -1em 1em 1em hsla(var(--body-hsl), 0.5),
        inset -0.25em 0.25em 0.1em hsla(var(--wht-hsl), 0.5),
        inset 0.25em -0.25em 0.1em hsla(var(--body-hsl), 0.5),
        inset 0 0 0 0.5em var(--metal), inset 0 0 0 0.6em var(--body),
        inset -0.6em 0.6em 0 hsla(var(--wht-hsl), 0.5),
        inset 0.6em -0.6em 0 hsla(var(--body-hsl), 0.5),
        inset 0 0 0 0.8em hsla(var(--body-hsl), 0.2);
    }

    &:after {
      opacity: 0.5;
    }
  }

  /* the two dials */
  .vol > u,
  .tuning > u {
    width: 6em;
    background: var(--body);
    box-shadow: -0.2em 0.2em 0.2em hsla(var(--wht-hsl), 0.1),
      0.2em -0.2em 0.2em hsla(var(--body-hsl), 0.5);
    z-index: 5;
    inset: 0;
    margin: auto;

    > u {
      &:before,
      > u:before {
        content: "";
        width: 5em;
        inset: 0;
        margin: auto;
      }

      > u:before {
        border: dashed 0.1em var(--body);
      }

      &:before {
        background: linear-gradient(45deg, #908e95, #575356, #a3a3a8);
        box-shadow: -1em 1em 1em hsla(var(--body-hsl), 0.5),
          inset -1em 1em 1em hsla(var(--body-hsl), 0.5),
          inset -0.25em 0.25em 0.1em hsla(var(--wht-hsl), 0.5),
          inset 0.25em -0.25em 0.1em hsla(var(--body-hsl), 0.5),
          inset 0 0 0 0.5em var(--metal), inset 0 0 0 0.6em var(--body),
          inset -0.6em 0.6em 0 hsla(var(--wht-hsl), 0.5),
          inset 0.6em -0.6em 0 hsla(var(--body-hsl), 0.5),
          inset 0 0 0 0.8em hsla(var(--body-hsl), 0.2);
      }

      &:after {
        background: var(--wht);
        height: 0.5em;
        border-radius: 0.25em;
        box-shadow: inset -0.15em 0.15em 0.15em hsla(var(--body-hsl), 0.5);
        content: "";
        width: 0.5em;
        inset: 0;
        margin: auto;
        transform: translate3d(0, -1em, 0);
      }
    }
  }

  .tuning > u {
    width: 10em;
    margin: auto;

    > u {
      width: 10em;
      position: absolute;

      &:before,
      > u:before {
        width: 9em;
      }

      &:after {
        height: 2em;
        box-shadow: inset -0.25em 0.25em 0.25em hsla(var(--body-hsl), 0.5);
        transform: translate3d(0, -2em, 0);
      }
    }
  }

  /* knob angles come from the script: --vol-a, --ch-a */
  .vol u u,
  .tuning u u {
    &,
    &:before {
      transition: transform 0.5s ease-in-out;
    }
  }

  .vol u u {
    transform: rotate(var(--vol-a, 45deg));

    &:before {
      transform: rotate(calc(var(--vol-a, 45deg) * -1));
    }
  }

  .tuning u u {
    transform: rotate(var(--ch-a, -135deg));

    &:before {
      transform: rotate(calc(var(--ch-a, -135deg) * -1));
    }
  }

  /* the two hit areas over each dial: left = down / previous, right = up / next */
  dial,
  dialvol {
    width: 10em;
    aspect-ratio: 1/1;
    display: flex;
    z-index: 6;

    button {
      position: relative;
      width: 50%;
      height: 100%;
      opacity: 0;
    }
  }

  dialvol {
    width: 6em;
    top: 0;
  }

  .wwp-tv__power::after,
  dial button,
  dialvol button {
    cursor: pointer;
  }

  /* channel numbers printed round the dial */
  .wwp-tv__num {
    left: 50%;
    top: 50%;
    width: 1.4em;
    height: 1.4em;
    margin: -0.7em 0 0 -0.7em;
    font: 700 1.5em/1.4em ui-sans-serif, system-ui, sans-serif;
    text-align: center;
    color: #b9b4a8;
    text-shadow: 0 0.1em 0 #1c1c22;
    transform: rotate(var(--a)) translateY(-4.5em) rotate(calc(var(--a) * -1));
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }

  .wwp-tv__num.is-current {
    color: #ffe08a;
    text-shadow: 0 0 0.4em rgba(255, 190, 70, 0.9);
  }

  /* the glass */
  tune {
    width: calc(100% - calc(26 * var(--u)));
    height: calc(100% - calc(21 * var(--u)));
    display: none;
    opacity: 0;
  }

  &.is-on tune {
    opacity: 1;
  }

  &.is-tuning tune {
    animation: wwptv-channel 0.2s forwards;
    display: block;
  }

  &.is-tuning crt > div > div {
    animation: wwptv-tuning 0.1s ease-in-out infinite;
    filter: contrast(2);
  }

  &.is-tuning effects {
    opacity: 1;

    u {
      animation: wwptv-change 5s forwards;
      opacity: 1;
    }
  }

  /* what is on the screen: the cube is the warm-up / idle, bars are off-air */
  angle,
  cube {
    width: var(--cube);
    aspect-ratio: 2/1;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  angle {
    transform: translate3d(0, calc(-4 * var(--u)), calc(10 * var(--u))) rotateX(-30deg);
    animation: wwptv-wobble 0.03s steps(2) infinite;
  }

  &:not([data-view="cube"]) angle {
    display: none;
  }

  test {
    display: none;
    opacity: 1;
    transform: translateZ(calc(-50 * var(--u))) scaleX(1.08) scaleY(1.14);

    u {
      width: 100%;
      height: 100%;

      u {
        position: relative;
        display: block;
        margin-block-end: calc(2.3 * var(--u));

        &,
        &:before,
        &:after {
          background: linear-gradient(
            to right,
            #b8adc7 0% 14%,
            #c4b61a 14% 28%,
            #00bde5 28% 42%,
            #00cd00 42% 56%,
            #e200f7 56% 70%,
            #f20000 70% 85%,
            #0000ff 85% 100%
          );
          height: calc(1 * var(--u));
          width: 100%;
        }

        &:before {
          top: calc(1.1 * var(--u));
          animation: wwptv-scanning 0.1s infinite linear;
        }

        &:after {
          top: calc(2.2 * var(--u));
          animation: wwptv-scanning 0.2s -0.1s infinite;
        }

        &:nth-of-type(even) {
          animation: wwptv-scanning 0.1s infinite linear;
        }

        &:nth-of-type(odd) {
          animation: wwptv-scanning 0.3s infinite linear;
        }

        &:nth-of-type(11),
        &:nth-of-type(19) {
          animation: wwptv-scanning-lg 0.2s -0.3s infinite linear;
        }

        &:nth-of-type(1) {
          animation: wwptv-scanning-lg 0.1s -0.05s infinite;
        }

        &:nth-of-type(n + 15) {
          &,
          &:before,
          &:after {
            background: linear-gradient(
              to right,
              #0000ff 0% 14%,
              var(--body) 14% 28%,
              #e200f7 28% 42%,
              var(--body) 42% 56%,
              #00bde5 56% 70%,
              var(--body) 70% 85%,
              #b8adc7 85% 100%
            );
          }
        }

        &:nth-of-type(n + 17) {
          &,
          &:before,
          &:after {
            background: linear-gradient(
              to right,
              #001b4b 0% 18%,
              var(--wht) 18% 35%,
              #32006a 35% 52%,
              #131313 52% 70%,
              #1d1d1d 70% 85%,
              var(--body) 85% 100%
            );
          }
        }
      }
    }
  }

  &[data-view="test"] test {
    display: block;
  }

  /* the wire cube */
  cube {
    animation: wwptv-rotate var(--time) infinite linear;

    x,
    y,
    z {
      &,
      &:before,
      &:after {
        width: 100%;
        height: 100%;
      }

      &:before {
        transform: rotateY(90deg) translate3d(0, 0, calc(var(--cube) / 2));
        border: calc(2 * var(--u)) solid var(--grey);
      }

      &:after {
        transform: rotateY(90deg) translate3d(0, 0, calc(var(--cube) / 2 * -1));
        border: calc(2 * var(--u)) solid var(--grey);
      }
    }

    x {
      &:before {
        animation: wwptv-light var(--time) -5s infinite linear;
      }

      &:after {
        animation: wwptv-light var(--time) infinite linear;
      }
    }

    x:nth-of-type(2) {
      &:before {
        animation: wwptv-light var(--time) infinite linear;
      }

      &:after {
        animation: wwptv-light var(--time) -5s infinite linear;
      }
    }

    y {
      transform: rotateY(90deg);

      &:before {
        animation: wwptv-light var(--time) -7.5s infinite linear;
      }

      &:after {
        animation: wwptv-light var(--time) -2.5s infinite linear;
      }
    }

    y:nth-of-type(2) {
      &:before {
        animation: wwptv-light var(--time) -2.5s infinite linear;
      }

      &:after {
        animation: wwptv-light var(--time) -7.5s infinite linear;
      }
    }

    z {
      transform: rotateZ(90deg);
      height: 200%;

      &:after {
        filter: brightness(2);
      }

      &:before {
        transform: rotateY(90deg);
      }
    }

    x:nth-of-type(2),
    y:nth-of-type(2),
    z:nth-of-type(2) {
      &:before {
        transform: rotateY(90deg) translate3d(0, 0, calc((var(--cube) / 2) - calc(2 * var(--u))));
      }

      &:after {
        transform: rotateY(90deg) translate3d(0, 0, calc((var(--cube) / 2 * -1) + calc(2 * var(--u))));
      }
    }

    z:nth-of-type(2) {
      &:before {
        transform: rotateY(90deg) translate3d(0, 0, calc(-2 * var(--u)));
      }
    }

    z:nth-of-type(3) {
      &:before {
        transform: rotateY(90deg) translate3d(0, 0, calc((var(--cube) / 2)));
        border-color: #000;
        filter: blur(calc(3 * var(--u)));
      }
    }
  }

  /* the cabinet */
  crt {
    align-self: stretch;
    aspect-ratio: 4/3;
    margin: calc(1 * var(--u));
    border: calc(1 * var(--u)) solid #dad9b3;
    border-radius: calc(6 * var(--u));
    box-shadow: 0 0 0 calc(1 * var(--u)) #41423a, inset 0 0 calc(0.5 * var(--u)) calc(3 * var(--u)) #423d3a,
      calc(-0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) calc(2 * var(--u)) #36323a;
    height: calc(94 * var(--u));
    z-index: 3;

    > div,
    screen,
    light,
    effects {
      transform-style: preserve-3d;
      perspective: calc(500 * var(--u));

      *,
      *:before,
      *:after,
      &:before,
      &:after {
        left: 0;
        top: 0;
        transform-style: preserve-3d;
      }

      *:before,
      *:after,
      &:before,
      &:after {
        content: "";
      }
    }

    &:before {
      width: calc(100% + calc(4 * var(--u)));
      height: calc(100% + calc(4 * var(--u)));
      border-radius: calc(3 * var(--u));
      content: "";
      right: 0;
      top: 0;
      margin: calc(-2 * var(--u));
      z-index: -2;
      background: repeating-linear-gradient(
          90deg,
          transparent,
          transparent calc(0.5 * var(--u)),
          hsla(var(--body-hsl), 0.01) calc(0.5 * var(--u)),
          hsla(var(--wht-hsl), 0.025) calc(1 * var(--u))
        ),
        radial-gradient(at 30% 70%, hsla(var(--body-hsl), 0.5), transparent),
        #454149;
      box-shadow: calc(-1.5 * var(--u)) calc(1.5 * var(--u)) calc(1.5 * var(--u)) var(--dark),
        inset calc(-0.2 * var(--u)) calc(0.2 * var(--u)) calc(0.2 * var(--u)) hsla(var(--wht-hsl), 0.1),
        inset 0 0 0 calc(1 * var(--u)) #44424e,
        inset calc(-1.25 * var(--u)) calc(1.25 * var(--u)) calc(0.5 * var(--u)) var(--dark),
        inset calc(-1.25 * var(--u)) calc(1.25 * var(--u)) calc(0.5 * var(--u)) var(--dark),
        0 0 0 calc(1 * var(--u)) var(--body);
    }
  }

  crt > div {
    width: 80%;
    height: 75%;
    overflow: hidden;
    margin: auto;
    inset: 0;
  }

  /* power: off collapses to a dot, on is the pen's roll-up */
  crt > div,
  effects {
    transform: scaleY(0) scaleX(0);
    animation: wwptv-off 1.4s ease-in-out reverse;
  }

  &.is-on {
    crt > div,
    effects {
      animation: wwptv-on 2s ease-in-out forwards;
    }
  }

  screen {
    width: calc(100% - calc(2 * var(--u)));
    height: calc(100% - calc(2 * var(--u)));
    overflow: hidden;
    border-radius: calc(4.5 * var(--u));
    border: calc(1 * var(--u)) solid #76767a;
    margin: calc(1 * var(--u));

    > u {
      > u {
        margin: auto;
        filter: blur(calc(1 * var(--u)));
      }

      > u:nth-of-type(3),
      u:nth-of-type(4) {
        width: calc(100 * var(--u));
        height: calc(100 * var(--u));
        background: linear-gradient(45deg, #484140, #6f6b6c, #343342);
        transform: translate3d(0, calc(-50 * var(--u)), 0) rotate(45deg);
        inset: auto 0 0 0;
      }

      u:nth-of-type(4) {
        background: linear-gradient(45deg, #969da4, #808797, #d2d0b7, #4d4749);
        transform: translate3d(0, calc(62 * var(--u)), 0) rotate(45deg);
      }

      u:nth-of-type(2),
      u:nth-of-type(1) {
        width: calc(50 * var(--u));
        height: 100%;
        background: linear-gradient(#4f484b, #eef1f4, #36323a);
      }

      u:nth-of-type(1) {
        inset: 0 0 0 auto;
        background: linear-gradient(#36323a, #423a45, #4f484b);
      }
    }

    > u:nth-of-type(2) {
      filter: drop-shadow(0 0 calc(1 * var(--u)) #39343c);

      &:before,
      &:after {
        inset: 0;
        margin: auto;
        background: linear-gradient(90deg, #545561, #5b585d, #7d7d79, #3d3a3f);
        filter: blur(calc(0.5 * var(--u)));
      }

      &:before {
        width: calc(100% - calc(18 * var(--u)));
        height: calc(100% - calc(10 * var(--u)));
        border-radius: calc(100% - calc(39 * var(--u))) / calc(7 * var(--u));
        z-index: 1;
        background: linear-gradient(90deg, #545561, #5b585d, #7d7d79, #3d3a3f);
        background-size: 105%;
      }

      &:after {
        width: calc(100% - calc(12 * var(--u)));
        height: calc(100% - calc(20 * var(--u)));
        border-radius: calc(5 * var(--u)) / calc(100% - calc(33 * var(--u)));
      }
    }

    > u:nth-of-type(3) {
      filter: drop-shadow(calc(-0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) #eef1f4)
        drop-shadow(calc(0.5 * var(--u)) calc(-0.5 * var(--u)) calc(0.5 * var(--u)) var(--body));

      &:before {
        width: calc(100% - calc(24 * var(--u)));
        height: calc(100% - calc(14 * var(--u)));
        border-radius: calc(100% - calc(32 * var(--u))) / calc(8 * var(--u));
        inset: 0;
        margin: auto;
        z-index: 1;
        background: var(--body);
      }

      &:after {
        width: calc(100% - calc(18 * var(--u)));
        height: calc(100% - calc(24 * var(--u)));
        border-radius: calc(24 * var(--u)) / calc(100% - calc(-134 * var(--u)));
        inset: 0;
        margin: auto;
        background: var(--body);
      }
    }
  }

  /* the raster: scanlines + RGB triads over the glass. Per video, on or off. */
  crt effects {
    width: calc(100% - calc(26 * var(--u)));
    height: calc(100% - calc(21 * var(--u)));
    filter: contrast(1);

    /* --raster is the intensity, 0 to 1 (1 = the pen's own look); set per clip by the script */
    &:before,
    &:after {
      width: 200%;
      height: 200%;
      left: -50%;
      top: -50%;
      opacity: calc(var(--raster, 0.6) * 0.5);
      transition: opacity var(--raster-t, 0.4s) ease;
    }

    &:before {
      background: repeating-linear-gradient(
        transparent,
        transparent calc(0.5 * var(--u)),
        var(--pixel) calc(0.5 * var(--u)),
        var(--pixel) calc(1 * var(--u))
      );
      background-size: 100% calc(1 * var(--u));
      animation: wwptv-pixels2 1s infinite linear;
    }

    &:after {
      background: repeating-linear-gradient(90deg, var(--r), var(--g) 5px),
        repeating-linear-gradient(transparent, var(--pixel) 5px);
      animation: wwptv-pixels3 1s infinite linear;
    }

    u {
      background: linear-gradient(
        to right,
        var(--body) 0% 14%,
        #b8adc7 14% 28%,
        #c4b61a 28% 38%,
        #00bde5 42% 56%,
        #00cd00 56% 70%,
        #e200f7 70% 85%,
        #f20000 70% 85%,
        #0000ff 85% 100%
      );
      height: calc(2 * var(--u));
      width: 110%;
      transform: translate3d(0, calc(50 * var(--u)), 0) skewX(-80deg);
      -webkit-mask-image: linear-gradient(#000, transparent);
      mask-image: linear-gradient(#000, transparent);
      opacity: 0;
      mix-blend-mode: color-burn;
    }
  }

  &.no-raster crt effects {
    &:before,
    &:after {
      opacity: 0;
    }
  }

  /* the window reflected in the glass */
  light {
    filter: blur(calc(0.2 * var(--u)));
    pointer-events: none;

    &:before {
      width: calc(100% - calc(24 * var(--u)));
      height: calc(100% - calc(19 * var(--u)));
      border-radius: calc(100% - calc(19 * var(--u))) / calc(43 * var(--u));
      inset: 0;
      margin: auto;
      background: radial-gradient(circle at 100% 50%, transparent, var(--body)),
        radial-gradient(circle at 0 50%, transparent, var(--wht) 77%, transparent);
      opacity: 0.5;
      corner-shape: squircle;
      filter: blur(calc(1 * var(--u)));
    }

    u:nth-of-type(1) {
      width: calc(0.75 * var(--u));
      height: calc(7 * var(--u));
      background: #f2fdff;
      transform: translate3d(calc(76.6 * var(--u)), calc(44 * var(--u)), 0) skewX(-1deg);
      border-radius: calc(0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.3 * var(--u)) / calc(0.5 * var(--u)) calc(0.5 * var(--u)) 80% 80%;

      &:before {
        width: calc(0.75 * var(--u));
        height: calc(0.6 * var(--u));
        background: hsla(var(--wht-hsl), 0.7);
        transform: translate3d(calc(-0.1 * var(--u)), calc(-2.9 * var(--u)), 0);
        border-radius: calc(0.5 * var(--u));
      }

      &:after {
        width: calc(0.6 * var(--u));
        height: calc(5 * var(--u));
        background: hsla(var(--wht-hsl), 0.1);
        transform: translate3d(calc(0.1 * var(--u)), calc(-2.9 * var(--u)), 0) skewX(1deg);
        border-radius: calc(0.5 * var(--u));
      }
    }

    u:nth-of-type(2) {
      width: calc(0.6 * var(--u));
      height: calc(0.8 * var(--u));
      background: hsla(var(--wht-hsl), 0.5);
      transform: translate3d(calc(76.4 * var(--u)), calc(54.5 * var(--u)), 0) skewX(-2deg);
      border-radius: calc(0.5 * var(--u));
      box-shadow: 0 calc(1 * var(--u)) 0 hsla(var(--wht-hsl), 0.5);

      &:before {
        width: calc(0.75 * var(--u));
        height: calc(0.75 * var(--u));
        background: hsla(var(--wht-hsl), 0.3);
        transform: translate3d(calc(-0.35 * var(--u)), calc(-15.5 * var(--u)), 0);
        border-radius: calc(0.5 * var(--u));
        box-shadow: calc(-0.1 * var(--u)) calc(-1.5 * var(--u)) 0 hsla(var(--wht-hsl), 0.3),
          calc(-0.2 * var(--u)) calc(-2 * var(--u)) 0 hsla(var(--wht-hsl), 0.3);
      }

      &:after {
        width: calc(0.5 * var(--u));
        height: calc(3.5 * var(--u));
        background: hsla(var(--wht-hsl), 0.1);
        transform: translate3d(calc(-0.1 * var(--u)), calc(-17.5 * var(--u)), 0) skewX(2deg);
        border-radius: calc(0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.3 * var(--u)) / 80% 80% 80% 80%;
      }
    }

    u:nth-of-type(3) {
      width: calc(1 * var(--u));
      height: calc(1 * var(--u));
      background: hsla(var(--wht-hsl), 0.2);
      transform: translate3d(calc(76.3 * var(--u)), calc(34.5 * var(--u)), 0) skewX(-2deg);
      border-radius: calc(0.25 * var(--u));

      &:before {
        width: calc(1.2 * var(--u));
        height: calc(1.2 * var(--u));
        background: hsla(var(--wht-hsl), 0.2);
        transform: translate3d(calc(-0.4 * var(--u)), calc(-4 * var(--u)), 0) skewY(4deg);
        border-radius: calc(0.1 * var(--u));
        box-shadow: calc(-0.4 * var(--u)) calc(-4.5 * var(--u)) 0 hsla(var(--wht-hsl), 0.2);
      }

      &:after {
        width: calc(1.3 * var(--u));
        height: calc(1.3 * var(--u));
        background: hsla(var(--wht-hsl), 0.1);
        transform: translate3d(calc(-0.2 * var(--u)), calc(-4 * var(--u)), 0) skewY(4deg);
        border-radius: calc(0.1 * var(--u));
        box-shadow: calc(-0.8 * var(--u)) calc(-5 * var(--u)) 0 calc(0.1 * var(--u)) hsla(var(--wht-hsl), 0.2),
          calc(-0.9 * var(--u)) calc(-6 * var(--u)) 0 calc(0.2 * var(--u)) hsla(var(--wht-hsl), 0.1),
          calc(-1 * var(--u)) calc(-7.5 * var(--u)) 0 calc(0.3 * var(--u)) hsla(var(--wht-hsl), 0.05);
      }
    }

    u:nth-of-type(4) {
      width: calc(1 * var(--u));
      height: calc(9 * var(--u));
      background: hsla(var(--wht-hsl), 0.05);
      transform: translate3d(calc(82.5 * var(--u)), calc(15 * var(--u)), 0) skewX(8deg);
      border-radius: 50% 50% calc(0.5 * var(--u)) calc(0.5 * var(--u)) / 50% 50% 50% calc(0.5 * var(--u));
      filter: blur(calc(0.5 * var(--u)));

      &:before {
        width: calc(1.6 * var(--u));
        height: calc(15 * var(--u));
        background: hsla(var(--wht-hsl), 0.05);
        transform: translate3d(calc(-0.5 * var(--u)), calc(10 * var(--u)), 0) skewX(-4deg);
        border-radius: 0 50% 50% calc(0.5 * var(--u)) / 50% 50% 50% calc(0.5 * var(--u));
      }

      &:after {
        width: calc(2 * var(--u));
        height: calc(26 * var(--u));
        background: hsla(var(--wht-hsl), 0.05);
        transform: translate3d(calc(-7 * var(--u)), calc(29 * var(--u)), 0) skewX(-10deg);
        border-radius: 50%;
        box-shadow: calc(3 * var(--u)) calc(-4 * var(--u)) 0 calc(0.5 * var(--u)) hsla(var(--wht-hsl), 0.05);
      }
    }

    u:nth-of-type(5) {
      width: calc(100% - calc(24 * var(--u)));
      height: calc(100% - calc(19 * var(--u)));
      border-radius: 50%;
      inset: 0;
      margin: auto;
      corner-shape: squircle;
      overflow: hidden;
      transform: rotateY(0);

      > u:nth-of-type(1) {
        transform: translate3d(calc(63 * var(--u)), calc(-10 * var(--u)), 0) rotateY(-60deg);
        width: calc(50 * var(--u));
        height: calc(70 * var(--u));
        background: transparent;
        overflow: hidden;
        filter: drop-shadow(0 calc(-2 * var(--u)) 0 hsla(var(--wht-hsl), 0.5));
        -webkit-mask-image: radial-gradient(at right 60%, transparent, #000, transparent);
        mask-image: radial-gradient(at right 60%, transparent, #000, transparent);

        > u {
          &,
          &:before,
          &:after {
            width: calc(31 * var(--u));
            height: calc(100 * var(--u));
            border: solid calc(7 * var(--u)) transparent;
            border-right: dashed calc(7 * var(--u)) hsla(var(--wht-hsl), 0.05);
            background: transparent;
            border-radius: 50%;
          }

          transform: translate3d(calc(10 * var(--u)), calc(-3 * var(--u)), 0) scale(0.9);

          &:before {
            transform: translate3d(calc(-14 * var(--u)), calc(-7 * var(--u)), 0) scale(0.95);
          }

          &:after {
            transform: translate3d(calc(-20.5 * var(--u)), calc(-7 * var(--u)), 0) scale(0.9);
          }
        }

        > u:nth-of-type(2) {
          transform: translate3d(calc(-7 * var(--u)), calc(-3.3 * var(--u)), 0) scale(0.77);

          &:after {
            border-right: dashed calc(1 * var(--u)) hsla(var(--wht-hsl), 0.05);
            transform: translate3d(calc(-19 * var(--u)), calc(-7 * var(--u)), 0) scale(0.95);
          }
        }
      }

      > u:nth-of-type(2) {
        transform: translate3d(calc(67 * var(--u)), calc(-10 * var(--u)), 0);
        width: calc(12 * var(--u));
        height: calc(71 * var(--u));
        background: transparent;
        overflow: hidden;
        box-shadow: none;

        > u {
          &,
          &:before,
          &:after {
            width: calc(21 * var(--u));
            height: calc(100 * var(--u));
            border: solid calc(3 * var(--u)) transparent;
            border-right: solid calc(3 * var(--u)) hsla(var(--wht-hsl), 0.025);
            background: transparent;
            border-radius: 50%;
            right: 0;
            left: auto;
            -webkit-mask-image: linear-gradient(transparent, #000, transparent);
            mask-image: linear-gradient(transparent, #000, transparent);
          }

          transform: translate3d(0, calc(-5 * var(--u)), 0) scale(0.9);

          &:before {
            transform: translate3d(calc(1 * var(--u)), calc(1 * var(--u)), 0);
          }

          &:after {
            transform: translate3d(calc(7 * var(--u)), calc(-3 * var(--u)), 0) rotate(-1deg);
          }
        }

        > u:nth-of-type(2) {
          transform: translate3d(0, calc(-5 * var(--u)), 0) scale(0.9);

          &:before {
            transform: translate3d(0, calc(1 * var(--u)), 0);
            border-right: solid calc(3 * var(--u)) hsla(var(--body-hsl), 0.025);
          }

          &:after {
            transform: translate3d(calc(-3 * var(--u)), calc(-3 * var(--u)), 0) rotate(-1deg);
            border-right: solid calc(3 * var(--u)) hsla(var(--wht-hsl), 0.025);
          }
        }
      }

      > u:nth-of-type(3) {
        width: calc(143 * var(--u));
        height: calc(54 * var(--u));
        border: solid calc(30 * var(--u)) transparent;
        border-bottom: solid calc(20 * var(--u)) hsla(var(--wht-hsl), 0.025);
        background: transparent;
        border-radius: 50%;
        transform: translate3d(calc(-25 * var(--u)), calc(30 * var(--u)), 0);

        &:before {
          transform: translate3d(calc(20 * var(--u)), calc(-41 * var(--u)), 0);
          background: hsla(var(--wht-hsl), 0.01);
          height: calc(40 * var(--u));
          box-shadow: calc(-8 * var(--u)) 0 0 hsla(var(--wht-hsl), 0.01);
        }

        &:after {
          transform: translate3d(calc(-1 * var(--u)), calc(-71 * var(--u)), 0);
          background: hsla(var(--wht-hsl), 0.01);
          height: calc(30 * var(--u));
          width: calc(30 * var(--u));
          box-shadow: none;
        }
      }

      > u:nth-of-type(4) {
        width: calc(36 * var(--u));
        height: calc(60 * var(--u));
        transform: translate3d(calc(34 * var(--u)), 0, 0);
        background: linear-gradient(90deg, hsla(var(--wht-hsl), 0.025), transparent);
        border-radius: 0;

        &:after {
          display: none;
        }

        &:before {
          transform: translate3d(calc(-49 * var(--u)), calc(19 * var(--u)), 0);
          background: linear-gradient(90deg, transparent, hsla(var(--wht-hsl), 0.01));
          height: calc(37 * var(--u));
          width: calc(24 * var(--u));
          box-shadow: none;
          border-radius: 0;
        }
      }

      > u:nth-of-type(5),
      > u:nth-of-type(6) {
        width: calc(100 * var(--u));
        height: calc(30 * var(--u));
        border: solid calc(7 * var(--u)) transparent;
        border-top: solid calc(1 * var(--u)) hsla(var(--wht-hsl), 0.025);
        background: transparent;
        border-radius: 50%;
        transform: translate3d(0, calc(-5 * var(--u)), 0);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000, transparent);
        mask-image: linear-gradient(90deg, transparent, #000, transparent);

        &:before,
        &:after {
          width: calc(100 * var(--u));
          height: calc(20 * var(--u));
          border-top: solid calc(2 * var(--u)) hsla(var(--wht-hsl), 0.025);
          background: transparent;
          border-radius: 50%;
          transform: translate3d(calc(-8 * var(--u)), calc(0.5 * var(--u)), 0) rotate(2deg);
          -webkit-mask-image: linear-gradient(90deg, transparent, transparent, #000, transparent, transparent);
          mask-image: linear-gradient(90deg, transparent, transparent, #000, transparent, transparent);
        }

        &:after {
          transform: translate3d(calc(-8 * var(--u)), calc(3 * var(--u)), 0) rotate(3deg);
          opacity: 0.5;
        }
      }

      > u:nth-of-type(6) {
        transform: translate3d(calc(-8 * var(--u)), calc(8 * var(--u)), 0) rotate(-4deg);
        border-top: solid calc(2 * var(--u)) hsla(var(--wht-hsl), 0.025);
        -webkit-mask-image: linear-gradient(90deg, transparent, transparent, transparent, #000, transparent, transparent);
        mask-image: linear-gradient(90deg, transparent, transparent, transparent, #000, transparent, transparent);
      }
    }
  }

  /* the speaker strip: a second grille outside the panel, shown only in the wide layout */
  .wwp-tv__strip {
    display: none;
  }

  /* ---- wide covers (phone, tablet, 2-column): the controls move to the right-hand side
     so the screen stays a true 4:3, and a speaker strip under it makes the set tall enough
     to fill the cover ---- */
  @container (min-aspect-ratio: 11/10) {
    .wwp-tv__body {
      width: min(100cqw, calc(174 * var(--u)));
      /* the cabinet is as tall as the cover; the speaker strip takes up the slack */
      height: 100cqh;
    }

    set {
      height: 100%;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      gap: calc(3 * var(--u));
      align-items: stretch;
    }

    crt {
      grid-area: 1 / 1;
      align-self: center;
      width: calc(125.33 * var(--u));
      height: calc(94 * var(--u));
    }

    panel {
      grid-area: 1 / 2;
      flex-direction: column;
      margin: 0;
      min-width: 0;
    }

    panel grill {
      display: none;
    }

    .wwp-tv__strip {
      display: flex;
      grid-area: 2 / 1 / 3 / 3;
      flex: none;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      align-self: stretch;
      height: auto;
      min-height: calc(14 * var(--u));
      margin: 0 calc(0.5 * var(--u));

      /* the pen's own grille, unchanged (dark box, slats, round conic speaker); only moved here
         and the speaker is kept a circle in the shorter, wider box */
      speaker {
        height: 84%;
        width: auto;
        max-width: none;
        max-height: none;
        aspect-ratio: 1;
      }
    }

    knobs {
      flex: 1 1 0;
      height: auto;
      min-height: 0;
      flex-direction: column;
      justify-content: space-between;
      align-items: stretch;

      div:nth-of-type(1) {
        align-self: stretch;
        justify-content: space-around;
      }

      div:nth-of-type(2),
      div:nth-of-type(3) {
        align-self: center;
      }
    }
  }

  /* ---- what plays on the glass (ours, not the pen's) ---- */
  .wwp-tv__media {
    background: #000;
    opacity: 0;
    transition: opacity 0.25s ease;

    video,
    img,
    iframe {
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      object-fit: cover;
      display: none;
      background: #000;
      pointer-events: none;
    }

    &.is-video video,
    &.is-image img,
    &.is-html iframe {
      display: block;
    }
  }

  &[data-view="media"] .wwp-tv__media {
    opacity: 1;
  }

  .wwp-tv__static {
    width: 100%;
    height: 100%;
    opacity: 0;
    image-rendering: pixelated;
    pointer-events: none;
    transition: opacity 0.12s ease;
  }

  &.is-tuning .wwp-tv__static {
    opacity: 1;
  }

  .wwp-tv__osd {
    left: 6%;
    top: 7%;
    margin: 0;
    z-index: 5;
    max-width: 88%;
    font: 700 calc(4.6 * var(--u))/1.15 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
    color: #7dff9b;
    text-transform: uppercase;
    text-shadow: 0 0 calc(1 * var(--u)) rgba(125, 255, 155, 0.75), calc(0.2 * var(--u)) 0 0 rgba(255, 0, 90, 0.35);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    white-space: pre-line;
  }

  .wwp-tv__osd.is-up {
    opacity: 1;
  }

  &:not(.is-on) .wwp-tv__osd {
    opacity: 0;
  }
}

@keyframes wwptv-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wwptv-on-flash {
  0%,
  50% {
    filter: brightness(1.5) contrast(1.2);
  }
}

@keyframes wwptv-channel {
  50% {
    background: var(--body);
    mix-blend-mode: unset;
  }

  70% {
    background: linear-gradient(magenta, cyan);
    filter: blur(calc(1 * var(--u)));
    mix-blend-mode: screen;
  }
}

@keyframes wwptv-tuning {
  0% {
    transform: translate3d(calc(-4 * var(--u)), calc(-10 * var(--u)), 0);
  }

  100% {
    transform: translate3d(calc(4 * var(--u)), calc(10 * var(--u)), 0);
  }
}

@keyframes wwptv-scanning {
  33% {
    transform: translate3d(calc(-0.2 * var(--u)), 0, 0);
  }

  66% {
    transform: translate3d(calc(0.3 * var(--u)), 0, 0);
    filter: brightness(0.9);
  }

  98%,
  100% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }
}

@keyframes wwptv-scanning-lg {
  33% {
    transform: translate3d(calc(-2 * var(--u)), 0, 0);
  }

  66% {
    transform: translate3d(calc(2 * var(--u)), 0, 0);
  }
}

@keyframes wwptv-wobble {
  100% {
    transform: translate3d(0, calc(-3.5 * var(--u)), calc(10 * var(--u))) rotateX(-30deg);
  }
}

@keyframes wwptv-rotate {
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes wwptv-light {
  10% {
    filter: hue-rotate(0deg) brightness(2)
      drop-shadow(calc(-1 * var(--u)) calc(-1 * var(--u)) calc(0.2 * var(--u)) hsla(0, 100%, 50%, 0.2))
      drop-shadow(calc(1 * var(--u)) calc(1 * var(--u)) calc(0.2 * var(--u)) hsla(120, 100%, 50%, 0.2));
  }

  20% {
    filter: hue-rotate(-180deg) brightness(1)
      drop-shadow(calc(-1 * var(--u)) calc(-1 * var(--u)) calc(0.2 * var(--u)) hsla(0, 100%, 50%, 0.2))
      drop-shadow(calc(1 * var(--u)) calc(1 * var(--u)) calc(0.2 * var(--u)) hsla(120, 100%, 50%, 0.2));
  }

  60% {
    filter: hue-rotate(-360deg) brightness(0.2)
      drop-shadow(calc(-1 * var(--u)) calc(-1 * var(--u)) calc(0.2 * var(--u)) hsla(0, 100%, 50%, 0.2))
      drop-shadow(calc(1 * var(--u)) calc(1 * var(--u)) calc(0.2 * var(--u)) hsla(120, 100%, 50%, 0.2));
  }
}

@keyframes wwptv-on {
  30% {
    transform: scaleY(0.01) scaleX(0.02);
  }

  40% {
    transform: scaleY(0.01) scaleX(1);
  }

  49% {
    transform: scaleY(0.7) scaleX(0.7);
  }

  48%,
  50%,
  69%,
  71%,
  79%,
  81%,
  100% {
    transform: scaleY(1) scaleX(1);
  }

  70%,
  80% {
    transform: scaleY(-1) scaleX(1);
  }
}

@keyframes wwptv-off {
  30% {
    transform: scaleY(0.01) scaleX(0.02);
  }

  40% {
    transform: scaleY(0.01) scaleX(1);
  }

  49% {
    transform: scaleY(0.7) scaleX(0.7);
  }

  48%,
  50%,
  69%,
  71%,
  79%,
  81%,
  100% {
    transform: scaleY(1) scaleX(1);
  }

  70%,
  80% {
    transform: scaleY(-1) scaleX(1);
  }
}

@keyframes wwptv-change {
  100% {
    transform: translate3d(0, calc(-10 * var(--u)), 0) skewX(-80deg);
  }
}

@keyframes wwptv-pixels3 {
  100% {
    transform: translate3d(10px, -20px, 0);
  }
}

@keyframes wwptv-pixels2 {
  100% {
    transform: translate3d(0, calc(-5 * var(--u)), 0);
  }
}

/* channel dial: room for the numbers printed round it */
.wwp-tv .tuning {
	padding: calc(4.5 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
	.wwp-tv * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}