#bq-live { position:relative; isolation:isolate; --bq-background-opacity:.32; }
  #bq-live { --bq-background-image:url("assets/art-1.webp"); }
  #bq-live::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background-image:var(--bq-background-image); background-size:cover; background-position:center; opacity:var(--bq-background-opacity); pointer-events:none; }
  #bq-live.bq-light { --bq-background-opacity:.18; }
  #bq-live::after { content:""; position:absolute; inset:3px; border:1.8px solid var(--bq-glow,transparent); border-radius:18px; box-shadow:inset 0 0 15.6px var(--bq-glow,transparent),0 0 10.8px var(--bq-glow,transparent); opacity:.85; pointer-events:none; z-index:10; transition:border-color .16s,box-shadow .16s; }
  #bq-live[data-tuning-state="flat"] { --bq-glow:#ffd34e; }
  #bq-live[data-tuning-state="sharp"] { --bq-glow:#ff5757; }
  #bq-live[data-tuning-state="tuned"] { --bq-glow:#51e58b; }
  @media(prefers-reduced-motion:reduce) { #bq-live::after { transition:none; } }
  #bq-live { --bq-bg:#121f22; --bq-fg:#f4eee1; --bq-gold:#d9ad62; --bq-teal:#7de0bf; --bq-surface:#243338; --bq-border:#496064; --bq-wood:#9d552e; background:var(--bq-bg); color:var(--bq-fg); border-radius:20px; padding:22px; font-family:system-ui,sans-serif; font-size:15px; line-height:1.45; }
  #bq-live.bq-light { --bq-bg:#f5eee2; --bq-fg:#252d2d; --bq-surface:#e9ddca; --bq-border:#a99780; --bq-teal:#187c65; }
  #bq-live [hidden] { display:none!important; }
  #bq-live .bq-header { display:flex; align-items:center; gap:16px; min-height:38px; padding-right:85px; font-size:18px; font-weight:600; }
  #bq-live button { display:inline-flex; gap:12px; align-items:center; justify-content:center; border:1px solid var(--bq-border); border-radius:22px; background:var(--bq-surface); color:var(--bq-fg); padding:10px 18px; font:inherit; min-height:44px; }
  #bq-live button[aria-pressed="true"] { background:var(--bq-teal); color:var(--bq-bg); border-color:var(--bq-teal); }
  #bq-live button:disabled { opacity:.5; }
  #bq-live button:hover { filter:brightness(1.1); }
  #bq-live input, #bq-live select { font:inherit; color:var(--bq-fg); background:var(--bq-surface); border:1px solid var(--bq-border); border-radius:8px; padding:7px; max-width:100%; }
  #bq-live input[type="checkbox"] { accent-color:var(--bq-teal); width:22px; height:22px; vertical-align:middle; }
  #bq-live input[type="range"] { width:100%; padding:0; accent-color:var(--bq-teal); }
  #bq-live h1 { color:var(--bq-gold); font-size:32px; line-height:1.2; font-weight:800; margin:16px 0 8px; }
  #bq-live .bq-brand { text-align:center; margin-top:26px; }
  #bq-live .bq-brand>svg { color:var(--bq-gold); width:36px; height:36px; }
  #bq-live .bq-brand h1 { color:var(--bq-fg); letter-spacing:3px; }
  #bq-live .bq-subtitle { color:var(--bq-gold); font-size:22px; }
  #bq-live .bq-brand p { margin:12px 0 0; }
  #bq-live .bq-home-actions { display:grid; gap:12px; max-width:280px; margin:0 auto 16px; }
  #bq-live .bq-home-actions button { width:100%; min-height:52px; }
  #bq-live .bq-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; }
  #bq-live #bq-tuner { padding-top:12px; }
  #bq-live .bq-selection-panel { max-width:540px; margin:4px auto 20px; padding:18px; background:color-mix(in srgb,var(--bq-bg) 92%,transparent); border:1px solid color-mix(in srgb,var(--bq-gold) 24%,transparent); border-radius:20px; box-shadow:0 8px 24px #0002; }
  #bq-live .bq-panel-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:13px; }
  #bq-live #bq-course-heading, #bq-live .bq-string-heading { font-size:11px; font-weight:600; letter-spacing:1.5px; opacity:.8; }
  #bq-live #bq-pair-type { color:var(--bq-gold); font-size:12px; }
  #bq-live #bq-courses { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
  #bq-live #bq-courses button { display:flex; flex-direction:column; gap:2px; padding:10px 2px; min-width:0; min-height:80px; border-radius:13px; border:1px solid color-mix(in srgb,var(--bq-border) 60%,transparent); background:var(--bq-surface); }
  #bq-live .bq-course-note { font-size:28px; line-height:1.1; font-weight:700; }
  #bq-live .bq-course-number { font-size:11px; opacity:.75; }
  #bq-live #bq-courses button[aria-pressed="true"] { background:linear-gradient(145deg,#efce8e,#c99b4f); color:#28241b; border-color:#f1d49f; box-shadow:0 3px 12px #d9ad6220; }
  #bq-live .bq-string-heading { margin:16px 0 9px; }
  #bq-live #bq-string { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #bq-live #bq-string button { display:flex; justify-content:flex-start; gap:12px; border-radius:12px; min-width:0; padding:9px 14px; border:1px solid var(--bq-border); background:transparent; }
  #bq-live #bq-string button[aria-pressed="true"] { color:var(--bq-fg); background:color-mix(in srgb,var(--bq-gold) 13%,var(--bq-bg)); border-color:var(--bq-gold); }
  #bq-live .bq-string-note { font-size:19px; font-weight:600; }
  #bq-live .bq-string-name { font-size:12px; opacity:.8; }
  #bq-live .bq-string-check { margin-left:auto; color:var(--bq-gold); }
  @media(max-width:440px) { #bq-live .bq-selection-panel { padding:12px; } #bq-live #bq-courses { gap:5px; } #bq-live #bq-courses button { min-height:70px; } #bq-live #bq-course-heading { letter-spacing:.5px; } #bq-live #bq-string button { gap:6px; padding:9px 8px; } }
  #bq-live #bq-note { font-size:48px; font-variant-numeric:tabular-nums; }
  #bq-live .bq-status-row { display:flex; flex-direction:column; gap:4px; text-align:center; }
  #bq-live #bq-status { text-transform:uppercase; font-weight:700; font-size:18px; }
  #bq-live #bq-measure { font-size:13px; font-variant-numeric:tabular-nums; opacity:.8; }
  #bq-live #bq-guidance { font-size:18px; }
  #bq-live #bq-tip { text-align:center; font-size:13px; opacity:.8; margin:16px 0; }
  #bq-live #bq-demo { border-top:1px solid var(--bq-border); padding-top:12px; margin-top:20px; }
  #bq-live #bq-demo label { display:flex; justify-content:space-between; font-size:13px; }
  #bq-live #bq-settings { max-width:540px; margin:20px auto; }
  #bq-live .bq-setting { display:flex; gap:20px; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--bq-border); }
  #bq-live #bq-cal { width:100px; }
  #bq-live #bq-reset { margin-top:18px; }
  #bq-live .bq-privacy { opacity:.8; margin-top:26px; }
  #bq-live #bq-error { color:#ffada5; margin-top:12px; }
  #bq-live canvas { display:block; width:100%; max-width:100%; }
  #bq-live #bq-instrument { height:180px; }
  #bq-live #bq-home-instrument { height:160px; }
  #bq-live #bq-meter { height:240px; }
  #bq-live #bq-guide { height:310px; }
  #bq-live .bq-readout { display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:center; margin-top:12px; }
  #bq-live #bq-note { margin:0; text-align:center; }
  #bq-live #bq-guide { max-width:220px; margin:auto; }
  #bq-live #bq-guidance { text-align:center; }
  @media(max-width:440px) { #bq-live .bq-readout { grid-template-columns:1fr; } #bq-live #bq-guide { height:270px; } }