/*
 * Paint (D01 to D20): colour is the material. Loaded after obsidian-glass.css; paint-boot.js switches this whole
 * sheet off for the Glass look, so every rule here is written plainly (no !important, no data-look scoping) and
 * wins by coming later and by one extra element in its selector.
 *
 *   ground   three soft fields of colour, each on its own layer, over a base and under a live film grain (no filter, no blur)
 *   panes    cards, sheets and menus are one dark tint, never a border or a bevel; radius 26 / 18 / 12
 *   action   one flat fill with dark ink; outline for the second action; the press is the shared scale
 *   strokes  the selected tab and current place are underlined by a brush stroke served as a file
 *   people   avatars and covers are painted from the name (pk-paint-N, seeded in src/web/paint.ts)
 *
 * tokens.css and motion.css are the portal's files and stay untouched. Palette tokens live in pk-tokens.css.
 * Two things move. The ground is calm by default (Settings, Look: Motion): each field drifts on its own slow loop, eases in once when the
 * app opens and leans a few pixels with the pointer or the phone (ground.js sets one transform per layer; the sheet never reads it). The film
 * grain is live by default (Film grain): one oversized layer jumps between ten positions about ten times a second. Every keyframe below animates transform or opacity and nothing else, so each layer is
 * composited, never repainted. All of it stays still under prefers-reduced-motion and Save-Data (html[data-save="1"], set by paint-boot.js), pauses while the tab is hidden (data-hidden,
 * set by paint.js) and while a stage for media is open. Save-Data also drops the grain, the blur and the spot pictures.
 */

:root {
  --paint-night: #0b0810;
  --paint-grain-layer: url("/assets/paint/grain.png");
  /* Room: the inset of a corner control or a bar from a screen edge, the clear space between a control and what is beside it,
     the least a touch target is. test/web/paint-layout.test.mjs holds the rules below to these three. */
  --paint-space-edge: 12px;
  --paint-space-clear: 8px;
  --paint-hit: 44px;
  --paint-r-lg: 26px;
  --paint-r-md: 18px;
  --paint-r-sm: 12px;
  --paint-lamp: #ffb43f;
  --paint-fill: #ee6b7b;
  --paint-on-fill: #1d070c;
  /* The Stream's own ground is round 0 of the generated variants below (:root, .pk-paint-0): coral, amber and a deep indigo on #120e30.
     A page or a person overrides it with pk-paint-N. */
  /* The initial in a painted avatar: light ink on a dark pool the painting leaves behind it (test/web/paint-look.test.mjs measures it on the brightest paint). */
  --pink: #fff8f0;
  --phalo: rgba(10, 6, 16, .6);
  --paint-initial-scrim: rgba(10, 6, 16, .72);
  /* How much of each of the three fields shows, in per cent (--ga1..3), times the page's strength (--gk). The Stream is half of what it was on 4 October
     (owner, 5 October: "way too vivid, darken it by 50%"): every field is blended half way to the dark base and turns towards its shade as it dims (amber dims to ember, never to brown), so the hue stays and nothing glows.
     Reading pages hold it quieter (.36), a profile quieter again (.35 behind its header only). */
  --ga1: 100; --ga2: 100; --ga3: 100;
  --gk: .5;
  --paint-pane: rgba(11, 7, 18, .80);
  --paint-pane-hi: rgba(11, 7, 18, .88);
  /* A card that holds a picture is neutral near-black and opaque: colour never sits behind media. */
  --paint-pane-neutral: #070709;
  --paint-media-bg: #050506;
  --paint-ring-halo: rgba(8, 5, 12, .92);
  --paint-chrome: rgba(11, 8, 16, .78);
  --paint-sheet: rgba(15, 10, 22, .94);
  --paint-ink-on-colour: #fff8f0;
  /* The poster's veil: the title sits in the top 40% (large text), everything else below it. test/web/paint-look.test.mjs holds both ends to AA. */
  --paint-veil-a: rgba(10, 6, 16, .40);
  --paint-veil-b: rgba(10, 6, 16, .50);
  --paint-veil-c: rgba(10, 6, 16, .60);
}

