@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/Inter-Regular-BMa5IoM-.ttf') format('truetype');
}
@font-face {
  font-family: Literata;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/Literata-Semibold-B_IWt0sT.ttf') format('truetype');
}

* { box-sizing: border-box; }
body { margin: 0; font: 400 16px/1.6 Inter, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 5px; }
button, select { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 8px 14px; background: var(--page-background); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.home-menu { --home-menu-padding: 28px; --home-sphere-size: 264.5px; --home-picker-width: 109.25px; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 196px; padding: 34px var(--home-menu-padding); }
.home-logo { flex-shrink: 0; position: relative; display: block; width: 136px; aspect-ratio: 1169 / 1142; }
.home-logo canvas, .home-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-logo canvas { filter: sepia(.33); }
.home-logo svg path { fill: var(--page-foreground); }
.home-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 54px; font-size: 13px; }
.home-menu-toggle, .home-mobile-rule { display: none; }
.home-nav[hidden] { display: none; }
.home-nav a { text-decoration: none; }
.home-nav a:hover, .home-nav a[aria-current] { text-decoration: underline; }
.home-main { margin-left: 196px; padding: 48px clamp(28px, 4.4vw, 80px) 80px; padding-left: max(clamp(28px, 4.4vw, 80px), calc(var(--home-ring-right, 265px) + 24px - 196px)); }
.home-article { --home-text-measure: 57ch; max-width: var(--home-text-measure); margin: auto; font-size: 17px; }
.home-feature { position: relative; }
.home-feature .scene-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.home-feature .scene-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.home-feature .scene-stage canvas:active { cursor: grabbing; }
.scene-message { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 24px; text-align: center; }
.scene-message[hidden] { display: none; }
.home-caption { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:1.25em; width:100%; margin-top:5px; padding-inline:2.5px; color:color-mix(in srgb, var(--page-foreground) 50%, var(--page-background)); font:italic 600 .68em/1.45 Literata, Georgia, serif; font-variant-numeric:tabular-nums; }
.home-caption table { width:100%; min-width:0; border-collapse:collapse; table-layout:auto; }
.home-caption :is(th,td) { padding:0; border:0; text-align:left; vertical-align:top; }
.home-caption th { padding-right:.7em; font:inherit; white-space:nowrap; }
.home-caption td { padding-right:1.5em; }
.home-caption td:last-child { padding-right:0; overflow-wrap:anywhere; }
.home-caption output { color:inherit; font:inherit; }
.home-caption-label-column { width:1%; }
.home-caption-byte-column { width:4.5ch; }
.home-caption-countdown { min-width:4ch; text-align:right; white-space:nowrap; }
.home-caption-countdown[hidden] { display:none; }
/* Keep the ring and knob at least 8px from the window; allow right-side overflow. */
.home-menu .pad-stage { position: relative; flex-shrink: 0; align-self: flex-start; width: var(--home-sphere-size); height: var(--home-sphere-size); margin: auto 0 0 calc(-1 * var(--home-menu-padding)); padding: 0; }
.home-menu .pad-picker { top: 91%; bottom: auto; font-size: 11.5px; }
.home-menu .pad-picker select { width: var(--home-picker-width); padding: 4.3125px 5.75px; border-radius: 4.3125px; }
.home-menu .pad-landmark-label { font-family: Inter, sans-serif; }
.home-nav { margin-bottom: 40px; }
.home-heading { padding: 30px 0; }
.home-heading h1 {text-align:center; margin: 0; font: 600 1.2em Literata, Georgia, serif; text-transform: uppercase; letter-spacing: -.035em; }
.home-body { max-width: var(--home-text-measure); font-size: inherit; line-height: 1.95; }
.home-body p { margin: 0 0 1.6em; }

