@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Fira+Code:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Inconsolata:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap";/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}.effect-neon{box-shadow:0 0 5px var(--effect-color-60),0 0 20px var(--effect-color-40),0 0 40px var(--effect-color-20),0 0 80px var(--effect-color-20),inset 0 0 20px var(--effect-color-20)!important;border:1px solid var(--effect-color-60)!important}.effect-holographic{position:relative;background-clip:padding-box!important;border:2px solid #0000!important}.effect-holographic:before{content:"";border-radius:inherit;background:linear-gradient(135deg,var(--effect-color)0%,#0ff 25%,#0f0 50%,#ff0 75%,var(--effect-color)100%);z-index:-1;opacity:.8;position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px}.effect-holographic:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(45deg,#0000,#ffffff1a,#0000);position:absolute;top:0;right:0;bottom:0;left:0}.effect-scanlines{position:relative;box-shadow:0 0 10px var(--effect-color-40),0 0 30px var(--effect-color-20)!important;border:1px solid var(--effect-color-40)!important}.effect-scanlines:after{content:"";border-radius:inherit;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,var(--effect-color-20)2px,var(--effect-color-20)4px);pointer-events:none;mix-blend-mode:overlay;position:absolute;top:0;right:0;bottom:0;left:0}.effect-cyberpunk{position:relative;box-shadow:0 0 10px var(--effect-color-60),0 0 30px var(--effect-color-40),inset 0 0 15px var(--effect-color-20)!important;border:1px solid var(--effect-color)!important}.effect-cyberpunk:before{content:"";border-top:3px solid var(--effect-color);border-left:3px solid var(--effect-color);border-top-left-radius:inherit;width:30px;height:30px;filter:drop-shadow(0 0 4px var(--effect-color));position:absolute;top:-1px;left:-1px}.effect-cyberpunk:after{content:"";border-bottom:3px solid var(--effect-color);border-right:3px solid var(--effect-color);border-bottom-right-radius:inherit;width:30px;height:30px;filter:drop-shadow(0 0 4px var(--effect-color));position:absolute;bottom:-1px;right:-1px}.effect-matrix{position:relative;box-shadow:0 0 15px var(--effect-color-40),0 0 40px var(--effect-color-20),inset 0 0 30px var(--effect-color-20)!important;border:1px solid var(--effect-color-60)!important}.effect-matrix:before{content:"";border-radius:inherit;background:linear-gradient(180deg,var(--effect-color-20)0%,transparent 30%,transparent 70%,var(--effect-color-20)100%);pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}.effect-matrix:after{content:"";border-radius:inherit;background-image:repeating-linear-gradient(90deg,transparent 0px,transparent 3px,var(--effect-color-20)3px,var(--effect-color-20)4px);opacity:.3;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}.effect-frosted{box-shadow:0 4px 30px #ffffff1a,0 0 60px var(--effect-color-20),0 0 100px var(--effect-color-20),inset 0 0 40px #ffffff0d!important;border:1px solid #fff3!important}.effect-frosted:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#ffffff1a,#0000,#ffffff0d);position:absolute;top:0;right:0;bottom:0;left:0}.effect-holographic,.effect-scanlines,.effect-cyberpunk,.effect-matrix,.effect-frosted{overflow:visible}.effect-holographic>*,.effect-scanlines>*,.effect-cyberpunk>*,.effect-matrix>*,.effect-frosted>*{z-index:1;position:relative}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.z-50{z-index:50}.block{display:block}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-\[var\(--radix-select-trigger-height\)\]{height:var(--radix-select-trigger-height)}.h-full{height:100%}.h-px{height:1px}.w-\[38px\]{width:38px}.w-full{width:100%}.min-w-\[8rem\]{min-width:8rem}.min-w-\[var\(--radix-select-trigger-width\)\]{min-width:var(--radix-select-trigger-width)}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.text-\[0\.6875rem\]{font-size:.6875rem}.text-\[0\.8125rem\]{font-size:.8125rem}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.whitespace-nowrap{white-space:nowrap}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.opacity-70{opacity:.7}.shadow-\[0_2px_8px_var\(--color-accent-glow\)\]{--tw-shadow:0 2px 8px var(--tw-shadow-color,var(--color-accent-glow));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.hover\:scale-\[1\.15\]:hover{scale:1.15}.hover\:shadow-\[0_4px_16px_var\(--color-accent-glow\)\]:hover{--tw-shadow:0 4px 16px var(--tw-shadow-color,var(--color-accent-glow));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-\[3px\]:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-105:active{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.active\:cursor-grabbing:active{cursor:grabbing}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[state\=checked\]\:translate-x-\[18px\][data-state=checked]{--tw-translate-x:18px;translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\[state\=checked\]\:bg-gradient-to-r[data-state=checked]{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.data-\[state\=checked\]\:shadow-\[0_2px_4px_rgba\(0\,0\,0\,0\.2\)\][data-state=checked]{--tw-shadow:0 2px 4px var(--tw-shadow-color,#0003);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.\[\&\>span\]\:line-clamp-1>span{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-void:#07070a;--color-surface:#0c0c12;--color-surface-elevated:#12121a;--color-surface-glass:#12121ab3;--color-border:#ffffff0f;--color-border-active:#ffffff1f;--color-text:#f4f4f5;--color-text-secondary:#71717a;--color-text-tertiary:#52525b;--color-accent-primary:#a78bfa;--color-accent-secondary:#818cf8;--color-accent-tertiary:#6ee7b7;--color-accent-glow:#a78bfa66;--color-success:#34d399;--color-error:#f87171;--font-display:"Space Grotesk",system-ui,sans-serif;--font-mono:"IBM Plex Mono","JetBrains Mono","Fira Code",monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-out-back:cubic-bezier(.34,1.56,.64,1);--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:16px}body{font-family:var(--font-display);background:var(--color-void);color:var(--color-text);min-height:100vh;line-height:1.5;overflow-x:hidden}.app{flex-direction:column;min-height:100vh;display:flex;position:relative}.app:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 50% at 20% -20%,#a78bfa26,#0000 50%),radial-gradient(60% 40% at 80% 0,#818cf81a,#0000 50%),radial-gradient(50% 30% at 10% 100%,#6ee7b714,#0000 50%);position:fixed;top:0;right:0;bottom:0;left:0}.app:after{content:"";opacity:.03;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");position:fixed;top:0;right:0;bottom:0;left:0}.header{z-index:100;background:linear-gradient(to bottom,var(--color-void),transparent);padding:var(--space-4)0;position:sticky;top:0}.header-content{max-width:1800px;padding:0 var(--space-6);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.logo{align-items:center;gap:var(--space-3);display:flex}.logo svg{color:var(--color-accent-primary);filter:drop-shadow(0 0 8px var(--color-accent-glow));transition:transform var(--duration-normal)var(--ease-out-back)}.logo:hover svg{transform:translate(4px)}.logo h1{letter-spacing:-.02em;background:linear-gradient(135deg,var(--color-text)0%,var(--color-text-secondary)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1rem;font-weight:600}.github-link{border-radius:var(--radius-md);height:36px;color:var(--color-text-secondary);background:var(--color-surface-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--color-border);transition:all var(--duration-normal)var(--ease-out-expo);justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:13px;font-weight:500;display:flex}.github-link svg{width:18px;height:18px}.github-link:hover{color:var(--color-text);border-color:var(--color-border-active);transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.main{width:100%;max-width:1800px;padding:var(--space-6);gap:var(--space-6);z-index:2;flex:1;margin:0 auto;display:flex;position:relative}.sidebar{gap:var(--space-4);scrollbar-width:thin;scrollbar-color:var(--color-border-active)transparent;flex-direction:column;flex-shrink:0;width:300px;height:fit-content;max-height:calc(100vh - 120px);display:flex;position:sticky;top:80px;overflow-y:auto}.control-panel{gap:var(--space-4);padding:var(--space-5);background:var(--color-surface-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-lg);border:1px solid var(--color-border);flex-direction:column;display:flex;box-shadow:inset 0 0 0 1px #ffffff05,0 20px 40px -20px #0006}.control-group{gap:var(--space-2);flex-direction:column;display:flex}.control-label{color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.1em;padding-left:2px;font-size:.6875rem;font-weight:600}.control-select{width:100%;padding:var(--space-3)var(--space-4);font-size:.8125rem;font-family:var(--font-display);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3)center;padding-right:var(--space-10);transition:all var(--duration-fast)var(--ease-out-expo);outline:none;font-weight:500}.control-select:hover{border-color:var(--color-border-active);background-color:var(--color-surface-elevated)}.control-select:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 3px var(--color-accent-glow)}.control-input{width:100%;padding:var(--space-3)var(--space-4);font-size:.8125rem;font-family:var(--font-mono);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:all var(--duration-fast)var(--ease-out-expo);outline:none}.control-input:hover{border-color:var(--color-border-active)}.control-input:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 3px var(--color-accent-glow)}.control-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-surface);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));cursor:grab;width:16px;height:16px;transition:all var(--duration-fast)var(--ease-out-back);box-shadow:0 2px 8px var(--color-accent-glow);border-radius:50%}.control-slider::-webkit-slider-thumb:hover{box-shadow:0 4px 16px var(--color-accent-glow);transform:scale(1.15)}.control-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.control-slider::-moz-range-thumb{background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));cursor:grab;width:16px;height:16px;transition:all var(--duration-fast)var(--ease-out-back);border:none;border-radius:50%}.control-toggle{align-items:center;gap:var(--space-3);cursor:pointer;color:var(--color-text-secondary);-webkit-user-select:none;user-select:none;transition:color var(--duration-fast);font-size:.8125rem;display:flex}.control-toggle:hover{color:var(--color-text)}.control-toggle input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-surface);cursor:pointer;width:38px;height:20px;transition:all var(--duration-normal)var(--ease-out-expo);border-radius:10px;position:relative}.control-toggle input[type=checkbox]:before{content:"";background:var(--color-text-tertiary);width:16px;height:16px;transition:all var(--duration-normal)var(--ease-out-expo);border-radius:50%;position:absolute;top:2px;left:2px}.control-toggle input[type=checkbox]:checked{background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary))}.control-toggle input[type=checkbox]:checked:before{background:#fff;transform:translate(18px);box-shadow:0 2px 4px #0003}.color-picker-wrapper{gap:var(--space-2);align-items:center;display:flex}.control-color{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;width:44px;height:36px;transition:border-color var(--duration-fast);padding:3px;overflow:hidden}.control-color:hover{border-color:var(--color-border-active)}.control-color::-webkit-color-swatch-wrapper{padding:0}.control-color::-webkit-color-swatch{border-radius:var(--radius-sm);border:none}.color-text{flex:1}.export-buttons{gap:var(--space-2);display:flex}.export-btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-4);font-size:.8125rem;font-weight:600;font-family:var(--font-display);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-normal)var(--ease-out-expo);flex:1;display:flex;position:relative;overflow:hidden}.export-btn:before{content:"";background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));opacity:0;transition:opacity var(--duration-normal);position:absolute;top:0;right:0;bottom:0;left:0}.export-btn:hover:not(:disabled){color:var(--color-text);border-color:var(--color-border-active);transform:translateY(-2px);box-shadow:0 8px 20px -8px #0006}.export-btn:disabled{opacity:.5;cursor:not-allowed}.export-btn-primary{background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:var(--color-void);border-color:#0000}.export-btn-primary:hover:not(:disabled){box-shadow:0 8px 20px -8px var(--color-accent-glow),0 0 0 1px #ffffff1a inset}.export-btn.success{background:var(--color-success);border-color:var(--color-success);color:var(--color-void)}.export-btn svg,.export-btn span{z-index:1;position:relative}.spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preview-section{min-width:0;padding:var(--space-12);background:radial-gradient(circle at 50% 50%,var(--color-surface-elevated)0%,transparent 70%),var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-border);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:auto}.preview-section:before{content:"";background-image:radial-gradient(circle,var(--color-border)1px,transparent 1px);opacity:.5;pointer-events:none;background-size:24px 24px;position:absolute;top:0;right:0;bottom:0;left:0}.preview-container{z-index:1;justify-content:center;align-items:center;display:flex;position:relative}.terminal-preview{animation:fadeInUp .6s var(--ease-out-expo)backwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.code-section{width:100%;max-width:1800px;padding:0 var(--space-6)var(--space-6);z-index:2;margin:0 auto;position:relative}.code-input-container{width:100%;position:relative}.code-input{width:100%;min-height:180px;padding:var(--space-5);font-family:var(--font-mono);background:var(--color-surface-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);resize:vertical;transition:all var(--duration-normal)var(--ease-out-expo);outline:none;font-size:.875rem;line-height:1.7;box-shadow:inset 0 0 0 1px #ffffff05,0 20px 40px -20px #0000004d}.code-input:hover{border-color:var(--color-border-active)}.code-input:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 3px var(--color-accent-glow),0 20px 40px -20px #0000004d}.code-input::placeholder{color:var(--color-text-tertiary)}.code-input::selection{background:var(--color-accent-glow)}.code-content pre{margin:0;padding:0;font-family:inherit;background:0 0!important}.code-content code{font-family:inherit;font-size:inherit;line-height:inherit}.code-content .shiki{background:0 0!important}.code-editor-wrapper{position:relative}.code-editor-overlay{caret-color:var(--color-accent-primary);word-wrap:break-word;overflow-wrap:break-word;-moz-tab-size:2;tab-size:2;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#0000!important}.code-editor-overlay::selection{color:#0000;background:#a78bfa4d}.terminal-preview.exporting .code-editor-overlay,.terminal-preview.exporting .window-title-input{display:none!important}.window-title-input{cursor:text;transition:opacity var(--duration-fast)}.window-title-input:hover{opacity:.8}.window-title-input:focus{opacity:1}.window-title-input::placeholder{color:inherit;opacity:.4}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border-active);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}@media(max-width:1200px){.main{flex-direction:column}.sidebar{flex-flow:wrap;width:100%;max-height:none;position:static}.control-panel{flex:1;min-width:280px}.export-buttons{width:100%}.preview-section{min-height:400px}}@media(max-width:768px){.header-content{padding:0 var(--space-4)}.main{padding:var(--space-4);gap:var(--space-4)}.code-section{padding:0 var(--space-4)var(--space-4)}.sidebar{flex-direction:column}.preview-section{padding:var(--space-6)}.export-buttons{flex-wrap:wrap}.export-btn{min-width:calc(50% - var(--space-1))}}@media(max-width:480px){.logo h1{font-size:.875rem}.control-panel,.preview-section{padding:var(--space-4)}}.control-panel .control-group{animation:slideInLeft .5s var(--ease-out-expo)backwards}.control-panel .control-group:first-child{animation-delay:50ms}.control-panel .control-group:nth-child(2){animation-delay:.1s}.control-panel .control-group:nth-child(3){animation-delay:.15s}.control-panel .control-group:nth-child(4){animation-delay:.2s}.control-panel .control-group:nth-child(5){animation-delay:.25s}.control-panel .control-group:nth-child(6){animation-delay:.3s}.control-panel .control-group:nth-child(7){animation-delay:.35s}.control-panel .control-group:nth-child(8){animation-delay:.4s}.control-panel .control-group:nth-child(9){animation-delay:.45s}.control-panel .control-group:nth-child(10){animation-delay:.5s}.control-panel .control-group:nth-child(11){animation-delay:.55s}.control-panel .control-group:nth-child(12){animation-delay:.6s}@keyframes slideInLeft{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}.export-buttons{animation:slideInUp .5s var(--ease-out-expo).4s backwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.code-section{animation:fadeIn .6s var(--ease-out-expo).3s backwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}