:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#16181d;--panel:#1f232b;--panel-2:#262b35;--border:#343b48;--text:#e6e9ef;--muted:#9aa3b2;--accent:#5db1ff;--danger:#ff6b6b;--warn:#ffc857}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Segoe UI,system-ui,sans-serif;font-size:14px}.app{flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:10px 16px;display:flex}.app-header h1{white-space:nowrap;margin:0;font-size:16px}.header-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);cursor:pointer;font:inherit;border-radius:6px;padding:6px 12px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#10141a;font-weight:600}.platform-toggle{border:1px solid var(--border);border-radius:6px;display:flex;overflow:hidden}.platform-toggle button{border:none;border-radius:0}.platform-toggle button.active{background:var(--accent);color:#10141a;font-weight:600}.banner{border-bottom:1px solid var(--border);padding:8px 16px;font-size:13px}.banner.error{color:var(--danger);cursor:pointer;background:#3a2026}.banner.warning{color:var(--warn);background:#383117}.banner.issues{background:var(--panel);flex-wrap:wrap;gap:16px;display:flex}.banner.issues .error{color:var(--danger)}.banner.issues .warning{color:var(--warn)}.app-body{flex:1;grid-template-columns:300px 1fr 320px;align-items:start;gap:0;display:grid}@media (width<=1100px){.app-body{grid-template-columns:280px 1fr}.preview-panel{border-left:none;border-top:1px solid var(--border);grid-column:1/-1}.preview-states{flex-wrap:wrap;align-items:flex-start;gap:24px;display:flex}}@media (width<=760px){.app-body{flex-direction:column;display:flex}.main{order:1;width:100%}.preview-panel{border-top:1px solid var(--border);border-left:none;order:2;width:100%}.sidebar{border-right:none;border-top:1px solid var(--border);order:3;width:100%}.state-controls{flex:100%}.app-header h1{font-size:14px}}@media (pointer:coarse){button{min-height:44px;padding:10px 14px}.link-button{min-height:0;padding:10px 0}.field input[type=text],.field input[type=number],.field select{padding:10px;font-size:16px}input[type=file]{padding:8px 0}}.sidebar{border-right:1px solid var(--border);flex-direction:column;gap:12px;padding:12px;display:flex}.panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px}.panel h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;font-size:13px}.panel h3{color:var(--muted);margin:12px 0 6px;font-size:13px}.field{flex-direction:column;gap:4px;margin-bottom:10px;display:flex}.field-label{color:var(--muted);font-size:12px}.field-hint{color:var(--muted);font-size:11px}.field input[type=text],.field input[type=number]{background:var(--panel-2);color:var(--text);border:1px solid var(--border);font:inherit;border-radius:5px;width:100%;padding:6px 8px}.field select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);font:inherit;border-radius:5px;flex:1;padding:6px 8px}.font-swatch{border:1px solid var(--border);border-radius:4px;flex:none;width:22px;height:22px;display:inline-block}.field input:focus{border-color:var(--accent);outline:none}.grid-2{grid-template-columns:1fr 1fr;gap:0 10px;display:grid}.icon-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.icon-preview{image-rendering:pixelated;border:1px solid var(--border);border-radius:4px}.link-button{color:var(--accent);background:0 0;border:none;padding:0;text-decoration:underline}.main{min-width:0;padding:12px 16px}.tabs{gap:4px;margin-bottom:12px;display:flex}.tabs button{border-bottom:2px solid #0000;border-radius:6px 6px 0 0}.tabs button.active{border-bottom-color:var(--accent);color:var(--accent)}.size-legend{background:var(--panel);border:1px solid var(--border);color:var(--muted);border-radius:6px;margin-bottom:12px;padding:7px 12px;font-size:12px}.size-legend strong{color:var(--text);font-weight:600}.state-editor{flex-wrap:wrap;align-items:flex-start;gap:20px;display:flex}.canvas-column{flex:auto;min-width:0;overflow-x:auto}.canvas{border:1px solid var(--border);background:repeating-conic-gradient(#20242c 0% 25%,#2a2f3a 0% 50%) 0 0/16px 16px;position:relative}.canvas img{image-rendering:pixelated;display:block;position:absolute;top:0;left:0}.overlay-layer{pointer-events:none;position:absolute;top:0;left:0}.title-area-guide{border:1px dashed var(--accent);pointer-events:none;background:#5db1ff26;position:absolute}.title-guide-swatch{border:1px dashed var(--accent);vertical-align:middle;background:#5db1ff26;width:10px;height:10px;display:inline-block}.canvas-empty{border:2px dashed var(--border);text-align:center;color:var(--muted);border-radius:8px;padding:40px}.canvas-size{color:var(--muted);font-size:12px}.state-controls{background:var(--panel);border:1px solid var(--border);border-radius:8px;flex:0 0 280px;padding:12px}.preview-panel{border:none;border-left:1px solid var(--border);border-radius:0;min-height:100%}.preview-widget{border:1px solid var(--border);background:#0c0e12;margin-bottom:8px;position:relative;overflow:hidden}.preview-widget img{display:block;position:absolute;top:0;left:0}.pv-buttons{color:#000;pointer-events:none;gap:5px;font-size:11px;font-weight:700;line-height:1;display:flex;position:absolute;right:7px}.pv-content{flex-direction:column;justify-content:space-evenly;padding:2px 9px 4px;display:flex;position:absolute;bottom:0;left:0;right:0}.pv-row{text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000;white-space:nowrap;align-items:center;gap:7px;min-height:0;font-weight:600;display:flex}.pv-row svg{flex:none}.pv-name{text-overflow:ellipsis;flex:1;overflow:hidden}.pv-count{text-align:right}.modal-backdrop{z-index:10;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--border);border-radius:10px;width:90vw;max-width:780px;max-height:85vh;padding:16px;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-header h2{margin:0}.donate-link{color:#fd0;white-space:nowrap;border:1px solid #0000;border-radius:6px;padding:6px 10px;font-weight:600;text-decoration:none}.donate-link:hover{border-color:#fd0}.help-modal{max-width:520px}.help-steps{margin:12px 0;padding-left:20px;line-height:1.6}.help-steps li{margin-bottom:10px}.donate-modal{text-align:center;max-width:420px}.donate-modal h2{margin-top:0}.donate-modal p{color:var(--muted);line-height:1.5}.donate-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:16px;display:flex}.donate-button{color:#10141a;background:#fd0;border-radius:8px;padding:10px 18px;font-weight:700;text-decoration:none;display:inline-block}.donate-button:hover{background:#ffe94d}.modal pre{border:1px solid var(--border);background:#10131a;border-radius:6px;padding:10px;font-size:12px;line-height:1.45;overflow-x:auto}