body,header{color:var(--text);display:flex}.logo,body,header{display:flex}.editor-section,.preview-section{background:var(--bg);max-height:100%;padding:1rem}.editor-header i,.github:hover,.logo-icon{color:var(--accent)}body,textarea{transition:background var(--transition),color var(--transition)}.github i,.logo{font-size:1.2rem}.editor-container,.preview-content,header,iframe{box-shadow:var(--shadow)}.resize-handle,header{z-index:10}*,.container{scrollbar-width:auto}:root{--dark-bg:#0f172a;--dark-editor-bg:#1e293b;--dark-text:#e2e8f0;--dark-panel:#1e293b;--dark-border:#334155;--dark-accent:#818cf8;--dark-hover:#4f46e5;--light-bg:#f8fafc;--light-editor-bg:#ffffff;--light-text:#1e293b;--light-panel:#ffffff;--light-border:#e2e8f0;--light-accent:#6366f1;--light-hover:#4f46e5;--transition:0.2s cubic-bezier(0.4, 0, 0.2, 1);--shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--radius-lg:12px;--radius-md:8px;--radius-sm:4px}[data-theme=dark]{--bg:var(--dark-bg);--editor-bg:var(--dark-editor-bg);--text:var(--dark-text);--panel:var(--dark-panel);--border:var(--dark-border);--accent:var(--dark-accent);--hover:var(--dark-hover)}[data-theme=light]{--bg:var(--light-bg);--editor-bg:var(--light-editor-bg);--text:var(--light-text);--panel:var(--light-panel);--border:var(--light-border);--accent:var(--light-accent);--hover:var(--light-hover)}*{box-sizing:border-box;margin:0;padding:0;scrollbar-color:var(--accent) var(--border)}body{background:var(--bg);font-family:Inter,sans-serif;flex-direction:column;height:100vh}header{padding:1rem 2rem;background:var(--panel);justify-content:space-between;align-items:center}.logo{align-items:center;gap:12px;font-weight:600}.logo-icon{font-size:1.4rem}.github,.icon-button,button,footer,select,textarea{color:var(--text)}.editor-header,.preview-header{font-size:.9rem;font-weight:500}.editor-section{flex:1;display:grid;grid-template-rows:auto auto auto;gap:1rem;overflow-y:auto}.preview-section{flex:1;display:flex;flex-direction:column;overflow:hidden}.container{display:grid;grid-template-columns:1fr 1fr;grid-template-columns:1fr 1fr;height:100%;overflow:hidden}.editor-container,.editor-header,footer{display:flex;background:var(--panel)}.editor-container{flex-direction:column;border-radius:var(--radius-lg);position:relative;resize:vertical;overflow:hidden;min-height:150px}.editor-header{padding:.75rem 1rem;border-bottom:1px solid var(--border);align-items:center;gap:8px}textarea{background:var(--editor-bg);border:none;padding:1rem;font-family:'Fira Code',monospace;resize:none;flex:1;line-height:1.5;tab-size:2;outline:0}textarea:focus{box-shadow:inset 0 0 0 2px var(--accent)}iframe{width:100%;height:100%;border:none;background:#fff;border-radius:var(--radius-lg)}footer{padding:.75rem 2rem;text-align:center;font-size:.85rem;justify-content:space-between;box-shadow:0 -2px 4px rgba(0,0,0,.05)}.github,.settings{display:flex;align-items:center}button,select{padding:.5rem 1rem;border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer;background:var(--panel);font-weight:500;font-family:Inter,sans-serif;transition:all var(--transition)}select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236366f1' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:12px;appearance:none;padding-right:2rem}button:focus,select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px rgba(99,102,241,.2)}.settings{gap:1rem}.github{text-decoration:none;gap:.5rem;font-weight:500;transition:color var(--transition)}.icon-button,.status{align-items:center;display:flex}.icon-button{background:0 0;border:none;border-radius:var(--radius-md);padding:.5rem;justify-content:center;cursor:pointer;transition:all var(--transition)}.icon-button:hover{background:rgba(99,102,241,.1);color:var(--accent)}.status{gap:6px;color:var(--accent)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:1.5s infinite pulse}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.preview-header{padding:.75rem 1rem;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.preview-actions{display:flex;gap:8px}.preview-content{flex:1;background:var(--panel);border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden}@media (max-width:768px){.container{grid-template-columns:1fr}header{flex-direction:column;gap:1rem;padding:1rem}.settings{width:100%;justify-content:flex-end}}.editor-container::after,.resize-handle{position:absolute;bottom:0;right:0;width:15px;height:15px;cursor:se-resize;opacity:0;transition:opacity .2s;background:var(--border)}.editor-container textarea{flex:1;min-height:150px;resize:none;overflow-y:auto}.editor-container::after{content:""}.editor-container:hover .resize-handle,.editor-container:hover::after{opacity:1}::-webkit-scrollbar{width:14px;height:14px}::-webkit-scrollbar-track{background:var(--border);border-radius:12px;margin:4px}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:12px;border:3px solid var(--border);min-height:40px;transition:.3s}::-webkit-scrollbar-thumb:hover{background:var(--hover);border:2px solid var(--hover);transform:scale(1.05);box-shadow:0 0 5px rgba(0,0,0,.2)}::-webkit-scrollbar-corner{background:var(--bg)}.editor-container textarea::-webkit-scrollbar,.editor-section::-webkit-scrollbar{width:12px}.editor-container textarea::-webkit-scrollbar-thumb,.editor-section::-webkit-scrollbar-thumb{background:var(--accent);border:3px solid var(--editor-bg)}.container{overflow:overlay}