/* paint:generated variants begin (node scripts/paint-assets.mjs) */
:root, .pk-paint-0, [data-paint="0"] { --pa: #ffb43f; --pb: #ff4b3a; --pc: #ffb43f; --pe: #ff4b3a; --pd: #4f1b1c; --pas: #ff4b3a; --pbs: #b8205a; --pcs: #ff4b3a; --px1: 10%; --py1: 8%; --px2: 90%; --py2: 40%; --px3: 30%; --py3: 100%; --gb: #120e30; --g1: #ff4b3a; --g2: #ffb43f; --g3: #2a1f94; --g1s: #b8205a; --g2s: #ff4b3a; --g3s: #241a80; --gx1: 6%; --gy1: 4%; --gx2: 98%; --gy2: 38%; --gx3: 30%; --gy3: 106%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-1, [data-paint="1"] { --pa: #ff4b3a; --pb: #a0276f; --pc: #ff4b3a; --pe: #a0276f; --pd: #3b0f25; --pas: #b8205a; --pbs: #7a1d7e; --pcs: #b8205a; --px1: 10%; --py1: 8%; --px2: 90%; --py2: 40%; --px3: 30%; --py3: 100%; --gb: #1a0d18; --g1: #ff4b3a; --g2: #ffb43f; --g3: #6b1d4a; --g1s: #b8205a; --g2s: #ff4b3a; --g3s: #4d1560; --gx1: 94%; --gy1: 4%; --gx2: 2%; --gy2: 38%; --gx3: 70%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-2, [data-paint="2"] { --pa: #a0276f; --pb: #3b2fd0; --pc: #a0276f; --pe: #3b2fd0; --pd: #2a0e2f; --pas: #7a1d7e; --pbs: #2a1f94; --pcs: #7a1d7e; --px1: 10%; --py1: 8%; --px2: 90%; --py2: 40%; --px3: 30%; --py3: 100%; --gb: #150d26; --g1: #ff4b3a; --g2: #2a1f94; --g3: #6b1d4a; --g1s: #b8205a; --g2s: #241a80; --g3s: #4d1560; --gx1: 6%; --gy1: 96%; --gx2: 98%; --gy2: 62%; --gx3: 30%; --gy3: -6%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-3, [data-paint="3"] { --pa: #ff4b3a; --pb: #ffb43f; --pc: #ff4b3a; --pe: #ffb43f; --pd: #3b0f25; --pas: #b8205a; --pbs: #ff4b3a; --pcs: #b8205a; --px1: 10%; --py1: 8%; --px2: 90%; --py2: 40%; --px3: 30%; --py3: 100%; --gb: #140e2a; --g1: #ffb43f; --g2: #2a1f94; --g3: #6b1d4a; --g1s: #ff4b3a; --g2s: #241a80; --g3s: #4d1560; --gx1: 94%; --gy1: 96%; --gx2: 2%; --gy2: 62%; --gx3: 70%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-4, [data-paint="4"] { --pa: #a0276f; --pb: #ff4b3a; --pc: #a0276f; --pe: #ff4b3a; --pd: #2a0e2f; --pas: #7a1d7e; --pbs: #b8205a; --pcs: #7a1d7e; --px1: 10%; --py1: 8%; --px2: 90%; --py2: 40%; --px3: 30%; --py3: 100%; --gb: #120e30; --g1: #ffb43f; --g2: #2a1f94; --g3: #ff4b3a; --g1s: #ff4b3a; --g2s: #241a80; --g3s: #b8205a; --gx1: 94%; --gy1: 4%; --gx2: 2%; --gy2: 38%; --gx3: 70%; --gy3: 106%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-5, [data-paint="5"] { --pa: #3b2fd0; --pb: #a0276f; --pc: #3b2fd0; --pe: #a0276f; --pd: #140e35; --pas: #2a1f94; --pbs: #7a1d7e; --pcs: #2a1f94; --px1: 10%; --py1: 8%; --px2: 90%; --py2: 40%; --px3: 30%; --py3: 100%; --gb: #1a0d18; --g1: #ffb43f; --g2: #6b1d4a; --g3: #ff4b3a; --g1s: #ff4b3a; --g2s: #4d1560; --g3s: #b8205a; --gx1: 6%; --gy1: 96%; --gx2: 98%; --gy2: 62%; --gx3: 30%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-6, [data-paint="6"] { --pa: #ffb43f; --pb: #ff4b3a; --pc: #ffb43f; --pe: #ff4b3a; --pd: #4f1b1c; --pas: #ff4b3a; --pbs: #b8205a; --pcs: #ff4b3a; --px1: 88%; --py1: 14%; --px2: 12%; --py2: 62%; --px3: 62%; --py3: 96%; --gb: #150d26; --g1: #2a1f94; --g2: #6b1d4a; --g3: #ff4b3a; --g1s: #241a80; --g2s: #4d1560; --g3s: #b8205a; --gx1: 94%; --gy1: 96%; --gx2: 2%; --gy2: 62%; --gx3: 70%; --gy3: -6%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-7, [data-paint="7"] { --pa: #ff4b3a; --pb: #a0276f; --pc: #ff4b3a; --pe: #a0276f; --pd: #3b0f25; --pas: #b8205a; --pbs: #7a1d7e; --pcs: #b8205a; --px1: 88%; --py1: 14%; --px2: 12%; --py2: 62%; --px3: 62%; --py3: 96%; --gb: #140e2a; --g1: #2a1f94; --g2: #6b1d4a; --g3: #ffb43f; --g1s: #241a80; --g2s: #4d1560; --g3s: #ff4b3a; --gx1: 6%; --gy1: 4%; --gx2: 98%; --gy2: 38%; --gx3: 30%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-8, [data-paint="8"] { --pa: #a0276f; --pb: #3b2fd0; --pc: #a0276f; --pe: #3b2fd0; --pd: #2a0e2f; --pas: #7a1d7e; --pbs: #2a1f94; --pcs: #7a1d7e; --px1: 88%; --py1: 14%; --px2: 12%; --py2: 62%; --px3: 62%; --py3: 96%; --gb: #120e30; --g1: #2a1f94; --g2: #ff4b3a; --g3: #ffb43f; --g1s: #241a80; --g2s: #b8205a; --g3s: #ff4b3a; --gx1: 6%; --gy1: 96%; --gx2: 98%; --gy2: 62%; --gx3: 30%; --gy3: -6%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-9, [data-paint="9"] { --pa: #ff4b3a; --pb: #ffb43f; --pc: #ff4b3a; --pe: #ffb43f; --pd: #3b0f25; --pas: #b8205a; --pbs: #ff4b3a; --pcs: #b8205a; --px1: 88%; --py1: 14%; --px2: 12%; --py2: 62%; --px3: 62%; --py3: 96%; --gb: #1a0d18; --g1: #6b1d4a; --g2: #ff4b3a; --g3: #ffb43f; --g1s: #4d1560; --g2s: #b8205a; --g3s: #ff4b3a; --gx1: 94%; --gy1: 96%; --gx2: 2%; --gy2: 62%; --gx3: 70%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-10, [data-paint="10"] { --pa: #a0276f; --pb: #ff4b3a; --pc: #a0276f; --pe: #ff4b3a; --pd: #2a0e2f; --pas: #7a1d7e; --pbs: #b8205a; --pcs: #7a1d7e; --px1: 88%; --py1: 14%; --px2: 12%; --py2: 62%; --px3: 62%; --py3: 96%; --gb: #150d26; --g1: #6b1d4a; --g2: #ff4b3a; --g3: #2a1f94; --g1s: #4d1560; --g2s: #b8205a; --g3s: #241a80; --gx1: 6%; --gy1: 4%; --gx2: 98%; --gy2: 38%; --gx3: 30%; --gy3: 106%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-11, [data-paint="11"] { --pa: #3b2fd0; --pb: #a0276f; --pc: #3b2fd0; --pe: #a0276f; --pd: #140e35; --pas: #2a1f94; --pbs: #7a1d7e; --pcs: #2a1f94; --px1: 88%; --py1: 14%; --px2: 12%; --py2: 62%; --px3: 62%; --py3: 96%; --gb: #140e2a; --g1: #6b1d4a; --g2: #ffb43f; --g3: #2a1f94; --g1s: #4d1560; --g2s: #ff4b3a; --g3s: #241a80; --gx1: 94%; --gy1: 4%; --gx2: 2%; --gy2: 38%; --gx3: 70%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-12, [data-paint="12"] { --pa: #ffb43f; --pb: #ff4b3a; --pc: #ffb43f; --pe: #ff4b3a; --pd: #4f1b1c; --pas: #ff4b3a; --pbs: #b8205a; --pcs: #ff4b3a; --px1: 16%; --py1: 92%; --px2: 82%; --py2: 30%; --px3: 56%; --py3: 6%; --gb: #120e30; --g1: #ff4b3a; --g2: #2a1f94; --g3: #ffb43f; --g1s: #b8205a; --g2s: #241a80; --g3s: #ff4b3a; --gx1: 94%; --gy1: 96%; --gx2: 2%; --gy2: 62%; --gx3: 70%; --gy3: -6%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-13, [data-paint="13"] { --pa: #ff4b3a; --pb: #a0276f; --pc: #ff4b3a; --pe: #a0276f; --pd: #3b0f25; --pas: #b8205a; --pbs: #7a1d7e; --pcs: #b8205a; --px1: 16%; --py1: 92%; --px2: 82%; --py2: 30%; --px3: 56%; --py3: 6%; --gb: #1a0d18; --g1: #ff4b3a; --g2: #6b1d4a; --g3: #ffb43f; --g1s: #b8205a; --g2s: #4d1560; --g3s: #ff4b3a; --gx1: 6%; --gy1: 4%; --gx2: 98%; --gy2: 38%; --gx3: 30%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-14, [data-paint="14"] { --pa: #a0276f; --pb: #3b2fd0; --pc: #a0276f; --pe: #3b2fd0; --pd: #2a0e2f; --pas: #7a1d7e; --pbs: #2a1f94; --pcs: #7a1d7e; --px1: 16%; --py1: 92%; --px2: 82%; --py2: 30%; --px3: 56%; --py3: 6%; --gb: #150d26; --g1: #ff4b3a; --g2: #6b1d4a; --g3: #2a1f94; --g1s: #b8205a; --g2s: #4d1560; --g3s: #241a80; --gx1: 94%; --gy1: 4%; --gx2: 2%; --gy2: 38%; --gx3: 70%; --gy3: 106%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-15, [data-paint="15"] { --pa: #ff4b3a; --pb: #ffb43f; --pc: #ff4b3a; --pe: #ffb43f; --pd: #3b0f25; --pas: #b8205a; --pbs: #ff4b3a; --pcs: #b8205a; --px1: 16%; --py1: 92%; --px2: 82%; --py2: 30%; --px3: 56%; --py3: 6%; --gb: #140e2a; --g1: #ffb43f; --g2: #6b1d4a; --g3: #2a1f94; --g1s: #ff4b3a; --g2s: #4d1560; --g3s: #241a80; --gx1: 6%; --gy1: 96%; --gx2: 98%; --gy2: 62%; --gx3: 30%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-16, [data-paint="16"] { --pa: #a0276f; --pb: #ff4b3a; --pc: #a0276f; --pe: #ff4b3a; --pd: #2a0e2f; --pas: #7a1d7e; --pbs: #b8205a; --pcs: #7a1d7e; --px1: 16%; --py1: 92%; --px2: 82%; --py2: 30%; --px3: 56%; --py3: 6%; --gb: #120e30; --g1: #2a1f94; --g2: #ffb43f; --g3: #ff4b3a; --g1s: #241a80; --g2s: #ff4b3a; --g3s: #b8205a; --gx1: 6%; --gy1: 4%; --gx2: 98%; --gy2: 38%; --gx3: 30%; --gy3: 106%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-17, [data-paint="17"] { --pa: #3b2fd0; --pb: #a0276f; --pc: #3b2fd0; --pe: #a0276f; --pd: #140e35; --pas: #2a1f94; --pbs: #7a1d7e; --pcs: #2a1f94; --px1: 16%; --py1: 92%; --px2: 82%; --py2: 30%; --px3: 56%; --py3: 6%; --gb: #1a0d18; --g1: #6b1d4a; --g2: #ffb43f; --g3: #ff4b3a; --g1s: #4d1560; --g2s: #ff4b3a; --g3s: #b8205a; --gx1: 94%; --gy1: 4%; --gx2: 2%; --gy2: 38%; --gx3: 70%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-18, [data-paint="18"] { --pa: #ffb43f; --pb: #ff4b3a; --pc: #ffb43f; --pe: #ff4b3a; --pd: #4f1b1c; --pas: #ff4b3a; --pbs: #b8205a; --pcs: #ff4b3a; --px1: 84%; --py1: 88%; --px2: 20%; --py2: 52%; --px3: 38%; --py3: 10%; --gb: #150d26; --g1: #6b1d4a; --g2: #2a1f94; --g3: #ff4b3a; --g1s: #4d1560; --g2s: #241a80; --g3s: #b8205a; --gx1: 6%; --gy1: 96%; --gx2: 98%; --gy2: 62%; --gx3: 30%; --gy3: -6%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-19, [data-paint="19"] { --pa: #ff4b3a; --pb: #a0276f; --pc: #ff4b3a; --pe: #a0276f; --pd: #3b0f25; --pas: #b8205a; --pbs: #7a1d7e; --pcs: #b8205a; --px1: 84%; --py1: 88%; --px2: 20%; --py2: 52%; --px3: 38%; --py3: 10%; --gb: #140e2a; --g1: #6b1d4a; --g2: #2a1f94; --g3: #ffb43f; --g1s: #4d1560; --g2s: #241a80; --g3s: #ff4b3a; --gx1: 94%; --gy1: 96%; --gx2: 2%; --gy2: 62%; --gx3: 70%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-20, [data-paint="20"] { --pa: #a0276f; --pb: #3b2fd0; --pc: #a0276f; --pe: #3b2fd0; --pd: #2a0e2f; --pas: #7a1d7e; --pbs: #2a1f94; --pcs: #7a1d7e; --px1: 84%; --py1: 88%; --px2: 20%; --py2: 52%; --px3: 38%; --py3: 10%; --gb: #120e30; --g1: #ffb43f; --g2: #ff4b3a; --g3: #2a1f94; --g1s: #ff4b3a; --g2s: #b8205a; --g3s: #241a80; --gx1: 94%; --gy1: 4%; --gx2: 2%; --gy2: 38%; --gx3: 70%; --gy3: 106%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-21, [data-paint="21"] { --pa: #ff4b3a; --pb: #ffb43f; --pc: #ff4b3a; --pe: #ffb43f; --pd: #3b0f25; --pas: #b8205a; --pbs: #ff4b3a; --pcs: #b8205a; --px1: 84%; --py1: 88%; --px2: 20%; --py2: 52%; --px3: 38%; --py3: 10%; --gb: #1a0d18; --g1: #ffb43f; --g2: #ff4b3a; --g3: #6b1d4a; --g1s: #ff4b3a; --g2s: #b8205a; --g3s: #4d1560; --gx1: 6%; --gy1: 96%; --gx2: 98%; --gy2: 62%; --gx3: 30%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-paint-22, [data-paint="22"] { --pa: #a0276f; --pb: #ff4b3a; --pc: #a0276f; --pe: #ff4b3a; --pd: #2a0e2f; --pas: #7a1d7e; --pbs: #b8205a; --pcs: #7a1d7e; --px1: 84%; --py1: 88%; --px2: 20%; --py2: 52%; --px3: 38%; --py3: 10%; --gb: #150d26; --g1: #2a1f94; --g2: #ff4b3a; --g3: #6b1d4a; --g1s: #241a80; --g2s: #b8205a; --g3s: #4d1560; --gx1: 94%; --gy1: 96%; --gx2: 2%; --gy2: 62%; --gx3: 70%; --gy3: -6%; --h1: #ffb43f; --h2: #ff4b3a; }
.pk-paint-23, [data-paint="23"] { --pa: #3b2fd0; --pb: #a0276f; --pc: #3b2fd0; --pe: #a0276f; --pd: #140e35; --pas: #2a1f94; --pbs: #7a1d7e; --pcs: #2a1f94; --px1: 84%; --py1: 88%; --px2: 20%; --py2: 52%; --px3: 38%; --py3: 10%; --gb: #140e2a; --g1: #2a1f94; --g2: #ffb43f; --g3: #6b1d4a; --g1s: #241a80; --g2s: #ff4b3a; --g3s: #4d1560; --gx1: 6%; --gy1: 4%; --gx2: 98%; --gy2: 38%; --gx3: 30%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-0 { --pa: #ff4b3a; --pb: #a0276f; --pc: #ff4b3a; --pe: #a0276f; --pd: #3b0f25; --pas: #b8205a; --pbs: #7a1d7e; --pcs: #b8205a; --px1: 10%; --py1: 8%; --px2: 90%; --py2: 40%; --px3: 30%; --py3: 100%; --gb: #1a0d18; --g1: #ff4b3a; --g2: #ffb43f; --g3: #6b1d4a; --g1s: #b8205a; --g2s: #ff4b3a; --g3s: #4d1560; --gx1: 94%; --gy1: 4%; --gx2: 2%; --gy2: 38%; --gx3: 70%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-1 { --pa: #ff4b3a; --pb: #ffb43f; --pc: #ff4b3a; --pe: #ffb43f; --pd: #3b0f25; --pas: #b8205a; --pbs: #ff4b3a; --pcs: #b8205a; --px1: 10%; --py1: 8%; --px2: 90%; --py2: 40%; --px3: 30%; --py3: 100%; --gb: #140e2a; --g1: #ffb43f; --g2: #2a1f94; --g3: #6b1d4a; --g1s: #ff4b3a; --g2s: #241a80; --g3s: #4d1560; --gx1: 94%; --gy1: 96%; --gx2: 2%; --gy2: 62%; --gx3: 70%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-2 { --pa: #3b2fd0; --pb: #a0276f; --pc: #3b2fd0; --pe: #a0276f; --pd: #140e35; --pas: #2a1f94; --pbs: #7a1d7e; --pcs: #2a1f94; --px1: 10%; --py1: 8%; --px2: 90%; --py2: 40%; --px3: 30%; --py3: 100%; --gb: #1a0d18; --g1: #ffb43f; --g2: #6b1d4a; --g3: #ff4b3a; --g1s: #ff4b3a; --g2s: #4d1560; --g3s: #b8205a; --gx1: 6%; --gy1: 96%; --gx2: 98%; --gy2: 62%; --gx3: 30%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-3 { --pa: #ff4b3a; --pb: #a0276f; --pc: #ff4b3a; --pe: #a0276f; --pd: #3b0f25; --pas: #b8205a; --pbs: #7a1d7e; --pcs: #b8205a; --px1: 88%; --py1: 14%; --px2: 12%; --py2: 62%; --px3: 62%; --py3: 96%; --gb: #140e2a; --g1: #2a1f94; --g2: #6b1d4a; --g3: #ffb43f; --g1s: #241a80; --g2s: #4d1560; --g3s: #ff4b3a; --gx1: 6%; --gy1: 4%; --gx2: 98%; --gy2: 38%; --gx3: 30%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-4 { --pa: #ff4b3a; --pb: #ffb43f; --pc: #ff4b3a; --pe: #ffb43f; --pd: #3b0f25; --pas: #b8205a; --pbs: #ff4b3a; --pcs: #b8205a; --px1: 88%; --py1: 14%; --px2: 12%; --py2: 62%; --px3: 62%; --py3: 96%; --gb: #1a0d18; --g1: #6b1d4a; --g2: #ff4b3a; --g3: #ffb43f; --g1s: #4d1560; --g2s: #b8205a; --g3s: #ff4b3a; --gx1: 94%; --gy1: 96%; --gx2: 2%; --gy2: 62%; --gx3: 70%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-5 { --pa: #3b2fd0; --pb: #a0276f; --pc: #3b2fd0; --pe: #a0276f; --pd: #140e35; --pas: #2a1f94; --pbs: #7a1d7e; --pcs: #2a1f94; --px1: 88%; --py1: 14%; --px2: 12%; --py2: 62%; --px3: 62%; --py3: 96%; --gb: #140e2a; --g1: #6b1d4a; --g2: #ffb43f; --g3: #2a1f94; --g1s: #4d1560; --g2s: #ff4b3a; --g3s: #241a80; --gx1: 94%; --gy1: 4%; --gx2: 2%; --gy2: 38%; --gx3: 70%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-6 { --pa: #ff4b3a; --pb: #a0276f; --pc: #ff4b3a; --pe: #a0276f; --pd: #3b0f25; --pas: #b8205a; --pbs: #7a1d7e; --pcs: #b8205a; --px1: 16%; --py1: 92%; --px2: 82%; --py2: 30%; --px3: 56%; --py3: 6%; --gb: #1a0d18; --g1: #ff4b3a; --g2: #6b1d4a; --g3: #ffb43f; --g1s: #b8205a; --g2s: #4d1560; --g3s: #ff4b3a; --gx1: 6%; --gy1: 4%; --gx2: 98%; --gy2: 38%; --gx3: 30%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-7 { --pa: #ff4b3a; --pb: #ffb43f; --pc: #ff4b3a; --pe: #ffb43f; --pd: #3b0f25; --pas: #b8205a; --pbs: #ff4b3a; --pcs: #b8205a; --px1: 16%; --py1: 92%; --px2: 82%; --py2: 30%; --px3: 56%; --py3: 6%; --gb: #140e2a; --g1: #ffb43f; --g2: #6b1d4a; --g3: #2a1f94; --g1s: #ff4b3a; --g2s: #4d1560; --g3s: #241a80; --gx1: 6%; --gy1: 96%; --gx2: 98%; --gy2: 62%; --gx3: 30%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-8 { --pa: #3b2fd0; --pb: #a0276f; --pc: #3b2fd0; --pe: #a0276f; --pd: #140e35; --pas: #2a1f94; --pbs: #7a1d7e; --pcs: #2a1f94; --px1: 16%; --py1: 92%; --px2: 82%; --py2: 30%; --px3: 56%; --py3: 6%; --gb: #1a0d18; --g1: #6b1d4a; --g2: #ffb43f; --g3: #ff4b3a; --g1s: #4d1560; --g2s: #ff4b3a; --g3s: #b8205a; --gx1: 94%; --gy1: 4%; --gx2: 2%; --gy2: 38%; --gx3: 70%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-9 { --pa: #ff4b3a; --pb: #a0276f; --pc: #ff4b3a; --pe: #a0276f; --pd: #3b0f25; --pas: #b8205a; --pbs: #7a1d7e; --pcs: #b8205a; --px1: 84%; --py1: 88%; --px2: 20%; --py2: 52%; --px3: 38%; --py3: 10%; --gb: #140e2a; --g1: #6b1d4a; --g2: #2a1f94; --g3: #ffb43f; --g1s: #4d1560; --g2s: #241a80; --g3s: #ff4b3a; --gx1: 94%; --gy1: 96%; --gx2: 2%; --gy2: 62%; --gx3: 70%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-10 { --pa: #ff4b3a; --pb: #ffb43f; --pc: #ff4b3a; --pe: #ffb43f; --pd: #3b0f25; --pas: #b8205a; --pbs: #ff4b3a; --pcs: #b8205a; --px1: 84%; --py1: 88%; --px2: 20%; --py2: 52%; --px3: 38%; --py3: 10%; --gb: #1a0d18; --g1: #ffb43f; --g2: #ff4b3a; --g3: #6b1d4a; --g1s: #ff4b3a; --g2s: #b8205a; --g3s: #4d1560; --gx1: 6%; --gy1: 96%; --gx2: 98%; --gy2: 62%; --gx3: 30%; --gy3: -6%; --h1: #ff4b3a; --h2: #ffb43f; }
.pk-server-hue-11 { --pa: #3b2fd0; --pb: #a0276f; --pc: #3b2fd0; --pe: #a0276f; --pd: #140e35; --pas: #2a1f94; --pbs: #7a1d7e; --pcs: #2a1f94; --px1: 84%; --py1: 88%; --px2: 20%; --py2: 52%; --px3: 38%; --py3: 10%; --gb: #140e2a; --g1: #2a1f94; --g2: #ffb43f; --g3: #6b1d4a; --g1s: #241a80; --g2s: #ff4b3a; --g3s: #4d1560; --gx1: 6%; --gy1: 4%; --gx2: 98%; --gy2: 38%; --gx3: 30%; --gy3: 106%; --h1: #ff4b3a; --h2: #ffb43f; }
/* paint:generated variants end */

/* ---------------------------------------------------------------- the material: Paint's own values for the glass variables */
body.pk-obsidian {
  --pk-glass-edge: var(--pk-line);
  --pk-glass-edge-soft: transparent;
  --pk-glass-depth: var(--paint-night);
  --pk-glass-chrome: var(--paint-chrome);
  --pk-glass-panel: var(--paint-sheet);
  --pk-glass-control: var(--paint-pane);
  --pk-glass-bevel: 0 0 0 0 transparent;
  --pk-glass-shadow: 0 0 0 0 transparent;
  --pk-ruby-material: var(--paint-fill);
  --pk-ruby-bevel: 0 0 0 0 transparent;
}

/* ---------------------------------------------------------------- D01, D02: the painted ground, a base and three fields, one layer each, under a live grain */
html { background: var(--paint-night); }
body.pk-obsidian .pk-optics { display: none; }
/* The shell draws the ground as one element (renderGround in src/web/paint.ts): the base colour and the centre-lit vignette, then the three fields
   (the Stream's coral, amber and a deep indigo; where they sit and which paint is which comes from the name, pk-paint-N), then the grain. The
   pseudo-elements of the body stay empty. Under Glass this sheet is off and the same element is an empty, unseen block. */
body.pk-obsidian.fs-backdrop::before, body.pk-obsidian.fs-backdrop::after { content: none; }
body.pk-obsidian.fs-backdrop .pk-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  background-color: var(--gb);
  background-image: radial-gradient(92% 67% at 50% 50%, var(--paint-mid, var(--gb)), var(--paint-edge, var(--gb)) 70%);
}
/* A field is three nested boxes, each 120% of the screen (10% over on every side, so a drift never shows an edge): the outer one eases in once,
   the middle one is the lean (one translate3d from ground.js), the inner one holds the gradient and drifts. One transform each, never two on one box. */
body.pk-obsidian .pk-gl { position: absolute; inset: -10%; }
body.pk-obsidian .pk-gl1 { --gi: 0; }
body.pk-obsidian .pk-gl2 { --gi: 1; }
body.pk-obsidian .pk-gl3 { --gi: 2; }
body.pk-obsidian .pk-gt { position: absolute; inset: 0; }
body.pk-obsidian .pk-gt > i { position: absolute; inset: 0; display: block; font-style: normal; }
/* Three fields, never more: coral, amber and a deep indigo, 110 x 70, 100 x 70 and 125 x 72 per cent of the screen, full at their centres and
   gone by 78 to 80 per cent (the owner's choice, 4 October). The box is 120% of the screen, so sizes are divided by 1.2 and centres move in by
   10% before they are divided: the picture at rest is the one the screen had when the ground was a single layer. */
body.pk-obsidian .pk-gl1 > .pk-gt > i { background-image: radial-gradient(calc(110% / 1.2) calc(70% / 1.2) at calc((var(--gx1) + 10%) / 1.2) calc((var(--gy1) + 10%) / 1.2), color-mix(in srgb, color-mix(in srgb, var(--g1) calc(var(--gk) * 100%), var(--g1s)) calc(var(--ga1) * var(--gk) * 1%), transparent) 0%, color-mix(in srgb, var(--g1s) calc(var(--ga1) * var(--gk) * .54%), transparent) 42%, transparent 78%); }
body.pk-obsidian .pk-gl2 > .pk-gt > i { background-image: radial-gradient(calc(100% / 1.2) calc(70% / 1.2) at calc((var(--gx2) + 10%) / 1.2) calc((var(--gy2) + 10%) / 1.2), color-mix(in srgb, color-mix(in srgb, var(--g2) calc(var(--gk) * 100%), var(--g2s)) calc(var(--ga2) * var(--gk) * 1%), transparent) 0%, color-mix(in srgb, var(--g2s) calc(var(--ga2) * var(--gk) * .54%), transparent) 42%, transparent 78%); }
body.pk-obsidian .pk-gl3 > .pk-gt > i { background-image: radial-gradient(calc(125% / 1.2) calc(72% / 1.2) at calc((var(--gx3) + 10%) / 1.2) calc((var(--gy3) + 10%) / 1.2), color-mix(in srgb, color-mix(in srgb, var(--g3) calc(var(--gk) * 100%), var(--g3s)) calc(var(--ga3) * var(--gk) * 1%), transparent) 0%, color-mix(in srgb, var(--g3s) calc(var(--ga3) * var(--gk) * .54%), transparent) 43%, transparent 80%); }
/* The live grain: one box 128 px past the screen on every side (so a jump never shows an edge), a seamless tile of soft white and dark specks
   (scripts/paint-assets.mjs liveGrainPng) at about 6.5% opacity in normal blending: it lies on the ground and under every pane and word, never over them. */
body.pk-obsidian .pk-grain {
  position: absolute;
  inset: -64px;
  opacity: .065;
  background-image: url("/assets/paint/grain-live.png");
  background-size: 128px 128px;
}
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  body.pk-obsidian .pk-grain { background-image: url("/assets/paint/grain-live@2x.png"); background-size: 96px 96px; }
}
html[data-grain="off"] body.pk-obsidian .pk-grain, html[data-save="1"] body.pk-obsidian .pk-grain { display: none; }
html[data-look="matinee"] body.pk-obsidian .pk-grain { opacity: .022; }
/* Grain off (Look page) and under Save-Data: a neutral grey layer leaves the colour as it is on the small painted surfaces (the posters and the tiles keep their own static tooth). */
html[data-grain="off"], html[data-save="1"] { --paint-grain-layer: linear-gradient(#808080, #808080); }
/* Reading pages hold the ground a little quieter: the same painting, less of it. */
body.pk-calm { --gk: .36; }
/* Messages and Settings wear the Stream's own family (coral, amber, indigo: pk-paint-N picked by streamFamilyClass in src/web/paint.ts) at the Stream's
   own strength, so the rooms match (an owner complaint when they did not): the reading-page hold of .36 does not apply to them. */
body.pk-ground-stream { --gk: .5; }
/* A profile wears the person's own painting at about 35% (the Stream is .5), held behind the header (the top of the page) and gone into near-black
   below it, so the tabs, the grid and the foot of the page stand on dark: colour never sits behind the work. The layer scrolls with the page.
   The fade is a plain gradient to the page's own canvas laid over the layers (a mask would need an offscreen copy of all four of them). */
body.pk-ground-profile { --gk: .35; }
body.pk-obsidian.pk-ground-profile.fs-backdrop .pk-ground {
  position: absolute;
  inset: 0 0 auto 0;
  height: max(44vh, 440px);
}
body.pk-obsidian.pk-ground-profile.fs-backdrop .pk-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--pk-canvas) 100%);
}
/* A page that holds a still large keeps a neutral near-black ground: the paint is gone, the grain stays under the picture. */
body.pk-neutral { --gk: 0; --gb: #0c0c0e; --pd: #0c0c0e; }

/* The ground moves only while the page can be seen and is calm: not under reduced motion, Save-Data or Motion: Off (paint-boot.js sets data-motion and
   data-save), and not while the tab is hidden or a stage for media is open (--pk-state, set below). Each field drifts on its own loop of about 52, 68 and 80
   seconds (a leg there and a leg back; three waypoints a leg, equal thirds), so the three never line up and the picture never repeats in any way a person
   would see: about 5% of the screen each way, a scale of 1.00 to 1.08. Transform only.
   The drift is stepped, on a 180 ms grid (a leg is a whole number of grid steps, and each third of it is steps(n) of exactly 180 ms), and the grain below jumps on
   90 ms of the same grid, all started together: the compositor draws a new picture at most 11 times a second, never 60. A field moves about a pixel a step
   at most, in a gradient as wide as the screen, so the eye sees a smooth drift; the screen (and a phone's battery) sees an idle one. The entrance (once when
   the app opens, data-ground-in, set by paint-boot.js) is opacity and scale. */
@keyframes pk-ground-a {
  0% { transform: translate3d(-4%, -3%, 0) scale(1); }
  33.3333% { transform: translate3d(1%, 3.6%, 0) scale(1.04); }
  66.6667% { transform: translate3d(4%, -1.5%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}
@keyframes pk-ground-b {
  0% { transform: translate3d(3.5%, 3%, 0) scale(1.06); }
  33.3333% { transform: translate3d(-3%, -3.5%, 0) scale(1.01); }
  66.6667% { transform: translate3d(-4%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.04); }
}
@keyframes pk-ground-c {
  0% { transform: translate3d(2%, -4%, 0) scale(1.02); }
  33.3333% { transform: translate3d(-4%, 1%, 0) scale(1.07); }
  66.6667% { transform: translate3d(3.5%, 3.5%, 0) scale(1); }
  100% { transform: translate3d(-3%, -1%, 0) scale(1.05); }
}
@keyframes pk-ground-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
/* Ten jumps, every 90 ms (about 11 a second), to places no two of which are within about 20 px of each other on the 96 or the 128 px tile, and no jump
   shorter than about 34 px: the grain looks new each time and never drifts in one direction. Jumps are the only motion: steps(1) holds each place. */
@keyframes pk-grain-live {
  0% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(-59px, -60px, 0); }
  20% { transform: translate3d(0, -26px, 0); }
  30% { transform: translate3d(0, 21px, 0); }
  40% { transform: translate3d(53px, -40px, 0); }
  50% { transform: translate3d(-28px, 10px, 0); }
  60% { transform: translate3d(-14px, 43px, 0); }
  70% { transform: translate3d(-56px, -13px, 0); }
  80% { transform: translate3d(-22px, -11px, 0); }
  90% { transform: translate3d(6px, 44px, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]):not([data-save="1"]) body.pk-obsidian.fs-backdrop .pk-gl1 > .pk-gt > i { animation: pk-ground-a 25920ms steps(48) infinite alternate; animation-play-state: var(--pk-state, running); }
  html:not([data-motion="off"]):not([data-save="1"]) body.pk-obsidian.fs-backdrop .pk-gl2 > .pk-gt > i { animation: pk-ground-b 34020ms steps(63) infinite alternate; animation-play-state: var(--pk-state, running); }
  html:not([data-motion="off"]):not([data-save="1"]) body.pk-obsidian.fs-backdrop .pk-gl3 > .pk-gt > i { animation: pk-ground-c 39960ms steps(74) infinite alternate; animation-play-state: var(--pk-state, running); }
  html[data-ground-in="1"]:not([data-motion="off"]):not([data-save="1"]) body.pk-obsidian.fs-backdrop .pk-gl { animation: pk-ground-in 900ms cubic-bezier(.22, .61, .36, 1) backwards; animation-delay: calc(var(--gi) * 80ms); animation-play-state: var(--pk-state, running); }
  html:not([data-grain="still"]):not([data-grain="off"]):not([data-save="1"]) body.pk-obsidian.fs-backdrop .pk-grain { animation: pk-grain-live .9s steps(1, end) infinite; animation-play-state: var(--pk-state, running); }
}
html[data-hidden="1"] body.pk-obsidian.fs-backdrop .pk-ground { --pk-state: paused; }

/* ---------------------------------------------------------------- chrome: flat, translucent, no bevel */
html body.pk-obsidian :is(.pk-top, .pk-rail, .pk-mobile-nav) {
  background: var(--paint-chrome);
  border-color: var(--pk-line);
  box-shadow: none;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
html body.pk-obsidian .pk-top { border-bottom-color: var(--pk-line); box-shadow: none; }
html body.pk-obsidian .pk-rail { border: 0; border-radius: var(--paint-r-md); }
html body.pk-obsidian .pk-mobile-nav { border: 1px solid var(--pk-line); box-shadow: 0 14px 44px rgba(0, 0, 0, .4); }
html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav a) { color: var(--pk-muted); }
html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav a)[aria-current="page"] { background: transparent; box-shadow: none; color: var(--pk-ink); }
html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav a)[aria-current="page"] :is(.pk-ico, .pk-icon) { color: var(--pk-ink); }
@media (hover: hover) {
  html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav a):hover { background: rgba(255, 255, 255, .08); color: var(--pk-ink); }
}
html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav a):focus-visible { background: rgba(255, 255, 255, .08); color: var(--pk-ink); }
html body.pk-obsidian .pk-account summary,
html body.pk-obsidian .pk-rail > .pk-account summary { background: rgba(255, 255, 255, .06); box-shadow: none; }
html body.pk-obsidian .pk-wordmark span { font-weight: var(--pk-weight-bold); letter-spacing: -.02em; }
/* Plain icon buttons in the header: no tile, no edge. */
html body.pk-obsidian .pk-top :is(.fs-button.pk-icon-action, .pk-header-chat) { background: transparent; border-color: transparent; box-shadow: none; }

