*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #e2e8f0;--text-primary: #0f172a;--text-secondary: #475569;--text-tertiary: #94a3b8;--border-color: #cbd5e1;--accent-color: #3b82f6;--accent-hover: #2563eb;--accent-light: #dbeafe;--error-color: #ef4444;--success-color: #10b981;--warning-color: #f59e0b;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--header-height: 60px;--footer-height: 60px;--sidebar-width: 160px;--editor-height: 400px}[data-theme=dark]{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-tertiary: #64748b;--border-color: #475569;--accent-color: #60a5fa;--accent-hover: #3b82f6;--accent-light: #1e3a8a}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1)}*,*:before,*:after{transition:background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1)}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;display:flex;min-height:calc(100vh - var(--header-height) - var(--footer-height))}.workspace{flex:1;padding:var(--spacing-lg);padding-bottom:calc(var(--spacing-lg) + 20px);max-width:1400px;margin:0 auto;width:100%;overflow-y:hidden}.header{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;position:sticky;top:0;z-index:100}.header>div:first-child{height:var(--header-height);display:flex;align-items:center;padding:0 var(--spacing-lg);gap:var(--spacing-lg)}.header-brand{font-weight:600;font-size:1.125rem;color:var(--text-primary);white-space:nowrap}.header-tabs{display:flex;gap:var(--spacing-xs);flex:1;overflow-x:auto;scrollbar-width:none}.header-tabs::-webkit-scrollbar{display:none}.tab{padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:.875rem;white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s}.tab:hover{color:var(--text-primary);background-color:var(--bg-tertiary)}.tab.active{color:var(--accent-color);border-bottom-color:var(--accent-color)}.header-actions{display:flex;gap:var(--spacing-sm);align-items:center}.icon-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;border-radius:4px;font-size:.875rem;transition:all .2s;display:flex;align-items:center;gap:var(--spacing-xs)}.icon-btn:hover{background-color:var(--bg-tertiary);border-color:var(--text-secondary)}.icon-btn:active{background-color:var(--accent-light);border-color:var(--accent-color);transform:scale(.98);color:var(--accent-light)}.btn-primary{background-color:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;border:2px solid var(--accent-color);font-weight:600;box-shadow:0 2px 8px #3b82f64d;position:relative}.btn-primary:before{content:"";position:absolute;inset:0;border-radius:4px;padding:2px;background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.5}.btn-primary:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.btn-primary:active{background:linear-gradient(135deg,#1e40af,#1e3a8a);box-shadow:0 1px 4px #3b82f64d inset;transform:translateY(0)}.toggle-container{display:flex;align-items:center;gap:var(--spacing-sm)}.toggle-switch{position:relative;width:44px;height:24px;background-color:var(--bg-tertiary);border-radius:12px;border:2px solid var(--border-color);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.toggle-switch:hover{border-color:var(--accent-color)}.toggle-switch.active{background-color:var(--accent-color);border-color:var(--accent-color)}.toggle-slider{position:absolute;top:2px;left:2px;width:16px;height:16px;background-color:#fff;border-radius:50%;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.toggle-switch.active .toggle-slider{transform:translate(20px)}.toggle-label{font-size:.875rem;color:var(--text-secondary);user-select:none;cursor:pointer}.sponsor-text{font-size:.75rem;color:var(--text-tertiary);display:none}.sponsor-banner{background-color:var(--bg-tertiary);border-top:1px solid var(--border-color);padding:var(--spacing-sm) var(--spacing-lg);display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);font-size:.875rem;color:var(--text-secondary)}.sponsor-link{color:var(--text-tertiary);font-size:.8125rem}.sidebar{width:var(--sidebar-width);background-color:var(--bg-secondary);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md)}.ad-placeholder{background-color:var(--bg-tertiary);border:1px dashed var(--border-color);padding:var(--spacing-md);text-align:center;color:var(--text-tertiary);font-size:.75rem;min-height:250px;display:flex;align-items:center;justify-content:center}.footer{height:var(--footer-height);background-color:var(--bg-secondary);border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;padding:var(--spacing-md)}.tool-container{display:flex;flex-direction:column;gap:var(--spacing-lg);height:100%}.tool-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.tool-title{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.tool-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.editor-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);height:var(--editor-height)}.editor-panel{display:flex;flex-direction:column;gap:var(--spacing-sm);border:1px solid var(--border-color);border-radius:4px;overflow:hidden;background-color:var(--bg-secondary)}.editor-panel-header{background-color:var(--bg-tertiary);padding:var(--spacing-sm) var(--spacing-md);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}.editor-panel-title{font-size:.875rem;font-weight:500;color:var(--text-secondary)}.editor-panel-actions{display:flex;gap:var(--spacing-xs)}.small-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);font-size:.75rem;border-radius:3px;transition:all .2s}.small-btn:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.small-btn:active:not(:disabled){background-color:var(--accent-light);color:var(--accent-color);transform:scale(.95)}.editor-textarea{flex:1;font-family:var(--font-mono);font-size:.875rem;padding:var(--spacing-md);border:none;background-color:var(--bg-primary);color:var(--text-primary);resize:none;outline:none;line-height:1.5}.editor-output{flex:1;font-family:var(--font-mono);font-size:.875rem;padding:var(--spacing-md);background-color:var(--bg-primary);color:var(--text-primary);overflow:auto;white-space:pre-wrap;word-break:break-all}.error-message{color:var(--error-color);font-size:.875rem;padding:var(--spacing-md)}.success-message{color:var(--success-color);font-size:.875rem;padding:var(--spacing-md)}.info-message{color:var(--text-secondary);font-size:.875rem}.btn{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);background-color:var(--bg-secondary);color:var(--text-primary);cursor:pointer;border-radius:4px;font-size:.875rem;transition:all .2s;font-family:var(--font-sans)}.btn:hover{background-color:var(--bg-tertiary)}.btn:active:not(:disabled){background-color:var(--accent-light);border-color:var(--accent-color);color:var(--accent-color);transform:scale(.98)}.btn-primary{background-color:var(--accent-color);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md)}.modal{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;max-width:600px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.25rem;font-weight:600}.modal-body{padding:var(--spacing-lg);overflow-y:auto;flex:1}.modal-footer{padding:var(--spacing-lg);border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:var(--spacing-sm)}.feedback-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 12px #3b82f666;z-index:999;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.feedback-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #3b82f680}.feedback-button:active{transform:scale(.95)}.feedback-backdrop{position:fixed;inset:0;background-color:#00000080;z-index:1000;animation:fadeIn .2s ease-out}.feedback-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;max-width:800px;height:80vh;max-height:700px;background-color:var(--bg-primary);border-radius:12px;box-shadow:0 8px 32px #0000004d;z-index:1001;display:flex;flex-direction:column;animation:scaleIn .3s cubic-bezier(.4,0,.2,1);overflow:hidden}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.feedback-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.feedback-header h3{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-primary)}.feedback-close{background:transparent;border:none;color:var(--text-secondary);font-size:1.25rem;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s}.feedback-close:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.feedback-iframe{flex:1;width:100%;border:none;background-color:var(--bg-primary)}@media (max-width: 1024px){.sidebar,.sponsor-text{display:none}}@media (max-width: 768px){.header{padding:0 var(--spacing-md);gap:var(--spacing-sm)}.header-brand{font-size:1rem}.editor-container{grid-template-columns:1fr;height:auto}.editor-panel{height:300px}.workspace{padding:var(--spacing-md)}.tool-actions{width:100%}.btn,.icon-btn{flex:1}.feedback-button{bottom:16px;right:16px;width:48px;height:48px;font-size:1.25rem}.feedback-modal{width:calc(100vw - 32px);max-width:none;height:85vh;max-height:none}}@media (min-width: 1440px){.sponsor-text{display:block}}.hidden{display:none}.kbd{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:3px;padding:.125rem .375rem;font-family:var(--font-mono);font-size:.75rem}.code-highlight{background-color:var(--bg-secondary);padding:var(--spacing-md);border-radius:4px;overflow-x:auto;font-family:var(--font-mono);font-size:.875rem;line-height:1.5}.tree-view{font-family:var(--font-mono);font-size:.875rem;padding:var(--spacing-md)}.tree-node{margin-left:var(--spacing-lg)}.tree-node-header{cursor:pointer;padding:var(--spacing-xs) 0;display:flex;align-items:center;gap:var(--spacing-xs)}.tree-node-header:hover{background-color:var(--bg-tertiary)}.tree-toggle{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:4px;font-size:.875rem}.stat-item{display:flex;flex-direction:column}.stat-label{color:var(--text-secondary);font-size:.75rem;margin-bottom:var(--spacing-xs)}.stat-value{color:var(--text-primary);font-weight:500}.suggestions{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;padding:var(--spacing-md);margin-top:var(--spacing-md)}.suggestions-title{font-size:.875rem;font-weight:500;margin-bottom:var(--spacing-sm);color:var(--text-secondary)}.suggestions-list{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.suggestion-btn{padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:4px;font-size:.75rem;cursor:pointer;transition:all .2s}.suggestion-btn:hover{background-color:var(--accent-color);color:#fff;border-color:var(--accent-color)}.spinner{border:2px solid var(--bg-tertiary);border-top-color:var(--accent-color);border-radius:50%;width:20px;height:20px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toggle-switch{position:relative;width:44px;height:24px;background-color:var(--bg-tertiary);border-radius:12px;cursor:pointer;transition:background-color .2s;border:1px solid var(--border-color)}.toggle-switch.active{background-color:var(--accent-color)}.toggle-switch-slider{position:absolute;top:2px;left:2px;width:18px;height:18px;background-color:#fff;border-radius:50%;transition:transform .2s}.toggle-switch.active .toggle-switch-slider{transform:translate(20px)}