:root {
  color-scheme: dark;
  --ink: #fff1c9;
  --muted: #aabbb7;
  --deep: #020b19;
  --navy: #031f3c;
  --panel: rgba(3, 25, 49, .84);
  --panel-solid: #061d35;
  --line: rgba(245, 223, 170, .18);
  --line-bright: rgba(245, 223, 170, .42);
  --blue: #087aa5;
  --teal: #00a6a6;
  --seafoam: #86c9ba;
  --cream: #f5dfaa;
  --peach: #ffad68;
  --orange: #ff6637;
  --red: #ff321b;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { width: 100%; min-height: 100%; overflow-x: hidden; background: var(--deep); overscroll-behavior: none; }
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(8,122,165,.3), transparent 44rem),
    radial-gradient(circle at 8% 78%, rgba(0,166,166,.1), transparent 28rem),
    radial-gradient(circle at 92% 65%, rgba(255,50,27,.055), transparent 24rem),
    var(--deep);
  -webkit-tap-highlight-color: transparent;
}
body::after { content: ""; position: fixed; z-index: 98; inset: -12%; pointer-events: none; box-shadow: inset 0 0 9rem 3rem rgba(0,0,0,.7); }
.crt-overlay { position: fixed; z-index: 99; inset: 0; pointer-events: none; opacity: .22; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.032) 0, rgba(255,255,255,.032) 1px, rgba(0,0,0,.045) 1px, rgba(0,0,0,.045) 4px), linear-gradient(90deg, rgba(255,50,27,.016), rgba(0,166,166,.012), rgba(8,122,165,.016)); mix-blend-mode: screen; }
button, input, select { font: inherit; touch-action: manipulation; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--seafoam); outline-offset: 3px; }

.app-shell { position: relative; z-index: 1; width: 100%; max-width: 76rem; min-width: 0; min-height: 100svh; margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.4rem, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; margin-bottom: .55rem; }
.brand { display: flex; align-items: center; gap: .65rem; font-size: .82rem; font-weight: 850; letter-spacing: .18em; text-shadow: -1px 0 rgba(0,166,166,.45), 1px 0 rgba(255,50,27,.35); }
.brand-mark { width: 1.8rem; height: 1.8rem; border: 2px solid var(--cream); border-radius: .55rem; background: linear-gradient(135deg, var(--blue) 0 24%, var(--teal) 24% 42%, var(--cream) 42% 58%, var(--orange) 58% 76%, var(--red) 76%); box-shadow: 0 0 .9rem rgba(0,166,166,.3); }
.top-actions { display: flex; align-items: center; gap: .4rem; }
.icon-button { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border: 1px solid var(--line); border-radius: .85rem; color: var(--cream); background: rgba(8,122,165,.12); font-size: 1.25rem; }
.icon-button:disabled { opacity: .35; }
.icon-button.active { color: var(--deep); border-color: var(--cream); background: var(--cream); }
.text-icon { width: auto; min-width: 3.8rem; padding-inline: .65rem; font-size: .65rem; font-weight: 850; letter-spacing: .09em; }
.settings-button { font-size: 1.55rem; line-height: 1; }
.workspace { display: grid; width: 100%; min-width: 0; max-width: 100%; gap: .9rem; }
.performance-column { min-width: 0; }

