:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#12141a;--panel:#1a1e28;--panel-border:#2a3142;--text:#d8dce8;--muted:#8b93a7;--accent:#706deb;--accent-2:#edf171;--btn:#252b3a;--btn-hover:#323a4f;--btn-active:#3d4a6b;--danger:#c46c71;--font:"IBM Plex Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;--radius:6px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);margin:0;font-size:13px}#app{flex-direction:column;min-height:100%;display:flex}.topbar{border-bottom:1px solid var(--panel-border);background:linear-gradient(#1e2433 0%,#161a24 100%);justify-content:space-between;align-items:center;gap:1rem;padding:.55rem .9rem;display:flex}.brand{align-items:baseline;gap:.6rem;min-width:0;display:flex}.brand .logo{color:var(--accent);font-size:1.1rem}.brand h1{letter-spacing:.02em;margin:0;font-size:1rem;font-weight:600}.subtitle{color:var(--muted);white-space:nowrap;font-size:.75rem}.file-actions{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}button{font:inherit;color:var(--text);background:var(--btn);border:1px solid var(--panel-border);border-radius:var(--radius);cursor:pointer;padding:.35rem .65rem}button:hover{background:var(--btn-hover)}button:active,button.active{background:var(--btn-active);border-color:var(--accent);color:#fff}button:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px}button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.project-name{align-items:center;display:flex}.project-name input{font:inherit;color:var(--text);border:1px solid var(--panel-border);border-radius:var(--radius);background:#0e121a;width:9.5rem;min-width:0;padding:.35rem .55rem}.project-name input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.dropdown-menu .menu-sep{background:var(--panel-border);border:none;height:1px;margin:.25rem 0}.dropdown{position:relative}.dropdown-menu{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);z-index:20;flex-direction:column;gap:2px;min-width:10rem;padding:.25rem;display:none;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 8px 24px #00000073}.dropdown-menu:not([hidden]){display:flex}.dropdown-menu button{text-align:left;background:0 0;border:none;width:100%}.dropdown-menu button:hover{background:var(--btn-hover)}.workspace{flex:1;grid-template-columns:200px minmax(0,1fr) 280px;gap:0;min-height:0;display:grid}.panel{background:var(--panel);border-right:1px solid var(--panel-border);padding:.75rem;overflow:auto}.right-panel{border-right:none;border-left:1px solid var(--panel-border)}.panel section{margin-bottom:1.1rem}.panel h2{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .45rem;font-size:.72rem;font-weight:600}.tool-grid{grid-template-columns:1fr 1fr;gap:.35rem;display:grid}.tool-grid button{width:100%}.paint-modes{grid-template-columns:1fr 1fr 1fr}.paint-modes button{padding:.35rem .25rem;font-size:.72rem}#tool-buttons{grid-template-columns:1fr 1fr}.shape-fill{color:var(--muted);font-size:.72rem}.radio-row{flex-direction:column;gap:.35rem;display:flex}.radio-row label,.checkbox{color:var(--text);cursor:pointer;align-items:center;gap:.4rem;display:flex}.view-controls{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}#zoom-label{text-align:center;min-width:2rem;color:var(--accent-2)}.help p{color:var(--muted);margin:.2rem 0;font-size:.72rem;line-height:1.35}.canvas-wrap{background:radial-gradient(#1a2240 0%,#0d1018 70%),repeating-linear-gradient(0deg,#0000,#0000 2px,#00000014 2px 4px);justify-content:center;align-items:center;padding:1.25rem;display:flex;overflow:auto}#screen-canvas{image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;touch-action:none;border-radius:2px;box-shadow:0 12px 40px #0000008c}#char-picker{image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;border:1px solid var(--panel-border);border-radius:var(--radius);touch-action:none;width:100%;max-width:100%}.swatches{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:3px;width:100%;min-height:22px;padding:0}.swatch:hover{transform:scale(1.06)}.swatch.active{border-color:var(--accent-2);box-shadow:0 0 0 1px #000}.statusbar{border-top:1px solid var(--panel-border);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;background:#0e1118;padding:.4rem .9rem;font-size:.78rem;overflow:hidden}.statusbar strong{color:var(--text);font-weight:600}@media (width<=960px){.workspace{grid-template-rows:auto auto auto;grid-template-columns:1fr}.panel{border-right:none;border-bottom:1px solid var(--panel-border)}.right-panel{border-left:none}.left-panel{grid-template-columns:1fr 1fr;gap:.5rem 1rem;display:grid}}