/* ============================================================
   colin nichols — style.css

   everything you'd want to change is in this first block.
   ============================================================ */

:root {

  /* ---- PLANETS ----------------------------------------------
     the files live in the  img  folder. swap a filename here and
     that planet changes. set one to  none  and it disappears.

     each planet has a WIDTH below; the height looks after itself.
     ------------------------------------------------------------ */
  --planet-1: url("img/saturn.png");    /* upper left  */
  --planet-2: url("img/mars.png");      /* lower right */
  --planet-3: url("img/neptune.png");   /* upper right */
  --planet-4: url("img/earth.png");     /* lower left  */
  --planet-5: url("img/venus.png");     /* bottom right, small */

  --planet-1-size: 230px;
  --planet-2-size: 132px;
  --planet-3-size: 98px;
  --planet-4-size: 150px;
  --planet-5-size: 78px;


  /* ---- FONTS -------------------------------------------------
     both are loaded by the <link> line in index.html.
       --font-machine  the scratchy one: your name, the printed
                       labels on the machine, the buttons
       --font-words    the clean typewriter: everything you read
     ------------------------------------------------------------ */
  --font-machine: "Special Elite", "Courier New", Courier, monospace;
  --font-words:   "Courier Prime", "Courier New", Courier, monospace;


  /* ---- COLORS ------------------------------------------------ */
  --void:       #000000;   /* space */
  --case:       #313134;   /* the charcoal of the machine */
  --case-dark:  #1e1e20;   /* the wells the keys sit in */
  --case-light: #4e4e52;   /* lit edges */
  --key:        #3b3b3f;   /* key face */
  --key-down:   #202023;   /* pressed key face */
  --panel-bg:   #2c2c30;   /* the reading area */
  --screen:     #0e0e10;   /* the dark window */
  --orange:     #ff8c33;   /* the lamp. the only bright thing. */
  --ink:        #ebe8e1;   /* main text */
  --ink-dim:    #b6b3ac;   /* secondary text */
  --label:      #e4dcc6;   /* the paper label on the tape */

  /* ---- SIZES ------------------------------------------------- */
  --machine-width: 640px;

  /* how hand-drawn the boxes look. bigger = wobblier. */
  --wobble:   14px 5px 12px 7px / 7px 12px 5px 14px;
  --wobble-2: 6px 13px 5px 15px / 14px 6px 12px 5px;
}


/* ============================================================
   PAGE
   ============================================================ */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* the page is black all the way down, including the bit a phone
     shows when you overscroll past the end */
  background: var(--void);
  color-scheme: dark;
  /* no rubber-band bounce past the end of the page on a phone */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  padding: 0 16px 28vh;
  overflow-x: hidden;
  /* transparent on purpose: the black lives on <html> so a phone's
     overscroll area is black too, and the starfield sits behind
     this element. give body its own background and it paints over
     the stars. */
  background: transparent;
  color: var(--ink);
  font-family: var(--font-words);
  font-size: 16px;
  line-height: 1.7;
  text-transform: lowercase;   /* everything, always */
}


