*{box-sizing:border-box}html,body,#app{margin:0;height:100%}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0e0e10;color:#e8e8ea;overflow:hidden}#app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:100vh;gap:1px;background:#2a2a2e}section{display:flex;flex-direction:column;background:#141418;min-width:0}.pane-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid #2a2a2e;gap:1rem;flex-wrap:wrap}.pane-header h2{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a0a0a8}.toolbar{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.toolbar button{background:#23232a;color:#e8e8ea;border:1px solid #33333a;padding:.35rem .7rem;border-radius:6px;cursor:pointer;font-size:.8rem}.toolbar button:hover{background:#2d2d36}.color-pick{font-size:.75rem;color:#a0a0a8;display:flex;align-items:center;gap:.35rem}.color-pick input{width:28px;height:28px;padding:0;border:1px solid #33333a;background:transparent;border-radius:4px;cursor:pointer}#editor-pane{overflow:hidden}#editor-surface{position:relative;margin:1rem auto;aspect-ratio:1 / 1;width:min(calc(100% - 2rem),calc(100vh - 120px));background:#f5f5f5;border-radius:10px;overflow:hidden;box-shadow:0 6px 24px #0006}.template-guide{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;opacity:.45;pointer-events:none;filter:invert(1);-webkit-user-select:none;user-select:none}#editor-surface .canvas-container{position:absolute!important;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important}#editor-surface .canvas-container canvas{width:100%!important;height:100%!important;display:block}.drop-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border:2px dashed transparent;border-radius:10px;color:#6d6d78;font-size:1rem;pointer-events:none;opacity:0;transition:border-color .15s,background .15s,opacity .15s}#editor-surface.empty .drop-hint{opacity:1}#editor-surface.dragging .drop-hint{opacity:1;border-color:#4a9eff;background:#4a9eff1a;color:#2d7fd9}#viewer-surface{flex:1;position:relative;min-height:0}#viewer-surface canvas{display:block;width:100%!important;height:100%!important}#viewer-status{font-size:.75rem;color:#a0a0a8}