:root{--bg-app: oklch(12% .02 260 / .85);--bg-panel: oklch(100% 0 0 / .03);--bg-element: oklch(100% 0 0 / .08);--bg-element-hover: oklch(100% 0 0 / .12);--bg-element-active: oklch(100% 0 0 / .16);--bg-input: oklch(100% 0 0 / .1);--border-color: oklch(100% 0 0 / .15);--text-primary: #e0e0e0;--text-secondary: #aaaaaa;--text-muted: #666666;--accent-color: oklch(70% .15 200);--accent-hover: oklch(75% .18 200);--success-color: oklch(70% .2 145);--error-color: oklch(65% .2 25);--warning-color: oklch(75% .15 85);--font-sans: "Inter", system-ui, sans-serif;--font-mono: "Fira Code", monospace;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}@media (prefers-color-scheme: light){:root{--bg-app: oklch(98% 0 0 / .85);--bg-panel: oklch(0% 0 0 / .03);--bg-element: oklch(0% 0 0 / .08);--bg-element-hover: oklch(0% 0 0 / .12);--bg-element-active: oklch(0% 0 0 / .16);--bg-input: oklch(0% 0 0 / .06);--border-color: oklch(0% 0 0 / .12);--text-primary: oklch(20% 0 0);--text-secondary: oklch(40% 0 0);--text-muted: oklch(60% 0 0)}}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);line-height:1.5;height:100vh;overflow:hidden}#root{height:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-element);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--bg-element-hover)}.playground{display:grid;grid-template-rows:auto 1fr;height:100vh;overflow:hidden}.playground__header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-panel);border-bottom:1px solid var(--border-color);backdrop-filter:blur(12px)}.playground__back{color:var(--text-secondary);text-decoration:none;font-size:.9rem;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:all .15s}.playground__back:hover{color:var(--text-primary);background:var(--bg-element-hover)}.playground__title{font-size:1.1rem;font-weight:600;margin:0}.playground__main{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border-color);overflow:hidden}.panel{display:flex;flex-direction:column;background:var(--bg-app);overflow:hidden}.panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-panel);border-bottom:1px solid var(--border-color);font-size:.85rem;font-weight:500;color:var(--text-secondary);letter-spacing:.05em}.panel__content{flex:1;overflow:auto;padding:var(--spacing-md)}.panel__content--no-padding{padding:0}.editor{display:flex;flex-direction:column;height:100%}.editor__input{flex:1;width:100%;padding:var(--spacing-md);background:var(--bg-input);border:none;color:var(--text-primary);font-family:var(--font-mono);font-size:1rem;line-height:1.6;resize:none}.editor__input:focus{outline:none}.editor__input::placeholder{color:var(--text-muted)}.ast-viewer{font-family:var(--font-mono);font-size:.85rem}.ast-node{margin-left:var(--spacing-md);border-left:1px solid var(--border-color);padding-left:var(--spacing-sm)}.ast-node__header{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) 0;cursor:pointer}.ast-node__toggle{width:16px;color:var(--text-muted);font-size:.75rem}.ast-node__type{color:var(--accent-color);font-weight:500}.ast-node__value{color:var(--text-secondary)}.ast-node__children{display:none}.ast-node__children--expanded{display:block}.output{font-family:var(--font-mono);font-size:.9rem}.output__section{margin-bottom:var(--spacing-md)}.output__label{font-size:.75rem;color:var(--text-muted);margin-bottom:var(--spacing-xs)}.output__value{padding:var(--spacing-sm);background:var(--bg-element);border-radius:var(--radius-sm);white-space:pre-wrap;word-break:break-word}.output__value--error{color:var(--error-color);background:oklch(from var(--error-color) l c h / .1)}.output__value--success{color:var(--success-color)}.tabs{display:flex;gap:var(--spacing-xs)}.tabs__tab{padding:var(--spacing-xs) var(--spacing-sm);background:transparent;border:none;color:var(--text-secondary);font-size:.85rem;cursor:pointer;border-radius:var(--radius-sm);transition:all .15s}.tabs__tab:hover{background:var(--bg-element-hover);color:var(--text-primary)}.tabs__tab--active{background:var(--bg-element);color:var(--text-primary)}.controls{display:flex;gap:var(--spacing-sm);align-items:center}.control-group{display:flex;align-items:center;gap:var(--spacing-xs)}.control-group__label{font-size:.8rem;color:var(--text-muted)}.toggle{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-element);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:all .15s}.toggle:hover{background:var(--bg-element-hover)}.toggle--active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.code-block{padding:var(--spacing-md);background:var(--bg-element);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.85rem;line-height:1.5;overflow-x:auto;white-space:pre}.glass{background:#ffffff0d;backdrop-filter:blur(12px);border:1px solid oklch(100% 0 0 / .1);border-radius:var(--radius-md)}.glass--hover:hover{background:#ffffff14;box-shadow:0 0 20px #ffffff1a}.loading-indicator{font-size:.8rem;color:var(--text-muted);padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-element);border-radius:var(--radius-sm)}.loading-indicator--warn{color:var(--warning-color);background:oklch(from var(--warning-color) l c h / .15)}.header__controls{display:flex;align-items:center;gap:var(--spacing-sm)}.profile-select{padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-element);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;cursor:pointer;outline:none}.profile-select:hover{background:var(--bg-element-hover)}.profile-select:focus{border-color:var(--accent-color)}.profile-badge{font-size:.75rem;color:var(--text-muted);padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-element);border-radius:var(--radius-sm)}.editor-container{display:flex;flex-direction:column;height:100%}.editor-container .editor{flex:1;min-height:0}.var-types-section{padding:var(--spacing-sm) var(--spacing-md);border-top:1px solid var(--border-color);background:var(--bg-panel)}.var-types-label{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.75rem;color:var(--text-muted);margin-bottom:var(--spacing-xs)}.var-types-error{color:var(--error-color);font-weight:500}.var-types-input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:.85rem;outline:none}.var-types-input:focus{border-color:var(--accent-color)}.var-types-input::placeholder{color:var(--text-muted)}.var-types-input--error{border-color:var(--error-color)}