:root {
  --rule-ink: #11151C;
  --porcelain-day: #F4F0E6;
  --sundial-blue: #2B5D7C;
  --verdict-vermilion: #E24A2A;
  --brass-axiom: #B38B2E;
  --mist-green: #CAD8C5;
  --night-graphite: #252B33;
  --newsreader: "Newsreader", serif;
  --noto: "Noto Serif JP", serif;
  --space: "Space Grotesk", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --font-usage-note-a: "IBM Plex Mono very sparingly for operators";
  --font-usage-note-b: "Space Grotesk as an instrument label voice and IBM Plex Mono only as a small symbolic accent.";
  --font-usage-note-c: "Space Grotesk** for navigation ticks";
}

* { box-sizing: border-box; }

html { background: var(--porcelain-day); color: var(--rule-ink); }

body {
  margin: 0;
  min-height: 600vh;
  font-family: var(--newsreader);
  background: var(--porcelain-day);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.logic-day { position: relative; min-height: 600vh; }

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 48%, rgba(244, 240, 230, 0.96) 0 14%, transparent 14.4%),
    linear-gradient(120deg, rgba(202, 216, 197, 0.34), transparent 43%),
    var(--porcelain-day);
}

.paper-grid {
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(rgba(43, 93, 124, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 93, 124, .14) 1px, transparent 1px),
    repeating-linear-gradient(117deg, transparent 0 42px, rgba(226, 74, 42, .25) 42px 44px, transparent 44px 126px);
  background-size: 76px 76px, 76px 76px, 260px 260px;
  mask-image: radial-gradient(circle at 50% 50%, black 0 72%, transparent 100%);
}

.daylight-split {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(43, 93, 124, .10) 0 50%, rgba(17, 21, 28, .045) 50% 100%);
  clip-path: polygon(0 0, 53% 0, 45% 100%, 0 100%);
}

.wordmark-lock {
  position: absolute;
  z-index: 8;
  left: clamp(18px, 4vw, 64px);
  top: clamp(18px, 5vh, 56px);
  display: grid;
  grid-template-columns: 16px auto;
  gap: 8px 14px;
  align-items: center;
  color: var(--rule-ink);
}

.brass-pin {
  width: 16px;
  height: 72px;
  grid-row: 1 / span 2;
  background: linear-gradient(var(--brass-axiom), transparent);
  border-radius: 99px;
  box-shadow: 0 0 0 1px rgba(179, 139, 46, .45), 0 12px 24px rgba(179, 139, 46, .18);
}

.wordmark-lock h1 {
  margin: 0;
  font-family: var(--noto);
  font-size: clamp(2.1rem, 5vw, 6.8rem);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .86;
}

.wordmark-lock p {
  margin: 0;
  font-family: var(--space);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sundial-blue);
}

.sundial {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(86vw, 86vh);
  height: min(86vw, 86vh);
  transform: translate(-50%, -50%) rotate(var(--rotation));
  transition: transform 850ms cubic-bezier(.2, .72, .12, 1);
  filter: drop-shadow(calc(var(--shadow-x) * .05) calc(var(--shadow-y) * .05) 30px rgba(43, 93, 124, .18));
}

.outer-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(179, 139, 46, .72);
  background:
    repeating-conic-gradient(from -1deg, rgba(179, 139, 46, .92) 0 1deg, transparent 1deg 7.5deg),
    radial-gradient(circle, transparent 0 58%, rgba(202, 216, 197, .18) 58.3% 74%, transparent 74.4%);
  box-shadow: inset 0 0 0 18px rgba(179, 139, 46, .08), inset 0 0 0 82px rgba(43, 93, 124, .06);
}

.truth-disk {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    conic-gradient(from -30deg, rgba(43, 93, 124, .10), rgba(202, 216, 197, .30), rgba(244, 240, 230, .80), rgba(37, 43, 51, .10), rgba(43, 93, 124, .10));
  overflow: hidden;
}

.truth-disk::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, transparent 0 55deg, rgba(17, 21, 28, .08) 55deg 60deg);
}

