:root {
  color-scheme: dark;
  --bg: #000;
  --ink: #f7f7f5;
  --muted: rgba(247, 247, 245, .38);
  --ghost: rgba(247, 247, 245, .14);
  --line: rgba(247, 247, 245, .46);
  --line-strong: rgba(247, 247, 245, .72);
  --accent: #f7f7f5;
  --face-fill: rgba(0, 0, 0, .32);
  --face-hi: #171717;
  --face-mid: #070707;
  --face-lo: #000;
  --sheen-hi: rgba(255, 255, 255, .075);
  --sheen-mid: rgba(255, 255, 255, .02);
  --sheen-lo: rgba(0, 0, 0, .35);
  --rim-hi: rgba(255, 255, 255, .28);
  --rim-lo: rgba(0, 0, 0, .8);
  --panel: rgba(0, 0, 0, .84);
  --ease: cubic-bezier(.25, .8, .25, 1);
}

body[data-theme="blueprint"] {
  --bg: #06131c;
  --ink: #d9f8ff;
  --muted: rgba(123, 215, 235, .5);
  --ghost: rgba(92, 217, 255, .14);
  --line: rgba(92, 217, 255, .48);
  --line-strong: rgba(214, 249, 255, .82);
  --accent: #5cd9ff;
  --face-fill: rgba(5, 30, 43, .64);
  --face-hi: #123b4a;
  --face-mid: #071d29;
  --face-lo: #020a10;
  --sheen-hi: rgba(174, 239, 255, .13);
  --sheen-mid: rgba(92, 217, 255, .035);
  --sheen-lo: rgba(0, 6, 12, .55);
  --rim-hi: rgba(151, 232, 255, .38);
  --rim-lo: rgba(0, 8, 14, .9);
  --panel: rgba(3, 18, 27, .91);
}

body[data-theme="surveyor"] {
  --bg: #0f0909;
  --ink: #ead9c2;
  --muted: rgba(214, 182, 141, .5);
  --ghost: rgba(160, 64, 64, .14);
  --line: rgba(160, 64, 64, .5);
  --line-strong: rgba(207, 171, 123, .84);
  --accent: #a04040;
  --face-fill: #0c0808;
  --face-hi: #373434;
  --face-mid: #1f1b1b;
  --face-lo: #0b0707;
  --sheen-hi: rgba(198, 140, 140, .2);
  --sheen-mid: rgba(160, 64, 64, .045);
  --sheen-lo: rgba(0, 0, 0, .68);
  --rim-hi: rgba(198, 140, 140, .58);
  --rim-lo: #381616;
  --panel: rgba(21, 13, 13, .92);
}

body[data-theme="aluminum"] {
  color-scheme: light;
  --bg: #aab0b2;
  --ink: #102b42;
  --muted: rgba(16, 43, 66, .52);
  --ghost: rgba(16, 43, 66, .16);
  --line: rgba(15, 42, 63, .5);
  --line-strong: rgba(8, 30, 48, .84);
  --accent: #e45124;
  --face-fill: #aeb5b8;
  --face-hi: #f2f4f3;
  --face-mid: #aab2b6;
  --face-lo: #626b70;
  --sheen-hi: rgba(255, 255, 255, .72);
  --sheen-mid: rgba(255, 255, 255, .2);
  --sheen-lo: rgba(43, 51, 56, .55);
  --rim-hi: rgba(255, 255, 255, .88);
  --rim-lo: rgba(33, 40, 44, .76);
  --panel: rgba(211, 215, 215, .88);
}

body[data-theme="smoked"] {
  --bg: #07090d;
  --ink: #edf7ff;
  --muted: rgba(190, 215, 229, .48);
  --ghost: rgba(187, 226, 245, .13);
  --line: rgba(196, 229, 244, .4);
  --line-strong: rgba(233, 248, 255, .78);
  --accent: #ff765f;
  --face-fill: rgba(11, 18, 25, .86);
  --face-hi: #344653;
  --face-mid: #111b23;
  --face-lo: #030609;
  --sheen-hi: rgba(220, 246, 255, .22);
  --sheen-mid: rgba(170, 221, 242, .045);
  --sheen-lo: rgba(0, 0, 0, .7);
  --rim-hi: rgba(215, 243, 255, .58);
  --rim-lo: rgba(0, 0, 0, .95);
  --panel: rgba(8, 12, 17, .78);
}

