/* ------------------------------------------------------------------ *
 *  Appearance — shared by the landing page and every app built here.
 *
 *  Two independent axes, each a data attribute on <html>:
 *
 *    data-style    classic | temple | stone   materials, texture, ornament
 *    data-palette  brass | ember | … | none   the accent family, and the light
 *
 *  Pages paint with the tokens below rather than literal colours, so they
 *  pick up both axes without knowing either exists. appearance.js stores
 *  the choice and puts it on <html> before first paint.
 *
 *  Images are referenced by path relative to this file: Vite resolves them
 *  for the apps, and build-site.mjs inlines them as data URIs for the
 *  landing page.
 * ------------------------------------------------------------------ */

/* ---------------------------- palettes ---------------------------- *
 * Bare [data-palette] rather than :root[…], so a menu option carrying the
 * attribute previews its own colours through the same tokens. The default
 * block has to come first: it ties with the others on specificity, so
 * source order decides. */

/* Each palette also lights the ground, through four glows set into the
   blue: --sky across the top, --sky-side in the top-right corner, --floor
   rising from the bottom, --floor-side in the bottom-left. Where the light
   comes from is what gives each palette its mood — Brass is lamplight at
   dawn, Ember is coals below, Saffron a sunrise, Citrine hazy noon,
   Verdigris an aurora over deep water, Amethyst twilight. No colour puts
   every one of them out. */

:root,
[data-palette="brass"] {
  --accent-base: #c99a5b;
  --accent-deep-base: #a87c42;
  --second-base: #7fa69c;
  --on-accent-base: #14100a;
  --sky: rgba(201, 154, 91, 0.24);
  --sky-side: rgba(127, 166, 156, 0.16);
  --floor: rgba(0, 0, 0, 0);
  --floor-side: rgba(168, 124, 66, 0.16);
}

[data-palette="ember"] {
  --accent-base: #d8745f;
  --accent-deep-base: #bd5d4f;
  --second-base: #86aeb0;
  --on-accent-base: #170a08;
  --sky: rgba(140, 56, 72, 0.2);
  --sky-side: rgba(0, 0, 0, 0);
  --floor: rgba(216, 116, 95, 0.42);
  --floor-side: rgba(205, 84, 52, 0.28);
}

[data-palette="saffron"] {
  --accent-base: #da8a4f;
  --accent-deep-base: #b86d36;
  --second-base: #86a9a0;
  --on-accent-base: #160e07;
  --sky: rgba(218, 138, 79, 0.38);
  --sky-side: rgba(245, 178, 96, 0.28);
  --floor: rgba(112, 88, 164, 0.2);
  --floor-side: rgba(0, 0, 0, 0);
}

[data-palette="citrine"] {
  --accent-base: #d6bf66;
  --accent-deep-base: #b09a43;
  --second-base: #86ada6;
  --on-accent-base: #15130a;
  --sky: rgba(214, 191, 102, 0.34);
  --sky-side: rgba(236, 222, 150, 0.2);
  --floor: rgba(90, 140, 110, 0.18);
  --floor-side: rgba(214, 191, 102, 0.1);
}

[data-palette="verdigris"] {
  --accent-base: #6fb49b;
  --accent-deep-base: #4f957d;
  --second-base: #cfa46a;
  --on-accent-base: #08130f;
  --sky: rgba(90, 170, 150, 0.18);
  --sky-side: rgba(80, 200, 175, 0.4);
  --floor: rgba(40, 92, 156, 0.4);
  --floor-side: rgba(111, 180, 155, 0.14);
}

[data-palette="amethyst"] {
  --accent-base: #a98fd6;
  --accent-deep-base: #876db8;
  --second-base: #86b3ae;
  --on-accent-base: #110c1a;
  --sky: rgba(169, 143, 214, 0.38);
  --sky-side: rgba(212, 126, 172, 0.26);
  --floor: rgba(100, 80, 190, 0.24);
  --floor-side: rgba(212, 126, 172, 0.14);
}

/* All four glows out. What is left is the ground's own gradient and
   pewter for the accents — the page still has hierarchy and focus rings,
   it just stops being lit from anywhere. Useful on a bright screen, and
   it is what Stone looks like unquarried. */
[data-palette="none"] {
  --accent-base: #b7bec7;
  --accent-deep-base: #8c959f;
  --second-base: #93a1a8;
  --on-accent-base: #101418;
  --sky: rgba(0, 0, 0, 0);
  --sky-side: rgba(0, 0, 0, 0);
  --floor: rgba(0, 0, 0, 0);
  --floor-side: rgba(0, 0, 0, 0);
}

/* Registered, so switching palettes crossfades the light rather than
   snapping it. Where @property is unsupported the switch is just instant. */