.rule-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.draw-rule {
  fill: none;
  stroke: var(--sundial-blue);
  stroke-width: 2;
  stroke-dasharray: 1500;
  stroke-dashoffset: calc(1500 - (var(--progress, 0) * 1500));
  opacity: .65;
  transition: stroke-dashoffset 600ms ease;
}

.draw-rule.slow { stroke: var(--brass-axiom); opacity: .48; }
.draw-rule.arc { stroke: var(--rule-ink); opacity: .25; }

.shadow-hand {
  fill: none;
  stroke: var(--night-graphite);
  stroke-width: 11;
  stroke-linecap: round;
  opacity: .24;
  transform-origin: 300px 300px;
  transform: translate(calc(var(--shadow-x) * .06), calc(var(--shadow-y) * .06));
}

.slice {
  position: absolute;
  width: 36%;
  min-height: 22%;
  left: 32%;
  top: 4%;
  padding: 18px 18px 22px;
  transform-origin: 50% 210%;
  border-top: 1px solid rgba(179, 139, 46, .6);
  color: rgba(17, 21, 28, .28);
  opacity: .34;
  transition: opacity 500ms ease, color 500ms ease, background 500ms ease, box-shadow 500ms ease;
}

.slice:nth-of-type(2) { transform: rotate(60deg); }
.slice:nth-of-type(3) { transform: rotate(120deg); }
.slice:nth-of-type(4) { transform: rotate(180deg); }
.slice:nth-of-type(5) { transform: rotate(240deg); }
.slice:nth-of-type(6) { transform: rotate(300deg); }

.slice.active {
  color: var(--rule-ink);
  opacity: 1;
  background: linear-gradient(180deg, rgba(244, 240, 230, .82), rgba(202, 216, 197, .20));
  box-shadow: 0 18px 50px rgba(17, 21, 28, .08);
}

.hour-label {
  display: block;
  font-family: var(--noto);
  font-size: clamp(2.3rem, 5vw, 5.8rem);
  line-height: .76;
  color: var(--brass-axiom);
}

.slice h2 {
  margin: 8px 0 4px;
  font-family: var(--noto);
  font-size: clamp(1.1rem, 2.2vw, 2.2rem);
  letter-spacing: -.04em;
}

.slice p { margin: 0; font-size: clamp(.95rem, 1.35vw, 1.35rem); line-height: 1.2; }
.slice code { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: .76rem; color: var(--sundial-blue); }

.central-void {
  position: absolute;
  inset: 37%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--space);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(17, 21, 28, .44);
  background: var(--porcelain-day);
  border: 1px solid rgba(179, 139, 46, .52);
  box-shadow: inset 0 0 44px rgba(43, 93, 124, .08), 0 0 0 28px rgba(244, 240, 230, .72);
  transform: rotate(calc(var(--rotation) * -1));
  transition: transform 850ms cubic-bezier(.2, .72, .12, 1), background 500ms ease, color 500ms ease;
}

.hour-nav {
  position: absolute;
  z-index: 9;
  right: clamp(16px, 4vw, 58px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
}

.tick {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  width: 188px;
  padding: 8px 10px;
  border: 0;
  border-left: 3px solid rgba(179, 139, 46, .45);
  background: rgba(244, 240, 230, .48);
  text-align: left;
  cursor: pointer;
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}

.tick span { font-family: var(--space); font-weight: 600; color: var(--brass-axiom); }
.tick em { font-family: var(--space); font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sundial-blue); }
.tick:hover, .tick.active { transform: translateX(-10px); border-left-color: var(--verdict-vermilion); background: rgba(202, 216, 197, .48); }

.evidence-panel {
  position: absolute;
  z-index: 6;
  left: clamp(18px, 5vw, 72px);
  bottom: clamp(18px, 5vh, 58px);
  width: min(430px, 42vw);
  padding: 22px;
  background: rgba(244, 240, 230, .72);
  border: 1px solid rgba(43, 93, 124, .28);
  box-shadow: 0 26px 70px rgba(17, 21, 28, .10);
  backdrop-filter: blur(6px);
}

