:root {
  color-scheme: dark;
  --ink: #090c0e;
  --panel: #111619;
  --panel-high: #182024;
  --frost: #e8eeeb;
  --muted: #899794;
  --line: rgba(215, 232, 226, 0.13);
  --signal: #78d5c1;
  --signal-dim: #3c7e72;
  --amber: #e2b768;
  --danger: #db877e;
  --safe-bottom: max(24px, env(safe-area-inset-bottom));
  font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--ink); scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  color: var(--frost);
  background:
    radial-gradient(circle at 76% -6%, rgba(88, 164, 150, 0.11), transparent 33rem),
    linear-gradient(155deg, #0c1113 0%, var(--ink) 52%, #080a0c 100%);
}

button, input, textarea { font: inherit; }
button { color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pairing-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(42px, env(safe-area-inset-top)) 26px var(--safe-bottom);
}

.pairing-stage { width: min(100%, 440px); }

.cadence-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.cadence-mark.large { width: 86px; height: 86px; margin-bottom: 42px; }
.cadence-mark.small { width: 25px; height: 25px; }

.mark-orbit {
  position: absolute;
  border: 1px solid var(--signal-dim);
  border-radius: 50%;
}

.large .mark-orbit.outer { inset: 1px; border-top-color: var(--signal); animation: orbit 9s linear infinite; }
.large .mark-orbit.inner { inset: 19px; border-right-color: var(--amber); animation: orbit 6s linear infinite reverse; }
.small .mark-orbit.outer { inset: 0; border-top-color: var(--signal); }
.small .mark-orbit.inner { inset: 6px; border-right-color: var(--amber); }

.mark-beat {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 13px rgba(120, 213, 193, 0.7);
}

@keyframes orbit { to { transform: rotate(360deg); } }

