@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";.editor-panel{flex-direction:column;gap:12px;height:100%;display:flex}.editor-header{justify-content:space-between;align-items:center;display:flex}.editor-controls{align-items:center;gap:8px;display:flex}.editor-options{background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 14px;display:flex}.toggle-label{color:var(--text-muted);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;font-size:12px;display:flex}.toggle-label input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}.code-textarea{color:#ffffffd9;resize:none;background:#0000004d;border:1px solid #ffffff1a;border-radius:12px;outline:none;flex:1;min-height:300px;padding:16px;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:13px;line-height:1.6;transition:border-color .2s}.code-textarea:focus{border-color:#8b5cf680}.detected-badge{color:var(--accent);text-transform:capitalize;background:#8b5cf633;border:1px solid #8b5cf64d;border-radius:20px;padding:2px 8px;font-size:11px}.text-input{color:#fff;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:6px;outline:none;padding:4px 8px;font-size:12px}.text-input:focus{border-color:var(--accent)}.customizer{flex-direction:column;gap:16px;display:flex}.cust-section{flex-direction:column;gap:8px;display:flex}.cust-section.toggles-row{flex-flow:wrap;gap:16px}.cust-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:11px;font-weight:600}.theme-grid{flex-direction:column;gap:4px;display:flex}.theme-chip{cursor:pointer;border:1.5px solid #0000;border-radius:8px;align-items:center;gap:8px;padding:7px 10px;font-size:12px;font-weight:500;transition:all .15s;display:flex}.theme-chip:hover{opacity:.9;transform:translate(2px)}.theme-chip.active{box-shadow:0 0 0 1px #fff3}.theme-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.theme-type{opacity:.6;margin-left:auto;font-size:10px}.bg-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.bg-chip{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:8px;width:100%;transition:all .15s}.bg-chip:hover{transform:scale(1.1)}.bg-chip.active{box-shadow:0 0 0 2px var(--accent);border-color:#fff}.btn-group{flex-wrap:wrap;gap:4px;display:flex}.btn-opt:hover{color:#fff;background:#ffffff1a}.range-input{width:100%;accent-color:var(--accent);height:4px}.range-val{color:var(--text-muted);align-self:flex-end;font-size:11px}.toggle-label input[type=checkbox]{accent-color:var(--accent)}.export-panel{flex-direction:column;gap:16px;display:flex}.exp-section{flex-direction:column;gap:8px;display:flex}.preset-grid{flex-direction:column;gap:4px;display:flex}.preset-chip{color:var(--text-muted);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;justify-content:space-between;align-items:center;padding:7px 10px;font-size:12px;transition:all .15s;display:flex}.preset-chip:hover{color:#fff;background:#ffffff14}.preset-chip.active{border-color:var(--accent);color:#fff;background:#8b5cf633}.preset-size{opacity:.6;font-family:monospace;font-size:10px}.export-buttons{gap:8px;display:flex}.export-btn{cursor:pointer;border:none;border-radius:10px;flex:1;padding:10px;font-size:13px;font-weight:600;transition:all .2s}.btn-primary{color:#fff;background:linear-gradient(135deg,#7c3aed,#4f46e5);box-shadow:0 4px 15px #7c3aed66}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #7c3aed80}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:#fff;background:#ffffff14;border:1px solid #ffffff1f}.btn-secondary:hover{background:#ffffff24}.export-status{text-align:center;color:var(--accent);background:#8b5cf61a;border-radius:8px;padding:6px;font-size:13px}.shortcuts-hint{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.shortcuts-hint span{color:var(--text-muted);background:#ffffff0d;border:1px solid #ffffff14;border-radius:20px;padding:3px 8px;font-size:10px}.toggle-label{color:var(--text-muted);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}.toggle-label input{accent-color:var(--accent)}.btn-group{gap:4px;display:flex}.btn-opt{color:var(--text-muted);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;padding:4px 12px;font-size:12px;transition:all .15s}.btn-opt.active{background:var(--accent);border-color:var(--accent);color:#fff}.preview-canvas{justify-content:center;align-items:center;min-width:400px;display:inline-flex;position:relative}.preview-bg-overlay{border-radius:inherit;pointer-events:none;z-index:0;position:absolute;inset:0}.code-window{z-index:1;min-width:300px;max-width:900px;position:relative;overflow:hidden}.window-controls{border-bottom:1px solid;border-color:inherit;align-items:center;gap:6px;padding:12px 16px 8px;display:flex}.dot{border-radius:50%;width:12px;height:12px;display:inline-block}.dot.red{background:#ff5f57}.dot.yellow{background:#febc2e}.dot.green{background:#28c840}.win-filename{opacity:.7;margin-left:12px;font-size:12px}.filename-bar{border-bottom:1px solid;padding:8px 16px;font-family:JetBrains Mono,monospace;font-size:12px}.code-body{display:flex;overflow-x:auto}.line-numbers{text-align:right;-webkit-user-select:none;user-select:none;flex-shrink:0;padding:16px 0 16px 16px;font-size:13px;line-height:1.6}.line-num{padding-right:16px;font-family:JetBrains Mono,monospace}.code-content{flex:1;margin:0;padding:16px;font-size:13px;line-height:1.6;overflow:visible}.watermark{text-align:right;opacity:.4;padding:6px 16px;font-family:JetBrains Mono,monospace;font-size:10px}.preview-stage-wrapper{flex-direction:column;flex:1;min-height:0;display:flex}.stage-toolbar{background:#ffffff08;border-bottom:1px solid #ffffff0f;align-items:center;gap:8px;padding:8px 16px;display:flex}.zoom-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-size:16px;transition:background .15s;display:flex}.zoom-btn:hover{background:#ffffff1f}.zoom-label{color:var(--text-muted);text-align:center;min-width:40px;font-size:12px}.preview-stage{-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 20%,#7c3aed0a 0%,#0000 60%),radial-gradient(circle at 80% 20%,#4f46e50a 0%,#0000 60%),repeating-conic-gradient(#ffffff05 0% 25%,#0000 0% 50%) 0 0/24px 24px;border-radius:0 0 16px 16px;flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--accent:#8b5cf6;--accent2:#4f46e5;--bg:#0a0a0f;--surface:#ffffff0a;--border:#ffffff14;--text:#e8e8f0;--text-muted:#ffffff73;--panel-bg:#0c0c14d9}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,sans-serif;overflow:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 50% at 20% -10%,#7c3aed1f 0%,#0000 60%),radial-gradient(60% 40% at 80% 110%,#4f46e51a 0%,#0000 60%);position:fixed;inset:0}.app{z-index:1;flex-direction:column;height:100vh;display:flex;position:relative;overflow:hidden}.app-header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0a0a12e6;flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 20px;display:flex}.logo{align-items:center;gap:8px;display:flex}.logo-icon{background:linear-gradient(135deg,#8b5cf6,#4f46e5);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:18px}.logo-text{letter-spacing:-.02em;font-size:16px;font-weight:700}.header-actions{align-items:center;gap:8px;display:flex}.btn-ghost{color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:8px;padding:5px 10px;font-size:14px;transition:all .15s}.btn-ghost:hover:not(:disabled){color:#fff;border-color:#fff3}.btn-ghost:disabled{opacity:.3;cursor:default}.btn-randomize{color:var(--accent);cursor:pointer;background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:8px;padding:5px 14px;font-size:13px;font-weight:500;transition:all .2s}.btn-randomize:hover{background:#8b5cf640;transform:scale(1.02)}.app-main{flex:1;grid-template-columns:340px 1fr 280px;gap:0;min-height:0;display:grid}.left-panel,.right-panel{border-right:1px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.right-panel{border-right:none;border-left:1px solid var(--border)}.left-panel{padding:16px}.right-scroll{scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;flex-direction:column;flex:1;gap:16px;padding:16px;display:flex;overflow-y:auto}.center-panel{flex-direction:column;display:flex;overflow:hidden}.glass-panel{background:var(--panel-bg);border:1px solid var(--border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;padding:16px}.panel-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:2px;font-size:12px;font-weight:600}.select-input,.select-input-sm{color:#fff;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;outline:none;padding:5px 10px;font-size:12px;transition:border-color .15s}.select-input-sm{padding:3px 6px}.select-input:focus,.select-input-sm:focus{border-color:var(--accent)}.select-input option,.select-input-sm option{background:#1a1a2e}