body {
  margin: 0;
  background: #1d1f24;
  color: #e9e9ec;
}

/* The opening screen is the same stitched leather as the site bar above it, at full width. It stops at 78% of the screen so the top of the
   next section shows below it, which is what tells a visitor to scroll. */
.hero {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: 78vh;
  min-height: 78svh;
  padding: 0 20px 8px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
}

.hero h1 {
  margin: 0;
  font-size: clamp(64px, 14vw, 120px);
  line-height: 1;
  letter-spacing: 2px;
}

.hero .tagline {
  margin: 14px 0 0;
  font-size: clamp(20px, 3.2vw, 28px);
}

#credits {
  box-sizing: border-box;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  font-size: 13px;
  line-height: 1.6;
  color: #b8bcc6;
}

#credits a { color: #a9c2ff; }

.scene {
  box-sizing: border-box;
  max-width: 1040px;
  margin: 0 auto;
  padding: 48px 20px 6px;
}

/* Frames made of the kit's own leather keep their kit shadow and radius; every other window gets the page's frame */
.window:not(.fam-leather-frame) {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 34px -12px rgba(0, 0, 0, .7);
}

.cap {
  margin: 12px 4px 0;
  font: 12px/1.5 ui-monospace, Menlo, monospace;
  color: #b8bcc6;
}

.cap b {
  margin-right: 8px;
  color: #fff;
  font-weight: 600;
}

.cap code { font: inherit; }

.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  padding: 24px 26px;
}

.controls-row .field { width: 220px; max-width: 100%; }
.controls-row .bar { flex: 1 1 160px; }

.navs-window {
  display: grid;
  gap: 30px;
  padding: 30px 26px;
  background: #24272d;
}

/* No top padding: the text has to sit on the pad's 24px rules, or the red lines run through the letters */
.pad-text {
  padding: 0 20px 24px 54px;
  font: 20px/24px var(--fam-font-hand);
  color: #2b2216;
}

.paper-list { padding: 14px; border-radius: 6px; }

.metal-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 28px;
}

.frames-window {
  display: grid;
  gap: 26px;
  padding: 28px;
  background: #1d1f24;
}

.frames-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: start;
}

.frames-grid--wide { grid-template-columns: repeat(2, 1fr); align-items: center; }
/* A square photo in a landscape-sized cell would tower over its neighbour, so it takes less of the cell */
.frames-grid--wide .frame-square { width: 62%; justify-self: center; }
.frames-grid figure { margin: 0; }
.frames-grid img { display: block; width: 100%; }
.cork-board { height: 150px; }

.panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.panel {
  display: grid;
  place-items: center;
  height: 110px;
}