.kicker, .section-index {
  margin: 0;
  color: var(--signal);
  font: 600 0.69rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pairing-stage h1 {
  margin: 16px 0 22px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  font-size: clamp(3.25rem, 15vw, 5.4rem);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -0.055em;
}

.pairing-copy {
  max-width: 36ch;
  margin: 0 0 38px;
  color: #acb8b4;
  font-size: 1.02rem;
  line-height: 1.65;
}

.pairing-copy em { color: var(--frost); font-style: normal; }

.pairing-form label {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pairing-form input {
  width: 100%;
  padding: 15px 1px 13px;
  border: 0;
  border-bottom: 1px solid rgba(232, 238, 235, 0.28);
  border-radius: 0;
  outline: 0;
  color: var(--frost);
  background: transparent;
  font: 500 1.45rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pairing-form input:focus { border-color: var(--signal); }

.primary-action, .secondary-action {
  border: 0;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.primary-action {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 17px 19px;
  color: #07100e;
  background: var(--signal);
  border-radius: 3px;
  font-weight: 650;
}

.primary-action:active, .secondary-action:active { transform: scale(0.985); }
.primary-action:disabled { opacity: 0.48; cursor: wait; }

.status-line {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: var(--amber);
  font-size: 0.78rem;
}

.privacy-note {
  margin: 42px 0 0;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

.app-shell { min-height: 100dvh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(59px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 20px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 12, 14, 0.78);
  backdrop-filter: blur(24px) saturate(130%);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--frost);
  font-size: 0.91rem;
  font-weight: 600;
  text-decoration: none;
}

.icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
}

.icon-button svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }
.icon-button.spinning svg { animation: orbit 700ms linear infinite; }

.today-stage { max-width: 680px; margin: 0 auto; padding: 32px 21px 74px; }

.date-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--muted);
  font: 500 0.72rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.date-line > :first-child { color: var(--frost); }

.focus-instrument { padding: 42px 0 50px; }

.instrument-rule { position: relative; height: 7px; margin-bottom: 30px; border-top: 1px solid var(--line); }
.instrument-rule::before, .instrument-rule::after { content: ""; position: absolute; top: -3px; width: 5px; height: 5px; border: 1px solid var(--signal-dim); border-radius: 50%; background: var(--ink); }
.instrument-rule::before { left: 0; }
.instrument-rule::after { right: 0; }
.instrument-rule span { position: absolute; top: -1px; left: 0; width: 27%; height: 1px; background: var(--signal); box-shadow: 0 0 10px rgba(120, 213, 193, 0.5); }

.instrument-label {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.focus-instrument h1 {
  min-height: 2.5em;
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  font-size: clamp(2.65rem, 12vw, 4.6rem);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.complete-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  padding: 8px 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.8rem;
}

.complete-glyph { width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; }
.complete-button.done { color: var(--signal); }
.complete-button.done .complete-glyph { border: 4px solid rgba(120, 213, 193, 0.22); background: var(--signal); background-clip: padding-box; }
.focus-instrument.is-complete h1 { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }

.runway {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 29px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

h2 { margin: 7px 0 0; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.015em; }
.muted { color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.runway-copy .muted { margin: 8px 0 0; max-width: 24ch; }

.usage-dial {
  position: relative;
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 1px rgba(120, 213, 193, 0.08), inset 0 0 27px rgba(0, 0, 0, 0.33);
}

.dial-ticks { position: absolute; inset: -8px; border: 1px dashed rgba(232, 238, 235, 0.13); border-radius: 50%; }
.dial-progress { position: absolute; inset: 5px; width: 106px; height: 106px; transform: rotate(-90deg); }
.dial-track, .dial-value { fill: none; stroke-width: 3.5; }
.dial-track { stroke: rgba(232, 238, 235, 0.08); }
.dial-value { stroke: var(--signal); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 500ms ease; }
.dial-core { position: relative; z-index: 1; text-align: center; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.dial-core strong { font-size: 1.95rem; font-weight: 500; letter-spacing: -0.08em; }
.dial-core > span { color: var(--muted); font-size: 0.75rem; }
.dial-core small { display: block; margin-top: -2px; color: var(--muted); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; }

.week-strip, .next-list, .phone-note, .notes-section, .connection-panel { padding: 31px 0; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.sync-time { color: var(--muted); font: 0.65rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; }

.week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 24px; }
.week-day { position: relative; min-width: 0; padding: 11px 4px 10px; border: 1px solid var(--line); border-radius: 3px; text-align: center; }
.week-day.today { border-color: var(--signal-dim); background: rgba(120, 213, 193, 0.055); }
.week-day.done::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); }
.week-day span { display: block; color: var(--muted); font: 0.58rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; text-transform: uppercase; }
.week-day strong { display: block; margin-top: 8px; font: 500 0.92rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.week-day.today strong { color: var(--signal); }

.next-list ol { margin: 21px 0 0; padding: 0; list-style: none; counter-reset: next; }
.next-list li { counter-increment: next; display: grid; grid-template-columns: 26px 1fr; gap: 9px; padding: 12px 0; color: #c1cbc7; font-size: 0.91rem; line-height: 1.45; border-top: 1px solid rgba(232, 238, 235, 0.075); }
.next-list li::before { content: "0" counter(next); color: var(--muted); font: 0.62rem/1.9 ui-monospace, "SFMono-Regular", Menlo, monospace; }

.phone-note textarea {
  width: 100%;
  margin-top: 21px;
  padding: 15px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 3px;
  outline: 0;
  color: var(--frost);
  background: rgba(232, 238, 235, 0.025);
  line-height: 1.5;
}
.phone-note textarea:focus { border-color: var(--signal-dim); }
.note-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note-actions button, .text-button { padding: 10px 0; border: 0; color: var(--signal); background: transparent; font-size: 0.76rem; font-weight: 600; }
.note-actions .status-line { margin: 0; }

.notes-section pre {
  max-height: 420px;
  overflow: auto;
  margin: 20px 0 0;
  padding: 17px;
  border-left: 1px solid var(--signal-dim);
  color: #b9c5c0;
  background: rgba(232, 238, 235, 0.025);
  font: 0.72rem/1.65 ui-monospace, "SFMono-Regular", Menlo, monospace;
  white-space: pre-wrap;
}

.connection-panel { display: grid; gap: 13px; border-bottom: 0; }
.secondary-action { padding: 13px 15px; border: 1px solid var(--signal-dim); border-radius: 3px; color: var(--signal); background: rgba(120, 213, 193, 0.06); font-size: 0.8rem; font-weight: 600; }
.text-button { justify-self: start; cursor: pointer; }
.text-button.danger { margin-top: 8px; color: var(--danger); font-weight: 500; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 21px var(--safe-bottom);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 0.6rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.install-dialog {
  width: min(calc(100% - 34px), 430px);
  padding: 31px 25px 27px;
  border: 1px solid rgba(120, 213, 193, 0.23);
  border-radius: 5px;
  color: var(--frost);
  background: #111719;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.66);
}
.install-dialog::backdrop { background: rgba(3, 5, 6, 0.72); backdrop-filter: blur(9px); }
.install-dialog h2 { margin-top: 11px; font-family: "Iowan Old Style", Palatino, serif; font-size: 2rem; font-weight: 400; line-height: 1.05; }
.install-dialog ol { margin: 24px 0 0; padding-left: 1.2rem; color: #bbc6c2; line-height: 1.65; }
.install-dialog li { padding-left: 5px; margin-bottom: 8px; }
.dialog-close { position: absolute; top: 10px; right: 13px; border: 0; color: var(--muted); background: transparent; font-size: 1.6rem; }

button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

@media (min-width: 700px) {
  .today-stage { padding-top: 48px; }
  .focus-instrument { padding-top: 58px; }
  .connection-panel { grid-template-columns: 1fr auto; align-items: center; }
  .connection-panel .text-button { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}