* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1b1d21; color: #ddd; font: 13px/1.4 system-ui, sans-serif; }
#app { display: flex; height: 100vh; }
#view { flex: 1; position: relative; min-width: 0; }
#view canvas { display: block; width: 100%; height: 100%; }
#overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#overlay span { background: rgba(0,0,0,.6); padding: 10px 16px; border-radius: 6px; }
#overlay.hidden { display: none; }
#viewhint { position: absolute; left: 8px; bottom: 6px; color: rgba(255,255,255,.75); font-size: 11px; text-shadow: 0 0 3px #000; pointer-events: none; }
#panel { width: 460px; max-width: 50vw; overflow-y: auto; padding: 10px 12px; background: #23262b; border-left: 1px solid #333; }
h1 { font-size: 16px; margin: 0 0 2px; }
.sub { color: #999; font-size: 12px; margin-bottom: 8px; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.row label { width: 48px; color: #aaa; }
.row select { flex: 1; }
.row input[type=range] { flex: 1; }
#qval { width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
button, select { background: #353a42; color: #eee; border: 1px solid #4a5059; border-radius: 4px; padding: 4px 10px; font: inherit; cursor: pointer; }
button:hover { background: #414752; }
button.small { padding: 1px 6px; font-size: 11px; }
.buttons button { flex: 1; }
.status { color: #9ab; min-height: 18px; font-variant-numeric: tabular-nums; }
#errors div { margin: 4px 0; padding: 4px 8px; border-radius: 4px; white-space: pre-wrap; }
#errors .err { background: #5a2323; color: #fdd; }
#errors .warn { background: #4d4119; color: #fed; }
.edhead { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: #aaa; font-family: ui-monospace, monospace; }
.editor { border: 1px solid #444; margin-top: 3px; }
.editor .CodeMirror { height: 170px; font-size: 12px; }
.editor.tall .CodeMirror { height: 300px; }
.editor textarea.plain { width: 100%; height: 170px; background: #1e1e1e; color: #ddd; border: 0; font: 12px ui-monospace, monospace; }
.editor.tall textarea.plain { height: 300px; }
.cm-s-default.CodeMirror { background: #1e2024; color: #d4d4d4; }
.cm-s-default .CodeMirror-gutters { background: #1e2024; border-right: 1px solid #333; }
.cm-s-default .CodeMirror-cursor { border-left-color: #eee; }
.cm-s-default .cm-string { color: #ce9178; }
.cm-s-default .cm-number { color: #b5cea8; }
.cm-s-default .cm-property { color: #9cdcfe; }
.cm-s-default .cm-atom { color: #569cd6; }
.cm-s-default .CodeMirror-selected { background: #264f78 !important; }
.CodeMirror-matchingbracket { color: #fff !important; background: #3a3d41; }
.cm-errline { background: rgba(255, 60, 60, .25); }
#stats { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
#stats td { padding: 1px 4px; border-bottom: 1px solid #2f3339; }
#stats td:first-child { color: #999; width: 40%; }
#stats .bad { color: #f88; font-weight: bold; }
#help { margin: 10px 0 20px; }
#help summary { cursor: pointer; color: #9cf; }
#helptext code { background: #1a1c20; padding: 0 3px; border-radius: 3px; }
#helptext table { border-collapse: collapse; width: 100%; font-size: 12px; }
#helptext td { padding: 2px 4px; border-bottom: 1px solid #2f3339; vertical-align: top; }
#helptext td:first-child { font-family: ui-monospace, monospace; color: #9cdcfe; }
#helptext .sec td { color: #fc9; font-weight: bold; padding-top: 8px; font-family: inherit; }
@media (max-width: 800px) {
  #app { flex-direction: column; height: auto; }
  #view { height: 60vh; flex: none; }
  #panel { width: 100%; max-width: none; border-left: 0; }
}
a.small { font-size: 11px; color: #8ab4f8; margin-right: 4px; }
#stats .dim { color: #999; font-size: 11px; }
.tabs { display: flex; gap: 2px; margin-top: 10px; border-bottom: 1px solid #4a5059; }
.tab { border-radius: 4px 4px 0 0; border-bottom: 0; background: #2b2f35; color: #aaa; }
.tab.active { background: #414752; color: #fff; }
.tabpane { display: none; padding-top: 4px; }
.tabpane.active { display: block; }
.panehead { display: flex; justify-content: space-between; align-items: center; color: #aaa; font-size: 12px; margin: 4px 0; }
.controls details { border: 1px solid #343840; border-radius: 4px; margin: 4px 0; padding: 2px 6px; background: #262a30; }
.controls summary { cursor: pointer; color: #fc9; padding: 2px 0; }
.controls summary .full { color: #888; font-size: 11px; margin-left: 6px; }
.ctl { display: grid; grid-template-columns: 150px 1fr 74px; align-items: center; gap: 6px; margin: 2px 0; }
.ctl label { color: #ccc; font-family: ui-monospace, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.ctl label.changed { color: #9cf; }
.ctl input[type=range] { width: 100%; }
.ctl input[type=number] { width: 74px; background: #1e2024; color: #ddd; border: 1px solid #444; border-radius: 3px; padding: 1px 3px; font: 12px ui-monospace, monospace; }
.ctl select { padding: 1px 4px; }
.ctl input[type=color] { width: 60px; height: 20px; border: 0; padding: 0; background: none; }
.ctl .note { color: #777; font-size: 11px; }
.ctlnote { color: #f99; font-size: 12px; margin: 4px 0; }