html, body { margin: 0; height: 100%; background: #070708; overflow: hidden; overscroll-behavior: none; }

#scene {
  position: fixed; top: 0; left: 0; display: block;
  image-rendering: crisp-edges; image-rendering: pixelated;
  touch-action: none; cursor: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}

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

.plain {
  position: fixed; top: 50%; left: 0; right: 0; margin: -.5em 0 0; text-align: center;
  font: 600 14px/1 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  letter-spacing: .28em; text-transform: uppercase; color: #5a6072;
}

:root {
  --key: #1c212e; --edge: #2c3242; --hi: #4a536b; --lo: #040508;
  --ink: #b4bdd4; --dim: #69728a; --lit: #4a98f2; --glow: #c4dbff; --crt: #05080f;
}

.pie {
  position: fixed; left: 0; bottom: 0; z-index: 2; width: 350px; height: 350px; pointer-events: none;
  transform: scale(var(--k, 1)); transform-origin: 0 100%;
  font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; text-transform: uppercase; color: var(--ink);
}
.pie canvas { display: block; image-rendering: crisp-edges; image-rendering: pixelated; }
.pie [hidden] { display: none; }
.pie p { margin: 0; }
.pie button {
  padding: 0; font: inherit; text-transform: inherit; border: 0; border-radius: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.pie-body {
  position: absolute; left: 0; bottom: 0; width: 350px; height: 350px; pointer-events: auto;
  clip-path: circle(350px at 0 100%); transform: scale(.2); transform-origin: 0 100%; visibility: hidden;
  transition: transform .2s steps(5), visibility 0s .2s;
}
.pie.open .pie-body { transform: none; visibility: visible; transition: transform .2s steps(5); }
#pie-art { position: absolute; left: 0; bottom: 0; width: 350px; height: 350px; }

.slice, .wedge { position: absolute; left: 0; bottom: 0; color: var(--ink); background: none; }
.slice { width: 166px; height: 166px; }
.wedge { width: 350px; height: 350px; }
.slice span, .wedge span { position: absolute; }
.slice:hover span, .wedge:hover span { filter: brightness(1.45); }
.slice[aria-pressed="true"], .wedge[aria-pressed="true"], .wedge[aria-checked="true"] { color: #ffffff; }

.page { position: absolute; left: 0; bottom: 0; width: 350px; height: 350px; visibility: hidden; pointer-events: none; }
.pie.open .page.on { visibility: visible; }
.page > * { pointer-events: auto; }

.readout { position: absolute; box-sizing: border-box; width: 190px; padding: 8px; color: var(--glow); }
.readout canvas { margin: 0 auto; }
.pie a { display: block; color: var(--lit); text-decoration: none; }
.pie a:hover { filter: brightness(1.4); }

.hub {
  position: absolute; left: 0; bottom: 0; width: 72px; height: 72px; background: none; pointer-events: auto;
  clip-path: circle(72px at 0 100%);
}
.hub canvas { width: 72px; height: 72px; }
.hub:hover, .hub:focus-visible { filter: brightness(1.35); }

.pie button:focus-visible { outline: none; }
.pie a:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.slice:focus-visible span, .wedge:focus-visible span { outline: 2px solid var(--glow); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pie-body, .pie.open .pie-body { transition: none; }
}