:root{--bg-viewport:#1f1f1f;--bg-control-panel:#252525;--accent:#5e89ed;--slider-track:var(--accent);--slider-handle:#fff;--text:#e0e0e0;--muted:#888;--border:#3a3a3a;--error:#f56;--section-gap:6px;--control-gap:8px}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{color:var(--text);background:var(--bg-viewport);font:13px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{grid-template-columns:1fr 320px;display:grid}@media (max-width:900px){html{height:100%}body{background:var(--bg-control-panel);overscroll-behavior:none;width:100%;margin:0;position:fixed;inset:0}#app{grid-template-columns:none;width:100%;height:100%;display:block;position:relative}.viewport{background:var(--bg-control-panel);border-bottom:1px solid var(--border);box-sizing:border-box;height:50%;position:absolute;top:0;left:0;right:0;overflow:hidden}.viewport-img{object-fit:contain;object-position:center center;width:100%;max-width:none;height:100%;max-height:none}.control-panel{-webkit-overflow-scrolling:touch;box-sizing:border-box;border-top:none;border-left:none;height:50%;min-height:0;margin:0;padding:10px 10px 32px;position:absolute;top:50%;left:0;right:0;overflow:hidden auto}.panel-logo{max-height:80px}.panel-header{margin-bottom:6px;padding-bottom:6px;font-size:11px}}.viewport{background:var(--bg-viewport);position:relative;overflow:hidden}.viewport canvas{display:none}.viewport-img{object-fit:contain;width:100%;height:100%;image-rendering:pixelated;-webkit-touch-callout:default;-webkit-user-select:none;user-select:none;background:0 0;border:0;outline:0;display:block}.control-panel{background:var(--bg-control-panel);border-left:1px solid var(--border);padding:10px;overflow:hidden}.control-panel section{margin-bottom:var(--section-gap)}.control-panel h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 2px;font-size:10px}.panel-header{color:var(--text);border-bottom:1px solid var(--border);margin-bottom:4px;padding-bottom:4px;font-size:11px;font-weight:600}.panel-header a{color:var(--accent);text-decoration:none}.panel-header a:hover{text-decoration:underline}.panel-logo{object-fit:contain;width:100%;max-height:110px;image-rendering:pixelated;margin:0 auto 4px;display:block}button{width:100%;color:var(--text);border:1px solid var(--border);cursor:pointer;font:inherit;background:0 0;border-radius:4px;padding:4px 10px}button:hover{border-color:var(--accent)}select,input[type=number]{background:var(--bg-viewport);color:var(--text);border:1px solid var(--border);font:inherit;border-radius:3px;padding:3px 6px}.slider-row{align-items:center;gap:var(--control-gap);grid-template-columns:1fr 60px;margin-bottom:2px;display:grid}.slider-row label{color:var(--muted);margin-bottom:0;font-size:10px;line-height:1.2;display:block}.slider-row input[type=range]{-webkit-appearance:none;background:var(--border);border-radius:2px;width:100%;height:4px}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--slider-handle);border:2px solid var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px}.slider-row input[type=range]::-moz-range-thumb{background:var(--slider-handle);border:2px solid var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px}.toggle-row{align-items:center;gap:8px;margin-bottom:2px;font-size:11px;display:flex}.export-info{color:var(--muted);text-align:center;margin-top:2px;font-size:9px}[data-theme=default]{--bg-viewport:#1f1f1f;--bg-control-panel:#252525;--accent:#5e89ed;--text:#e0e0e0;--border:#3a3a3a}[data-theme=acid]{--bg-viewport:#b4ff00;--bg-control-panel:#1e1e1e;--accent:#1e1e1e;--slider-handle:#1e1e1e;--text:#1e1e1e;--border:#1e1e1e}[data-theme=acid] .control-panel{color:#e0e0e0}[data-theme=acid] .control-panel select,[data-theme=acid] .control-panel input[type=number]{color:#e0e0e0;background:#2a2a2a}[data-theme=light]{--bg-viewport:#fff;--bg-control-panel:#f4f4f4;--accent:#2a6df4;--slider-handle:#fff;--text:#1e1e1e;--border:#ccc;--muted:#666}[data-theme=light] .control-panel select,[data-theme=light] .control-panel input[type=number]{color:#1e1e1e;background:#fff}