@media (min-width: 801px) {
  .home-menu::after { content: ""; position: absolute; right: 0; top: var(--home-divider-top, 48px); width: 1px; height: var(--home-divider-height, 0px); background: var(--page-border); pointer-events: none; }
  .home-menu .pad-landmark-point { width: 6.133px; height: 6.133px; }
  .home-menu .pad-landmark-label { padding: 1.15px 4.6px; border-radius: 3.45px; font-size: 9.2px; line-height: 12.65px; }
}
@media (max-width: 1000px) {
  .home-menu { --home-menu-padding: 22px; padding: 28px var(--home-menu-padding); }
  .home-logo { width: 116px; }
}
@media (min-width: 801px) and (max-height: 640px) {
  .home-menu { position: absolute; bottom: auto; min-height: 100svh; }
}
@media (max-width: 800px) {
  .home-menu { --home-menu-padding: 24px; --home-sphere-size: min(197.8368px, calc((100vw - 48px) * .512)); --home-mobile-logo-size: 73.6px; --home-mobile-top-padding: 18px; --home-mobile-bar-height: calc(var(--home-mobile-top-padding) * 2 + var(--home-mobile-logo-size) * 1142 / 1169); position: relative; inset: auto; display: block; width: 100%; height: var(--home-mobile-bar-height); padding: var(--home-mobile-top-padding) var(--home-menu-padding); margin-bottom: calc(var(--home-sphere-size) + 24px - var(--home-mobile-bar-height)); }
  .home-logo { z-index: 3; width: var(--home-mobile-logo-size); }
  .home-menu-toggle { display: grid; place-items: center; position: absolute; z-index: 6; top: 18px; right: var(--home-menu-padding); width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--page-foreground); cursor: pointer; }
  .home-menu-toggle:focus-visible { outline: 1px solid var(--page-foreground); outline-offset: 2px; }
  .home-nav { position: absolute; z-index: 7; top: 70px; right: var(--home-menu-padding); min-width: 150px; gap: 0; margin: 0; padding: 8px; border: 1px solid var(--page-border); border-radius: 4px; background: var(--page-background); font-size: 13px; }
  .home-nav a { display: block; width: 100%; min-height: 44px; padding: 11px 12px; }
  .home-nav .home-nav-current { display: block; }
  .home-mobile-rule { display: block; position: absolute; top: calc(var(--home-mobile-bar-height) - 1px); height: 1px; background: var(--page-border); pointer-events: none; }
  .home-mobile-rule-left { left: var(--home-menu-padding); width: var(--home-rule-left-width, 0px); }
  .home-mobile-rule-right { right: var(--home-menu-padding); width: var(--home-rule-right-width, 0px); }
  .home-main { margin: 0; padding: 32px 24px 48px; }
  .home-article { font-size: clamp(14px, 3.6vw, 16px); }
  .home-menu .pad-stage { position: absolute; z-index: 2; top: 8px; left: 50%; transform: translateX(-50%); width: var(--home-sphere-size); height: var(--home-sphere-size); margin: 0; }
  .home-heading { padding: 32px 0; text-align: center; }
  .home-body { margin-inline: auto; line-height: 1.95; }
  .home-caption { gap:.65em; font-size:.66em; }
  .home-caption th { padding-right:.45em; }
  .home-caption td { padding-right:.75em; }
}
@media (max-width: 380px) {
  .home-menu { --home-menu-padding: 16px; --home-mobile-logo-size: 64.4px; --home-mobile-top-padding: 16px; }
  .home-menu-toggle { top: 16px; }
  .home-main { padding-inline: 16px; }
}

.home-debug { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--page-border); }
.home-debug h2 { margin: 0 0 24px; font-size: 18px; }
.home-debug fieldset { min-width: 0; margin: 0 0 24px; padding: 16px; border: 1px solid var(--page-border); }
.home-debug legend { padding-inline: 6px; font-weight: 700; }
.home-debug label { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-block: 14px; font-size: 13px; }
.home-debug input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--page-foreground); }
.home-debug input[type="checkbox"] { grid-column: 2; grid-row: 1; accent-color: var(--page-foreground); }
.home-debug output { font-variant-numeric: tabular-nums; }
.home-debug p { min-height: 1.5em; margin-bottom: 0; font-size: 12px; }