.instrument {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 29rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(134,201,186,.12);
  border-radius: 2.4rem;
  background: linear-gradient(160deg, rgba(8,122,165,.07), rgba(2,11,25,.46) 46%, rgba(255,50,27,.028));
  box-shadow: inset 0 1px rgba(255,255,255,.035), inset 0 0 3.2rem rgba(0,0,0,.34), 0 1.2rem 3rem rgba(0,0,0,.2);
}
.instrument::before { content: ""; position: absolute; z-index: -3; width: 22rem; height: 22rem; border: 1px solid rgba(134,201,186,.08); border-radius: 50%; box-shadow: 0 0 4rem rgba(0,166,166,.08), inset 0 0 4rem rgba(8,122,165,.06); }
#pitchTrail { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: .78; pointer-events: none; }
.pitch-readout { position: absolute; top: 2.55rem; z-index: 4; text-align: center; }
.note { margin: 0; font-size: clamp(4.7rem, 22vw, 8.6rem); font-weight: 300; line-height: .86; letter-spacing: -.08em; text-shadow: -1.5px 0 rgba(0,166,166,.5), 1.5px 0 rgba(255,50,27,.42), 0 0 1.45rem rgba(245,223,170,.3); }
.octave { margin-left: .08em; font-size: .31em; color: var(--muted); letter-spacing: 0; }
.frequency { margin: .8rem 0 0; color: var(--muted); font-variant-numeric: tabular-nums; text-shadow: -1px 0 rgba(0,166,166,.3), 1px 0 rgba(255,50,27,.22); }
.sound-badge { margin: .55rem 0 0; color: var(--seafoam); font-size: .72rem; font-weight: 760; letter-spacing: .045em; }
.level-rail { position: absolute; z-index: 5; right: .8rem; top: 5rem; width: 3px; height: 10.5rem; border-radius: 4px; background: rgba(255,255,255,.09); }
.level-rail span { position: absolute; inset: auto 0 0; height: 15%; border-radius: inherit; background: linear-gradient(to top, var(--red), var(--orange), var(--cream), var(--teal)); box-shadow: 0 0 .75rem var(--cream); transition: height 120ms linear; }
.octave-controls { position: absolute; z-index: 6; left: .7rem; top: 9rem; display: grid; grid-template-rows: 2.1rem 1.7rem 2.1rem; place-items: center; width: 2.3rem; border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; background: rgba(2,11,25,.7); }
.octave-controls button { width: 100%; height: 100%; border: 0; background: rgba(8,122,165,.1); font-size: .72rem; font-weight: 850; }
.octave-controls output { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.instrument-shortcuts { position: absolute; z-index: 6; bottom: 13.05rem; display: none; align-items: center; justify-content: center; gap: .35rem; }
.instrument-started .instrument-shortcuts { display: flex; }
.instrument-shortcuts .chip-button { min-height: 2.05rem; padding: .38rem .72rem; border-color: rgba(134,201,186,.2); background: rgba(2,11,25,.58); font-size: .64rem; letter-spacing: .035em; }
.instrument-shortcuts .chip-button:active { color: var(--deep); background: var(--seafoam); }

.play-pad { position: absolute; bottom: 5.2rem; z-index: 5; display: grid; place-items: center; gap: .55rem; width: 11.7rem; height: 7rem; padding: .9rem; border: 1.5px solid var(--cream); border-radius: 2rem; color: var(--cream); background: linear-gradient(155deg, rgba(8,122,165,.18), rgba(3,31,60,.95)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 .8rem 2rem rgba(0,0,0,.28), 0 0 1.2rem rgba(0,166,166,.1); touch-action: none; user-select: none; -webkit-user-select: none; transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease; }
.play-orb { width: 3.35rem; height: 3.35rem; border: .34rem solid var(--cream); border-radius: 1.05rem; background: var(--orange); box-shadow: 0 0 1rem rgba(245,223,170,.24), inset 0 0 0 1px rgba(255,50,27,.5); transition: transform 120ms ease, background 120ms ease; }
.play-pad span:last-child { max-width: 9rem; font-size: .82rem; font-weight: 800; line-height: 1.1; }
.play-pad:disabled { opacity: .58; }
.play-pad.playing { transform: translateY(2px); background: var(--red); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 .35rem 1rem rgba(0,0,0,.3), 0 0 2rem rgba(255,50,27,.3); }
.play-pad.playing .play-orb { transform: scale(.9); background: var(--cream); }
.performance-actions { position: absolute; z-index: 6; bottom: .75rem; display: flex; align-items: center; gap: .45rem; width: calc(100% - 1.5rem); }
.play-mode { display: flex; flex: 1; min-width: 0; padding: .23rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(2,11,25,.68); }
.chip-button { min-height: 2.35rem; padding: .42rem .72rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(3,31,60,.74); font-size: .69rem; font-weight: 800; }
.play-mode .chip-button { flex: 1; min-width: 0; min-height: 2rem; padding-inline: .42rem; border: 0; background: transparent; }
.chip-button.active { color: var(--deep); background: var(--cream); }
.record-button { flex: 0 0 auto; }
.record-button span { color: var(--red); }
.record-button.active { color: var(--ink); border-color: var(--red); background: rgba(255,50,27,.18); }
.chip-button:disabled { opacity: .4; }

.start-panel, .quick-panel, .harmony-layer, .recording-panel, .settings-panel, .install-hint { border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(1.4rem); -webkit-backdrop-filter: blur(1.4rem); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 1.2rem 2.8rem rgba(0,0,0,.2); }
.start-panel { display: grid; gap: 1.1rem; margin-top: .9rem; padding: 1.25rem; border-radius: 1.7rem; }
.start-panel.hidden { display: none; }
.eyebrow { margin: 0 0 .35rem; color: var(--seafoam); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; text-shadow: -1px 0 rgba(255,50,27,.3), 0 0 .6rem rgba(0,166,166,.24); }
h1 { margin: 0; font-size: 1.55rem; letter-spacing: -.03em; }
.start-panel p:not(.eyebrow) { margin: .6rem 0 0; color: var(--muted); line-height: 1.45; }
.primary-button { min-height: 3.5rem; border: 0; border-radius: 1.05rem; color: var(--ink); background: linear-gradient(135deg, var(--orange), var(--red)); font-weight: 850; box-shadow: 0 .7rem 2rem rgba(255,50,27,.2), inset 0 1px rgba(255,255,255,.2); }
.primary-button:disabled { opacity: .6; }
.permission-note { font-size: .82rem; text-align: center; }

.control-panel { display: none; width: 100%; min-width: 0; max-width: 100%; gap: .9rem; }
.control-panel.visible { display: grid; }
.quick-panel, .harmony-layer, .recording-panel { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; border-radius: 1.55rem; padding: 1rem; }
.harmony-heading, .recording-panel > div:first-child, .recording-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.status-dot { display: inline-block; width: .5rem; height: .5rem; margin-right: .38rem; border-radius: 50%; background: #6e7a78; }
.status-dot.live { background: var(--teal); box-shadow: 0 0 .7rem var(--teal); }
.text-button { border: 0; color: var(--cream); background: none; font-size: .82rem; font-weight: 780; }
.text-button:disabled { color: var(--muted); opacity: .45; }
.musical-strip { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; padding: .9rem 0 .75rem; }
.musical-strip .preset-field { grid-column: 1 / -1; }
.musical-strip label, .select-grid label { display: grid; gap: .38rem; color: var(--muted); font-size: .74rem; }
select { width: 100%; min-height: 2.65rem; padding: .55rem 1.8rem .55rem .7rem; border: 1px solid var(--line); border-radius: .75rem; color: var(--ink); background: rgba(2,11,25,.65); font-size: .86rem; }
.mode-row { display: flex; gap: .3rem; padding: .28rem; border-radius: .9rem; background: rgba(0,0,0,.23); }
.mode-button { flex: 1; padding: .65rem; border: 0; border-radius: .68rem; color: var(--muted); background: none; font-size: .8rem; }
.mode-button.active { color: var(--navy); background: var(--cream); }

.harmony-heading { align-items: end; }
.harmony-heading h2 { margin: 0; font-size: 1.12rem; letter-spacing: -.02em; }
.harmony-description { margin: .5rem 0 .75rem; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.harmony-keyboard { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.05rem, 1fr); gap: .38rem; width: 100%; min-width: 0; max-width: 100%; padding: .12rem 0 .35rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; touch-action: none; user-select: none; -webkit-user-select: none; }
.harmony-key { display: grid; align-content: space-between; min-height: 5rem; padding: .65rem .3rem .45rem; border: 1px solid rgba(245,223,170,.3); border-radius: .65rem 1.1rem .65rem .65rem; color: var(--ink); background: linear-gradient(165deg, rgba(134,201,186,.17), rgba(3,31,60,.9) 55%); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 .35rem .9rem rgba(0,0,0,.14); touch-action: none; transition: transform 110ms ease, background 110ms ease; }
.harmony-key:nth-child(3n + 2) { background: linear-gradient(165deg, rgba(8,122,165,.25), rgba(3,31,60,.92) 55%); }
.harmony-key:nth-child(3n) { background: linear-gradient(165deg, rgba(255,102,55,.13), rgba(3,31,60,.92) 55%); }
.harmony-key span { font-size: 1rem; font-weight: 820; }
.harmony-key small { color: var(--muted); font-size: .65rem; }
.harmony-key.active { transform: translateY(3px); color: var(--deep); border-color: var(--cream); background: linear-gradient(160deg, var(--cream), var(--peach)); box-shadow: 0 0 1.05rem rgba(255,173,104,.25); }
.harmony-key.active small { color: rgba(2,11,25,.64); }
.layer-volume { display: block; padding-top: .7rem; }
.layer-volume > span, .control-grid label > span { display: flex; justify-content: space-between; margin-bottom: .62rem; font-size: .84rem; }
output { color: var(--muted); font-variant-numeric: tabular-nums; }
input[type="range"] {
  display: block;
  width: 100%;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: .28rem;
  border: 1px solid rgba(245,223,170,.38);
  border-radius: 999px;
  background: rgba(245,223,170,.24);
}
input[type="range"]::-webkit-slider-thumb {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: -.535rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(245,223,170,.65);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 .7rem rgba(255,102,55,.25);
}
.layer-volume input[type="range"]::-webkit-slider-thumb { background: var(--seafoam); box-shadow: 0 0 .7rem rgba(134,201,186,.22); }
input[type="range"]::-moz-range-track {
  height: .28rem;
  border: 1px solid rgba(245,223,170,.38);
  border-radius: 999px;
  background: rgba(245,223,170,.24);
}
input[type="range"]::-moz-range-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgba(245,223,170,.65);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 .7rem rgba(255,102,55,.25);
}
.layer-volume input[type="range"]::-moz-range-thumb { background: var(--seafoam); box-shadow: 0 0 .7rem rgba(134,201,186,.22); }
.harmony-actions { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.harmony-actions > div { display: flex; align-items: center; gap: .5rem; }
.performance-statuses { min-width: 0; flex-wrap: wrap; }
.motion-state { min-width: 0; color: var(--muted); font-size: .75rem; }
.motion-state span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.background-status { display: inline-flex; align-items: center; gap: .28rem; padding: .25rem .48rem; border: 1px solid rgba(134,201,186,.2); border-radius: 999px; color: var(--seafoam); background: rgba(0,166,166,.08); font-size: .62rem; font-weight: 780; white-space: nowrap; }
.background-status[hidden] { display: none; }
.background-status.confirmed { color: var(--deep); border-color: var(--seafoam); background: var(--seafoam); }
.recording-panel { display: grid; gap: .7rem; }
.recording-panel[hidden] { display: none; }
.recording-panel audio { width: 100%; height: 2.6rem; }
.recording-panel span { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.text-link { color: var(--cream); font-size: .82rem; font-weight: 760; text-decoration: none; }

.settings-backdrop { position: fixed; z-index: 108; inset: 0; background: rgba(0,5,13,.64); opacity: 0; transition: opacity 180ms ease; }
.settings-backdrop.visible { opacity: 1; }
.settings-panel { position: fixed; z-index: 110; inset: auto .55rem 0; max-height: 88svh; overflow: hidden; border-radius: 1.8rem 1.8rem 0 0; background: rgba(3,24,46,.97); transform: translateY(105%); transition: transform 220ms ease; }
.settings-panel.open { transform: translateY(0); }
.settings-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .85rem; border-bottom: 1px solid var(--line); }
.settings-header h2 { margin: 0; font-size: 1.35rem; }
.settings-scroll { max-height: calc(88svh - 4.5rem); padding: .2rem 1rem max(1.2rem, env(safe-area-inset-bottom)); overflow-y: auto; }
.settings-section { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.settings-section h3 { margin: 0 0 .2rem; color: var(--cream); font-size: .88rem; letter-spacing: .02em; }
.midi-heading { display: flex; align-items: center; justify-content: space-between; gap: .9rem; }
.midi-heading p, .midi-note { margin: .28rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.compact-button { width: auto; min-width: 7rem; min-height: 2.45rem; margin: 0; padding: .45rem .7rem; }
.midi-section .select-grid { padding-bottom: .3rem; }
.midi-section .select-grid[hidden] { display: none; }
.midi-port-field { grid-column: 1 / -1; }
.midi-learn { grid-column: 1 / -1; margin-top: .05rem; border: 1px solid rgba(134,201,186,.17); border-radius: .85rem; background: rgba(0,0,0,.12); overflow: hidden; }
.midi-learn summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .68rem .75rem; color: var(--cream); cursor: pointer; list-style: none; }
.midi-learn summary::-webkit-details-marker { display: none; }
.midi-learn summary::after { content: '›'; color: var(--muted); font-size: 1.15rem; line-height: .8; transform: rotate(90deg); transition: transform 140ms ease; }
.midi-learn[open] summary::after { transform: rotate(-90deg); }
.midi-learn summary strong { flex: 1; font-size: .76rem; }
.midi-learn summary span { color: var(--muted); font-size: .66rem; white-space: nowrap; }
.midi-learn-body { display: grid; gap: .55rem; padding: 0 .7rem .7rem; border-top: 1px solid rgba(245,223,170,.08); }
.midi-learn-body > p { margin: .58rem 0 0; color: var(--muted); font-size: .67rem; line-height: 1.35; }
.midi-learn-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .55rem; }
.midi-learn-controls label { min-width: 0; }
.midi-learn .compact-button { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-width: 6.4rem; min-height: 2.65rem; margin: 0; }
.learn-dot { width: .48rem; height: .48rem; border: 1px solid currentColor; border-radius: 50%; }
.midi-learn .compact-button.active { color: var(--deep); border-color: var(--cream); background: var(--cream); }
.midi-learn .compact-button.active .learn-dot { border-color: var(--red); background: var(--red); box-shadow: 0 0 .55rem rgba(255,50,27,.55); animation: learn-pulse 1s ease-in-out infinite; }
.midi-learn-footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.45rem; }
.midi-learn-footer .text-button { flex: 0 0 auto; padding: .15rem 0; color: var(--muted); font-size: .67rem; }
.midi-learn-footer .text-button[hidden] { display: none; }
.midi-learn-status { display: flex; flex-wrap: wrap; gap: .38rem; }
.midi-learn-status .empty { color: var(--muted); font-size: .68rem; }
.midi-map-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(3,31,60,.6); font-size: .64rem; }
.midi-map-chip strong { color: var(--cream); font-size: .62rem; }
@keyframes learn-pulse { 50% { opacity: .42; } }
.midi-note { margin-top: .65rem; }
.midi-section.connected .midi-heading > .compact-button { color: var(--deep); border-color: var(--seafoam); background: var(--seafoam); }
.control-grid { display: grid; gap: 1.05rem; padding: .9rem 0; }
.select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: .75rem 0; }
.select-grid label:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sound-lab, .advanced-controls, .diagnostics { padding: .15rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.sound-lab summary, .advanced-controls summary, .diagnostics summary { padding: 1rem 0 .8rem; color: var(--cream); cursor: pointer; font-size: .9rem; font-weight: 780; }
.toggle-grid { display: grid; gap: .68rem; padding: .2rem 0 1rem; }
.toggle-grid label { display: flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .84rem; }
.toggle-grid input { width: 1.15rem; height: 1.15rem; accent-color: var(--orange); }
.diagnostics dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .2rem 0 0; }
.diagnostics dl div { padding: .7rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(0,0,0,.12); }
.diagnostics dt { font-size: .7rem; }
.diagnostics dd { margin: .28rem 0 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.secondary-button { width: 100%; min-height: 2.8rem; margin: .85rem 0 1rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(8,122,165,.13); font-weight: 750; }
.install-hint { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .8rem .9rem; border-radius: 1rem; color: var(--muted); }
.install-hint[hidden] { display: none; }
.install-hint > span { display: grid; flex: 0 0 2rem; height: 2rem; place-items: center; border-radius: .62rem; color: var(--cream); background: linear-gradient(135deg, rgba(0,166,166,.4), rgba(8,122,165,.32)); }
.install-hint p { margin: 0; font-size: .78rem; line-height: 1.4; }
.install-hint strong { color: var(--ink); }
.about-links, .info-links { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: 1rem .2rem; }
.about-links a, .info-links a, .info-card a { color: var(--seafoam); font-size: .76rem; font-weight: 760; text-underline-offset: .2em; }

.info-page { min-height: 100%; }
.info-shell { position: relative; z-index: 1; width: min(46rem, 100%); min-height: 100svh; margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom)); }
.info-back { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--muted); font-size: .8rem; font-weight: 760; text-decoration: none; }
.info-header { padding: 1.35rem .2rem 1rem; }
.info-header .brand { margin-bottom: 2rem; }
.info-header h1 { max-width: 13ch; font-size: clamp(2rem, 9vw, 3.35rem); line-height: 1; }
.info-header > p:last-child { margin: .8rem 0 0; color: var(--muted); line-height: 1.5; }
.info-card { padding: 1.15rem; border: 1px solid var(--line); border-radius: 1.55rem; background: var(--panel); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 1.2rem 2.8rem rgba(0,0,0,.2); }
.info-card h2 { margin: 1.55rem 0 .45rem; color: var(--cream); font-size: 1.05rem; }
.info-card h2:first-child { margin-top: 0; }
.info-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.faq-list { padding-block: .35rem; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary { padding: 1rem 0; color: var(--cream); cursor: pointer; font-size: .9rem; font-weight: 790; }
.faq-list details p { padding: 0 0 1rem; }
.faq-list strong { color: var(--ink); }

.remote-host-controls[hidden], .remote-view[hidden] { display: none; }
.remote-host-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .65rem; margin-top: .85rem; padding: .8rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(0,0,0,.16); }
.remote-host-controls .remote-qr { grid-column: 1 / -1; display: grid; justify-items: center; gap: .55rem; padding: .35rem 0 .75rem; border-bottom: 1px solid var(--line); }
.remote-qr img { display: block; width: min(11.5rem, 62vw); aspect-ratio: 1; padding: .5rem; border-radius: 1rem; background: #fff7df; box-shadow: 0 .8rem 2rem rgba(0,0,0,.24), 0 0 1.2rem rgba(134,201,186,.12); }
.remote-qr span { color: var(--ink); font-size: .74rem; font-weight: 760; }
.remote-host-controls > div { display: grid; gap: .15rem; }
.remote-host-controls span { color: var(--muted); font-size: .7rem; }
.remote-host-controls output { color: var(--cream); font-size: 1.35rem; font-weight: 850; letter-spacing: .13em; }
.remote-host-controls .compact-button { grid-row: 1 / span 2; grid-column: 2; }
.remote-host-controls .text-button { grid-column: 1 / -1; justify-self: end; }
.remote-join { margin-top: .7rem; color: var(--muted); font-size: .76rem; }
.remote-join summary { padding: .35rem 0; color: var(--cream); cursor: pointer; font-weight: 750; }
.remote-join > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .6rem; padding-top: .65rem; }
.remote-join .remote-scan { grid-column: 1 / -1; width: 100%; }
.remote-join label { display: grid; gap: .35rem; }
.remote-join input { min-width: 0; min-height: 2.65rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .75rem; color: var(--ink); background: rgba(2,11,25,.65); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.remote-view { --remote-x: 0rem; --remote-y: 0rem; position: relative; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; max-width: 42rem; min-height: 100svh; margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.2rem, env(safe-area-inset-bottom)); overflow: hidden; }
.remote-topbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3rem; }
.remote-topbar .brand { font-size: .72rem; }
.remote-topbar > span { padding: .42rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(3,31,60,.72); font-size: .7rem; font-weight: 780; white-space: nowrap; }
.remote-topbar > span.connected { color: var(--deep); border-color: var(--seafoam); background: var(--seafoam); box-shadow: 0 0 1rem rgba(134,201,186,.2); }
.remote-stage { position: relative; display: grid; grid-template-rows: auto minmax(13rem, 1fr) auto auto auto auto; align-items: center; gap: .8rem; min-height: 0; margin-top: .55rem; padding: 1.2rem; overflow: hidden; border: 1px solid rgba(134,201,186,.18); border-radius: 2rem; background: linear-gradient(160deg, rgba(8,122,165,.13), rgba(2,11,25,.58) 52%, rgba(255,50,27,.04)); box-shadow: inset 0 1px rgba(255,255,255,.04), inset 0 0 4rem rgba(0,0,0,.25); }
.remote-stage::before { content: ""; position: absolute; inset: 8rem -8rem auto; height: 24rem; border: 1px solid rgba(134,201,186,.1); border-radius: 50%; box-shadow: 0 0 5rem rgba(0,166,166,.08), inset 0 0 5rem rgba(8,122,165,.05); pointer-events: none; }
.remote-readout { position: relative; z-index: 1; text-align: center; }
.remote-readout h1 { font-size: clamp(1.5rem, 7vw, 2.15rem); }
.remote-readout p:last-child { margin: .4rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.remote-orb { position: relative; display: grid; width: min(70vw, 19rem); aspect-ratio: 1; place-self: center; place-items: center; border: 1px solid rgba(134,201,186,.14); border-radius: 50%; box-shadow: inset 0 0 3rem rgba(0,166,166,.05); }
.remote-orb::before { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(245,223,170,.16); border-radius: 50%; }
.remote-orb span { width: 5.2rem; height: 5.2rem; border: .35rem solid var(--cream); border-radius: 1.5rem; background: linear-gradient(145deg, var(--orange), var(--red)); box-shadow: 0 0 2rem rgba(255,102,55,.24), inset 0 1px rgba(255,255,255,.2); transform: translate(var(--remote-x), var(--remote-y)); transition: transform 55ms linear; }
.remote-values { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0; }
.remote-values div { padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .9rem; background: rgba(2,11,25,.48); }
.remote-values dt { color: var(--muted); font-size: .68rem; }
.remote-values dd { margin: .2rem 0 0; color: var(--cream); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.remote-stage .primary-button, .remote-stage .secondary-button { position: relative; z-index: 1; width: 100%; margin: 0; }
.remote-stage .primary-button.remote-play-enabled { touch-action: none; user-select: none; -webkit-user-select: none; }
.remote-stage .primary-button.remote-play-enabled.playing { transform: translateY(2px) scale(.99); background: linear-gradient(135deg, var(--red), #d92d1a); box-shadow: inset 0 2px rgba(255,255,255,.12), 0 .35rem 1rem rgba(0,0,0,.28), 0 0 2rem rgba(255,50,27,.28); }
.remote-stage .permission-note { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
body.remote-mode { overflow: hidden; }

.toast { position: fixed; left: 50%; bottom: max(1.1rem, env(safe-area-inset-bottom)); z-index: 120; width: max-content; max-width: calc(100% - 2rem); padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--navy); opacity: 0; transform: translate(-50%, 1rem); transition: 180ms ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

body.settings-open { overflow: hidden; }
body.performance-mode { overflow: hidden; }
.performance-mode .app-shell { width: 100%; max-width: none; height: 100svh; padding: max(.65rem, env(safe-area-inset-top)) .65rem max(.65rem, env(safe-area-inset-bottom)); overflow: hidden; }
.performance-mode .topbar { position: absolute; z-index: 12; inset: max(.65rem, env(safe-area-inset-top)) .65rem auto; }
.performance-mode .brand, .performance-mode .settings-button { visibility: hidden; }
.performance-mode .workspace { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; gap: .55rem; }
.performance-mode .performance-column { min-height: 0; }
.performance-mode .instrument { height: 100%; min-height: 0; }
.performance-mode .start-panel, .performance-mode .quick-panel, .performance-mode .recording-panel { display: none !important; }
.performance-mode .control-panel.visible { display: block; }
.performance-mode .harmony-layer { padding: .55rem; border-radius: 1.05rem; background: rgba(3,25,49,.94); }
.performance-mode .harmony-heading, .performance-mode .harmony-description, .performance-mode .layer-volume { display: none; }
.performance-mode .harmony-actions { margin-top: .45rem; padding: .42rem .15rem 0; }
.performance-mode .harmony-actions > .performance-statuses { flex: 1 1 auto; flex-wrap: nowrap; overflow: hidden; }
.performance-mode .harmony-actions > div:last-child { flex: 0 0 auto; }
.performance-mode .motion-state { display: flex; flex: 1 1 auto; align-items: center; overflow: hidden; }
.performance-mode .motion-state span:last-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.performance-mode .harmony-keyboard { padding: 0 0 .15rem; }
.performance-mode .harmony-key { min-height: 3.6rem; padding-block: .48rem .35rem; }

@media (min-width: 42rem) {
  .app-shell { padding-inline: 1.5rem; }
  .instrument { min-height: 36rem; }
  .start-panel { grid-template-columns: 1fr auto; align-items: center; padding: 1.5rem; }
  .start-panel .permission-note { grid-column: 2; margin: -.85rem 0 0; }
  .primary-button { min-width: 12rem; }
  .musical-strip { grid-template-columns: 1.5fr .75fr 1fr; }
  .musical-strip .preset-field { grid-column: auto; }
  .essential-controls, .sound-lab .control-grid { grid-template-columns: 1fr 1fr; }
  .settings-panel { inset: 0 0 0 auto; width: min(29rem, 92vw); max-height: none; border-radius: 1.5rem 0 0 1.5rem; transform: translateX(105%); }
  .settings-panel.open { transform: translateX(0); }
  .settings-scroll { max-height: calc(100svh - 4.5rem); padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); }
  .remote-view { padding-inline: 1.5rem; }
  .info-shell { padding-inline: 1.5rem; }
  .info-card { padding: 1.6rem; }
}

@media (min-width: 58rem) and (min-height: 40rem) and (orientation: landscape) {
  .topbar { margin-bottom: .8rem; }
  .workspace { grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr); align-items: start; gap: 1rem; }
  .instrument { min-height: calc(100svh - 6rem); max-height: 48rem; }
  .control-panel.visible { align-content: start; }
  .harmony-layer { min-height: 18rem; }
  .harmony-keyboard { grid-auto-columns: minmax(3.2rem, 1fr); }
  body:not(.instrument-started) .workspace { grid-template-columns: minmax(0, 44rem); justify-content: center; }
  .start-panel { position: absolute; z-index: 8; left: 50%; bottom: 2rem; width: min(43rem, calc(100% - 4rem)); transform: translateX(-50%); }

  .performance-mode .workspace { grid-template-columns: minmax(0, 1.2fr) minmax(22rem, .8fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .performance-mode .performance-column { height: 100%; }
  .performance-mode .instrument { height: 100%; min-height: 0; max-height: none; }
  .performance-mode .control-panel.visible { align-self: stretch; min-height: 0; padding-top: 3.15rem; }
  .performance-mode .harmony-layer { min-height: 0; }
}

@media (max-width: 24rem) {
  .app-shell { padding-inline: .75rem; }
  .instrument { min-height: 28.5rem; }
  .play-pad { width: 10.7rem; }
  .chip-button { padding-inline: .55rem; font-size: .64rem; }
  .record-button { padding-inline: .7rem; }
  .harmony-actions { align-items: flex-start; }
  .motion-state { max-width: 10rem; }
  .background-status { padding-inline: .38rem; }
}

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