@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Alumni Sans"; src: url("fonts/alumni-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --accent: #3559e8; --accent-hover: #2e4ecc; --accent-text: #2947c5;
  --accent-tint: #e0e6f3; --accent-border: #acc3fa; --accent-strong: #7595e9;
  --bg-page: #f4f4f4; --bg-card: #fafafa; --bg-sunken: #efefef;
  --ink-1: #1f2937; --ink-2: #414b56; --ink-3: #626c7f; --ink-4: #8a939e;
  --ink-subtle: 17%; --ink-line: 28%; --ink-strong: 40%;
  --chart-red: #d8655a; --chart-yellow: #d6a440; --chart-green: #73b04d; --chart-teal: #32ada7; --chart-blue: #6591e1;
  --danger-text: #a33c33;
  --voice-disc: #3559e8; --voice-listen: #7595e9; --orb-paper: #f4f4f4;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.1 0 0 0 .075'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.22 0 0 0 .14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --font-ui: "Albert Sans", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Alumni Sans", "Avenir Next Condensed", "Arial Narrow", var(--font-ui);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-xs: 2px; --radius: 3px; --radius-l: 4px;
  --cap: .591;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #4466ee; --accent-hover: #3957de; --accent-text: #92b2ff;
  --accent-tint: #17244b; --accent-border: #2d4289; --accent-strong: #405cb8;
  --bg-page: #141414; --bg-card: #1a1a1a; --bg-sunken: #171717;
  --ink-1: #eceef2; --ink-2: #c9ced8; --ink-3: #949cac; --ink-4: #737b8c;
  --ink-subtle: 11%; --ink-line: 17%; --ink-strong: 27%;
  --danger-text: #ff9182;
  --voice-disc: #eceef2; --voice-listen: #405cb8; --orb-paper: #141414;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .09 0 0 0 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .2 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --accent: #4466ee; --accent-hover: #3957de; --accent-text: #92b2ff;
    --accent-tint: #17244b; --accent-border: #2d4289; --accent-strong: #405cb8;
    --bg-page: #141414; --bg-card: #1a1a1a; --bg-sunken: #171717;
    --ink-1: #eceef2; --ink-2: #c9ced8; --ink-3: #949cac; --ink-4: #737b8c;
    --ink-subtle: 11%; --ink-line: 17%; --ink-strong: 27%;
    --danger-text: #ff9182;
    --voice-disc: #eceef2; --voice-listen: #405cb8; --orb-paper: #141414;
  }
}
:root {
  --border-subtle: color-mix(in srgb, var(--ink-1) var(--ink-subtle), transparent);
  --border: color-mix(in srgb, var(--ink-1) var(--ink-line), transparent);
  --border-strong: color-mix(in srgb, var(--ink-1) var(--ink-strong), transparent);
}

* { box-sizing: border-box; }
html { background: var(--bg-page); }
body {
  position: relative; margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: max(56px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
  background: var(--bg-page); color: var(--ink-1);
  font: 400 14px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: -160px; z-index: 0; pointer-events: none;
  height: calc(100vh + 320px); height: calc(100lvh + 320px);
  background: var(--grain); background-size: 256px;
}
@supports (-webkit-touch-callout: none) {
  body::before {
    -webkit-mask: linear-gradient(to bottom, transparent calc(160px + env(safe-area-inset-top)), #000 calc(300px + env(safe-area-inset-top)), #000 calc(100% - 300px - env(safe-area-inset-bottom)), transparent calc(100% - 160px - env(safe-area-inset-bottom)));
            mask: linear-gradient(to bottom, transparent calc(160px + env(safe-area-inset-top)), #000 calc(300px + env(safe-area-inset-top)), #000 calc(100% - 300px - env(safe-area-inset-bottom)), transparent calc(100% - 160px - env(safe-area-inset-bottom)));
  }
}
::selection { background: var(--accent-tint); color: var(--accent-text); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 760px; text-align: center; }
.wordmark { margin: 0; font: 600 clamp(64px, 15vw, 96px)/.82 var(--font-display); letter-spacing: .01em; color: var(--ink-1); }
.lockup { display: inline-flex; align-items: baseline; gap: .12em; }
.owl { display: block; align-self: baseline; height: calc(var(--cap) * 1em); width: auto; overflow: visible; }
.owl path { fill: currentColor; }
.owl .lid { fill: currentColor; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: blink 3.5s infinite; }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(0); } 94.5% { transform: scaleY(1); } }
.orb { display: block; width: 128px; max-width: 40%; aspect-ratio: 1; margin: 18px auto 0; }

.count { width: 100%; margin-top: 36px; }
.count-pad { display: none; }

.tally { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.tally-num { font: 600 96px/.8 var(--font-display); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.tally-side { display: grid; gap: 6px; padding-bottom: 6px; text-align: left; }
.tally-side strong { font-size: 16px; font-weight: 600; color: var(--ink-1); }
.tally-side span { font: 500 14px/1 var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: 100%; margin-top: 28px; text-align: left; }
.month { min-width: 0; padding: 14px 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--bg-card) var(--grain-strong); background-size: 256px; }
.month h2 { margin: 0 0 10px; font: 500 28px/1 var(--font-display); color: var(--ink-1); }
.wk { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; color: var(--ink-3); font: 500 11px/1 var(--font-mono); text-align: center; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); }
.cell { position: relative; aspect-ratio: 1; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); color: var(--ink-2); font-size: 12px; font-weight: 500; }
.cell.blank { background: color-mix(in srgb, var(--bg-sunken) 70%, transparent); }
.cell .n { position: absolute; top: 3px; left: 4px; font-variant-numeric: tabular-nums; }
.cell svg { position: absolute; inset: 14%; width: 72%; height: 72%; overflow: visible; }
.cell line { stroke: var(--ink-3); stroke-width: 1.15; stroke-linecap: round; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cell.past line { stroke-dashoffset: 0; }
.cell.past .n { color: var(--ink-4); }
.cell.today { background: var(--accent-tint); color: var(--accent-text); font-weight: 700; }
.cell.today line { stroke: var(--accent); stroke-width: 1.4; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1) .8s; }
.cell.after { color: var(--ink-4); opacity: .55; }
.cell.beta { color: var(--accent-text); font-weight: 700; }
.cell.beta .n { inset: 0; display: grid; place-items: center; }
.cell.beta svg { inset: 8%; width: 84%; height: 84%; }
.cell.beta circle { fill: none; stroke: var(--accent); stroke-width: 1.4; }

