@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg-canvas:#fcfcfc;--bg-primary:#fff;--bg-secondary:#f4f4f5;--text-primary:#09090b;--text-secondary:#52525b;--text-muted:#a1a1aa;--border-color:#e4e4e7;--border-hover:#d4d4d8;--accent-primary:#18181b;--accent-primary-rgb:24, 24, 27;--accent-hover:#27272a;--accent-glow:#18181b1a;--json-key:var(--accent-primary);--json-string:var(--text-secondary);--json-number:var(--accent-primary);--json-boolean:var(--accent-primary);--json-null:var(--text-muted);--grid-color:#00000008;--block-bg:#ffffffb3;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px}[data-theme=dark]{--bg-canvas:#000;--bg-primary:#09090b;--bg-secondary:#121214;--text-primary:#fafafa;--text-secondary:#a1a1aa;--text-muted:#52525b;--border-color:#27272a;--border-hover:#3f3f46;--accent-primary:#fff;--accent-primary-rgb:255, 255, 255;--accent-hover:#f4f4f5;--accent-glow:#18181b1a;--block-bg:#0009}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-canvas);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,sans-serif;line-height:1.5}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-hover);background-clip:padding-box;border:2px solid #0000;border-radius:0}::-webkit-scrollbar-thumb:hover{background-color:var(--accent-primary)}button,input,select,textarea,.box{border-radius:0!important}.app-container{flex-direction:column;height:100vh;display:flex;overflow:hidden}.header{background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;height:64px;padding:0 32px;display:flex}.main-content{flex:1;display:flex;overflow:hidden}.editor-area{flex:1;padding:40px 48px;overflow-y:auto}.preview-panel{background-color:var(--bg-secondary);border-left:1px solid var(--border-color);flex-direction:column;display:flex}.resizer{cursor:col-resize;z-index:10;background-color:#0000;width:6px;margin-left:-3px;margin-right:-3px;transition:background-color .2s;position:relative}.resizer:hover,.resizer.active{background-color:var(--accent-primary)}.preview-content{color:var(--text-primary);white-space:pre-wrap;flex:1;padding:24px;font-family:JetBrains Mono,monospace;font-size:.85rem;line-height:1.6;overflow-y:auto}.parameters-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:16px;display:flex}.parameters-title{letter-spacing:.05em;color:var(--text-secondary);align-items:center;gap:12px;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:600;display:flex}.btn-outline{border:1px solid var(--border-color);height:40px;color:var(--text-primary);cursor:pointer;text-transform:uppercase;letter-spacing:.05em;background:0 0;justify-content:center;align-items:center;padding:0 20px;font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.btn-outline:hover{background:var(--accent-primary);color:var(--bg-primary);border-color:var(--accent-primary);box-shadow:0 4px 12px var(--accent-glow);transform:translateY(-2px)}.btn-outline:active{transform:translateY(0)scale(.98)}.param-block{background-color:var(--block-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-color);margin-bottom:var(--space-xl);transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}.param-block:before{content:"";background-color:var(--accent-primary);transform-origin:50%;z-index:10;width:3px;transition:transform .2s cubic-bezier(.4,0,.2,1);position:absolute;top:0;bottom:0;left:-1px;transform:scaleY(0)}.param-block:hover{border-color:var(--border-hover);transform:translateY(-1px)}.param-block:focus-within{border-color:var(--accent-primary)}.param-block:focus-within:before{transform:scaleY(1)}.param-header{border-bottom:1px solid var(--border-color);background-color:#0000;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.param-title-group{align-items:center;gap:16px;display:flex}.param-number{color:var(--text-muted);font-family:JetBrains Mono,monospace;font-size:.8rem}.param-name{color:var(--text-primary);text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:600;transition:color .2s}.param-block:focus-within .param-name{color:var(--accent-primary)}.param-type-badge{border:1px solid var(--border-color);height:22px;color:var(--text-secondary);text-transform:lowercase;align-items:center;padding:0 8px;font-family:JetBrains Mono,monospace;font-size:.7rem;display:flex}.param-body{padding:24px}.param-grid{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;display:grid}.param-row{margin-bottom:20px}.form-group{gap:var(--space-sm);flex-direction:column;display:flex}.form-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:4px;height:14px;font-size:.7rem;font-weight:600;display:flex}.required-asterisk{color:#ef4444}.form-input{background-color:rgba(var(--accent-primary-rgb), .05);border:1px solid var(--border-color);width:100%;min-height:40px;color:var(--text-primary);align-items:center;padding:8px 16px;font-family:inherit;font-size:.9rem;transition:all .2s;display:flex}.form-input:hover{background-color:var(--border-color)}.form-input:focus{background-color:var(--bg-primary);border-color:var(--accent-primary);outline:none}.advanced-rules-container .form-input{background-color:rgba(var(--accent-primary-rgb), .03);border:1px solid var(--border-color);width:100%;min-height:36px}.form-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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-position:right 12px center;background-repeat:no-repeat;background-size:14px;height:36px;padding-right:36px}.form-select option{background-color:var(--bg-primary);color:var(--text-primary)}.req-label{color:var(--text-secondary);cursor:pointer;letter-spacing:.05em;align-items:center;height:16px;font-size:.75rem;font-weight:600;display:flex}.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:36px;height:36px;padding:0;transition:all .2s;display:flex}.icon-btn svg{transition:transform .2s cubic-bezier(.4,0,.2,1)}.icon-btn:hover{color:var(--text-primary)}.icon-btn:hover svg{transform:scale(1.1)}.icon-btn:active svg{transform:scale(.9)}.nested-params{border-left:1px solid var(--border-color);margin-top:24px;padding-left:24px}.json-key{color:var(--json-key);font-weight:500}.json-string{color:var(--json-string)}.json-number{color:var(--json-number)}.json-boolean{color:var(--json-boolean)}.json-null{color:var(--json-null);opacity:.7;font-style:italic}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=768px){.app-container{height:100vh;height:-webkit-fill-available}.header{height:56px;padding:0 12px}.main-content{flex-direction:column;overflow:hidden}.editor-area{padding:16px 12px;width:100%!important}.preview-panel{border-left:none;flex:1;overflow:hidden;width:100%!important}.resizer{display:none}.param-grid{grid-template-columns:1fr;gap:16px}.parameters-header{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px;padding-bottom:12px}.param-block{margin-bottom:16px}.param-header{padding:10px 12px}.param-title-group{gap:8px}.param-body{padding:12px}.nested-params{margin-top:16px;padding-left:12px}.btn-outline{padding:6px 12px;font-size:.7rem}}