html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background-color:transparent}*{box-sizing:border-box}:root{--bg: #0f172a;--bg-grid: rgba(255, 255, 255, .03);--panel-bg: rgba(30, 41, 59, .65);--panel-border: rgba(148, 163, 184, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent: #8b5cf6;--accent-bg: rgba(139, 92, 246, .15);--accent-border: rgba(139, 92, 246, .4);--accent-btn-hover: rgba(255, 255, 255, .06);--active-btn-text: #8b5cf6;--gutter-bg: rgba(148, 163, 184, .05);--gutter-hover: rgba(139, 92, 246, .35);--preview-bg: #0f172a;--tab-sep-bg: rgba(148, 163, 184, .12);--badge-bg: rgba(139, 92, 246, .15);--badge-text: #c4b5fd;--badge-border: rgba(139, 92, 246, .3);--theme-btn-text: #fbbf24;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius-lg: 16px;--radius-md: 8px}html[data-theme=light]{--bg: #f1f5f9;--bg-grid: rgba(0, 0, 0, .04);--panel-bg: rgba(255, 255, 255, .85);--panel-border: rgba(15, 23, 42, .09);--text-primary: #0f172a;--text-secondary: #475569;--accent: #7c3aed;--accent-bg: rgba(124, 58, 237, .1);--accent-border: rgba(124, 58, 237, .35);--accent-btn-hover: rgba(0, 0, 0, .04);--active-btn-text: #7c3aed;--gutter-bg: rgba(15, 23, 42, .04);--gutter-hover: rgba(124, 58, 237, .25);--preview-bg: #ffffff;--tab-sep-bg: rgba(15, 23, 42, .12);--badge-bg: rgba(124, 58, 237, .1);--badge-text: #7c3aed;--badge-border: rgba(124, 58, 237, .25);--theme-btn-text: #7c3aed}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font-sans);background:var(--bg);color:var(--text-primary);height:100%;overflow:hidden;transition:background .25s ease,color .25s ease}body{background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);background-size:32px 32px}.liview-container{display:flex;flex-direction:column;height:100vh;padding:.75rem;gap:.75rem}.glass-header{background:var(--panel-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:.625rem 1.25rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:1rem;flex-wrap:wrap;transition:background .25s ease,border-color .25s ease}.brand{display:flex;align-items:center;gap:.625rem}.brand-icon{color:var(--accent)}.brand h1{font-size:1.1rem;font-weight:700;letter-spacing:-.03em;color:var(--text-primary)}.badge{background:var(--badge-bg);color:var(--badge-text);font-size:.62rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--badge-border)}.header-controls{display:flex;align-items:center;gap:.5rem}.divider-v{width:1px;height:20px;background:var(--panel-border);flex-shrink:0}.split-controls{display:flex;align-items:center;gap:.3rem}.split-label{font-size:.7rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-right:.2rem}.split-btn{background:transparent;border:1px solid var(--panel-border);color:var(--text-secondary);padding:.3rem .65rem;font-family:var(--font-sans);font-size:.78rem;font-weight:500;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;gap:.3rem;transition:all .15s ease}.split-btn:hover{background:var(--accent-btn-hover);color:var(--text-primary)}.split-btn.active{background:var(--accent-bg);color:var(--active-btn-text);border-color:var(--accent-border)}.theme-btn{background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--theme-btn-text);padding:.3rem .8rem;font-family:var(--font-sans);font-size:.78rem;font-weight:600;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;gap:.35rem;transition:all .15s ease}.theme-btn:hover{filter:brightness(1.15);transform:scale(1.03)}.split-wrapper{display:flex;flex:1;min-height:0;width:100%}.split-wrapper.vertical-split{flex-direction:column}.split-wrapper.horizontal-split{flex-direction:row}.gutter{background-color:var(--gutter-bg);background-repeat:no-repeat;background-position:50%;border-radius:4px;transition:background-color .2s;z-index:10;flex-shrink:0}.gutter:hover{background-color:var(--gutter-hover)}.gutter.gutter-horizontal{cursor:col-resize}.gutter.gutter-vertical{cursor:row-resize}.glass-panel{background:var(--panel-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;transition:background .25s ease,border-color .25s ease}.pane-header{display:flex;align-items:center;padding:.3rem .5rem;border-bottom:1px solid var(--panel-border);background:#00000014;flex-shrink:0}html[data-theme=light] .pane-header{background:#00000008}.pane-header h3{font-size:.75rem;font-weight:700;color:var(--text-secondary);padding-left:.75rem;text-transform:uppercase;letter-spacing:.06em}.tabs{display:flex;align-items:center;gap:.15rem;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab-btn{background:transparent;border:none;color:var(--text-secondary);padding:.4rem .8rem;font-family:var(--font-sans);font-size:.8rem;font-weight:500;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;gap:.35rem;transition:all .15s ease;white-space:nowrap}.tab-btn:hover{background:var(--accent-btn-hover);color:var(--text-primary)}.tab-btn.active{background:var(--accent-bg);color:var(--active-btn-text);box-shadow:inset 0 0 0 1px var(--accent-border)}.tab-sep{width:1px;background:var(--tab-sep-bg);align-self:stretch;margin:.3rem .25rem;flex-shrink:0}.editor-wrapper{flex:1;position:relative;min-height:0}.preview-pane-header{justify-content:space-between;padding-right:1rem!important}.preview-lang-badge{font-size:.62rem;font-weight:700;color:var(--text-secondary);background:var(--accent-bg);border:1px solid var(--panel-border);padding:.15rem .5rem;border-radius:999px;letter-spacing:.05em}.preview-wrapper{flex:1;min-height:0;background:var(--preview-bg);overflow:hidden;transition:background .25s ease}.preview-iframe{width:100%;height:100%;border:none;display:block}@media(max-width:640px){.liview-container{padding:.5rem;gap:.5rem}.glass-header{padding:.5rem .75rem}.split-btn span,.theme-btn span{display:none}.split-btn,.theme-btn{padding:.4rem .5rem}.split-label,.tab-label{display:none}.tab-btn{padding:.4rem .55rem}}