/* Menus, sheets and dialogs: one dark pane, a soft blur, no polished rim. */
html body.pk-obsidian #pk-notification-panel,
html body.pk-obsidian :is(.pk-notification-panel, .pk-chat-panel, .pk-invite-dialog, .pk-sheet-panel, .pk-dialog, .pk-confirm, .fs-confirm, .pk-call-card, .pk-claim-card),
html body.pk-obsidian .pk-media-editor > section,
html body.pk-obsidian .pk-media-editor-panel {
  border-color: var(--pk-line);
  background: var(--paint-sheet);
  box-shadow: 0 30px 80px rgba(0, 0, 4, .55);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}
html body.pk-obsidian #suggest-results:not([hidden]),
html body.pk-obsidian :is(.pk-account nav, .pk-join-menu nav, .pk-post-more nav, .pk-creator-more nav, .pk-contact-menu nav, .pk-message-more nav, .pk-profile-post-options nav, .pk-post-menu-list, .pk-chat-emoji) {
  border-color: var(--pk-line);
  background: var(--paint-sheet);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------- D05: flat controls (one fill, one outline, one quiet) */
html body.pk-obsidian .fs-button,
html body.pk-obsidian :is(.pk-submit, .pk-invite-channel, .pk-chat-toggle, .pk-chat-square, .pk-chat-original, .pk-dial-tool, .pk-message-new, .pk-contact-message, .pk-chip, .pk-social-follow, .pk-social-watch, .pk-rail-watch, .pk-rail-follow-link),
html body.pk-obsidian .pk-media-editor button,
html body.pk-obsidian .pk-call-controls button {
  border: 1.5px solid color-mix(in srgb, var(--pk-ink) 46%, transparent);
  /* The outline button carries its own tint: it can stand on any part of the ground, not only on a pane. */
  background: var(--paint-pane);
  color: var(--pk-ink);
  box-shadow: none;
  text-shadow: none;
  font-weight: var(--pk-weight-bold);
}
@media (hover: hover) {
  html body.pk-obsidian :is(.fs-button, .pk-invite-channel, .pk-chat-toggle, .pk-chat-square, .pk-dial-tool, .pk-message-new, .pk-contact-message, .pk-chip):hover:not(:disabled) {
    border-color: var(--pk-ink);
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
  }
}
/* The one fill: flat colour, dark ink, no gradient, no inner light. */
html body.pk-obsidian .fs-button.fs-button--primary:not([aria-pressed="true"]),
html body.pk-obsidian .pk-top .pk-create-action,
html body.pk-obsidian .pk-mobile-nav .pk-mobile-create,
html body.pk-obsidian .pk-join-menu .pk-join-trigger,
html body.pk-obsidian .pk-servers-index .pk-server-create-button,
html body.pk-obsidian .pk-composer .fs-button--primary.pk-composer-share,
html body.pk-obsidian .pk-servers .pk-server-head .pk-server-actions .fs-button--primary,
html body.pk-obsidian :is(.pk-submit, .pk-chat-send, .pk-chat-call, .pk-message-send, .pk-message-call, .pk-message-new, .pk-message-new-button, .pk-reply-send, .pk-stream-new, .pk-invite-channel--share, .pk-compose-dial),
html body.pk-obsidian .pk-media-editor-actions button:last-child,
html body.pk-obsidian .pk-creator-card-follow:not([aria-pressed="true"]),
html body.pk-obsidian .pk-social-follow:not([aria-pressed="true"]),
html body.pk-obsidian .pk-rail-follow .fs-button:not([aria-pressed="true"]),
html body.pk-obsidian .pk-meet-follow .fs-button:not([aria-pressed="true"]),
html body.pk-obsidian .pk-call-controls .pk-call-end {
  border: 0;
  background: var(--paint-fill);
  color: var(--paint-on-fill);
  box-shadow: none;
  text-shadow: none;
  font-weight: var(--pk-weight-bold);
}
@media (hover: hover) {
  html body.pk-obsidian .pk-top .pk-create-action:is(:hover, :focus-visible),
  html body.pk-obsidian .pk-mobile-nav .pk-mobile-create:is(:hover, :focus-visible),
  html body.pk-obsidian .pk-join-menu .pk-join-trigger:is(:hover, :focus-visible),
  html body.pk-obsidian .pk-join-menu[open] .pk-join-trigger,
  html body.pk-obsidian .pk-servers-index .pk-server-create-button:is(:hover, :focus-visible),
  html body.pk-obsidian .pk-composer .fs-button--primary.pk-composer-share:is(:hover, :focus-visible),
  html body.pk-obsidian .fs-button.fs-button--primary:hover:not(:disabled):not([aria-pressed="true"]),
  html body.pk-obsidian .pk-servers .pk-server-head .pk-server-actions .fs-button--primary:hover:not(:disabled),
  html body.pk-obsidian :is(.pk-submit, .pk-chat-send, .pk-chat-call, .pk-message-send, .pk-message-call, .pk-message-new, .pk-message-new-button, .pk-reply-send, .pk-stream-new, .pk-invite-channel--share, .pk-compose-dial):hover:not(:disabled),
  html body.pk-obsidian .pk-media-editor-actions button:last-child:hover:not(:disabled),
  html body.pk-obsidian :is(.pk-creator-card-follow, .pk-social-follow):not([aria-pressed="true"]):hover:not(:disabled),
  html body.pk-obsidian :is(.pk-rail-follow, .pk-meet-follow) .fs-button:not([aria-pressed="true"]):hover:not(:disabled) {
    border: 0;
    background: var(--paint-fill);
    color: var(--paint-on-fill);
    box-shadow: none;
    filter: brightness(1.07);
  }
}
html body.pk-obsidian .pk-top .pk-create-action { border-radius: 999px; }
html body.pk-obsidian .pk-mobile-nav .pk-mobile-create { border-radius: 18px; }
html body.pk-obsidian :is(.pk-top .pk-create-action, .pk-mobile-nav .pk-mobile-create) .pk-new-svg { color: var(--paint-on-fill); filter: none; }
html body.pk-obsidian .pk-top .pk-create-action::after { content: none; }
html body.pk-obsidian .pk-compose-dial { color: var(--paint-on-fill); }
html body.pk-obsidian .pk-servers-index .pk-server-create-button::before { content: none; }
html body.pk-obsidian :is(.fs-button, .pk-submit, .pk-chat-send, .pk-message-send, .pk-chat-call, .pk-message-call):disabled,
html body.pk-obsidian .pk-top .pk-create-action:disabled,
html body.pk-obsidian .pk-mobile-nav .pk-mobile-create:disabled,
html body.pk-obsidian .pk-join-menu .pk-join-trigger:disabled,
html body.pk-obsidian .pk-servers-index .pk-server-create-button:disabled,
html body.pk-obsidian .pk-composer .fs-button--primary.pk-composer-share:disabled,
html body.pk-obsidian .pk-servers .pk-server-head .pk-server-actions .fs-button--primary:disabled,
html body.pk-obsidian .pk-media-editor-actions button:last-child:disabled,
html body.pk-obsidian .pk-creator-card-follow:disabled,
html body.pk-obsidian .pk-social-follow:disabled,
html body.pk-obsidian .pk-rail-follow .fs-button:disabled,
html body.pk-obsidian .pk-meet-follow .fs-button:disabled,
html body.pk-obsidian .pk-call-controls .pk-call-end:disabled {
  border: 1.5px solid var(--pk-line);
  background: rgba(255, 255, 255, .05);
  color: var(--pk-faint);
  box-shadow: none;
  filter: none;
}
/* A followed or watched state is a quiet outline, not a second fill. */
html body.pk-obsidian :is(.pk-social-follow, .pk-creator-card-follow, .pk-rail-follow .fs-button, .pk-meet-follow .fs-button, .fs-button--primary)[aria-pressed="true"] {
  border: 1.5px solid color-mix(in srgb, var(--pk-ink) 46%, transparent);
  background: transparent;
  color: var(--pk-ink);
  box-shadow: none;
  text-shadow: none;
}
/* A pressed one ("Following") stays an outline on hover and press: the shared sheets filled it with the accent and left light ink on it. */
@media (hover: hover) {
  html body.pk-obsidian :is(.pk-social-follow, .pk-creator-card-follow, .pk-rail-follow .fs-button, .pk-meet-follow .fs-button, .fs-button--primary)[aria-pressed="true"]:hover:not(:disabled) { border-color: var(--pk-ink); background: color-mix(in srgb, var(--pk-ink) 8%, transparent); color: var(--pk-ink); box-shadow: none; filter: none; }
}
html body.pk-obsidian :is(.pk-social-follow, .pk-creator-card-follow, .pk-rail-follow .fs-button, .pk-meet-follow .fs-button, .fs-button--primary)[aria-pressed="true"]:active:not(:disabled) { border-color: var(--pk-ink); background: color-mix(in srgb, var(--pk-ink) 14%, transparent); color: var(--pk-ink); box-shadow: none; filter: none; }
html body.pk-obsidian .pk-join-art, html body.pk-obsidian .pk-join-label > span, html body.pk-obsidian .pk-join-chevron { color: currentColor; }
/* The sign-up wall's green is not Paint's: one colour carries action. */
html body.pk-obsidian :is(.pk-inline-auth, .pk-home-join) .pk-email-entry .pk-email-continue { border: 0; background: var(--paint-fill); color: var(--paint-on-fill); box-shadow: none; }
@media (hover: hover) {
  html body.pk-obsidian :is(.pk-inline-auth, .pk-home-join) .pk-email-entry .pk-email-continue:hover:not(:disabled) { border: 0; background: var(--paint-fill); filter: brightness(1.07); }
}
html body.pk-obsidian .pk-home-join-row .fs-button { border: 0; background: var(--paint-fill); color: var(--paint-on-fill); }
html body.pk-obsidian .pk-home-join-row .pk-control:focus { border-color: var(--pk-accent); }

/* Fields: a plain tinted well and the field edge; focus is the shared ring. */
html body.pk-obsidian .pk-control,
html body.pk-obsidian .pk-stage :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), select, textarea),
html body.pk-obsidian .pk-top .pk-search .pk-control,
html body.pk-obsidian .pk-chat-search input,
html body.pk-obsidian .pk-chat-contact-search,
html body.pk-obsidian #main .pk-message-inbox .pk-message-search input[type="search"],
html body.pk-obsidian .pk-composer-journey .pk-composer-caption {
  border-color: var(--pk-line-strong);
  background: rgba(255, 255, 255, .06);
  color: var(--pk-ink);
  box-shadow: none;
}
html body.pk-obsidian :is(input, textarea)::placeholder { color: var(--pk-faint); }
html body.pk-obsidian :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--pk-accent); }
html body.pk-obsidian .pk-top .pk-search::before { background: rgba(255, 255, 255, .06); }

