@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";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-void: #07070a;--color-surface: #0c0c12;--color-surface-elevated: #12121a;--color-surface-glass: rgba(18, 18, 26, .7);--color-border: rgba(255, 255, 255, .06);--color-border-active: rgba(255, 255, 255, .12);--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: rgba(167, 139, 250, .4);--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{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-display);background:var(--color-void);color:var(--color-text);line-height:1.5;min-height:100vh;overflow-x:hidden}.app{display:flex;flex-direction:column;min-height:100vh;position:relative}.app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 50% at 20% -20%,rgba(167,139,250,.15) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 0%,rgba(129,140,248,.1) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 10% 100%,rgba(110,231,183,.08) 0%,transparent 50%);pointer-events:none;z-index:0}.app:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;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");opacity:.03;pointer-events:none;z-index:1}.header{position:sticky;top:0;z-index:100;background:linear-gradient(to bottom,var(--color-void),transparent);padding:var(--space-4) 0}.header-content{max-width:1800px;margin:0 auto;padding:0 var(--space-6);display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:var(--space-3)}.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{font-size:1rem;font-weight:600;letter-spacing:-.02em;background:linear-gradient(135deg,var(--color-text) 0%,var(--color-text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.github-link{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;height:36px;border-radius:var(--radius-md);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);font-size:13px;font-weight:500}.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{flex:1;display:flex;max-width:1800px;margin:0 auto;width:100%;padding:var(--space-6);gap:var(--space-6);position:relative;z-index:2}.sidebar{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--space-4);position:sticky;top:80px;height:fit-content;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-border-active) transparent}.control-panel{display:flex;flex-direction:column;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);box-shadow:0 0 0 1px #ffffff05 inset,0 20px 40px -20px #0006}.control-group{display:flex;flex-direction:column;gap:var(--space-2)}.control-label{font-size:.6875rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.1em;padding-left:2px}.control-select{width:100%;padding:var(--space-3) var(--space-4);font-size:.8125rem;font-family:var(--font-display);font-weight:500;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;outline:none;-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)}.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);outline:none;transition:all var(--duration-fast) var(--ease-out-expo)}.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{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-surface);border-radius:2px;cursor:pointer;outline:none}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));border-radius:50%;cursor:grab;transition:all var(--duration-fast) var(--ease-out-back);box-shadow:0 2px 8px var(--color-accent-glow)}.control-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 16px var(--color-accent-glow)}.control-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.control-slider::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));border:none;border-radius:50%;cursor:grab;transition:all var(--duration-fast) var(--ease-out-back)}.control-toggle{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:.8125rem;color:var(--color-text-secondary);-webkit-user-select:none;user-select:none;transition:color var(--duration-fast)}.control-toggle:hover{color:var(--color-text)}.control-toggle input[type=checkbox]{position:relative;width:38px;height:20px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-surface);border-radius:10px;cursor:pointer;transition:all var(--duration-normal) var(--ease-out-expo)}.control-toggle input[type=checkbox]:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--color-text-tertiary);border-radius:50%;transition:all var(--duration-normal) var(--ease-out-expo)}.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{transform:translate(18px);background:#fff;box-shadow:0 2px 4px #0003}.color-picker-wrapper{display:flex;gap:var(--space-2);align-items:center}.control-color{width:44px;height:36px;padding:3px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;overflow:hidden;transition:border-color var(--duration-fast)}.control-color:hover{border-color:var(--color-border-active)}.control-color::-webkit-color-swatch-wrapper{padding:0}.control-color::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.color-text{flex:1}.export-buttons{display:flex;gap:var(--space-2)}.export-btn{flex:1;display:flex;align-items:center;justify-content: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);position:relative;overflow:hidden}.export-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));opacity:0;transition:opacity var(--duration-normal)}.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));border-color:transparent;color:var(--color-void)}.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{position:relative;z-index:1}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preview-section{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;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);overflow:auto;position:relative}.preview-section:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,var(--color-border) 1px,transparent 1px);background-size:24px 24px;opacity:.5;pointer-events:none}.preview-container{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.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{max-width:1800px;margin:0 auto;width:100%;padding:0 var(--space-6) var(--space-6);position:relative;z-index:2}.code-input-container{width:100%;position:relative}.code-input{width:100%;min-height:180px;padding:var(--space-5);font-family:var(--font-mono);font-size:.875rem;line-height:1.7;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;outline:none;transition:all var(--duration-normal) var(--ease-out-expo);box-shadow:0 0 0 1px #ffffff05 inset,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;background:transparent!important;font-family:inherit}.code-content code{font-family:inherit;font-size:inherit;line-height:inherit}.code-content .shiki{background:transparent!important}.code-editor-wrapper{position:relative}.code-editor-overlay{color:transparent!important;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}.code-editor-overlay::selection{background:#a78bfa4d;color:transparent}.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:transparent}::-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{width:100%;position:static;max-height:none;flex-direction:row;flex-wrap:wrap}.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:nth-child(1){animation-delay:.05s}.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{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}