/* Skiff site. Two halves: words on white in one mono, and a collage on the backdrop grey the clips were
   shot on, so their margins vanish into it. Each section is a row, its pictures level with its words.

   ┌──────────── row ────────────┬──────────────────────────────┐
   │ .txt   mono, lists, tags    │ .pics  stacked .pic cards     │
   │                             │        --w --x --y --r --z    │
   └─────────────────────────────┴──────────────────────────────┘ */

@font-face {
  font-family: "DWS Mono";
  src: url("fonts/dwsmono-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DWS Mono";
  src: url("fonts/dwsmono-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --side: #f3f2ef;
  --ink: #161616;
  --mute: #8f8c86;
  --rule: #c9c6bf;
  --hair: #e8e6e1;
  --shadow: 0 1px 2px rgb(20 20 20 / 0.06), 0 22px 40px -22px rgb(20 20 20 / 0.35);

  /* The icon's modules. */
  --red: #e5313b;
  --yellow: #f4b332;
  --orange: #f06a2a;
  --teal: #22b8b0;
  --blue: #2f5be6;

  --mono: "DWS Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(20px, 2.6vw, 36px);
  /* Gaps shrink on short screens too, so a sideways phone isn't mostly margin. */
  --gap: clamp(40px, min(8vw, 11vh), 112px);
  /* A collage never grows past about one screen tall. */
  --collage: 82vh;

  color-scheme: light;
}

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  margin: 0;
  background: linear-gradient(90deg, var(--paper) 50%, var(--side) 50%);
  color: var(--ink);
  /* Type grows with the window: 15px on a sideways phone, ~20px on a laptop, 26px on a big monitor,
     so the words keep their share of the half instead of shrinking into a corner. */
  font: 400 clamp(15px, 0.9vw + 6.5px, 26px)/1.7 var(--mono);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--rule);
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
pre {
  margin: 0 0 1.4em;
}

h1,
h2,
h3 {
  font: inherit;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
}

.skip:focus {
  top: 12px;
}

/* ── Rows: words left, pictures right ────────────────────── */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.txt {
  padding: var(--gap) var(--pad) 0;
}

.txt > * {
  max-width: 54ch;
}

.txt > .filter,
.txt > .topbar {
  max-width: 66ch;
}

.pics {
  padding: var(--gap) var(--pad) 0;
}

.foot .txt {
  padding-bottom: var(--gap);
}

/* ── Top: name and nav, the first thing in the left column ─ */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  max-width: none !important;
  margin: calc(var(--pad) - var(--gap)) 0 clamp(40px, min(9vw, 10vh), 120px);
}

.topbar .name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.topbar .name img {
  width: 1.45em;
  height: 1.45em;
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 22px;
  color: var(--mute);
}

.topbar nav a {
  text-decoration: none;
}

.topbar nav a:hover,
.topbar nav a[aria-current] {
  color: var(--ink);
}

/* ── Text pieces ─────────────────────────────────────────── */

.lede {
  font-size: 1.12em;
  line-height: 1.6;
}

h2 .n,
.mute {
  color: var(--mute);
}

h2 .n {
  margin-right: 1ch;
}

.txt ul {
  padding-left: 0;
  list-style: none;
}

.txt ul li {
  position: relative;
  padding-left: 2.6ch;
}

.txt ul li::before {
  content: "•";
  position: absolute;
  left: 1ch;
}

.txt ol {
  padding-left: 3ch;
}

.txt li {
  margin-bottom: 0.2em;
}

code,
kbd {
  font: inherit;
}

kbd {
  padding: 0 0.35em;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 0.9em;
}

code {
  padding: 0 0.3em;
  background: var(--side);
  border-radius: 3px;
}

pre {
  overflow-x: auto;
  padding: 0;
  font: inherit;
  font-size: 0.92em;
  line-height: 1.55;
}

pre.box {
  padding: 16px 18px;
  background: var(--side);
  border-radius: 6px;
}

/* Inline accents: a coloured tag, a tiny picture in the line. */
.tag {
  display: inline-block;
  padding: 0 0.5em;
  border-radius: 4px;
  font-size: 0.86em;
  line-height: 1.7;
  white-space: nowrap;
}

