:root{--font-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--background:0 0% 100%;--foreground:240 10% 3.9%;--card:0 0% 100%;--muted:240 4.8% 95.9%;--muted-foreground:240 3.8% 46.1%;--primary:240 5.9% 10%;--primary-foreground:0 0% 98%;--border:240 5.9% 90%;--ring:240 5% 64.9%;--bg:hsl(var(--background));--surface:hsl(var(--card));--muted-bg:hsl(var(--muted));--border-c:hsl(var(--border));--border-2:#d4d4d9;--text-1:hsl(var(--foreground));--text-2:hsl(var(--muted-foreground));--text-3:#71717a;--primary-c:hsl(var(--primary));--primary-fg:hsl(var(--primary-foreground));--overlay:#09090b73;--stage-dot:#d9d9dd;--code-bg:#09090b;--code-fg:#f5f5f5;--accent:#7c3aed;--accent-2:#ec4899;--violet-bg:#f2ecfd;--violet-bd:#c8aff4;--violet-tx:#5f23c7;--green-tx:#1b7e3f;--danger:#dc2828;--text:var(--text-1);--panel-w:264px;--right-w:340px;--topbar-h:52px;--footer-h:32px;--mobile-nav-h:64px;--h-btn:32px;--h-btn-sm:26px;--h-input:32px;--h-tab:36px;--h-panel-hd:44px;--sp-1:4px;--sp-2:6px;--sp-3:8px;--sp-4:10px;--sp-5:12px;--sp-6:16px;--sp-7:20px;--radius:.5rem;--r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:12px;--r-pill:999px;--fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-lg:14px;--fs-xl:15px;--shadow-sm:0 1px 2px 0 #09090b0d;--shadow:0 1px 3px 0 #09090b14, 0 1px 2px -1px #09090b0f;--shadow-md:0 4px 6px -1px #09090b14, 0 2px 4px -2px #09090b0d;--shadow-lg:0 10px 15px -3px #09090b1a, 0 4px 6px -4px #09090b0f;--t-fast:.15s cubic-bezier(.4, 0, .2, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--background:240 10% 3.9%;--foreground:0 0% 98%;--card:240 10% 3.9%;--muted:240 3.7% 15.9%;--muted-foreground:240 5% 64.9%;--primary:0 0% 98%;--primary-foreground:240 5.9% 10%;--border:240 3.7% 15.9%;--ring:240 4.9% 83.9%;--border-2:#3d3d42;--text-3:#9999a3;--overlay:#0009;--stage-dot:#303036;--code-bg:#0f0f12;--violet-bg:#21113b;--violet-bd:#422673;--violet-tx:#a77bf4;--green-tx:#4eda81;--shadow-sm:0 1px 2px 0 #0000004d;--shadow:0 1px 3px 0 #0006, 0 1px 2px -1px #0000004d;--shadow-md:0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d;--shadow-lg:0 10px 15px -3px #00000080, 0 4px 6px -4px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text-1);font:var(--fs-md) / 1.5 var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}button,input,select,textarea{font:inherit;color:inherit}h1,h2,h3,h4,p{margin:0}code,kbd,pre{font-family:var(--font-mono)}.hidden{display:none!important}.hint{color:var(--text-2);font-size:var(--fs-sm);line-height:1.45}.hint.pad{padding:var(--sp-3) 0}.hint.tiny{font-size:var(--fs-xs);color:var(--text-3)}.spacer{flex:1}.skip-link{z-index:200;border-radius:var(--r-md);background:var(--primary-c);color:var(--primary-fg);padding:8px 12px;font-weight:600;text-decoration:none;position:absolute;top:-60px;left:12px}.skip-link:focus{top:12px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}input:focus-visible{border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / .15);outline:none}select:focus-visible{border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / .15);outline:none}textarea:focus-visible{border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / .15);outline:none}#app{grid-template-rows:var(--topbar-h) 1fr var(--footer-h);grid-template-columns:minmax(0,1fr);height:100%;display:grid}.topbar{align-items:center;gap:var(--sp-3);padding:0 var(--sp-6);border-bottom:1px solid var(--border-c);background:var(--surface);display:flex}.brand{align-items:center;gap:var(--sp-4);min-width:0;color:inherit;border-radius:var(--r-md);flex:1;text-decoration:none;display:flex}.brand-mark{border-radius:var(--r-md);background:var(--primary-c);width:28px;height:28px;color:var(--primary-fg);flex:none;place-items:center;display:grid}.brand-mark svg{display:block}.brand-name{font-weight:700;font-size:var(--fs-xl);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;min-width:0;margin:0;overflow:hidden}.brand:hover .brand-name{text-underline-offset:3px;text-decoration:underline}.brand-sub{height:20px;padding:0 var(--sp-3);border-radius:var(--r-pill);background:var(--muted-bg);border:1px solid var(--border-c);color:var(--text-1);font:500 var(--fs-xs) / 1 var(--font-mono);white-space:nowrap;align-items:center;display:inline-flex}.topbar-actions{gap:var(--sp-3);align-items:center;display:flex}.workspace{grid-template-columns:var(--panel-w) minmax(0, 1fr) var(--right-w);min-height:0;display:grid}.panel{background:var(--surface);flex-direction:column;min-height:0;display:flex;overflow:auto}.presets{border-right:1px solid var(--border-c)}.inspector{border-left:1px solid var(--border-c)}.panel-head{min-height:var(--h-panel-hd);padding:var(--sp-4) var(--sp-6) var(--sp-3);flex-direction:column;justify-content:center;gap:2px;display:flex}.panel-head h2,.section-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);font-weight:700}.btn{height:var(--h-btn);padding:0 var(--sp-5);justify-content:center;align-items:center;gap:var(--sp-2);border-radius:var(--r-md);border:1px solid var(--border-c);background:var(--surface);color:var(--text-1);font-size:var(--fs-md);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm);transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);-webkit-user-select:none;user-select:none;font-weight:500;line-height:1;display:inline-flex}.btn:hover{background:var(--muted-bg)}.btn:active{transform:translateY(.5px)}.btn.primary{background:var(--primary-c);border-color:var(--primary-c);color:var(--primary-fg)}.btn.primary:hover{opacity:.9}.btn.ghost{box-shadow:none;color:var(--text-2);background:0 0;border-color:#0000}.btn.ghost:hover{background:var(--muted-bg);color:var(--text-1)}.btn.ghost.danger:hover{color:var(--danger)}.btn.tiny{height:var(--h-btn-sm);padding:0 var(--sp-3);font-size:var(--fs-sm);border-radius:var(--r-sm)}.btn.icon{width:var(--h-btn);padding:0;font-size:20px}.icon-btn{width:var(--h-btn-sm);padding:0}.icon-btn span{display:inline-flex}.preset-list{padding:0 var(--sp-5) var(--sp-6);gap:var(--sp-3);flex-direction:column;display:flex}.search{width:100%;height:var(--h-input);padding:0 var(--sp-4);border-radius:var(--r-md);border:1px solid var(--border-c);background:var(--surface);font-size:var(--fs-md);box-shadow:var(--shadow-sm)}.search::placeholder{color:var(--text-3)}.chips{gap:var(--sp-1);flex-wrap:wrap;display:flex}.chip{align-items:center;gap:var(--sp-2);height:22px;padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid var(--border-c);background:var(--surface);color:var(--text-2);font-size:var(--fs-xs);cursor:pointer;transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);font-weight:600;display:inline-flex}.chip:hover{color:var(--text-1);background:var(--muted-bg)}.chip.active{background:var(--primary-c);border-color:var(--primary-c);color:var(--primary-fg)}.chip-count{font-family:var(--font-mono);font-size:10px;font-weight:500}.library-group{flex-direction:column;gap:1px;display:flex}.group-head{align-items:center;gap:var(--sp-2);width:100%;height:28px;margin:var(--sp-4) 0 var(--sp-1);padding:0 var(--sp-2);border-radius:var(--r-sm);color:var(--text-2);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;text-align:left;cursor:pointer;background:0 0;border:0;font-weight:700;display:flex}.group-head:hover{color:var(--text-1)}.group-chev{transition:transform var(--t-fast);color:var(--text-3);font-size:11px;display:inline-block}.group-head.collapsed .group-chev{transform:rotate(-90deg)}.group-count{border-radius:var(--r-pill);background:var(--muted-bg);height:18px;color:var(--text-1);font:500 10px / 1 var(--font-mono);letter-spacing:0;align-items:center;margin-left:auto;padding:0 7px;display:inline-flex}.preset-card{gap:var(--sp-4);min-height:36px;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-md);cursor:pointer;transition:background var(--t-fast);border:1px solid #0000;grid-template-columns:28px 1fr auto;align-items:center;display:grid;position:relative}.preset-card:hover,.preset-card:focus-within{background:var(--muted-bg)}.preset-card.active{background:var(--muted-bg);border-color:var(--border-c)}.thumb{border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border-c);perspective:300px;flex:none;place-items:center;width:28px;height:28px;display:grid;overflow:hidden}.thumb i{background:var(--text-1);will-change:transform;font-style:normal;display:inline-block}.preset-card.active .thumb i,.preset-card:hover .thumb i{background:linear-gradient(135deg, var(--accent), var(--accent-2))}.th-box i{border-radius:3px;width:12px;height:12px}.th-card i{border-radius:3px;width:14px;height:17px}.th-button i{color:var(--primary-fg);border-radius:3px;padding:2px 4px;font-size:7px;font-weight:700}.th-text{letter-spacing:-.02em;white-space:nowrap;font-size:9px;font-weight:800}.th-text i{color:var(--text-1);background:0 0!important}.th-list{gap:2px;width:14px;display:grid}.th-list i{border-radius:1px;height:3px}.th-grid{grid-template-columns:repeat(3,4px);gap:1.5px;display:grid}.th-grid i{border-radius:1px;width:4px;height:4px}.preset-meta{align-items:center;gap:var(--sp-2);min-width:0;display:flex}.preset-name{-webkit-appearance:none;appearance:none;text-align:left;font-weight:500;font-size:var(--fs-md);color:var(--text-1);cursor:pointer;-webkit-line-clamp:2;background:0 0;border:0;-webkit-box-orient:vertical;min-width:0;padding:0;line-height:1.3;display:-webkit-box;overflow:hidden}.preset-card.active .preset-name{font-weight:600}.preset-name:focus-visible{text-underline-offset:3px;outline:none;text-decoration:underline}.badge{border-radius:var(--r-pill);background:var(--violet-bg);border:1px solid var(--violet-bd);height:18px;color:var(--violet-tx);white-space:nowrap;align-items:center;padding:0 6px;font-size:10px;font-weight:600;display:inline-flex}.preset-actions{gap:var(--sp-1);opacity:0;transition:opacity var(--t-fast);display:flex}.preset-card:hover .preset-actions,.preset-card:focus-within .preset-actions,.preset-card.active .preset-actions{opacity:1}@media (hover:none){.preset-actions{opacity:1}}.stage-wrap{grid-template-rows:var(--h-panel-hd) 1fr;grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;display:grid}.stage-toolbar{align-items:center;gap:var(--sp-5);padding:0 var(--sp-6);border-bottom:1px solid var(--border-c);background:var(--surface);display:flex}.stage-status{font:var(--fs-sm) / 1 var(--font-mono);color:var(--text-2);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:var(--sp-3);flex:1;min-width:0;display:flex;overflow:hidden}.stage-status:before{content:"";background:var(--green-tx);border-radius:50%;flex:none;width:6px;height:6px}.stage-controls{align-items:center;gap:var(--sp-5);display:flex}.stage{background-color:var(--bg);background-image:radial-gradient(circle, var(--stage-dot) 1px, transparent 1px);perspective:1000px;color:var(--text-1);background-size:22px 22px;place-items:center;display:grid;position:relative;overflow:hidden}.stage.scrolly{scroll-behavior:smooth;display:block;overflow-y:auto}.stage-inner{width:100%;height:100%;padding:var(--sp-7);transform-style:preserve-3d;place-items:center;display:grid}.stage.scrolly .stage-inner{height:auto;min-height:60%}.scroll-filler{height:100%;color:var(--text-3);font:var(--fs-sm) var(--font-mono);place-items:center;display:grid}.scroll-filler.bottom{height:120%}.demo-shape{width:var(--demo-size);height:var(--demo-size);background:var(--demo-color);border-radius:var(--demo-radius)}.demo-circle{border-radius:50%}.demo-text{letter-spacing:-.03em;color:var(--demo-text);text-align:center;max-width:24ch;font-size:clamp(28px,5vw,56px);font-weight:700;line-height:1.1}:root:not([data-theme=dark]) .demo-text{--demo-text:var(--text-1)}.demo-split .motion-item,.demo-split .motion-word{white-space:pre;display:inline-block}.demo-button{color:var(--demo-text);background:var(--demo-color);border-radius:var(--demo-radius);cursor:pointer;border:0;padding:14px 28px;font-size:15px;font-weight:600}.demo-card{color:#fff;border-radius:var(--demo-radius);text-align:left;background:#1c1c22;border:1px solid #ffffff14;width:260px;overflow:hidden}.demo-card-media{background:linear-gradient(135deg, var(--demo-color), #ec4899);height:140px}.demo-card-body{gap:6px;padding:16px;display:grid}.demo-card-body span{opacity:.7;font-size:13px}.motion-list{gap:10px;width:260px;margin:0;padding:0;list-style:none;display:grid}.demo-item{background:var(--demo-color);color:var(--demo-text);border-radius:var(--demo-radius);padding:14px 18px;font-weight:600}.motion-grid{grid-template-columns:repeat(3,1fr);gap:12px;width:260px;display:grid}.demo-tile{aspect-ratio:1;background:var(--demo-color);color:var(--demo-text);border-radius:var(--demo-radius);place-items:center;font-weight:600;display:grid}.demo-custom{display:contents}.demo-custom.motion-target{display:block}.demo-shape,.demo-text,.demo-button,.demo-card,.demo-custom,.motion-item{transform-style:preserve-3d}.stage .modal-backdrop,.stage .modal-dialog,.stage .drawer-backdrop,.stage .drawer-panel,.stage .toast-card{position:absolute}.part-label{color:var(--text-3);font-weight:500}.tabs{border-bottom:1px solid var(--border-c);padding:0 var(--sp-3);background:var(--surface);z-index:2;height:var(--h-tab);display:flex;position:sticky;top:0}.tab{padding:0 var(--sp-5);color:var(--text-2);cursor:pointer;font-weight:500;font-size:var(--fs-md);background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px}.tab:hover{color:var(--text-1)}.tab.active{color:var(--text-1);border-bottom-color:var(--text-1);font-weight:600}.tab-panel{padding:0 var(--sp-6) var(--sp-7)}.design-head{padding:var(--sp-5) 0 var(--sp-4);border-bottom:1px solid var(--border-c);gap:var(--sp-1);flex-direction:column;display:flex}.design-name{width:100%;height:var(--h-input);font-weight:600;font-size:var(--fs-lg);border-radius:var(--r-md);padding:0 var(--sp-3);margin:0 calc(-1 * var(--sp-3));box-shadow:none;background:0 0;border:1px solid #0000}.design-name:hover{border-color:var(--border-c)}.origin{gap:var(--sp-1);flex-wrap:wrap;display:flex}.link{color:var(--text-1);font-size:var(--fs-sm);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:0;text-decoration:underline}.inspector-section{padding:var(--sp-5) 0 var(--sp-6);border-bottom:1px solid var(--border-c);gap:var(--sp-4);flex-direction:column;display:flex}.inspector-section:last-child{border-bottom:0}.section-head h3{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);font-weight:700}.section-head .hint{margin-top:var(--sp-1)}.subhead{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-top:var(--sp-2);font-weight:700}.field{align-items:center;gap:var(--sp-3);min-height:var(--h-input);grid-template-columns:104px 1fr;display:grid}.field.stacked{gap:var(--sp-1);grid-template-columns:1fr}.field-label{color:var(--text-2);font-size:var(--fs-sm);gap:var(--sp-1);align-items:baseline;display:flex}.field-label em{color:var(--text-3);font-style:normal;font-size:var(--fs-xs)}.field-controls{align-items:center;gap:var(--sp-3);min-width:0;display:flex}.field-controls.bezier{grid-template-columns:repeat(4,1fr);display:grid}.field-controls.bezier input{width:100%;padding:0 var(--sp-2)}input[type=range]{min-width:0;accent-color:var(--text-1);flex:1;height:24px}input[type=number],input[type=text],input[type=search],select,textarea{height:var(--h-input);background:var(--surface);border:1px solid var(--border-c);border-radius:var(--r-md);padding:0 var(--sp-3);min-width:0;font-size:var(--fs-md);box-shadow:var(--shadow-sm);transition:border-color var(--t-fast), box-shadow var(--t-fast)}input[type=number].num{text-align:right;width:66px;font-family:var(--font-mono);font-size:var(--fs-sm)}select{cursor:pointer;width:100%}textarea{width:100%;height:auto;padding:var(--sp-3);resize:vertical;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.5}input[type=color]{width:32px;height:var(--h-input);border:1px solid var(--border-c);border-radius:var(--r-md);background:var(--surface);cursor:pointer;padding:2px}input.hex{width:92px;font-family:var(--font-mono);font-size:var(--fs-sm);text-transform:lowercase}.toggle{align-items:center;gap:var(--sp-3);cursor:pointer;color:var(--text-2);font-size:var(--fs-md);display:flex}.toggle.small{font-size:var(--fs-sm)}.toggle input{accent-color:var(--text-1);width:15px;height:15px;margin:0}.segmented{background:var(--muted-bg);border:1px solid var(--border-c);border-radius:var(--r-md);flex-wrap:wrap;gap:2px;padding:3px;display:flex}.seg{height:26px;padding:0 var(--sp-4);border-radius:var(--r-sm);color:var(--text-1);opacity:.72;cursor:pointer;font-weight:500;font-size:var(--fs-sm);white-space:nowrap;transition:background var(--t-fast), color var(--t-fast);background:0 0;border:0;flex:auto}.seg:hover,.seg.active{opacity:1}.seg.active{background:var(--surface);box-shadow:var(--shadow-sm);font-weight:600}.track{border:1px solid var(--border-c);border-radius:var(--r-lg);background:var(--surface);padding:var(--sp-3) var(--sp-4) var(--sp-4);gap:var(--sp-2);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.track-head{align-items:center;gap:var(--sp-1);min-height:26px;display:flex}.track-head strong{font-size:var(--fs-md);font-weight:600}.keyframes{gap:var(--sp-1);flex-direction:column;display:flex}.keyframe-row{align-items:center;gap:var(--sp-1);display:flex}.keyframe-row .field{flex:1;grid-template-columns:52px 1fr}.timeline{border-bottom:2px solid var(--border-2);height:22px;margin:2px 6px 6px;position:relative}.timeline.muted{opacity:.4}.tl-dot{background:var(--text-1);border:2px solid var(--surface);box-sizing:content-box;border-radius:50%;width:9px;height:9px;position:absolute;top:100%;translate:-50% -50%}.tl-dot i{font:10px var(--font-mono);color:var(--text-3);white-space:nowrap;font-style:normal;position:absolute;bottom:11px;left:50%;translate:-50%}.at-wrap{font-size:var(--fs-xs);color:var(--text-3);align-items:center;gap:2px;display:inline-flex}.at-wrap input.at{width:46px;height:26px;padding:0 var(--sp-1);text-align:right;font-family:var(--font-mono);font-size:var(--fs-xs)}.at-wrap input.at:disabled{opacity:.5}.add-prop{color:var(--text-2);box-shadow:none;border-style:dashed}.bezier-preview{color:var(--text-2);justify-content:center;display:flex}.code-tabs{gap:var(--sp-1);margin:var(--sp-5) 0 var(--sp-3);flex-wrap:wrap;display:flex}.code-tab{height:24px;padding:0 var(--sp-4);border-radius:var(--r-pill);border:1px solid var(--border-c);background:var(--surface);color:var(--text-2);cursor:pointer;font-size:var(--fs-xs);font-weight:600}.code-tab:hover{color:var(--text-1)}.code-tab.active{background:var(--primary-c);border-color:var(--primary-c);color:var(--primary-fg)}.code-actions{gap:var(--sp-3);margin:var(--sp-3) 0;display:flex}pre.code{margin:0 0 var(--sp-5);padding:var(--sp-6);background:var(--code-bg);color:var(--code-fg);border-radius:var(--r-lg);border:1px solid var(--border-c);font-size:var(--fs-sm);-moz-tab-size:2;tab-size:2;max-height:60vh;line-height:1.6;overflow:auto}pre.code.small{max-height:30vh}pre.code code{white-space:pre}.install{gap:var(--sp-3);margin-top:var(--sp-1);flex-direction:column;display:flex}.install-row{align-items:center;gap:var(--sp-3);grid-template-columns:56px 1fr auto;display:grid}.install-row code{background:var(--muted-bg);border:1px solid var(--border-c);border-radius:var(--r-md);height:28px;padding:0 var(--sp-3);font-size:var(--fs-sm);text-overflow:ellipsis;white-space:nowrap;align-items:center;display:flex;overflow:hidden}.install-label{font-size:var(--fs-sm);color:var(--text-2)}.app-footer{align-items:center;gap:var(--sp-5);padding:0 var(--sp-6);border-top:1px solid var(--border-c);background:var(--surface);font-size:var(--fs-xs);color:var(--text-2);min-width:0;display:flex}.app-footer a,.footer-link{color:var(--text-2);font:inherit;cursor:pointer;transition:color var(--t-fast);background:0 0;border:0;padding:0;text-decoration:none}.app-footer a:hover,.footer-link:hover{color:var(--text-1)}.footer-sep{background:var(--border-c);width:1px;height:12px}.footer-spacer{flex:1}.footer-meta{align-items:center;gap:var(--sp-2);font-family:var(--font-mono);white-space:nowrap;text-overflow:ellipsis;display:inline-flex;overflow:hidden}.footer-meta:before{content:"";background:var(--green-tx);border-radius:50%;flex:none;width:6px;height:6px}.app-footer>span:last-child a{color:var(--text-1);font-weight:500}.shortcuts{gap:var(--sp-4) var(--sp-6);margin:var(--sp-4) 0 var(--sp-1);grid-template-columns:auto 1fr;align-items:baseline;display:grid}.shortcuts dt{white-space:nowrap}.shortcuts dd{color:var(--text-2);margin:0}kbd{border-radius:var(--r-sm);border:1px solid var(--border-c);background:var(--muted-bg);color:var(--text-1);font-size:var(--fs-xs);padding:2px 6px;line-height:1.4;display:inline-block}.app-modal-backdrop{background:var(--overlay);padding:var(--sp-6);z-index:50;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);place-items:center;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.app-modal{background:var(--surface);border:1px solid var(--border-c);border-radius:var(--r-xl);width:min(880px,100%);max-height:90vh;box-shadow:var(--shadow-lg);grid-template-rows:auto 1fr;display:grid;overflow:hidden}.app-modal.narrow{width:min(460px,100%)}.modal-head{height:var(--h-panel-hd);padding:0 var(--sp-6);border-bottom:1px solid var(--border-c);justify-content:space-between;align-items:center;display:flex}.modal-head h2{font-size:var(--fs-lg);font-weight:600}.modal-body{padding:var(--sp-2) var(--sp-6) var(--sp-7);overflow:auto}.toast{left:50%;bottom:calc(var(--footer-h) + 16px);background:var(--primary-c);color:var(--primary-fg);padding:var(--sp-3) var(--sp-6);border-radius:var(--r-pill);font-weight:500;font-size:var(--fs-sm);opacity:0;pointer-events:none;z-index:100;box-shadow:var(--shadow-lg);transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,20px)}.toast.show{opacity:1;transform:translate(-50%)}.mobile-nav{display:none}@media (max-width:1100px){:root{--panel-w:236px;--right-w:316px}}@media (max-width:860px){#app{grid-template-rows:var(--topbar-h) 1fr var(--mobile-nav-h) var(--footer-h)}.workspace{grid-template-rows:1fr;grid-template-columns:1fr}.presets,.inspector,.stage-wrap{border:0;display:none}body[data-view=presets] .presets,body[data-view=design] .inspector,body[data-view=code] .inspector{display:flex}body[data-view=stage] .stage-wrap{display:grid}.mobile-nav{border-top:1px solid var(--border-c);background:var(--surface);padding:0 var(--sp-3);grid-template-columns:repeat(4,1fr);display:grid}.mobile-nav button{color:var(--text-2);font-weight:500;font-size:var(--fs-xs);background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex}.mobile-nav button svg{border-radius:var(--r-md);width:30px;height:30px;padding:6px}.mobile-nav button.active{color:var(--text-1);font-weight:600}.mobile-nav button.active svg{background:var(--muted-bg)}.tabs,.footer-meta,.footer-meta+.footer-sep,.footer-link,.footer-link+.footer-sep,.brand-sub,#btn-reset,.btn-label{display:none}#btn-export{width:var(--h-btn);padding:0}.topbar{padding:0 var(--sp-5);min-width:0}.topbar-actions{flex:none}.toast{bottom:calc(var(--mobile-nav-h) + var(--footer-h) + 12px)}}