body[data-theme="walnut"] {
  color-scheme: light;
  --bg: #d0c8b8; --ink: #453b2d; --muted: rgba(69,59,45,.5);
  --ghost: rgba(105,85,51,.13); --line: rgba(117,94,53,.43);
  --line-strong: rgba(68,53,30,.82); --accent: #a88745;
  --face-fill: #f0ebe0; --face-hi: #fffdf7; --face-mid: #eee5d4; --face-lo: #cdbf9f;
  --sheen-hi: rgba(255,255,255,.72); --sheen-mid: rgba(255,252,240,.2); --sheen-lo: rgba(91,72,40,.25);
  --rim-hi: rgba(255,255,255,.9); --rim-lo: rgba(104,83,47,.66); --panel: rgba(235,228,213,.9);
}

body[data-theme="patina"] {
  --bg: #3e2618; --ink: #fff0dc; --muted: rgba(225,186,151,.46);
  --ghost: rgba(86,150,128,.16); --line: rgba(115,177,151,.46);
  --line-strong: rgba(255,214,178,.82); --accent: #65a58e;
  --face-fill: #9b603e; --face-hi: #e5b18a; --face-mid: #b8724a; --face-lo: #5b351f;
  --sheen-hi: rgba(255,225,198,.33); --sheen-mid: rgba(101,165,142,.1); --sheen-lo: rgba(35,18,9,.55);
  --rim-hi: rgba(229,177,138,.72); --rim-lo: rgba(49,28,16,.95); --panel: rgba(54,31,19,.9);
}

body[data-theme="blued"] {
  color-scheme: light;
  --bg: #a8c8d4; --ink: #173746; --muted: rgba(23,55,70,.5);
  --ghost: rgba(42,72,88,.13); --line: rgba(58,88,104,.44);
  --line-strong: rgba(25,57,72,.82); --accent: #3a6f83;
  --face-fill: #c8e4ec; --face-hi: #f1fbff; --face-mid: #bad8e1; --face-lo: #6a98a8;
  --sheen-hi: rgba(255,255,255,.76); --sheen-mid: rgba(255,255,255,.2); --sheen-lo: rgba(42,72,88,.34);
  --rim-hi: rgba(255,255,255,.84); --rim-lo: rgba(42,72,88,.78); --panel: rgba(207,228,234,.9);
}

body[data-theme="jade"] {
  color-scheme: light;
  --bg: #9caca2; --ink: #234238; --muted: rgba(35,66,56,.48);
  --ghost: rgba(70,95,82,.13); --line: rgba(55,88,72,.4);
  --line-strong: rgba(28,68,53,.78); --accent: #b56b51;
  --face-fill: #e5ebe3; --face-hi: #fbfdf8; --face-mid: #e5ebe3; --face-lo: #aabbb0;
  --sheen-hi: rgba(255,255,255,.82); --sheen-mid: rgba(200,224,184,.17); --sheen-lo: rgba(70,78,64,.34);
  --rim-hi: rgba(255,255,255,.88); --rim-lo: rgba(70,78,64,.76); --panel: rgba(218,229,221,.9);
}

body[data-theme="enamel"] {
  color-scheme: light;
  --bg: #d4c0b8; --ink: #4a3431; --muted: rgba(74,52,49,.48);
  --ghost: rgba(106,80,72,.13); --line: rgba(122,87,78,.42);
  --line-strong: rgba(76,48,43,.8); --accent: #8a6058;
  --face-fill: #f0d0c4; --face-hi: #fff8f5; --face-mid: #e4c1b6; --face-lo: #a77b70;
  --sheen-hi: rgba(255,255,255,.76); --sheen-mid: rgba(255,240,235,.2); --sheen-lo: rgba(90,56,49,.3);
  --rim-hi: rgba(255,245,241,.9); --rim-lo: rgba(106,80,72,.74); --panel: rgba(235,216,210,.9);
}

body[data-theme="carbon"] {
  --bg: #050607; --ink: #edf1f2; --muted: rgba(210,220,223,.43);
  --ghost: rgba(190,205,210,.12); --line: rgba(190,205,210,.38);
  --line-strong: rgba(238,244,245,.78); --accent: #ff6a32;
  --face-fill: #111519; --face-hi: #343b40; --face-mid: #151a1e; --face-lo: #020303;
  --sheen-hi: rgba(255,255,255,.15); --sheen-mid: rgba(180,200,206,.025); --sheen-lo: rgba(0,0,0,.8);
  --rim-hi: rgba(215,228,232,.34); --rim-lo: rgba(0,0,0,.98); --panel: rgba(5,7,8,.9);
}