/* ---------------------------------------------------------------- D07: tabs and places read as ink, with a brush stroke under the current one */
html body.pk-obsidian .pk-home-top { background: var(--paint-pane); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: none; }
html body.pk-obsidian :is(.pk-feed-toggle a, .pk-tabs a, .pk-creator-tabs a, .pk-house-purpose a, .pk-house-walls a, .pk-server-channels a, .pk-momentum-tabs a, .pk-momentum-filters a) {
  position: relative;
  color: var(--pk-faint);
}
html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav > a) { position: relative; }
html body.pk-obsidian :is(.pk-feed-toggle a, .pk-creator-tabs a, .pk-house-purpose a, .pk-house-walls a, .pk-server-channels a, .pk-momentum-tabs a, .pk-momentum-filters a, .pk-tabs a)[aria-current]:not([aria-current="false"])::after,
html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav > a)[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 2px;
  height: 7px;
  background: var(--pk-accent);
  -webkit-mask: url("/assets/paint/stroke.svg") center / 100% 100% no-repeat;
  mask: url("/assets/paint/stroke.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
html body.pk-obsidian .pk-mobile-nav > a[aria-current="page"]::after { bottom: 1px; left: 22%; right: 22%; height: 6px; }
html body.pk-obsidian .pk-feed-toggle a { font-size: 1.125rem; font-weight: var(--pk-weight-bold); padding-bottom: 8px; }

/* ---------------------------------------------------------------- D06: tint panes (cards, sheets, menus): colour, not borders */
html body.pk-obsidian :is(.pk-terms-notice, .pk-card, .pk-settings-group, .pk-discovery-filters, .pk-discovery-card, .pk-creator-card, .pk-social-card, .pk-callsheet, .pk-home-onboard, .pk-chat-call-bar, .pk-radio-card, .pk-server-person, .pk-upload-card, .fs-empty, .pk-meet, .pk-rail-module, .pk-relation-card, .pk-compose, section.pk-home-join, .pk-home-join) {
  border: 0;
  border-radius: var(--paint-r-lg);
  background: var(--paint-pane);
  box-shadow: none;
}
html body.pk-obsidian .pk-callsheet { border-left: 0; }
html body.pk-obsidian .pk-stream .pk-feed-item { border-top: 0; }
html body.pk-obsidian .pk-stream .pk-post-feed { gap: 14px; }
html body.pk-obsidian .pk-stream .pk-post-card--feed {
  padding: 4px 18px 6px;
  border: 0;
  border-radius: var(--paint-r-lg);
  background: var(--paint-pane);
}
html body.pk-obsidian .pk-stream .pk-post-card--feed .pk-media--feed { margin-inline: -18px; border-radius: 0; }
html body.pk-obsidian .pk-stream .pk-post-card--feed .pk-media--feed:not(:last-child) { margin-bottom: 0; }
html body.pk-obsidian .pk-stream .pk-engage { margin-inline: -10px; }
html body.pk-obsidian .pk-post-feed > li, html body.pk-obsidian .pk-feed-item { border-color: transparent; }
html body.pk-obsidian .pk-compose-prompt { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--pk-muted); }
html body.pk-obsidian .pk-home .pk-social-card { background: var(--paint-pane); }

/* A grid card (a profile's All tab, a Club's grid) is a pane: its words sit inside it, its chips wrap, its row of counts fits. */
html body.pk-obsidian .pk-post-card--grid { overflow: hidden; }
html body.pk-obsidian .pk-post-card--grid .pk-post-card-body { padding: 10px 12px 8px; }
html body.pk-obsidian .pk-post-card--grid :is(.pk-intent, .pk-status, .pk-screening-mark) { max-width: 100%; white-space: normal; letter-spacing: .05em; line-height: 1.25; overflow-wrap: anywhere; }
html body.pk-obsidian .pk-post-card--grid .pk-post-marks { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 6px; }
html body.pk-obsidian .pk-post-card--grid .pk-engage { flex-wrap: nowrap; justify-content: space-between; gap: 0; margin: 0; padding: 0; }
html body.pk-obsidian .pk-post-card--grid .pk-engage > :is(button, a) { flex: 0 1 auto; min-width: 30px; min-height: 40px; padding-inline: 4px; }

/* A line of words that stands alone on a page (the creators' introduction) sits on a tint, never bare on the paint. */
html body.pk-obsidian .pk-creators-intro { width: fit-content; max-width: 100%; margin: 0 0 14px; padding: 10px 16px; border-radius: var(--paint-r-lg); background: var(--paint-pane); }

/* The words around a feed are on a tint too, never bare on the paint: the answer loop's section ("Waiting for an answer", on Home and a Club's wall),
   a feed's closing note, and the craft chips above Discover's wall. The grey helper lines and small labels were landing on the bright edge of the ground. */
html body.pk-obsidian :is(.pk-waiting, .pk-stream-end, .pk-craft-chips) { border: 0; border-radius: var(--paint-r-lg); background: var(--paint-pane); }
html body.pk-obsidian .pk-waiting { padding: 16px 18px 8px; }
html body.pk-obsidian .pk-stream-end { margin: 14px 0 8px; padding: 22px 18px; }
html body.pk-obsidian .pk-craft-chips { padding: 10px 14px; }
/* The quiet links at the foot of Settings fade, but never below AA (they were .72, which read 3.8:1 on Matinee's paper). */
html body.pk-obsidian .pk-settings-hub .pk-settings-quiet { opacity: .86; }
html body.pk-obsidian .pk-settings-hub .pk-settings-quiet:is(:hover, :focus-within) { opacity: 1; }

/* ---------------------------------------------------------------- D13, D14: people and covers are painted, never initials on grey */
html body.pk-obsidian :is(.pk-avatar--initial, span.pk-house-face, .pk-creator-avatar, .pk-notification-avatar, .pk-conversation-avatar):is(.pk-avatar--initial, span.pk-house-face, [class*="pk-paint-"]),
html body.pk-obsidian :is(.pk-account-avatar, .pk-mobile-avatar)[data-paint] {
  border-color: transparent;
  background-color: var(--pd);
  background-image:
    radial-gradient(circle at 50% 50%, var(--paint-initial-scrim) 0 52%, transparent 84%),
    radial-gradient(circle at var(--px1) var(--py1), var(--pa) 0 34%, color-mix(in srgb, var(--pas) 54%, transparent) 52%, transparent 74%),
    radial-gradient(circle at var(--px2) var(--py2), var(--pb) 0 28%, color-mix(in srgb, var(--pbs) 54%, transparent) 46%, transparent 70%),
    radial-gradient(circle at var(--px3) var(--py3), var(--pc) 0 32%, color-mix(in srgb, var(--pcs) 54%, transparent) 50%, transparent 72%);
  color: var(--pink);
  text-shadow: none;
  box-shadow: none;
  font-weight: var(--pk-weight-bold);
}
html body.pk-obsidian .pk-creator-avatar[class*="pk-paint-"] { border: 4px solid var(--pk-canvas); }
/* The big avatar on a profile is a quiet tile, not a neon one: a dark pool, two soft low-chroma blooms in the shades of its paints, a thin hairline rim. */
html body.pk-obsidian .pk-creator-avatar[class*="pk-paint-"] {
  background-image:
    radial-gradient(circle at 50% 50%, var(--paint-initial-scrim) 0 58%, transparent 92%),
    radial-gradient(circle at var(--px1) var(--py1), color-mix(in srgb, color-mix(in srgb, var(--pas) 55%, var(--pk-muted)) 34%, transparent) 0 24%, transparent 74%),
    radial-gradient(circle at var(--px3) var(--py3), color-mix(in srgb, color-mix(in srgb, var(--pcs) 55%, var(--pk-muted)) 28%, transparent) 0 22%, transparent 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-ink) 12%, transparent);
}
html body.pk-obsidian .pk-creator-avatar[class*="pk-paint-"] .pk-creator-initials { color: var(--pink); }
html body.pk-obsidian .pk-creator-cover--empty[class*="pk-paint-"] { display: none; }