/* ---- the sky ---- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--void);
}

.stars { position: absolute; inset: 0; background-repeat: no-repeat; }

/* four layers, ~90 stars, each layer twinkling on its own clock */
.stars--a {
  background-image:
    radial-gradient(2.4px 2.4px at 67.5% 78.2%, #ffffff, transparent),
    radial-gradient(2.4px 2.4px at 51.1% 39.5%, #fdfbff, transparent),
    radial-gradient(1.7px 1.7px at 58.4% 59.4%, #fdfbff, transparent),
    radial-gradient(1.7px 1.7px at 41.3% 96.3%, #fdfbff, transparent),
    radial-gradient(2.4px 2.4px at 89.3% 2.8%, #ffffff, transparent),
    radial-gradient(1.7px 1.7px at 87.5% 91.6%, #fdfbff, transparent),
    radial-gradient(1.7px 1.7px at 39.0% 73.1%, #fdfbff, transparent),
    radial-gradient(2.0px 2.0px at 2.2% 57.8%, #fdfbff, transparent),
    radial-gradient(2.4px 2.4px at 44.1% 98.4%, #ffffff, transparent),
    radial-gradient(1.7px 1.7px at 78.9% 94.9%, #ffffff, transparent),
    radial-gradient(1.7px 1.7px at 79.8% 39.1%, #ffffff, transparent),
    radial-gradient(2.4px 2.4px at 62.5% 10.9%, #fdfbff, transparent),
    radial-gradient(2.0px 2.0px at 1.2% 45.5%, #ffffff, transparent),
    radial-gradient(2.0px 2.0px at 52.0% 82.1%, #fdfbff, transparent),
    radial-gradient(1.7px 1.7px at 42.9% 54.2%, #ffffff, transparent),
    radial-gradient(2.0px 2.0px at 24.7% 3.1%, #fdfbff, transparent),
    radial-gradient(2.0px 2.0px at 11.8% 70.3%, #ffffff, transparent),
    radial-gradient(2.0px 2.0px at 47.6% 45.0%, #ffffff, transparent),
    radial-gradient(2.4px 2.4px at 46.1% 30.3%, #ffffff, transparent),
    radial-gradient(2.0px 2.0px at 8.2% 31.3%, #ffffff, transparent),
    radial-gradient(2.0px 2.0px at 46.3% 46.9%, #ffffff, transparent),
    radial-gradient(1.7px 1.7px at 17.8% 64.7%, #ffffff, transparent),
    radial-gradient(2.0px 2.0px at 13.0% 43.1%, #ffffff, transparent),
    radial-gradient(2.4px 2.4px at 20.6% 47.0%, #ffffff, transparent);
  animation: twinkle-a 3.6s ease-in-out infinite alternate;
}
.stars--b {
  background-image:
    radial-gradient(1.3px 1.3px at 43.0% 94.2%, #eef2fd, transparent),
    radial-gradient(1.6px 1.6px at 87.4% 62.0%, #eef2fd, transparent),
    radial-gradient(1.6px 1.6px at 56.9% 58.8%, #eef2fd, transparent),
    radial-gradient(1.3px 1.3px at 26.7% 31.9%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 65.2% 21.3%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 52.3% 74.9%, #d7dff2, transparent),
    radial-gradient(1.9px 1.9px at 80.1% 80.0%, #d7dff2, transparent),
    radial-gradient(1.6px 1.6px at 64.0% 67.9%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 82.3% 93.1%, #eef2fd, transparent),
    radial-gradient(1.3px 1.3px at 4.4% 85.0%, #eef2fd, transparent),
    radial-gradient(1.6px 1.6px at 26.3% 46.7%, #d7dff2, transparent),
    radial-gradient(1.6px 1.6px at 33.1% 19.0%, #eef2fd, transparent),
    radial-gradient(1.6px 1.6px at 63.5% 65.8%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 61.6% 86.8%, #d7dff2, transparent),
    radial-gradient(1.9px 1.9px at 43.8% 45.8%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 4.9% 26.4%, #eef2fd, transparent),
    radial-gradient(1.3px 1.3px at 39.3% 96.8%, #d7dff2, transparent),
    radial-gradient(1.9px 1.9px at 66.2% 55.4%, #eef2fd, transparent),
    radial-gradient(1.3px 1.3px at 87.0% 58.7%, #eef2fd, transparent),
    radial-gradient(1.9px 1.9px at 61.2% 24.8%, #eef2fd, transparent),
    radial-gradient(1.6px 1.6px at 27.9% 15.2%, #eef2fd, transparent),
    radial-gradient(1.3px 1.3px at 58.9% 44.5%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 31.3% 40.7%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 73.6% 10.7%, #d7dff2, transparent);
  animation: twinkle-b 5.9s ease-in-out infinite alternate;
}
.stars--c {
  background-image:
    radial-gradient(1.7px 1.7px at 14.1% 46.1%, #ffffff, transparent),
    radial-gradient(1.1px 1.1px at 55.5% 88.7%, #e6ecfb, transparent),
    radial-gradient(1.1px 1.1px at 12.7% 19.3%, #e6ecfb, transparent),
    radial-gradient(1.4px 1.4px at 13.0% 52.0%, #e6ecfb, transparent),
    radial-gradient(1.7px 1.7px at 94.1% 45.4%, #e6ecfb, transparent),
    radial-gradient(1.4px 1.4px at 3.1% 22.8%, #ffffff, transparent),
    radial-gradient(1.7px 1.7px at 10.7% 40.1%, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 68.6% 23.3%, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 71.3% 47.8%, #e6ecfb, transparent),
    radial-gradient(1.7px 1.7px at 43.9% 6.9%, #ffffff, transparent),
    radial-gradient(1.1px 1.1px at 73.6% 83.8%, #e6ecfb, transparent),
    radial-gradient(1.7px 1.7px at 25.1% 16.7%, #e6ecfb, transparent),
    radial-gradient(1.1px 1.1px at 26.5% 46.5%, #ffffff, transparent),
    radial-gradient(1.1px 1.1px at 9.9% 42.8%, #e6ecfb, transparent),
    radial-gradient(1.7px 1.7px at 60.9% 99.0%, #e6ecfb, transparent),
    radial-gradient(1.1px 1.1px at 25.2% 18.3%, #e6ecfb, transparent),
    radial-gradient(1.7px 1.7px at 3.1% 7.7%, #ffffff, transparent),
    radial-gradient(1.1px 1.1px at 53.4% 6.7%, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 81.6% 68.6%, #e6ecfb, transparent),
    radial-gradient(1.1px 1.1px at 97.9% 28.3%, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 96.2% 6.0%, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 12.0% 33.8%, #e6ecfb, transparent);
  animation: twinkle-c 8.3s ease-in-out infinite alternate;
}
.stars--d {
  background-image:
    radial-gradient(1.0px 1.0px at 71.4% 46.7%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 59.5% 27.4%, #c3cbdd, transparent),
    radial-gradient(1.0px 1.0px at 2.3% 53.8%, #d7dff2, transparent),
    radial-gradient(1.0px 1.0px at 98.8% 78.5%, #fff, transparent),
    radial-gradient(1.0px 1.0px at 59.8% 18.0%, #fff, transparent),
    radial-gradient(1.0px 1.0px at 38.4% 71.4%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 25.4% 16.8%, #fff, transparent),
    radial-gradient(1.0px 1.0px at 90.1% 41.6%, #fff, transparent),
    radial-gradient(1.0px 1.0px at 52.7% 34.9%, #c3cbdd, transparent),
    radial-gradient(1.0px 1.0px at 52.1% 63.0%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 82.8% 4.6%, #c3cbdd, transparent),
    radial-gradient(1.0px 1.0px at 83.8% 42.6%, #fff, transparent),
    radial-gradient(1.0px 1.0px at 95.9% 89.3%, #fff, transparent),
    radial-gradient(1.0px 1.0px at 62.9% 50.0%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 61.9% 67.2%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 88.3% 67.0%, #c3cbdd, transparent),
    radial-gradient(1.3px 1.3px at 90.5% 38.9%, #d7dff2, transparent),
    radial-gradient(1.3px 1.3px at 48.3% 84.1%, #d7dff2, transparent),
    radial-gradient(1.0px 1.0px at 5.2% 75.3%, #d7dff2, transparent),
    radial-gradient(1.0px 1.0px at 89.0% 10.0%, #c3cbdd, transparent);
  animation: twinkle-d 11.2s ease-in-out infinite alternate;
}

.planet {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.planet--1 {                                   /* saturn, wide */
  background-image: var(--planet-1);
  width: var(--planet-1-size); aspect-ratio: 440 / 214;
  top: 13%; left: 9%; opacity: .92;
}
.planet--2 {                                   /* mars */
  background-image: var(--planet-2);
  width: var(--planet-2-size); aspect-ratio: 1;
  top: 60%; right: 2%; opacity: .88;
}
.planet--3 {                                   /* neptune */
  background-image: var(--planet-3);
  width: var(--planet-3-size); aspect-ratio: 1;
  top: 20%; right: 4%; opacity: .85;
}
.planet--4 {                                   /* earth */
  background-image: var(--planet-4);
  width: var(--planet-4-size); aspect-ratio: 1;
  bottom: 12%; left: 6%; opacity: .9;
}
.planet--5 {                                   /* venus */
  background-image: var(--planet-5);
  width: var(--planet-5-size); aspect-ratio: 1;
  bottom: 8%; right: 12%; opacity: .8;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--orange);
  color: #000;
  padding: 8px 14px;
  font-family: var(--font-machine);
}
.skip:focus { left: 12px; top: 12px; z-index: 99; }


/* ============================================================
   HEADER   —  don't change this, he likes it
   ============================================================ */

.head {
  position: relative;
  max-width: var(--machine-width);
  margin: 0 auto;
  padding: 62px 0 30px;
  text-align: center;
}

.nameplate {
  margin: 0;
  font-family: var(--font-machine);
  font-size: 34px;
  font-weight: normal;
  letter-spacing: .1em;
  color: var(--ink);
  text-shadow: 1px 1px 0 #000;
}

.subtitle {
  margin: 6px 0 0;
  font-family: var(--font-machine);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--ink-dim);
}


/* ============================================================
   THE MACHINE
   ============================================================ */

.deck {
  position: relative;
  max-width: var(--machine-width);
  margin: 0 auto;
  padding: 26px 22px 22px;
  border: 1px solid #131315;
  border-radius: 7px;
  /* brushed metal: fine vertical grain over a top-lit panel */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.026) 0 1px,
      rgba(0,0,0,.030) 1px 2px,
      rgba(255,255,255,.014) 2px 3px,
      rgba(0,0,0,.018) 3px 4px),
    linear-gradient(180deg, #3c3c40 0%, #343437 14%, #2f2f32 62%, #272729 100%);
  background-color: var(--case);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.55),
    inset 2px 0 0 rgba(255,255,255,.04),
    inset -2px 0 0 rgba(0,0,0,.3),
    0 14px 36px rgba(0,0,0,.85),
    0 2px 0 #0b0b0c;
}

/* photocopy grain, drawn by the browser, no image file */
.deck::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---- screws ---- */

.screw {
  position: absolute;
  width: 13px; height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #75757a 0%, #4a4a4e 45%, #2a2a2d 78%, #1c1c1e 100%);
  box-shadow:
    inset 0 0 0 1px #141416,
    0 1px 0 rgba(255,255,255,.09);
}
.screw::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 1px;
  background: linear-gradient(180deg, transparent 40%, #131315 40% 60%, transparent 60%);
  transform: rotate(34deg);
}
.screw--tl { top: 8px;  left: 8px;  }
.screw--tr { top: 8px;  right: 8px; }
.screw--bl { bottom: 8px; left: 8px;  }
.screw--br { bottom: 8px; right: 8px; }


/* ============================================================
   KEYS  —  flush banks, like the row on a real deck
   ============================================================ */

.bank {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 0 0 5px;                  /* the well the keys sink into */
  border: 1px solid #101012;
  border-radius: 3px;
  background: var(--case-dark);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85);
}

.nav.bank { margin-bottom: 20px; }

.key {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 4px;
  min-height: 46px;
  border: 1px solid #17171a;
  border-right-width: 0;
  border-radius: 0;
  background-color: var(--key);
  background-image:
    linear-gradient(180deg, #48484c 0%, #3d3d41 52%, #333336 100%);
  color: var(--ink);
  font-family: var(--font-machine);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: .05em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -3px 0 rgba(0,0,0,.45);
}

.bank .key:last-child { border-right-width: 1px; }

/* no hover states anywhere. this is on purpose. */

.key:focus-visible { outline: 3px dashed var(--orange); outline-offset: -4px; }

/* PRESSED: sits lower, goes darker. */
.key[aria-pressed="true"],
.key:active {
  transform: translateY(5px);
  background-color: var(--key-down);
  background-image: linear-gradient(180deg, #222225 0%, #292a2c 100%);
  color: #c9c6bf;
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.85),
    inset 0 -1px 0 rgba(255,255,255,.04);
}

.key[disabled] { opacity: .4; cursor: default; }


/* the links page: the same keys, stacked */
.bank-v {
  list-style: none;
  margin: 0;
  padding: 0 0 5px;
  border: 1px solid #101012;
  border-radius: 3px;
  background: var(--case-dark);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85);
}
.bank-v li { margin: 0; }
.bank-v .key { border-right-width: 1px; border-bottom-width: 0; font-size: 15px; }
.bank-v li:last-child .key { border-bottom-width: 1px; }


/* ============================================================
   WINDOW + THE TAPE
   ============================================================ */

.window {
  position: relative;
  z-index: 1;
  padding: 16px 14px 12px;
  border: 1px solid #0a0a0c;
  border-radius: 4px;
  background: var(--screen);
  background-image: linear-gradient(180deg, #131316 0%, #0c0c0e 100%);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.95),
    0 1px 0 rgba(255,255,255,.07);
}

/* the cassette itself */
.cassette {
  position: relative;
  width: 430px;
  max-width: 100%;
  aspect-ratio: 8 / 5;
  margin: 0 auto 14px;
  border-radius: 5px;
  border: 1px solid #0a0a0b;
  background-image: linear-gradient(178deg, #35353a 0%, #2a2a2e 48%, #202024 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 3px rgba(0,0,0,.6),
    0 3px 8px rgba(0,0,0,.75);
}

/* the paper label — the track title gets written here */
.cass__label {
  position: absolute;
  left: 7%; right: 7%; top: 9%;
  height: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, #ece5d2 0%, #ddd4bc 55%, #cfc6ae 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 1px rgba(0,0,0,.45);
  font-family: var(--font-machine);
  font-size: 15px;
  line-height: 1.2;
  color: #2b2620;
  text-align: center;
  overflow: hidden;
}
/* the printed stripe across the top of the label */
.cass__label::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 22%;
  background-image: linear-gradient(180deg, #d9873c 0%, #c8762f 100%);
  border-bottom: 1px solid rgba(0,0,0,.28);
  opacity: .92;
}
.cass__label span {
  position: relative;
  margin-top: 9%;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the smoked window you see the hubs through */
.cass__window {
  position: absolute;
  left: 13%; right: 13%; bottom: 11%;
  height: 33%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7%;
  border-radius: 3px;
  background: #08080a;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.9),
    0 1px 0 rgba(255,255,255,.07);
}

/* toothed hubs with tape wound around them */
.cass__hub {
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 7px solid #151518;             /* the tape wound around it */
  background-image:
    radial-gradient(circle, #0a0a0c 0 13%, transparent 13.5%),
    radial-gradient(circle, transparent 0 40%, #191a1d 40.5%),
    repeating-conic-gradient(#6a6a72 0deg 13deg, #26262b 13deg 26deg);
  box-shadow: inset 0 0 0 2px #0c0c0e, 0 0 0 1px rgba(255,255,255,.05);
}

.cass__screw {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5c5c61, #232326);
  box-shadow: inset 0 0 0 1px #0d0d0f;
}
.cass__screw--l { bottom: 5%; left: 5%; }
.cass__screw--r { bottom: 5%; right: 5%; }


/* ---- readout under the tape ---- */

.readout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid #1c1c1f;
}

.lamp {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #33251a;
  box-shadow: inset 0 0 0 1px #000, inset 0 1px 1px rgba(255,255,255,.12);
}
.lamp.on {
  background: var(--orange);
  box-shadow: 0 0 9px rgba(255,140,51,.95), inset 0 0 0 1px #7a3a06;
}

.status {
  font-family: var(--font-machine);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--orange);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ============================================================
   TRANSPORT
   ============================================================ */

.transport { position: relative; z-index: 1; padding: 20px 0 0; }

.seekrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

.time {
  font-family: var(--font-words);
  font-size: 13px;
  color: var(--ink-dim);
  min-width: 36px;
  text-align: center;
}

.seek {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.seek:focus-visible { outline: 3px dashed var(--orange); outline-offset: 2px; }

.seek::-webkit-slider-runnable-track {
  height: 8px;
  background: #161618;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.07);
}
.seek::-moz-range-track {
  height: 8px; background: #161618; border-radius: 4px;
}
.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 20px;
  margin-top: -6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffa257, var(--orange));
  border: 1px solid #7a3a06;
}
.seek::-moz-range-thumb {
  width: 14px; height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffa257, var(--orange));
  border: 1px solid #7a3a06;
}

.scribble {
  margin: 7px 0 0;
  font-family: var(--font-machine);
  font-size: 13px;
  color: #b9b2a2;
  transform: rotate(-1.4deg);
}
.scribble--list { margin-top: 12px; transform: rotate(1.2deg); }


/* ---- ticker ---- */

.ticker {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #0a0a0c;
  border-radius: 3px;
  background: #101012;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
}

.ticker__track { display: flex; width: max-content; animation: slide 34s linear infinite; }
.ticker:focus-within .ticker__track { animation-play-state: paused; }

.ticker__msg {
  padding: 7px 0;
  font-family: var(--font-machine);
  font-size: 13px;
  letter-spacing: .1em;
  color: #a0a0a6;
  white-space: nowrap;
}

@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }


/* ---- vents + model badge ---- */

.badgerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 0 2px;
}

.vents {
  flex: none;
  width: 120px; height: 14px;
  border-radius: 3px;
  background-image: repeating-linear-gradient(90deg,
    #16161a 0 2px,
    rgba(255,255,255,.045) 2px 3px,
    transparent 3px 9px);
  opacity: .85;
}

.model {
  font-family: var(--font-machine);
  font-size: 12px;
  letter-spacing: .12em;
  color: #8e8e94;
}


/* motion off for anyone who asked their device for less of it */
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker__track { animation: none; width: auto; }
  .ticker__msg[aria-hidden="true"] { display: none; }
  .stars { animation: none !important; opacity: .8 !important; }
}


/* ============================================================
   THE PANEL
   ============================================================ */

.panel {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  padding: 26px 22px 34px;
  min-height: 300px;
  border: 1px solid #17171a;
  border-radius: var(--wobble-2);
  background-color: var(--panel-bg);
  background-image: linear-gradient(181deg, #313135 0%, #292a2d 100%);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06);
}
.panel:focus { outline: none; }
.panel:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }

.pagetitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  font-family: var(--font-machine);
  font-size: 22px;
  font-weight: normal;
  letter-spacing: .05em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #62625f;
  text-underline-offset: 6px;
}

.subhead {
  margin: 30px 0 8px;
  font-family: var(--font-machine);
  font-size: 18px;
  font-weight: normal;
  color: var(--orange);
}

.lede { margin: 14px 0 22px; color: var(--ink-dim); font-size: 15px; }

.page p { margin: 0 0 16px; }

.fineprint { margin-top: 24px; font-size: 14px; color: var(--ink-dim); }


/* ---- track list ---- */

.tracklist { list-style: none; margin: 0; padding: 0; }

.track { border-top: 1px dashed #46464b; }
.track:last-child { border-bottom: 1px dashed #46464b; }

.track__btn {
  display: block;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  text-transform: lowercase;
  cursor: pointer;
}
.track__btn:focus-visible { outline: 3px dashed var(--orange); outline-offset: -3px; }

.track__top { display: flex; align-items: baseline; gap: 10px; }

.track__num { flex: none; width: 30px; font-size: 14px; color: var(--ink-dim); }
.track__title { flex: 1; font-size: 16px; }
.track__dur { flex: none; font-size: 14px; color: var(--ink-dim); }
.track__inst { margin: 2px 0 0 40px; font-size: 14px; color: var(--ink-dim); }

.track.is-current .track__btn { background: rgba(255,140,51,.11); }
.track.is-current .track__num,
.track.is-current .track__title { color: var(--orange); }

.noscript { padding: 14px 0; color: var(--ink-dim); font-size: 15px; }


/* ---- dates ---- */

/* the day-of-week headings inside "recurring" */
.dayhead {
  margin: 26px 0 2px;
  font-family: var(--font-machine);
  font-size: 15px;
  font-weight: normal;
  letter-spacing: .18em;
  color: var(--ink-dim);
}
.dayhead + .dates .date:first-child { border-top: 1px dashed #46464b; }

.fineprint--tight { margin-top: 10px; margin-bottom: 4px; }


.dates { list-style: none; margin: 0; padding: 0; }
.date { display: block; padding: 13px 0; border-top: 1px dashed #46464b; }
.date:last-child { border-bottom: 1px dashed #46464b; }

.date__when { display: block; font-family: var(--font-machine); font-size: 14px; color: var(--orange); }
.date__what { display: block; margin-top: 3px; font-family: var(--font-machine); font-size: 17px; }
.date__where { display: block; font-size: 15px; }
.date__note { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-dim); }


/* ---- notes ---- */

.note { padding: 26px 0; border-top: 1px dashed #46464b; }
.note:last-child { border-bottom: 1px dashed #46464b; }

.note__title { margin: 0; font-family: var(--font-machine); font-size: 19px; font-weight: normal; }
.note__date {
  margin: 2px 0 12px !important;
  font-family: var(--font-machine);
  font-size: 14px;
  color: var(--orange);
}


/* ---- the little gifs beside each section title ---- */

.titlegif {
  flex: none;
  height: 46px;
  width: auto;
  image-rendering: auto;
}
/* the underline belongs to the word, not the gif */
.pagetitle > span {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #62625f;
  text-underline-offset: 6px;
}


/* ---- the transport symbols ---- */

.sym {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  fill: currentColor;
}
#btn-play .sym  { width: 20px; height: 20px; }
#btn-stop .sym  { width: 19px; height: 19px; }


/* ---- link icons ---- */

.key--link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.ico {
  flex: none;
  height: 21px;
  width: auto;
  max-width: 26px;
}


/* ---- the "wip" tag on an unfinished link ---- */

.wip {
  flex: none;
  margin-left: 2px;
  padding: 2px 6px;
  border: 1px solid #5a5a5f;
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: .12em;
  color: #a6a39c;
  line-height: 1.4;
}


/* ---- a photo in the reading panel ---- */

.photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 20px;
  border: 1px solid #17171a;
  border-radius: 3px;
  background: #111;
  box-shadow: 0 3px 12px rgba(0,0,0,.6);
}


/* ---- shuffle: a small key, off to the side ---- */

.extras {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.minikey {
  padding: 5px 13px;
  border: 1px solid #191919;
  border-radius: 3px;
  background-color: #333336;
  background-image: linear-gradient(180deg, #3c3c40 0%, #2f2f32 100%);
  color: #b6b3ac;
  font-family: var(--font-machine);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -2px 0 rgba(0,0,0,.4);
}
.minikey:active,
.minikey[aria-pressed="true"] {
  transform: translateY(2px);
  background-image: linear-gradient(180deg, #232326 0%, #2a2a2d 100%);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.8);
}
/* latched down: the lamp colour says it's on */
.minikey[aria-pressed="true"] {
  border-color: #6b3d14;
  color: var(--orange);
}
.minikey:focus-visible { outline: 3px dashed var(--orange); outline-offset: 2px; }


/* ---- "click one" on a mouse, "tap one" on a touchscreen ---- */

.say-tap { display: none; }
@media (hover: none) and (pointer: coarse) {
  .say-click { display: none; }
  .say-tap   { display: inline; }
}


/* ============================================================
   FOOTER
   ============================================================ */

.foot {
  max-width: var(--machine-width);
  margin: 0 auto;
  padding: 44px 0 0;
  text-align: center;
}
.foot .fineprint { margin-top: 0; }


/* ============================================================
   SMALL SCREENS
   ============================================================ */

@media (max-width: 620px) {
  body { padding-left: 11px; padding-right: 11px; font-size: 15px; }
  .head { padding-top: 40px; }
  .nameplate { font-size: 25px; }
  .deck { padding: 24px 13px 18px; }
  .panel { padding: 22px 15px 30px; }
  .track__inst { margin-left: 0; }

  /* the bank stays one flush row — that's the whole idea */
  .key { font-size: 12px; padding: 12px 1px; letter-spacing: 0; }
  .bank-v .key { font-size: 15px; padding: 12px 4px; }

  .cass__label { font-size: 13px; }

  /* let the status line wrap instead of truncating */
  .readout { align-items: flex-start; }
  .status { white-space: normal; overflow: visible; font-size: 13px; }
  .vents { width: 84px; }
  .model { font-size: 10px; letter-spacing: .08em; }

  /* two planets on a phone, both clear of the text */
  .planet--2, .planet--3, .planet--5 { display: none; }
  .planet--1 { top: 4px;    left: -30px; width: 140px; opacity: .65; }
  .planet--4 { bottom: 3%;  left: -26px; width: 96px;  opacity: .65; }
}