:root { color-scheme: light; font: 13px Verdana,Arial,sans-serif; background:#fff; color:#111 }
* { box-sizing:border-box }
[hidden] { display:none !important }
html,body { margin:0; overflow:hidden }
main { padding:8px 0 0 }
header,nav { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
header { display:grid; grid-template-columns:1fr auto 1fr; min-height:26px }
header strong { grid-column:2; text-align:center }
header #status { grid-column:3; justify-self:end }
nav { margin:7px 0 }
button,.button { background:#f2f2f2; border:1px solid #999; border-radius:5px; color:inherit; padding:6px 10px; cursor:pointer; font:inherit }
button:disabled { opacity:.45; cursor:default }
#audio-start { background:#176c3a; border-color:#37b86c; font-weight:bold }
.button input { display:none }
label { display:flex; align-items:center; gap:6px }
.position { flex:1 1 340px }
.position input { flex:1; min-width:120px }
.position output { min-width:76px; text-align:right }
#viewport { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:7/5; overflow:hidden; background:#000 }
canvas { display:block; width:auto; height:auto; max-width:100%; max-height:100%; flex:none; touch-action:none; outline:none }
#text-entry { position:fixed; top:0; left:-100px; width:1px; height:1px; opacity:0 }
#service { padding:10px; background:#eef3fb; border:1px solid #849bc5; margin-top:8px }
#service p { margin:0 0 8px }
details { margin-top:7px }
summary { min-height:18px }
#metrics { float:right; color:#666; font-size:11px; font-weight:normal }
form { display:flex; gap:8px; margin:8px 0 }
#command { flex:1; background:#fff; color:inherit; border:1px solid #999; padding:7px }
pre { white-space:pre-wrap; max-height:200px; overflow:auto }
#status { color:#345b9d }
#audio-status { color:#555 }
@media (max-width:600px) {
  header { grid-template-columns:1fr }
  header strong,header #status { grid-column:1; justify-self:center }
  #metrics { float:none; display:block; margin:4px 0 0 14px }
}