body[data-theme="frost"] {
  --bg: #070815; --ink: #f4ffff; --muted: rgba(205,235,242,.48);
  --ghost: rgba(94,231,223,.13); --line: rgba(94,231,223,.42);
  --line-strong: rgba(238,250,255,.84); --accent: #5ee7df;
  --face-fill: rgba(255,255,255,.1); --face-hi: #314868; --face-mid: #102340; --face-lo: #070815;
  --sheen-hi: rgba(255,255,255,.38); --sheen-mid: rgba(94,231,223,.12); --sheen-lo: rgba(0,0,0,.54);
  --rim-hi: rgba(255,255,255,.62); --rim-lo: rgba(11,14,38,.88); --panel: rgba(9,13,30,.8);
}

body[data-theme="coin"] {
  color-scheme: light;
  --bg: #c8ccd4; --ink: #35404a; --muted: rgba(53,64,74,.48);
  --ghost: rgba(91,105,118,.13); --line: rgba(91,105,118,.4);
  --line-strong: rgba(48,61,72,.8); --accent: #718293;
  --face-fill: #eef2f6; --face-hi: #fff; --face-mid: #e0e4ea; --face-lo: #aab1bc;
  --sheen-hi: rgba(255,255,255,.72); --sheen-mid: rgba(255,255,255,.14); --sheen-lo: rgba(73,82,92,.24);
  --rim-hi: rgba(255,255,255,.9); --rim-lo: rgba(86,96,106,.68); --panel: rgba(230,233,238,.9);
}

body[data-theme="signal"] {
  --bg: #090305; --ink: #ffe5ed; --muted: rgba(255,151,182,.48);
  --ghost: rgba(255,95,143,.13); --line: rgba(255,95,143,.42);
  --line-strong: rgba(255,226,235,.82); --accent: #ff5f8f;
  --face-fill: #0f0508; --face-hi: #3a3234; --face-mid: #22191b; --face-lo: #090305;
  --sheen-hi: rgba(255,159,187,.2); --sheen-mid: rgba(255,95,143,.05); --sheen-lo: rgba(0,0,0,.7);
  --rim-hi: rgba(255,159,187,.55); --rim-lo: #592132; --panel: rgba(14,4,7,.92);
}

body[data-theme="radium"] {
  --bg: #020906;
  --ink: #e4ffd0;
  --muted: rgba(158, 215, 112, .48);
  --ghost: rgba(139, 220, 72, .12);
  --line: rgba(145, 226, 75, .42);
  --line-strong: rgba(221, 255, 190, .78);
  --accent: #9df255;
  --face-fill: rgba(4, 24, 14, .75);
  --face-hi: #153923;
  --face-mid: #071b10;
  --face-lo: #010604;
  --sheen-hi: rgba(205, 255, 172, .12);
  --sheen-mid: rgba(157, 242, 85, .025);
  --sheen-lo: rgba(0, 4, 2, .6);
  --rim-hi: rgba(197, 255, 159, .32);
  --rim-lo: rgba(0, 11, 4, .94);
  --panel: rgba(2, 12, 7, .92);
}

/* Case treatments adapted from the Watch Face Lab. The dial itself stays fixed. */
body[data-theme="conic"] {
  --bg: #17120c; --ink: #f5ead4; --muted: rgba(245,234,212,.46);
  --ghost: rgba(215,180,126,.14); --line: rgba(220,188,137,.44);
  --line-strong: rgba(255,239,204,.82); --accent: #d6a254;
  --face-fill: #30261d; --face-hi: #6d5943; --face-mid: #352a20; --face-lo: #130e0a;
  --sheen-hi: rgba(255,240,210,.28); --sheen-mid: rgba(215,173,103,.07); --sheen-lo: rgba(8,5,2,.7);
  --rim-hi: #c7a675; --rim-lo: #382719; --panel: rgba(24,18,12,.9);
}

body[data-theme="gutters"] {
  color-scheme: light;
  --bg: #8d969a; --ink: #18262e; --muted: rgba(24,38,46,.48);
  --ghost: rgba(22,39,48,.14); --line: rgba(30,51,61,.42);
  --line-strong: rgba(14,31,40,.8); --accent: #a8462c;
  --face-fill: #bcc3c5; --face-hi: #eef0ee; --face-mid: #b7bec0; --face-lo: #737d81;
  --sheen-hi: rgba(255,255,255,.72); --sheen-mid: rgba(255,255,255,.15); --sheen-lo: rgba(35,45,50,.38);
  --rim-hi: #eef1f0; --rim-lo: #3a4448; --panel: rgba(205,210,210,.9);
}

