* { box-sizing:border-box; }
html,body { margin:0; background:#121f22; }
body { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#bq-live { min-height:100svh; border-radius:0; padding:16px; }
#bq-live .bq-header { padding-right:0; }
#bq-live button { cursor:pointer; touch-action:manipulation; }
#bq-live input,#bq-live select { font-size:16px; }
#bq-live .bq-mic-controls { margin-bottom:8px; }
#bq-live .bq-offline { margin-top:20px; padding-top:12px; border-top:1px solid var(--bq-border); font-size:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
#bq-live .bq-offline button { font-size:12px; padding:8px 12px; }
#bq-live details { max-width:640px; margin:16px auto; padding:12px 16px; background:var(--bq-surface); border-radius:12px; }
#bq-live summary { cursor:pointer; min-height:32px; }
#bq-live details p { font-size:14px; }
#bq-live #bq-guide { transition:filter .2s; }
#bq-live #bq-guide[data-extreme="true"] { filter:drop-shadow(0 0 7px #ffd34e88); }
@media(orientation:landscape) and (min-width:650px) {
  #bq-live { padding:8px 12px; }
  #bq-live[data-screen="tune"] #bq-tuner { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; align-items:start; }
  #bq-live .bq-mic-controls { grid-column:1/-1; }
  #bq-live .bq-readout { grid-column:2; grid-row:2; grid-template-columns:1.5fr 1fr; margin:0; gap:6px; }
  #bq-live #bq-instrument { height:90px; }
  #bq-live #bq-note { font-size:32px; }
  #bq-live #bq-meter { height:160px; }
  #bq-live #bq-guide { height:195px; }
  #bq-live #bq-guidance { font-size:14px; }
  #bq-live .bq-selection-panel { padding:10px; margin-bottom:6px; }
  #bq-live .bq-panel-heading { margin-bottom:6px; }
  #bq-live #bq-courses button { min-height:48px; padding:4px 2px; }
  #bq-live .bq-course-note { font-size:24px; }
  #bq-live .bq-string-heading { margin:8px 0 6px; }
  #bq-live #bq-tip { grid-column:1/-1; margin:4px 0; }
}
@keyframes bq-surprised { 0%,100% { transform:rotate(0); } 35% { transform:rotate(-3deg); } 70% { transform:rotate(3deg); } }
#bq-live #bq-guide[data-extreme="true"] { animation:bq-surprised .45s ease-out; }
@media(max-width:360px) {
  #bq-live { padding:10px; }
  #bq-live .bq-panel-heading { flex-wrap:wrap; gap:4px; }
}
@media(prefers-reduced-motion:reduce) { #bq-live #bq-guide { transition:none; animation:none; } }