: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;--btn-active-fg:#fff;--btn-active-ring:#edf17159;--danger:#c46c71;--input-bg:#0e121a;--topbar-start:#1e2433;--topbar-end:#161a24;--section-fill:#0000002e;--sel-section-border:#706deb59;--keycap-active-border:#edf17173;--shadow:0 8px 24px #00000073;--shadow-lg:0 16px 48px #0000008c;--stage-0:#1a2240;--stage-1:#0d1018;--bezel-bg:#1a1420;--bezel-border:#3a3348;--bezel-glow:0 12px 40px #0000008c, inset 0 1px 0 #ffffff0f;--pen-preview-bg:#0d1018;--tooltip-bg:#0a0c12;--statusbar-bg:#0e1118;--dialog-backdrop:#06080ea6;--capture-bg:#161a24;--tabs-bg:#12161f;--chip-edge:#ffffff40;--font:ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;--radius:6px}html[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#e4dfd4;--panel:#f4f0e8;--panel-border:#c4bba8;--text:#1c1e28;--muted:#5a6170;--accent:#2e2c9b;--accent-2:#553800;--btn:#eae4d8;--btn-hover:#ddd6c8;--btn-active:#2e2c9b;--btn-active-fg:#fff;--btn-active-ring:#edf1718c;--danger:#813338;--input-bg:#fffef8;--topbar-start:#efeae0;--topbar-end:#e4dfd4;--section-fill:#2e2c9b0f;--sel-section-border:#2e2c9b66;--keycap-active-border:#edf171b3;--shadow:0 8px 24px #2820101f;--shadow-lg:0 16px 40px #2820102e;--stage-0:#cfd6e4;--stage-1:#b8c0d0;--bezel-bg:#2a2438;--bezel-border:#4a4458;--bezel-glow:0 10px 28px #28201038, inset 0 1px 0 #ffffff14;--pen-preview-bg:#0d1018;--tooltip-bg:#fffef8;--statusbar-bg:#dcd6ca;--dialog-backdrop:#28241c66;--capture-bg:#ebe6dc;--tabs-bg:#e4dfd4;--chip-edge:#00000047}*{box-sizing:border-box}html,body{overscroll-behavior:none;background:var(--bg);height:100%;color:var(--text);font-family:var(--font);margin:0;font-size:13px;overflow:hidden}#app{flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.topbar{padding:calc(.55rem + env(safe-area-inset-top,0px)) calc(.9rem + env(safe-area-inset-right,0px)) .55rem calc(.9rem + env(safe-area-inset-left,0px));background:linear-gradient(180deg, var(--topbar-start) 0%, var(--topbar-end) 100%);border-bottom:1px solid var(--panel-border);flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;display:flex}.brand{align-items:center;gap:.6rem;min-width:0;display:flex}.brand .logo{width:28px;height:28px;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:3px;flex-shrink:0;display:block}.brand h1{letter-spacing:.02em;margin:0;font-size:1rem;font-weight:600}.subtitle{color:var(--muted);white-space:nowrap;font-size:.75rem}.label-narrow{display:none}.file-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.45rem;display:flex}.topbar-group{align-items:center;gap:.3rem;display:flex}.topbar-sep{background:var(--panel-border);align-self:stretch;width:1px;min-height:1.4rem;margin:0 .15rem}#btn-help{min-width:2rem;color:var(--accent-2);font-weight:600}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-2);color:var(--btn-active-fg);box-shadow:inset 0 0 0 1px var(--btn-active-ring)}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;gap:.35rem;display:flex}.project-name-label{color:var(--muted);flex-shrink:0;font-size:.75rem}.project-name input{font:inherit;color:var(--text);background:var(--input-bg);border:1px solid var(--panel-border);border-radius:var(--radius);width:11.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;min-width:10rem;box-shadow:var(--shadow);flex-direction:column;gap:2px;padding:.25rem;display:none;position:absolute;top:calc(100% + 4px);right:0}.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)}.dropdown-menu .export-option{border-bottom:1px solid var(--panel-border);color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;margin-bottom:.15rem;padding:.35rem .5rem;font-size:.75rem;display:flex}.dropdown-menu .export-option input{accent-color:var(--accent);margin:0}.workspace{min-height:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);flex:1;grid-template-columns:200px minmax(0,1fr) 280px;gap:0;display:grid;overflow:hidden}@media (width>=1200px){.workspace{grid-template-columns:220px minmax(0,1fr) 300px}}.panel{background:var(--panel);border-right:1px solid var(--panel-border);min-height:0;padding:.65rem .75rem;overflow:auto}.right-panel{border-right:none;border-left:1px solid var(--panel-border)}.panel section{background:var(--section-fill);border-radius:var(--radius);border:1px solid #0000;margin-bottom:.85rem;padding:.5rem .55rem}.panel section:last-child{margin-bottom:0}.selection-section:not([hidden]){border-color:var(--sel-section-border);box-shadow:inset 2px 0 0 var(--accent)}.panel h2{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .4rem;font-size:.72rem;font-weight:600}.tool-grid{grid-template-columns:1fr 1fr;gap:.35rem;display:grid}.tool-grid button{width:100%;min-height:2rem;position:relative}.tool-grid button[data-key]{text-align:left;padding:.35rem 1.35rem .35rem .45rem}.tool-grid button[data-key]:after{content:attr(data-key);color:var(--muted);border:1px solid var(--panel-border);pointer-events:none;border-radius:3px;padding:.08rem .22rem;font-size:.62rem;line-height:1;position:absolute;top:50%;right:.28rem;transform:translateY(-50%)}.tool-grid button.active[data-key]:after{color:var(--accent-2);border-color:var(--keycap-active-border)}.paint-modes{grid-template-columns:1fr 1fr 1fr}.paint-modes button{padding:.35rem .25rem;font-size:.72rem}.shape-fill{color:var(--muted);margin-top:.45rem;font-size:.72rem}.radio-row{flex-direction:column;gap:.35rem;display:flex}.chargen-row{gap:.35rem;margin-top:.45rem;display:flex}.chargen-row button{flex:1;padding:.3rem .35rem;font-size:.72rem}.chargen-status{color:var(--muted);margin:.35rem 0 0;font-size:.68rem}.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}.theme-row{grid-template-columns:1fr 1fr;gap:.35rem;display:grid}.theme-row button{padding:.3rem .35rem;font-size:.72rem}#zoom-label{text-align:center;min-width:2rem;color:var(--accent-2)}.canvas-wrap{background:radial-gradient(ellipse at center, var(--stage-0) 0%, var(--stage-1) 70%), repeating-linear-gradient(0deg, transparent, transparent 2px, #00000014 2px, #00000014 4px);justify-content:center;align-items:center;min-height:0;padding:1.25rem;display:flex;overflow:auto}.canvas-bezel{background:var(--bezel-bg);border:2px solid var(--bezel-border);box-shadow:var(--bezel-glow);border-radius:6px;padding:10px;line-height:0}#screen-canvas{image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;touch-action:none;border-radius:1px;display:block}#screen-canvas:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.char-section{z-index:2;background:var(--panel);flex-direction:column;gap:.45rem;margin-top:0;display:flex;position:sticky;top:0}.pen-current{align-items:center;gap:.55rem;display:flex}#pen-preview{image-rendering:pixelated;image-rendering:crisp-edges;border:2px solid var(--accent-2);box-sizing:content-box;background:var(--pen-preview-bg);border-radius:3px;flex-shrink:0}.pen-current-meta h2{margin:0 0 .15rem}.pen-current-meta #pen-code-label{color:var(--accent-2);letter-spacing:.02em;font-size:.85rem;font-weight:600}.char-filter{gap:3px;display:flex}.char-filter button{flex:1;padding:.28rem .35rem;font-size:.72rem}.recent-row{align-items:center;gap:.4rem;min-height:1.5rem;display:flex}.recent-label{color:var(--muted);flex-shrink:0;font-size:.7rem}#recent-chars{image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;border:1px solid var(--panel-border);touch-action:none;box-sizing:content-box;border-radius:3px;min-width:0;max-width:100%;height:auto!important}.char-picker-wrap{align-self:flex-start;max-width:100%;position:relative}#char-picker{image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;border:1px solid var(--panel-border);border-radius:var(--radius);touch-action:none;max-width:100%;display:block}#char-picker:focus{outline:1px solid var(--accent);outline-offset:1px}.char-tooltip{z-index:5;pointer-events:none;background:var(--tooltip-bg);border:1px solid var(--accent-2);color:var(--accent-2);white-space:nowrap;box-shadow:var(--shadow);border-radius:3px;padding:.2rem .45rem;font-size:.72rem;position:absolute;transform:translate(-50%,calc(-100% - 6px))}.char-hint{color:var(--muted);margin:0;font-size:.68rem;line-height:1.3}.color-section h2{justify-content:space-between;align-items:baseline;gap:.4rem;display:flex}.color-heading{text-transform:none;letter-spacing:0;color:var(--text);align-items:center;gap:.35rem;font-size:.72rem;font-weight:500;display:inline-flex}.color-chip{border:1px solid var(--chip-edge);border-radius:2px;flex-shrink:0;width:.7rem;height:.7rem;box-shadow:0 0 0 1px #000}.color-targets{gap:3px;margin-bottom:.45rem;display:flex}.color-targets button{flex:1;padding:.28rem .35rem;font-size:.72rem}.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{padding:.35rem calc(.9rem + env(safe-area-inset-right,0px)) calc(.35rem + env(safe-area-inset-bottom,0px)) calc(.9rem + env(safe-area-inset-left,0px));background:var(--statusbar-bg);border-top:1px solid var(--panel-border);color:var(--muted);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.25rem .65rem;min-height:1.75rem;font-size:.75rem;display:flex}.status-primary,.status-meta{align-items:center;gap:.65rem;min-width:0;display:flex}.status-primary{flex:auto;overflow:hidden}.status-meta{flex:none;margin-left:auto}.status-slot{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.status-slot+.status-slot{border-left:1px solid var(--panel-border);padding-left:.65rem}.status-slot-end{color:var(--accent-2);flex-shrink:0;border-left:none!important;padding-left:0!important}.statusbar .copyright{color:var(--muted);white-space:nowrap;flex-shrink:0;font-size:.68rem;text-decoration:none}.statusbar .copyright:hover{color:var(--accent-2);text-decoration:underline}.status-slot-end.is-dirty{color:var(--danger)}.statusbar strong{color:var(--text);font-weight:600}.help-dialog{border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--panel);color:var(--text);max-width:min(28rem,100vw - 2rem);box-shadow:var(--shadow-lg);padding:0}.help-dialog::backdrop{background:var(--dialog-backdrop)}.help-dialog-head{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem .85rem;display:flex}.help-dialog-head h2{margin:0;font-size:.9rem;font-weight:600}.help-dialog-body{max-height:min(70vh,28rem);padding:.75rem .85rem 1rem;overflow:auto}.help-table{border-collapse:collapse;width:100%;font-size:.78rem}.help-table th{text-align:left;color:var(--accent-2);white-space:nowrap;vertical-align:top;width:1%;padding:.28rem .5rem .28rem 0;font-weight:600}.help-table td{color:var(--muted);vertical-align:top;padding:.28rem .75rem .28rem 0}.text-capture-bar{padding:.4rem calc(.65rem + env(safe-area-inset-right,0px)) .4rem calc(.65rem + env(safe-area-inset-left,0px));background:var(--capture-bg);border-top:1px solid var(--panel-border);flex-direction:column;flex-shrink:0;gap:.25rem;display:flex}.text-capture-bar[hidden]{display:none!important}.text-capture-hint{color:var(--muted);font-size:.72rem}.text-capture-bar textarea{resize:none;width:100%;font-size:16px;font-family:var(--font);background:var(--btn);color:var(--text);border:1px solid var(--panel-border);border-radius:var(--radius);min-height:2.5rem;padding:.45rem .55rem;line-height:1.3;display:block}.text-capture-bar textarea:disabled{opacity:.55}@media (width>=900px) and (pointer:fine){.text-capture-bar:not([hidden]){clip:rect(0 0 0 0);clip-path:inset(50%);border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}}.mobile-tabs{border-top:1px solid var(--panel-border);background:var(--tabs-bg);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);flex-shrink:0;display:none}.mobile-tabs button{background:0 0;border:none;border-radius:0;flex:1;min-height:2.5rem;padding:.55rem .4rem}.mobile-tabs button.active{background:var(--btn-active);box-shadow:inset 0 2px 0 var(--accent-2)}@media (width<=899px){.subtitle{display:none}.mobile-tabs{display:flex}.workspace{grid-template-rows:minmax(180px,1fr) minmax(160px,42vh);grid-template-columns:1fr;overflow:hidden}.canvas-wrap{order:-1;min-height:0}.panel{border-bottom:none;border-right:none;border-top:1px solid var(--panel-border);max-height:none}.right-panel{border-left:none}.left-panel{display:block}#app[data-mobile-tab=tools] .right-panel,#app[data-mobile-tab=chars] .left-panel,#app[data-mobile-tab=colors] .left-panel,#app[data-mobile-tab=chars] .color-section,#app[data-mobile-tab=colors] .char-section{display:none}#app[data-mobile-tab=chars] .char-section,#app[data-mobile-tab=colors] .color-section{position:static}.char-hint{display:none}.status-meta{flex:100%;justify-content:flex-end;margin-left:0}#app[data-keyboard=open] .topbar,#app[data-keyboard=open] .mobile-tabs,#app[data-keyboard=open] .left-panel,#app[data-keyboard=open] .right-panel,#app[data-keyboard=open] .statusbar,#app[data-keyboard=open] .text-capture-hint{display:none}#app[data-keyboard=open] .workspace{grid-template-rows:minmax(0,1fr)}#app[data-keyboard=open] .text-capture-bar:not([hidden]){padding:.35rem calc(.55rem + env(safe-area-inset-right,0px)) .35rem calc(.55rem + env(safe-area-inset-left,0px))}}@media (width<=640px){.topbar{padding:calc(.4rem + env(safe-area-inset-top,0px)) calc(.55rem + env(safe-area-inset-right,0px)) .4rem calc(.55rem + env(safe-area-inset-left,0px));flex-wrap:wrap;gap:.45rem}.brand h1{font-size:.9rem}.project-name input{width:6.5rem}.label-wide{display:none}.label-narrow{display:inline}.status-slot{font-size:.7rem}.statusbar .copyright{font-size:.65rem}}@media (pointer:coarse){button{min-height:2.5rem;padding:.45rem .7rem}.tool-grid button{min-height:2.6rem}.swatch{min-height:32px}.mobile-tabs button{min-height:2.75rem}}