@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&display=swap');

/*
 * Tip 010: Lumno's liquid glass on one card. The top shows the card on a
 * wallpaper; the black panel below shows the code and how it works.
 *
 * The card is a now-playing player drawn at 2x, and the material is the
 * New Tab's liquid glass (newtab/glass-style.css). Its sizes are written in
 * --u, one Lumno pixel at this element's scale (--s), so the card and the
 * small controls each keep Lumno's proportions. The glass is clearer and
 * more vivid than Lumno's own, closer to macOS: a thin tint, deepened color
 * and a wide rim.
 *
 * A card takes the material through four declarations: background (the
 * tint), backdrop-filter (blur and tone, then the rim lens from glass.js),
 * box-shadow (the lit rim) and color (the ink). The tokens change with the
 * theme and with the ink the card picks from the wallpaper under it; they
 * are registered properties, so the card glides from one to the next.
 */

@property --tint-on { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --filter-on { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tint-c { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --tint-thin { syntax: '<number>'; inherits: true; initial-value: 0.28; }
@property --tint-dense { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --density { syntax: '<number>'; inherits: true; initial-value: 0.35; }
@property --f-blur { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --f-sat { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --f-con { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --f-bri { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --f-bb { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --f-keep { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #000; }
@property --ink-2 { syntax: '<color>'; inherits: true; initial-value: #666; }
@property --ink-solid { syntax: '<color>'; inherits: true; initial-value: #000; }
@property --ink-a { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --raised { syntax: '<color>'; inherits: true; initial-value: transparent; }

.tip-stage {
  --font: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --theme-ms: 620ms;
  --scene-h: 840px;
  padding: 0;
  background: #0c0d10;
  font-family: var(--font);
  font-feature-settings: 'cv11', 'tnum';
}

.tip-stage:has(> .tip-credit) { padding: 0; }

button { font: inherit; }

/* Jumps to a state without animating (demo.js). */
.tip-stage.is-instant,
.tip-stage.is-instant * { transition: none !important; }

/* ---------- The scene ---------- */

.scene {
  position: absolute;
  inset: 0 0 auto;
  height: var(--scene-h);
  overflow: hidden;
}

/* macOS Tahoe's dynamic wallpaper, cut to the scene: the light one, and the
   dark one fading in over it; demo.js samples their first frames. */
.wall {
  position: absolute;
  inset: 0;
  background: #3a6fd8;
}

.wall video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wall .is-dark { opacity: 0; transition: opacity var(--theme-ms) ease; }
.tip-stage[data-theme="dark"] .wall .is-dark { opacity: 1; }

/* While the card is apart, the wallpaper steps back so its layers show. It
   grows a little as it blurs, so the blurred edge stays out of the frame. */
.wall { transition: filter 500ms ease, scale 500ms ease; }
.scene.is-apart .wall { filter: blur(14px) brightness(0.62) saturate(0.6); scale: 1.08; }

/* ---------- The material ---------- */

/*
 * Light theme, dark ink. Clear glass: a thin white wash, the scene behind
 * lightly blurred and its colors deepened, so the glass takes its color from
 * what is under it instead of turning milky. The rim catches light along the
 * top left and on the bottom right; the shadow stays faint.
 */
.glass {
  --u: calc(1px * var(--s, 1.6));
  --tint-c: #fff;
  --tint-thin: 0.06;
  --tint-dense: 0.22;
  --f-blur: calc(2 * var(--u));
  --f-sat: 1.8;
  --f-con: 1;
  --f-bri: 1.06;
  --f-bb: 1;
  --edge:
    inset calc(1.5 * var(--u)) calc(1.5 * var(--u)) var(--u) calc(-1 * var(--u)) rgba(255, 255, 255, 0.95),
    inset calc(-1.5 * var(--u)) calc(-1.5 * var(--u)) var(--u) calc(-1 * var(--u)) rgba(255, 255, 255, 0.55),
    inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.3),
    0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.06),
    0 calc(6 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.08);
  /* Light caught inside the rim, from the top left. */
  --sheen:
    radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, 0.3), transparent 55%),
    radial-gradient(70% 50% at 100% 100%, rgba(255, 255, 255, 0.12), transparent 60%);
  /* One ink in fixed steps; labels are translucent and multiply into the
     glass, so they pick up its color and keep their contrast. */
  --ink: rgba(0, 0, 0, 0.86);
  --ink-2: rgba(60, 60, 67, 0.7);
  /* The same ink split into an opaque color and its strength, for icons:
     a translucent color would darken where a shape's strokes overlap. */
  --ink-solid: rgb(0, 0, 0);
  --ink-a: 0.86;
  --blend: multiply;
  /* A control lifted off the glass, lit rather than tinted. */
  --raised: rgba(255, 255, 255, 0.72);
  --raised-edge: inset 0 calc(0.5 * var(--u)) 0 rgba(255, 255, 255, 0.8), 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.06), 0 var(--u) calc(2 * var(--u)) rgba(0, 0, 0, 0.08);
}

/*
 * Light theme over a dark patch: light ink on a thin dark tint, so dark
 * wallpaper stays see-through instead of turning milky, with the backdrop
 * dimmed a touch to hold the ink. No veil, no inner glow: only a faint rim.
 */
.tip-stage:not([data-theme="dark"]) .glass[data-ink="light"] {
  --tint-c: rgb(16, 18, 22);
  --tint-thin: 0.1;
  --tint-dense: 0.3;
  --f-blur: calc(2 * var(--u));
  --f-sat: 1.7;
  --f-con: 1;
  --f-bri: 1;
  --f-bb: 0.85;
  --edge:
    inset 0 var(--u) 0 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 var(--u) rgba(255, 255, 255, 0.08),
    inset 0 0 0 0 rgba(255, 255, 255, 0),
    0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.3),
    0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0);
}

/* Dark theme: a near-black tint, and the backdrop dimmed by brightness
   alone, which is multiply with black: blacks stay black and the lights
   come down, so the glass dims instead of going muddy. */
.tip-stage[data-theme="dark"] .glass {
  --tint-c: rgb(20, 20, 24);
  --tint-thin: 0.16;
  --tint-dense: 0.38;
  --f-blur: calc(2 * var(--u));
  --f-sat: 1.6;
  --f-con: 1;
  --f-bri: 0.8;
  --f-bb: 1;
  --sheen:
    radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(70% 50% at 100% 100%, rgba(255, 255, 255, 0.05), transparent 60%);
  --edge:
    inset var(--u) var(--u) calc(0.5 * var(--u)) calc(-0.5 * var(--u)) rgba(255, 255, 255, 0.4),
    inset calc(-1 * var(--u)) calc(-1 * var(--u)) calc(0.5 * var(--u)) calc(-0.5 * var(--u)) rgba(255, 255, 255, 0.15),
    inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.06),
    0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.28),
    0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.22);
}

/* Light ink, on dark glass of either kind; it adds light rather than
   multiplying. */
.tip-stage[data-theme="dark"] .glass,
.tip-stage:not([data-theme="dark"]) .glass[data-ink="light"] {
  --ink: rgba(255, 255, 255, 0.94);
  --ink-2: rgba(235, 235, 245, 0.64);
  --ink-solid: rgb(255, 255, 255);
  --ink-a: 0.94;
  --blend: plus-lighter;
  --raised: rgba(255, 255, 255, 0.18);
  --raised-edge: inset 0 calc(0.5 * var(--u)) 0 rgba(255, 255, 255, 0.24), 0 0 0 0 rgba(0, 0, 0, 0), 0 var(--u) calc(2 * var(--u)) rgba(0, 0, 0, 0.2);
}

/*
 * The four declarations. Each step fades in from the card it was: --tint-on
 * and --filter-on run 0 to 1, and the edge and ink switch with a class.
 * Density and saturation come from the wallpaper sample (demo.js).
 */
.glass {
  /* --tint-k scales the tint by the user's opacity setting for the theme.
     Below 1x the veil thins out with it, so at 0 only the
     blur, the rim and the shadow are left: clear glass. */
  --tint-a: min(0.95, (var(--tint-thin) + (var(--tint-dense) - var(--tint-thin)) * var(--density)) * var(--tint-k, 1));
  --veil-k: min(1, var(--tint-k, 1));
  --on: var(--filter-on);
  background: color-mix(in srgb, var(--tint-c) calc((1 - (1 - var(--tint-a)) * var(--tint-on)) * 100%), transparent);
  -webkit-backdrop-filter:
    blur(calc(var(--f-blur) * var(--on)))
    saturate(calc(1 + (var(--f-sat) - 1) * var(--on)))
    contrast(calc(1 + (var(--f-con) - 1) * var(--on) * var(--veil-k)))
    brightness(calc(1 + (var(--f-bri) - 1) * var(--on) * var(--veil-k)))
    saturate(calc(1 + (var(--f-keep) - 1) * var(--on)))
    brightness(calc(1 + (var(--f-bb) - 1) * var(--on)))
    var(--glass-lens,);
  backdrop-filter:
    blur(calc(var(--f-blur) * var(--on)))
    saturate(calc(1 + (var(--f-sat) - 1) * var(--on)))
    contrast(calc(1 + (var(--f-con) - 1) * var(--on) * var(--veil-k)))
    brightness(calc(1 + (var(--f-bri) - 1) * var(--on) * var(--veil-k)))
    saturate(calc(1 + (var(--f-keep) - 1) * var(--on)))
    brightness(calc(1 + (var(--f-bb) - 1) * var(--on)))
    var(--glass-lens,);
  box-shadow:
    inset 0 0 0 0 rgba(255, 255, 255, 0),
    inset 0 0 0 0 rgba(255, 255, 255, 0),
    inset 0 0 0 0 rgba(255, 255, 255, 0),
    0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.05),
    0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.18);
  color: #1c1c1e;
  transition:
    --tint-on 900ms ease, --filter-on 1100ms ease,
    --tint-c var(--theme-ms) ease, --tint-thin var(--theme-ms) ease, --tint-dense var(--theme-ms) ease,
    --density 500ms ease, --f-keep 500ms ease,
    --f-blur var(--theme-ms) ease, --f-sat var(--theme-ms) ease, --f-con var(--theme-ms) ease,
    --f-bri var(--theme-ms) ease, --f-bb var(--theme-ms) ease,
    --ink var(--theme-ms) ease, --ink-2 var(--theme-ms) ease,
    --ink-solid var(--theme-ms) ease, --ink-a var(--theme-ms) ease,
    --raised var(--theme-ms) ease,
    box-shadow 900ms ease, color 700ms ease;
}

.glass.has-tint { --tint-on: 1; }
.glass.has-filter { --filter-on: 1; }
.glass.has-edge { box-shadow: var(--edge); }
.glass.has-ink { color: var(--ink); }

/* Every label on the glass blends with it. */
.glass.has-ink :is(b, .sub, svg, .p-time, .p-progress) { mix-blend-mode: var(--blend); }

/* Before: plain gray type. */
.glass .sub { color: #8e8e93; transition: color 700ms ease; }
.glass.has-ink .sub { color: var(--ink-2); }

:is(.glass, .layer) svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The controls are glass from the start, with a denser tint than the card,
   so their small parts hold on any wallpaper. */
.chrome { --tint-on: 1; --filter-on: 1; --tint-thin: 0.5; --tint-dense: 0.6; }
.tip-stage[data-theme="dark"] .chrome { --tint-thin: 0.38; --tint-dense: 0.48; }

/* ---------- The card ---------- */

/* The rim's inner light comes with the rim. */
.player::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sheen);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.player.has-edge::before { opacity: 1; }

/* The rounded rim's own light: soft bands just inside the edge, bright where
   it faces the light at the top and left, shaded at the bottom, so the slab
   reads as thick. */
.player::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 calc(10 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(255, 255, 255, 0.5),
    inset calc(8 * var(--u)) 0 calc(16 * var(--u)) calc(-8 * var(--u)) rgba(255, 255, 255, 0.22),
    inset calc(-8 * var(--u)) 0 calc(16 * var(--u)) calc(-8 * var(--u)) rgba(255, 255, 255, 0.12),
    inset 0 calc(-10 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.player.has-edge::after { opacity: 1; }
.tip-stage[data-theme="dark"] .player::after {
  box-shadow:
    inset 0 calc(10 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(255, 255, 255, 0.2),
    inset calc(8 * var(--u)) 0 calc(16 * var(--u)) calc(-8 * var(--u)) rgba(255, 255, 255, 0.08),
    inset calc(-8 * var(--u)) 0 calc(16 * var(--u)) calc(-8 * var(--u)) rgba(255, 255, 255, 0.05),
    inset 0 calc(-10 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, 0.25);
}

/* A now-playing player at 2x: one slab, 20px in, a 36px corner. Its
   corners are plain circles, the same shape the rim lens is drawn for. */
.player {
  --lumno-corner-shape: round;
  --s: 2;
  position: absolute;
  left: 260px;
  top: 200px;
  z-index: 2;
  width: calc(280 * var(--u));
  padding: calc(20 * var(--u));
  border-radius: calc(36 * var(--u));
}

.p-body { position: relative; display: grid; gap: calc(10 * var(--u)); }

.p-top {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin-bottom: calc(8 * var(--u));
}

/* Album art: Lumno's icon redrawn in type, with grain (demo.js). */
.p-art {
  flex: none;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  overflow: hidden;
  border-radius: calc(14 * var(--u));
  background: #0a1a3a;
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(10, 22, 80, 0.3);
}

.p-art canvas { display: block; width: 100%; height: 100%; }

.p-track { display: grid; gap: calc(3 * var(--u)); min-width: 0; white-space: nowrap; }
.p-track b { font: 600 calc(19 * var(--u)) / 1.15 var(--font); letter-spacing: -0.015em; }
.p-track .sub { font: 500 calc(15 * var(--u)) / 1.2 var(--font); }

.p-time {
  display: flex;
  justify-content: space-between;
  font: 600 calc(11 * var(--u)) / 1 var(--font);
  font-variant-numeric: tabular-nums;
}

.p-progress {
  position: relative;
  display: block;
  height: calc(5 * var(--u));
  border-radius: 999px;
  --lumno-corner-shape: round;
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.p-fill {
  position: absolute;
  inset: 0 66% 0 0;
  border-radius: inherit;
  background: currentColor;
}

.p-knob {
  position: absolute;
  top: 50%;
  left: 34%;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  --lumno-corner-shape: round;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.08), 0 1px 1px rgba(15, 23, 42, 0.06), 0 2px 5px rgba(15, 23, 42, 0.16);
  translate: -50% -50%;
}

.p-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(4 * var(--u));
}

.p-main { display: flex; gap: calc(22 * var(--u)); }

/* The same sizes on the card and on its ink layer when taken apart. */
:is(.player, .layer.ink) svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
:is(.player, .layer.ink) .p-main svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
:is(.player, .layer.ink) svg .fill { fill: currentColor; stroke: currentColor; stroke-width: 1; }

/* Icons draw opaque and fade as a whole. */
.player.has-ink svg { color: var(--ink-solid); opacity: var(--ink-a); }
.layer.ink svg { color: #000; opacity: 0.86; }

/* ---------- Controls ---------- */

.theme {
  position: absolute;
  top: 36px;
  right: 40px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  --lumno-corner-shape: round;
  cursor: pointer;
}

.theme svg {
  grid-area: 1 / 1;
  width: 28px;
  height: 28px;
  transition: opacity 300ms ease, rotate 500ms ease;
}

.theme .moon { opacity: 0; rotate: -60deg; }
.tip-stage[data-theme="dark"] .theme .sun { opacity: 0; rotate: 60deg; }
.tip-stage[data-theme="dark"] .theme .moon { opacity: 1; rotate: 0deg; }
.theme[data-state="pressed"] { scale: 0.94; }


/* The tint control, glass like the theme button, under the card. */
.tint-control {
  --s: 2;
  position: absolute;
  left: 50%;
  top: 754px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(32 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: 999px;
  --lumno-corner-shape: round;
  translate: -50% 0;
  opacity: 0;
  visibility: hidden;
}

.tint-label,
.tint-value {
  color: var(--ink);
  font: 600 calc(12 * var(--u)) / 1 var(--font);
}

.tint-value { width: calc(32 * var(--u)); text-align: right; font-variant-numeric: tabular-nums; }

.tint-track {
  position: relative;
  width: calc(110 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 999px;
  --lumno-corner-shape: round;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.tint-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0.4) * 100%);
  border-radius: inherit;
  background: linear-gradient(180deg, #4d7dcb 0%, #3462ad 100%);
}

/* Lumno's switch knob. */
.tint-knob {
  position: absolute;
  top: 50%;
  left: calc(var(--p, 0.4) * 100%);
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: 50%;
  --lumno-corner-shape: round;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.06), 0 2px 5px rgba(15, 23, 42, 0.14);
  translate: -50% -50%;
  transition: scale 120ms ease;
}

.tint-knob[data-state="pressed"] { scale: 1.12; }

/* ---------- Taken apart ---------- */

.explode {
  position: absolute;
  z-index: 4;
  perspective: 2400px;
  pointer-events: none;
  visibility: hidden;
}

.stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.layer {
  --lumno-corner-shape: round;
  --s: 2;
  --u: calc(1px * var(--s));
  position: absolute;
  inset: 0;
  border-radius: calc(36 * var(--u));
  transition: opacity 300ms ease;
}

/* Each layer as it would look alone. */
.layer.shadow {
  outline: 2px dashed rgba(14, 36, 64, 0.35);
  outline-offset: -1px;
  box-shadow: 0 30px 70px 6px rgba(0, 0, 0, 0.4);
}
.layer.backdrop { overflow: hidden; background-repeat: no-repeat; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.layer.lens { overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.layer.lens canvas { display: block; width: 100%; height: 100%; }
.layer.tint { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }

.layer.rim {
  background: radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, 0.3), transparent 55%);
  box-shadow:
    inset calc(1.5 * var(--u)) calc(1.5 * var(--u)) var(--u) calc(-1 * var(--u)) rgba(255, 255, 255, 0.95),
    inset calc(-1.5 * var(--u)) calc(-1.5 * var(--u)) var(--u) calc(-1 * var(--u)) rgba(255, 255, 255, 0.55),
    inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.3),
    0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.06);
}

.layer.ink {
  padding: calc(20 * var(--u));
  color: rgba(0, 0, 0, 0.86);
}

.layer.ink .sub { color: rgba(60, 60, 67, 0.7); }

/* Alone over the dimmed wallpaper, the ink keeps a faint halo to read. */
.layer.ink :is(b, .sub) { text-shadow: 0 0 14px rgba(255, 255, 255, 0.85), 0 0 4px rgba(255, 255, 255, 0.7); }

/* ---------- Sampling ---------- */

.probe {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.probe i {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2.4px #fff, 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ---------- The panel ---------- */

.panel {
  position: absolute;
  inset: var(--scene-h) 0 0;
  padding: 44px 80px 0;
  background: #0c0d10;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06);
  color: #9aa0ab;
}

/* Which part is showing, in a word. */
.step {
  margin: 0;
  color: #6b7280;
  font: 500 20px/1 var(--tip-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.view {
  position: absolute;
  left: 80px;
  right: 80px;
  top: 104px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}

.code {
  font: 500 25px/40px var(--tip-font-mono);
  white-space: pre;
}

.code i { font-style: normal; }
.code .sel { color: #f2f2f2; }
.code .prop { color: #8ab4f8; }
.code .now { color: #f6c177; }
.code .cmt { color: #5b6170; }

.code .ln {
  position: relative;
  display: block;
  margin: 0 -16px;
  padding: 0 16px;
  border-radius: 8px;
  transition: background-color 400ms ease;
}

.code .ln[hidden] { display: none; }

/* The six layers from the bottom up on the left; what the lit one does, and
   its CSS, on the right. */
.layer-view {
  display: grid;
  grid-template-columns: 240px 1fr;
  column-gap: 40px;
  align-items: start;
}

.layers {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.layers li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  margin: 0 -14px;
  padding: 9px 14px;
  border-radius: 10px;
  font: 500 19px/1.2 var(--tip-font-mono);
  transition: background-color 300ms ease, opacity 300ms ease;
}

.layers li em { color: #5b6170; font-style: normal; }
.layers li b { color: #f2f2f2; font: 600 23px/1.2 var(--font); }

.layers.is-focus li { opacity: 0.32; }
.layers.is-focus li.is-on { opacity: 1; background: rgba(246, 193, 119, 0.1); }

/* What a part shows, in a sentence, over its code. */
.lede {
  margin: 0 0 28px;
  color: #e6e8eb;
  font: 500 28px/1.4 var(--font);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.layer-what {
  margin: 6px 0 0;
  color: #e6e8eb;
  font: 500 25px/1.45 var(--font);
  letter-spacing: -0.01em;
}

.layer-code { margin-top: 22px; font-size: 19px; line-height: 32px; }

/* ---------- Credit ---------- */

.tip-credit {
  right: auto;
  left: 50%;
  bottom: 34px;
  z-index: 9;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--tip-font-sans);
  translate: -50% 0;
}

.tip-credit img { filter: brightness(0) invert(1); opacity: 0.4; }
.tip-stage[data-theme="dark"] .tip-credit { color: rgba(255, 255, 255, 0.4); }
.tip-stage[data-theme="dark"] .tip-credit img { filter: brightness(0) invert(1); opacity: 0.4; }

.tip-pointer-label { transition: opacity 120ms ease; }