@media (max-width: 600px) {
  .frames-grid { grid-template-columns: repeat(2, 1fr); }
  .frames-grid--wide { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
}

.build-panel,
.glass-lab {
  padding: 22px 24px 26px;
  background: #24272d;
}

.scene-title .glass-note {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #b8bcc6;
}

/* A warning badge: amber highlight with dark text, so the browser limit is not read as just another label */
.glass-warning {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 12px 2px 10px;
  border-radius: 999px;
  background: #ffd23f;
  color: #2e2200;
  font-size: 14px;
  font-weight: 700;
}

.glass-warning::before {
  content: '\26A0\FE0E' / '';
  margin-right: 6px;
}

.scene-lead code { font: 14px ui-monospace, Menlo, monospace; color: #fff; }

/* The material supplies the background, so unlike .glass-backdrop this sets no color of its own */
.glass-material {
  display: grid;
  place-items: center;
  height: 170px;
  border-radius: 10px;
}

.glass-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

/* Wider tiles so six of them fall into rows of three instead of five and one */
.glass-tiles--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.glass-tile { margin: 0; }

.glass-tile figcaption {
  margin-top: 8px;
  text-align: center;
  font: 11px ui-monospace, Menlo, monospace;
  color: #b8bcc6;
}

/* Saturated hues all around the pane give the glow something to pick up; the plate gives refraction straight lines to bend */
.glass-backdrop {
  display: grid;
  place-items: center;
  height: 170px;
  border-radius: 10px;
  background: conic-gradient(#ff2d6f, #ffb400, #3ddc84, #1fb6ff, #8a3dff, #ff2d6f);
}

/* A neutral cut-out that reaches only a little past the pane, with a blurred edge, so no color sits directly behind the glass and the
   rainbow starts just outside the rim. Any color inside the pane is the glow bleeding in from there. */
.glass-backdrop--ringed::before {
  content: '';
  grid-area: 1 / 1;
  width: calc(64% + 44px);
  height: 128px;
  border-radius: 56px;
  background: #3b3e46;
  filter: blur(10px);
}

.glass-backdrop--ringed .glass-pane {
  grid-area: 1 / 1;
}

/* A pale blue plate that darkens toward one corner, cut into cells by hairlines. The long straight lines are what the rim bends. */
.glass-backdrop--plate {
  --glass-cell: 30px;
  height: 240px;
  background:
    repeating-linear-gradient(90deg, rgba(22, 34, 64, .55) 0 1px, transparent 1px var(--glass-cell)) calc(var(--glass-cell) / 2) 0,
    repeating-linear-gradient(0deg, rgba(22, 34, 64, .55) 0 1px, transparent 1px var(--glass-cell)) 0 calc(var(--glass-cell) / 2),
    linear-gradient(135deg, #eef3fb 0%, #d0dbef 38%, #94a9cc 72%, #3f5178 100%);
}

/* Photo backdrops as tall as the plate, so they sit level with it. The detail in the photo is what the rim bends. */
.glass-backdrop--galaxy,
.glass-backdrop--aurora,
.glass-backdrop--mountain,
.glass-backdrop--clownfish {
  height: 240px;
  background-position: 50% 50%;
  background-size: cover;
}

.glass-backdrop--galaxy { background-image: url(images/galaxy.jpg); background-color: #0b1030; }
.glass-backdrop--aurora { background-image: url(images/aurora.jpg); background-color: #1a0a33; }
.glass-backdrop--mountain { background-image: url(images/mountain.jpg); background-color: #c9d3e3; }
.glass-backdrop--clownfish { background-image: url(images/clownfish.jpg); background-color: #1d5a1d; }

/* The dusk gradient cut into cells by faint hairlines. Refracting controls keep a light label on it, and the lines are what the rim bends. */
.glass-backdrop--grid {
  --glass-cell: 30px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px var(--glass-cell)) calc(var(--glass-cell) / 2) 0,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px var(--glass-cell)) 0 calc(var(--glass-cell) / 2),
    linear-gradient(135deg, #43464e, #1c1e23);
}

.glass-pane {
  --fam-r: 24px;
  width: 64%;
  height: 84px;
}

/* The radius is half the height, so the glow's corner masks wrap the end caps. An unset radius gives straight glow bands. */
/* Neutral and mid-dark, so the rim picks up no color of its own and white text on dark or blue glass and dark text on light glass all stay readable */
.glass-backdrop--dusk {
  background: linear-gradient(135deg, #43464e, #1c1e23);
}

.glass-pane--field {
  --fam-r: 22px;
  width: 76%;
  height: 44px;
}

.glass-pane--pill {
  --fam-r: 50px;
  width: 80%;
  height: 100px;
}

.glass-pane .fam-glass-input { width: 100%; height: 100%; box-sizing: border-box; }

/* Two pieces side by side on the plate: a rounded one and a circular one, the circle's radius being half its side */
.glass-backdrop--pair {
  display: flex;
  justify-content: center;
  gap: 8%;
}

.glass-piece--rounded {
  --fam-r: 24px;
  flex: 0 1 220px;
  height: 110px;
}

.glass-piece--circle {
  --fam-r: 55px;
  flex: none;
  width: 110px;
  height: 110px;
}

.build-panel h2 {
  margin: 28px 0 12px;
  font: 700 22px/1.2 var(--site-font);
  color: #fff;
}

.build-panel h2:first-child { margin-top: 0; }
.build-panel h2 code { font: 600 18px ui-monospace, Menlo, monospace; }

.swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.sq { margin: 0; text-align: center; }

.sq figcaption {
  margin-top: 6px;
  font: 11px ui-monospace, Menlo, monospace;
  color: #b8bcc6;
}

.swatch {
  display: block;
  box-sizing: border-box;
  aspect-ratio: 1;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 6px 12px -4px rgba(0, 0, 0, .6);
}

.swatch.fam-leather-frame { box-shadow: none; }

.tints {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.tint-label {
  margin: 16px 0 8px;
  font: 12px ui-monospace, Menlo, monospace;
  color: #b8bcc6;
}

.tint {
  display: block;
  width: 64px;
  height: 44px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
}

/* Light stage so the shadows, gloss and rounding read against something */
.stage {
  margin-top: 22px;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(#dfe3e9, #c4cad3);
}

/* A dark floor for the reflections. Each row leaves --reflect-room under its things for the reflection, which takes no layout space,
   and a shelf row makes its floor that tall so they stand on its top edge. */
.reflect-stage {
  margin-top: 4px;
  border-radius: 14px;
  background: radial-gradient(120% 140% at 50% 0%, #2c3038, #121317 70%);
}

.reflect-row {
  --fam-shelf-height: var(--reflect-room);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--reflect-room) 26px;
  padding: 28px 20px var(--reflect-room);
}

.reflect-row:first-child { border-radius: 14px 14px 0 0; }
.reflect-row:last-child { border-radius: 0 0 14px 14px; }
.reflect-photos img { display: block; height: 150px; width: auto; }
.reflect-photos figure { margin: 0; width: 120px; }
.reflect-photos figure img { width: 100%; height: auto; }

.build-panel > .stage:first-child { margin-top: 0; }
.stage h2 { color: #1b2a40; }
.stage h2:first-child { margin-top: 0; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.gl {
  display: grid;
  gap: 6px;
  justify-items: center;
  font: 11px ui-monospace, Menlo, monospace;
  color: #2a2f38;
}

.gl .fam-pill {
  width: 120px;
  height: 40px;
}

.chip,
.elev {
  display: grid;
  place-items: center;
  font: 11px ui-monospace, Menlo, monospace;
  color: #1b2a40;
}

.chip {
  width: 84px;
  height: 56px;
  background: linear-gradient(#f8fafd, #cdd8ea);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px 0 #fff;
}

.elev {
  width: 96px;
  height: 64px;
  border-radius: 12px;
  background: #f7f8fa;
}

.elev.fam-shadow-inset { background: #e3e7ee; }
@media (max-width: 600px) {
  .swatches { grid-template-columns: repeat(2, 1fr); }
}

/* On a phone the tray is two rows tall, so the lens starts higher to stay clear of it */
@media (max-width: 600px) {
  .glass-band .fam-glass { top: 40px; }
}

.copy {
  margin-left: 10px;
  padding: 2px 10px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: transparent;
  color: #e9e9ec;
  font: 11px ui-monospace, Menlo, monospace;
  cursor: pointer;
}

.copy:hover { background: rgba(255, 255, 255, .12); }

.copy:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The glass band runs edge to edge on the ribbon photo, which is dark with a few bright colors, so the lens shows up well */
.glass-band {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  min-height: 620px;
  padding: 0 16px 24px;
  overflow: hidden;
  background: #0d1116 url(images/ribbon.jpg) 50% 45% / cover;
  /* The lens replaces the system cursor over the picture; the controls below get it back */
  cursor: none;
  /* Horizontal drags move the lens, vertical ones still scroll the page */
  touch-action: pan-y;
}

.glass-band .fam-glass {
  position: absolute;
  left: calc(50% - 90px);
  top: 90px;
  width: 180px;
  height: 180px;
  pointer-events: none;
}

/* A book page on the fam-paper material. It has no position of its own, so the lens, which is positioned, paints over it.
   The text runs on past the page's height and is clipped, like a page cut off by the tray. */
.lens-page {
  box-sizing: border-box;
  flex: 1 1 0;
  width: 100%;
  max-width: 700px;
  min-height: 220px;
  margin: 24px auto 0;
  padding: 36px 44px 24px;
  overflow: hidden;
  border-radius: 3px;
  font: 18px/1.55 Georgia, "Times New Roman", serif;
  color: #2b2118;
  text-align: justify;
  hyphens: auto;
  /* The aged edge of the paper and a spine shadow down the middle */
  box-shadow:
    inset 0 0 38px rgba(120, 85, 40, .28),
    inset 0 0 90px -40px rgba(0, 0, 0, .35),
    0 10px 30px rgba(0, 0, 0, .55);
}

.lens-page p {
  margin: 0;
  text-indent: 1.5em;
}

.lens-page p:first-child { text-indent: 0; }

.lens-page p:first-child::first-letter {
  float: left;
  padding: 6px 8px 0 0;
  font-size: 3.4em;
  line-height: .8;
}

/* Two columns need room; on a phone the one column runs down and is clipped, so nothing spills sideways */
@media (min-width: 601px) {
  .lens-page {
    columns: 2;
    column-gap: 48px;
    column-fill: auto;
  }
}

@media (max-width: 600px) {
  .lens-page {
    padding: 28px 24px 16px;
    font-size: 16px;
  }
}

/* The tray and the notes sit in the band's flow, at its bottom, so they stack instead of overlapping when the tray wraps on a phone */
.tray {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 26px;
  border-radius: 16px;
  /* The last inset layer is a pale veil over the metal. The knobs' large cast shadows fall on the engraved labels below them,
     and without the veil (and the black label ink below) the darkest metal under a label is under 3:1. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 8px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .55), 0 14px 30px -10px rgba(0, 0, 0, .7), inset 0 0 0 999px rgba(255, 255, 255, .2);
  cursor: default;
}

/* The knob's large cast shadow reaches well below it and is darkest next to the knob, so the label keeps 20px clear of the knob */
.knobwrap {
  display: grid;
  gap: 20px;
  justify-items: center;
  align-content: start;
  /* The control row is as tall as a knob, so the shorter switch centers in it and its label lines up with the knob labels */
  grid-template-rows: 72px auto;
  align-items: center;
}

/* The shared engraved ink is fitted to the bare metal. Under a knob's cast shadow, and on the second row of a wrapped tray, black is what keeps 3:1 */
.knobwrap .fam-engraved-metal { color: #000; }

.glass-band .fam-knob {
  cursor: grab;
  touch-action: none;
}

/* Knobs are controls here, so they get the kit's two-tone focus ring (the kit's knob is only a picture) */
.glass-band .fam-knob:focus-visible {
  outline: 2px solid var(--fam-focus-ink);
  outline-offset: 2px;
  box-shadow: var(--fam-focus-halo), inset 0 -3px 6px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .8), 0 5px 9px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .6);
}

.glass-notes {
  text-align: center;
  cursor: default;
}

.glass-notes .note {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .85);
  font: 400 15px var(--site-font);
  color: #e9e9ec;
}

.glass-notes .cap {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .85);
  color: #e9e9ec;
  max-width: 100%;
  word-break: break-word;
}