@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0b0e14;--panel:#121722;--panel-border:#243044;--text:#e8eef8;--muted:#8b9bb4;--accent:#3d8bfd;--accent-2:#1f6feb;--danger:#e35d6a;--radius:10px;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:IBM Plex Sans,system-ui,sans-serif;font-weight:400;line-height:1.4}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0}body{background:radial-gradient(1200px 600px at 10% -10%, #1a2740 0%, transparent 55%), radial-gradient(900px 500px at 100% 0%, #1b2a22 0%, transparent 50%), var(--bg)}button,input{font:inherit}.app{flex-direction:column;height:100%;min-height:100%;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5;background:#0c1018d9;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.25rem;display:flex;position:sticky;top:0}.brand{flex-direction:column;gap:.1rem;display:flex}.brand-mark{letter-spacing:-.03em;font-size:1.35rem;font-weight:700}.brand-sub{color:var(--muted);font-size:.8rem}.brand-github{color:var(--muted);border-bottom:1px solid #0000;text-decoration:none}.brand-github:hover{color:var(--accent);border-bottom-color:var(--accent)}.top-actions{flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;display:flex}.action-group{border-left:1px solid var(--panel-border);flex-wrap:wrap;align-items:center;gap:.4rem;padding-left:.75rem;display:flex}.action-group:first-child{border-left:none;padding-left:0}.action-group-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);width:100%;margin-right:.15rem;font-size:.65rem;line-height:1}@media (width>=900px){.action-group-label{width:auto}}.menu-anchor{display:inline-flex;position:relative}.toolbar-menu{z-index:40;border:1px solid var(--panel-border);background:#141b2a;border-radius:10px;flex-direction:column;gap:.65rem;width:min(17.5rem,100vw - 2rem);padding:.75rem;display:flex;position:absolute;top:calc(100% + .45rem);right:0;box-shadow:0 12px 32px #00000073}.toolbar-menu-hint{color:var(--muted);margin:0;font-size:.75rem;line-height:1.35}.toolbar-menu .field{margin:0}.toolbar-menu .btn{justify-content:center;width:100%}.btn{border:1px solid var(--panel-border);color:var(--text);cursor:pointer;background:#182033;border-radius:8px;padding:.45rem .8rem}.btn:hover:not(:disabled){background:#1d2740;border-color:#3a4d6d}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg, var(--accent), var(--accent-2));border-color:#0000;font-weight:600}.btn-primary:hover:not(:disabled){filter:brightness(1.05)}.btn-secondary{color:var(--muted);background:#141a26;border-color:#3a455c;font-weight:500}.btn-secondary:hover:not(:disabled){color:var(--text);background:#1a2233;border-color:#5a6a86}.btn-small{padding:.3rem .6rem;font-size:.85rem}.btn-danger{color:#ffd0d5;background:#2a171b;border-color:#5a3038}.btn-row{gap:.5rem;margin-top:.75rem;display:flex}.overlap-hint,.status-bar{justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 1.25rem;font-size:.9rem;display:flex}.overlap-hint{color:#ffd79a;background:#3a2a12;border-bottom:1px solid #7a5a28}.status-bar{border-bottom:1px solid var(--panel-border);color:#c7d7f0;background:#152238}.linkish{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.workspace{flex:1;grid-template-columns:minmax(280px,340px) 1fr;min-height:0;display:grid;overflow:hidden}.sidebar{border-right:1px solid var(--panel-border);background:#0e121ceb;flex-direction:column;gap:.85rem;min-height:0;padding:.85rem;display:flex;overflow:auto}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:.85rem}.panel h2{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .75rem;font-size:.78rem;font-weight:600}.panel-head{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.panel-head h2{margin:0}.field{color:var(--muted);flex-direction:column;gap:.3rem;min-width:0;margin-bottom:.65rem;font-size:.85rem;display:flex}.field input{box-sizing:border-box;border:1px solid var(--panel-border);width:100%;min-width:0;max-width:100%;color:var(--text);appearance:none;background:#0d121c;border-radius:7px;padding:.55rem .65rem;font-size:1rem;line-height:1.25;display:block}.field select{box-sizing:border-box;border:1px solid var(--panel-border);width:100%;min-width:0;max-width:100%;color:var(--text);background:#0d121c;border-radius:7px;padding:.55rem .65rem;font-size:1rem;line-height:1.25;display:block}.field-check{flex-direction:row;align-items:center;gap:.55rem}.field-check input[type=checkbox]{width:auto;min-width:1.1rem;max-width:none;height:1.1rem;accent-color:var(--accent,#3b82f6);-webkit-appearance:checkbox;appearance:auto;padding:0}.field-check span{color:var(--muted)}.field input[type=color]{height:2.1rem;padding:.15rem}.field-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.55rem;display:grid}.field-row.composition-size{grid-template-columns:1fr}.slice-list{flex-direction:column;gap:.35rem;max-height:220px;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.slice-item{text-align:left;width:100%;color:var(--text);cursor:pointer;background:#0f1520;border:1px solid #0000;border-radius:8px;align-items:center;gap:.55rem;padding:.45rem .5rem;display:flex}.slice-item:hover{border-color:#334663}.slice-item.active{border-color:var(--accent);background:#152238}.swatch{border-radius:3px;flex-shrink:0;width:12px;height:12px}.slice-item-text{flex-direction:column;min-width:0;display:flex}.slice-item-text strong{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.slice-item-text small{color:var(--muted);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.72rem}.muted{color:var(--muted);font-size:.88rem}.help ol{color:var(--muted);margin:0;padding-left:1.15rem;font-size:.85rem}.help li+li{margin-top:.35rem}.help-note{color:var(--muted);margin:.75rem 0 0;font-size:.78rem;line-height:1.4}.help code{font-size:.85em}.hint{color:var(--muted);margin:0 0 .75rem;font-size:.78rem;line-height:1.35}.workflow-panel{background:linear-gradient(180deg, #152238, var(--panel));border-color:#2a4568}.workflow-steps{color:var(--text);margin:0;padding-left:1.15rem;font-size:.85rem;line-height:1.45}.workflow-steps li+li{margin-top:.4rem}.tips-list{color:var(--muted);margin:0;padding-left:1.15rem;font-size:.82rem;line-height:1.4}.tips-list li+li{margin-top:.35rem}.tips-list code{font-size:.85em}.canvas-empty{z-index:2;text-align:center;pointer-events:none;background:#080c148c;flex-direction:column;justify-content:center;align-items:center;gap:.65rem;padding:1.5rem;display:flex;position:absolute;inset:0}.canvas-empty-actions{pointer-events:auto;flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.canvas-empty-title{margin:0;font-size:1.1rem;font-weight:600}.canvas-empty-body{max-width:28rem;color:var(--muted);margin:0;font-size:.9rem;line-height:1.4}.btn.active{border-color:var(--accent);color:#fff;background:#152238}.main{min-width:0;min-height:0;padding:.75rem;display:flex;overflow:hidden}.canvas-panel{flex-direction:column;flex:1;gap:.5rem;min-width:0;min-height:0;display:flex}.canvas-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.canvas-meta{color:var(--muted);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.78rem}.canvas-meta-hint{opacity:.7;font-family:IBM Plex Sans,system-ui,sans-serif;font-size:.72rem}.zoom-group{gap:.35rem;display:flex}.canvas-stage{border:1px solid var(--panel-border);background:linear-gradient(#141c2ad9,#0a0e16f2);border-radius:12px;flex:1;min-height:0;position:relative;overflow:hidden}.editor-canvas{cursor:crosshair;touch-action:none;transform-origin:0 0;will-change:transform;border-radius:2px;display:block;position:absolute;top:0;left:0;box-shadow:0 12px 40px #00000059}@media (width<=960px){.workspace{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--panel-border);max-height:none}}