.tag.new { background: #dfe8ff; color: var(--blue); }
.tag.gold { background: #fdf0d2; color: #9a6400; }
.tag.red { background: #fde3e2; color: #b4232b; }
.tag.teal { background: #d9f3f1; color: #0f7b75; }
.tag.grey { background: var(--side); color: var(--mute); }

.ico {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 0.15em;
  vertical-align: -0.38em;
  border-radius: 4px;
  object-fit: cover;
}

/* "Now playing" style: a square picture and three short lines. */
.card-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 0 0 1.4em;
}

.card-row img {
  width: 112px;
  height: 112px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.card-row p {
  margin: 0;
}

/* The project-list table: name, what, and a tag or a number. */
.table {
  margin: 0 0 1.6em;
}

.table a,
.table > div {
  display: grid;
  grid-template-columns: 15ch minmax(0, 1fr) auto;
  gap: 2ch;
  padding: 0.28em 0;
  text-decoration: none;
}

.table a:hover .what {
  text-decoration: underline;
  text-decoration-color: var(--rule);
}

.table .end {
  color: var(--mute);
  text-align: right;
}

/* Tabs over the table: plain radios, rows filtered by :has(). */
.tabs {
  display: flex;
  gap: 4ch;
  margin: 0 0 1.2em;
  padding: 0 0 0.6em;
  border: 0;
  border-bottom: 2px solid var(--rule);
}

.tabs legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.tabs label {
  position: relative;
  color: var(--mute);
  cursor: pointer;
}

.tabs label:hover,
.tabs label:has(:checked) {
  color: var(--ink);
}

.tabs label:has(:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

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

.filter:has([value="output"]:checked) .table > :not(.output),
.filter:has([value="mic"]:checked) .table > :not(.mic),
.filter:has([value="menu"]:checked) .table > :not(.menu) {
  display: none;
}

/* Spec list: label left, value right. */
.spec {
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr);
  gap: 0.25em 2ch;
}

.spec dt {
  color: var(--mute);
}

.spec dd {
  margin: 0;
}

/* Buttons: one black, one quiet. */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0 0 1.4em;
}

.button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgb(20 20 20 / 0.5);
}

.button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Outlined, still clickable: lifts on hover like the black one. */
.button.ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.fine {
  color: var(--mute);
  font-size: 0.86em;
}

/* Doc pages: contents list, tables, sub-heads. */
.toc {
  columns: 2;
  column-gap: 3ch;
}

.toc li {
  break-inside: avoid;
}

.toc a {
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

.txt h3 {
  margin: 1.6em 0 0.4em;
  color: var(--mute);
}

.tbl {
  overflow-x: auto;
  margin: 0 0 1.4em;
}

.tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.tbl th,
.tbl td {
  padding: 0.45em 1.5ch 0.45em 0;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
}

.tbl th {
  color: var(--mute);
  font-weight: 400;
}

.txt > .tbl {
  max-width: 66ch;
}

/* ── The collage ─────────────────────────────────────────── */

/* Every card sits in one grid cell; size, offset, tilt and depth come from classes
   (inline styles are blocked by the CSP). Offsets are % of the column, so phones scale too. */
.pics {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, min(100%, var(--collage)));
  justify-content: center;
}

.pic {
  grid-area: 1 / 1;
  width: var(--w, 80%);
  margin: var(--y, 0) 0 0 var(--x, 0);
  rotate: var(--r, 0deg);
  z-index: var(--z, 1);
  transition: rotate 0.35s ease, translate 0.35s ease;
}

.pic:hover {
  rotate: 0deg;
  translate: 0 -4px;
  z-index: 30;
}

/* Clips and photos sit in a thin white mat with a hairline edge, like a print:
   the clips' backdrop matches this column, so a bare shadow reads as a floating smudge. */
.pic > img,
.pic > video {
  width: 100%;
  padding: 5px;
  border: 1px solid rgb(20 20 20 / 0.1);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.pic > .card {
  width: 100%;
  border: 1px solid rgb(20 20 20 / 0.1);
  border-radius: 10px;
  box-shadow: var(--shadow);
  background: var(--side);
}

.pic > .viz {
  background: #16171a;
}

.pic > .room {
  background: var(--paper);
}

.pic.bare > img {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  filter: drop-shadow(0 26px 30px rgb(20 20 20 / 0.25));
}

/* Collage utilities: width, x, y (both % of the column), tilt, depth. */
.w15 { --w: 15%; }
.w16 { --w: 16%; }
.w17 { --w: 17%; }
.w18 { --w: 18%; }
.w19 { --w: 19%; }
.w20 { --w: 20%; }
.w21 { --w: 21%; }
.w22 { --w: 22%; }
.w23 { --w: 23%; }
.w24 { --w: 24%; }
.w25 { --w: 25%; }
.w26 { --w: 26%; }
.w27 { --w: 27%; }
.w28 { --w: 28%; }
.w29 { --w: 29%; }
.w30 { --w: 30%; }
.w31 { --w: 31%; }
.w32 { --w: 32%; }
.w33 { --w: 33%; }
.w34 { --w: 34%; }
.w35 { --w: 35%; }
.w36 { --w: 36%; }
.w37 { --w: 37%; }
.w38 { --w: 38%; }
.w39 { --w: 39%; }
.w40 { --w: 40%; }
.w41 { --w: 41%; }
.w42 { --w: 42%; }
.w43 { --w: 43%; }
.w44 { --w: 44%; }
.w45 { --w: 45%; }
.w46 { --w: 46%; }
.w47 { --w: 47%; }
.w48 { --w: 48%; }
.w49 { --w: 49%; }
.w50 { --w: 50%; }
.w51 { --w: 51%; }
.w52 { --w: 52%; }
.w53 { --w: 53%; }
.w54 { --w: 54%; }
.w55 { --w: 55%; }
.w56 { --w: 56%; }
.w57 { --w: 57%; }
.w58 { --w: 58%; }
.w59 { --w: 59%; }
.w60 { --w: 60%; }
.w61 { --w: 61%; }
.w62 { --w: 62%; }
.w63 { --w: 63%; }
.w64 { --w: 64%; }
.w65 { --w: 65%; }
.w66 { --w: 66%; }
.w67 { --w: 67%; }
.w68 { --w: 68%; }
.w69 { --w: 69%; }
.w70 { --w: 70%; }
.w71 { --w: 71%; }
.w72 { --w: 72%; }
.w73 { --w: 73%; }
.w74 { --w: 74%; }
.w75 { --w: 75%; }
.w76 { --w: 76%; }
.w77 { --w: 77%; }
.w78 { --w: 78%; }
.w79 { --w: 79%; }
.w80 { --w: 80%; }
.w81 { --w: 81%; }
.w82 { --w: 82%; }
.w83 { --w: 83%; }
.w84 { --w: 84%; }
.w85 { --w: 85%; }
.w86 { --w: 86%; }
.w87 { --w: 87%; }
.w88 { --w: 88%; }
.w89 { --w: 89%; }
.w90 { --w: 90%; }
.w91 { --w: 91%; }
.w92 { --w: 92%; }
.w93 { --w: 93%; }
.w94 { --w: 94%; }
.w95 { --w: 95%; }
.w96 { --w: 96%; }
.w97 { --w: 97%; }
.w98 { --w: 98%; }
.w99 { --w: 99%; }
.w100 { --w: 100%; }
.x0 { --x: 0%; }
.x1 { --x: 1%; }
.x2 { --x: 2%; }
.x3 { --x: 3%; }
.x4 { --x: 4%; }
.x5 { --x: 5%; }
.x6 { --x: 6%; }
.x7 { --x: 7%; }
.x8 { --x: 8%; }
.x9 { --x: 9%; }
.x10 { --x: 10%; }
.x11 { --x: 11%; }
.x12 { --x: 12%; }
.x13 { --x: 13%; }
.x14 { --x: 14%; }
.x15 { --x: 15%; }
.x16 { --x: 16%; }
.x17 { --x: 17%; }
.x18 { --x: 18%; }
.x19 { --x: 19%; }
.x20 { --x: 20%; }
.x21 { --x: 21%; }
.x22 { --x: 22%; }
.x23 { --x: 23%; }
.x24 { --x: 24%; }
.x25 { --x: 25%; }
.x26 { --x: 26%; }
.x27 { --x: 27%; }
.x28 { --x: 28%; }
.x29 { --x: 29%; }
.x30 { --x: 30%; }
.x31 { --x: 31%; }
.x32 { --x: 32%; }
.x33 { --x: 33%; }
.x34 { --x: 34%; }
.x35 { --x: 35%; }
.x36 { --x: 36%; }
.x37 { --x: 37%; }
.x38 { --x: 38%; }
.x39 { --x: 39%; }
.x40 { --x: 40%; }
.x41 { --x: 41%; }
.x42 { --x: 42%; }
.x43 { --x: 43%; }
.x44 { --x: 44%; }
.x45 { --x: 45%; }
.x46 { --x: 46%; }
.x47 { --x: 47%; }
.x48 { --x: 48%; }
.x49 { --x: 49%; }
.x50 { --x: 50%; }
.x51 { --x: 51%; }
.x52 { --x: 52%; }
.x53 { --x: 53%; }
.x54 { --x: 54%; }
.x55 { --x: 55%; }
.x56 { --x: 56%; }
.x57 { --x: 57%; }
.x58 { --x: 58%; }
.x59 { --x: 59%; }
.x60 { --x: 60%; }
.x61 { --x: 61%; }
.x62 { --x: 62%; }
.x63 { --x: 63%; }
.x64 { --x: 64%; }
.x65 { --x: 65%; }
.x66 { --x: 66%; }
.x67 { --x: 67%; }
.x68 { --x: 68%; }
.x69 { --x: 69%; }
.x70 { --x: 70%; }
.x71 { --x: 71%; }
.x72 { --x: 72%; }
.x73 { --x: 73%; }
.x74 { --x: 74%; }
.x75 { --x: 75%; }
.x76 { --x: 76%; }
.x77 { --x: 77%; }
.x78 { --x: 78%; }
.x79 { --x: 79%; }
.x80 { --x: 80%; }
.y0 { --y: 0%; }
.y1 { --y: 1%; }
.y2 { --y: 2%; }
.y3 { --y: 3%; }
.y4 { --y: 4%; }
.y5 { --y: 5%; }
.y6 { --y: 6%; }
.y7 { --y: 7%; }
.y8 { --y: 8%; }
.y9 { --y: 9%; }
.y10 { --y: 10%; }
.y11 { --y: 11%; }
.y12 { --y: 12%; }
.y13 { --y: 13%; }
.y14 { --y: 14%; }
.y15 { --y: 15%; }
.y16 { --y: 16%; }
.y17 { --y: 17%; }
.y18 { --y: 18%; }
.y19 { --y: 19%; }
.y20 { --y: 20%; }
.y21 { --y: 21%; }
.y22 { --y: 22%; }
.y23 { --y: 23%; }
.y24 { --y: 24%; }
.y25 { --y: 25%; }
.y26 { --y: 26%; }
.y27 { --y: 27%; }
.y28 { --y: 28%; }
.y29 { --y: 29%; }
.y30 { --y: 30%; }
.y31 { --y: 31%; }
.y32 { --y: 32%; }
.y33 { --y: 33%; }
.y34 { --y: 34%; }
.y35 { --y: 35%; }
.y36 { --y: 36%; }
.y37 { --y: 37%; }
.y38 { --y: 38%; }
.y39 { --y: 39%; }
.y40 { --y: 40%; }
.y41 { --y: 41%; }
.y42 { --y: 42%; }
.y43 { --y: 43%; }
.y44 { --y: 44%; }
.y45 { --y: 45%; }
.y46 { --y: 46%; }
.y47 { --y: 47%; }
.y48 { --y: 48%; }
.y49 { --y: 49%; }
.y50 { --y: 50%; }
.y51 { --y: 51%; }
.y52 { --y: 52%; }
.y53 { --y: 53%; }
.y54 { --y: 54%; }
.y55 { --y: 55%; }
.y56 { --y: 56%; }
.y57 { --y: 57%; }
.y58 { --y: 58%; }
.y59 { --y: 59%; }
.y60 { --y: 60%; }
.y61 { --y: 61%; }
.y62 { --y: 62%; }
.y63 { --y: 63%; }
.y64 { --y: 64%; }
.y65 { --y: 65%; }
.y66 { --y: 66%; }
.y67 { --y: 67%; }
.y68 { --y: 68%; }
.y69 { --y: 69%; }
.y70 { --y: 70%; }
.y71 { --y: 71%; }
.y72 { --y: 72%; }
.y73 { --y: 73%; }
.y74 { --y: 74%; }
.y75 { --y: 75%; }
.y76 { --y: 76%; }
.y77 { --y: 77%; }
.y78 { --y: 78%; }
.y79 { --y: 79%; }
.y80 { --y: 80%; }
.y81 { --y: 81%; }
.y82 { --y: 82%; }
.y83 { --y: 83%; }
.y84 { --y: 84%; }
.y85 { --y: 85%; }
.y86 { --y: 86%; }
.y87 { --y: 87%; }
.y88 { --y: 88%; }
.y89 { --y: 89%; }
.y90 { --y: 90%; }
.y91 { --y: 91%; }
.y92 { --y: 92%; }
.y93 { --y: 93%; }
.y94 { --y: 94%; }
.y95 { --y: 95%; }
.y96 { --y: 96%; }
.y97 { --y: 97%; }
.y98 { --y: 98%; }
.y99 { --y: 99%; }
.y100 { --y: 100%; }
.y101 { --y: 101%; }
.y102 { --y: 102%; }
.y103 { --y: 103%; }
.y104 { --y: 104%; }
.y105 { --y: 105%; }
.y106 { --y: 106%; }
.y107 { --y: 107%; }
.y108 { --y: 108%; }
.y109 { --y: 109%; }
.y110 { --y: 110%; }
.y111 { --y: 111%; }
.y112 { --y: 112%; }
.y113 { --y: 113%; }
.y114 { --y: 114%; }
.y115 { --y: 115%; }
.y116 { --y: 116%; }
.y117 { --y: 117%; }
.y118 { --y: 118%; }
.y119 { --y: 119%; }
.y120 { --y: 120%; }
.y121 { --y: 121%; }
.y122 { --y: 122%; }
.y123 { --y: 123%; }
.y124 { --y: 124%; }
.y125 { --y: 125%; }
.y126 { --y: 126%; }
.y127 { --y: 127%; }
.y128 { --y: 128%; }
.y129 { --y: 129%; }
.y130 { --y: 130%; }
.y131 { --y: 131%; }
.y132 { --y: 132%; }
.y133 { --y: 133%; }
.y134 { --y: 134%; }
.y135 { --y: 135%; }
.y136 { --y: 136%; }
.y137 { --y: 137%; }
.y138 { --y: 138%; }
.y139 { --y: 139%; }
.y140 { --y: 140%; }
.y141 { --y: 141%; }
.y142 { --y: 142%; }
.y143 { --y: 143%; }
.y144 { --y: 144%; }
.y145 { --y: 145%; }
.y146 { --y: 146%; }
.y147 { --y: 147%; }
.y148 { --y: 148%; }
.y149 { --y: 149%; }
.y150 { --y: 150%; }
.y151 { --y: 151%; }
.y152 { --y: 152%; }
.y153 { --y: 153%; }
.y154 { --y: 154%; }
.y155 { --y: 155%; }
.y156 { --y: 156%; }
.y157 { --y: 157%; }
.y158 { --y: 158%; }
.y159 { --y: 159%; }
.y160 { --y: 160%; }
.r1 { --r: 1deg; }
.rn1 { --r: -1deg; }
.r2 { --r: 2deg; }
.rn2 { --r: -2deg; }
.r3 { --r: 3deg; }
.rn3 { --r: -3deg; }
.r4 { --r: 4deg; }
.rn4 { --r: -4deg; }
.r5 { --r: 5deg; }
.rn5 { --r: -5deg; }
.r6 { --r: 6deg; }
.rn6 { --r: -6deg; }
.r8 { --r: 8deg; }
.rn8 { --r: -8deg; }
.z1 { --z: 1; }
.z2 { --z: 2; }
.z3 { --z: 3; }
.z4 { --z: 4; }
.z5 { --z: 5; }
.z6 { --z: 6; }
.z7 { --z: 7; }
.z8 { --z: 8; }

/* ── Visualizer: a dark card with the menu bar's six bars ── */

.viz {
  display: grid;
  gap: clamp(20px, 8%, 40px);
  /* % of the card, so a small card on a short screen keeps its pills inside. */
  padding: clamp(16px, 8%, 56px);
  background: #16171a;
  color: #e9e7e2;
  border-color: #16171a;
}

.viz-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.07);
}

.viz-clock {
  color: rgb(233 231 226 / 0.7);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.viz-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 64px;
}

.viz-bars i {
  width: 12px;
  height: 100%;
  border-radius: 3px;
  background: var(--c);
  transform-origin: bottom;
  animation: band 1.1s ease-in-out infinite alternate;
  transition: background 0.4s ease;
}

.viz-bars i:nth-child(1) { --c: var(--c1); animation-duration: 0.9s; }
.viz-bars i:nth-child(2) { --c: var(--c2); animation-duration: 1.3s; animation-delay: -0.4s; }
.viz-bars i:nth-child(3) { --c: var(--c3); animation-duration: 0.7s; animation-delay: -0.2s; }
.viz-bars i:nth-child(4) { --c: var(--c4); animation-duration: 1.1s; animation-delay: -0.6s; }
.viz-bars i:nth-child(5) { --c: var(--c5); animation-duration: 0.8s; animation-delay: -0.3s; }
.viz-bars i:nth-child(6) { --c: var(--c6); animation-duration: 1.5s; animation-delay: -0.9s; }

@keyframes band {
  0% { transform: scaleY(0.18); }
  40% { transform: scaleY(0.85); }
  70% { transform: scaleY(0.45); }
  100% { transform: scaleY(0.7); }
}

/* Theme colors, sampled from the app's own VisualizerTheme. */
.viz {
  --c1: #cc4747; --c2: #ccc447; --c3: #58cc47; --c4: #47ccb3; --c5: #4769cc; --c6: #a247cc;
}

.viz:has([value="aurora"]:checked) {
  --c1: #4d96bf; --c2: #864dbf; --c3: #544dbf; --c4: #4dbf98; --c5: #4dbf66; --c6: #4d96bf;
}

.viz:has([value="ocean"]:checked) {
  --c1: #3391bf; --c2: #64bfbc; --c3: #47b3bf; --c4: #306fbf; --c5: #305bbf; --c6: #3391bf;
}

.viz:has([value="solarized"]:checked) {
  --c1: #268bd2; --c2: #2aa198; --c3: #859900; --c4: #b58900; --c5: #cb4b16; --c6: #d33682;
}

.viz:has([value="gruvbox"]:checked) {
  --c1: #458588; --c2: #689d6a; --c3: #98971a; --c4: #d79921; --c5: #d65d0e; --c6: #cc241d;
}

.viz:has([value="album"]:checked) {
  --c1: #f4b332; --c2: #f06a2a; --c3: #e5313b; --c4: #f06a2a; --c5: #f4b332; --c6: #22b8b0;
}

.viz-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.viz-themes legend {
  margin-bottom: 14px;
  color: rgb(233 231 226 / 0.6);
}

.viz-themes label {
  position: relative;
  padding: 9px 14px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.viz-themes label:hover {
  transform: translateY(-1px);
  background: rgb(255 255 255 / 0.06);
}

.viz-themes label:has(:checked) {
  background: #e9e7e2;
  color: #16171a;
}

.viz-themes label:has(:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.viz-themes input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ── Atmos: a top-down room, speakers lit per layout ────── */

.room {
  display: grid;
  gap: 28px;
  padding: clamp(24px, 4vw, 44px);
  background: var(--side);
  box-shadow: none;
}

.room-floor {
  position: relative;
  aspect-ratio: 1;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgb(34 184 176 / 0.10) 0 28%, transparent 28.5%),
    var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}

/* One speaker. Position comes from its s-* class; membership from its in* classes. */
.sp {
  position: absolute;
  display: grid;
  place-items: center;
  width: 10%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: clamp(7px, 0.75vw, 11px)/1 var(--mono);
  transition: opacity 0.3s ease, scale 0.3s ease;
}

.sp.top {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--teal);
}

.sp.sub {
  width: 8%;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
}

/* A soft pulse off each lit speaker, staggered so the room breathes. */
.sp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px currentColor;
  opacity: 0;
  animation: pulse 3.2s ease-out infinite;
}

