:root {
  color-scheme: light;
  --mineral: #f4f0e5;
  --mineral-deep: #e7dfcc;
  --ink: #16364b;
  --ink-soft: #607481;
  --warm: #c8793f;
  --warm-pale: #e7c8a4;
  --focus: #885025;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--mineral);
  color: var(--ink);
}

body {
  min-height: 100svh;
  overscroll-behavior: none;
}

button { font: inherit; }

.field {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background-color: var(--mineral);
  touch-action: none;
}

.field::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  opacity: .5;
  background-image:
    repeating-linear-gradient(103deg, transparent 0 13px, rgb(22 54 75 / .026) 14px, transparent 15px 31px),
    repeating-linear-gradient(7deg, transparent 0 41px, rgb(200 121 63 / .02) 42px, transparent 43px 71px);
}

.field::after {
  position: absolute;
  left: -7vw;
  bottom: -13vh;
  z-index: -1;
  width: 34vw;
  height: 35vh;
  min-width: 260px;
  content: "";
  border: 1px solid rgb(22 54 75 / .08);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.masthead {
  position: absolute;
  z-index: 4;
  top: max(25px, env(safe-area-inset-top));
  left: max(28px, env(safe-area-inset-left));
  display: flex;
  align-items: baseline;
  gap: 20px;
}

h1 {
  margin: 0;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 400;
  letter-spacing: .04em;
}

.exchange-label,
.edition,
.coarse-cue {
  margin: 0;
  color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cadence-target,
.static-poster {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 61%;
  width: min(78vw, 890px);
  aspect-ratio: 1;
  transform: translate(-50%, -49%) rotate(-7deg);
}

.cadence-target {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  background: transparent;
  color: inherit;
  cursor: crosshair;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.cadence-target::before {
  position: absolute;
  left: 21%;
  top: 7%;
  width: 20px;
  height: 20px;
  border: 3px solid transparent;
  border-radius: 50%;
  content: "";
  transition: border-color 160ms ease, transform 160ms ease;
}

.cadence-target:focus { outline: 3px solid transparent; }

.cadence-target:focus-visible,
body[data-keyboard="true"] .cadence-target:focus {
  outline: 3px solid transparent;
  outline-offset: 0;
}

.cadence-target:focus-visible::before,
body[data-keyboard="true"] .cadence-target:focus::before {
  border-color: var(--focus);
  transform: scale(1.18);
}

#score {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.score-assembly {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1100ms cubic-bezier(.22, .7, .16, 1);
}

body[data-direction="reverse"] .score-assembly {
  transform: scaleX(-1) rotate(4deg);
}

.orbit-halo {
  fill: none;
  stroke: var(--mineral-deep);
  stroke-width: 60;
  opacity: .24;
}

.orbit {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.orbit-shadow {
  fill: none;
  stroke: var(--warm-pale);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: .008 .025 .003 .048 .011 .032;
  opacity: .58;
  animation: drift 22s linear infinite;
}

body[data-direction="reverse"] .orbit-shadow { animation-direction: reverse; }

body[data-phase="reversal"] .orbit {
  stroke: var(--warm);
  stroke-width: 7;
}

body[data-phase="reversal"] .seam { stroke: var(--ink); }

body[data-phase="transformed-answer"] .orbit-shadow {
  stroke-width: 15;
  opacity: .78;
}

body[data-phase="changed-return"] .orbit {
  stroke-width: 5.5;
  stroke-dasharray: .7 .035 .08 .025;
}

body[data-phase="changed-return"] .orbit-halo {
  stroke: var(--warm-pale);
  opacity: .4;
}

.seam {
  fill: none;
  stroke: var(--warm);
  stroke-linecap: round;
  stroke-width: 9;
  opacity: .88;
}

.direction-feather {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.visitor-mark {
  fill: var(--ink);
  transition: opacity 220ms ease, transform 220ms ease;
}

.visitor-mark.earlier { opacity: .32; }

.visitor-mark.source-landmark {
  opacity: 1;
  stroke: var(--mineral);
  stroke-width: 8;
  paint-order: stroke fill;
}

.partner-mark {
  fill: none;
  stroke: var(--warm);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .88;
}

.partner-mark:not(.earlier) {
  animation: partner-cadence 4.8s ease-in-out infinite;
  animation-delay: var(--mark-delay, 0ms);
}

.partner-mark.earlier { opacity: .2; }

.partner-mark.mutation {
  opacity: 1;
  stroke-width: 6;
}

.pause-influence {
  fill: var(--mineral);
  stroke: var(--warm);
  stroke-width: 4;
}

.active-mark-ring {
  fill: var(--mineral);
  stroke: var(--warm);
  stroke-width: 4;
  animation: breathe 1.8s ease-in-out infinite;
}

.tap-witness {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid var(--warm);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.4);
}

body[data-just-marked="true"] .tap-witness { animation: witness 340ms ease-out; }

.copy {
  position: absolute;
  z-index: 3;
  left: max(6vw, 36px);
  bottom: max(10vh, calc(env(safe-area-inset-bottom) + 32px));
  width: min(27ch, 28vw);
  pointer-events: none;
}

.cue {
  margin: 0;
  font-size: clamp(18px, 2vw, 29px);
  font-weight: 400;
  line-height: 1.28;
  text-wrap: balance;
}

.coarse-cue {
  display: none;
  margin-top: 12px;
}

.again {
  position: absolute;
  z-index: 5;
  right: max(28px, env(safe-area-inset-right));
  bottom: max(27px, env(safe-area-inset-bottom));
  min-width: 74px;
  min-height: 48px;
  padding: 8px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--mineral);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease, background 160ms ease;
}

.again:hover { background: var(--mineral-deep); }
.again:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

body[data-phase="changed-return"] .again {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.edition {
  position: absolute;
  right: max(31px, env(safe-area-inset-right));
  top: max(29px, env(safe-area-inset-top));
}

.static-poster { display: none; }
.static-poster svg { display: block; width: 100%; height: 100%; }
.static-poster p {
  position: absolute;
  left: -10vw;
  bottom: 14%;
  margin: 0;
  font-size: clamp(17px, 2vw, 28px);
  line-height: 1.35;
}
.poster-halo { fill: none; stroke: var(--mineral-deep); stroke-width: 60; opacity: .3; }
.poster-ring { fill: none; stroke: var(--ink); stroke-width: 4; }
.poster-seam { fill: none; stroke: var(--warm); stroke-width: 9; stroke-linecap: round; }
.poster-partner { fill: none; stroke: var(--warm); stroke-width: 5; stroke-linecap: round; }
.poster-visitor { fill: var(--ink); }

@keyframes drift { to { stroke-dashoffset: 1; } }
@keyframes breathe { 50% { transform: scale(1.45); opacity: .42; } }
@keyframes partner-cadence { 0%, 9%, 100% { opacity: .46; stroke-width: 4; } 3.5% { opacity: 1; stroke-width: 7; } }
@keyframes witness { 0% { opacity: .7; transform: translate(-50%, -50%) scale(.35); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); } }

@media (pointer: coarse) {
  .coarse-cue { display: block; }
  .cadence-target { cursor: default; }
}

@media (max-width: 700px) {
  .field {
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }
  .masthead { top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); display: block; }
  .exchange-label { margin-top: 7px; }
  .edition { top: max(22px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); }
  .cadence-target,
  .static-poster {
    top: 46%;
    left: 59%;
    width: min(154vw, 690px);
    max-width: none;
    transform: translate(-50%, -50%) rotate(-8deg);
  }
  .copy {
    left: max(21px, env(safe-area-inset-left));
    bottom: max(7.5vh, calc(env(safe-area-inset-bottom) + 26px));
    width: 20ch;
  }
  .cue { font-size: clamp(17px, 5.2vw, 22px); }
  .again { right: max(18px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
  .static-poster p { left: -4vw; bottom: 7%; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .orbit-shadow { stroke-dashoffset: 0; }
  body[data-direction="reverse"] .orbit-shadow { stroke-dashoffset: .12; }
}

.no-js .cadence-target,
.no-js .copy,
.no-js .again,
.no-js .exchange-label { display: none; }

.no-js .static-poster { display: block; }

@media (max-width: 410px) and (max-height: 700px) {
  .cadence-target,
  .static-poster { width: 132vw; top: 47%; }
  .copy { bottom: max(5vh, calc(env(safe-area-inset-bottom) + 18px)); }
}