@import "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&family=Silkscreen:wght@700&display=swap";:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{box-sizing:border-box;flex-direction:column;width:100%;min-height:100svh;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{width:100%;overflow-x:hidden}body{letter-spacing:0;word-spacing:0;line-height:1.5}p+p{margin-top:2em}:root{--space-3xs:3px;--space-2xs:6px;--space-xs:9px;--space-sm:12px;--space-md:18px;--space-lg:24px;--space-xl:30px;--space-2xl:36px;--space-3xl:42px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--font-xs:12px;--font-sm:13px;--font-md:18px;--font-body:15px;--font-title:17px;--font-lg:24px;--font-xl:28px;--transition:all .2s cubic-bezier(.25, .1, .25, 1);--transition-quick:all .12s cubic-bezier(.25, .1, .25, 1);--font-mono:"SF Mono", "Monaco", "Menlo", monospace;--font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;--bg-page:#1c1c1e;--bg-header:#1c1c1e;--border-header:#ffffff14;--text-primary:#f5f5f7;--text-secondary:#98989d;--text-muted:#94949a;--text-label:#a1a1a6;--text-body:#d1d1d6;--text-strong:#f5f5f7;--bg-card:#2c2c2e;--bg-card-elevated:#3a3a3c;--bg-surface:#1c1c1e;--bg-tonal:#363638;--bg-tonal-hover:#3e3e40;--bg-input:#323234;--bg-input-focus:#3a3a3c;--border-card:none;--border-subtle:#ffffff0f;--card-shadow:0 2px 4px #0000000a, 0 8px 24px #0000000f, 0 24px 80px #00000014;--bg-btn-tonal:#ffffff14;--bg-btn-tonal-hover:#ffffff24;--text-btn:#d1d1d6;--text-btn-hover:#f5f5f7;--bg-btn-primary:#f5f5f7;--text-btn-primary:#1c1c1e;--chip-bg:#ffffff14;--chip-bg-hover:#ffffff24;--chip-text:#d1d1d6;--accent:#6366f1;--accent-bg:#6366f126;--accent-text:#a5b4fc;--error:#ff6b6b;--error-bg:#ff6b6b1f;--error-text:#ff6b6b;--workflow-bg:#6366f11a;--workflow-title:#f5f5f7;--ws-marker:#a88bfa80;--toast-bg:#2c2c2e;--toast-shadow:#0006;--text-input:#f5f5f7;--text-placeholder:#6e6e73;--toggle-track:#ffffff26;--toggle-track-active:#6366f1;--toggle-thumb:#f8f9fa;--step1:#5eead4;--step1-solid:#0b7f73;--step1-bg:#5eead41a;--step2:#a78bfa;--step2-solid:#7c3aed;--step2-bg:#a78bfa1a;--step3:#fb7185;--step3-solid:#e11d48;--step3-bg:#fb71851a;--step4:#fbbf24;--step4-solid:#d97706;--step4-bg:#fbbf241a;--step5:#06b6d4;--step5-solid:#0891b2;--step5-bg:#06b6d41a}@media (prefers-color-scheme:light){:root{--bg-page:#eeeef3;--bg-header:#faf9fd;--border-header:#d0d0d8;--text-primary:#1a1a1f;--text-secondary:#5e5e68;--text-muted:#686875;--text-label:#5a5a64;--text-body:#1a1a1f;--text-strong:#111114;--bg-card:#f8f7fc;--bg-card-elevated:#fbfafe;--bg-surface:#eeeef3;--bg-tonal:#edeef2;--bg-tonal-hover:#e0e1e8;--bg-input:#edeef2;--bg-input-focus:#f9fafd;--border-card:none;--border-subtle:#e8e8ef;--card-shadow:0 2px 4px #00000005, 0 8px 24px #00000008, 0 24px 80px #0000000d;--bg-btn-tonal:#edeef2;--bg-btn-tonal-hover:#e0e1e8;--text-btn:#2a2a30;--text-btn-hover:#111114;--bg-btn-primary:#1a1a1f;--text-btn-primary:#f0eff5;--chip-bg:#eaebf0;--chip-bg-hover:#dddee6;--chip-text:#1a1a1f;--accent:#4f46e5;--accent-bg:#4f46e51a;--accent-text:#3730a3;--error:#dc2626;--error-bg:#dc262612;--error-text:#dc2626;--workflow-bg:#6366f114;--workflow-title:#1a1a1f;--ws-marker:#6366f173;--toast-bg:#1a1a1f;--toast-shadow:#0003;--text-input:#1a1a1f;--text-placeholder:#7a7a84;--toggle-track:#c8c8d0;--toggle-track-active:#4f46e5;--toggle-thumb:#fbfafd;--step1:#0b7f73;--step1-solid:#0b7f73;--step1-bg:#0b7f7314;--step2:#7c3aed;--step2-solid:#7c3aed;--step2-bg:#7c3aed14;--step3:#e11d48;--step3-solid:#e11d48;--step3-bg:#e11d4814;--step4:#fbbf24;--step4-solid:#fbbf24;--step4-bg:#fbbf2414;--step5:#06b6d4;--step5-solid:#06b6d4;--step5-bg:#06b6d414}}.skip-link{z-index:2000;background:var(--bg-btn-primary);color:var(--text-btn-primary);border-radius:var(--radius-full);font-weight:600;font-size:var(--font-sm);padding:10px 20px;text-decoration:none;position:absolute;top:-100%;left:16px}.skip-link:focus{top:8px}body{font-family:var(--font-sans);min-height:100vh;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#0d1b2a 0%,#1b2a4a 40%,#2a1a3e 100%) fixed;flex-direction:column;width:100%;margin:0;padding:0;display:flex}body:after{content:"";pointer-events:none;z-index:2;opacity:.121;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:182px;animation:1.5s step-end infinite grainShift;position:fixed;inset:0}@keyframes grainShift{0%{background-position:0 0}25%{background-position:-30px 15px}50%{background-position:10px -20px}75%{background-position:25px 5px}to{background-position:0 0}}.header{width:100%;max-width:1024px;padding:var(--space-2xl) 40px 0 calc(40px + var(--space-lg));box-sizing:border-box;z-index:1;isolation:isolate;background:0 0;border-bottom:none;flex-direction:column;align-items:flex-start;gap:0;margin:0 auto;display:flex;position:relative;overflow:visible}.header:before{content:"";pointer-events:none;background:radial-gradient(at 20%,#5ea0e61f 0%,#0000 50%),radial-gradient(at 80% 20%,#a78bfa1a 0%,#0000 40%),radial-gradient(at 60% 80%,#2dd4bf14 0%,#0000 45%);width:200%;height:200%;animation:28s ease-in-out infinite iceShimmer;position:absolute;top:-50%;left:-50%}.header:after{content:"";pointer-events:none;background-image:radial-gradient(1px 1px at 15% 25%,#ffffffb3 0%,#0000 100%),radial-gradient(1px 1px at 75% 15%,#d4a853cc 0%,#0000 100%),radial-gradient(1.5px 1.5px at 45% 70%,#fff9 0%,#0000 100%),radial-gradient(1px 1px at 85% 65%,#a78bfab3 0%,#0000 100%),radial-gradient(1px 1px at 30% 85%,#d4a85399 0%,#0000 100%),radial-gradient(1.5px 1.5px at 60% 35%,#ffffff80 0%,#0000 100%),radial-gradient(1px 1px at 10% 60%,#5ea0e6b3 0%,#0000 100%),radial-gradient(1px 1px at 90% 40%,#fffc 0%,#0000 100%);animation:14s ease-in-out infinite sparkle;position:absolute;inset:0}.header h1{letter-spacing:-5.68px;z-index:1;background:linear-gradient(135deg,#5ea0e6,#a78bfa,#d4a853,#5ea0e6) 0 0/300% 300%;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px #5ea0e666)drop-shadow(0 0 40px #a78bfa33);-webkit-background-clip:text;background-clip:text;margin:0 0 0 -3px;font-family:Silkscreen,monospace;font-size:56px;font-weight:700;line-height:1;animation:26.25s cubic-bezier(.65,0,.35,1) infinite jewelShift;position:relative}@keyframes jewelShift{0%,to{background-position:0%}50%{background-position:100%}}@keyframes iceShimmer{0%,to{opacity:.8;transform:rotate(0)scale(1)}50%{opacity:1;transform:rotate(10deg)scale(1.1)}}@keyframes sparkle{0%,to{opacity:.5}25%{opacity:1}50%{opacity:.3}75%{opacity:.9}}.header p{color:#0000;z-index:1;background:linear-gradient(90deg,#a7b0d266,#d4a85399,#a7b0d266) 0 0/200% 100%;text-transform:lowercase;padding-left:var(--space-xs);-webkit-background-clip:text;background-clip:text;margin-top:-5px;font-family:Quicksand,sans-serif;font-size:18px;font-weight:700;line-height:21px;animation:26.25s cubic-bezier(.65,0,.35,1) infinite jewelShift;position:relative}.start-page{padding:24px var(--space-2xl) var(--space-2xl);z-index:1;background:0 0;flex:1;justify-content:center;align-items:flex-start;width:100%;min-height:0;display:flex;position:relative;overflow:hidden}.start-page:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(at 20% 30%,#ec489940 0%,#0000 40%),radial-gradient(at 80% 70%,#6366f140 0%,#0000 40%),radial-gradient(at 40% 80%,#10b98133 0%,#0000 45%),radial-gradient(at 70% 20%,#eab30840 0%,#0000 40%),radial-gradient(at 10% 60%,#a855f733 0%,#0000 45%);width:100vw;height:100vh;animation:84s ease-in-out infinite partyShimmer;position:fixed;top:0;left:0}.start-page:after{content:"";pointer-events:none;z-index:-1;background-image:radial-gradient(2px 2px at 15% 25%,#fffc 0%,#0000 100%),radial-gradient(1.5px 1.5px at 75% 15%,#ec4899e6 0%,#0000 100%),radial-gradient(2px 2px at 45% 70%,#6366f1cc 0%,#0000 100%),radial-gradient(1.5px 1.5px at 85% 35%,#10b981b3 0%,#0000 100%),radial-gradient(2px 2px at 30% 85%,#eab308d9 0%,#0000 100%),radial-gradient(1.5px 1.5px at 60% 35%,#a855f7cc 0%,#0000 100%),radial-gradient(2px 2px at 10% 60%,#0ea5e9cc 0%,#0000 100%),radial-gradient(1.5px 1.5px at 90% 40%,#ec4899b3 0%,#0000 100%),radial-gradient(2px 2px,#10b98199 0%,#0000 100%);width:100vw;height:100vh;animation:28s ease-in-out infinite partySparkle;position:fixed;top:0;left:0}@keyframes partyGradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes partyShimmer{0%,to{opacity:.8;filter:blur();transform:rotate(0)scale(1)}25%{opacity:1;filter:blur(30px);transform:rotate(90deg)scale(1.1)}50%{opacity:.85;filter:blur(60px);transform:rotate(180deg)scale(.95)}75%{opacity:.9;filter:blur(30px);transform:rotate(270deg)scale(1.05)}}@keyframes partySparkle{0%,to{opacity:.4;transform:scale(1)}25%{opacity:1;transform:scale(1.3)}50%{opacity:.5;transform:scale(.8)}75%{opacity:.9;transform:scale(1.2)}}.start-container{gap:var(--space-lg);z-index:2;flex-direction:column;width:100%;max-width:800px;display:flex;position:relative}.start-textarea-wrap{width:100%;position:relative}.start-sample-btn{border-radius:var(--radius-full);font-family:var(--font-sans);color:#fff6;cursor:pointer;letter-spacing:.3px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:3;background:#ffffff0f;border:1px solid #ffffff1f;align-items:center;gap:5px;padding:7px 16px 7px 12px;font-size:11px;font-weight:500;transition:background .2s,border-color .2s,color .2s,transform .2s;display:flex;position:absolute;bottom:16px;right:16px}.start-sample-btn:hover{color:#fffc;background:#ffffff1c;border-color:#ec489966;transform:translateY(-1px)}.start-sample-btn:active{transform:translateY(0)}.start-textarea{width:100%;height:350px;font-family:var(--font-sans);color:var(--text-input);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid #ec489999;border-radius:16px;font-weight:400;line-height:1.6;transition:all .3s;box-shadow:0 8px 32px #6366f133,inset 0 0 20px #ffffff0d;background:#ffffff14!important}.start-textarea:focus-visible{border-color:#ec4899cc;border-radius:16px;outline:none;animation:7s ease-in-out infinite textareaGlow;box-shadow:0 16px 40px #6366f14d,0 0 40px #ec489933,inset 0 0 20px #ffffff14,0 0 0 2px #6366f166;background:#ffffff1f!important}@keyframes textareaGlow{0%,to{box-shadow:0 16px 40px #6366f14d,0 0 40px #ec489933,inset 0 0 20px #ffffff14,0 0 0 2px #6366f166}50%{box-shadow:0 16px 40px #ec489959,0 0 60px #6366f140,inset 0 0 20px #ffffff1a,0 0 0 2px #ec489980}}.start-textarea.preview-textarea{font-size:20px}.start-textarea::placeholder{color:#ffffff80}.start-submit-btn{letter-spacing:.5px;color:#f5f5f7;cursor:pointer;font-size:18px;font-weight:700;font-family:var(--font-sans);text-shadow:0 2px 10px #0000004d;background:linear-gradient(135deg,#ec4899 0%,#6366f1 25%,#0ea5e9 50%,#10b981 75%,#ec4899 100%) 0 0/300% 300%;border:none;border-radius:16px;align-self:center;padding:18px 56px;transition:all .4s;animation:42s infinite partyButtonGradient;position:relative;overflow:visible;box-shadow:0 0 30px #ec489966,0 0 60px #6366f14d,0 20px 50px #10b98133,inset 0 0 20px #ffffff26}@keyframes partyButtonGradient{0%,to{background-position:0%}50%{background-position:100%}}.start-submit-btn:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(135deg,#ec489999,#6366f199,#10b98199,#ec489999) 0 0/300% 300%;border-radius:16px;animation:42s infinite partyButtonBorder;position:absolute;inset:-2px}@keyframes partyButtonBorder{0%,to{background-position:0%}50%{background-position:100%}}.start-submit-btn:hover:not(:disabled){letter-spacing:1.2px;transform:translateY(-6px)scale(1.05);box-shadow:0 0 40px #ec489980,0 0 80px #6366f166,0 30px 60px #10b98140,inset 0 0 20px #fff3}.start-submit-btn:active:not(:disabled){transform:translateY(-2px)scale(.98);box-shadow:0 0 20px #ec489966,0 0 40px #6366f140,inset 0 0 20px #ffffff1a}.start-submit-btn:focus-visible{outline-offset:4px;outline:3px solid #ec4899cc}.start-submit-btn:disabled{opacity:.3;cursor:not-allowed;animation:none;box-shadow:0 0 15px #6366f11a,inset 0 0 10px #ffffff0d}.transform-demo-strip{pointer-events:none;z-index:0;justify-content:center;display:flex;position:absolute}.demo-pos-1{opacity:.5;bottom:4%;left:50%}.demo-pos-2{transform-origin:100% 100%;opacity:.225;bottom:18%;right:24px;transform:scale(.85)}.demo-pos-3{transform-origin:0 100%;opacity:.175;bottom:8%;left:24px;transform:scale(.8)}.demo-pos-4{transform-origin:50%;opacity:.15;bottom:14%;right:18%;transform:scale(.75)}.transform-demo{flex-direction:column;align-items:center;gap:10px;transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.4,0,.2,1),filter 1s cubic-bezier(.4,0,.2,1);display:flex}.transform-demo.fading{opacity:0;filter:blur(4px);transform:scale(.94)translateY(8px)}.demo-box-single{background:0 0;border:none;min-width:260px;min-height:80px;padding:14px 20px}.demo-text{font-family:var(--font-mono);color:#ffffff4d;white-space:pre;margin:0;font-size:12px;line-height:1.7}.demo-text-output{color:#ffffff8c}.char-new{animation:1s ease-out forwards charSettle}@keyframes charSettle{0%{color:var(--char-hot,#ff503ce6)}to{color:#ffffff8c}}.demo-cursor{color:#fff6;animation:.6s step-end infinite demoCursorBlink;display:inline}@keyframes demoCursorBlink{50%{opacity:0}}.demo-label{letter-spacing:.5px;color:#ffffff4d;white-space:nowrap;opacity:0;font-size:12px;font-weight:700;transition:opacity .6s}.demo-label-visible{opacity:1}.main{width:100%;max-width:1024px;padding:20px 40px var(--space-lg);box-sizing:border-box;z-index:1;flex-direction:column;flex:1;gap:16px;min-height:0;margin:0 auto;display:flex;position:relative}.detections-panel{background:var(--bg-card);padding:20px var(--space-lg);border-radius:var(--radius-lg);text-align:left;box-shadow:var(--card-shadow);flex-direction:column;display:flex}.detections-header{margin-bottom:var(--space-md);flex-wrap:wrap;justify-content:space-between;align-items:baseline;display:flex}.detections-panel h2{font-size:var(--font-md);color:var(--text-secondary);margin:0;font-weight:500}.transforms-subhead{width:100%;font-family:Quicksand,sans-serif;font-size:var(--font-sm);color:var(--text-secondary);margin:2px 0 0;font-weight:400}.transform-hint{font-size:var(--font-sm);color:var(--text-secondary);margin:0 0 var(--space-sm);text-transform:none;font-weight:400;line-height:1.5}.transform-group{border-radius:var(--radius-md);padding:var(--space-sm) 16px;border:1px solid var(--border-subtle);margin-bottom:var(--space-xs);background:#3a3a3c40}.transform-group-header{justify-content:space-between;gap:var(--space-2xs);flex-wrap:wrap;align-items:center;margin-bottom:10px;display:flex}.transform-group-legend{background:linear-gradient(100deg, var(--accent-text) 0%, var(--text-secondary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:15px;font-weight:700}.group-header-title{align-items:center;gap:8px;min-width:0;display:flex}.group-header-controls{align-items:center;gap:var(--space-2xs);flex-shrink:0;display:flex}.reverse-toggle{border:1px solid var(--border-subtle);background:var(--bg-tonal);border-radius:var(--radius-full);color:var(--text-muted);cursor:pointer;transition:var(--transition-quick);align-items:center;gap:4px;padding:2px 9px 2px 7px;font-size:10px;font-weight:600;display:flex}.reverse-toggle:hover{color:var(--text-secondary);border-color:var(--border-default)}.reverse-toggle.active{color:var(--accent-text);background:#6366f126;border-color:#6366f173}.reverse-toggle.active svg{transform:rotate(180deg)}.reverse-toggle svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.preview-toggle{background:var(--bg-tonal);border-radius:var(--radius-sm);flex-shrink:0;gap:2px;padding:2px;display:flex}.preview-toggle-btn{border-radius:var(--radius-xs);color:var(--text-muted);cursor:pointer;transition:var(--transition-quick);white-space:nowrap;background:0 0;border:none;padding:2px 9px;font-size:10px;font-weight:600}.preview-toggle-btn:hover{color:var(--text-secondary)}.preview-toggle-btn.active{background:var(--bg-card);color:var(--accent-text);box-shadow:0 1px 2px #00000026}.transform-group-body{grid-template-columns:1fr 256px;align-items:start;gap:10px;display:grid}.group-preview-lines{opacity:0;border-left:1px solid var(--border-subtle);height:72px;padding-left:var(--space-sm);transition:opacity .25s;overflow:hidden}.group-preview-lines.visible{opacity:1}.group-preview-lines.hover{transition:none}.preview-line-label{color:var(--accent-text);white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:10px;font-weight:700;overflow:hidden}.group-preview-line{font-family:var(--font-mono);color:var(--text-secondary);white-space:pre;text-overflow:ellipsis;font-size:11px;line-height:1.6;overflow:hidden}.transform-btn.preview-hovered{background:var(--accent-bg);color:var(--accent-text)}.transform-buttons{flex-wrap:wrap;gap:8px;display:flex}.transform-btn{background:var(--chip-bg);border-radius:var(--radius-full);font-size:var(--font-sm);cursor:pointer;transition:var(--transition);color:var(--chip-text);border:none;padding:8px 18px;font-weight:600;position:relative}.transform-btn:hover{background:var(--chip-bg-hover)}.transform-btn.danger:hover{background:var(--error-bg);color:var(--error-text)}.transform-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.transform-btn:disabled,.transform-btn.disabled{opacity:.45;cursor:not-allowed}.transform-btn:disabled:hover,.transform-btn.disabled:hover{background:var(--chip-bg);color:var(--chip-text);opacity:.45}.transform-btn.has-subtitle{flex-direction:column;align-items:center;gap:1px;line-height:1.5;display:flex}.btn-subtitle{opacity:.6;font-size:10px;font-weight:400}.btn-step-nums{pointer-events:none;flex-direction:column;align-items:center;gap:2px;display:flex;position:absolute;top:3px;right:4px}.btn-step-num{border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:9px;font-weight:700;line-height:1;display:flex}.btn-step-num.step-color-1{color:#5eead4;background:#5eead438}.btn-step-num.step-color-2{color:#a78bfa;background:#a78bfa38}.btn-step-num.step-color-3{color:#fb7185;background:#fb718538}.btn-step-num.step-color-4{color:#fbbf24;background:#fbbf2438}.btn-step-num.step-color-5{color:#06b6d4;background:#06b6d438}@media (width<=640px){.transform-group-body{grid-template-columns:1fr}.group-preview-lines{display:none}}.workflow-chain{background:var(--workflow-bg);border-radius:var(--radius-md);margin-top:var(--space-sm);padding:14px 16px;animation:.4s cubic-bezier(.22,1,.36,1) chainAppear}.workflow-header{margin-bottom:var(--space-2xs);justify-content:space-between;align-items:center;gap:12px;display:flex}.workflow-title{font-size:var(--font-sm);color:var(--workflow-title);text-transform:none;margin:0;font-weight:600}.delete-all-btn{border-radius:var(--radius-full);cursor:pointer;color:#6b6375b3;font-size:var(--font-xs);transition:var(--transition);justify-content:center;align-items:center;gap:var(--space-3xs);white-space:nowrap;background:0 0;border:1px solid #0000;padding:6px 14px;font-weight:600;line-height:1;display:flex}.delete-all-btn:hover{color:#6b6375cc;background:#6b637514;border-color:#6b637533}.delete-all-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.delete-all-btn:active{opacity:.8}.copy-link-btn{background:linear-gradient(135deg, var(--accent), #7c3aed);border-radius:var(--radius-full);cursor:pointer;font-size:var(--font-xs);color:#fff;transition:var(--transition);border:none;padding:5px 14px;font-weight:600}.copy-link-btn:hover{opacity:.85}.copy-link-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.workflow-list{gap:var(--space-2xs);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.workflow-step{background:var(--bg-card);border-radius:var(--radius-sm);font-size:var(--font-sm);transition:var(--transition);border:none;align-items:center;gap:10px;padding:10px 14px;animation:.6s cubic-bezier(.34,1.56,.64,1) stepPop;display:flex}.workflow-step.step-color-1{animation:.6s cubic-bezier(.34,1.56,.64,1) stepPop,.7s ease-out stepGlow1}.workflow-step.step-color-2{animation:.3s ease-out stepFadeIn,.8s ease-out stepRing2}.workflow-step.step-color-3{animation:.3s ease-out stepFadeIn,.8s ease-out stepRing3}.workflow-step.step-color-4{animation:.3s ease-out stepFadeIn,.8s ease-out stepRing4}.workflow-step.step-color-5{animation:.3s ease-out stepFadeIn,.8s ease-out stepRing5}.step-number{border-radius:6px;min-width:auto;padding:2px 8px;font-size:11px;font-weight:700;line-height:1.5}.workflow-step.step-color-1 .step-number{background:var(--step1-solid);color:#f0fdf9}.workflow-step.step-color-2 .step-number{background:var(--step2-solid);color:#f5f3ff}.workflow-step.step-color-3 .step-number{background:var(--step3-solid);color:#fff1f2}.workflow-step.step-color-4 .step-number{background:var(--step4-solid);color:#1f2937}.workflow-step.step-color-5 .step-number{background:var(--step5-solid);color:#0c1117}.step-transform{color:var(--text-strong);flex:1;font-weight:500}.remove-step-btn{border-radius:var(--radius-full);cursor:pointer;color:#6b637580;font-size:var(--font-xs);width:24px;height:24px;transition:var(--transition);justify-content:center;align-items:center;gap:var(--space-3xs);background:0 0;border:1px solid #0000;padding:6px;font-weight:600;line-height:1;display:flex}.remove-step-btn:hover{color:#6b6375cc;background:#6b637514;border-color:#6b637533}.remove-step-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.add-hint{font-size:var(--font-xs);color:var(--text-muted);margin-top:4px;margin-bottom:0}.url-hint{font-size:var(--font-xs);color:var(--text-secondary);margin-top:auto;padding-top:10px}.invisibles-checkbox{display:none}.invisibles-toggle-label{align-items:center;gap:var(--space-sm);cursor:pointer;font-size:var(--font-sm);color:var(--text-secondary);-webkit-user-select:none;user-select:none;font-weight:500;display:flex;position:relative}.invisibles-toggle-label:before{content:"";background:var(--toggle-track);border-radius:var(--radius-full);flex-shrink:0;width:38px;height:24px;transition:background .25s;display:inline-block;position:relative}.invisibles-toggle-label:after{content:"";background:var(--toggle-thumb);border-radius:var(--radius-full);width:18px;height:18px;transition:left .25s;position:absolute;top:50%;left:3px;transform:translateY(-50%);box-shadow:0 1px 4px #00000026}.invisibles-checkbox:checked+.invisibles-toggle-label:before{background:var(--toggle-track-active)}.invisibles-checkbox:checked+.invisibles-toggle-label:after{left:17px}.invisibles-checkbox:focus-visible+.invisibles-toggle-label:before{outline:2px solid var(--accent);outline-offset:2px}.controller-group{flex-direction:column;align-items:center;gap:0;display:flex}.controller-label{color:var(--text-muted);font-size:12px;font-weight:700}.layout-controller{background:var(--bg-tonal);border-radius:var(--radius-sm);gap:4px;padding:4px;display:flex}.layout-btn{border-radius:var(--radius-xs);cursor:pointer;width:32px;height:28px;color:var(--text-secondary);transition:var(--transition-quick);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.layout-btn:hover{color:var(--text-primary)}.layout-btn.active{background:var(--bg-card);color:var(--accent);box-shadow:0 1px 3px #0000001f}.layout-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.layout-btn svg{display:block}.data-section{background:var(--bg-card);border-radius:var(--radius-lg);min-height:0;box-shadow:var(--card-shadow);flex-direction:column;flex:1;display:flex;overflow:hidden}.data-section-header{justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-md);border-bottom:1px solid var(--border-subtle);display:flex}.header-left,.header-right-controllers{align-items:center;gap:var(--space-sm);display:flex}.data-panels{flex:1;grid-template-rows:1fr;grid-template-columns:1fr;min-height:0;display:grid}.data-panels--horizontal:has(.preview-panel+.preview-panel){grid-template-rows:1fr;grid-template-columns:1fr 1fr}.data-panels--vertical:has(.preview-panel+.preview-panel){grid-template-rows:1fr 1fr;grid-template-columns:1fr}.data-section .preview-panel{box-shadow:none;border:none;border-radius:0}.data-section .data-panels--horizontal:has(.preview-panel+.preview-panel) .preview-panel:first-child{border-right:1px solid var(--border-subtle)}.data-section .data-panels--vertical:has(.preview-panel+.preview-panel) .preview-panel:first-child{border-bottom:1px solid var(--border-subtle)}.preview-panel{background:var(--bg-card);padding:var(--space-md);border-radius:var(--radius-lg);min-width:0;box-shadow:var(--card-shadow);flex-direction:column;display:flex}.preview-header{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.preview-header h2{font-size:var(--font-body);color:var(--text-strong);text-transform:none;margin:0;font-weight:600}.no-filters-hint{color:var(--text-muted);font-weight:400}.sample-btn{background:var(--bg-tonal);border-radius:var(--radius-full);font-size:var(--font-xs);color:var(--text-secondary);cursor:pointer;transition:var(--transition-quick);border:none;align-items:center;gap:5px;padding:4px 10px;font-weight:600;display:flex}.sample-btn:hover{background:var(--bg-tonal-hover);color:var(--text-primary)}.sample-btn svg{flex-shrink:0;transition:transform .3s}.sample-btn:hover svg{transform:rotate(180deg)}.header-buttons{gap:var(--space-2xs);align-items:center;display:flex}.copy-header-btn,.clear-btn{background:var(--bg-btn-tonal);border-radius:var(--radius-full);cursor:pointer;font-size:var(--font-xs);transition:var(--transition);color:var(--text-btn);border:none;padding:6px 16px;font-weight:600}.copy-header-btn:hover{background:var(--bg-btn-tonal-hover);color:var(--text-btn-hover)}.clear-btn:hover{background:var(--error-bg);color:var(--error-text)}.copy-header-btn:focus-visible,.clear-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.textarea-wrapper{flex:1;min-height:0;display:flex}.textarea-inner{flex:1;min-width:0;display:flex;position:relative}.textarea-inner textarea{flex:1;min-width:0}.textarea-copy-btn{z-index:2;background:var(--bg-card-elevated);border:none;border-left:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);border-radius:0 var(--radius-md) 0 var(--radius-sm);font-size:var(--font-xs);color:var(--text-secondary);cursor:pointer;padding:4px 10px;font-weight:600;transition:background .15s,color .15s;position:absolute;top:0;right:0}.textarea-copy-btn:hover{background:var(--bg-tonal-hover);color:var(--text-primary)}.textarea-dimmed .preview-textarea{opacity:.35;pointer-events:none}.textarea-inner textarea{width:100%;height:100%}.line-gutter{text-align:right;background:var(--bg-input);border-radius:var(--radius-md) 0 0 var(--radius-md);-webkit-user-select:none;user-select:none;border-right:1px solid var(--border-subtle);flex-direction:column;min-width:32px;padding:14px 0;display:flex;overflow:hidden}.line-number{font-family:var(--font-mono);font-size:var(--font-xs);color:var(--text-muted);opacity:.5;padding:0 8px;line-height:1.6}.line-gutter+.textarea-inner .preview-textarea{border-radius:0 var(--radius-md) var(--radius-md) 0}.preview-textarea{border-radius:var(--radius-md);font-size:var(--font-xs);font-family:var(--font-mono);resize:none;background:var(--bg-input);min-height:120px;color:var(--text-input);border:none;padding:14px 16px;line-height:1.6;transition:box-shadow .2s,background .2s;overflow:hidden}.preview-textarea::placeholder{font-family:var(--font-sans);color:var(--text-muted);opacity:.7;font-size:20px;font-weight:400}.preview-textarea:focus-visible{background:var(--bg-input-focus);outline:none;box-shadow:0 0 0 3px #6366f140}.preview-textarea:placeholder-shown:focus-visible{box-shadow:0 0 0 2px var(--bg-input-focus), 0 0 0 4px #6366f180, 0 0 12px #6366f14d, 0 0 20px #5eead433, 0 0 30px #fb718526, 0 0 40px #a78bfa1a;background-clip:padding-box;border:2px solid #0000;animation:3s ease-in-out infinite rainbowGlow}@keyframes rainbowGlow{0%,to{box-shadow:0 0 0 2px var(--bg-input-focus), 0 0 0 4px #6366f180, 0 0 12px #6366f14d, 0 0 20px #5eead433, 0 0 30px #fb718526}33%{box-shadow:0 0 0 2px var(--bg-input-focus), 0 0 0 4px #5eead480, 0 0 12px #5eead44d, 0 0 20px #fb718533, 0 0 30px #fbbf2426}66%{box-shadow:0 0 0 2px var(--bg-input-focus), 0 0 0 4px #fb718580, 0 0 12px #a78bfa4d, 0 0 20px #6366f133, 0 0 30px #5eead426}}.size-fit .line-gutter{max-height:30vh;overflow:hidden}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.size-fit .preview-textarea{min-height:unset;max-height:30vh;overflow-y:auto}.size-all .preview-textarea{overflow:hidden}.size-controller{background:var(--bg-tonal);border-radius:var(--radius-sm);gap:4px;padding:4px;display:flex}.zero-state{height:100%;min-height:200px;color:var(--text-secondary);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px 20px;animation:.4s fadeIn;display:flex}.zero-state svg{color:var(--accent);opacity:.4;margin-bottom:16px;display:block}.zero-state-text{font-size:var(--font-body);color:var(--text-secondary);margin:0;font-weight:400}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.whitespace-overlay{pointer-events:none;font-size:var(--font-xs);font-family:var(--font-mono);letter-spacing:normal;white-space:pre-wrap;word-wrap:break-word;color:#0000;visibility:hidden;border:none;padding:14px 16px;line-height:1.6;position:absolute;inset:0;overflow:hidden}.whitespace-overlay.visible{visibility:visible}.whitespace-overlay pre{font:inherit;white-space:inherit;word-wrap:inherit;letter-spacing:inherit;color:#0000;text-align:left;text-rendering:auto;margin:0;padding:0}.ws-overlay-marker{color:var(--ws-marker);margin-left:1px}.ws-tab-marker{position:relative}.ws-tab-marker:before{content:"→";color:var(--ws-marker);position:absolute;top:50%;left:0;transform:translateY(calc(-50% - 1px))}.toast{background:var(--toast-bg);color:#f4f5f7;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-size:var(--font-sm);box-shadow:0 4px 20px var(--toast-shadow);z-index:1000;opacity:0;visibility:hidden;font-weight:600;transition:opacity .3s,visibility .3s,transform .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast[data-visible=true]{opacity:1;visibility:visible;animation:.3s cubic-bezier(0,0,.2,1) slideUp}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@keyframes chainAppear{0%{opacity:0;transform:translateY(7px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes stepPop{0%{opacity:0;transform:scale(.88)translateY(4px)}55%{opacity:1;transform:scale(1.04)translateY(-1px)}75%{transform:scale(.99)translateY(0)}to{transform:scale(1)translateY(0)}}@keyframes stepGlow1{0%{box-shadow:none}35%{box-shadow:0 0 0 3px #5eead42e,0 6px 24px #5eead426}to{box-shadow:none}}@keyframes stepGlow2{0%{box-shadow:none}35%{box-shadow:0 0 0 3px #a78bfa2e,0 6px 24px #a78bfa26}to{box-shadow:none}}@keyframes stepGlow3{0%{box-shadow:none}35%{box-shadow:0 0 0 3px #fb71852e,0 6px 24px #fb718526}to{box-shadow:none}}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes stepRing2{0%{box-shadow:0 0 #a78bfa40}50%{box-shadow:0 0 0 3px #a78bfa1f}to{box-shadow:none}}@keyframes stepRing3{0%{box-shadow:0 0 #fb718540}50%{box-shadow:0 0 0 3px #fb71851f}to{box-shadow:none}}@keyframes stepRing4{0%{box-shadow:0 0 #fbbf2440}50%{box-shadow:0 0 0 3px #fbbf241f}to{box-shadow:none}}@keyframes stepRing5{0%{box-shadow:0 0 #06b6d440}50%{box-shadow:0 0 0 3px #06b6d41f}to{box-shadow:none}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=768px){.header{padding-block:20px;padding-inline:20px}.header h1{font-size:36px}.main{padding:16px}.data-panels--horizontal:has(.preview-panel+.preview-panel){grid-template-columns:1fr}.controller-group:has(.layout-controller){display:none}}@media (height<=720px){.transform-demo-strip{opacity:0;filter:blur(8px);pointer-events:none;transition:opacity .6s,filter .6s}}@media (height>=721px){.transform-demo-strip{opacity:1;filter:blur();transition:opacity .6s,filter .6s}}