body[data-theme="glasslip"] {
  --bg: #091317; --ink: #e8fbff; --muted: rgba(198,230,236,.46);
  --ghost: rgba(192,234,242,.12); --line: rgba(196,235,242,.4);
  --line-strong: rgba(235,251,255,.8); --accent: #74d8e8;
  --face-fill: #15262c; --face-hi: #45636b; --face-mid: #1a2d34; --face-lo: #050b0d;
  --sheen-hi: rgba(225,250,255,.28); --sheen-mid: rgba(116,216,232,.07); --sheen-lo: rgba(0,4,5,.72);
  --rim-hi: rgba(235,253,255,.88); --rim-lo: rgba(13,43,51,.95); --panel: rgba(9,20,24,.86);
}

body[data-theme="fluted"] {
  --bg: #0a0c10; --ink: #edf2f5; --muted: rgba(184,194,203,.46);
  --ghost: rgba(138,146,156,.12); --line: rgba(138,146,156,.4);
  --line-strong: rgba(235,240,244,.78); --accent: #8a929c;
  --face-fill: #2a2e34; --face-hi: #555c65; --face-mid: #2a2e34; --face-lo: #0a0c10;
  --sheen-hi: rgba(255,255,255,.18); --sheen-mid: rgba(138,146,156,.04); --sheen-lo: rgba(0,0,0,.8);
  --rim-hi: #8a929c; --rim-lo: #08090b; --panel: rgba(10,12,16,.92);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: background 420ms ease, color 420ms ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.025), transparent 48%);
}

body[data-theme="blueprint"]::before {
  background:
    linear-gradient(rgba(92,217,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,217,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(16,89,113,.28), transparent 55%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="surveyor"]::before {
  background:
    repeating-linear-gradient(118deg, transparent 0 9px, rgba(198,140,140,.025) 9px 10px),
    radial-gradient(circle at 31% 18%, rgba(160,64,64,.2), transparent 34%),
    radial-gradient(circle at 72% 78%, rgba(207,171,123,.065), transparent 38%),
    radial-gradient(circle at 50% 50%, #241717, #0f0909 72%);
}

body[data-theme="aluminum"]::before {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, rgba(32,42,47,.035) 1px 2px, transparent 2px 5px),
    linear-gradient(118deg, rgba(255,255,255,.42), transparent 25% 70%, rgba(33,40,44,.15)),
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.24), transparent 58%);
}