.sp.bed::after { color: var(--ink); }
.sp.top::after { color: var(--teal); animation-delay: -1.1s; }
.sp.sub::after { color: var(--orange); animation-delay: -2.2s; }

@keyframes pulse {
  0% { opacity: 0.35; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(1.45); }
}

.s-c   { left: 47%; top: 10%; }
.s-l   { left: 26%; top: 13%; }
.s-r   { left: 74%; top: 13%; }
.s-lfe { left: 62%; top: 7%; }
.s-lw  { left: 12%; top: 29%; }
.s-rw  { left: 88%; top: 29%; }
.s-ls  { left: 10%; top: 53%; }
.s-rs  { left: 90%; top: 53%; }
.s-rls { left: 23%; top: 89%; }
.s-rrs { left: 77%; top: 89%; }
.s-vhl { left: 35%; top: 31%; }
.s-vhr { left: 65%; top: 31%; }
.s-ltm { left: 30%; top: 52%; }
.s-rtm { left: 70%; top: 52%; }
.s-ltr { left: 35%; top: 73%; }
.s-rtr { left: 65%; top: 73%; }

.head {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 5%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgb(47 91 230 / 0.15);
}

/* Speakers outside the chosen layout shrink back. */
.room:has([value="20"]:checked) .sp:not(.in20),
.room:has([value="51"]:checked) .sp:not(.in51),
.room:has([value="71"]:checked) .sp:not(.in71),
.room:has([value="714"]:checked) .sp:not(.in714),
.room:has([value="916"]:checked) .sp:not(.in916) {
  opacity: 0.12;
  scale: 0.6;
}

