:root{--bg: #000;--border: #333;--border-hi: #555;--text: #d4d4d4;--text-dim: #6e6e6e;--warn: #ffd400;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:10px/1.4 ui-monospace,SF Mono,Menlo,Consolas,monospace;overflow:hidden}#app{display:flex;width:100%;height:100%}#viewport{position:relative;flex:1;min-width:0;overflow:hidden}#gpu-canvas,#overlay-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#overlay-canvas{touch-action:none}#banner{position:absolute;top:12px;left:50%;transform:translate(-50%);max-width:80%;background:#000;border:1px solid #f00;color:#f66;padding:8px 12px;z-index:10;white-space:pre-wrap}#sidebar{width:264px;flex:none;background:var(--bg);border-left:1px solid var(--border);overflow-y:auto;user-select:none}.section{border-bottom:1px solid var(--border)}.section>.section-title{padding:6px 8px 3px;font-size:9px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}.section>.section-body{padding:0 8px 8px}.row{display:flex;align-items:center;gap:4px;margin:2px 0;min-height:18px}.row>label{flex:0 0 82px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row>.controls{flex:1;display:flex;gap:4px;align-items:center;min-width:0}input[type=number],input[type=text],select{width:100%;min-width:0;background:#000;border:1px solid var(--border);color:var(--text);border-radius:0;padding:1px 4px;font:inherit;outline:none}input[type=number]:focus,select:focus{border-color:#fff}input[type=number]{appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}select{text-transform:none}input[type=color]{width:100%;height:16px;padding:0;background:#000;border:1px solid var(--border);border-radius:0}input[type=checkbox]{accent-color:#fff;width:11px;height:11px}button{background:#000;border:1px solid var(--border-hi);color:var(--text);border-radius:0;padding:2px 8px;font:inherit;font-size:9px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}button:hover:not(:disabled){background:#fff;color:#000;border-color:#fff}button:disabled{opacity:.3;cursor:default}button.primary{background:#fff;color:#000;border-color:#fff}button.primary:hover:not(:disabled){background:#000;color:#fff}.swatches{display:flex;flex-wrap:wrap;gap:3px}button.swatch{width:15px;height:15px;padding:0;border:1px solid var(--border-hi)}button.swatch:hover:not(:disabled){border-color:#fff}.readout{display:flex;justify-content:space-between;margin:1px 0}.readout .k{color:var(--text-dim)}.readout .v{font-variant-numeric:tabular-nums}.readout .v.warn{color:var(--warn)}.hint,.count-label{color:var(--text-dim);margin:3px 0}.transport{display:flex;gap:4px}.transport button{flex:1;padding:4px 0}