body[data-theme="smoked"]::before {
  background:
    linear-gradient(108deg, transparent 18%, rgba(198,236,255,.035) 36%, transparent 43%),
    radial-gradient(ellipse at 34% 19%, rgba(170,220,242,.13), transparent 30%),
    radial-gradient(circle at 68% 74%, rgba(255,118,95,.055), transparent 34%),
    radial-gradient(circle at 50% 50%, #101820 0, #07090d 60%, #020305 100%);
}

body[data-theme="walnut"]::before {
  background:
    repeating-linear-gradient(92deg, rgba(115,90,47,.04) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 18% 62%, transparent 0 14%, rgba(115,90,47,.055) 14.5%, transparent 16%),
    linear-gradient(112deg, rgba(255,255,255,.5), transparent 31% 68%, rgba(104,83,47,.1)),
    radial-gradient(circle at 50% 46%, #f0ebe0, #d0c8b8 72%);
}

body[data-theme="patina"]::before {
  background:
    radial-gradient(circle at 24% 20%, rgba(101,165,142,.24), transparent 22%),
    radial-gradient(circle at 72% 72%, rgba(72,134,112,.18), transparent 29%),
    repeating-linear-gradient(103deg, rgba(255,225,198,.025) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 50%, #8d5638, #3e2618 76%);
}

body[data-theme="blued"]::before {
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,.07) 0 1px, rgba(42,72,88,.03) 1px 3px, transparent 3px 8px),
    linear-gradient(120deg, rgba(255,255,255,.52), transparent 30% 71%, rgba(42,72,88,.1)),
    radial-gradient(circle at 50% 50%, #c8e4ec, #a8c8d4 76%);
}

body[data-theme="jade"]::before {
  background:
    radial-gradient(ellipse at 32% 20%, rgba(255,255,255,.62), transparent 30%),
    radial-gradient(circle at 72% 75%, rgba(56,107,79,.1), transparent 38%),
    linear-gradient(135deg, #c8ddd0, #9caca2);
}

body[data-theme="enamel"]::before {
  background:
    linear-gradient(116deg, rgba(255,255,255,.48), transparent 25% 68%, rgba(106,80,72,.12)),
    repeating-linear-gradient(101deg, rgba(255,255,255,.045) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 48%, #ead8d2, #d4c0b8 74%);
}

body[data-theme="carbon"]::before {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 35% 20%, rgba(180,200,206,.09), transparent 28%),
    radial-gradient(circle at 50% 50%, #15191c, #050607 70%);
}

body[data-theme="frost"]::before {
  background:
    linear-gradient(112deg, transparent 18%, rgba(255,255,255,.08) 37%, transparent 45%),
    radial-gradient(circle at 28% 18%, rgba(94,231,223,.25), transparent 31%),
    radial-gradient(circle at 76% 76%, rgba(180,144,245,.21), transparent 38%),
    radial-gradient(circle at 50% 50%, #102340, #070815 72%);
}

body[data-theme="coin"]::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 44px, rgba(86,96,106,.025) 45px),
    repeating-linear-gradient(28deg, rgba(72,82,92,.02) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 31% 19%, rgba(255,255,255,.5), transparent 34%),
    radial-gradient(circle at 50% 50%, #eef2f6, #c8ccd4 74%);
}

body[data-theme="signal"]::before {
  background:
    linear-gradient(rgba(255,95,143,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,95,143,.025) 1px, transparent 1px),
    radial-gradient(circle at 35% 20%, rgba(255,95,143,.2), transparent 31%),
    radial-gradient(circle at 50% 50%, #22080f, #090305 72%);
  background-size: 48px 48px, 48px 48px, auto, auto;
}

body[data-theme="fluted"]::before {
  background:
    repeating-linear-gradient(96deg, rgba(255,255,255,.016) 0 1px, transparent 1px 8px),
    linear-gradient(111deg, transparent 19%, rgba(255,255,255,.08) 38%, transparent 45%),
    radial-gradient(circle at 71% 75%, rgba(138,146,156,.08), transparent 38%),
    radial-gradient(circle at 50% 50%, #1a1c20, #0a0c10 72%);
}

body[data-theme="radium"]::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(157,242,85,.017) 3px 4px),
    radial-gradient(circle at 50% 48%, rgba(90,165,42,.19), transparent 48%);
}

button,
input,
select { font: inherit; }

.clock-app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vmin, 3rem);
}

.dial {
  width: min(90vmin, 72rem);
  aspect-ratio: 1;
  overflow: visible;
  user-select: none;
  cursor: pointer;
  outline: none;
}

.dial:focus-visible .circumference { stroke: var(--accent); stroke-width: .72; }

.dial .face {
  fill: var(--face-fill);
  fill: url(#face-depth);
  stroke: var(--ghost);
  stroke-width: .35;
  vector-effect: non-scaling-stroke;
}

.dial .face-sheen {
  fill: url(#face-sheen);
  pointer-events: none;
}

.dial .rim {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.dial .case-ring {
  fill: none;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.dial .case-fastener {
  fill: var(--rim-lo);
  stroke: var(--rim-hi);
  stroke-width: .28;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

body[data-theme="conic"] .case-ring,
body[data-theme="gutters"] .case-ring,
body[data-theme="glasslip"] .case-ring,
body[data-theme="fluted"] .case-ring { opacity: 1; }

body[data-theme="conic"] .case-outer { stroke: #3b2817; stroke-width: 3.2; }
body[data-theme="conic"] .case-middle { stroke: #c7a675; stroke-width: 1.9; }
body[data-theme="conic"] .case-inner { stroke: #6f4f2e; stroke-width: 1.15; }

body[data-theme="gutters"] .case-outer { stroke: #3e494e; stroke-width: 2.8; }
body[data-theme="gutters"] .case-middle { stroke: #edf0ef; stroke-width: 1.15; }
body[data-theme="gutters"] .case-inner { stroke: #68757a; stroke-width: 2.1; }

body[data-theme="glasslip"] .case-outer { stroke: rgba(224,250,255,.78); stroke-width: 2.7; }
body[data-theme="glasslip"] .case-middle { stroke: rgba(116,216,232,.32); stroke-width: 2.1; }
body[data-theme="glasslip"] .case-inner { stroke: rgba(232,253,255,.8); stroke-width: .55; }

body[data-theme="fluted"] .case-outer {
  stroke: #08090b;
  stroke-width: 3.4;
  stroke-dasharray: .48 .36;
}
body[data-theme="fluted"] .case-middle { stroke: #8a929c; stroke-width: .75; }
body[data-theme="fluted"] .case-inner { stroke: #2a2e34; stroke-width: 1.6; }
body[data-theme="fluted"] .case-fastener { opacity: 1; }

.dial .rim-outer {
  stroke: var(--rim-lo);
  stroke-width: 1.45;
}

.dial .rim-inner {
  stroke: var(--rim-hi);
  stroke-width: .48;
}

.dial .circumference {
  fill: none;
  stroke: var(--line);
  stroke-width: .45;
  vector-effect: non-scaling-stroke;
}

.dial .guide {
  fill: none;
  stroke: var(--ghost);
  stroke-width: .32;
  vector-effect: non-scaling-stroke;
}

.dial .orbit-arc {
  fill: none;
  stroke: var(--line);
  stroke-width: .55;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.dial .mechanism {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: d 560ms var(--ease), opacity 300ms ease;
}

.dial .mechanism.secondary {
  stroke: var(--line);
  stroke-width: .62;
}

.dial .gate-fill {
  fill: color-mix(in srgb, var(--accent) 18%, var(--face-mid));
  stroke: none;
  opacity: 1;
}

.dial .joint {
  fill: var(--face-mid);
  stroke: var(--line);
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
}

.dial .token {
  fill: var(--ink);
  font-size: 4px;
  font-weight: 700;
  letter-spacing: .16px;
  text-anchor: middle;
  dominant-baseline: central;
  stroke: none;
  filter: drop-shadow(0 .22px .18px rgba(0,0,0,.3));
  transition: x 560ms var(--ease), y 560ms var(--ease), opacity 260ms ease;
}

.dial .token.hour { font-size: 4.9px; }
.dial .token.phrase-prefix { font-size: 3.45px; }
.dial .token.relation { font-size: 3.25px; letter-spacing: .3px; }
.dial .token.oclock { font-size: 3.05px; letter-spacing: .24px; }
.dial .token.relation { fill: var(--accent); }

body[data-theme="radium"] .dial { filter: drop-shadow(0 0 11px rgba(157,242,85,.13)); }
body[data-theme="surveyor"] .dial { filter: drop-shadow(0 18px 28px rgba(0,0,0,.25)); }
body[data-theme="aluminum"] .dial {
  filter: drop-shadow(0 24px 28px rgba(20,28,32,.3));
}
body[data-theme="aluminum"] .dial .face-sheen { opacity: .48; }
body[data-theme="aluminum"] .dial .mechanism { stroke-width: .78; }
body[data-theme="smoked"] .dial {
  filter: drop-shadow(0 30px 42px rgba(0,0,0,.62)) drop-shadow(0 0 9px rgba(190,232,250,.08));
}
body[data-theme="smoked"] .dial .face-sheen { opacity: .72; }
body[data-theme="walnut"] .dial,
body[data-theme="patina"] .dial,
body[data-theme="enamel"] .dial { filter: drop-shadow(0 26px 38px rgba(0,0,0,.42)); }
body[data-theme="blued"] .dial,
body[data-theme="jade"] .dial { filter: drop-shadow(0 22px 30px rgba(25,38,43,.25)); }
body[data-theme="carbon"] .dial,
body[data-theme="coin"] .dial,
body[data-theme="signal"] .dial { filter: drop-shadow(0 28px 40px rgba(0,0,0,.45)); }
body[data-theme="frost"] .dial {
  filter: drop-shadow(0 25px 38px rgba(0,0,0,.48)) drop-shadow(0 0 13px rgba(94,231,223,.12));
}
body[data-theme="frost"] .dial .token { filter: drop-shadow(0 0 2.4px rgba(94,231,223,.2)); }
body[data-theme="signal"] .dial .token { filter: drop-shadow(0 0 2px rgba(255,95,143,.18)); }
body[data-theme="fluted"] .dial { filter: drop-shadow(0 30px 42px rgba(0,0,0,.56)); }

.dial .hub-disc {
  fill: var(--bg);
  stroke: var(--line-strong);
  stroke-width: .52;
  vector-effect: non-scaling-stroke;
}

.dial .hub-well {
  display: none;
  fill: none;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.dial .hub-slab {
  display: none;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Flush plate: the words sit directly on the face with no center button. */
body[data-theme="jade"] .hub-disc,
body[data-theme="enamel"] .hub-disc {
  fill: transparent;
  stroke: none;
}

/* Counterbore: a hard inner ledge dropping to a darker steel floor. */
body[data-theme="aluminum"] .hub-well,
body[data-theme="blued"] .hub-well { display: block; }
body[data-theme="aluminum"] .hub-well-outer,
body[data-theme="blued"] .hub-well-outer {
  stroke: var(--rim-lo);
  stroke-width: 1.05;
}
body[data-theme="aluminum"] .hub-well-inner,
body[data-theme="blued"] .hub-well-inner {
  stroke: var(--rim-hi);
  stroke-width: .42;
}
body[data-theme="aluminum"] .hub-disc,
body[data-theme="blued"] .hub-disc {
  fill: var(--face-lo);
  stroke: var(--line);
  stroke-width: .3;
}

/* Stepped well: two terraces before the dark central reading plane. */
body[data-theme="walnut"] .hub-well { display: block; }
body[data-theme="walnut"] .hub-well-outer {
  fill: rgba(168,135,69,.2);
  stroke: var(--rim-lo);
  stroke-width: 1.25;
}
body[data-theme="walnut"] .hub-well-inner {
  fill: rgba(255,253,247,.38);
  stroke: var(--rim-hi);
  stroke-width: .5;
}
body[data-theme="walnut"] .hub-disc { fill: #e9e0ce; stroke-width: .28; }

/* Open aperture: restrained lip around a near-black cavity. */
body[data-theme="smoked"] .hub-well,
body[data-theme="patina"] .hub-well { display: block; }
body[data-theme="smoked"] .hub-well-outer,
body[data-theme="patina"] .hub-well-outer {
  stroke: var(--rim-lo);
  stroke-width: 1.45;
}
body[data-theme="smoked"] .hub-well-inner,
body[data-theme="patina"] .hub-well-inner {
  stroke: var(--accent);
  stroke-width: .25;
  opacity: .55;
}
body[data-theme="smoked"] .hub-disc,
body[data-theme="patina"] .hub-disc {
  fill: #030706;
  stroke: var(--ghost);
  stroke-width: .25;
}
body[data-theme="patina"] .hub-disc { fill: #29150d; }

/* Deep counterwell: nested carbon terraces with almost no reflected edge. */
body[data-theme="carbon"] .hub-well { display: block; }
body[data-theme="carbon"] .hub-well-outer {
  fill: #090b0d;
  stroke: #000;
  stroke-width: 1.8;
}
body[data-theme="carbon"] .hub-well-inner {
  fill: #151a1e;
  stroke: rgba(220,232,235,.2);
  stroke-width: .36;
}
body[data-theme="carbon"] .hub-disc { fill: #010202; stroke: #000; stroke-width: .48; }

/* Glass lip: a wide translucent ledge floating above a cool inset floor. */
body[data-theme="frost"] .hub-well { display: block; }
body[data-theme="frost"] .hub-well-outer {
  fill: rgba(94,231,223,.1);
  stroke: rgba(255,255,255,.62);
  stroke-width: 1.15;
}
body[data-theme="frost"] .hub-well-inner {
  stroke: rgba(180,144,245,.48);
  stroke-width: .42;
}
body[data-theme="frost"] .hub-disc { fill: rgba(16,35,64,.72); stroke: rgba(94,231,223,.62); stroke-width: .3; }

/* Coin register: broken edge marks read as a compact knurled inset. */
body[data-theme="coin"] .hub-well { display: block; }
body[data-theme="coin"] .hub-well-outer {
  stroke: var(--rim-hi);
  stroke-width: 1.35;
  stroke-dasharray: .42 .48;
}
body[data-theme="coin"] .hub-well-inner { stroke: var(--rim-lo); stroke-width: .62; }
body[data-theme="coin"] .hub-disc { fill: #dfe4ea; stroke: var(--line); stroke-width: .3; }

/* Datum slab: a square machined recess interrupts the otherwise circular face. */
body[data-theme="signal"] .hub-well,
body[data-theme="signal"] .hub-disc { display: none; }
body[data-theme="signal"] .hub-slab {
  display: block;
  fill: #260810;
  stroke: var(--rim-hi);
  stroke-width: .55;
}

.dial .hub-copy {
  fill: var(--ink);
  font-size: 3.7px;
  font-weight: 700;
  letter-spacing: .24px;
  text-anchor: middle;
  dominant-baseline: central;
}

.dial .hub-copy.small { font-size: 2.25px; letter-spacing: .2px; }

.dial .read-order {
  fill: var(--muted);
  font-size: 1.45px;
  font-weight: 600;
  letter-spacing: .16px;
  text-anchor: middle;
  opacity: 0;
}

body:not([data-embed="true"]) .dial:hover .read-order { opacity: 1; }

.chrome {
  position: fixed;
  inset: max(.65rem, env(safe-area-inset-top)) max(.65rem, env(safe-area-inset-right)) auto max(.65rem, env(safe-area-inset-left));
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

.identity {
  display: grid;
  gap: .18rem;
  max-width: min(52vw, 34rem);
}

.eyebrow,
.instructions { font-size: clamp(.48rem, .86vmin, .65rem); }

.eyebrow,
.instructions,
.value {
  color: var(--muted);
  font-size: clamp(.58rem, 1.15vmin, .82rem);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.45;
  text-transform: uppercase;
}

.identity h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(.68rem, 1.3vmin, .92rem);
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.controls {
  display: grid;
  justify-items: end;
  gap: .32rem;
  min-width: min(21rem, 42vw);
  pointer-events: auto;
}

.buttons {
  display: flex;
  gap: .35rem;
}

.controls button,
.back {
  min-width: 2.15rem;
  min-height: 2.15rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ghost);
  border-radius: 0;
  color: var(--muted);
  background: var(--panel);
  text-decoration: none;
  cursor: pointer;
}

.controls button:hover,
.controls button:focus-visible,
.back:hover,
.back:focus-visible {
  color: var(--ink);
  border-color: var(--line-strong);
  outline: none;
}

.controls input[type="range"] {
  width: min(21rem, 42vw);
  accent-color: var(--accent);
  cursor: ew-resize;
}

.settings-panel {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 5;
  display: grid;
  grid-template-columns: auto auto;
  gap: .3rem;
  padding: .38rem;
  border: 1px solid var(--ghost);
  background: var(--panel);
  backdrop-filter: blur(16px);
}

.setting {
  display: grid;
  grid-template-columns: auto minmax(9.75rem, auto);
  align-items: center;
  gap: .6rem;
}

.setting label {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.setting select,
.cycle {
  min-height: 2rem;
  border: 1px solid var(--ghost);
  border-radius: 0;
  color: var(--ink);
  background: var(--bg);
}

.setting select {
  padding: 0 2rem 0 .65rem;
  cursor: pointer;
}

.cycle {
  min-width: 2rem;
  padding: 0;
  cursor: pointer;
}

.setting select:hover,
.setting select:focus-visible,
.cycle:hover,
.cycle:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.back {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 5;
  pointer-events: auto;
}

.phrase {
  position: fixed;
  left: 50%;
  bottom: max(1.35rem, env(safe-area-inset-bottom));
  z-index: 3;
  max-width: calc(100vw - 9rem);
  transform: translateX(-50%);
  color: var(--muted);
  font-size: clamp(.6rem, 1.25vmin, .88rem);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

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

body[data-embed="true"] .chrome,
body[data-embed="true"] .back,
body[data-embed="true"] .phrase,
body[data-embed="true"] .settings-panel { display: none; }

body[data-embed="true"] .clock-app { padding: 5vmin; }
body[data-embed="true"] .dial { width: min(96vmin, 96vw); }

body[data-mode="spline"] .mechanism { stroke-dasharray: .01 0; }
body[data-mode="orbit"] .guide { opacity: .62; }
body[data-mode="gate"] .gate { stroke: var(--accent); }

@media (max-width: 700px) {
  .clock-app {
    padding: calc(3.9rem + env(safe-area-inset-top)) .35rem calc(7.4rem + env(safe-area-inset-bottom));
  }
  .dial { width: min(86vw, calc(100dvh - 11.5rem)); }
  .chrome { gap: .5rem; }
  .identity { max-width: 44vw; }
  .identity .instructions { display: none; }
  .controls { min-width: 45vw; }
  .controls input[type="range"] { width: 45vw; }
  .controls button,
  .back {
    min-width: 1.85rem;
    min-height: 1.85rem;
    font-size: .68rem;
  }
  .phrase { bottom: max(.85rem, env(safe-area-inset-bottom)); }
  .settings-panel {
    right: max(.65rem, env(safe-area-inset-right));
    bottom: max(2.45rem, calc(env(safe-area-inset-bottom) + 1.9rem));
    grid-template-columns: 1fr auto;
    max-width: calc(100vw - 4.2rem - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding: .28rem;
  }
  .setting { grid-template-columns: 1fr; gap: .2rem; }
  .setting select { min-width: 0; max-width: 9.4rem; }
  .setting label { font-size: .5rem; }
}

@media (max-width: 520px) {
  .eyebrow { display: none; }
  .identity { max-width: 52vw; }
  .controls { min-width: 0; }
  .controls input[type="range"],
  .controls #previous,
  .controls #next { display: none; }
  .controls .buttons {
    position: fixed;
    top: max(2.8rem, calc(env(safe-area-inset-top) + 2.35rem));
    right: max(.65rem, env(safe-area-inset-right));
  }
  .controls #random { width: auto; padding: 0 .65rem; }
  .settings-panel {
    width: calc(100vw - 5.5rem - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .setting,
  .setting select { min-width: 0; width: 100%; max-width: none; }
  .phrase {
    max-width: calc(100vw - 6rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}