@property --icon-size{syntax:"<percentage>";inherits:true;initial-value:18%}@property --accent-art{syntax:"<color>";inherits:true;initial-value:#a78bfa}@property --slider-fill{syntax:"<percentage>";inherits:true;initial-value:50%}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#08080a;--bg-noise:#0c0c0f;--surface-1:#111114;--surface-2:#17171b;--surface-3:#1d1d22;--surface-hi:#25252b;--border:#1f1f23;--border-soft:#18181c;--border-hi:#2c2c33;--text:#ededee;--text-dim:#9a9aa1;--text-faint:#5e5e66;--accent:#a78bfa;--accent-2:#7c5cf6;--accent-soft:#a78bfa1f;--accent-ring:#a78bfa59;--success:#6ee7b7;--warn:#fbbf24;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--shadow-card:0 1px 0 #ffffff0a inset, 0 4px 12px -2px #0006;--shadow-canvas:0 0 0 1px #ffffff0f, 0 30px 80px -20px #000000b3, 0 8px 30px -10px #00000080;--shadow-toolbar:0 1px 0 #ffffff0f inset, 0 12px 40px -8px #0009, 0 0 0 1px #ffffff0d;--motion-fast:.12s;--motion-med:.2s;--motion-slow:.24s;color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11", "ss01", "ss03";font-family:Inter,system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.5}*{box-sizing:border-box}.skip-link{z-index:100;background:var(--surface-hi);color:var(--text);border-radius:var(--r-md);transition:transform var(--motion-fast) ease;padding:8px 12px;font-size:13px;font-weight:600;text-decoration:none;position:absolute;top:8px;left:8px;transform:translateY(-200%)}.skip-link:focus{outline:2px solid var(--accent);outline-offset:2px;transform:translateY(0)}html,body{height:100dvh;margin:0;overflow:hidden}body{background:var(--bg);background-image:radial-gradient(80% 50% at 50% 0,#a78bfa0d,#0000 60%)}button{font-family:inherit}.app-shell{grid-template:"topbar topbar"52px"stage sidebar"1fr/1fr 380px;width:100%;height:100dvh;display:grid}@media (width<=1200px){.app-shell{grid-template-columns:1fr 340px}}.btn.drawer-toggle{display:none}.drawer-toggle svg line{transform-box:fill-box;transform-origin:50%;transition:transform var(--motion-med) cubic-bezier(.32, .72, .28, 1), opacity var(--motion-fast) ease}.drawer-toggle[aria-expanded=true] svg line:first-child{transform:translateY(6px)rotate(45deg)}.drawer-toggle[aria-expanded=true] svg line:nth-child(2){opacity:0;transform:scaleX(.2)}.drawer-toggle[aria-expanded=true] svg line:nth-child(3){transform:translateY(-6px)rotate(-45deg)}.drawer-backdrop{display:none}@media (width<=820px){.app-shell{grid-template-columns:1fr;grid-template-areas:"topbar""stage"}.btn.drawer-toggle{display:inline-flex}.sidebar{z-index:50;width:100vw;transition:transform var(--motion-med) cubic-bezier(.32, .72, .28, 1);scrollbar-width:none;border-left:none;flex-direction:column;padding-bottom:0;display:flex;position:fixed;inset:52px 0 0;transform:translate(100%);box-shadow:-8px 0 32px #00000073}.sidebar::-webkit-scrollbar{display:none}.drawer-open .sidebar{transform:translate(0)}.drawer-backdrop{opacity:0;pointer-events:none;transition:opacity var(--motion-med);z-index:49;background:#00000080;display:block;position:fixed;inset:52px 0 0}.drawer-open .drawer-backdrop{opacity:1;pointer-events:auto}.crop-marks,.dim-label,.dim-label-side{display:none}.stage-toolbar{padding:4px;bottom:12px}:is(.stage-toolbar .dims,.stage-toolbar .tb-divider:has(+.dims)){display:none}}.drawer-actions{display:none}.topbar{border-bottom:1px solid var(--border-soft);background:var(--surface-1);background-image:linear-gradient(#ffffff05,#0000);grid-area:topbar;align-items:center;gap:14px;padding:0 14px 0 16px;display:flex}.brand{border-right:1px solid var(--border-soft);align-items:center;gap:10px;height:100%;padding-right:14px;display:flex}.brand-mark{border-radius:6px;width:24px;height:24px;display:block;box-shadow:0 4px 10px -2px #7c5cf666}.brand-name{letter-spacing:.008em;white-space:nowrap;margin:0;font-size:12px;font-weight:600}.topbar .spacer{flex:1}.icon-btn{width:30px;height:30px;color:var(--text-dim);cursor:pointer;transition:background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}.icon-btn svg{width:15px;height:15px}.btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;transition:background var(--motion-fast), border-color var(--motion-fast);border-radius:7px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:500;display:inline-flex}.btn:hover{background:var(--surface-3);border-color:var(--border-hi)}.btn svg{width:14px;height:14px}.btn-primary{background:linear-gradient(180deg, #b89bff, var(--accent-2));color:#fff;border:1px solid #ffffff2e;font-weight:600;box-shadow:inset 0 1px #ffffff40,0 0 0 1px #7c5cf659,0 4px 14px -2px #7c5cf68c}.btn-primary:hover{background:linear-gradient(#c6acff,#8b6ffd)}.btn-primary.is-busy{opacity:.7;pointer-events:none}.btn-primary.has-error{background:linear-gradient(#f87171,#dc2626)}.save-status{color:var(--text-faint);letter-spacing:.018em;text-align:right;-webkit-user-select:none;user-select:none;min-width:60px;transition:color var(--motion-med);font-family:JetBrains Mono,monospace;font-size:11px}.save-status[data-state=saved]{color:var(--success)}.save-status[data-state=error]{color:var(--warn)}.export-group{align-items:stretch;display:inline-flex;position:relative}.export-go{border-right:1px solid #00000040;border-top-right-radius:0;border-bottom-right-radius:0;padding-right:10px}.export-chip{color:#fff;cursor:pointer;letter-spacing:.05em;transition:background var(--motion-fast);background:linear-gradient(#a98aff,#6c4cf2);border:1px solid #ffffff2e;border-left:none;border-radius:0 7px 7px 0;align-items:center;gap:4px;padding:0 8px 0 10px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;display:inline-flex;box-shadow:inset 0 1px #ffffff40,0 0 0 1px #7c5cf659,0 4px 14px -2px #7c5cf68c}.export-chip:hover{background:linear-gradient(#bca0ff,#8268ff)}.export-chip svg{opacity:.85;width:11px;height:11px}.format-menu{background:var(--surface-2);border:1px solid var(--border-hi);border-radius:var(--r-md);z-index:200;flex-direction:column;gap:4px;min-width:210px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 32px #00000080,inset 0 0 0 1px #ffffff0a}.format-menu[hidden]{display:none}.format-menu button{color:var(--text);text-align:center;cursor:pointer;transition:background var(--motion-fast);background:0 0;border:none;border-radius:5px;padding:6px 4px;font-family:inherit;font-size:12px;font-weight:500}.format-menu button:hover:not(:disabled){background:var(--surface-3)}.format-menu button:disabled{opacity:.4;cursor:not-allowed}.format-menu button[aria-pressed=true],.format-menu button[aria-checked=true]{background:var(--accent-soft);color:var(--accent)}.format-menu-section{grid-template-columns:repeat(auto-fit,minmax(38px,1fr));gap:2px;display:grid}.format-menu-divider{background:var(--border);height:1px;margin:2px 0}@media (width<=820px){.drawer-actions{padding:12px 14px max(12px, env(safe-area-inset-bottom));border-top:1px solid var(--border-soft);background:var(--surface-1);z-index:1;flex-shrink:0;gap:8px;margin-top:auto;display:flex;position:sticky;bottom:0}.drawer-actions .export-group{flex:1}.drawer-actions .export-go{flex:1;justify-content:center;padding-top:12px;padding-bottom:12px;font-size:14px}.drawer-actions .export-chip{padding-top:12px;padding-bottom:12px;font-size:11px}.drawer-actions .format-menu{top:auto;bottom:calc(100% + 6px)}.drawer-save{padding-top:12px;padding-bottom:12px}.drawer-save.is-saved{color:var(--success);background:#6ee7b72e;border-color:#6ee7b766}.drawer-save.is-failed{color:var(--warn);background:#fbbf242e;border-color:#fbbf2466}}.stage{background:var(--bg);background-image:radial-gradient(circle,#ffffff0a 1px,#0000 1.5px);background-position:50%;background-size:16px 16px;grid-area:stage;place-items:center;display:grid;position:relative;overflow:hidden}.stage:before{content:"";filter:blur(40px);pointer-events:none;background:radial-gradient(#a78bfa1a,#0000 60%);width:70%;height:70%;position:absolute;top:15%;left:15%}.canvas-area{place-items:center;display:grid;position:relative}.crop-marks{pointer-events:none;z-index:1;position:absolute;inset:-24px}.crop-marks span{width:14px;height:14px;color:var(--text-faint);position:absolute}.crop-marks span:before,.crop-marks span:after{content:"";background:currentColor;position:absolute}.crop-marks span:before{width:14px;height:1px}.crop-marks span:after{width:1px;height:14px}.crop-marks .tl{top:0;left:0}.crop-marks .tr{top:0;right:0}.crop-marks .tr:before,.crop-marks .tr:after{right:0}.crop-marks .bl{bottom:0;left:0}.crop-marks .bl:before,.crop-marks .bl:after{bottom:0}.crop-marks .br,.crop-marks .br:before,.crop-marks .br:after{bottom:0;right:0}.dim-label{color:var(--text-faint);letter-spacing:.04em;white-space:nowrap;font-family:JetBrains Mono,monospace;font-size:10px;position:absolute;top:-28px;left:50%;transform:translate(-50%)}.dim-label-side{transform-origin:50%;color:var(--text-faint);letter-spacing:.04em;font-family:JetBrains Mono,monospace;font-size:10px;position:absolute;top:50%;left:-34px;transform:translateY(-50%)rotate(-90deg)}.canvas-wrapper{box-shadow:var(--shadow-canvas);z-index:2;transition:border-radius var(--motion-med) ease;view-transition-name:canvas-wrapper;background:#1a1820;border-radius:4px;position:relative;overflow:hidden}::view-transition-old(canvas-wrapper){animation-duration:.28s;animation-timing-function:cubic-bezier(.32,.72,.28,1)}::view-transition-new(canvas-wrapper){animation-duration:.28s;animation-timing-function:cubic-bezier(.32,.72,.28,1)}.canvas-wrapper.is-rounded{border-radius:28px}.canvas-wrapper.is-zoom-animating{transition:width var(--motion-med) cubic-bezier(.32, .72, .28, 1), height var(--motion-med) cubic-bezier(.32, .72, .28, 1), border-radius var(--motion-med) ease}.canvas-frame.is-zoom-animating{transition:transform var(--motion-med) cubic-bezier(.32, .72, .28, 1)}.canvas-frame{transform-origin:0 0;contain:layout paint;position:absolute;top:0;left:0;overflow:hidden}.canvas-art{position:absolute;inset:0;overflow:hidden}.canvas-bg{background-position:50%;background-size:cover;position:absolute;inset:0}.canvas-overlay,.canvas-decor{pointer-events:none;position:absolute;inset:0}.canvas-text{z-index:2;flex-direction:column;padding:8%;display:flex;position:absolute;inset:0}.preview-title{letter-spacing:-.03em;text-wrap:balance;max-width:100%;margin:0;font-weight:600;line-height:1.05}.preview-sub{color:#fff9;letter-spacing:-.005em;margin:14px 0 0;font-weight:400;line-height:1.25}.canvas-icon{display:none}.canvas-icon img{object-fit:contain;width:100%;height:100%;display:block}.canvas-art.has-icon .canvas-icon{width:calc(var(--icon-size,18%) * .75);aspect-ratio:1;flex-shrink:0;margin-bottom:3.5%;display:block}.canvas-art[data-layout=centered-stack] .canvas-text,.canvas-art[data-layout=centered-title] .canvas-text{text-align:center;justify-content:center;align-items:center}.canvas-art[data-layout=centered-title] .preview-sub{display:none}.canvas-art[data-layout=left] .canvas-text{text-align:left;justify-content:center;align-items:flex-start}.canvas-art.has-icon[data-layout=left] .canvas-icon{width:calc(var(--icon-size,18%) * .55)}.canvas-art[data-layout=icon-title] .canvas-text{text-align:left;flex-direction:row;justify-content:flex-start;align-items:center;gap:4%}.canvas-art[data-layout=icon-title] .canvas-icon{width:var(--icon-size,18%);margin-bottom:0;display:block}.canvas-art[data-layout=icon-title] .text-block{flex:1;min-width:0}.canvas-art[data-layout=split] .canvas-text{text-align:left;justify-content:center;align-items:flex-start;padding-right:45%}.canvas-art[data-layout=split] .canvas-icon{aspect-ratio:auto;z-index:2;border-radius:14px;place-items:center;width:34%;margin:0;padding:8%;display:grid;position:absolute;inset:10% 8% 10% auto;overflow:hidden}.canvas-art[data-layout=split][data-card-style=vivid] .canvas-icon{background:radial-gradient(ellipse 100% 60% at 30% 0%, #ffffff38, transparent 60%), linear-gradient(170deg, color-mix(in oklab, var(--accent-art,#a78bfa) 55%, transparent) 0%, color-mix(in oklab, var(--accent-art,#a78bfa) 25%, transparent) 55%, #ffffff05 100%);box-shadow:inset 0 1px #ffffff38,inset 0 0 0 1px #ffffff1a,0 30px 80px -20px #0000008c}.canvas-art[data-layout=split][data-card-style=subtle] .canvas-icon{background:linear-gradient(160deg, color-mix(in oklab, var(--accent-art,#a78bfa) 14%, transparent), #ffffff04);box-shadow:inset 0 0 0 1px #ffffff0f,0 18px 50px -25px #0006}.canvas-art.has-icon[data-layout=split] .canvas-icon img{width:clamp(28%, calc(var(--icon-size,18%) * 4), 88%);height:clamp(28%, calc(var(--icon-size,18%) * 4), 88%);max-width:none;max-height:none}.canvas-art[data-layout=bottom-band] .canvas-text{text-align:left;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:8% 8% 7%}.canvas-art.has-icon[data-layout=bottom-band] .canvas-icon{width:clamp(5%, calc(var(--icon-size,18%) * .4), 11%);aspect-ratio:1;z-index:3;margin:0;position:absolute;top:7%;left:7%}.canvas-art[data-layout=bottom-band] .canvas-decor:before{content:"";background:linear-gradient(#0000,#0009);height:42%;position:absolute;bottom:0;left:0;right:0}.stage-toolbar{bottom:max(20px, env(safe-area-inset-bottom) + 12px);-webkit-backdrop-filter:blur(24px)saturate(180%);box-shadow:var(--shadow-toolbar);z-index:10;background:#101014c7;border-radius:11px;align-items:center;gap:2px;padding:5px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.stage-toolbar button{color:var(--text-dim);cursor:pointer;width:30px;height:30px;transition:background var(--motion-fast), color var(--motion-fast);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.stage-toolbar button:hover{color:var(--text);background:#ffffff0f}.stage-toolbar button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.stage-toolbar button svg{width:14px;height:14px}.stage-toolbar .tb-divider{background:#ffffff12;width:1px;height:18px;margin:0 4px}.stage-toolbar .zoom-display{color:var(--text);text-align:center;min-width:46px;padding:0 8px;font-family:JetBrains Mono,monospace;font-size:11px}.stage-toolbar .dims{color:var(--text-dim);letter-spacing:.027em;padding:0 8px;font-family:JetBrains Mono,monospace;font-size:11px}.stage-toolbar .dims .x{color:var(--text-faint);margin:0 2px}.stage-byline{right:16px;bottom:max(20px, env(safe-area-inset-bottom) + 12px);letter-spacing:.03em;-webkit-backdrop-filter:blur(24px)saturate(180%);box-shadow:var(--shadow-toolbar), inset 0 0 0 1px #a88bfa1f;z-index:10;background:#101014c7;border-radius:999px;align-items:center;gap:6px;padding:5px 10px 5px 6px;font-size:10px;font-weight:500;text-decoration:none;transition:background .26s cubic-bezier(.32,.72,.28,1),box-shadow .26s cubic-bezier(.32,.72,.28,1);display:inline-flex;position:absolute}.stage-byline-mark{border-radius:4px;width:14px;height:14px;transition:transform .32s cubic-bezier(.32,.72,.28,1);display:block}.stage-byline-label{color:var(--text-faint)}.stage-byline-name{background:linear-gradient(135deg,#c4b5fd,#8a5cf6);color:#0000;-webkit-background-clip:text;background-clip:text;margin-left:-1.5px;font-weight:600}.stage-byline:hover{box-shadow:var(--shadow-toolbar), inset 0 0 0 1px #a88bfa4d, 0 0 18px -4px #8a5cf666;background:#18181ce0}.stage-byline:hover .stage-byline-mark{transform:rotate(-6deg)scale(1.08)}@media (width<=820px){.stage-byline{gap:5px;padding:3px 8px 3px 5px;font-size:9px;top:12px;bottom:auto;right:12px}.stage-byline-mark{width:12px;height:12px}}.sidebar{background:var(--surface-1);border-left:1px solid var(--border-soft);grid-area:sidebar;overflow:hidden auto}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:4px}.sidebar::-webkit-scrollbar-track{background:0 0}.panel{border-bottom:1px solid var(--border-soft)}.panel-heading{font-size:inherit;font-weight:inherit;margin:0}.panel-head{cursor:pointer;-webkit-user-select:none;user-select:none;width:100%;color:inherit;text-align:left;transition:background var(--motion-fast);background:0 0;border:none;align-items:center;gap:10px;padding:14px 16px 12px;display:flex}.panel-head:hover{background:#ffffff04}.panel-head .ph-icon{width:14px;height:14px;color:var(--text-dim);flex-shrink:0}.panel-head .ph-title{text-transform:uppercase;letter-spacing:.064em;color:var(--text);flex:1;font-size:11px;font-weight:600}.panel-head .ph-chevron{width:14px;height:14px;color:var(--text-faint);transition:transform var(--motion-med) cubic-bezier(.32, .72, 0, 1)}.panel.collapsed .ph-chevron{transform:rotate(-90deg)}.panel-body{padding:0 16px 18px}.panel.collapsed .panel-body{display:none}.field{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.field:last-child{margin-bottom:0}.field>.lbl{color:var(--text-dim);letter-spacing:.018em;justify-content:space-between;align-items:center;gap:8px;font-size:11px;font-weight:500;display:flex}.field>.lbl .val{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto;font-family:JetBrains Mono,monospace;font-size:11px}.field input[type=text],.field input[type=number],.field select{background:var(--bg-noise);border:1px solid var(--border);color:var(--text);border-radius:var(--r-md);transition:border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease;outline:none;width:100%;padding:7px 10px;font-family:inherit;font-size:12px}.field input:focus,.field select:focus{border-color:var(--accent-ring);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface-2)}.field input[type=number]{-moz-appearance:textfield}.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.preset-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.preset-card{background:var(--bg-noise);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--motion-fast), background var(--motion-fast);text-align:left;padding:8px 8px 7px;position:relative}.preset-card:hover{border-color:var(--border-hi);background:var(--surface-2)}.preset-card[aria-pressed=true]{border-color:var(--accent-ring);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-ring) inset}.preset-frame{justify-content:center;align-items:center;width:100%;height:36px;margin-bottom:8px;display:flex}.preset-frame:before{content:"";background:var(--surface-3);border:1px solid var(--border);aspect-ratio:var(--ar,16 / 9);width:min(100%, calc(36px * var(--ar,16 / 9)));border-radius:3px;max-height:36px;display:block}.preset-card[aria-pressed=true] .preset-frame:before{border-color:var(--accent-ring);background:linear-gradient(135deg,#a78bfa66,#a78bfa1f)}.preset-label{color:var(--text-dim);font-size:10px;font-weight:500;line-height:1.2}.preset-card[aria-pressed=true] .preset-label{color:var(--text)}.preset-dim{color:var(--text-faint);margin-top:2px;font-family:JetBrains Mono,monospace;font-size:9px}.dim-row{grid-template-columns:1fr auto 1fr;align-items:end;gap:6px;margin-top:10px;display:grid}.dim-row .field{margin-bottom:0}.dim-lock{background:var(--bg-noise);border:1px solid var(--border);width:32px;height:32px;color:var(--text-dim);border-radius:var(--r-md);cursor:pointer;transition:background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);justify-content:center;align-items:center;display:inline-flex}.dim-lock:hover{color:var(--text);border-color:var(--border-hi)}.dim-lock[aria-pressed=true]{color:var(--accent);border-color:var(--accent-ring);background:var(--accent-soft)}.dim-lock svg{width:13px;height:13px}.segmented{background:var(--bg-noise);border:1px solid var(--border);border-radius:var(--r-md);grid-auto-columns:1fr;grid-auto-flow:column;margin-bottom:12px;padding:3px;display:grid;position:relative}.segmented button{color:var(--text-dim);cursor:pointer;transition:color var(--motion-fast), background var(--motion-fast);background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;gap:5px;padding:6px 8px;font-size:.885rem;font-weight:500;display:inline-flex}.segmented button svg{width:12px;height:12px}.segmented button:hover{color:var(--text)}.segmented button[aria-pressed=true],.segmented button[aria-selected=true]{background:var(--surface-3);color:var(--text);box-shadow:inset 0 1px #ffffff0d,0 1px 3px #0006}.layout-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.layout-thumb{background:var(--bg-noise);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;aspect-ratio:16/9;transition:border-color var(--motion-fast), transform var(--motion-fast);padding:0;position:relative;overflow:hidden}.layout-thumb:hover{border-color:var(--border-hi);transform:translateY(-1px)}.layout-thumb svg{width:100%;height:100%;display:block}.layout-thumb[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset, 0 6px 18px -4px #a78bfa59}.layout-thumb[aria-pressed=true]:after{content:"";background:var(--accent);width:10px;height:10px;box-shadow:0 0 0 2px var(--surface-1), 0 0 8px var(--accent-ring);border-radius:50%;position:absolute;top:6px;right:6px}.swatches{grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:12px;display:grid}.swatches-grad{grid-template-columns:repeat(3,1fr);gap:6px}.swatch{aspect-ratio:1;border-radius:var(--r-sm);cursor:pointer;transition:transform var(--motion-fast);border:1px solid #ffffff0f;padding:0;position:relative}.swatch:before{content:"";border-radius:inherit;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #0003}.swatch:hover{transform:scale(1.1)}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--surface-1), 0 0 0 3px var(--accent)}.swatch-grad{aspect-ratio:16/9;border-radius:var(--r-md)}.color-row{grid-template-columns:36px 1fr;gap:8px;display:grid}.color-swatch-input{border-radius:var(--r-md);border:1px solid var(--border);cursor:pointer;width:36px;height:32px;position:relative;overflow:hidden}.color-swatch-input .inner{pointer-events:none;border-radius:4px;position:absolute;inset:3px}.color-swatch-input input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.hex-input{background:var(--bg-noise);border:1px solid var(--border);color:var(--text);border-radius:var(--r-md);text-transform:uppercase;outline:none;width:100%;padding:7px 10px;font-family:JetBrains Mono,monospace;font-size:12px}.hex-input:focus{border-color:var(--accent-ring);box-shadow:0 0 0 3px var(--accent-soft)}.color-pair{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;display:grid}.color-pair>div .lbl{color:var(--text-dim);margin-bottom:6px;font-size:11px;font-weight:500}.slider{appearance:none;cursor:pointer;background:0 0;width:100%;height:18px}.slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) var(--slider-fill,50%), var(--border) var(--slider-fill,50%));border-radius:2px;height:4px}.slider::-moz-range-track{background:var(--border);border-radius:2px;height:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--accent);background:#fff;border-radius:50%;width:14px;height:14px;margin-top:-5px;box-shadow:0 1px 3px #0006}.slider::-moz-range-thumb{border:2px solid var(--accent);background:#fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #0006}.image-dropzone{aspect-ratio:16/9;background:var(--bg-noise);border:1px dashed var(--border-hi);border-radius:var(--r-lg);cursor:pointer;transition:border-color var(--motion-med), background var(--motion-med);place-items:center;display:grid;position:relative;overflow:hidden}.image-url-row{grid-template-columns:1fr 34px;gap:6px;margin-top:8px;display:grid}.image-url-input{background:var(--bg-noise);border:1px solid var(--border);color:var(--text);border-radius:var(--r-md);width:100%;transition:border-color var(--motion-fast), box-shadow var(--motion-fast);outline:none;padding:7px 10px;font-family:inherit;font-size:12px}.image-url-input::placeholder{color:var(--text-faint)}.image-url-input:focus{border-color:var(--accent-ring);box-shadow:0 0 0 3px var(--accent-soft)}.image-url-apply{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);min-height:32px;color:var(--text-dim);cursor:pointer;transition:background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);justify-content:center;align-items:center;padding:0;display:inline-flex}.image-url-apply:hover:not(:disabled){background:var(--surface-3);color:var(--text);border-color:var(--border-hi)}.image-url-apply:disabled{cursor:not-allowed}.image-url-apply:disabled:not(.is-busy){opacity:.4}.image-url-apply.is-busy{color:var(--accent)}.image-url-apply svg{width:14px;height:14px}.image-url-spin{animation:.8s linear infinite image-url-spin}@keyframes image-url-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.image-url-spin{animation:none}}.image-url-error{color:var(--warn);margin-top:6px;font-size:11px;line-height:1.4}.focal-chip{z-index:3;-webkit-backdrop-filter:blur(12px);color:#fff;letter-spacing:.02em;white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background var(--motion-fast), border-color var(--motion-fast);background:#0000008c;border:1px solid #ffffff47;border-radius:999px;place-items:center;padding:3px 10px;font-family:JetBrains Mono,monospace;font-size:10px;display:grid;position:absolute;top:8px;left:8px;box-shadow:0 1px 6px #00000059}.focal-chip:hover:not(:disabled),.focal-chip:focus-visible:not(:disabled){background:#000000bf;border-color:#fff6}.focal-chip:disabled{cursor:default}.focal-chip-value,.focal-chip-action{transition:opacity var(--motion-med) ease;grid-area:1/1}.focal-chip-action{opacity:0;letter-spacing:0;font-family:Inter,system-ui,sans-serif;font-weight:500}.focal-chip:hover:not(:disabled) .focal-chip-value,.focal-chip:focus-visible:not(:disabled) .focal-chip-value{opacity:0}.focal-chip:hover:not(:disabled) .focal-chip-action,.focal-chip:focus-visible:not(:disabled) .focal-chip-action{opacity:1}.image-dropzone:hover{border-color:var(--accent-ring);background:var(--surface-2)}.image-dropzone.dragover{border-color:var(--accent);background:var(--accent-soft);border-style:solid}.image-dropzone .empty{color:var(--text-faint);text-align:center;width:100%;font:inherit;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:6px;padding:16px;display:flex}.image-dropzone .empty .ico-circle{background:var(--surface-3);width:32px;height:32px;color:var(--text-dim);border-radius:50%;place-items:center;margin-bottom:2px;display:grid}.image-dropzone .empty .ico-circle svg{width:14px;height:14px}.image-dropzone .empty .t1{color:var(--text-dim);font-size:12px;font-weight:500}.image-dropzone .empty .t2{color:var(--text-faint);font-size:.808rem}.image-dropzone.has-image{border-style:solid;border-color:var(--border);cursor:default;padding:0}.image-preview{background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}.image-preview:after{content:"";pointer-events:none;background:linear-gradient(#0000 55%,#0000008c);position:absolute;inset:0}.image-actions{z-index:3;align-items:center;gap:6px;display:flex;position:absolute;bottom:8px;left:8px;right:8px}.image-actions .file-pill{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0000008c;border:1px solid #ffffff1a;border-radius:6px;flex:1;align-items:center;gap:6px;min-width:0;padding:4px 8px;display:flex}.image-actions .file-pill .fp-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:11px;font-weight:500;overflow:hidden}.image-actions .mini-btn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;cursor:pointer;width:26px;height:26px;transition:background var(--motion-fast);background:#0000008c;border:1px solid #ffffff1a;border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.image-actions .mini-btn:hover{background:#ffffff1f}.image-actions .mini-btn svg{width:13px;height:13px}@media (pointer:coarse){.image-actions .mini-btn{width:44px;height:44px}.image-actions .mini-btn svg{width:18px;height:18px}}.icon-slot-row{grid-template-columns:60px 1fr;align-items:stretch;gap:10px;display:grid}.icon-slot{aspect-ratio:1;background:var(--bg-noise);border:1px dashed var(--border-hi);border-radius:var(--r-md);cursor:pointer;transition:background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);place-items:center;display:grid;position:relative;overflow:hidden}.icon-slot:hover{border-color:var(--accent-ring);background:var(--surface-2)}.icon-slot.has-image{border-style:solid;border-color:var(--border);padding:16%}.icon-slot .empty{color:var(--text-faint);flex-direction:column;align-items:center;gap:4px;display:flex}.icon-slot .empty svg{width:14px;height:14px}.icon-slot img{object-fit:contain;width:100%;height:100%}.icon-slot input[type=file]{display:none}.icon-meta{flex-direction:column;justify-content:space-between;gap:6px;min-width:0;display:flex}.icon-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.885rem;font-weight:500;overflow:hidden}.icon-slot.is-empty~.icon-meta .icon-name{color:var(--text-faint)}.icon-actions{gap:6px;display:flex}.font-stack{grid-template-columns:1fr 1fr;gap:6px;display:grid}.font-card{background:var(--bg-noise);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;text-align:center;min-height:58px;transition:background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);flex-direction:column;justify-content:center;padding:10px 8px 8px;display:flex}.font-card:hover{border-color:var(--border-hi)}.font-card[aria-pressed=true]{border-color:var(--accent-ring);background:var(--accent-soft)}.font-card .fname{color:var(--text);white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:17px;line-height:1.1;overflow:hidden}.font-card .fmeta{color:var(--text-faint);text-transform:uppercase;letter-spacing:.067em;font-family:JetBrains Mono,monospace;font-size:9px;line-height:1.2}.font-search{position:relative}.font-search-input{align-items:center;display:flex;position:relative}.font-search-input .fs-icon{width:13px;height:13px;color:var(--text-faint);pointer-events:none;z-index:1;position:absolute;left:10px}.font-search-input input{background:var(--bg-noise);border:1px solid var(--border);width:100%;color:var(--text);border-radius:var(--r-md);transition:border-color var(--motion-fast);outline:none;padding:7px 10px 7px 30px;font-family:inherit;font-size:12px}.font-search-input input:focus{border-color:var(--accent-ring);box-shadow:0 0 0 3px var(--accent-soft)}.font-search-input.has-chip .fs-icon,.font-search-input.has-chip input{display:none}.font-chip{background:var(--accent-soft);border:1px solid var(--accent-ring);width:100%;color:var(--text);border-radius:var(--r-md);align-items:center;gap:4px;padding:4px 4px 4px 10px;font-size:13px;line-height:1;display:none}.font-search-input.has-chip .font-chip{display:flex}.font-chip[hidden]{display:none}.font-chip .chip-name{min-width:0;color:var(--text);white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.01em;flex:1;padding:4px 0;font-weight:500;overflow:hidden}.font-chip .chip-x{color:var(--text-dim);cursor:pointer;width:22px;height:22px;transition:background var(--motion-fast), color var(--motion-fast);background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.font-chip .chip-x svg{width:12px;height:12px}.font-chip .chip-x:hover{color:var(--text);background:#ffffff14}.font-dropdown{background:var(--surface-2);border:1px solid var(--border-hi);border-radius:var(--r-md);z-index:100;max-height:280px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 12px 32px #00000080,inset 0 0 0 1px #ffffff0a}.font-dropdown::-webkit-scrollbar{width:6px}.font-dropdown::-webkit-scrollbar-thumb{background:var(--surface-hi);border-radius:3px}.font-result{cursor:pointer;width:100%;color:inherit;font:inherit;text-align:left;transition:background var(--motion-fast);background:0 0;border:none;border-radius:5px;justify-content:space-between;align-items:center;padding:8px 10px;display:flex}.font-result:hover{background:var(--surface-3)}.font-result .fr-name{color:var(--text);letter-spacing:-.01em;font-size:15px;line-height:1.1}.font-result .fr-cat{color:var(--text-faint);text-transform:lowercase;flex-shrink:0;margin-left:8px;font-family:JetBrains Mono,monospace;font-size:10px}.font-result.no-results{cursor:default;color:var(--text-faint);text-align:center;padding:16px;font-size:12px}.ghost-btn{border:1px solid var(--border);width:100%;color:var(--text-dim);border-radius:var(--r-md);cursor:pointer;transition:background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);background:0 0;justify-content:center;align-items:center;gap:6px;padding:7px 10px;font-size:.885rem;font-weight:500;display:inline-flex}.ghost-btn:hover{color:var(--text);border-color:var(--border-hi);background:var(--surface-2)}.ghost-btn svg{width:12px;height:12px}.focal-dot{-webkit-backdrop-filter:blur(8px);cursor:grab;width:22px;height:22px;transition:box-shadow var(--motion-fast), transform var(--motion-fast);z-index:2;background:#a78bfa66;border:2px solid #fff;border-radius:50%;padding:0;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #0000004d,0 0 12px #a78bfa99}.focal-dot:hover{box-shadow:0 0 0 4px #0006,0 0 16px #a78bfacc}.focal-dot:active{cursor:grabbing;transform:translate(-50%,-50%)scale(.92)}.templates-save{margin-bottom:10px}.templates-empty{color:var(--text-faint);padding:8px 0;font-size:.885rem;line-height:1.5}.templates-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.template-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);transition:border-color var(--motion-fast);align-items:center;gap:6px;padding:6px 8px;display:flex}.template-card:hover{border-color:var(--border-hi)}.template-card.is-active{border-color:var(--accent-ring);background:var(--accent-soft)}.template-name{min-width:0;color:var(--text);text-align:left;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;transition:color var(--motion-fast);background:0 0;border:none;border-radius:4px;flex:auto;padding:4px 2px;font-size:.962rem;font-weight:500;overflow:hidden}.template-card.is-active .template-name,.template-name:hover{color:var(--accent)}.template-rename{background:var(--surface-3);border:1px solid var(--accent-ring);min-width:0;color:var(--text);border-radius:4px;outline:none;flex:auto;padding:4px 6px;font-size:.962rem;font-weight:500}.template-actions{flex-shrink:0;gap:2px;display:flex}.template-action{width:24px;height:24px;color:var(--text-faint);cursor:pointer;transition:background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);background:0 0;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;padding:0;display:inline-flex}.template-action:hover{color:var(--text);background:var(--surface-3);border-color:var(--border)}.template-action-danger:hover{color:#ef4444;border-color:#ef44444d}.template-action svg{width:13px;height:13px}.focal-dot:after{content:"";background:#fff;border-radius:50%;position:absolute;inset:6px}.image-actions[hidden],.image-preview[hidden],.focal-dot[hidden]{display:none}.modal-overlay{z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay[hidden]{display:none}.modal-backdrop{-webkit-backdrop-filter:blur(6px);background:#060609b3;position:absolute;inset:0}.modal-panel{background:var(--surface-1);border:1px solid var(--border-hi);border-radius:14px;flex-direction:column;display:flex;position:relative;box-shadow:0 30px 80px -10px #0009,inset 0 0 0 1px #ffffff0a}.modal-panel-icons{gap:10px;width:min(720px,92vw);height:min(640px,86vh);padding:14px}.modal-panel-narrow{gap:14px;width:min(440px,92vw);padding:18px}.modal-body{flex-direction:column;gap:12px;display:flex}.modal-field{color:var(--text-dim);flex-direction:column;gap:6px;font-size:.885rem;font-weight:500;display:flex}.modal-field input[type=text]{background:var(--surface-2);border:1px solid var(--border);color:var(--text);transition:border-color var(--motion-fast);border-radius:7px;outline:none;padding:8px 10px;font-size:13px}.modal-field input[type=text]:focus{border-color:var(--accent)}.modal-hint{color:var(--text-faint);margin:0;font-size:.885rem;line-height:1.5}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.modal-actions .ghost-btn{width:auto}.ghost-btn-primary{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-ring)}.ghost-btn-primary:hover{color:var(--accent);border-color:var(--accent);background:#a78bfa33}.ghost-btn-primary:disabled{opacity:.5;cursor:not-allowed}.ghost-btn-danger{color:#ef4444;background:#ef444414;border-color:#ef44444d}.ghost-btn-danger:hover{color:#ef4444;background:#ef444429;border-color:#ef4444}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-title{color:var(--text);align-items:center;gap:8px;font-size:13px;font-weight:600;display:inline-flex}.modal-count{color:var(--text-faint);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 6px;font-family:JetBrains Mono,monospace;font-size:10px}.icon-tabs{background:var(--surface-2);border:1px solid var(--border);overscroll-behavior-x:contain;scrollbar-width:none;border-radius:8px;gap:4px;padding:4px;display:flex;overflow-x:auto}.icon-tabs::-webkit-scrollbar{display:none}.icon-tab{min-width:0;color:var(--text-dim);cursor:pointer;white-space:nowrap;transition:background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);background:0 0;border:1px solid #0000;border-radius:6px;flex:auto;padding:6px 10px;font-size:12px;font-weight:500}.icon-tab:hover{background:var(--surface-3);color:var(--text)}.icon-tab[aria-selected=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-ring)}.icon-library-search{background:var(--bg);border:1px solid var(--border);width:100%;color:var(--text);border-radius:7px;outline:none;margin-bottom:8px;padding:7px 10px;font-size:12px}.icon-library-search:focus{border-color:var(--accent)}.icon-cell{cursor:pointer;width:100%;height:100%;transition:background var(--motion-fast), border-color var(--motion-fast);content-visibility:auto;contain-intrinsic-size:40px 40px;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-cell:hover{background:var(--surface-3);border-color:var(--border)}.icon-cell.is-selected{border-color:var(--accent);background:#7c5cf62e}.icon-cell img{pointer-events:none;width:18px;height:18px;display:block}.icon-library-empty{text-align:center;color:var(--text-faint);grid-column:1/-1;padding:24px 12px;font-size:12px}.icon-virt-scroller{overscroll-behavior:contain;contain:strict;scrollbar-width:none;border-radius:8px;flex:1;min-height:200px;position:relative;overflow-y:auto}.icon-virt-scroller::-webkit-scrollbar{display:none}.icon-virt-canvas{width:100%;position:relative}.icon-virt-row{display:grid;position:absolute;left:0;right:0}.modal-panel-icons .icon-cell img{width:20px;height:20px}button:focus-visible,[role=button]:focus-visible,[role=tab]:focus-visible,[role=menuitem]:focus-visible,[role=menuitemradio]:focus-visible,[role=option]:focus-visible,[role=radio]:focus-visible,[role=slider]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.field input:focus-visible,.field select:focus-visible,.hex-input:focus-visible,.font-search-input input:focus-visible{outline:none}@media (prefers-reduced-motion:reduce){:root{--motion-fast:0s;--motion-med:0s;--motion-slow:0s}html{scroll-behavior:auto}}