/* Kinetic Precision tokens (agentos skill /design). System fonts only — no external font requests. */
:root {
  --kp-primary: #adc6ff;
  --kp-tertiary: #ffb786;
  --kp-surface: #111318;
  --kp-surface-low: #1a1c20;
  --kp-surface-container: #1e2024;
  --kp-surface-high: #282a2e;
  --kp-outline: #8c909f;
  --kp-outline-variant: #424754;
  --kp-on-surface: #e2e2e8;
  --kp-on-surface-variant: #c2c6d6;
  --kp-signal: #34d399;
  --kp-signal-glow: rgba(52, 211, 153, 0.35);
  --kp-warning: #ffb786;
  --kp-font-headline: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --kp-font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --kp-font-label: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --kp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --kp-hud: 0.20em;
  --kp-radius-md: 4px;
  --kp-radius-lg: 12px;
  --kp-ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--kp-surface); color: var(--kp-on-surface); }
body {
  font-family: var(--kp-font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; }

.app {
  position: relative;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 16px);
}

.hud {
  font-family: var(--kp-font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--kp-hud);
  text-transform: uppercase;
  color: var(--kp-outline);
}

.top { display: flex; justify-content: space-between; align-items: center; }
.top .hud { font-size: 11px; color: var(--kp-on-surface-variant); }
.live { display: inline-flex; align-items: center; gap: 6px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--kp-outline-variant); }
.live span {
  font: 600 10px var(--kp-font-label); letter-spacing: var(--kp-hud); text-transform: uppercase; color: var(--kp-outline);
}
.live.is-on i { background: var(--kp-signal); animation: kp-pulse 1.6s infinite; }
.live.is-on span { color: var(--kp-signal); }
@keyframes kp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }

.note {
  margin-top: auto;
  text-align: center;
  font-family: var(--kp-font-headline);
  color: var(--kp-outline-variant);
  line-height: 0.95;
  transition: color .2s var(--kp-ease-snap);
}
.note.is-active { color: var(--kp-on-surface); }
.note.is-tune { color: var(--kp-signal); text-shadow: 0 0 24px var(--kp-signal-glow); }
.note__name { font-size: clamp(96px, 32vw, 140px); font-weight: 700; letter-spacing: -0.04em; }
.note__oct { font-size: 32px; font-weight: 500; color: var(--kp-outline); margin-left: 4px; }

.gauge { width: 100%; height: auto; overflow: visible; }
.gauge__zone { fill: none; stroke: var(--kp-signal); stroke-width: 6; stroke-linecap: round; opacity: .25; transition: opacity .2s; }
.gauge.is-tune .gauge__zone { opacity: .9; }
.gauge__tick { stroke: var(--kp-outline-variant); stroke-width: 1; }
.gauge__tick--major { stroke: var(--kp-outline); stroke-width: 1.5; }
.gauge__label { fill: var(--kp-outline); font: 500 10px var(--kp-font-mono); text-anchor: middle; dominant-baseline: middle; }
.gauge__needle {
  /* rotated via the SVG transform attribute in app.js (eased per frame) */
  stroke: var(--kp-outline-variant); stroke-width: 2.5; stroke-linecap: round;
  transition: stroke .2s;
}
.gauge__hub { fill: var(--kp-outline-variant); transition: fill .2s; }
.gauge[data-state="near"] .gauge__needle { stroke: var(--kp-primary); }
.gauge[data-state="far"] .gauge__needle { stroke: var(--kp-warning); }
.gauge[data-state="tune"] .gauge__needle { stroke: var(--kp-signal); filter: drop-shadow(0 0 6px var(--kp-signal-glow)); }
.gauge[data-state="near"] .gauge__hub { fill: var(--kp-primary); }
.gauge[data-state="far"] .gauge__hub { fill: var(--kp-warning); }
.gauge[data-state="tune"] .gauge__hub { fill: var(--kp-signal); }

.readout { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.readout div { display: flex; flex-direction: column; gap: 6px; }
.readout b { font: 500 17px var(--kp-font-mono); }
#status.is-tune { color: var(--kp-signal); }
#status.is-off { color: var(--kp-warning); }

.level { display: grid; grid-template-columns: auto 1fr 52px; align-items: center; gap: 10px; margin-top: -6px; }
.level__bar { height: 4px; background: var(--kp-surface-high); border-radius: 2px; overflow: hidden; }
.level__bar i { display: block; height: 100%; width: 0; background: var(--kp-primary); transition: width .08s linear; }
.level b { font: 500 11px var(--kp-font-mono); color: var(--kp-outline); text-align: right; }

.debug {
  position: fixed; left: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px); z-index: 10;
  margin: 0; padding: 8px 10px;
  background: rgba(12, 14, 18, 0.9); border: 0.5px solid var(--kp-outline-variant); border-radius: var(--kp-radius-md);
  font: 11px/1.5 var(--kp-font-mono); color: var(--kp-on-surface-variant);
  pointer-events: none;
}
.debug[hidden] { display: none; }

.strings { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: auto; }
.strings[hidden] { display: none; }
.string {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 0;
  background: var(--kp-surface-low);
  border: 0.5px solid var(--kp-outline-variant);
  border-radius: var(--kp-radius-md);
  color: var(--kp-on-surface-variant);
  cursor: pointer;
}
.string b { font: 700 20px var(--kp-font-headline); }
.string small { font: 500 10px var(--kp-font-mono); color: var(--kp-outline); }
.string.is-active { background: var(--kp-surface-high); color: var(--kp-primary); }
.string.is-tune { color: var(--kp-signal); }
.string.is-locked { border: 1.5px solid var(--kp-primary); }

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.control {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px;
  background: var(--kp-surface-low);
  border: 0.5px solid var(--kp-outline-variant);
  border-radius: var(--kp-radius-lg);
}
.control select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0;
  font-weight: 600; font-size: 15px;
}
.stepper { display: flex; align-items: center; justify-content: space-between; }
.stepper b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.stepper button {
  width: 30px; height: 30px; border-radius: var(--kp-radius-md);
  background: var(--kp-surface-high); border: 0.5px solid var(--kp-outline-variant); cursor: pointer;
}

.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: -8px; }
.preset {
  padding: 8px 0;
  background: var(--kp-surface-low);
  border: 0.5px solid var(--kp-outline-variant);
  border-radius: var(--kp-radius-md);
  font: 500 13px var(--kp-font-mono);
  color: var(--kp-on-surface-variant);
  cursor: pointer;
}
.preset.is-active { border: 1.5px solid var(--kp-primary); color: var(--kp-primary); background: var(--kp-surface-high); }

.toggles { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--kp-on-surface-variant); }
.toggles label { display: inline-flex; align-items: center; gap: 8px; }
.toggles input { accent-color: var(--kp-primary); width: 18px; height: 18px; }

.start {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 32px;
  background: rgba(17, 19, 24, 0.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 0; cursor: pointer;
}
.start .hud { font-size: 13px; color: var(--kp-primary); }
.start small { max-width: 280px; text-align: center; color: var(--kp-on-surface-variant); line-height: 1.5; }
.start[hidden] { display: none; }
.start.is-error .hud { color: var(--kp-warning); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}