@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-cyrillic-wght-normal-DqGufNeO.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-greek-ext-wght-normal-DlzME5K_.woff2)format("woff2-variations");unicode-range:U+1F??}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-greek-wght-normal-CkhJZR-_.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-vietnamese-wght-normal-CBcvBZtf.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-latin-ext-wght-normal-DO1Apj_S.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-latin-wght-normal-Dx4kXJAl.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--font:"Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--bg:#f3f4f7;--surface:#fff;--surface-2:#f7f8fa;--surface-3:#eef0f4;--border:#e4e7ed;--border-strong:#d3d8e1;--text:#141821;--text-2:#4a5263;--muted:#7b8394;--accent:#4f6cf7;--accent-hover:#3f5ae6;--accent-soft:#4f6cf71a;--accent-ring:#4f6cf747;--on-accent:#fff;--success:#17915a;--success-soft:#17915a1a;--warning:#b86e00;--warning-soft:#d68a001f;--danger:#dc3d43;--danger-soft:#dc3d431a;--shadow-sm:0 1px 2px #1018280f;--shadow:0 1px 2px #1018280d, 0 4px 16px #1018280f;--shadow-lg:0 12px 40px #10182824, 0 2px 6px #1018280f;--glass:#ffffffc7;--glass-border:#ffffffe6;--stage-1:#fbfcfe;--stage-2:#e3e7ef;--frame:#d8dce4;--opening:#f4f5f8;--slab:#c9ced8;--r-sm:8px;--r:12px;--r-lg:16px}[data-theme=dark]{--bg:#0c0e12;--surface:#14171d;--surface-2:#191d24;--surface-3:#20252e;--border:#252a34;--border-strong:#323946;--text:#eceef3;--text-2:#b7bdca;--muted:#858d9e;--accent:#7189ff;--accent-hover:#8599ff;--accent-soft:#7189ff24;--accent-ring:#7189ff59;--success:#3ccf8e;--success-soft:#3ccf8e1f;--warning:#f2b44c;--warning-soft:#f2b44c21;--danger:#ff6b6f;--danger-soft:#ff6b6f1f;--shadow-sm:0 1px 2px #0006;--shadow:0 1px 2px #0000004d, 0 6px 20px #0000004d;--shadow-lg:0 16px 48px #00000080;--glass:#181b22c7;--glass-border:#ffffff12;--stage-1:#1e2330;--stage-2:#0b0d12;--frame:#353b48;--opening:#1b1f27;--slab:#596173}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11", "ss01";font-size:14px;line-height:1.45}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:not-allowed;opacity:.4}h2{letter-spacing:-.015em;margin:0;font-size:19px;font-weight:650}.icon{stroke-width:2px;flex-shrink:0;width:1em;height:1em}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#app{grid-template-columns:440px 1fr;height:100dvh;display:grid}.sidebar{background:var(--surface);border-right:1px solid var(--border);z-index:2;flex-direction:column;min-height:0;display:flex;position:relative}.brand{align-items:center;gap:12px;padding:18px 20px 14px;display:flex}.logo{color:var(--accent);flex-shrink:0;width:36px;height:36px}.logo svg{width:100%;height:100%;filter:drop-shadow(0 4px 10px var(--accent-ring));display:block}.brand-text{flex:1;min-width:0}.brand-name{letter-spacing:-.02em;font-size:16px;font-weight:700}.brand-sub{color:var(--muted);font-size:12.5px}.brand-actions{gap:4px;display:flex}.btn-icon{border-radius:var(--r-sm);width:34px;height:34px;color:var(--text-2);place-items:center;font-size:17px;transition:background .15s,color .15s;display:grid}.btn-icon:hover{background:var(--surface-3);color:var(--text)}.menu{position:relative}.menu-pop{z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);min-width:200px;box-shadow:var(--shadow-lg);padding:6px;animation:.14s ease-out pop;position:absolute;top:40px;right:0}.menu-pop button{text-align:left;border-radius:7px;align-items:center;gap:10px;width:100%;padding:8px 10px;font-size:13.5px;display:flex}.menu-pop button:hover{background:var(--surface-3)}.menu-pop button .icon{color:var(--muted);font-size:16px}.menu-pop .danger,.menu-pop .danger .icon{color:var(--danger)}.menu-pop hr{border:0;border-top:1px solid var(--border);margin:6px 4px}.steps{background:var(--surface-3);border-radius:var(--r);grid-template-columns:repeat(4,1fr);gap:4px;margin:0 20px;padding:4px;display:grid}.steps button{height:36px;color:var(--muted);border-radius:9px;justify-content:center;align-items:center;gap:7px;font-size:13px;font-weight:550;transition:background .18s,color .18s,box-shadow .18s;display:flex}.steps button:hover{color:var(--text)}.steps button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm), 0 0 0 1px var(--border)}.step-num{background:var(--border-strong);width:19px;height:19px;color:var(--surface);border-radius:50%;place-items:center;font-size:11px;font-weight:700;display:grid}.steps button.active .step-num{background:var(--accent);color:var(--on-accent)}.steps button.done .step-num{background:var(--success);color:#fff}.panels{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;flex:1;min-height:0;overflow-y:auto}.panel{padding:22px 20px 28px;animation:.22s ease-out fade;display:none}.panel.active{display:block}.panel-head{margin-bottom:18px}.panel-head p{color:var(--muted);margin:6px 0 0;font-size:13.5px}@keyframes fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:translateY(-4px)scale(.98)}to{opacity:1;transform:none}}.sidebar-foot{border-top:1px solid var(--border);background:var(--surface);justify-content:space-between;gap:10px;padding:14px 20px;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:14px;padding:16px}.card-title{align-items:center;gap:8px;margin-bottom:14px;font-size:13.5px;font-weight:620;display:flex}.card-title .icon{color:var(--accent);font-size:16px}.card-title small{color:var(--muted);margin-left:auto;font-size:12px;font-weight:450}.note{border-radius:var(--r);background:var(--accent-soft);color:var(--text-2);align-items:center;gap:10px;padding:12px 14px;font-size:13px;display:flex}.note .icon{color:var(--accent);font-size:16px}.note b{color:var(--text);font-variant-numeric:tabular-nums}.banner{border-radius:var(--r);align-items:flex-start;gap:10px;margin-bottom:14px;padding:10px 12px;font-size:13px;display:flex}.banner .icon{margin-top:1px;font-size:16px}.banner.error{background:var(--danger-soft);color:var(--danger)}.banner.warning{background:var(--warning-soft);color:var(--warning)}.fields-3{grid-template-columns:repeat(3,1fr);gap:12px 10px;display:grid}.fields-2{grid-template-columns:repeat(2,1fr);gap:12px 10px;display:grid}.field{flex-direction:column;gap:6px;min-width:0;display:flex}.field>span{color:var(--text-2);font-size:12.5px;font-weight:550}.field>small{color:var(--muted);margin-top:-2px;font-size:11.5px}.card>.field+.fields-3,.card>.fields-3+.field,.card>.fields-3+.switch-row,.card>.field+.field{margin-top:14px}.card>.fields-3+.field:has(+.option-tiles){margin-bottom:8px}.input{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;align-items:center;height:38px;transition:border-color .15s,box-shadow .15s,background .15s;display:flex;position:relative}.input:hover{border-color:var(--border-strong)}.input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);background:var(--surface)}.input input,.input select{min-width:0;height:100%;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0;flex:1;padding:0 10px;font-size:14px;font-weight:520}.input input::placeholder{color:var(--muted);font-weight:450}.input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input input[type=number]{appearance:textfield}.input em{color:var(--muted);pointer-events:none;padding-right:10px;font-size:12.5px;font-style:normal}.input.select select{appearance:none;cursor:pointer;padding-right:32px}.input.select:after{content:"";border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);pointer-events:none;width:7px;height:7px;margin-top:-5px;position:absolute;top:50%;right:13px;transform:rotate(45deg)}.input select option{background:var(--surface);color:var(--text)}.input .auto-btn{height:26px;color:var(--muted);background:var(--surface-3);border-radius:6px;margin-right:6px;padding:0 9px;font-size:11.5px;font-weight:650;transition:background .15s,color .15s}.input .auto-btn:hover{color:var(--text)}.input .auto-btn.on{background:var(--accent-soft);color:var(--accent)}.switch{flex-shrink:0;display:inline-flex;position:relative}.switch input{opacity:0;cursor:pointer;z-index:1;margin:0;position:absolute;inset:0}.switch span{background:var(--border-strong);border-radius:99px;width:38px;height:22px;transition:background .2s;position:relative}.switch span:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s cubic-bezier(.3,.7,.4,1.2);position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000040}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:after{transform:translate(16px)}.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.switch.small span{width:30px;height:18px}.switch.small span:after{width:12px;height:12px}.switch.small input:checked+span:after{transform:translate(12px)}.switch-row{border-top:1px solid var(--border);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:12px 0 0;display:flex}.switch-row>span:first-child{flex-direction:column;gap:2px;font-size:13.5px;display:flex}.switch-row b{font-weight:560}.switch-row small{color:var(--muted);font-size:12px}.chips{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.chip{border:1px solid var(--border);background:var(--surface);height:32px;color:var(--text-2);border-radius:99px;align-items:center;gap:7px;padding:0 12px;font-size:13px;font-weight:530;transition:all .15s;display:inline-flex}.chip small{color:var(--muted);font-weight:450}.chip:hover{border-color:var(--border-strong);color:var(--text)}.chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.chip.active small{color:var(--accent);opacity:.8}.segmented{background:var(--surface-3);border-radius:10px;gap:3px;padding:3px;display:flex}.segmented button{height:30px;color:var(--muted);border-radius:7px;flex:1;padding:0 12px;font-size:12.5px;font-weight:580;transition:all .15s}.segmented button:hover{color:var(--text)}.segmented button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm), 0 0 0 1px var(--border)}.segmented.wide button{text-align:left;flex-direction:column;align-items:flex-start;gap:1px;height:auto;padding:9px 12px;display:flex}.segmented.wide b{font-size:13.5px;font-weight:650}.segmented.wide small{font-size:11.5px;font-weight:450}.segmented.wide button.active b{color:var(--accent)}.option-tiles{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.option-tiles button{border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);color:var(--text-2);flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;font-size:12.5px;font-weight:550;transition:all .15s;display:flex}.option-tiles button:hover{border-color:var(--border-strong)}.option-tiles svg{width:48px;height:32px}.option-tiles svg path{fill:var(--surface-3);stroke:var(--muted);stroke-width:1.5px;stroke-linejoin:round}.option-tiles svg .cut{fill:var(--surface-2);stroke:var(--muted);stroke-width:1.5px}.option-tiles button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}.option-tiles button.active svg path{fill:color-mix(in srgb, var(--accent) 22%, transparent);stroke:var(--accent)}.option-tiles button.active svg .cut{fill:var(--surface);stroke:var(--accent)}.btn{border-radius:10px;justify-content:center;align-items:center;gap:8px;height:40px;padding:0 16px;font-size:13.5px;font-weight:600;transition:background .15s,box-shadow .15s,transform 80ms,color .15s;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn .icon{font-size:16px}.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 2px #0000001a, 0 4px 14px var(--accent-ring)}.btn.primary:hover:not(:disabled){background:var(--accent-hover)}.btn.ghost{color:var(--text-2)}.btn.ghost:hover:not(:disabled){background:var(--surface-3);color:var(--text)}.btn.outline{border:1px solid var(--border);background:var(--surface);color:var(--text-2)}.btn.outline:hover:not(:disabled){border-color:var(--border-strong);color:var(--text)}.btn.danger-ghost{color:var(--danger)}.btn.danger-ghost:hover:not(:disabled){background:var(--danger-soft)}.btn.small{border-radius:8px;height:32px;padding:0 11px;font-size:12.5px}.btn.big{border-radius:12px;width:100%;height:48px;margin-top:14px;font-size:14.5px}.templates{grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px;display:grid}.template{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:10px;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 6px;font-size:11px;font-weight:550;transition:all .15s;display:flex}.template:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}.template svg{width:34px;height:34px}.template svg rect.frame{fill:none;stroke:var(--border-strong);stroke-width:2px}.template svg rect.cell{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.2px;opacity:.9}.editor-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:14px;padding:18px 18px 10px}.front{background:var(--opening);border:9px solid var(--frame);box-shadow:inset 0 2px 10px #00000012, var(--shadow);-webkit-user-select:none;user-select:none;touch-action:none;border-radius:6px;margin:0 auto;position:relative}.cell{cursor:pointer;color:#000000b8;border-radius:5px;flex-direction:column;justify-content:center;align-items:center;gap:1px;transition:filter .15s,box-shadow .15s;display:flex;position:absolute;overflow:hidden;box-shadow:inset 0 -3px #00000014,inset 0 1px #ffffff59;container-type:size}.cell:before{content:"";background:#0000001a;border-radius:0 0 99px 99px;width:min(34%,46px);height:min(18%,14px);position:absolute;top:0;left:50%;transform:translate(-50%)}.front.no-handle .cell:before{display:none}.cell:hover{filter:brightness(1.05)saturate(1.05)}.cell.selected{box-shadow:0 0 0 2px var(--surface), 0 0 0 4.5px var(--accent), 0 6px 18px #00000026;z-index:2}.cell b{letter-spacing:-.01em;font-size:13px;font-weight:700}.cell span{opacity:.78;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11px;font-weight:550}.cell .parts-badge{color:#000000a6;background:#ffffff8c;border-radius:99px;padding:1px 6px;font-size:10px;font-weight:700;position:absolute;bottom:5px;right:5px}@container (width<=74px){.cell span,.cell .parts-badge{display:none}}@container (height<=44px){.cell span,.cell .parts-badge{display:none}}.divider{z-index:3;place-items:center;display:grid;position:absolute}.divider:after{content:"";background:var(--accent);opacity:0;border-radius:99px;transition:opacity .15s}.divider.v{cursor:col-resize;width:14px;margin-left:-7px}.divider.v:after{width:4px;height:60%;max-height:44px}.divider.h{cursor:row-resize;height:14px;margin-bottom:-7px;left:0;right:0}.divider.h:after{width:60%;max-width:70px;height:4px}.divider:hover:after,.divider.dragging:after{opacity:1}.front.dragging,.front.dragging *{cursor:inherit!important}.editor-foot{color:var(--muted);justify-content:center;gap:18px;margin-top:12px;font-size:11.5px;display:flex}.editor-foot span{align-items:center;gap:5px;display:inline-flex}.slab{z-index:1;cursor:pointer;background:var(--slab);border-radius:2px;position:absolute;box-shadow:inset 0 0 0 1px #00000014}.slab.selected{box-shadow:0 0 0 2px var(--accent)}.cell-div{pointer-events:none;background:#00000038;border-radius:1px;width:2px;margin-left:-1px;position:absolute;bottom:0}.cell .div-badge{color:#000000a6;background:#ffffff8c;border-radius:99px;align-items:center;gap:3px;padding:1px 6px;font-size:10px;font-style:normal;font-weight:700;display:inline-flex;position:absolute;bottom:5px;left:5px}.cell .div-badge .icon{font-size:10px}.cell .parts-badge{font-style:normal}@container (width<=74px){.cell .div-badge{display:none}}@container (height<=44px){.cell .div-badge{display:none}}.insert-fields{margin-top:14px;transition:opacity .2s}.insert-fields.off{opacity:.45;pointer-events:none}.insert-fields .hint{margin:10px 0 0}.switch-row.first{border-top:0;margin-top:0;padding-top:0}.swatch.neutral{background:var(--slab)}.insp-section{border-top:1px solid var(--border);margin-top:16px;padding-top:14px}.sub-head{align-items:baseline;gap:8px;margin-bottom:12px;font-size:13.5px;display:flex}.sub-head b{font-weight:620}.sub-head small{color:var(--muted);font-size:12px}.topview-wrap{border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border);flex-direction:column;align-items:center;gap:6px;padding:14px;display:flex}.topview{background:color-mix(in srgb, var(--box) 85%, #000 15%);box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;touch-action:none;border-radius:7px;position:relative}.tv-inner{background:color-mix(in srgb, var(--box) 40%, var(--surface) 60%);border-radius:4px;position:absolute}.tv-cell{pointer-events:none;place-items:center;display:grid;position:absolute;container-type:size}.tv-cell span{color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:10.5px;font-weight:650}@container (width<=44px){.tv-cell span{display:none}}@container (height<=16px){.tv-cell span{display:none}}.tv-empty{color:var(--text-2);pointer-events:none;place-items:center;font-size:12px;display:grid;position:absolute;inset:0}.tv-div{z-index:2;place-items:center;display:grid;position:absolute}.tv-div:after{content:"";background:color-mix(in srgb, var(--box) 70%, #000 30%);border-radius:2px;transition:background .15s,box-shadow .15s}.tv-div.v{cursor:col-resize;width:16px;margin-left:-8px}.tv-div.v:after{width:4px;height:100%}.tv-div.h{cursor:row-resize;height:16px;margin-bottom:-8px}.tv-div.h:after{width:100%;height:4px}.tv-div:hover:after{background:var(--accent)}.tv-div.selected:after{background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}.tv-front{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:600}.tv-actions{flex-wrap:wrap;gap:6px;margin:12px 0;display:flex}.tv-hint{margin:0 0 12px}.div-selected{border-radius:var(--r);background:var(--accent-soft);align-items:flex-end;gap:8px;margin-bottom:12px;padding:12px;display:flex}.div-selected .field{flex:1}.div-selected .btn{height:38px}.div-tools{gap:6px;height:38px;display:flex}.div-tools .btn{flex:1;height:38px;padding:0 8px}.clear-div{color:var(--muted);margin-top:8px}.inspector-head{align-items:center;gap:10px;margin-bottom:14px;display:flex}.swatch{border-radius:7px;flex-shrink:0;width:26px;height:26px;box-shadow:inset 0 0 0 1px #00000014}.inspector-head .title{font-size:14.5px;font-weight:650}.inspector-head .sub{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}.inspector-actions{border-top:1px solid var(--border);flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:14px;display:flex}.inspector-actions .spacer{flex:1}.split-list{flex-direction:column;gap:2px;display:flex}.split-row{cursor:pointer;border-radius:8px;grid-template-columns:14px 1fr auto;align-items:center;gap:10px;padding:8px 6px;font-size:13px;display:grid}.split-row:hover{background:var(--surface-2)}.split-row.selected{background:var(--accent-soft)}.split-row .dot{border-radius:4px;width:12px;height:12px}.split-row .dims{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:6px;font-size:12px}.badge{white-space:nowrap;background:var(--surface-3);height:22px;color:var(--text-2);border-radius:99px;align-items:center;gap:5px;padding:0 8px;font-size:11.5px;font-weight:620;display:inline-flex}.badge .icon{font-size:12px}.badge.ok{background:var(--success-soft);color:var(--success)}.badge.warn{background:var(--warning-soft);color:var(--warning)}.badge.bad{background:var(--danger-soft);color:var(--danger)}.badge.accent{background:var(--accent-soft);color:var(--accent)}.joint-explain{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;display:grid}.joint-explain figure{border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border);margin:0;padding:10px}.joint-fig{width:100%;height:64px;margin-bottom:6px;display:block}.joint-fig .a{fill:color-mix(in srgb, var(--accent) 30%, transparent);stroke:var(--accent);stroke-width:1.5px;stroke-linejoin:round}.joint-fig .b{fill:#e9b77c73;stroke:#c98a3f;stroke-width:1.5px;stroke-linejoin:round}.joint-explain figcaption{color:var(--muted);font-size:12px;line-height:1.4}.joint-explain figcaption b{color:var(--text);font-weight:600}.advanced{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}.advanced summary{cursor:pointer;color:var(--text-2);align-items:center;gap:6px;font-size:13px;font-weight:560;list-style:none;display:flex}.advanced summary:before{content:"";border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);width:6px;height:6px;transition:transform .15s;transform:rotate(-45deg)}.advanced[open] summary:before{transform:rotate(45deg)}.advanced[open] summary{margin-bottom:14px}.stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;display:grid}.stat{border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--border);padding:14px}.stat .label{color:var(--muted);align-items:center;gap:6px;font-size:12px;font-weight:530;display:flex}.stat .label .icon{font-size:14px}.stat .value{letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px;font-size:22px;font-weight:700}.stat .value.sm{white-space:nowrap;margin-top:8px;font-size:16px}.stat .value small{color:var(--muted);margin-left:2px;font-size:13px;font-weight:550}.box-list{flex-direction:column;gap:8px;display:flex}.box-row{border-radius:var(--r);border:1px solid var(--border);background:var(--surface);cursor:pointer;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:10px;transition:border-color .15s,background .15s;display:grid}.box-row:hover{border-color:var(--border-strong)}.box-row.selected{border-color:var(--accent);background:var(--accent-soft)}.box-row .swatch{color:#0009;border-radius:9px;place-items:center;width:36px;height:36px;font-size:11px;font-weight:700;display:grid}.box-row .name{align-items:center;gap:8px;font-size:13.5px;font-weight:620;display:flex}.box-row .meta{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.box-row .btn-icon{border:1px solid var(--border);background:var(--surface);width:36px;height:36px}.box-row .btn-icon:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}.stage{background:radial-gradient(120% 90% at 50% 30%, var(--stage-1) 0%, var(--stage-2) 100%);min-width:0;position:relative;overflow:hidden}#canvas{position:absolute;inset:0}#canvas canvas{outline:none;display:block}.hud{z-index:3;pointer-events:none;gap:8px;display:flex;position:absolute}.hud>*{pointer-events:auto}.hud-tl{top:16px;left:16px}.hud-tr{top:16px;right:16px}.hud-bottom{bottom:18px;left:50%;transform:translate(-50%)}.hud-bl{bottom:22px;left:18px}.hint{color:var(--muted);pointer-events:none;font-size:11.5px}.glass{background:var(--glass);-webkit-backdrop-filter:blur(14px)saturate(1.4);border:1px solid var(--glass-border);box-shadow:var(--shadow)}.segmented.glass{border-radius:12px;padding:4px}.segmented.glass button{height:30px;padding:0 14px}.pill{background:var(--glass);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);height:32px;box-shadow:var(--shadow);color:var(--text-2);border-radius:99px;align-items:center;gap:7px;padding:0 12px;font-size:12.5px;font-weight:580;display:inline-flex}.pill .icon{font-size:14px}.pill.ok .icon{color:var(--success)}.pill.err{color:var(--danger)}.pill.subtle{color:var(--muted);font-weight:520}.pill .mini-spin{border:2px solid var(--accent-ring);border-top-color:var(--accent);border-radius:50%;width:12px;height:12px;animation:.7s linear infinite spin}.dock{height:46px;color:var(--text-2);border-radius:14px;align-items:center;gap:14px;padding:0 16px;font-size:13px;font-weight:550;display:flex}.dock-item{cursor:pointer;white-space:nowrap;align-items:center;gap:8px;display:inline-flex}.dock-sep{background:var(--border);width:1px;height:22px}.explode input{width:130px}input[type=range]{appearance:none;background:var(--border-strong);cursor:pointer;border-radius:99px;outline:none;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--surface);border:2px solid var(--accent);width:16px;height:16px;box-shadow:var(--shadow-sm);border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--surface);border:2px solid var(--accent);width:12px;height:12px;box-shadow:var(--shadow-sm);border-radius:50%}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:99px;height:4px}.tooltip{z-index:30;pointer-events:none;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:10px;min-width:150px;padding:9px 11px;font-size:12.5px;position:fixed;transform:translate(14px,14px)}.tooltip .t-head{align-items:center;gap:8px;margin-bottom:3px;font-weight:650;display:flex}.tooltip .t-head i{border-radius:3px;width:10px;height:10px}.tooltip .t-row{color:var(--muted);font-variant-numeric:tabular-nums}.loading{z-index:10;color:var(--muted);background:radial-gradient(120% 90% at 50% 30%, var(--stage-1) 0%, var(--stage-2) 100%);flex-direction:column;justify-content:center;align-items:center;gap:14px;font-size:13.5px;font-weight:520;transition:opacity .4s;display:flex;position:absolute;inset:0}.loading.done{opacity:0;pointer-events:none}.spinner{border:3px solid var(--accent-ring);border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toasts{z-index:40;flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:fixed;bottom:20px;right:20px}.toast{background:var(--text);color:var(--surface);box-shadow:var(--shadow-lg);border-radius:12px;align-items:center;gap:12px;padding:11px 12px 11px 14px;font-size:13px;font-weight:520;animation:.25s cubic-bezier(.2,.8,.3,1.1) toast-in;display:flex}.toast .icon{color:var(--success);font-size:16px}[data-theme=dark] .toast .icon{color:#17915a}.toast button{color:var(--accent);border-radius:6px;padding:4px 8px;font-weight:650}[data-theme=dark] .toast button{color:#3f5ae6}.toast.out{animation:.2s ease-in forwards toast-out}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)scale(.97)}}@keyframes toast-out{to{opacity:0;transform:translateY(6px)}}@media (width<=900px){#app{grid-template-rows:46vh 1fr;grid-template-columns:1fr;height:auto;min-height:100dvh}.stage{z-index:1;grid-row:1;height:46vh;position:sticky;top:0}.sidebar{border-right:0;border-top:1px solid var(--border);grid-row:2}.panels{overflow:visible}.sidebar-foot{position:sticky;bottom:0}.hud-bl,.hud-tr .segmented button[data-view=side]{display:none}.templates{grid-template-columns:repeat(3,1fr)}.dock{gap:10px;padding:0 12px}.explode input{width:80px}}@media (width<=480px){.brand,.panel{padding-left:16px;padding-right:16px}.steps{margin:0 16px}.step-num{display:none}.steps button{font-size:12.5px}.fields-3{grid-template-columns:1fr 1fr}.joint-explain{grid-template-columns:1fr}.hud-tl .subtle{display:none}}