html,body{margin:0;height:100%;overflow:hidden;background:#000;color:#fff;font-family:monospace;-webkit-tap-highlight-color:transparent;touch-action:none}
canvas{display:block;width:100vw;height:100vh;background:#000;touch-action:none}
#hud{position:fixed;left:0;right:0;top:0;pointer-events:none;font:11px monospace;letter-spacing:1.5px;text-transform:uppercase}
#top{display:flex;justify-content:space-between;padding:9px 11px;gap:10px}
#msg{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);white-space:pre;text-align:center;font:17px monospace;line-height:1.6;letter-spacing:3px;pointer-events:none}
#debug{position:fixed;left:9px;top:38px;font:10px monospace;line-height:1.35;color:#aaa;pointer-events:none;white-space:pre}
#legend{position:fixed;left:12px;right:12px;bottom:8px;text-align:center;font:10px monospace;color:#aaa;letter-spacing:1px;pointer-events:none}
#tuneBtn,#playBtn{position:fixed;top:38px;width:54px;height:34px;border:1px solid #fff;background:#000;color:#fff;font:11px monospace;z-index:20;touch-action:none}
#tuneBtn{right:10px}#playBtn{right:70px}
#drawer{position:fixed;right:0;top:0;bottom:0;width:min(330px,88vw);background:#000;border-left:1px solid #fff;z-index:30;transform:translateX(100%);transition:.18s transform ease;overflow:auto;padding:12px}
#drawer.open{transform:translateX(0)}
#drawer h2{font:16px monospace;letter-spacing:2px;margin:0 0 12px}
.group{border-top:1px solid #444;padding:10px 0}
.row{display:grid;grid-template-columns:1fr 72px;gap:8px;align-items:center;margin:8px 0}
label{font:11px monospace;color:#ddd;text-transform:uppercase;letter-spacing:1px}
input[type=range]{width:100%}
.val{text-align:right;font:11px monospace;color:#fff}
button.preset,button.small{background:#000;color:#fff;border:1px solid #fff;font:11px monospace;padding:7px;margin:3px 3px 3px 0}
.check{display:flex;align-items:center;gap:8px;margin:8px 0;font:11px monospace;text-transform:uppercase;letter-spacing:1px}
.note{font:10px monospace;color:#aaa;line-height:1.35;margin:8px 0 0;letter-spacing:.5px}
#drawerActions{position:sticky;bottom:0;background:#000;border-top:1px solid #444;padding:10px 0;margin-top:10px}
#drawerActions button{width:100%;margin:4px 0;padding:10px;border:1px solid #fff;background:#000;color:#fff;font:12px monospace;letter-spacing:1px}
#settingsOutput{width:100%;height:130px;margin-top:8px;background:#000;color:#fff;border:1px solid #777;font:10px monospace;padding:8px;box-sizing:border-box}
body.playmode #drawer,body.playmode #tuneBtn,body.playmode #playBtn,body.playmode #debug,body.playmode #legend{display:none}

.subhead{font:11px monospace;color:#fff;letter-spacing:1.5px;text-transform:uppercase;margin:14px 0 6px;border-top:1px solid #333;padding-top:10px}
#tuningNotes{width:100%;height:120px;background:#000;color:#fff;border:1px solid #777;font:11px monospace;padding:8px;box-sizing:border-box;margin:4px 0 8px}

.closeBtn{position:sticky;top:0;float:right;background:#000;color:#fff;border:1px solid #fff;font:11px monospace;padding:7px 10px;z-index:3}