:root{color-scheme:light;--bg: #ffffff;--ink: #111111;--muted: #6b6b6b;--line: #e6e6e6;--grid: #ececec;--soft: #f7f7f7;--select: #3b9eff;--danger: #9b1c1c;--danger-bg: #fff5f5;--danger-line: #fecaca;--font: "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font)}#app,.app{max-width:1120px;margin:0 auto;padding:28px 32px 48px}.header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}h1{margin:0;font-size:1.75rem;font-weight:650;letter-spacing:-.03em}.subtitle{margin:4px 0 0;color:var(--muted);font-size:.95rem}h2{margin:0 0 12px;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.edit-actions,.clipboard-actions,.file-actions{display:flex;flex-wrap:wrap;gap:8px}.button{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;font-size:.95rem;cursor:pointer}.button:hover{background:var(--soft)}.button:disabled{opacity:.4;cursor:default}.button:disabled:hover{background:var(--bg)}.button[aria-pressed=true],.button-primary{border-color:var(--ink);background:var(--ink);color:var(--bg)}.button-primary:hover{background:#2a2a2a}.status{margin:16px 0 0;color:var(--muted);font-size:.9rem}.banner{margin:12px 0 0;padding:10px 12px;border:1px solid var(--danger-line);border-radius:6px;background:var(--danger-bg);color:var(--danger);font-size:.9rem}.workspace{display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);gap:48px;align-items:start;margin-top:28px}.editor-pane,.set-pane{min-width:0}.pixel-editor{position:relative;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:1px;width:min(100%,400px);aspect-ratio:1;background:var(--grid);border:1px solid #d4d4d4;-webkit-user-select:none;user-select:none;touch-action:none}.pixel{padding:0;border:0;background:#fff;cursor:crosshair;appearance:none}.pixel.on{background:var(--ink)}.pixel-editor.select-tool .pixel{cursor:cell}.pixel-editor.has-paste .pixel{cursor:default}.pixel-editor.has-selection .in-selection,.pixel-editor.has-paste .paste-cell{cursor:move}.marquee{position:absolute;pointer-events:none;z-index:1;box-sizing:border-box;border:2px solid var(--select);box-shadow:0 0 0 1px #fff;background:transparent;left:calc(var(--mx, 0) * ((100% - 7px) / 8 + 1px));top:calc(var(--my, 0) * ((100% - 7px) / 8 + 1px));width:calc(var(--mw, 1) * ((100% - 7px) / 8) + (var(--mw, 1) - 1) * 1px);height:calc(var(--mh, 1) * ((100% - 7px) / 8) + (var(--mh, 1) - 1) * 1px)}.pixel-editor.has-paste .marquee{border-style:dashed}.pixel.paste-off{background:repeating-linear-gradient(45deg,#fff,#fff 4px,#efefef 4px 8px)}.pixel.paste-on{background:var(--ink);box-shadow:inset 0 0 0 2px #fff}.editor-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;width:min(100%,400px);margin-top:16px}.char-label{margin:0;font-size:.95rem;font-variant-numeric:tabular-nums}.char-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.ink-picker{display:flex;gap:10px}.ink{width:36px;height:36px;padding:0;border:1px solid #cfcfcf;border-radius:4px;cursor:pointer}.ink[data-ink=black]{background:var(--ink)}.ink[data-ink=white]{background:#fff}.ink[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}.charset-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;max-height:min(72vh,720px);overflow:auto;padding:2px}.char-cell{aspect-ratio:1;padding:3px;border:1px solid var(--line);background:#fff;cursor:pointer}.char-cell:hover{border-color:#bdbdbd}.char-cell[aria-current=true]{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}.char-cell svg{display:block;width:100%;height:100%}@media(max-width:800px){#app,.app{padding:20px 16px 32px}.header{flex-direction:column}.workspace{grid-template-columns:1fr;gap:32px}.pixel-editor,.editor-meta{width:100%}}