/* A creator's card opens on the same painting as their title card, a strip of it (no text sits on it). */
html body.pk-obsidian .pk-creator-card-strip[class*="pk-paint-"] {
  background-color: var(--pd);
  background-image:
    var(--paint-grain-layer),
    radial-gradient(90% 150% at var(--px1) 0%, color-mix(in srgb, var(--pa) 92%, transparent), color-mix(in srgb, var(--pas) 54%, transparent) 40%, transparent 72%),
    radial-gradient(80% 140% at var(--px2) 100%, color-mix(in srgb, var(--pb) 80%, transparent), color-mix(in srgb, var(--pbs) 54%, transparent) 40%, transparent 70%),
    radial-gradient(90% 150% at var(--px3) 40%, color-mix(in srgb, var(--pc) 86%, transparent), color-mix(in srgb, var(--pcs) 54%, transparent) 40%, transparent 72%);
  background-size: 256px 256px, 100% 100%, 100% 100%, 100% 100%;
  background-blend-mode: overlay, normal, normal, normal;
}

/* ---------------------------------------------------------------- D09, D14: title cards. A Club and a person open as a painted poster. */
html body.pk-obsidian :is(.pk-server-head.pk-house-head, .pk-creator-head)[class*="pk-paint-"] {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--paint-r-lg);
  box-shadow: none;
  background-color: var(--paint-poster-base, var(--pd));
  background-image:
    var(--paint-grain-layer),
    linear-gradient(180deg, var(--paint-veil-a) 0%, var(--paint-veil-b) 40%, var(--paint-veil-c) 100%),
    radial-gradient(80% 110% at var(--px1) var(--py1), color-mix(in srgb, var(--pa) 92%, transparent), color-mix(in srgb, var(--pas) 54%, transparent) 40%, transparent 72%),
    radial-gradient(70% 100% at var(--px2) var(--py2), color-mix(in srgb, var(--pb) 78%, transparent), color-mix(in srgb, var(--pbs) 54%, transparent) 40%, transparent 70%),
    radial-gradient(80% 100% at var(--px3) var(--py3), color-mix(in srgb, var(--pc) 86%, transparent), color-mix(in srgb, var(--pcs) 54%, transparent) 40%, transparent 72%);
  background-size: 256px 256px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-blend-mode: overlay, normal, normal, normal, normal;
}
html body.pk-obsidian .pk-server-head.pk-house-head[class*="pk-paint-"] { max-width: none; margin: 0 0 14px; padding: 22px 20px 24px; gap: 10px; }
html body.pk-obsidian .pk-server-head.pk-house-head[class*="pk-paint-"] .pk-server-cover { margin: -22px -20px 6px; max-height: 190px; border-radius: 0; }
html body.pk-obsidian .pk-creator-head[class*="pk-paint-"] { margin-top: 0; padding: 22px 20px 24px; }
/* A person's cover is the same painting held subtler than a Club's poster: the paints at about 60%, the veil and the base as they were. */
html body.pk-obsidian .pk-creator-head[class*="pk-paint-"] {
  background-image:
    var(--paint-grain-layer),
    linear-gradient(180deg, var(--paint-veil-a) 0%, var(--paint-veil-b) 40%, var(--paint-veil-c) 100%),
    radial-gradient(80% 110% at var(--px1) var(--py1), color-mix(in srgb, var(--pa) 58%, transparent), color-mix(in srgb, var(--pas) 30%, transparent) 40%, transparent 72%),
    radial-gradient(70% 100% at var(--px2) var(--py2), color-mix(in srgb, var(--pb) 48%, transparent), color-mix(in srgb, var(--pbs) 28%, transparent) 40%, transparent 70%),
    radial-gradient(80% 100% at var(--px3) var(--py3), color-mix(in srgb, var(--pc) 52%, transparent), color-mix(in srgb, var(--pcs) 28%, transparent) 40%, transparent 72%);
}
html body.pk-obsidian .pk-creator-head[class*="pk-paint-"] .pk-creator-identity { padding-top: 0; }
html body.pk-obsidian .pk-creator-head[class*="pk-paint-"] .pk-creator-side { padding-top: 0; }
/* A photo wins: the cover stays as the person chose it and the poster slides up over its foot. */
html body.pk-obsidian .pk-creator-cover:not(.pk-creator-cover--empty) + .pk-creator-frame { margin-top: 12px; }
html body.pk-obsidian .pk-creator-cover-shade { background: none; }
/* The name is the poster: a size the width allows, tight, as heavy as the shipped weights go. */
html body.pk-obsidian :is(.pk-server-head.pk-house-head h1, .pk-creator-name) {
  font-size: clamp(1.875rem, 9vw, 2.75rem);
  font-weight: var(--pk-weight-bold);
  letter-spacing: -.04em;
  line-height: 1.02;
  -webkit-text-stroke: .018em currentColor;
}
html body.pk-obsidian .pk-server-head.pk-house-head[class*="pk-paint-"] .pk-server-identity { align-items: flex-start; }
/* "Worked with" is a plain line in the app's one sans, muted, on its own tint: never bare on the paint. */
html body.pk-obsidian .pk-growth-worked, html body.pk-obsidian .pk-growth-brought {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 6px 0 12px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--paint-pane);
  color: var(--pk-muted);
  font-size: var(--pk-type-ui);
  font-style: normal;
  line-height: 1.35;
}
html body.pk-obsidian .pk-growth-brought span { color: var(--pk-muted); }
html body.pk-obsidian .pk-creator-handle { color: var(--pk-muted); }
@media (min-width: 760px) {
  html body.pk-obsidian :is(.pk-server-head.pk-house-head, .pk-creator-head)[class*="pk-paint-"] { padding: 28px 30px 30px; }
  html body.pk-obsidian .pk-server-head.pk-house-head[class*="pk-paint-"] { max-width: 760px; }
}
@media (max-width: 759px) {
  html body.pk-obsidian .pk-server-head.pk-house-head[class*="pk-paint-"] { margin-inline: -16px; border-radius: 0 0 var(--paint-r-lg) var(--paint-r-lg); }
  html body.pk-obsidian .pk-creator-head[class*="pk-paint-"] { margin-inline: -16px; border-radius: 0 0 var(--paint-r-lg) var(--paint-r-lg); }
  html body.pk-obsidian .pk-creator-cover:not(.pk-creator-cover--empty) + .pk-creator-frame .pk-creator-head[class*="pk-paint-"] { border-radius: var(--paint-r-lg); margin-inline: 0; }
}

