:root {
  color-scheme: dark;
  font: 16px system-ui, sans-serif;
  background: #111713;
  color: #f3f8ef;
  --accent: #b8f582;
  --muted: #b3c3b6;
  --border: #37473b;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  width: min(100%, 560px);
  margin-inline: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
a { color: inherit; text-decoration: none; }
.brand, .app-link { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; }
.brand { font-size: 21px; font-weight: 750; letter-spacing: -.045em; }
.mark {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--accent); color: #162215; font-size: 26px;
}
.app-link { color: var(--muted); font-size: .875rem; }
h1 { margin: 18px 0 8px; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.1; letter-spacing: -.055em; }
.status {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px;
  color: var(--muted); font-size: .875rem; line-height: 1.4; min-height: 20px;
}
.status::before { content: ""; flex: 0 0 7px; height: 7px; border-radius: 50%; background: #8fa297; }
.status[data-state="live"]::before { background: var(--accent); }
.status[data-state="demo"]::before, .status[data-state="notice"]::before { background: #ffd483; }
.power {
  padding: clamp(14px, 4vw, 24px); border: 1px solid var(--border); border-radius: 21px;
  background: radial-gradient(ellipse at 0 0, #26382b, #19231d 70%);
}
h2, dt { color: var(--muted); font-size: .8125rem; font-weight: 600; margin: 0; }
.reading {
  display: flex; align-items: baseline; gap: 8px; margin: 7px 0 3px;
  font-size: clamp(2.7rem, 13vw, 5rem); font-weight: 720;
  line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums;
}
.unit { color: var(--accent); font-size: .37em; letter-spacing: 0; }
canvas { display: block; width: 100%; height: clamp(64px, 14vh, 128px); }
.time-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 16px; }
.stats div { padding: 11px 8px; border: 1px solid var(--border); border-radius: 12px; background: #19231d; }
.stats dt { font-size: .75rem; }
.stats dd {
  margin: 6px 0 0; font-size: clamp(.95rem, 4.2vw, 1.375rem); font-weight: 680;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.controls {
  position: sticky; bottom: 0; display: grid; grid-template-columns: 1.65fr 1fr;
  gap: 8px; background: #111713; padding: 10px 0 max(12px, env(safe-area-inset-bottom));
}
button {
  min-height: 50px; padding: 9px; border: 1px solid var(--border); border-radius: 12px;
  font: inherit; font-weight: 700; cursor: pointer; background: #202c24; color: inherit;
}
#connect { background: var(--accent); border-color: var(--accent); color: #142313; }
button:disabled { opacity: .6; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.challenge { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.challenge button { min-height:44px; }
.challenge p { margin:0; color:var(--muted); font-size:.875rem; }
.in-pitch .top, .in-pitch h1 { display:none; }
.in-pitch main { width:min(100%,760px); }
.in-pitch .reading { font-size:clamp(2.7rem, 7vw, 4.3rem); }
.in-pitch canvas { height:clamp(44px, 12vh, 80px); }
.in-pitch .stats { margin-bottom:10px; }
.in-pitch {
  background: #111123; color: #f5f5fc;
  --accent: #c9ff52; --muted: #c6c9db; --border: #414561;
  font-family: Manrope, system-ui, sans-serif;
}
.in-pitch .power { background: radial-gradient(ellipse at 0 0,#302456,#192038 76%); }
.in-pitch .stats div, .in-pitch button { background: #192038; }
.in-pitch #connect { background: var(--accent); }
.in-pitch .controls { background: #111123; }
.in-pitch .challenge button { border-color: #b69aff; }
.in-pitch .reading { font-family: "Barlow Condensed",sans-serif; letter-spacing: -.015em; }