*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--hit); color: var(--on-hit); }
:focus-visible { outline: 2px solid var(--hit); outline-offset: 3px; }
[data-theme='light'] :focus-visible { outline-color: var(--blue); }
/* Chamfers (clip-path) and scrolling strips clip an outline drawn outside the control, and a chamfer's own fill would paint over one drawn inside. The ring is therefore the chamfer's
   own border, made thick and bright; controls without a chamfer get an inset outline. */
.cut:focus-visible { outline: none; --edge: var(--hit); --bw: 4px; }
[data-theme='light'] .cut:focus-visible { --edge: var(--blue); }
.btn--hit:focus-visible, [data-theme='light'] .btn--hit:focus-visible { --edge: var(--on-hit); }
.mode:focus-visible, .fchip:focus-visible, .seg2__a:focus-visible, .ltab:focus-visible, .theme-switch button:focus-visible { outline: 3px solid var(--hit); outline-offset: -5px; }
[data-theme='light'] .mode:focus-visible, [data-theme='light'] .fchip:focus-visible, [data-theme='light'] .seg2__a:focus-visible, [data-theme='light'] .ltab:focus-visible, [data-theme='light'] .theme-switch button:focus-visible { outline-color: var(--blue); }
.mode.is-on:focus-visible, .seg2__a.is-on:focus-visible, .ltab.is-on:focus-visible, [data-theme='light'] .mode.is-on:focus-visible, [data-theme='light'] .seg2__a.is-on:focus-visible, [data-theme='light'] .ltab.is-on:focus-visible { outline-color: var(--on-hit); }
.fchip.is-on:focus-visible, [data-theme='light'] .fchip.is-on:focus-visible { outline-color: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mono { font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }

/* Chamfered box: 1.5px "border" drawn by an inset clone so the cut corners stay outlined. */
.cut {
  --c: var(--cut); --bw: 1.5px;
  --edge: var(--line-strong); --fill: var(--bg-2);
  position: relative; background: var(--edge);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.cut::before {
  content: ''; position: absolute; inset: var(--bw); background: var(--fill); z-index: 0;
  --i: calc(var(--c) - var(--bw) * .41);
  clip-path: polygon(var(--i) 0, 100% 0, 100% calc(100% - var(--i)), calc(100% - var(--i)) 100%, 0 100%, 0 var(--i));
}
.cut > * { position: relative; z-index: 1; }

/* Buttons */
.btn {
  --edge: var(--ink); --fill: var(--bg-2);
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px;
  font: 600 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  transition: transform .25s var(--ease-out), color .2s;
}
.btn:hover { transform: translate(-2px, -2px); }
.btn:active { transform: translate(0, 0) scale(.98); }
.btn--hit { --edge: var(--hit); --fill: var(--hit); color: var(--on-hit); }
.btn--hit::before { background: var(--hit); }
.btn--ghost { --edge: var(--line-strong); }

/* Theme switch — two-position segmented cut */
.theme-switch { display: inline-flex; --edge: var(--line-strong); --fill: var(--bg-2); }
.theme-switch button {
  padding: 9px 12px; font: 600 10px/1 var(--font-mono); letter-spacing: .16em; color: var(--ink-3);
  transition: color .2s, background .2s;
}
.theme-switch button[aria-pressed='true'] { background: var(--hit); color: var(--on-hit); }
.theme-switch button:not([aria-pressed='true']):hover { color: var(--ink); }

/* Ghost figure. Dark: pre-processed render (labels removed, edges faded, luminance converted to alpha)
   — no blend modes, so it can never show a box. Light: the transparent cut-out of the same character. */
.ghost { position: relative; aspect-ratio: 1; width: 100%; --visor-x: 54%; --visor-y: 13.3%; --core-x: 55.4%; --core-y: 29.6%; }
.ghost img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.ghost__dark { }
.ghost__light { display: none; }
[data-theme='light'] .ghost { --visor-x: 54.4%; --visor-y: 10.8%; --core-x: 56.6%; --core-y: 27%; }
[data-theme='light'] .ghost__dark { display: none; }
[data-theme='light'] .ghost__light { display: block; }
.ghost__visor, .ghost__core { position: absolute; pointer-events: none; }
.ghost__visor { left: var(--visor-x); top: var(--visor-y); width: 9%; height: 1.3%; transform: translate(-50%, -50%);
  background: var(--blue-hot); border-radius: 99px; filter: blur(5px); opacity: 0; transition: opacity .25s; }
[data-theme='light'] .ghost__visor { mix-blend-mode: normal; background: var(--blue); }
.ghost__core { left: var(--core-x); top: var(--core-y); width: 5%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid var(--blue-hot); opacity: 0; }
[data-theme='light'] .ghost__core { border-color: var(--blue); }
.ghost.is-pulse .ghost__visor { opacity: .9; transition-duration: .05s; }