:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh}.toolbar{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#111827;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;flex-wrap:wrap}.toolbar-group{display:flex;align-items:center;gap:.25rem}.toolbar-group+.toolbar-group{border-left:1px solid rgba(255,255,255,.1);padding-left:.5rem;margin-left:.25rem}.tool-btn{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.4rem .7rem;border:1px solid rgba(255,255,255,.1);border-radius:.375rem;background:#ffffff0a;color:#ffffffbf;font-size:.8rem;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}.tool-btn:hover{background:#ffffff14;color:#fff}.tool-btn.active{background:#3b82f640;border-color:#3b82f680;color:#93c5fd}.tool-btn.danger{color:#f87171;border-color:#f8717133}.tool-btn.danger:hover{background:#f8717126}.toolbar-title{font-weight:600;font-size:.9rem;color:#93c5fd;margin-right:.5rem;letter-spacing:-.01em}.toolbar-label{font-size:.7rem;color:#fff6;text-transform:uppercase;letter-spacing:.05em}.toolbar-input{width:3.5rem;padding:.3rem .4rem;border:1px solid rgba(255,255,255,.1);border-radius:.375rem;background:#ffffff0a;color:#fff;font-size:.8rem;text-align:center;font-family:inherit}.toolbar-input:focus{outline:none;border-color:#3b82f680}.canvas-wrap{flex:1;position:relative;overflow:hidden;background:#0c1220}canvas{display:block;cursor:crosshair}.status-bar{display:flex;align-items:center;gap:1.5rem;padding:.3rem 1rem;background:#111827;border-top:1px solid rgba(255,255,255,.08);font-size:.7rem;color:#fff6;flex-shrink:0}.status-item{display:flex;align-items:center;gap:.35rem}.color-swatch{width:1rem;height:1rem;border-radius:.2rem;border:1px solid rgba(255,255,255,.15);cursor:pointer;position:relative}.color-swatch input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:100}.modal{background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;padding:1.5rem;min-width:20rem;max-width:28rem}.modal h3{margin:0 0 1rem;font-size:1rem}.modal-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.modal-row label{font-size:.8rem;color:#fff9;min-width:5rem}.modal-row input{flex:1;padding:.4rem .6rem;border:1px solid rgba(255,255,255,.1);border-radius:.375rem;background:#ffffff0d;color:#fff;font-size:.85rem;font-family:inherit}.modal-row input:focus{outline:none;border-color:#3b82f680}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.text-input-overlay{position:absolute;z-index:50}.text-input-overlay input{padding:.3rem .5rem;border:2px solid #3b82f6;border-radius:.375rem;background:#0a1428e6;color:#fff;font-size:.85rem;font-family:inherit;min-width:8rem}.text-input-overlay input:focus{outline:none}