.ab {
  --ab-grid:color-mix(in oklab, var(--brand-ink) 6%, transparent);
  --ab-glow:color-mix(in oklab, var(--brand-primary) 38%, transparent);
  --ab-aurora:.16; --ab-orb:.14; --ab-grain:.03;
  position:absolute; inset:0; overflow:hidden; pointer-events:none; animation:ab-fade 1.4s ease both;
}
.dark .ab { --ab-grid:color-mix(in oklab, var(--brand-paper) 5%, transparent); --ab-aurora:.26; --ab-orb:.2; --ab-grain:.045; }
.ab-aurora { --aw:min(1200px, 170vw); position:absolute; inset-inline-start:50%; top:calc(-48vh - var(--aw) * .275); width:calc(var(--aw) * 1.55); aspect-ratio:1; translate:-50% 0;
  background:url("../images/aurora.webp") center / 100% 100% no-repeat; opacity:var(--ab-aurora); will-change:rotate; animation:ab-spin 60s linear infinite; }
[dir=rtl] .ab-aurora { translate:50% 0; }
.ab-orb { position:absolute; bottom:-560px; inset-inline-end:-480px; width:1080px; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 90%, transparent) 30%, color-mix(in srgb, var(--brand-primary) 50%, transparent) 52%, color-mix(in srgb, var(--brand-primary) 16%, transparent) 76%, transparent);
  opacity:var(--ab-orb); will-change:transform; animation:ab-drift 26s ease-in-out infinite alternate; }
.ab-grid, .ab-grid-glow { position:absolute; inset:0; background-size:52px 52px; background-position:50% 0;
  background-image:linear-gradient(var(--ab-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ab-grid) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 42%, #000 20%, transparent 80%); mask-image:radial-gradient(ellipse 70% 65% at 50% 42%, #000 20%, transparent 80%); }
.ab-grid-glow { --ab-grid:var(--ab-glow); opacity:0; transition:opacity .6s ease;
  -webkit-mask-image:radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 70%); mask-image:radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 70%); }
[data-pointer] .ab-grid-glow { opacity:1; }
.ab-grain { position:absolute; inset:0; opacity:var(--ab-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes ab-spin { to { rotate:1turn; } }
@keyframes ab-fade { from { opacity:0; } }
@keyframes ab-drift { to { transform:translate(-160px, -140px) scale(1.15); } }

.dot { --dot-paper:#eaded0; --dot-size:min(29cqw, 23cqh); --dial:calc(var(--dot-size) * 2.5); --dial-ink:color-mix(in oklab, var(--brand-ink) 34%, transparent);
  position:relative; overflow:hidden; isolation:isolate; container-type:size; background:var(--dot-paper); color:var(--brand-ink); }
.dot-photo { position:absolute; left:calc(50% - var(--dot-size) / .58); top:calc(50% - var(--dot-size) / .58); width:calc(var(--dot-size) / .29); height:calc(var(--dot-size) / .29);
  max-width:none; user-select:none; -webkit-user-drag:none; -webkit-mask-image:radial-gradient(closest-side, #000 62%, transparent 98%); mask-image:radial-gradient(closest-side, #000 62%, transparent 98%); }
.dot-dark { --dot-paper:#0c1c30; --dial-ink:color-mix(in oklab, var(--brand-paper) 30%, transparent); color:var(--brand-paper); }
.dot-status { position:absolute; z-index:2; bottom:clamp(24px, 5%, 44px); inset-inline-start:clamp(28px, 7%, 64px); display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-feature-settings:"tnum" 1; color:color-mix(in oklab, currentColor 62%, transparent); }
.dot-status i { width:7px; height:7px; border-radius:50%; background:oklch(.7 .15 155); box-shadow:0 0 0 3px oklch(.7 .15 155 / 18%); animation:dot-blink 2.6s ease-in-out infinite; }
.dd { position:absolute; left:calc(50% - var(--dial) / 2); top:calc(50% - var(--dial) / 2); width:var(--dial); height:var(--dial); pointer-events:none; }
.dd-face { position:absolute; inset:0; width:100%; height:100%; overflow:visible; mix-blend-mode:multiply; }
.dot-dark .dd-face { mix-blend-mode:screen; }
.dd-face line { stroke:var(--dial-ink); stroke-width:.6; stroke-linecap:round; }
.dd-face .dd-minor { stroke-width:.45; opacity:.6; }
.dd-face .dd-major { stroke-width:1.2; }
.dd-minute { fill:currentColor; opacity:.7; }
.dd-hour { fill:var(--dial-ink); font-size:8px; font-weight:500; text-anchor:middle; dominant-baseline:central; font-feature-settings:"tnum" 1; letter-spacing:.04em; }
.dd-arm { position:absolute; left:50%; top:50%; width:0; height:0; }
.dd-time { position:absolute; left:calc(var(--dial) * .62); top:0; translate:-50% -50%; display:flex; flex-direction:column; align-items:center; font-size:11px; line-height:1.3;
  white-space:nowrap; color:color-mix(in oklab, currentColor 55%, transparent); }
.dd-time b { font-size:15px; font-weight:600; font-feature-settings:"tnum" 1; color:color-mix(in oklab, currentColor 85%, transparent); }
@keyframes dot-blink { 50% { opacity:.4; } }