:root{--bg: #0f1115;--panel: #171a21;--panel2: #1e222b;--line: #2a2f3a;--text: #e6e9ef;--muted: #8b93a3;--accent: #4f8cff;--accent2: #34d399;--danger: #ff5c72}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;flex-direction:column;height:100vh;overflow:hidden;-webkit-user-select:none;user-select:none}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}.brand-icon{width:28px;height:28px;border-radius:6px;flex-shrink:0}.actions{display:flex;gap:8px}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:var(--panel2);color:var(--text);border:1px solid var(--line);cursor:pointer;font-weight:600;transition:background .15s,border-color .15s,opacity .15s}.btn:hover{border-color:#3a4150}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{filter:brightness(1.08)}.btn.ghost{background:transparent}.btn.block{width:100%;justify-content:center}.btn.big{font-size:16px;padding:12px 22px}.btn.small{padding:5px 10px;font-size:12px;font-weight:600}.row{display:flex;gap:6px;margin-top:8px}.row.presets{flex-wrap:wrap}select.sel{flex:1;min-width:0;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;font-size:13px;cursor:pointer}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.on{background:var(--accent);border-color:var(--accent);color:#fff}#app{flex:1;display:flex;flex-direction:column;min-height:0}.tabs{display:flex;gap:4px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line)}.tab{padding:10px 18px;background:transparent;color:var(--muted);border:none;border-bottom:2px solid transparent;cursor:pointer;font:inherit;font-weight:600}.tab:hover{color:var(--text)}.tab.active{color:var(--text);border-bottom-color:var(--accent)}.layout{flex:1;display:grid;grid-template-columns:240px 1fr 260px;min-height:0}.testview{flex:1;display:flex;flex-direction:column;min-height:0}.test-controls{padding:14px 16px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}.test-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.test-row label{font-weight:600}.test-row input[type=range]{flex:1;min-width:160px;accent-color:var(--accent)}.presets{gap:6px}#testText{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;font-size:14px;resize:vertical}.test-preview{flex:1;overflow:auto;padding:28px 32px;font-family:EditedFont,serif;line-height:1.3;word-break:break-word;white-space:pre-wrap;user-select:text;-webkit-user-select:text}.imgview{flex:1;display:flex;flex-direction:column;min-height:0}.img-controls{padding:14px 16px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.img-controls .field{margin:0}.img-controls input[type=range]{flex:1;min-width:140px;accent-color:var(--accent)}.muted{color:var(--muted);font-size:12px}.img-main{flex:1;display:flex;min-height:0}.img-preview{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:20px;background:#0b0d12}.img-list{width:190px;flex-shrink:0;border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}.img-list-head{display:flex;flex-direction:column;gap:8px}#imgBoxList{display:flex;flex-direction:column;gap:2px}.boxrow{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:13px;-webkit-user-select:none;user-select:none}.boxrow:hover{background:var(--panel2)}.boxrow.sel{background:#34d39929}.boxrow input{accent-color:var(--accent2)}#imgCanvas{max-width:100%;margin:0 auto;image-rendering:pixelated;border:1px solid var(--line);border-radius:8px}.panel{background:var(--panel);border-right:1px solid var(--line);padding:16px;overflow-y:auto}.panel.right{border-right:none;border-left:1px solid var(--line)}.field{margin-bottom:18px}.field label{display:block;font-weight:600;margin-bottom:6px}.field small{display:block;color:var(--muted);margin-top:6px}.field input[type=text]{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:15px}.field input[type=range]{width:100%;accent-color:var(--accent)}.toggles{display:flex;flex-direction:column;gap:8px}.chk{display:flex;align-items:center;gap:8px;font-weight:500;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:30px;cursor:pointer;position:relative;overflow:hidden}.cell.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.cell.edited:after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent2)}.stage{position:relative;display:flex;align-items:center;justify-content:center;padding:20px;min-width:0}canvas{background:linear-gradient(#12141a,#12141a);border:1px solid var(--line);border-radius:12px;max-width:100%;max-height:100%;touch-action:none}.hint{position:absolute;bottom:26px;color:var(--muted);font-size:12px}.meta{color:var(--muted);font-size:12px;white-space:pre-line}.export-info{margin-bottom:18px;border:1px solid var(--line);border-radius:8px;padding:10px 12px}.export-info summary{font-weight:600;cursor:pointer}.export-info label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}.export-info input,.export-info textarea{width:100%;padding:6px 8px;border-radius:6px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;font-size:13px;resize:vertical}.empty{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}.empty-actions{display:flex;gap:10px;justify-content:center;margin-bottom:14px}.empty h1{margin:0 0 8px;font-size:28px}.empty p{color:var(--muted);max-width:440px;margin:0 auto 22px}.empty code{background:var(--panel2);padding:2px 6px;border-radius:5px}@media (max-width: 820px){.layout{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.panel{border:none;border-bottom:1px solid var(--line);max-height:30vh}.panel.right{border-top:1px solid var(--line)}}