/* The homepage wheel (tools/templates/v3/wheel.mjs, behaviour assets/v3/wheel.mjs): the owner's
   tagline "Code. Solve. Simulate." beside a glossy dial of the three stages around a silicon
   wafer. Colours come from the screen tokens, so every theme keeps a dark, legible dial. */
.d-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: 40px 0 56px; }
.d-hero h1 { font: 650 clamp(64px, 7.4vw, 124px)/.92 var(--display); font-stretch: 70%; letter-spacing: -.02em; color: var(--ink); }
.d-hero h1 span { display: block; transition: color .45s var(--ease, ease); }
.d-hero h1 span.on { color: var(--accent); }
.d-hero .sub { margin: 26px 0 0; font-size: 21px; line-height: 1.5; color: var(--ink-2); max-width: 26em; }
.wheel { position: relative; width: 100%; max-width: 600px; margin-left: auto; aspect-ratio: 1; }
.wheel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel-svg { filter: drop-shadow(0 28px 40px rgb(0 0 0 / .42)) drop-shadow(0 4px 8px rgb(0 0 0 / .3)); }
.rim { stroke: var(--rule-strong); stroke-width: 2; }
.rim-top { stop-color: color-mix(in srgb, var(--screen-muted) 38%, var(--screen)); } .rim-mid { stop-color: var(--screen); } .rim-bot { stop-color: color-mix(in srgb, #000 35%, var(--screen)); }
.rim-edge { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 1.5; }
.gs-in { stop-color: color-mix(in srgb, var(--st) 10%, var(--screen)); } .gs-mid { stop-color: color-mix(in srgb, var(--st) 28%, var(--screen-2)); } .gs-out { stop-color: color-mix(in srgb, var(--st) 52%, var(--screen-2)); }
.band-sheen { pointer-events: none; }
.band-glint { fill: none; stroke: rgb(255 255 255 / .45); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.hub-hi { stop-color: color-mix(in srgb, var(--screen-muted) 30%, var(--screen-2)); } .hub-mid { stop-color: var(--screen); } .hub-lo { stop-color: color-mix(in srgb, #000 30%, var(--screen)); }
.hub-ring { fill: none; stroke: rgb(255 255 255 / .10); stroke-width: 1.5; }
.wf-hi { stop-color: color-mix(in srgb, var(--screen-muted) 22%, var(--screen-2)); } .wf-lo { stop-color: color-mix(in srgb, #000 25%, var(--screen-2)); }
.dome, .glint { pointer-events: none; }
.glint { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 3; stroke-linecap: round; }
.bead-c { stop-color: var(--wave-cursor); } .bead-d { stop-color: color-mix(in srgb, #000 35%, var(--wave-cursor)); }
.wafer-sheen { position: absolute; left: 50%; top: 50%; width: 65.3%; aspect-ratio: 1; margin: -32.65% 0 0 -32.65%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: conic-gradient(from 20deg, rgb(255 60 170 / .32), rgb(80 170 255 / .30), rgb(90 255 190 / .24), rgb(255 220 90 / .28), rgb(255 60 170 / .32));
  -webkit-mask: radial-gradient(circle closest-side, transparent 63.5%, #000 64.5%, #000 99%, transparent 100%); mask: radial-gradient(circle closest-side, transparent 63.5%, #000 64.5%, #000 99%, transparent 100%); }
.ticks line { stroke: var(--screen-rule); stroke-width: 1.5; } .ticks line.long { stroke: var(--screen-muted); stroke-width: 2; }
.seg .band { stroke-width: 2; transition: fill .3s, stroke .3s; }
.seg .hit { fill: transparent; }
.seg.on .pop { filter: drop-shadow(0 22px 24px rgb(0 0 0 / .55)) drop-shadow(0 0 16px color-mix(in srgb, var(--st) 45%, transparent)); }
[data-theme="contrast"] .seg.on .pop { filter: none; }
.st-code { --st: var(--scope-sv); } .st-solve { --st: var(--scope-cov); } .st-sim { --st: var(--scope-uvm); }
.seg .band { stroke: color-mix(in srgb, var(--st) 70%, var(--screen)); transition: filter .3s; }
.seg.on .band, .seg:hover .band, .seg:focus-visible .band { stroke: var(--st); filter: brightness(1.28) saturate(1.15); }
.seg-label { fill: var(--screen-ink); font: 700 19px var(--mono); letter-spacing: .26em; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.seg:focus { outline: none; } .seg:focus-visible .band { stroke-width: 4; }
.wafer-disc { stroke: var(--screen-rule); stroke-width: 2; }
.wafer-notch { fill: var(--screen); }
.wafer rect { fill: none; stroke: var(--screen-rule); stroke-width: 1.2; }
.wafer rect.lit { fill: color-mix(in srgb, var(--wave-cursor) 22%, transparent); stroke: color-mix(in srgb, var(--wave-cursor) 70%, transparent); }
.hub { stroke: var(--screen-rule); stroke-width: 2; }
.pointer path { fill: var(--wave-cursor); }
.hub-card { z-index: 1; position: absolute; left: 50%; top: 50%; width: 38%; transform: translate(-50%, -50%); text-align: center; color: var(--screen-ink); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .35s, visibility .35s; }
.hub-card.on { opacity: 1; pointer-events: auto; visibility: visible; }
.hub-title { margin: 0; font: 650 30px/1 var(--display); font-stretch: 72%; color: var(--wave-cursor); }
.hub-line { margin: 8px 0 0; font: 400 13.5px/1.45 var(--sans); color: var(--screen-muted); }
.hub-go { display: inline-block; margin-top: 8px; font: 700 13.5px var(--sans); color: var(--screen-ink); }
.d-code { margin: 10px auto 0; padding: 8px 10px; width: max-content; max-width: 100%; text-align: left; font: 500 12px/1.45 var(--mono); color: var(--screen-ink); background: var(--screen-2); border: 1px solid var(--screen-rule); border-radius: 4px; white-space: pre; overflow: hidden; }
.d-code .k { color: var(--scope-sv); }
.d-bugs { margin: 10px auto 0; padding: 0; list-style: none; width: max-content; text-align: left; font: 500 12.5px/1.6 var(--mono); }
.d-bugs li::before { content: '✓'; display: inline-block; width: 1.3em; color: var(--scope-sv); font-weight: 700; }
.d-bugs li.miss::before { content: '✗'; color: var(--wave-mismatch); } .d-bugs li.miss { color: var(--wave-mismatch); }
.d-wave { display: block; width: 86%; margin: 10px auto 0; fill: none; stroke: var(--wave-signal); stroke-width: 2; }
.d-wave .bus { stroke: var(--scope-uvm); }
.wheel-links { display: none; }
@media (max-width: 1000px) { .d-hero { grid-template-columns: 1fr; } .wheel { margin: 0 auto; } }
@media (max-width: 560px) { .hub-card { width: 46%; } .hub-title { font-size: 22px; } .hub-line { display: none; } .d-code { font-size: 10px; } .d-bugs { font-size: 10.5px; } .seg-label { font-size: 24px; } }
@media (scripting: none) { .wheel-links { display: block; } }

/* ---- the secret (owner's easter egg, 2026-10-27; behaviour in assets/v3/wheel.mjs) ----
   The hub is a sphere: each click squashes it and spins the wheel faster; the fifth click breaks
   the wheel into three spheres, one per stage, that float in its place. */
.dome, .glint, .pointer, .hub-shade, .hub-glint { pointer-events: none; }
.hub-sphere.poked { animation: hub-poke .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hub-poke { 0% { scale: 1; } 35% { scale: .93; } 100% { scale: 1; } }
.orbs { display: none; }
.wheel.broken .orbs, .orbs:not([aria-hidden]) { display: inline; }
.wheel-svg > :not(.orbs):not(defs) { transition: opacity .5s ease .15s, scale .7s cubic-bezier(.2, .8, .2, 1) .1s; }
.wheel.broken .wheel-svg > :not(.orbs):not(defs) { opacity: 0; scale: .3; pointer-events: none; transition: opacity .45s ease .1s, scale .6s cubic-bezier(.6, 0, .8, .2); }
.wheel.broken .hub-card, .wheel.broken .wafer-sheen { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.orb { cursor: pointer; outline: none; filter: drop-shadow(0 18px 22px rgb(0 0 0 / .42)) drop-shadow(0 0 20px color-mix(in srgb, var(--st) 45%, transparent)); }
.orb-in { transform-box: fill-box; transform-origin: center; transition: scale .25s cubic-bezier(.3, 1.6, .5, 1); }
.orb:hover .orb-in, .orb:focus-visible .orb-in { scale: 1.08; }
.orb:focus-visible .orb-in > circle:first-child { stroke: var(--focus); stroke-width: 4; }
.orb-hi { stop-color: color-mix(in srgb, #fff 55%, var(--st)); } .orb-mid { stop-color: var(--st); } .orb-lo { stop-color: color-mix(in srgb, #000 30%, var(--st)); }
.orb-word { font: 650 28px var(--display); letter-spacing: -.02em; fill: var(--screen); text-anchor: middle; pointer-events: none; }
.orb-sub { font: 600 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: color-mix(in srgb, var(--screen) 75%, transparent); text-anchor: middle; pointer-events: none; }
.burst { fill: none; stroke: var(--wave-cursor); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.burst.go { animation: burst .8s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes burst { 0% { opacity: .9; scale: .3; stroke-width: 10; } 100% { opacity: 0; scale: 4.5; stroke-width: 1; } }
.wheel-rebuild { position: absolute; left: 50%; bottom: 1%; translate: -50% 0; z-index: 3; padding: 9px 18px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: color-mix(in srgb, var(--paper) 72%, transparent);
  color: var(--ink); font: 560 14px var(--sans); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wheel-rebuild:hover { background: color-mix(in srgb, var(--ink) 10%, var(--paper)); }
.wheel-rebuild[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hub-sphere.poked, .burst.go { animation: none; }
  .orb-in, .wheel-svg > :not(.orbs):not(defs) { transition: none !important; }
}

/* ---- the way out: a ball that fills the screen, then the next page (assets/v3/zoom.mjs) ---- */
.zoom-ball, .zoom-cover { position: fixed; z-index: 2147483646; pointer-events: none; }
.zoom-cover { inset: 0; opacity: 0; }
.zoom-ball { border-radius: 50%; display: grid; place-items: center; transform: scale(.3); will-change: transform; }
.zoom-ball span { font: 650 26px var(--display); letter-spacing: -.02em; color: var(--screen); }

/* ---- leaving: the chosen arc becomes a sphere and pulls away (assets/v3/wheel.mjs detach) ---- */
.blob { fill: none; stroke: var(--st); stroke-linecap: round; pointer-events: none;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / .45)) drop-shadow(0 0 22px color-mix(in srgb, var(--st) 55%, transparent)); }
.wheel.detaching .wheel-svg > :not(.blob):not(.blob-gloss):not(defs) { opacity: .4; scale: .9; transition: opacity .45s ease, scale .5s cubic-bezier(.2, .8, .2, 1); }
.wheel.detaching .hub-card, .wheel.detaching .wafer-sheen { opacity: 0 !important; transition: opacity .25s; }
.blob-gloss { pointer-events: none; opacity: 0; }
[data-theme="contrast"] .blob { filter: none; }

/* ---- the Fallout theme's selector knob (styled in lit.css); hidden in every other theme ---- */
.knob { display: none; }