:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-pill:999px;--font-sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bg:#fff;--bg-surface:#f5f5f5;--text:#1a1a1a;--border-weak:#0000001f;--border:#0003;--text-dim:#00000080;--bg-control:#0000000f;--bg-select:#fff;--text-select:#1a1a1a;--link:#005fcc}[data-theme=dark]{--bg:#1a1a1a;--bg-surface:#242424;--text:#e8e8e8;--border-weak:#ffffff1a;--border:#ffffff2e;--text-dim:#ffffff80;--bg-control:#ffffff14;--bg-select:#2d2d2d;--text-select:#e8e8e8;--link:#ffd54f}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);margin:0;transition:background .2s,color .2s}a,a:visited{color:var(--link)}header{padding:var(--space-3) var(--space-4);gap:var(--space-3);border-bottom:1px solid var(--border-weak);flex-wrap:wrap;align-items:center;display:flex}header .spacer{flex:1}.version{font-family:var(--font-mono);color:var(--text-dim);font-size:11px}main{gap:var(--space-4);padding:var(--space-4);grid-template-columns:360px 1fr;display:grid}@media (width<=900px){main{grid-template-columns:1fr}}.panel{border:1px solid var(--border-weak);border-radius:var(--radius-lg);padding:var(--space-3)}label{margin:var(--space-2) 0 var(--space-1);opacity:.85;display:block}select,button,input[type=number]{width:100%;padding:var(--space-2) 10px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-control);color:var(--text)}select,select option{background:var(--bg-select);color:var(--text-select)}button{cursor:pointer}.row{gap:10px;display:flex}.row>*{flex:1}#canvasWrap{border:1px solid var(--border-weak);border-radius:var(--radius-lg);padding:var(--space-2);place-items:center;display:grid}canvas{max-width:100%;height:auto;image-rendering:pixelated}pre{white-space:pre-wrap;word-break:break-word;opacity:.9;margin:0;font-size:12px}.hint{opacity:.75;font-size:12px;line-height:1.35}.badge{padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);border:1px solid var(--border);opacity:.9;font-size:12px;display:inline-block}.kbd{font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--radius-sm);border-bottom-width:2px;padding:1px 6px;font-size:12px}#dpad{z-index:9999;gap:var(--space-2);touch-action:none;-webkit-user-select:none;user-select:none;grid-template-rows:56px 56px 56px;grid-template-columns:56px 56px 56px;display:grid;position:fixed;bottom:14px;left:14px}#dpad .dpad-btn{border:1px solid var(--border);background:var(--bg-control);width:56px;height:56px;color:var(--text);border-radius:14px;font-size:20px;line-height:1}#themeToggle{width:auto;padding:var(--space-1) var(--space-3);cursor:pointer;flex-shrink:0;font-size:14px}#dpad .dpad-btn:active{transform:translateY(1px)}#dpad .dpad-btn[data-dir=U]{grid-area:1/2}#dpad .dpad-btn[data-dir=L]{grid-area:2/1}#dpad .dpad-btn[data-dir=D]{grid-area:3/2}#dpad .dpad-btn[data-dir=R]{grid-area:2/3}