.plaque { display: flex; align-items: baseline; gap: 14px; color: var(--brass-axiom); }
.plaque b { font-family: var(--noto); font-size: 3.7rem; line-height: .8; }
.plaque span { font-family: var(--space); font-size: .78rem; letter-spacing: .17em; text-transform: uppercase; color: var(--rule-ink); }
.evidence-panel p { margin: 16px 0 18px; font-size: 1.25rem; line-height: 1.22; }
.operator-shelf { display: flex; gap: 8px; flex-wrap: wrap; }
.operator-shelf span { font-family: var(--mono); font-size: .68rem; color: var(--sundial-blue); border-top: 1px solid var(--brass-axiom); padding-top: 6px; }

.abacus {
  position: absolute;
  right: 26%;
  bottom: 8%;
  display: flex;
  gap: 14px;
  transform: rotate(-8deg);
}

.abacus span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mist-green);
  border: 1px solid rgba(43, 93, 124, .38);
  transform: translateY(calc(var(--bead, 0) * 1px));
  transition: transform 500ms ease;
}
.abacus span:nth-child(2) { --bead: 12; }
.abacus span:nth-child(3) { --bead: -10; }
.abacus span:nth-child(4) { --bead: 18; }

.counter-flag {
  position: absolute;
  z-index: 10;
  right: 20%;
  top: 17%;
  width: 92px;
  height: 112px;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 500px;
  color: var(--porcelain-day);
}

.counter-flag::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  width: 2px;
  height: 100px;
  background: var(--rule-ink);
}

.flag-face, .flag-back {
  position: absolute;
  left: 13px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 74px;
  height: 42px;
  font-family: var(--space);
  font-size: .63rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--verdict-vermilion);
  clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%);
  backface-visibility: hidden;
  transition: transform 520ms cubic-bezier(.2, .72, .12, 1);
}
.flag-back { background: var(--night-graphite); transform: rotateY(180deg); }
.counter-flag.flipped .flag-face { transform: rotateY(180deg); }
.counter-flag.flipped .flag-back { transform: rotateY(360deg); }

.verdict-seal {
  position: absolute;
  z-index: 7;
  right: 8%;
  bottom: 8%;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--noto);
  font-size: 2rem;
  color: var(--verdict-vermilion);
  border: 5px double var(--verdict-vermilion);
  opacity: 0;
  transform: scale(.72) rotate(-12deg);
  transition: opacity 520ms ease, transform 520ms ease;
}
.verdict-seal.visible { opacity: 1; transform: scale(1) rotate(-4deg); animation: restrainedPulse 2s ease-in-out infinite; }

.scroll-hour {
  min-height: 100vh;
  display: grid;
  place-items: end start;
  padding: 9vh 6vw;
  color: transparent;
  pointer-events: none;
}
.scroll-hour span { font-family: var(--space); }

body.night .stage { background: radial-gradient(circle at 50% 50%, rgba(37, 43, 51, .18), transparent 36%), var(--night-graphite); color: var(--porcelain-day); }
body.night .wordmark-lock, body.night .slice.active, body.night .evidence-panel { color: var(--porcelain-day); }
body.night .central-void { background: var(--night-graphite); color: rgba(244, 240, 230, .62); }
body.night .evidence-panel { background: rgba(37, 43, 51, .72); border-color: rgba(202, 216, 197, .24); }
body.night .plaque span { color: var(--porcelain-day); }

@keyframes restrainedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 74, 42, .16); }
  50% { box-shadow: 0 0 0 18px rgba(226, 74, 42, 0); }
}

@media (max-width: 760px) {
  .sundial { width: 112vw; height: 112vw; left: 44%; }
  .hour-nav { right: 10px; gap: 6px; }
  .tick { width: 118px; grid-template-columns: 30px 1fr; padding: 6px; }
  .tick em { font-size: .55rem; }
  .evidence-panel { width: calc(100vw - 32px); left: 16px; bottom: 16px; padding: 16px; }
  .evidence-panel p { font-size: 1rem; }
  .counter-flag { right: 6%; top: 24%; transform: scale(.82); }
  .abacus, .verdict-seal { display: none; }
}