@font-face {
  font-family: "Mark";
  src: url("/f/grotesk700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Meta";
  src: url("/f/grotesk500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
:root { color-scheme: light; --ink: #0c0c0e; --muted: #9a9aa0; --hair: #e6e6ea; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 32px; }
main { width: 100%; max-width: 480px; text-align: center; }
.mark {
  font-family: "Mark", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 6.4vw, 46px);
  letter-spacing: .04em;
  display: flex; justify-content: center; gap: .01em;
  line-height: 1;
}
.mark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  animation: lift .72s cubic-bezier(.19,1,.22,1) forwards;
}
.rule {
  margin: 26px auto 0; height: 1px; width: 100%; background: var(--hair); position: relative; overflow: hidden;
}
.rule i { position: absolute; inset: 0; width: 0; background: var(--ink); animation: sweep 5s linear forwards; }
.meta {
  margin-top: 18px;
  font-family: "Meta", Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  opacity: 0; animation: fade .8s ease-out 1.1s forwards;
}
.meta b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
@keyframes lift { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes sweep { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .mark span, .meta { animation: none; opacity: 1; transform: none; }
  .rule i { animation: none; width: 100%; }
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #f6f6f7; --muted: #7d7d83; --hair: #232326; }
  body { background: #08080a; }
}

.mark span:nth-child(1) { animation-delay: 0ms; }
.mark span:nth-child(2) { animation-delay: 55ms; }
.mark span:nth-child(3) { animation-delay: 110ms; }
.mark span:nth-child(4) { animation-delay: 165ms; }
.mark span:nth-child(5) { animation-delay: 220ms; }
.mark span:nth-child(6) { animation-delay: 275ms; }
.mark span:nth-child(7) { animation-delay: 330ms; }
.mark span:nth-child(8) { animation-delay: 385ms; }
.mark span:nth-child(9) { animation-delay: 440ms; }
.mark span:nth-child(10) { animation-delay: 495ms; }

#youtube{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font:12px/1.5 Meta,Arial,sans-serif;color:var(--ink);text-underline-offset:4px}footer{position:fixed;bottom:12px;left:16px;display:flex;gap:8px}button{font:11px/1.5 Meta,Arial,sans-serif;background:transparent;color:var(--ink);border:1px solid var(--hair);padding:8px 12px;min-height:36px;cursor:pointer}#consent{position:fixed;bottom:60px;left:12px;right:12px;max-width:480px;margin:auto;padding:16px;background:light-dark(#fff,#08080a);color:var(--ink);border:1px solid var(--hair);font:12px/1.6 Meta,Arial,sans-serif;text-align:left}#consent[hidden]{display:none}#consent p{margin:0}#consent>div{display:flex;gap:12px;margin-top:10px}#consent button{min-height:44px;flex:1}:focus-visible{outline:2px solid var(--ink);outline-offset:3px}@media(prefers-color-scheme:dark){#consent{background:#08080a}}

h1.mark{margin:0}.choice-note{font:12px/1.6 Meta,Arial,sans-serif;margin:18px auto 0;max-width:360px}.choice-note[hidden],#countdown[hidden]{display:none}

.awaiting-choice .rule i{animation-play-state:paused}