@property --sky {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --sky-side {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --floor {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --floor-side {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

:root {
  transition:
    --sky 0.9s ease,
    --sky-side 0.9s ease,
    --floor 0.9s ease,
    --floor-side 0.9s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    transition: none;
  }
}

/* ----------------------------- classic ----------------------------- */

:root {
  color-scheme: dark;

  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --ink: #0f1418;
  --line: #26333b;
  --moon: #dee6e9;
  --mute: #7b8c95;

  --accent: var(--accent-base);
  --accent-deep: var(--accent-deep-base);
  --second: var(--second-base);
  --on-accent: var(--on-accent-base);

  --panel-color: rgba(255, 255, 255, 0.035);
  --panel-texture: none;
  --panel-radius: 14px;
  --panel-shadow: none;
  --control-color: rgba(255, 255, 255, 0.04);
  --control-radius: 10px;
  --control-radius-sm: 8px;
  --grain: none;
  --raised: none;

  --display-caps: normal;
  --display-tracking: 0.02em;
  --engrave: none;

  /* One easing for everything that opens and closes. */
  --sig-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html {
  background: var(--ink);
}

/* The ground is a fixed layer rather than a body background, so it never
   scrolls away or repeats down a long page. z-index -1 on an unpositioned
   body paints above the canvas and below every in-flow element — pages
   need no z-index of their own, only no opaque background on body. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(90% 60% at 50% -18%, var(--sky), transparent 72%),
    radial-gradient(55% 45% at 96% -8%, var(--sky-side), transparent 70%),
    radial-gradient(100% 55% at 50% 118%, var(--floor), transparent 72%),
    radial-gradient(60% 50% at -8% 108%, var(--floor-side), transparent 70%),
    radial-gradient(120% 80% at 50% -10%, #17222a 0%, #0f1418 55%, #0b1013 100%);
}

.sig-panel {
  position: relative;
}

.sig-display {
  font-variant-caps: var(--display-caps);
  letter-spacing: var(--display-tracking);
  text-shadow: var(--engrave);
}

.sig-rule {
  display: none;
}

/* ------------------------------ temple ------------------------------ *
 * The same pages, found centuries later under a rainforest canopy. The
 * blue ground turns to wet stone with light falling through in shafts;
 * panels become weathered slabs with a carved inner frame and ivy along
 * one edge; lianas hang from the top corners and moss takes the foot of
 * the page. Accents age toward patinated metal instead of changing hue,
 * so every palette still reads as itself. */

:root[data-style="temple"] {
  --ink: #0b1312;
  --line: #2e3c35;
  --moon: #e4dfcf;
  --mute: #8d9788;

  --accent: color-mix(in oklab, var(--accent-base) 82%, #8f8a6a);
  --accent-deep: color-mix(in oklab, var(--accent-deep-base) 82%, #6a654e);
  --second: color-mix(in oklab, var(--second-base) 78%, #86a070);

  --panel-color: rgba(28, 38, 34, 0.84);
  --panel-texture:
    radial-gradient(140% 80% at 0% 100%, rgba(86, 122, 70, 0.2), transparent 50%),
    linear-gradient(180deg, rgba(227, 221, 203, 0.035), transparent 40%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%20%3C!--%20Temple%20style%3A%20fine%20stone%20grain%20for%20panels%20and%20buttons%2C%20where%20mottling%20would%20hurt%20legibility.%20Tiles%20seamlessly.%20--%3E%20%3Cfilter%20id%3D%22grain%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20seed%3D%225%22%20stitchTiles%3D%22stitch%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.88%200%200%200%200%200.86%200%200%200%200%200.76%200%200%200%200.12%200%22%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url(%23grain)%22%2F%3E%20%3C%2Fsvg%3E");
  --panel-radius: 11px 17px 13px 19px / 15px 11px 18px 13px;
  --panel-shadow:
    inset 0 0 0 3px rgba(5, 9, 8, 0.38), inset 0 0 0 4px rgba(227, 221, 203, 0.07),
    inset 0 -14px 22px -16px rgba(0, 0, 0, 0.55), 0 24px 44px -28px rgba(0, 0, 0, 0.95);
  --control-color: rgba(227, 221, 203, 0.045);
  --control-radius: 7px 11px 8px 12px;
  --control-radius-sm: 5px 8px 6px 9px;
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%20%3C!--%20Temple%20style%3A%20fine%20stone%20grain%20for%20panels%20and%20buttons%2C%20where%20mottling%20would%20hurt%20legibility.%20Tiles%20seamlessly.%20--%3E%20%3Cfilter%20id%3D%22grain%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20seed%3D%225%22%20stitchTiles%3D%22stitch%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.88%200%200%200%200%200.86%200%200%200%200%200.76%200%200%200%200.12%200%22%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url(%23grain)%22%2F%3E%20%3C%2Fsvg%3E");
  --raised:
    inset 0 1px 0 rgba(255, 246, 220, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 12px 26px -16px rgba(0, 0, 0, 0.95);

  --display-caps: small-caps;
  --display-tracking: 0.07em;
  --engrave: 0 1px 0 rgba(0, 0, 0, 0.75), 0 -1px 0 rgba(255, 244, 214, 0.07);
}

/* The palette's glows sit over the stone, so the texture doesn't dim them:
   coloured light through the canopy above, and below it reads as
   torchlight on the temple floor. */
:root[data-style="temple"] body::before {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%20%3C!--%20Temple%20style%3A%20light%20falling%20through%20the%20canopy%2C%20fading%20before%20it%20reaches%20the%20floor.%20--%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22fall%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23dfeab8%22%20stop-opacity%3D%220.085%22%2F%3E%20%3Cstop%20offset%3D%220.75%22%20stop-color%3D%22%23dfeab8%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FlinearGradient%3E%20%3Cfilter%20id%3D%22soft%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.2%22%2F%3E%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22url(%23fall)%22%20filter%3D%22url(%23soft)%22%3E%20%3Cpolygon%20points%3D%2212%2C0%2021%2C0%2045%2C100%2030%2C100%22%2F%3E%20%3Cpolygon%20points%3D%2229%2C0%2032%2C0%2053%2C100%2047%2C100%22%2F%3E%20%3Cpolygon%20points%3D%2255%2C0%2062%2C0%2084%2C100%2072%2C100%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat,
    radial-gradient(90% 60% at 50% -18%, var(--sky), transparent 72%),
    radial-gradient(55% 45% at 96% -8%, var(--sky-side), transparent 70%),
    radial-gradient(100% 55% at 50% 118%, var(--floor), transparent 72%),
    radial-gradient(60% 50% at -8% 108%, var(--floor-side), transparent 70%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22480%22%20viewBox%3D%220%200%20480%20480%22%3E%20%3C!--%20Temple%20style%3A%20weathered%20stone.%20Slow%20moss-green%20mottling%20under%20a%20fine%20grain%3B%20tiles%20seamlessly.%20--%3E%20%3Cfilter%20id%3D%22mottle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.012%22%20numOctaves%3D%223%22%20seed%3D%2211%22%20stitchTiles%3D%22stitch%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.3%200%200%200%200%200.44%200%200%200%200%200.3%200.35%200%200%200%20-0.15%22%2F%3E%20%3C%2Ffilter%3E%20%3Cfilter%20id%3D%22grain%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20seed%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.88%200%200%200%200%200.86%200%200%200%200%200.76%200%200%200%200.11%200%22%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20width%3D%22480%22%20height%3D%22480%22%20filter%3D%22url(%23mottle)%22%2F%3E%20%3Crect%20width%3D%22480%22%20height%3D%22480%22%20filter%3D%22url(%23grain)%22%2F%3E%20%3C%2Fsvg%3E") 0 0 / 480px 480px,
    radial-gradient(60% 40% at 18% -4%, rgba(104, 146, 90, 0.2), transparent 70%),
    radial-gradient(50% 35% at 86% -2%, rgba(104, 146, 90, 0.12), transparent 70%),
    radial-gradient(120% 80% at 50% -10%, #16231f 0%, #0c1413 55%, #080d0d 100%);
}

:root[data-style="temple"] body::after {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22460%22%20viewBox%3D%220%200%20360%20460%22%3E%20%3C!--%20Temple%20style%3A%20lianas%20hanging%20from%20the%20top-left%20corner%2C%20behind%20the%20page%20content.%20--%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22l%22%20d%3D%22M0%200C5-7%2015-9%2025-1C16%207%206%207%200%200Z%22%2F%3E%20%3Cpath%20id%3D%22h%22%20d%3D%22M0%200C-4-2-12%202-12%2010C-12%2018-4%2024%200%2030C4%2024%2012%2018%2012%2010C12%202%204-2%200%200Z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%232c422e%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20stroke-width%3D%223.2%22%20d%3D%22M-12%2016C48%2050%20118%2060%20188%2032S300%206%20372%2024%22%2F%3E%20%3Cpath%20stroke-width%3D%222.4%22%20d%3D%22M44%2026C36%2086%2072%20134%2060%20204S32%20300%2046%20370S38%20430%2042%20460%22%2F%3E%20%3Cpath%20stroke-width%3D%222%22%20d%3D%22M132%2050C140%2094%20114%20134%20124%20180S146%20232%20134%20272%22%2F%3E%20%3Cpath%20stroke-width%3D%221.6%22%20d%3D%22M232%2022C228%2052%20246%2078%20238%20112S228%20150%20236%20170%22%2F%3E%20%3Cpath%20stroke-width%3D%221.1%22%20d%3D%22M60%20204c10%206%2019%201%2017-7s-11-6-10%201%22%2F%3E%20%3Cpath%20stroke-width%3D%221.1%22%20d%3D%22M124%20180c-10%204-17-2-13-9s11-3%208%203%22%2F%3E%20%3Cpath%20stroke-width%3D%221.1%22%20d%3D%22M134%20272c6%208%201%2016-6%2014s-4-10%201-8%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%233b5635%22%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(10%2024)%20rotate(100)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(60%2044)%20rotate(115)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(136%2046)%20rotate(80)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(212%2023)%20rotate(110)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(279%2011)%20rotate(70)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(345%2019)%20rotate(110)%20scale(.75)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(47%2080)%20rotate(35)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(59%20160)%20rotate(150)%20scale(1.1)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(52%20245)%20rotate(45)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(42%20335)%20rotate(145)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(46%20425)%20rotate(60)%20scale(.7)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(131%2095)%20rotate(145)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(123%20150)%20rotate(150)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(137%20242)%20rotate(35)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(238%2080)%20rotate(35)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(232%20150)%20rotate(40)%20scale(.7)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%234b6b41%22%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(35%2037)%20rotate(75)%20scale(1.05)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(110%2049)%20rotate(105)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(188%2032)%20rotate(65)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(258%2012)%20rotate(115)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(323%2014)%20rotate(80)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(45%2050)%20rotate(150)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(55%20130)%20rotate(40)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(58%20215)%20rotate(140)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(45%20275)%20rotate(150)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(45%20365)%20rotate(40)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(43%20452)%20rotate(95)%20scale(.6)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(133%2070)%20rotate(40)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(126%20125)%20rotate(35)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(126%20195)%20rotate(40)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(134%20265)%20rotate(120)%20scale(.7)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(234%2045)%20rotate(150)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(236%20120)%20rotate(145)%20scale(.75)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(236%20168)%20rotate(95)%20scale(.6)%22%2F%3E%20%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate(60%20204)%20rotate(-20)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate(46%20370)%20rotate(15)%20scale(.7)%22%2F%3E%20%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate(124%20180)%20rotate(10)%20scale(.7)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%235d7d4b%22%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(84%2047)%20rotate(70)%20scale(1.1)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(162%2040)%20rotate(120)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(236%2016)%20rotate(75)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(300%2011)%20rotate(105)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(50%20100)%20rotate(145)%20scale(1.05)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(61%20185)%20rotate(30)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(42%20305)%20rotate(35)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(47%20395)%20rotate(150)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(134%20215)%20rotate(145)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(22%2030)%20rotate(-30)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(98%2050)%20rotate(-40)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(175%2036)%20rotate(-20)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(268%2011)%20rotate(-35)%20scale(.7)%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") left top / min(52vw, 360px) auto no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22380%22%20viewBox%3D%220%200%20300%20380%22%3E%20%3C!--%20Temple%20style%3A%20an%20aerial%20root%20and%20lianas%20at%20the%20top-right%20corner%2C%20behind%20the%20page%20content.%20--%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22l%22%20d%3D%22M0%200C5-7%2015-9%2025-1C16%207%206%207%200%200Z%22%2F%3E%20%3Cpath%20id%3D%22h%22%20d%3D%22M0%200C-4-2-12%202-12%2010C-12%2018-4%2024%200%2030C4%2024%2012%2018%2012%2010C12%202%204-2%200%200Z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20stroke%3D%22%23243629%22%20stroke-width%3D%225%22%20d%3D%22M302-4C288%2080%20306%20160%20292%20240S296%20340%20304%20384%22%2F%3E%20%3Cg%20stroke%3D%22%232c422e%22%3E%20%3Cpath%20stroke-width%3D%223%22%20d%3D%22M312%2010C250%2040%20190%2044%20140%2022S60%208-8%2030%22%2F%3E%20%3Cpath%20stroke-width%3D%222.4%22%20d%3D%22M262%2030C272%2090%20244%20140%20254%20200S276%20270%20262%20330%22%2F%3E%20%3Cpath%20stroke-width%3D%221.6%22%20d%3D%22M188%2040C182%2070%20198%2096%20190%20128%22%2F%3E%20%3Cpath%20stroke-width%3D%221.1%22%20d%3D%22M254%20200c-10%205-18%200-15-7s11-4%209%202%22%2F%3E%20%3Cpath%20stroke-width%3D%221.1%22%20d%3D%22M190%20128c8%205%2014%200%2011-6s-9-3-7%202%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%233b5635%22%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(266%2028)%20rotate(75)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(222%2036)%20rotate(70)%20scale(1.05)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(179%2034)%20rotate(80)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(122%2016)%20rotate(105)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(73%2010)%20rotate(70)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(18%2022)%20rotate(110)%20scale(.7)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(262%2090)%20rotate(145)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(254%20150)%20rotate(150)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(258%20215)%20rotate(145)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(264%20305)%20rotate(40)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(190%2090)%20rotate(35)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(298%2070)%20rotate(150)%20scale(.6)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(300%20170)%20rotate(140)%20scale(.55)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(294%20260)%20rotate(150)%20scale(.6)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%234b6b41%22%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(290%2018)%20rotate(110)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(244%2034)%20rotate(115)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(200%2036)%20rotate(110)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(158%2029)%20rotate(115)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(106%2011)%20rotate(75)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(55%2012)%20rotate(105)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(263%2055)%20rotate(40)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(257%20125)%20rotate(35)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(254%20180)%20rotate(40)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(267%20275)%20rotate(150)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(262%20328)%20rotate(100)%20scale(.65)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(189%2060)%20rotate(145)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(190%20127)%20rotate(90)%20scale(.6)%22%2F%3E%20%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate(254%20200)%20rotate(-10)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate(140%2024)%20rotate(5)%20scale(.7)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%235d7d4b%22%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(140%2022)%20rotate(65)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(89%209)%20rotate(110)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(37%2016)%20rotate(80)%20scale(.75)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(265%20245)%20rotate(35)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(191%20115)%20rotate(150)%20scale(.7)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(250%2031)%20rotate(-150)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(170%2033)%20rotate(-140)%20scale(.75)%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") right top / min(42vw, 300px) auto no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%2296%22%20viewBox%3D%220%200%20480%2096%22%3E%20%3C!--%20Temple%20style%3A%20moss%2C%20ferns%20and%20fallen%20masonry%20along%20the%20foot%20of%20the%20page.%20Tiles%20horizontally.%20--%3E%20%3Cpath%20fill%3D%22%23141f1a%22%20d%3D%22M0%2096V70C40%2058%2080%2066%20120%2068S200%2054%20250%2060S340%2074%20380%2066S450%2058%20480%2070V96Z%22%2F%3E%20%3Cg%20fill%3D%22%231b2824%22%3E%20%3Crect%20x%3D%22168%22%20y%3D%2262%22%20width%3D%2240%22%20height%3D%2226%22%20rx%3D%224%22%20transform%3D%22rotate(-6%20188%2075)%22%2F%3E%20%3Crect%20x%3D%22206%22%20y%3D%2270%22%20width%3D%2228%22%20height%3D%2220%22%20rx%3D%223%22%20transform%3D%22rotate(8%20220%2080)%22%2F%3E%20%3Crect%20x%3D%22404%22%20y%3D%2264%22%20width%3D%2234%22%20height%3D%2224%22%20rx%3D%224%22%20transform%3D%22rotate(4%20421%2076)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%232b4230%22%3E%20%3Cellipse%20cx%3D%22186%22%20cy%3D%2263%22%20rx%3D%2218%22%20ry%3D%224%22%2F%3E%20%3Cellipse%20cx%3D%22420%22%20cy%3D%2265%22%20rx%3D%2214%22%20ry%3D%223.5%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%232c4431%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M90%2070Q84%2050%2066%2040M90%2070Q88%2044%2080%2026M90%2070Q96%2046%20108%2032M90%2070Q102%2056%20124%2050M90%2070Q78%2060%2058%2058%22%2F%3E%20%3Cpath%20d%3D%22M300%2064Q294%2046%20278%2036M300%2064Q299%2040%20292%2024M300%2064Q306%2042%20318%2030M300%2064Q311%2052%20332%2046M300%2064Q289%2055%20270%2054%22%2F%3E%20%3Cpath%20d%3D%22M452%2070Q448%2056%20436%2048M452%2070Q452%2052%20446%2040M452%2070Q458%2054%20468%2046%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20fill%3D%22%2318251e%22%20d%3D%22M0%2096V82C50%2076%20100%2084%20150%2080S250%2074%20300%2080S400%2086%20480%2082V96Z%22%2F%3E%20%3C%2Fsvg%3E") left bottom / 480px auto repeat-x;
  opacity: 0.85;
}

/* Ivy along the top edge of each panel, alternating sides. */
:root[data-style="temple"] .sig-panel::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 16px;
  width: min(58%, 230px);
  aspect-ratio: 220 / 34;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%2234%22%20viewBox%3D%220%20-4%20220%2034%22%3E%20%3C!--%20Temple%20style%3A%20ivy%20creeping%20along%20the%20top%20edge%20of%20a%20panel.%20--%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22l%22%20d%3D%22M0%200C4-5%2011-6%2018-1C11%205%204%205%200%200Z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2334502f%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20d%3D%22M0%2014C30%206%2050%2022%2080%2014S130%206%20160%2014S200%2020%20220%2012%22%2F%3E%20%3Cg%20fill%3D%22%234b6b41%22%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(8%2013)%20rotate(-60)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(32%2013)%20rotate(-50)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(59%2016)%20rotate(-45)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(88%2012)%20rotate(-55)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(112%208.5)%20rotate(-50)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(139%209.5)%20rotate(-45)%20scale(.75)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(168%2016)%20rotate(-50)%20scale(.65)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(196%2019)%20rotate(-45)%20scale(.5)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%235d7d4b%22%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(21%2012)%20rotate(45)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(46%2015)%20rotate(55)%20scale(.95)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(72%2015)%20rotate(50)%20scale(.9)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(101%209.5)%20rotate(50)%20scale(.85)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(126%208.5)%20rotate(55)%20scale(.8)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(152%2012)%20rotate(50)%20scale(.7)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(182%2018)%20rotate(50)%20scale(.6)%22%2F%3E%20%3Cuse%20href%3D%22%23l%22%20transform%3D%22translate(208%2017)%20rotate(40)%20scale(.45)%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

:root[data-style="temple"] .sig-panel:nth-of-type(even)::before {
  left: auto;
  right: 16px;
  transform: scaleX(-1);
}

/* A carved fret band, used as a divider under page titles. */
:root[data-style="temple"] .sig-rule {
  display: block;
  height: 12px;
  background-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2012%22%3E%20%3C!--%20Temple%20style%3A%20one%20unit%20of%20a%20stepped%20fret%2C%20used%20as%20a%20mask%20and%20repeated%20into%20a%20carved%20band.%20--%3E%20%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20d%3D%22M0%2011H24M0%201H24M3%2011V4H15V8H8V6%22%2F%3E%20%3C%2Fsvg%3E") 0 50% / auto 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2012%22%3E%20%3C!--%20Temple%20style%3A%20one%20unit%20of%20a%20stepped%20fret%2C%20used%20as%20a%20mask%20and%20repeated%20into%20a%20carved%20band.%20--%3E%20%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20d%3D%22M0%2011H24M0%201H24M3%2011V4H15V8H8V6%22%2F%3E%20%3C%2Fsvg%3E") 0 50% / auto 100% repeat-x;
  opacity: 0.8;
}

/* ------------------------------ stone ------------------------------ *
 * Not the jungle's ruin — the monument before it. A hall of coursed
 * ashlar, quarried dry and cut square: every joint a groove with a lit
 * lower lip, panels dressed with the point chisel and given an incised
 * inner margin, titles cut into the face rather than raised off it.
 * Nothing grows here, so where Temple softened its corners this squares
 * them, and where Temple aged the accents green this dries them toward
 * mineral pigment.
 *
 * The palette does two jobs at once. Its glows become the light that gets
 * into a windowless room — a shaft from the ceiling, a doorway off to one
 * side, a pool thrown back off the floor. And it colours the mineral veins
 * running through the wall itself, so the choice is in the stone and not
 * only in what falls on it. At No colour the light goes out and the veins
 * revert to plain quartz. */

:root[data-style="stone"] {
  --ink: #13161b;
  --line: #383e48;
  --moon: #dee3ea;
  --mute: #8a919d;

  --accent: color-mix(in oklab, var(--accent-base) 86%, #b4bcc7);
  --accent-deep: color-mix(in oklab, var(--accent-deep-base) 86%, #767e8a);
  --second: color-mix(in oklab, var(--second-base) 80%, #9ba5b1);

  --panel-color: rgba(49, 55, 64, 0.82);
  /* The palette washes across the top-right of every dressed face, as if
     one block caught the light from the doorway. */
  --panel-texture:
    linear-gradient(180deg, rgba(226, 233, 242, 0.06), transparent 38%),
    radial-gradient(
      130% 100% at 92% 4%,
      color-mix(in srgb, var(--accent-base) 11%, transparent),
      transparent 62%
    ),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%20%3C!--%20Stone%20style%3A%20the%20dressed%20face%20of%20a%20panel%20%E2%80%94%20fine%20pitting%20from%20the%20point%20chisel%2C%20light%20enough%20to%20leave%20text%20legible.%20Tiles%20seamlessly.%20--%3E%20%3Cfilter%20id%3D%22pit%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%22%20numOctaves%3D%223%22%20seed%3D%2223%22%20stitchTiles%3D%22stitch%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.78%200%200%200%200%200.82%200%200%200%200%200.88%200%200%200%200.1%200%22%2F%3E%20%3C%2Ffilter%3E%20%3Cfilter%20id%3D%22tooth%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.09%200.42%22%20numOctaves%3D%222%22%20seed%3D%229%22%20stitchTiles%3D%22stitch%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.03%200%200%200%200%200.04%200%200%200%200%200.06%200.28%200%200%200%20-0.14%22%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url(%23tooth)%22%2F%3E%20%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url(%23pit)%22%2F%3E%20%3C%2Fsvg%3E");
  --panel-radius: 3px;
  --panel-shadow:
    inset 0 1px 0 rgba(226, 233, 242, 0.1), inset 0 0 0 1px rgba(8, 10, 14, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6), inset 0 -22px 30px -26px rgba(0, 0, 0, 0.8),
    0 20px 38px -26px rgba(0, 0, 0, 0.95);
  --control-color: rgba(226, 233, 242, 0.05);
  --control-radius: 3px;
  --control-radius-sm: 2px;
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%20%3C!--%20Stone%20style%3A%20the%20dressed%20face%20of%20a%20panel%20%E2%80%94%20fine%20pitting%20from%20the%20point%20chisel%2C%20light%20enough%20to%20leave%20text%20legible.%20Tiles%20seamlessly.%20--%3E%20%3Cfilter%20id%3D%22pit%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%22%20numOctaves%3D%223%22%20seed%3D%2223%22%20stitchTiles%3D%22stitch%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.78%200%200%200%200%200.82%200%200%200%200%200.88%200%200%200%200.1%200%22%2F%3E%20%3C%2Ffilter%3E%20%3Cfilter%20id%3D%22tooth%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.09%200.42%22%20numOctaves%3D%222%22%20seed%3D%229%22%20stitchTiles%3D%22stitch%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.03%200%200%200%200%200.04%200%200%200%200%200.06%200.28%200%200%200%20-0.14%22%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url(%23tooth)%22%2F%3E%20%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url(%23pit)%22%2F%3E%20%3C%2Fsvg%3E");
  --raised:
    inset 0 1px 0 rgba(232, 240, 250, 0.26), inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 10px 22px -14px rgba(0, 0, 0, 0.95);

  --display-caps: normal;
  --display-tracking: 0.14em;
  /* An incised letter is dark where the cut begins and lit where it
     leaves — the exact inverse of Temple's raised relief. */
  --engrave: 0 -1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(226, 233, 242, 0.13);
}

:root[data-style="stone"] body::before {
  background:
    radial-gradient(72% 46% at 50% -14%, var(--sky), transparent 68%),
    radial-gradient(48% 42% at 98% -6%, var(--sky-side), transparent 66%),
    radial-gradient(94% 52% at 50% 116%, var(--floor), transparent 70%),
    radial-gradient(54% 46% at -8% 108%, var(--floor-side), transparent 68%),
    linear-gradient(180deg, rgba(6, 8, 11, 0) 35%, rgba(5, 6, 9, 0.55)),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22480%22%20viewBox%3D%220%200%20480%20480%22%3E%20%3C!--%20Stone%20style%3A%20coursed%20ashlar.%20Every%20joint%20is%20a%20dark%20groove%20with%20a%20lit%20lower%20lip%2C%20which%20is%20what%20makes%20a%20flat%20fill%20read%20as%20cut%20blocks.%20Courses%20are%2096%20tall%20and%20the%20vertical%20joints%20alternate%20by%20half%20a%20block%2C%20so%20the%20pattern%20tiles%20at%20480%20either%20way.%20--%3E%20%3Cfilter%20id%3D%22face%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.008%22%20numOctaves%3D%224%22%20seed%3D%2217%22%20stitchTiles%3D%22stitch%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.62%200%200%200%200%200.66%200%200%200%200%200.73%200.5%200%200%200%20-0.22%22%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20width%3D%22480%22%20height%3D%22480%22%20filter%3D%22url(%23face)%22%20opacity%3D%220.5%22%2F%3E%20%3C!--%20a%20little%20tonal%20drift%20block%20to%20block%3B%20quarried%20stone%20is%20never%20one%20colour%20--%3E%20%3Cg%20fill%3D%22%23aeb7c4%22%20opacity%3D%220.028%22%3E%20%3Crect%20x%3D%22160%22%20y%3D%220%22%20width%3D%22160%22%20height%3D%2296%22%2F%3E%20%3Crect%20x%3D%2280%22%20y%3D%2296%22%20width%3D%22160%22%20height%3D%2296%22%2F%3E%20%3Crect%20x%3D%22320%22%20y%3D%22192%22%20width%3D%22160%22%20height%3D%2296%22%2F%3E%20%3Crect%20x%3D%220%22%20y%3D%22288%22%20width%3D%2280%22%20height%3D%2296%22%2F%3E%20%3Crect%20x%3D%22240%22%20y%3D%22384%22%20width%3D%22160%22%20height%3D%2296%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%2305070a%22%20opacity%3D%220.16%22%3E%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22160%22%20height%3D%2296%22%2F%3E%20%3Crect%20x%3D%22240%22%20y%3D%2296%22%20width%3D%22160%22%20height%3D%2296%22%2F%3E%20%3Crect%20x%3D%22160%22%20y%3D%22192%22%20width%3D%22160%22%20height%3D%2296%22%2F%3E%20%3Crect%20x%3D%2280%22%20y%3D%22288%22%20width%3D%22160%22%20height%3D%2296%22%2F%3E%20%3Crect%20x%3D%220%22%20y%3D%22384%22%20width%3D%2280%22%20height%3D%2296%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20the%20lit%20lip%20sits%20one%20pixel%20below%20each%20groove%2C%20so%20light%20reads%20as%20coming%20from%20above%20--%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c3ccd8%22%20stroke-opacity%3D%220.075%22%20stroke-width%3D%221.5%22%20transform%3D%22translate(0%201.5)%22%3E%20%3Cpath%20d%3D%22M0%200H480M0%2096H480M0%20192H480M0%20288H480M0%20384H480%22%2F%3E%20%3Cpath%20d%3D%22M0%200V96M160%200V96M320%200V96M80%2096V96M80%2096V192M240%2096V192M400%2096V192M0%20192V288M160%20192V288M320%20192V288M80%20288V384M240%20288V384M400%20288V384M0%20384V480M160%20384V480M320%20384V480%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%2305070a%22%20stroke-opacity%3D%220.5%22%20stroke-width%3D%222%22%3E%20%3Cpath%20d%3D%22M0%200H480M0%2096H480M0%20192H480M0%20288H480M0%20384H480%22%2F%3E%20%3Cpath%20d%3D%22M0%200V96M160%200V96M320%200V96M80%2096V192M240%2096V192M400%2096V192M0%20192V288M160%20192V288M320%20192V288M80%20288V384M240%20288V384M400%20288V384M0%20384V480M160%20384V480M320%20384V480%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") 50% 0 / 520px 520px,
    radial-gradient(130% 90% at 50% -12%, #1d222b 0%, #14171d 50%, #0b0d11 100%);
}

/* The veins are a mask, not a picture, so they take their colour from the
   live palette. This is the one place the palette is *in* the material. */
:root[data-style="stone"] body::after {
  background-color: color-mix(in srgb, var(--accent-base) 62%, #cfd6e0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%20%3C!--%20Stone%20style%3A%20mineral%20veins%20running%20through%20the%20wall.%20Drawn%20as%20a%20mask%20so%20the%20page%20can%20colour%20them%20from%20the%20live%20palette%20%E2%80%94%20this%20is%20where%20a%20palette%20shows%20up%20in%20the%20stone%20itself%20rather%20than%20only%20in%20the%20light%20falling%20on%20it.%20Stroke%20widths%20are%20in%20viewBox%20units%20and%20the%20box%20is%20stretched%20to%20the%20viewport%2C%20so%20a%20vein%20is%20roughly%20a%20hairline%20at%20any%20size%3B%20the%20seam%20runs%20faint%20through%20the%20middle%20of%20the%20page%20and%20strengthens%20toward%20the%20top%20and%20bottom%20edges.%20--%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22fade%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%220.85%22%2F%3E%20%3Cstop%20offset%3D%220.5%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%220.28%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%220.7%22%2F%3E%20%3C%2FlinearGradient%3E%20%3Cfilter%20id%3D%22soft%22%3E%3CfeGaussianBlur%20stdDeviation%3D%220.08%22%2F%3E%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22url(%23fade)%22%20stroke-linecap%3D%22round%22%20filter%3D%22url(%23soft)%22%3E%20%3Cpath%20stroke-width%3D%220.13%22%20d%3D%22M-2%2022C14%2018%2021%2030%2034%2027S54%2012%2068%2017S88%2032%20102%2027%22%2F%3E%20%3Cpath%20stroke-width%3D%220.07%22%20d%3D%22M34%2027C37%2036%2033%2044%2036%2053S31%2068%2035%2078%22%2F%3E%20%3Cpath%20stroke-width%3D%220.05%22%20d%3D%22M68%2017C72%2025%2069%2031%2073%2038S70%2052%2076%2060%22%2F%3E%20%3Cpath%20stroke-width%3D%220.06%22%20d%3D%22M21%2030C16%2038%2019%2045%2014%2052%22%2F%3E%20%3Cpath%20stroke-width%3D%220.11%22%20d%3D%22M-2%2068C12%2072%2024%2062%2038%2066S62%2080%2078%2074S96%2066%20102%2070%22%2F%3E%20%3Cpath%20stroke-width%3D%220.05%22%20d%3D%22M38%2066C34%2074%2036%2082%2031%2090%22%2F%3E%20%3Cpath%20stroke-width%3D%220.06%22%20d%3D%22M78%2074C82%2080%2079%2088%2084%2096%22%2F%3E%20%3Cpath%20stroke-width%3D%220.04%22%20d%3D%22M56%2071C58%2078%2054%2084%2057%2092%22%2F%3E%20%3Cpath%20stroke-width%3D%220.08%22%20d%3D%22M14%20-2C17%208%2012%2014%2016%2022S13%2036%2018%2045%22%2F%3E%20%3Cpath%20stroke-width%3D%220.05%22%20d%3D%22M88%20-2C85%209%2090%2016%2086%2026S89%2038%2085%2047%22%2F%3E%20%3Cpath%20stroke-width%3D%220.04%22%20d%3D%22M47%20-2C49%207%2045%2012%2048%2020%22%2F%3E%20%3Cpath%20stroke-width%3D%220.05%22%20d%3D%22M63%20102C61%2094%2065%2088%2062%2081%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%20%3C!--%20Stone%20style%3A%20mineral%20veins%20running%20through%20the%20wall.%20Drawn%20as%20a%20mask%20so%20the%20page%20can%20colour%20them%20from%20the%20live%20palette%20%E2%80%94%20this%20is%20where%20a%20palette%20shows%20up%20in%20the%20stone%20itself%20rather%20than%20only%20in%20the%20light%20falling%20on%20it.%20Stroke%20widths%20are%20in%20viewBox%20units%20and%20the%20box%20is%20stretched%20to%20the%20viewport%2C%20so%20a%20vein%20is%20roughly%20a%20hairline%20at%20any%20size%3B%20the%20seam%20runs%20faint%20through%20the%20middle%20of%20the%20page%20and%20strengthens%20toward%20the%20top%20and%20bottom%20edges.%20--%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22fade%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%220.85%22%2F%3E%20%3Cstop%20offset%3D%220.5%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%220.28%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%220.7%22%2F%3E%20%3C%2FlinearGradient%3E%20%3Cfilter%20id%3D%22soft%22%3E%3CfeGaussianBlur%20stdDeviation%3D%220.08%22%2F%3E%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22url(%23fade)%22%20stroke-linecap%3D%22round%22%20filter%3D%22url(%23soft)%22%3E%20%3Cpath%20stroke-width%3D%220.13%22%20d%3D%22M-2%2022C14%2018%2021%2030%2034%2027S54%2012%2068%2017S88%2032%20102%2027%22%2F%3E%20%3Cpath%20stroke-width%3D%220.07%22%20d%3D%22M34%2027C37%2036%2033%2044%2036%2053S31%2068%2035%2078%22%2F%3E%20%3Cpath%20stroke-width%3D%220.05%22%20d%3D%22M68%2017C72%2025%2069%2031%2073%2038S70%2052%2076%2060%22%2F%3E%20%3Cpath%20stroke-width%3D%220.06%22%20d%3D%22M21%2030C16%2038%2019%2045%2014%2052%22%2F%3E%20%3Cpath%20stroke-width%3D%220.11%22%20d%3D%22M-2%2068C12%2072%2024%2062%2038%2066S62%2080%2078%2074S96%2066%20102%2070%22%2F%3E%20%3Cpath%20stroke-width%3D%220.05%22%20d%3D%22M38%2066C34%2074%2036%2082%2031%2090%22%2F%3E%20%3Cpath%20stroke-width%3D%220.06%22%20d%3D%22M78%2074C82%2080%2079%2088%2084%2096%22%2F%3E%20%3Cpath%20stroke-width%3D%220.04%22%20d%3D%22M56%2071C58%2078%2054%2084%2057%2092%22%2F%3E%20%3Cpath%20stroke-width%3D%220.08%22%20d%3D%22M14%20-2C17%208%2012%2014%2016%2022S13%2036%2018%2045%22%2F%3E%20%3Cpath%20stroke-width%3D%220.05%22%20d%3D%22M88%20-2C85%209%2090%2016%2086%2026S89%2038%2085%2047%22%2F%3E%20%3Cpath%20stroke-width%3D%220.04%22%20d%3D%22M47%20-2C49%207%2045%2012%2048%2020%22%2F%3E%20%3Cpath%20stroke-width%3D%220.05%22%20d%3D%22M63%20102C61%2094%2065%2088%2062%2081%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
  opacity: 0.3;
}

/* The incised margin a mason cuts inside the border of a dressed stone,
   before the inscription goes in. */
:root[data-style="stone"] .sig-panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(6, 8, 12, 0.5);
  border-radius: 1px;
  box-shadow:
    0 1px 0 rgba(226, 233, 242, 0.07),
    inset 0 1px 0 rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* A dentil course instead of Temple's fret — square teeth, cut not woven. */
:root[data-style="stone"] .sig-rule {
  display: block;
  height: 12px;
  background-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2212%22%20viewBox%3D%220%200%2018%2012%22%3E%20%3C!--%20Stone%20style%3A%20one%20unit%20of%20a%20dentil%20course%2C%20used%20as%20a%20mask%20and%20repeated%20into%20a%20carved%20band.%20Square%20teeth%20under%20a%20fillet%20%E2%80%94%20the%20cut%20a%20mason%20makes%2C%20not%20a%20weave.%20--%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%200h18v2H0zM0%2010h18v2H0zM2%203h6v6H2z%22%2F%3E%20%3C%2Fsvg%3E") 0 50% / auto 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2212%22%20viewBox%3D%220%200%2018%2012%22%3E%20%3C!--%20Stone%20style%3A%20one%20unit%20of%20a%20dentil%20course%2C%20used%20as%20a%20mask%20and%20repeated%20into%20a%20carved%20band.%20Square%20teeth%20under%20a%20fillet%20%E2%80%94%20the%20cut%20a%20mason%20makes%2C%20not%20a%20weave.%20--%3E%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%200h18v2H0zM0%2010h18v2H0zM2%203h6v6H2z%22%2F%3E%20%3C%2Fsvg%3E") 0 50% / auto 100% repeat-x;
  opacity: 0.85;
}

/* ----------------------------- the menu ----------------------------- *
 * A hamburger, a panel, and two dropdowns inside it. Every surface here
 * paints from the tokens above, so the menu is restyled by the very
 * choice it is making — Temple hands it weathered slabs and soft corners,
 * Stone hands it cut edges and a hard shadow.
 *
 * The dropdowns expand in flow rather than floating over the panel. A
 * floating list would be clipped by the panel or run off the screen edge
 * the menu is pinned to; growing the panel cannot do either. */

.sig-appearance {
  position: relative;
  display: inline-block;
}

/* Parked in a corner of the viewport, clear of the notch and the home bar. */
.sig-dock,
.sig-dock-left {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 60;
}

/* Docked chrome floats over whatever scrolls beneath it, so it needs a ground
   of its own: ink first, then the style's control tint, then its grain. The
   translucency alone read as a smudge over a panel. */
.sig-burger,
.sig-back {
  background-color: color-mix(in srgb, var(--ink) 82%, transparent);
  background-image:
    var(--grain), linear-gradient(var(--control-color), var(--control-color));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.sig-dock {
  right: calc(12px + env(safe-area-inset-right));
}

.sig-dock-left {
  left: calc(12px + env(safe-area-inset-left));
}

/* ---- the hamburger ---- */

.sig-burger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--mute);
  cursor: pointer;
  transition:
    color 0.18s,
    border-color 0.18s;
}

.sig-burger:hover,
.sig-burger[aria-expanded="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

/* Three bars: the outer two are pseudo-elements, the middle one is a
   background stripe whose width can be animated to nothing. Open, the
   outer pair meets in the centre as a cross. */
.sig-burger-bars {
  position: relative;
  display: block;
  width: 17px;
  height: 13px;
  background: linear-gradient(currentColor, currentColor) 0 50% / 70% 1.5px no-repeat;
  transition: background-size 0.24s var(--sig-ease);
}

.sig-burger-bars::before,
.sig-burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.26s var(--sig-ease);
}

.sig-burger-bars::before {
  top: 0;
}

.sig-burger-bars::after {
  bottom: 0;
}

.sig-burger:hover .sig-burger-bars {
  background-size: 100% 1.5px;
}

.sig-burger[aria-expanded="true"] .sig-burger-bars {
  background-size: 0 1.5px;
}

.sig-burger[aria-expanded="true"] .sig-burger-bars::before {
  transform: translateY(5.75px) rotate(45deg);
}

.sig-burger[aria-expanded="true"] .sig-burger-bars::after {
  transform: translateY(-5.75px) rotate(-45deg);
}

/* ---- the panel ---- */

/* Height animates through the 0fr→1fr grid row, so it works without
   knowing the content height and keeps working as a dropdown inside it
   grows. Closed, it is inert and, once faded, out of the layout's way. */
.sig-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: max(272px, 100%);
  display: grid;
  grid-template-rows: 0fr;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background-color: color-mix(in srgb, var(--ink) 86%, #000);
  background-image:
    var(--panel-texture), linear-gradient(var(--panel-color), var(--panel-color));
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  overflow: clip;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition:
    grid-template-rows 170ms var(--sig-ease),
    opacity 170ms var(--sig-ease),
    transform 170ms var(--sig-ease),
    visibility 0s linear 170ms;
}

.sig-menu[data-open] {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    grid-template-rows 240ms var(--sig-ease),
    opacity 240ms var(--sig-ease),
    transform 240ms var(--sig-ease),
    visibility 0s;
}

/* Which side and direction the panel unfolds in is decided on each open, by
   whichever has room — a hamburger docked at the foot or the left edge of a
   page still gets a menu that lands on screen. */
.sig-appearance[data-drop="up"] .sig-menu {
  top: auto;
  bottom: calc(100% + 9px);
  transform-origin: bottom right;
  transform: translateY(8px) scale(0.97);
}

.sig-appearance[data-align="left"] .sig-menu {
  right: auto;
  left: 0;
  transform-origin: top left;
}

.sig-appearance[data-align="left"][data-drop="up"] .sig-menu {
  transform-origin: bottom left;
}

.sig-appearance[data-drop="up"] .sig-menu[data-open] {
  transform: none;
}

.sig-menu-clip {
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.sig-menu-title {
  margin: 0;
  font: 13px/1 var(--serif);
  color: var(--moon);
}

/* Stone cuts the same incised margin into the menu that it cuts into a panel. */
:root[data-style="stone"] .sig-menu-clip {
  box-shadow:
    inset 0 0 0 1px rgba(6, 8, 12, 0.5),
    inset 0 1px 0 rgba(226, 233, 242, 0.07);
}

/* ---- a dropdown ---- */

.sig-select {
  display: grid;
  gap: 6px;
}

.sig-select-label {
  font: 10px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}

.sig-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background-color: var(--control-color);
  background-image: var(--grain);
  color: var(--moon);
  font: 13px/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s;
}

.sig-select-trigger:hover,
.sig-select-trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

.sig-select-value {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sig-chevron {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--mute);
  transition: transform 0.22s var(--sig-ease);
}

.sig-select-trigger[aria-expanded="true"] .sig-chevron {
  transform: rotate(180deg);
}

.sig-select-pop {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 150ms var(--sig-ease),
    opacity 150ms var(--sig-ease),
    visibility 0s linear 150ms;
}

.sig-select-pop[data-open] {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 220ms var(--sig-ease),
    opacity 220ms var(--sig-ease),
    visibility 0s;
}

.sig-select-clip {
  min-height: 0;
  overflow: hidden;
  overflow: clip;
}

.sig-options {
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: rgba(0, 0, 0, 0.28);
  max-height: min(46vh, 320px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Options arrive in a short cascade, capped so the tail of a long list
   doesn't lag behind the panel. Closing has no stagger. */
.sig-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--control-radius-sm);
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 120ms var(--sig-ease),
    transform 120ms var(--sig-ease),
    background-color 0.15s;
}

.sig-select-pop[data-open] .sig-option {
  --delay: calc(min(var(--i), 8) * 22ms);
  opacity: 1;
  transform: none;
  transition:
    opacity 200ms var(--sig-ease) var(--delay),
    transform 200ms var(--sig-ease) var(--delay),
    background-color 0.15s;
}

.sig-option:hover {
  background-color: color-mix(in srgb, var(--accent) 9%, transparent);
}

.sig-option[aria-selected="true"] {
  background-color: color-mix(in srgb, var(--accent) 13%, transparent);
}

.sig-option:focus {
  outline: none;
}

.sig-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sig-option-text {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sig-option-name {
  font: 13px/1.2 var(--sans);
  color: var(--moon);
}

.sig-option-note {
  font: 11px/1.3 var(--sans);
  color: var(--mute);
}

.sig-tick {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--accent);
  visibility: hidden;
}

.sig-option[aria-selected="true"] .sig-tick {
  visibility: visible;
}

/* ---- the marks in front of each choice ---- *
 * Both the trigger's current value and each option carry the same data
 * attribute, so a palette swatch paints itself from the very tokens that
 * option would apply to the page, and a style chip shows its material. */

.sig-dot {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

:is(.sig-option, .sig-select-value)[data-palette] .sig-dot {
  background: linear-gradient(145deg, var(--accent-base) 30%, var(--accent-deep-base));
}

/* A circle with a bar through it: the light is off, not merely grey. */
:is(.sig-option, .sig-select-value)[data-palette="none"] .sig-dot {
  background:
    linear-gradient(
      45deg,
      transparent 43%,
      var(--mute) 43%,
      var(--mute) 57%,
      transparent 57%
    ),
    rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px var(--line);
}

:is(.sig-option, .sig-select-value)[data-style] .sig-dot {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

:is(.sig-option, .sig-select-value)[data-style="classic"] .sig-dot {
  background: linear-gradient(145deg, #1b2833, #0b1013);
}

:is(.sig-option, .sig-select-value)[data-style="temple"] .sig-dot {
  background: linear-gradient(145deg, #2e4032, #0c1413);
}

:is(.sig-option, .sig-select-value)[data-style="stone"] .sig-dot {
  background: linear-gradient(145deg, #3b424d, #14171d);
}

/* ---- the way back out ---- */

.sig-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 13px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--mute);
  font: 11px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.18s,
    border-color 0.18s;
}

.sig-back svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 0.18s var(--sig-ease);
}

.sig-back:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

.sig-back:hover svg {
  transform: translateX(-2px);
}

/* Narrow screens keep the arrow and drop the word — the target stays 40px. */
@media (max-width: 520px) {
  .sig-back {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .sig-back-label {
    display: none;
  }
}

.sig-burger:focus-visible,
.sig-select-trigger:focus-visible,
.sig-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sig-burger-bars,
  .sig-burger-bars::before,
  .sig-burger-bars::after,
  .sig-chevron,
  .sig-back svg,
  .sig-menu,
  .sig-menu[data-open],
  .sig-select-pop,
  .sig-select-pop[data-open],
  .sig-option,
  .sig-select-pop[data-open] .sig-option {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}