.pad { position: relative; width: min(330px, 100%); margin: 0 auto; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.pad-bind { position: relative; z-index: 3; height: 24px; border-radius: var(--radius) var(--radius) 0 0; background: var(--accent); }
.pad-bind::before, .pad-bind::after { content: ""; position: absolute; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg-page); }
.pad-bind::before { left: 28%; }
.pad-bind::after { right: 28%; }
.sheets { position: relative; }
.sheet { position: relative; z-index: 2; padding: 16px 22px 18px; border: 1px solid var(--border); border-top: 0; background: var(--bg-card) var(--grain-strong); background-size: 256px; }
.sheet.flying {
  position: absolute; inset: 0 0 auto 0; z-index: 4; transform-origin: 85% 0;
  -webkit-mask: radial-gradient(circle at 5px 0, transparent 2.5px, #000 3px) 0 0 / 10px 100% repeat-x;
          mask: radial-gradient(circle at 5px 0, transparent 2.5px, #000 3px) 0 0 / 10px 100% repeat-x;
  animation: tear .9s cubic-bezier(.55, .05, .7, .2) forwards;
}
@keyframes tear {
  0% { transform: none; opacity: 1; }
  18% { transform: rotate(-3deg) translateY(2px); }
  100% { transform: translate(-46px, 300px) rotate(-26deg); opacity: 0; }
}
.sheet-head { display: flex; justify-content: flex-end; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.days { display: block; margin: 12px 0 2px; font: 600 clamp(120px, 44vw, 172px)/.78 var(--font-display); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.days-unit { display: block; color: var(--ink-2); font-size: 16px; font-weight: 600; }
.perf { height: 0; margin: 16px -22px 14px; border-top: 1.5px dashed var(--border-strong); }
.hms { display: flex; justify-content: center; gap: 22px; font-variant-numeric: tabular-nums; }
.hms span { display: grid; gap: 4px; }
.hms b { font: 500 26px/1 var(--font-mono); color: var(--ink-1); }
.hms i { font-style: normal; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.edges { position: relative; z-index: 1; }
.edge { height: 4px; border: 1px solid var(--border); border-top: 0; background: var(--bg-card); }
.pad-again { margin: 12px auto 0; display: block; border: 0; background: none; padding: 6px 4px; color: var(--ink-3); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.pad-again:hover { color: var(--accent-text); text-decoration-color: currentColor; }

.waitlist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 440px; margin: 36px auto 0; }
.waitlist .field {
  flex: 1 1 220px; min-width: 0; min-height: 40px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg-card); padding: 9px 11px; font-size: 16px; outline: 0; caret-color: var(--accent);
}
.waitlist .field::placeholder { color: var(--ink-3); }
.waitlist .field:focus { border-color: var(--accent-strong); }
.waitlist button {
  min-height: 40px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: #fff; padding: 9px 14px;
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.waitlist button:hover { background: var(--accent-hover); }
.waitlist button:disabled { cursor: progress; opacity: .7; }
.waitlist .hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.form-msg { flex-basis: 100%; margin: 2px 0 0; min-height: 18px; color: var(--ink-3); font-size: 12px; text-align: left; }
.form-msg.err { color: var(--danger-text); }
.form-msg.ok { color: var(--accent-text); font-weight: 600; }

.site-foot { position: relative; z-index: 1; margin-top: auto; padding-top: 48px; color: var(--ink-3); font: 500 12px/1 var(--font-mono); letter-spacing: .02em; }

@media (max-width: 700px) {
  body { padding-top: max(40px, env(safe-area-inset-top)); }
  .count-cal { display: none; }
  .count-pad { display: block; }
  .hms { gap: 16px; }
  .waitlist button { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .owl .lid { animation: none; }
  .sheet.flying { display: none; }
  .cell.today line { transition: none; }
}