html[data-theme=dark] body:has(:is(#homePage,#connectionPage):not([hidden])) {
  --theme-bg:#05080c;
  --theme-surface:#0c1118;
  --theme-subtle:#111923;
  --theme-input:#090e14;
  --theme-ink:#d6e0ec;
  --theme-muted:#a0afc1;
  --theme-border:#293640;
  --theme-strong-line:#4f6576;
  --theme-action:#7fb9c3;
  --theme-accent:#7fb9c3;
  --theme-meter-fill:#659eab;
  --theme-hover:#18242c;
  --theme-selected:#15242b;
  --theme-selected-ink:#d8e7eb;
  --theme-danger:#b9758c;
  --theme-danger-ink:#d59aaf;
  --theme-danger-surface:#251720;
  --theme-meter-track:#202c38;
  --theme-guitar:#75aeb9;
  --theme-tab:#a398bd;
  --theme-metro:#98a6c1;
  --theme-master:#75aeb9;
  background:#05080c;
}
html[data-theme=dark] body:has(:is(#homePage,#connectionPage):not([hidden]))::before,
html[data-theme=dark] body:has(:is(#homePage,#connectionPage):not([hidden]))::after { display:none; }
html[data-theme=dark] body:has(:is(#homePage,#connectionPage):not([hidden])) .brand .theme-logo { filter:saturate(.55) brightness(.8) drop-shadow(0 0 5px #69a8b22b); }
html[data-theme=dark] body:has(:is(#homePage,#connectionPage):not([hidden])) .main-nav a[aria-current=page] { text-shadow:none; }
html[data-theme=dark] :is(#homePage,#connectionPage) :is(button,a,input,select,summary):focus-visible { outline:2px solid #c3dce2; outline-offset:5px; }
html[data-theme=dark] #connectionPage { padding-top:16px; }
html[data-theme=dark] #connectionPage .record-page-title,
html[data-theme=dark] #homePage .city-heading h1 { margin:0; font-size:13px; font-weight:500; letter-spacing:.08em; color:var(--theme-muted); }
html[data-theme=dark] #connectionPage .record-page-title { margin-bottom:30px; }
html[data-theme=dark] #connectionPage :is(.studio-tuner,.studio-metro,.studio-transport,.studio-console,.studio-history) {
  --sign-color:#659eab;
  --sign-glow:#659eab25;
  position:relative;
  isolation:isolate;
  padding:32px 24px 20px;
  border:1px solid var(--sign-color);
  border-radius:9px;
  background:linear-gradient(135deg,#0a1016,#06090d 65%);
  box-shadow:0 0 12px var(--sign-glow),inset 0 0 10px #659eab06;
}
html[data-theme=dark] #connectionPage :is(.studio-metro,.studio-history) { --sign-color:#9585b1; --sign-glow:#9585b123; }
html[data-theme=dark] #connectionPage .studio-transport { --sign-color:#ad7088; --sign-glow:#ad708823; margin-top:30px; }
html[data-theme=dark] #connectionPage :is(.studio-tuner,.studio-metro,.studio-transport,.studio-console,.studio-history)::before {
  content:""; position:absolute; inset:4px; border:1px solid var(--sign-glow); border-radius:5px; pointer-events:none; z-index:-1;
  background:radial-gradient(circle at 6px 6px,var(--sign-color) 0 1px,transparent 2px),radial-gradient(circle at calc(100% - 6px) calc(100% - 6px),var(--sign-color) 0 1px,transparent 2px);
}
html[data-theme=dark] #connectionPage :is(.hero,.note-stage,.tool-heading,.tool-heading>div,.mixer-title,.take-panel,.take-heading) { position:static; }
html[data-theme=dark] #connectionPage :is(.tuner-label,.studio-metro h2,.studio-transport h2,.mixer-title h2,.take-heading h2) {
  position:absolute; top:-17px; left:24px; width:fit-content; max-width:calc(100% - 48px);
  margin:0; padding:5px 16px 7px; border:1px solid var(--sign-color); border-radius:6px; background:#080c12;
  color:color-mix(in srgb,var(--sign-color) 70%,#ecf1fa); font-size:20px; line-height:1.4; letter-spacing:.07em;
  box-shadow:0 0 8px var(--sign-glow); text-shadow:0 0 8px var(--sign-glow);
}
html[data-theme=dark] #connectionPage .note-stage { grid-template-rows:0 27px 52px 30px; min-height:145px; }
html[data-theme=dark] #connectionPage .note { color:#b7d7de; text-shadow:0 0 10px #6aabb322; }
html[data-theme=dark] #connectionPage .tune {
  background:repeating-linear-gradient(to right,#6c9fa9 0 1px,transparent 1px 2.5%) center/100% 12px no-repeat;
  filter:drop-shadow(0 0 3px #6398a24d);
}
html[data-theme=dark] #connectionPage .tune::before { content:""; position:absolute; inset:50% 0 auto; height:1px; background:#54828b; box-shadow:0 0 5px #6398a230; }
html[data-theme=dark] #connectionPage .tune::after { background:#96b9c0; box-shadow:0 0 5px #659eab40; }
html[data-theme=dark] #connectionPage .tune i { opacity:0; }
html[data-theme=dark] #connectionPage .detected .tune i { opacity:1; background:#acd8de; box-shadow:0 0 7px #659eab88; }
html[data-theme=dark] #connectionPage :is(.device-field select,.metro-options select,.bpm-control button) { background:#0b1119; border-color:#425765; }
html[data-theme=dark] #connectionPage :is(.secondary-button,.mute-button,.playback-mode button) { background:#0b1119; border-color:#425565; box-shadow:none; }
html[data-theme=dark] #connectionPage :is(#startButton,#metroButton):not(:disabled) { color:#a0c8d0; border-color:#689fac; background:#0b171e; box-shadow:0 0 9px #659eab22,inset 0 0 10px #659eab0a; }
html[data-theme=dark] #connectionPage :is(#startButton,#metroButton):hover:not(:disabled) { background:#14242d; box-shadow:0 0 10px #659eab35; }
html[data-theme=dark] #connectionPage :is(#recordButton,#stopRecordButton) { color:#d7a2b4; border-color:#b87991; background:#20131b; box-shadow:0 0 12px #ad708825; }
html[data-theme=dark] #connectionPage :is(#recordButton,#stopRecordButton):hover:not(:disabled) { color:#e4bac9; background:#2c1d25; }
html[data-theme=dark] #connectionPage .meter { background:#1e2b36; }
html[data-theme=dark] #connectionPage .meter i { background:#75aeb9; box-shadow:none; }
html[data-theme=dark] #connectionPage .beat-dots i { background:#0c121b; border-color:#46526a; }
html[data-theme=dark] #connectionPage .beat-dots i.on { background:#a093bc; border-color:#c0b3d7; box-shadow:0 0 10px #9585b150; }
html[data-theme=dark] #connectionPage .studio-metro { grid-template-rows:0 1fr auto; gap:14px 20px; }
html[data-theme=dark] #connectionPage .studio-transport .tool-heading>div { display:contents; }
html[data-theme=dark] #connectionPage .studio-transport .tool-heading>div>span { display:none; }
html[data-theme=dark] #connectionPage #recordTime { font-size:48px; color:#d6e0ec; }
html[data-theme=dark] #connectionPage #recordTime.recording { color:#d7a2b4; }
html[data-theme=dark] #connectionPage .capture-actions button { min-height:48px; }
html[data-theme=dark] #connectionPage .studio-bottom { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:22px; margin-top:30px; }
html[data-theme=dark] #connectionPage .mixer-title { justify-content:flex-end; margin:0 0 12px; min-height:16px; }
html[data-theme=dark] #connectionPage .mixer-title span { font-size:11px; }
html[data-theme=dark] #connectionPage .signal-meter { background:#202b36; }
html[data-theme=dark] #connectionPage .signal-meter-fill { box-shadow:0 0 5px var(--channel-accent); }
html[data-theme=dark] #connectionPage .signal-meter.is-clipping .signal-meter-fill { background:#d59aaf; }
html[data-theme=dark] #connectionPage .mixer-channel input[type=range]::-webkit-slider-thumb { border-color:var(--channel-accent); background:linear-gradient(#17222c 0 40%,var(--channel-accent) 43% 56%,#15212b 59%); box-shadow:0 0 6px color-mix(in srgb,var(--channel-accent) 18%,transparent); }
html[data-theme=dark] #connectionPage .mixer-channel input[type=range]::-moz-range-thumb { border-color:var(--channel-accent); background:linear-gradient(#17222c 0 40%,var(--channel-accent) 43% 56%,#15212b 59%); }
html[data-theme=dark] #connectionPage .take-heading { justify-content:flex-end; min-height:16px; }
html[data-theme=dark] #connectionPage .take-panel>.text-button { color:#a4c9d1; }
html[data-theme=dark] #connectionPage .playback-mode button[aria-pressed=true] { background:#13212b; color:#b2d2d9; border-color:#698b9b; }
html[data-theme=dark] #connectionPage .recording-timeline { background:#080d13; }
html[data-theme=dark] #connectionPage .meter-legend { font-size:11px; }
html[data-theme=dark] #connectionPage .source-statuses small { font-size:11px; }
html[data-theme=dark] #connectionPage .connection-details summary { font-size:11px; line-height:1.8; }
html[data-theme=dark] #connectionPage .recording-control-hint:empty { display:none; }

html[data-theme=dark] #homePage { padding-top:14px; }
html[data-theme=dark] #homePage .city-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:14px; }
html[data-theme=dark] #homePage .city-heading a { color:#aec4d1; font-size:12px; }
html[data-theme=dark] #homePage .neon-city { position:relative; isolation:isolate; min-height:760px; aspect-ratio:3/2; background:#05080c; border-bottom:1px solid #24323b; }
html[data-theme=dark] #homePage .neon-city::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#05080c 0,transparent 15%,#05080c33 85%,#05080c 100%),url('neon-alley-dim.png') center/cover; filter:saturate(.65) brightness(.72); pointer-events:none; }
html[data-theme=dark] #homePage .city-entrances { display:contents; }
html[data-theme=dark] #homePage .city-sign {
  --sign-color:#7fb9c3; --sign-glow:#659eab32;
  position:absolute; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center;
  padding:22px 14px; color:#bad7df; text-decoration:none; background:#071019f2; border:1px solid var(--sign-color); border-radius:5px;
  box-shadow:0 0 15px var(--sign-glow),inset 0 0 12px var(--sign-glow); outline:1px solid var(--sign-glow); outline-offset:5px;
  transition:background .15s,box-shadow .15s;
}
html[data-theme=dark] #homePage .city-sign::before { content:""; position:absolute; inset:5px; border:1px solid var(--sign-glow); border-radius:2px; pointer-events:none; }
html[data-theme=dark] #homePage .city-sign-title { font-size:clamp(24px,2.65vw,40px); font-weight:600; letter-spacing:.06em; line-height:1.5; text-shadow:0 0 8px var(--sign-glow); }
html[data-theme=dark] #homePage .city-sign-title>span:last-child { font-size:.8em; margin-left:8px; }
html[data-theme=dark] #homePage .city-sign small { font-size:12px; color:var(--theme-muted); }
html[data-theme=dark] #homePage .city-sign:hover { background:#102029; box-shadow:0 0 20px var(--sign-glow); }
html[data-theme=dark] #homePage .city-sign:active { box-shadow:none; color:#879ca9; background:#070b11; }
html[data-theme=dark] #homePage .city-practice { left:5%; top:29%; width:28%; transform:rotate(3deg); --power-delay:90ms; }
html[data-theme=dark] #homePage .city-record { right:4%; top:28%; width:25%; transform:rotate(-4deg); color:#dab4c3; --sign-color:#b58098; --sign-glow:#ad708832; --power-delay:200ms; }
html[data-theme=dark] #homePage .city-rec-dot { display:inline-block; width:.35em; height:.35em; margin:0 .15em .15em 0; border:1px solid #b58098; border-radius:50%; background:#a76c83; }
html[data-theme=dark] #homePage .city-records { left:8%; bottom:13%; width:22%; transform:rotate(-3deg); --power-delay:290ms; }
html[data-theme=dark] #homePage .city-tuner { right:5%; bottom:13%; width:23%; transform:rotate(3deg); --power-delay:380ms; }
html[data-theme=dark] #homePage :is(.city-records,.city-tuner) .city-sign-title { font-size:clamp(20px,2vw,28px); }
html[data-theme=dark] #homePage .city-billboard { position:absolute; top:16%; left:53%; transform:translateX(-50%); width:368px; padding:12px 15px 15px; border:1px solid #62577c; border-radius:2px; background:#0b0c16; box-shadow:0 0 14px #9585b11a; }
html[data-theme=dark] #homePage .billboard-label { font-size:11px; line-height:20px; margin-bottom:7px; color:#c5bed5; text-align:center; }
html[data-theme=dark] #homePage .billboard-slot { width:336px; height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:linear-gradient(145deg,#171a2a,#0c101c); color:#a9a4bd; }
html[data-theme=dark] #homePage .billboard-slot>span { font-size:16px; }
html[data-theme=dark] #homePage .billboard-slot small { font-size:11px; }
html[data-theme=dark] #homePage .city-notice { position:absolute; left:38%; top:65%; width:24%; padding:0; border:1px solid #766780; border-radius:3px; background:#0e0e18f5; color:#bfb3cb; box-shadow:0 0 9px #9585b11b; }
html[data-theme=dark] #homePage .city-notice summary { cursor:pointer; padding:13px 20px; font-size:15px; text-align:center; }
html[data-theme=dark] #homePage .city-notice p { padding:0 18px 16px; margin:0; line-height:1.8; color:var(--theme-muted); font-size:12px; }
html[data-theme=dark] #homePage .city-history { border:0; padding:18px 0; background:none; }
html[data-theme=dark] #homePage .city-history>summary { font-size:13px; color:var(--theme-muted); cursor:pointer; padding:4px 0; }
html[data-theme=dark] #homePage .home-history { margin-top:16px; }
html[data-theme=dark] #homePage .home-history .panel { background:#0a1017; }

html[data-theme=dark] #connectionPage .studio-tuner { --power-delay:0ms; }
html[data-theme=dark] #connectionPage .studio-metro { --power-delay:90ms; }
html[data-theme=dark] #connectionPage .studio-transport { --power-delay:180ms; }
html[data-theme=dark] #connectionPage .studio-console { --power-delay:270ms; }
html[data-theme=dark] #connectionPage .studio-history { --power-delay:360ms; }
html[data-theme=dark] #connectionPage.is-powering-on :is(.studio-tuner,.studio-metro,.studio-transport,.studio-console,.studio-history)::before { animation:sign-power-on 420ms var(--power-delay) both; }
html[data-theme=dark] #connectionPage.is-powering-on :is(.tuner-label,.studio-metro h2,.studio-transport h2,.mixer-title h2,.take-heading h2) { animation:sign-title-on 420ms var(--power-delay) both; }
html[data-theme=dark] #homePage.is-powering-on .neon-city::before { animation:street-power-on 700ms both; }
html[data-theme=dark] #homePage.is-powering-on .city-sign { animation:sign-title-on 420ms var(--power-delay) both; }
@keyframes sign-power-on { 0%,20% { opacity:.08; } 35% { opacity:.65; } 52% { opacity:.3; } 100% { opacity:1; } }
@keyframes sign-title-on { 0%,20% { border-color:#29313c; box-shadow:none; text-shadow:none; } 40% { box-shadow:0 0 12px var(--sign-glow); } 60% { box-shadow:none; } 100% { box-shadow:0 0 8px var(--sign-glow); } }
@keyframes street-power-on { from { opacity:0; } to { opacity:1; } }

@media(max-width:1200px) {
  html[data-theme=dark] #homePage .city-billboard { top:8%; left:51%; }
  html[data-theme=dark] #homePage :is(.city-practice,.city-record) { top:55%; width:34%; }
  html[data-theme=dark] #homePage .city-notice { top:77%; }
}
@media(max-width:1100px) {
  html[data-theme=dark] #connectionPage .studio-top { gap:30px; }
  html[data-theme=dark] #connectionPage .studio-bottom { grid-template-columns:1fr; gap:30px; }
}
@media(max-width:700px) {
  html[data-theme=dark] #homePage .neon-city { min-height:0; aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:24px 18px; padding:35px 12px 48px; }
  html[data-theme=dark] #homePage .neon-city::before { background-position:center; }
  html[data-theme=dark] #homePage .city-sign { position:relative; inset:auto; transform:none; width:auto; padding:20px 9px; }
  html[data-theme=dark] #homePage .city-sign-title { font-size:22px; }
  html[data-theme=dark] #homePage .city-sign small { font-size:10px; }
  html[data-theme=dark] #homePage :is(.city-practice,.city-record) { grid-column:1/-1; }
  html[data-theme=dark] #homePage .city-practice { grid-row:2; margin-right:20px; }
  html[data-theme=dark] #homePage .city-record { grid-row:3; margin-left:20px; }
  html[data-theme=dark] #homePage .city-billboard { position:relative; inset:auto; transform:none; grid-column:1/-1; grid-row:1; justify-self:center; margin-bottom:26px; }
  html[data-theme=dark] #homePage .city-notice { position:relative; inset:auto; width:auto; grid-column:1/-1; margin-top:10px; }
  html[data-theme=dark] #homePage :is(.city-records,.city-tuner) .city-sign-title { font-size:16px; letter-spacing:0; }
}
@media(max-width:600px) {
  html[data-theme=dark] #connectionPage :is(.studio-tuner,.studio-metro,.studio-transport,.studio-console,.studio-history) { padding:30px 14px 18px; }
  html[data-theme=dark] #connectionPage :is(.tuner-label,.studio-metro h2,.studio-transport h2,.mixer-title h2,.take-heading h2) { font-size:17px; left:14px; padding:5px 12px; }
  html[data-theme=dark] #connectionPage .mixer-title span { max-width:none; }
  html[data-theme=dark] #homePage .neon-city { padding-inline:0; }
  html[data-theme=dark] #homePage .city-billboard { width:332px; }
  html[data-theme=dark] #homePage .billboard-slot { width:300px; height:250px; }
}
@media(max-width:370px) {
  html[data-theme=dark] #homePage .city-billboard { width:302px; padding-inline:0; }
  html[data-theme=dark] #homePage .city-sign-title { font-size:20px; }
  html[data-theme=dark] #homePage .neon-city { gap:24px 12px; margin-inline:-13px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-theme=dark] :is(#homePage,#connectionPage) *,html[data-theme=dark] :is(#homePage,#connectionPage) *::before { animation:none!important; transition:none!important; }
}