:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: #141821;
  --panel-2: #191e29;
  --border: #2a3140;
  --text: #eef2f8;
  --muted: #9ba8ba;
  --cyan: #4bd9ec;
  --cyan-dark: #123c46;
  --pink: #ff2d55;
  --green: #62dfa0;
  --red: #ff657a;
  --shadow: 0 20px 50px rgba(0, 0, 0, .28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -10%, rgba(75, 217, 236, .14), transparent 34rem),
    radial-gradient(circle at 90% 12%, rgba(255, 45, 85, .09), transparent 30rem),
    var(--bg);
}

button, input, select { font: inherit; }

button {
  min-height: 2.55rem;
  padding: .6rem .9rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
  color: var(--text);
  background: #202633;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

button:hover:not(:disabled) { border-color: #56647a; background: #293140; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .42; }
button.primary { color: #071014; border-color: var(--cyan); background: var(--cyan); font-weight: 750; }
button.primary:hover:not(:disabled) { background: #7ae6f3; border-color: #7ae6f3; }
button.danger { color: #ffdce2; border-color: #71313d; background: #3a1c24; }

.shell { width: min(1500px, calc(100% - 2rem)); margin: 0 auto; padding: 2.25rem 0 3rem; }

.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.eyebrow, .kicker { margin: 0 0 .4rem; color: var(--cyan); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: -.035em; }
h1 { font-size: clamp(2.25rem, 5vw, 4.6rem); line-height: .95; }
h2 { font-size: 1.45rem; }
.lede { max-width: 48rem; margin: 1rem 0 0; color: var(--muted); font-size: 1.05rem; }

.connection-card {
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr) auto;
  align-items: center;
  gap: .8rem;
  min-width: 31rem;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(20, 24, 33, .82);
  box-shadow: var(--shadow);
}

.connection-card strong, .connection-card span { display: block; }
.connection-card span { margin-top: .13rem; color: var(--muted); font-size: .82rem; }
.status-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #697386; box-shadow: 0 0 0 .3rem rgba(105, 115, 134, .13); }
.status-dot.connected { background: var(--green); box-shadow: 0 0 0 .3rem rgba(98, 223, 160, .13), 0 0 1rem rgba(98, 223, 160, .55); }

.notice { margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid #765f2d; border-radius: .8rem; color: #ffe6aa; background: #2c2719; }
.panel { border: 1px solid var(--border); border-radius: 1rem; background: rgba(20, 24, 33, .92); box-shadow: var(--shadow); }
.connection-guide { margin-bottom: 1rem; padding: 1.15rem; }
.guide-intro { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
.guide-intro > p { max-width: 35rem; margin: 0; color: var(--muted); font-size: .86rem; text-align: right; }
.connection-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.connection-steps li { display: grid; grid-template-columns: auto 1fr; gap: .65rem; min-height: 7.4rem; padding: .8rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--panel-2); transition: border-color .16s ease, background .16s ease; }
.connection-steps li.current { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan-dark) 52%, var(--panel-2)); }
.connection-steps li.complete { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.step-number { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; color: var(--muted); background: #292f3b; font-size: .75rem; font-weight: 800; }
.connection-steps li.current .step-number { color: #061014; background: var(--cyan); }
.connection-steps li.complete .step-number { color: #07150e; background: var(--green); }
.connection-steps strong, .connection-steps span { display: block; }
.connection-steps div > span { margin-top: .4rem; color: var(--muted); font-size: .8rem; line-height: 1.42; }
.pairing-help { margin-top: .8rem; color: var(--muted); font-size: .82rem; }
.pairing-help summary { width: fit-content; color: #cbd5e3; cursor: pointer; }
.pairing-help p { margin: .55rem 0 0; }
.controls-panel { padding: 1.15rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-heading.compact { margin-bottom: 1rem; }
.paint-controls { display: flex; align-items: end; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }
.brush-editor { display: flex; align-items: end; gap: .5rem; }
.color-control, .raw-form label { display: grid; gap: .35rem; color: var(--muted); font-size: .76rem; font-weight: 700; }
input[type="color"] { width: 4.4rem; min-height: 2.55rem; padding: .2rem; border: 1px solid var(--border); border-radius: .65rem; background: #202633; }
.rgb-control { display: flex; gap: .3rem; margin: 0; padding: 0; border: 0; }
.rgb-control legend { margin-bottom: .35rem; padding: 0; color: var(--muted); font-size: .76rem; font-weight: 700; }
.rgb-control label { display: grid; grid-template-columns: auto 3.35rem; align-items: center; gap: .2rem; color: var(--muted); font-size: .72rem; font-weight: 800; }
.rgb-control input[type="number"] { width: 3.35rem; min-height: 2.55rem; padding: .45rem .3rem; border: 1px solid var(--border); border-radius: .55rem; color: var(--text); background: #0e1118; text-align: center; }
.quick-colors { display: grid; gap: .35rem; }
.quick-colors > span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.quick-colors > div { display: flex; gap: .3rem; }
.color-preset { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.55rem; padding: .5rem .55rem; font-size: .75rem; }
.color-preset::before { content: ""; width: .72rem; height: .72rem; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: var(--preset-color); box-shadow: 0 0 .35rem color-mix(in srgb, var(--preset-color) 55%, transparent); }
.color-preset[aria-pressed="true"] { border-color: var(--cyan); background: #303948; box-shadow: inset 0 0 0 1px var(--cyan); }
.hint { margin: .85rem 0; color: var(--muted); font-size: .86rem; }
.hint.warning { color: #d8b980; }

.fretboard-scroll { overflow-x: auto; padding: .35rem 0 .65rem; scrollbar-color: #4a5669 transparent; }
.fretboard { display: grid; grid-template-columns: 3rem repeat(25, minmax(1.8rem, 1fr)); grid-template-rows: 1.7rem repeat(6, 2.45rem); min-width: 870px; gap: 3px; user-select: none; }
.fret-label, .string-label { display: grid; place-items: center; color: #78869b; font-size: .67rem; font-weight: 750; }
.string-label { justify-content: start; padding-left: .3rem; color: #aab5c4; }
.led {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #30394a;
  border-radius: .32rem;
  background: #090b0f;
}
.led::after { content: ""; position: absolute; inset: 37%; border-radius: 50%; background: #222936; box-shadow: 0 0 .25rem #000; }
.led.lit { border-color: color-mix(in srgb, var(--led-color) 70%, #fff 10%); background: color-mix(in srgb, var(--led-color) 18%, #090b0f); }
.led.lit::after { inset: 29%; background: var(--led-color); box-shadow: 0 0 .5rem var(--led-color), 0 0 1.1rem color-mix(in srgb, var(--led-color) 60%, transparent); }
.led:hover { z-index: 1; border-color: var(--cyan); }

.frame-summary { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; color: var(--muted); font-size: .82rem; }
.frame-summary strong { color: var(--text); }
.lower-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 1rem; margin-top: 1rem; }
.lower-grid > .panel, .log-panel { padding: 1.1rem; }
.telemetry { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: 0; }
.telemetry div { padding: .75rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--panel-2); }
.telemetry dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.telemetry dd { margin: .25rem 0 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .95rem; }
.raw-form { display: grid; grid-template-columns: minmax(12rem, .75fr) minmax(14rem, 1fr) auto; align-items: end; gap: .65rem; }
select, input[type="text"] { width: 100%; min-height: 2.55rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .65rem; color: var(--text); background: #0e1118; }
input:focus, select:focus, button:focus-visible, .fretboard-scroll:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.log-panel { margin-top: 1rem; }
#eventLog { min-height: 8.5rem; max-height: 20rem; overflow: auto; margin: 0; padding: .85rem; border: 1px solid var(--border); border-radius: .7rem; color: #b8c7d9; background: #080a0e; font: .78rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem .3rem 0; color: #748095; font-size: .78rem; }
footer p { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

@media (max-width: 930px) {
  .hero { align-items: stretch; flex-direction: column; }
  .connection-card { min-width: 0; }
  .guide-intro { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .guide-intro > p { text-align: left; }
  .connection-steps { grid-template-columns: repeat(2, 1fr); }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .paint-controls { justify-content: flex-start; }
  .lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .shell { width: min(100% - 1rem, 1500px); padding-top: 1rem; }
  .connection-card { grid-template-columns: auto 1fr; }
  .connection-card button { grid-column: 1 / -1; }
  .connection-steps { grid-template-columns: 1fr; }
  .connection-steps li { min-height: 0; }
  .paint-controls { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .brush-editor { grid-column: 1 / -1; align-items: stretch; flex-direction: column; }
  input[type="color"] { width: 100%; }
  .rgb-control { justify-content: space-between; }
  .rgb-control label { flex: 1; grid-template-columns: auto 1fr; }
  .rgb-control input[type="number"] { width: 100%; }
  .quick-colors > div { display: grid; grid-template-columns: repeat(3, 1fr); }
  .raw-form { grid-template-columns: 1fr; }
  .telemetry { grid-template-columns: 1fr 1fr; }
  .frame-summary, footer { flex-direction: column; }
}