/* ---------------------------------------------------------------- D10: poster section heads: heavy type on a block of paint */
html body.pk-obsidian :is(.pk-social-head, .pk-meet-head, .pk-house-suggestions > header) {
  min-height: 0;
  margin-bottom: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: var(--paint-r-md);
  background-color: var(--h1);
  background-image: var(--paint-grain-layer);
  background-size: 256px 256px;
  background-blend-mode: overlay;
  color: #170a0c;
}
html body.pk-obsidian :is(.pk-social[data-social-row="houses"] .pk-social-head, .pk-house-suggestions > header) { background-color: var(--h2); }
html body.pk-obsidian :is(.pk-social-head, .pk-meet-head, .pk-house-suggestions > header) :is(h2, a, button) { color: #170a0c; }
html body.pk-obsidian :is(.pk-social-head, .pk-meet-head, .pk-house-suggestions > header) h2 { font-size: 1.375rem; font-weight: var(--pk-weight-bold); letter-spacing: -.03em; line-height: 1.1; }
html body.pk-obsidian :is(.pk-social-head, .pk-meet-head, .pk-house-suggestions > header) a { font-weight: var(--pk-weight-bold); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  html body.pk-obsidian .pk-social-arrows button:hover { background: rgba(23, 10, 12, .14); color: #170a0c; }
}
/* The Home side cards (.pk-rail-module) are plain panes: their heading and rows are set in finish.css (F12b), no colour band. */

/* ---------------------------------------------------------------- D11: slate labels. Metadata in small tracked capitals with tabular figures. */
html body.pk-obsidian :is(.fs-kicker, .pk-server-kicker, .pk-callsheet-kicker, .pk-creator-craft, .pk-intent, .pk-status, .pk-screening-mark, .pk-house-progress, .pk-creator-tab-count, .pk-media-duration) {
  font-size: var(--pk-type-caption);
  font-weight: var(--pk-weight-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
html body.pk-obsidian .pk-creator-craft { font-size: var(--pk-type-meta); color: var(--pk-ink); }
html body.pk-obsidian .pk-callsheet-version { letter-spacing: .02em; }
html body.pk-obsidian :is(.pk-post-author-meta, .pk-creator-counts, .pk-server-meta) { font-variant-numeric: tabular-nums; }
html body.pk-obsidian .pk-intent, html body.pk-obsidian .pk-status { border-radius: 999px; }
html body.pk-obsidian .pk-page-head h1 { font-size: clamp(1.875rem, 8vw, 2.5rem); font-weight: var(--pk-weight-bold); letter-spacing: -.04em; line-height: 1.04; }

/* ---------------------------------------------------------------- D12: words are the app's one sans (the editorial serif is gone, 5 October 2026): size and weight carry the hierarchy */
html body.pk-obsidian :is(.pk-post-text, .pk-post-card-text, .pk-post-card-body, .pk-post-caption-full, .pk-post-body, .pk-creator-bio, .pk-creator-about p, .pk-server-lede, .pk-lede, .pk-comment-body, .pk-house-tile-about, .pk-social-reason, .pk-detail .pk-post-text) {
  font-weight: var(--pk-weight-regular);
  letter-spacing: 0;
}
html body.pk-obsidian :is(.pk-post-text, .pk-post-card-text, .pk-post-card-body, .pk-post-caption-full, .pk-post-body) { font-size: 1.125rem; line-height: 1.5; }
html body.pk-obsidian :is(.pk-creator-bio, .pk-server-lede, .pk-lede) { font-size: 1.0625rem; line-height: 1.5; }
html body.pk-obsidian .pk-stream .pk-post-text { font-size: 1.1875rem; line-height: 1.45; }

/* ---------------------------------------------------------------- D15: the contact-sheet Work grid: three columns, hairline gutters, small frame numbers */
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-grid {
  counter-reset: frame;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-grid > li { position: relative; counter-increment: frame; }
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-grid > li::before {
  content: counter(frame, decimal-leading-zero);
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(8, 5, 12, .62);
  color: #fff8f0;
  font-size: var(--pk-type-caption);
  font-weight: var(--pk-weight-bold);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-card--grid { border: 0; border-radius: 0; background: transparent; padding: 0; }
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-media--grid { border-radius: 0; }
/* A contact sheet is frames: every cell the same square, no chips or counts crowded under it (the post holds those). */
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-grid { align-items: start; }
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-media--grid :is(.pk-media-image, .pk-media-missing) { aspect-ratio: 1; }
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-card--grid .pk-post-card-body { display: none; }
/* The owner's menu is a small disc; the count of a set moves to the other corner so the two never meet. */
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-card--grid .pk-post-menu-button { width: 32px; height: 32px; padding: 0 0 5px; font-size: 1.125rem; }
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-card--grid .pk-media-stack { top: auto; right: 6px; bottom: 6px; }
@media (min-width: 760px) {
  html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Room enough for one line of the caption under each frame, in the slate type. */
  html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-card--grid .pk-post-card-body { display: block; padding: 6px 2px 10px; }
  html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-card--grid .pk-post-card-body > :not(.pk-post-caption) { display: none; }
}

/* ---------------------------------------------------------------- D16: cinematic frames: wide pictures get soft letterbox bars, the duration is a slate chip */
html body.pk-obsidian .pk-media--wide { overflow: hidden; }
html body.pk-obsidian .pk-media--wide::before,
html body.pk-obsidian .pk-media--wide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 7%;
  pointer-events: none;
}
html body.pk-obsidian .pk-media--wide::before { top: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent); }
html body.pk-obsidian .pk-media--wide::after { bottom: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent); }
html body.pk-obsidian :is(.pk-media-stack, .pk-media-duration, .pk-media-pair-mark) { z-index: 2; background: rgba(0, 0, 0, .78); border: 0; border-radius: 6px; color: #fff8f0; box-shadow: none; }
html body.pk-obsidian .pk-media-duration::before { content: "▶"; margin-right: 5px; letter-spacing: 0; }

/* ---------------------------------------------------------------- D08: chunkier icons: a heavier stroke, flat fills where it helps */
html body.pk-obsidian :is(.pk-ico, .pk-icon, .pk-dial-glyph) { stroke-width: 2.3px; }
html body.pk-obsidian .pk-mobile-nav .pk-ico, html body.pk-obsidian .pk-rail .pk-ico { stroke-width: 2.2px; }
html body.pk-obsidian .pk-ico-screening .pk-ico-accent { fill: currentColor; stroke: none; }
html body.pk-obsidian .pk-ico-plus { stroke-width: 2.6px; }

/* ---------------------------------------------------------------- D17: the lit window. One warm lamp, one meaning: someone is home, something is new. */
html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav a)[data-lit="1"] .pk-ico-servers .pk-ico-accent { fill: var(--paint-lamp); stroke: var(--paint-lamp); }
html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav a)[data-lit="1"] .pk-ico-servers { filter: drop-shadow(0 0 5px rgba(255, 180, 63, .55)); }
html body.pk-obsidian #inbox-bell[data-lit="1"] { background-image: radial-gradient(circle at 50% 78%, rgba(255, 180, 63, .42), transparent 62%); }
html body.pk-obsidian :is(.pk-account-avatar, .pk-mobile-avatar)[data-lit="1"] { box-shadow: 0 7px 12px -5px rgba(255, 180, 63, .8); }

html body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav a)[aria-current="page"] .pk-ico-screening .pk-ico-accent { fill: var(--pk-accent); }

/* ---------------------------------------------------------------- D20: Settings, Look (the Theme Lab): its own sheet, look.css, so it reads in Glass too */

/* ---------------------------------------------------------------- room: what the layout never gets wrong (owner, 4 October)
   The bottom bar sits the same distance from both sides of the screen, never wider than it, in five places of 44 px.
   The terms notice sits under the header with clear space on every side. A close button has its own corner and its own space. */
html body.pk-obsidian .pk-mobile-nav {
  box-sizing: border-box;
  left: max(var(--paint-space-edge), env(safe-area-inset-left));
  right: max(var(--paint-space-edge), env(safe-area-inset-right));
  width: auto;
  max-width: calc(100% - 2 * var(--paint-space-edge));
  margin-inline: auto;
  padding-inline: 6px;
}
html body.pk-obsidian .pk-mobile-nav > a { min-width: var(--paint-hit); min-height: var(--paint-hit); }
html body.pk-obsidian .pk-terms-notice { margin: var(--paint-space-edge) var(--paint-space-edge) 0; box-sizing: border-box; max-width: calc(100% - 2 * var(--paint-space-edge)); }
html body.pk-obsidian .pk-home .pk-social-card { padding: calc(var(--paint-hit) + var(--paint-space-clear)) var(--paint-space-edge) var(--paint-space-edge); }
html body.pk-obsidian .pk-social-dismiss { top: 0; right: 0; width: var(--paint-hit); height: var(--paint-hit); padding: 0; }
html body.pk-obsidian .pk-servers-index .pk-server-list:not([data-layout="list"]) .pk-server-tile-link { aspect-ratio: auto; padding-top: 136px; }

html body.pk-obsidian .pk-servers-index .pk-house-directory-layout { margin-left: auto; }
/* The filters and the two layout buttons share a row until the row cannot hold them; then the buttons drop under. */
@media (max-width: 359px) {
  html body.pk-obsidian .pk-servers-index .pk-house-directory-toolbar { flex-wrap: wrap; row-gap: 0; }
}
html body.pk-obsidian .pk-home-top { border-radius: 0 0 var(--paint-r-lg) var(--paint-r-lg); }
/* On the narrowest phones a card of a profile's grid has the whole width: two across leave no room for the row of counts. */
@media (max-width: 359px) {
  html body.pk-obsidian .pk-creator:not([data-tab="work"]) .pk-post-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Momentum's state filters (All, Heard, Working on it, Fixed...) are a row of pills that scrolls sideways; the shared sheets give the row no layout of its own. */
html body.pk-obsidian .pk-momentum-filters { display: flex; gap: 4px; margin: 10px 0 14px; overflow-x: auto; scrollbar-width: none; }
html body.pk-obsidian .pk-momentum-filters::-webkit-scrollbar { display: none; }
html body.pk-obsidian .pk-momentum-filters a { flex: none; display: inline-flex; align-items: center; min-height: var(--paint-hit); padding: 0 14px; font-size: .875rem; font-weight: var(--pk-weight-bold); white-space: nowrap; text-decoration: none; }

/* ---------------------------------------------------------------- Save-Data and reduced transparency: still, flat, no blur */
html[data-save="1"] body.pk-obsidian :is(.pk-top, .pk-rail, .pk-mobile-nav, .pk-home-top, #pk-notification-panel, .pk-notification-panel, .pk-chat-panel, .pk-sheet-panel, .pk-dialog) { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-save="1"] body.pk-obsidian { --paint-chrome: rgba(11, 8, 16, .92); }
@media (prefers-reduced-transparency: reduce) {
  body.pk-obsidian { --paint-chrome: #0f0b16; --paint-pane: #14101c; --paint-pane-hi: #14101c; --paint-sheet: #17121f; }
}
@media (prefers-contrast: more) {
  body.pk-obsidian { --paint-pane: rgba(8, 5, 14, .9); --paint-chrome: rgba(8, 5, 14, .94); }
  body.pk-obsidian.fs-backdrop .pk-ground { --gk: .25; }
  body.pk-obsidian .pk-grain { display: none; }
}
@media (forced-colors: active) {
  body.pk-obsidian.fs-backdrop .pk-ground { display: none; }
}

/* ---------------------------------------------------------------- Matinee (D20, C49): warm paper, ink type, the same paint at low strength.
   The palette tokens are in pk-tokens.css; these are the paint values that follow them. */
html[data-look="matinee"] {
  --paint-night: #f5eee2;
  --paint-mid: #faf5ea;
  --paint-poster-base: #f1e7d6;
  --paint-edge: #f5eee2;
  --ga1: 30; --ga2: 26; --ga3: 28;
  /* Under Matinee every pane, bar and sheet is a solid warm paper: the words sit on paper, never on a translucent tint with the ground showing through. */
  --paint-pane: #fffaf1;
  --paint-pane-hi: #fffcf6;
  --paint-pane-neutral: #fffaf1;
  --paint-ring-halo: rgba(255, 250, 241, .94);
  --paint-chrome: #faf4e9;
  --paint-sheet: #fffaf2;
  --paint-veil-a: rgba(255, 250, 241, .34);
  --paint-veil-b: rgba(255, 250, 241, .5);
  --paint-veil-c: rgba(255, 250, 241, .62);
  --paint-lamp: #c47a0a;
}
html[data-look="matinee"] body.pk-obsidian { background: var(--pk-canvas); --gb: #f5eee2; }
html[data-look="matinee"] body.pk-obsidian .pk-mobile-nav { box-shadow: 0 10px 34px rgba(60, 40, 20, .18); }

/* ---------------------------------------------------------------- D18: spot illustrations in gouache, for the empty and the lost. Still pictures; Save-Data does not fetch them. */
html body.pk-obsidian :is(.pk-stream-empty, .fs-empty, .pk-creator-empty, .pk-server-locked, .pk-error-page .pk-page-head)::before {
  content: "";
  display: block;
  width: 132px;
  height: 99px;
  margin: 0 0 10px;
  background: url("/assets/paint/spot-lamp.svg") left center / contain no-repeat;
}
html body.pk-obsidian .pk-house-directory-empty::before { background-image: url("/assets/paint/spot-window.svg"); }
html body.pk-obsidian .pk-creator-empty::before { background-image: url("/assets/paint/spot-clapper.svg"); flex: 0 0 100%; }
html body.pk-obsidian .pk-home-stream .pk-stream-empty::before { background-image: url("/assets/paint/spot-reel.svg"); }
html body.pk-obsidian .pk-error-page .pk-page-head::before { background-image: url("/assets/paint/spot-strip.svg"); }
html body.pk-obsidian .pk-server-locked::before { background-image: url("/assets/paint/spot-tripod.svg"); }
html body.pk-obsidian :is(.pk-stream-empty, .fs-empty) { text-align: left; }
html[data-save="1"] body.pk-obsidian :is(.pk-stream-empty, .fs-empty, .pk-creator-empty, .pk-server-locked, .pk-error-page .pk-page-head)::before { display: none; }

/* ---------------------------------------------------------------- strips, page heads and the post page: every line of text sits on a tint */
html body.pk-obsidian :is(.pk-page-head, .pk-screening-head, .pk-creators-head, .pk-server-head--index, .pk-relations-head) {
  margin-bottom: 14px;
  padding: 18px 20px;
  border-radius: var(--paint-r-lg);
  background: var(--paint-pane);
}
html body.pk-obsidian .pk-server-head--index { max-width: none; }
html body.pk-obsidian :is(.pk-house-purpose, .pk-creator-tabs, .pk-house-walls, .pk-server-channels, .pk-momentum-tabs, .pk-momentum-filters, .pk-house-directory-toolbar) {
  padding-inline: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--paint-pane);
}
html body.pk-obsidian .pk-house-directory-toolbar { padding-inline: 12px; }
html body.pk-obsidian .pk-detail-bar { background: var(--paint-chrome); border-radius: 0 0 var(--paint-r-md) var(--paint-r-md); }
html body.pk-obsidian :is(.pk-detail-page .pk-post.pk-detail, .pk-detail-comments) {
  padding: 18px;
  border-radius: var(--paint-r-lg);
  background: var(--paint-pane);
}
html body.pk-obsidian .pk-detail-comments { margin-top: 14px; }
html body.pk-obsidian .pk-detail-page .pk-post.pk-detail .pk-media { margin-inline: -18px; }

/* The poster reads in ink: whatever a component made muted is ink on paint. */
html body.pk-obsidian :is(.pk-server-head.pk-house-head, .pk-creator-head)[class*="pk-paint-"] :is(p, span, small, a, summary, strong, li):not(.fs-button):not(.pk-official-mark):not(.pk-server-official):not(.pk-screening-mark):not(.pk-creator-open-dot):not(.pk-creator-initials):not(.pk-house-face):not([class*="pk-paint-"]) { color: var(--pk-ink); }
html body.pk-obsidian :is(.pk-server-head.pk-house-head, .pk-creator-head)[class*="pk-paint-"] .pk-creator-craft { opacity: 1; }
html body.pk-obsidian :is(.pk-server-head.pk-house-head, .pk-creator-head)[class*="pk-paint-"] .fs-button:not(.fs-button--primary) { border-color: var(--pk-ink); color: var(--pk-ink); }

/* The tile of a Club in the directory: its painting, with a floor of shade for the title. */
html body.pk-obsidian .pk-servers-index .pk-server-tile-link { border: 0; border-radius: var(--paint-r-lg); background: var(--paint-pane); box-shadow: none; }
html body.pk-obsidian .pk-servers-index .pk-server-tile-link::after { background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .34) 30%, rgba(0, 0, 0, .76) 52%, rgba(0, 0, 0, .94)); }
html body.pk-obsidian .pk-house-tile-art[class*="pk-server-hue-"] {
  background-color: var(--pd);
  background-image:
    var(--paint-grain-layer),
    radial-gradient(90% 90% at var(--px1) var(--py1), color-mix(in srgb, var(--pa) 92%, transparent), color-mix(in srgb, var(--pas) 54%, transparent) 40%, transparent 72%),
    radial-gradient(80% 80% at var(--px2) var(--py2), color-mix(in srgb, var(--pb) 80%, transparent), color-mix(in srgb, var(--pbs) 54%, transparent) 40%, transparent 70%),
    radial-gradient(90% 90% at var(--px3) var(--py3), color-mix(in srgb, var(--pc) 86%, transparent), color-mix(in srgb, var(--pcs) 54%, transparent) 40%, transparent 72%);
  background-size: 256px 256px, 100% 100%, 100% 100%, 100% 100%;
  background-blend-mode: overlay, normal, normal, normal;
}
html body.pk-obsidian .pk-servers-index .pk-house-tile-art > .pk-house-face { background-color: rgba(8, 5, 12, .56); background-image: none; color: #fff8f0; text-shadow: none; }
html body.pk-obsidian .pk-servers-index .pk-house-tile-badges > span { border: 0; background: rgba(8, 5, 12, .66); box-shadow: none; }

/* Reading pages (settings, inbox, search, guidelines and the rest) are one sheet of tint: the words sit on it, never on the paint. */
html body.pk-obsidian.pk-calm .pk-stage > main#main:not(.pk-detail-page):not(.pk-message-page):not([class*="pk-composer"]) {
  box-sizing: border-box;
  margin-block: 10px 0;
  padding: 20px 18px 28px;
  border-radius: var(--paint-r-lg);
  background: var(--paint-pane);
}
html body.pk-obsidian.pk-calm .pk-stage > main#main:not(.pk-detail-page) :is(.pk-page-head, .pk-screening-head) { margin-bottom: 8px; padding: 0; background: transparent; }
/* Settings lets the Stream's family show through its sheet (a lighter tint than a plain reading page: the words still sit on it, the contrast audit still holds AA). */
html body.pk-obsidian.pk-calm.pk-ground-stream .pk-stage > main#main:not(.pk-detail-page):not(.pk-message-page):not([class*="pk-composer"]) { background: color-mix(in srgb, var(--paint-pane) 76%, transparent); }

/* "Someone's home": the presence dot is the lamp. */
html body.pk-obsidian .pk-presence-dot { border-color: var(--pk-canvas); background: var(--paint-lamp); box-shadow: 0 0 9px rgba(255, 180, 63, .75); }

/* A notification's date is quiet, never fainter than the muted ink (the faint ink is for placeholders and the inactive tab). */
html body.pk-obsidian .pk-inbox-page .pk-inbox-copy time { color: var(--pk-muted); }

/* Chat: the same tints, so a conversation sits on the painted ground like everything else. */
html body.pk-obsidian .pk-message-inbox { background: var(--paint-pane); border-right-color: transparent; box-shadow: none; }
html body.pk-obsidian .pk-message-conversation { background: transparent; }
/* The calls page is a pane too: its filter and its empty line were on the ground itself. */
html body.pk-obsidian .pk-calls-page { margin-block: 14px; border-radius: var(--paint-r-lg); background: var(--paint-pane); }
html body.pk-obsidian :is(.pk-message-thread-head, .pk-message-reply, .pk-chat-compose, .pk-chat-panel > header, .pk-chat-panel > footer) { background: var(--paint-chrome); border-color: var(--pk-line); box-shadow: none; }
html body.pk-obsidian :is(.pk-message-bubble, .pk-chat-message) { border: 0; border-radius: var(--paint-r-md); background: var(--paint-pane-hi); color: var(--pk-ink); box-shadow: none; }
html body.pk-obsidian :is(.pk-message-bubble-own, .pk-chat-message-own) { border: 0; background: var(--paint-fill); color: var(--paint-on-fill); box-shadow: none; }
html body.pk-obsidian :is(.pk-message-bubble-own, .pk-chat-message-own) :is(a, small, time, span) { color: inherit; }
html body.pk-obsidian .pk-conversation-list a[aria-current="page"], html body.pk-obsidian .pk-chat-person.is-active { border-color: transparent; background: rgba(255, 255, 255, .1); box-shadow: none; }

/* ---------------------------------------------------------------- Matinee: the components that paint their own dark colours, brought onto the paper */
html[data-look="matinee"] body.pk-obsidian :is(.pk-wordmark, .pk-wordmark span, .pk-top .pk-icon-action, .pk-header-chat, .pk-spaces-label, .pk-top .pk-ico, .pk-top .pk-search-open) { color: var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-hearted-by a, .pk-status, .pk-creator-card-craft, .pk-post-server, .pk-relation-identity strong, .pk-message-thread-who strong, .pk-conversation-details strong) { color: var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-social-reason, .pk-social-reason > span:not(.pk-house-known), .pk-message-activity, .pk-message-report summary, .pk-conversation-details small, .pk-relation-handle, .pk-post-author-meta, .pk-post-author-meta > span, .pk-inbox-copy, .pk-inbox-copy > span, .pk-creator-empty p, .pk-chat-contacts h2, .pk-message-inbox h2) { color: var(--pk-muted); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-pill, .pk-quick-reply, .pk-reply-bar-avatar, .pk-loop-signal, .pk-reply-box, .pk-comments-form) { background: var(--pk-surface-raised); border-color: var(--pk-line); color: var(--pk-ink); box-shadow: none; }
html[data-look="matinee"] body.pk-obsidian :is(.pk-pill, .pk-quick-reply, .pk-loop-signal) :is(span, small, strong) { color: inherit; }
html[data-look="matinee"] body.pk-obsidian .pk-loop-signal .fs-button { color: var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian .pk-media--text .pk-media-text { color: #f5f2f1; }
html[data-look="matinee"] body.pk-obsidian :is(.pk-message-report button, .pk-message-report label) { color: var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian .pk-intent { color: var(--pk-ink); }
/* The search lists and the plain lists of a page: the shared sheet writes their links in light ink for a dark page. */
html[data-look="matinee"] body.pk-obsidian .pk-stage main > section > ol:not(.pk-wall):not(.pk-creators-grid):not(.pk-server-list) > li > a { color: var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian .pk-stage main > section > ol:not(.pk-wall):not(.pk-creators-grid):not(.pk-server-list) > li > a:hover { color: var(--pk-accent-ink); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-post-more, .pk-creator-more) nav :is(a, button) { color: var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian .pk-creator-more nav :is(a, button):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--pk-ink) 9%, transparent); }

/* Forms were written for a dark page: their labels, legends and quiet lines take the paper's ink. */
html[data-look="matinee"] body.pk-obsidian :is(.pk-field label, .pk-stage form label, .pk-stage fieldset legend, .pk-upload-card strong) { color: var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-share-context-copy small, .pk-share-image-heading small) { color: var(--pk-muted); }
html[data-look="matinee"] body.pk-obsidian .pk-upload-preview { color: var(--pk-ink); }
/* A link with no class of its own takes the accent ink (zero specificity: any component's own colour for its links still wins). */
:where(html[data-look="matinee"] .pk-stage) a:where(:not([class])) { color: var(--pk-accent-ink); }
/* An empty state's heading was written in light ink for a dark page. */
html[data-look="matinee"] body.pk-obsidian .fs-empty h2 { color: var(--pk-ink); }
/* The legal pages draw their links with the browser's own dark-scheme blue; on paper they take the accent ink. */
html[data-look="matinee"] body.pk-obsidian .pk-legal-page a { color: var(--pk-accent-ink); }
/* The notification panel's actions were written for a dark sheet. */
html[data-look="matinee"] body.pk-obsidian .pk-notification-action { border-color: var(--pk-line-strong); background: transparent; color: var(--pk-ink); }


/* Page forms (settings and the like): a tint of their own, no dark slab. */
html body.pk-obsidian .pk-stage > main > form:not(.pk-discovery-filters):not(.pk-composer):not(.pk-discover-search),
html body.pk-obsidian .pk-stage > main > section:not(.pk-reply-bar) > form { border: 0; border-radius: var(--paint-r-lg); background: var(--paint-pane-hi); }
/* (The Look page's form is wrapped, so the page-form rule above does not box it; look.css draws that page.) */
html[data-look="matinee"] body.pk-obsidian :is(.pk-message-meta, .pk-message-thread-who small) { color: var(--pk-muted); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-message-report, .pk-message-report form, .pk-chat-contacts, .pk-contact-link, .pk-post-loop-state, .pk-reply-bar, .pk-reply-bar form) { background: transparent; border-color: var(--pk-line); color: var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-message-report, .pk-chat-contacts) :is(label, button, h2, a, small, strong) { color: var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-conversation-details small, .pk-chat-contacts h2) { color: var(--pk-muted); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-message-bubble-own, .pk-chat-message-own) .pk-message-meta { color: inherit; }

/* ---------------------------------------------------------------- stills stay neutral: a photo is never framed or overlaid in colour (audit 09, NEW-2) */
html body.pk-obsidian .pk-stream .pk-post-card--feed:has(.pk-media) { background: var(--paint-pane-neutral); }
html body.pk-obsidian .pk-detail-page .pk-post.pk-detail:has(.pk-media) { background: var(--paint-pane-neutral); }
html body.pk-obsidian .pk-wall-figure { background: var(--paint-pane-neutral); }
html body.pk-obsidian .pk-creator[data-tab="work"] .pk-post-grid { overflow: hidden; border-radius: var(--paint-r-md); background: var(--paint-media-bg); }
html body.pk-obsidian .pk-media, html body.pk-obsidian .pk-media-video { background-color: var(--paint-media-bg); }
/* Colour never sits behind media (a film-maker grades a picture on neutral near-black): any pane that holds a picture or a clip is
   opaque and neutral, in Paint; and while a full-screen stage for media is open (the Viewer, the editor, the Studio, the camera,
   a call, the composer once it is open) the page's own ground behind it is neutral too. The painted ground lives in the margins, behind the
   chrome and behind panes that hold only words. test/web/paint-look.test.mjs holds every rule below to that. */
html body.pk-obsidian :is(.pk-discovery-card, .pk-callsheet, .pk-card, .pk-meet, .pk-rail-module, .pk-upload-card, .pk-social-card, .pk-compose):has(:is(.pk-media, .pk-media-video, video)) { background: var(--paint-pane-neutral); }
html body.pk-obsidian.fs-backdrop.pk-composing .pk-ground,
html body.pk-obsidian.fs-backdrop:has(:is(.pk-viewer, .pk-media-editor, .pk-studio, .pk-sc, .pk-cl, .pk-call-overlay):not([hidden], [aria-hidden="true"], [inert])) .pk-ground { --gk: 0; --gb: #0c0c0e; --pk-state: paused; }
html body.pk-obsidian .pk-post-card--grid:has(.pk-media) { background: var(--paint-pane-neutral); }

/* ---------------------------------------------------------------- focus stays an outline, in two tones so it reads on any ground (the stroke is only ever "you are here") */
html body.pk-obsidian :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { box-shadow: 0 0 0 7px var(--paint-ring-halo); }
@media (forced-colors: active) {
  html body.pk-obsidian :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { box-shadow: none; }
  html body.pk-obsidian :is(.pk-feed-toggle a, .pk-tabs a, .pk-creator-tabs a, .pk-house-purpose a, .pk-house-walls a, .pk-server-channels a, .pk-momentum-tabs a, .pk-momentum-filters a, .pk-rail a, .pk-mobile-nav > a)[aria-current]:not([aria-current="false"])::after { background: Highlight; }
}
html[data-look="matinee"] body.pk-obsidian .pk-spaces-label::before { background: var(--pk-ink); box-shadow: 0 -5px 0 var(--pk-ink); }
html[data-look="matinee"] body.pk-obsidian .pk-spaces-label::after { background: var(--pk-ink); box-shadow: none; }

/* Initials the browser drew sit above the inbox's own colours. */
html body.pk-obsidian .pk-stage :is(.pk-notification-avatar, .pk-conversation-avatar):is(.pk-notification-avatar, .pk-conversation-avatar):is(.pk-notification-avatar, .pk-conversation-avatar)[class*="pk-paint-"] { color: var(--pink); }
/* Whatever a room puts at its head sits on a tint, never on the bare paint. */
html body.pk-obsidian :is(.pk-server-head:not(.pk-house-head):not(.pk-server-head--index), .pk-creator-empty, .pk-creator-fallback) { padding: 18px 20px; border-radius: var(--paint-r-lg); background: var(--paint-pane); }
html body.pk-obsidian .pk-server-head:not(.pk-house-head) { max-width: none; }
html body.pk-obsidian .pk-server-watch[aria-pressed="true"] .pk-server-watch-on { color: var(--pk-accent-ink); }
html body.pk-obsidian .pk-post-card--grid .pk-post-menu-button { background: rgba(0, 0, 0, .62); color: #fff8f0; }
html body.pk-obsidian .pk-message-report summary { color: var(--pk-ink); }

/* A wall of stills stays dark in Matinee too: its captions are written for a dark frame, and a photograph is judged on dark. */
html[data-look="matinee"] body.pk-obsidian .pk-wall-figure { background: #0b0b0d; }

/* A hover never changes the colour of words (owner, 5 October 2026: hovering a post turned its text white on Matinee's paper). The shared sheets wrote
   `color: #fff` on hover for a dark page; the ink is the ink in every look, and a dark hover fill becomes a faint ink wash under Matinee. */
html body.pk-obsidian :is(.pk-post-card a, .pk-post-author-name a, .pk-post-similar a, .pk-linklike, .pk-helpful, .pk-feed-toggle a, .pk-chip, .pk-tabs a, .pk-wordmark, .pk-home-stream-head > a, .pk-social-arrows button, .pk-social-dismiss, .pk-stream-refresh, .pk-suggest-clear, .pk-message-me, .pk-chip-toggle, .pk-tray-tools button, .pk-chat-back, .pk-chat-record, .pk-chat-block, .pk-chat-safety, .pk-chat-panel > footer a):hover:not(:disabled) { color: var(--pk-ink); }
html body.pk-obsidian .pk-rail a:hover { color: var(--pk-ink); }
html body.pk-obsidian :is(.pk-rail-brand:hover .pk-rail-brand-text strong, .pk-rail-brand:focus-visible .pk-rail-brand-text strong, .pk-rail-now-item a:hover strong) { color: var(--pk-ink); }
@media (hover: hover) { html body.pk-obsidian :is(.pk-engage > button, .pk-engage > a):hover { color: var(--pk-ink); } }
html[data-look="matinee"] body.pk-obsidian :is(.pk-rail a, .pk-mobile-nav a):is(:hover, :focus-visible),
html[data-look="matinee"] body.pk-obsidian :is(.pk-conversation-list a, .pk-chat-person):hover,
html[data-look="matinee"] body.pk-obsidian :is(.pk-chat-panel > header button, .pk-chat-icon-button, .pk-chat-mic, .pk-message-tool, .pk-contact-menu summary, .pk-message-more summary):is(:hover, :focus-visible, [aria-expanded="true"]),
html[data-look="matinee"] body.pk-obsidian .pk-suggest-clear:hover,
html[data-look="matinee"] body.pk-obsidian .pk-engage > :is(button, a):hover {
  background: color-mix(in srgb, var(--pk-ink) 8%, transparent);
  color: var(--pk-ink);
}
html[data-look="matinee"] body.pk-obsidian :is(.pk-contact-menu summary, .pk-message-more summary, .pk-message-tool, .pk-chat-icon-button, .pk-chat-mic) { color: var(--pk-muted); }
/* The top bar's icons have a hover fill the shared sheet writes `!important` (a near-black wash for a dark page, redesign.css): under Matinee the
   dark ink icon sat on it, dark on dark. This one declaration answers it in kind; it is the only !important in this sheet (the sheet test allows it by name). */
@media (hover: hover) { html[data-look="matinee"] body.pk-obsidian .pk-icon-action:hover { background: color-mix(in srgb, var(--pk-ink) 8%, transparent) !important; } }

/* Matinee, cleaned up (owner, 5 October 2026): a painted cover is ONE clean tint of a single hue on warm paper, never a blend of colours behind the words;
   a painted tile is the same single hue with its dark pool for the letter; the tooth of the grain is under a third of Paint's and is gone from every pane. */
html[data-look="matinee"] body.pk-obsidian :is(.pk-server-head.pk-house-head, .pk-creator-head)[class*="pk-paint-"] {
  background-color: var(--paint-pane);
  background-image: radial-gradient(130% 100% at var(--px1) 0%, color-mix(in srgb, var(--pa) 11%, transparent), transparent 74%);
  background-size: 100% 100%;
  background-blend-mode: normal;
}
html[data-look="matinee"] body.pk-obsidian .pk-creator-head[class*="pk-paint-"] { background-image: radial-gradient(130% 100% at var(--px1) 0%, color-mix(in srgb, var(--pa) 11%, transparent), transparent 74%); }
html[data-look="matinee"] body.pk-obsidian :is(.pk-avatar--initial, span.pk-house-face, .pk-creator-avatar, .pk-notification-avatar, .pk-conversation-avatar):is(.pk-avatar--initial, span.pk-house-face, [class*="pk-paint-"]),
html[data-look="matinee"] body.pk-obsidian :is(.pk-account-avatar, .pk-mobile-avatar)[data-paint],
html[data-look="matinee"] body.pk-obsidian .pk-creator-avatar[class*="pk-paint-"] {
  background-color: color-mix(in srgb, var(--pas) 62%, #1a1014);
  background-image:
    radial-gradient(circle at 50% 50%, var(--paint-initial-scrim) 0 52%, transparent 84%),
    radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--pa) 62%, transparent) 0 28%, transparent 76%);
  box-shadow: none;
}
html[data-look="matinee"]:not([data-grain="off"]):not([data-save="1"]) { --paint-grain-layer: url("/assets/paint/grain-matinee.png"); }
/* Settings' sheet is the plain paper pane under Matinee: no ground shows through it. */
html[data-look="matinee"] body.pk-obsidian.pk-calm.pk-ground-stream .pk-stage > main#main:not(.pk-detail-page):not(.pk-message-page):not([class*="pk-composer"]) { background: var(--paint-pane); }