.room:has([value="20"]:checked) .sp:not(.in20)::after,
.room:has([value="51"]:checked) .sp:not(.in51)::after,
.room:has([value="71"]:checked) .sp:not(.in71)::after,
.room:has([value="714"]:checked) .sp:not(.in714)::after,
.room:has([value="916"]:checked) .sp:not(.in916)::after {
  animation: none;
}

.room-layouts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.room-layouts legend {
  margin-bottom: 12px;
  color: var(--mute);
  font-size: 14px;
}

.room-layouts label {
  position: relative;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  font: 14px/1.2 var(--mono);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.room-layouts label:hover {
  transform: translateY(-1px);
}

.room-layouts label:has(:checked) {
  background: var(--ink);
  color: var(--paper);
}

.room-layouts label:has(:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.room-layouts input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.room-key {
  display: flex;
  gap: 18px;
  margin: 0;
  color: var(--mute);
  font-size: 14px;
}

.room-key span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  vertical-align: -1px;
  border-radius: 50%;
}

.k-bed::before { background: var(--ink); }
.k-top::before { box-shadow: inset 0 0 0 2px var(--teal); }
.k-sub::before { border-radius: 3px !important; background: var(--orange); }


/* A postage stamp. Holes everywhere, then the content box filled back in: only the 7px edge is perforated. */
.stamp {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 7px;
  background: #fffaf0;
  rotate: 3deg;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 4px, #0000 98%, #000) 50% 50% / 12px 12px;
  mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 4px, #0000 98%, #000) 50% 50% / 12px 12px;
  transition: rotate 0.2s ease;
}

.stamp-face {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 16px 8px;
  border: 1px solid #efe6d2;
}

.letter-side .stamp-wrap {
  filter: drop-shadow(0 6px 10px rgb(20 20 20 / 0.15));
}

.stamp:hover {
  rotate: 0deg;
}

.stamp img {
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
}

.stamp .price {
  font-family: var(--mono);
  font-size: 40px;
  line-height: 1;
}

.stamp .mono {
  color: var(--mute);
}

/* ── Footer ──────────────────────────────────────────────── */

.foot .txt {
  color: var(--mute);
  font-size: 0.86em;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 1em;
  color: var(--ink);
}

.foot nav a {
  text-decoration: none;
}

.foot nav a:hover {
  text-decoration: underline;
}

/* ── Phones and narrow windows: one column, pictures under their words ── */

@media (max-width: 900px) {
  body {
    background: var(--paper);
  }

  .row {
    grid-template-columns: minmax(0, 1fr);
  }

  .txt {
    padding-top: 56px;
  }

  .topbar {
    margin-top: calc(var(--pad) - 56px);
    margin-bottom: 56px;
  }

  .pics {
    margin-top: 28px;
    padding: 32px var(--pad) 40px;
    background: var(--side);
  }


  .pics:empty {
    display: none;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 14.5px;
  }

  .topbar nav .wide {
    display: none;
  }

  .table a,
  .table > div {
    grid-template-columns: 12ch minmax(0, 1fr);
  }

  .table .end {
    display: none;
  }

  .card-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
  }

  .card-row img {
    width: 84px;
    height: 84px;
  }

  .spec {
    grid-template-columns: 11ch minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .viz-bars i:nth-child(odd) {
    transform: scaleY(0.7);
  }

  .viz-bars i:nth-child(even) {
    transform: scaleY(0.45);
  }
}

/* License key on /thanks: one long token, wraps anywhere, selects in one click. */
.key {
  margin: 0 0 1em;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  background: var(--side);
  border-radius: 8px;
}