:root{--color-bg-primary:#1e1e2e;--color-bg-secondary:#252538;--color-bg-tertiary:#2d2d44;--color-bg-surface:#313148;--color-bg-hover:#3a3a55;--color-accent:#7c9ef5;--color-accent-hover:#9db4ff;--color-accent-muted:#7c9ef526;--color-success:#4ade80;--color-warning:#fbbf24;--color-danger:#f87171;--color-info:#60a5fa;--color-text-primary:#e2e2f0;--color-text-secondary:#9898b8;--color-text-muted:#66a;--color-text-inverse:#1e1e2e;--color-border:#3d3d5c;--color-border-subtle:#2d2d44;--font-ui:"Segoe UI", system-ui, -apple-system, sans-serif;--font-code:"Courier New", "Consolas", monospace;--font-size-xs:11px;--font-size-sm:12px;--font-size-base:13px;--font-size-md:14px;--font-size-lg:16px;--font-size-xl:18px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--toolbar-height:48px;--tabbar-height:38px;--sidebar-width:220px;--help-drawer-width:360px;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00000080;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.35s ease}[data-theme=light]{--color-bg-primary:#f4f4f8;--color-bg-secondary:#eaeaf0;--color-bg-tertiary:#dfdfe8;--color-bg-surface:#d8d8e4;--color-bg-hover:#ccccd8;--color-accent:#4a6ef5;--color-accent-hover:#3050d0;--color-accent-muted:#4a6ef51f;--color-text-primary:#1e1e2e;--color-text-secondary:#4a4a6a;--color-text-muted:#7878a0;--color-text-inverse:#e2e2f0;--color-border:#c0c0d4;--color-border-subtle:#d4d4e4;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 12px #00000026;--shadow-lg:0 8px 32px #0003}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-ui);font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-bg-primary);-webkit-font-smoothing:antialiased}button{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.toolbar{height:var(--toolbar-height);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);padding:0 var(--space-3);align-items:center;gap:var(--space-2);z-index:200;flex-shrink:0;display:flex;position:relative}.toolbar-group{align-items:center;gap:var(--space-2);display:flex}.toolbar-left{flex:1}.toolbar-centre{gap:var(--space-1)}.toolbar-right{justify-content:flex-end;gap:var(--space-2)}.toolbar-logo{color:var(--color-accent);flex-shrink:0;height:40px}.toolbar-name-btn{border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--font-size-md);color:var(--color-text-primary);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:1px solid #0000;max-width:200px;font-weight:600;overflow:hidden}.toolbar-name-btn:hover{border-color:var(--color-border);background:var(--color-bg-hover)}.toolbar-name-input{background:var(--color-bg-primary);border:1px solid var(--color-accent);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--font-size-md);color:var(--color-text-primary);outline:none;width:180px;font-weight:600}.toolbar-btn{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);background:var(--color-bg-tertiary);color:var(--color-text-secondary);font-size:var(--font-size-sm);border:1px solid var(--color-border-subtle);transition:background var(--transition-fast), color var(--transition-fast);display:flex}.toolbar-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.toolbar-btn-icon{padding:var(--space-1)}.toolbar-btn-accent{background:var(--color-accent-muted);color:var(--color-accent);border-color:var(--color-accent)}.toolbar-btn-run{background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent);font-weight:600}.toolbar-btn-run:hover{background:var(--color-accent-hover);color:var(--color-text-inverse)}.toolbar-project-switcher{position:relative}.toolbar-dropdown{top:calc(100% + var(--space-1));background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:200px;box-shadow:var(--shadow-md);z-index:500;position:absolute;left:0;overflow:hidden}.toolbar-dropdown-header{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-text-muted);letter-spacing:.05em;font-weight:600}.toolbar-dropdown-empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:italic}.toolbar-dropdown-item{text-align:left;width:100%;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:background var(--transition-fast);background:0 0;border:none;display:block}.toolbar-dropdown-item:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.toolbar-dropdown-item.active{color:var(--color-accent);font-weight:600}.toolbar-dropdown-divider{background:var(--color-border);height:1px;margin:var(--space-1) 0}.toolbar-new-project-row{gap:var(--space-2);padding:var(--space-2) var(--space-3);display:flex}.toolbar-new-project-input{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-primary);outline:none;flex:1}.toolbar-new-project-input:focus{border-color:var(--color-accent)}.toolbar-codepen-toggle{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--color-border-subtle);font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:color var(--transition-fast), border-color var(--transition-fast);display:flex}.toolbar-codepen-toggle:hover{color:var(--color-text-primary)}.toolbar-codepen-toggle--active{color:var(--color-accent);border-color:var(--color-accent)}.toolbar-codepen-toggle input[type=checkbox]{accent-color:var(--color-accent);cursor:pointer;margin:0}.modal-backdrop{z-index:9999;animation:modal-fade-in var(--transition-fast) ease;background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}.modal-box{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-6);width:90%;min-width:320px;max-width:440px;animation:modal-slide-in var(--transition-fast) ease}@keyframes modal-slide-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.modal-title{font-size:var(--font-size-lg);color:var(--color-text-primary);margin-bottom:var(--space-3);font-weight:600}.modal-message{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-5);line-height:1.6}.modal-actions{justify-content:flex-end;gap:var(--space-3);display:flex}.modal-btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);border:1px solid #0000;font-weight:500}.modal-btn-cancel{background:var(--color-bg-tertiary);border-color:var(--color-border);color:var(--color-text-secondary)}.modal-btn-cancel:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.modal-btn-confirm{background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}.modal-btn-confirm:hover{background:var(--color-accent-hover)}.modal-btn-confirm.danger{background:var(--color-danger);border-color:var(--color-danger)}.modal-btn-confirm.danger:hover{background:#ef4444}.file-tree{width:var(--sidebar-width);background:var(--color-bg-secondary);border-right:1px solid var(--color-border);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.file-tree-header{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.file-tree-title{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);font-weight:600}.file-tree-add-btn{border-radius:var(--radius-sm);width:22px;height:22px;color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.file-tree-add-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.file-tree-body{padding:var(--space-2) 0;flex-direction:column;flex:1;display:flex;overflow-y:auto}.file-tree-group{margin-bottom:var(--space-2)}.file-tree-group-label{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);font-weight:600}.file-tree-item{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast);border-left:3px solid #0000;min-height:28px;display:flex;position:relative}.file-tree-item:hover{background:var(--color-bg-hover)}.file-tree-item.active{background:var(--color-accent-muted);border-left-color:var(--color-accent)}.file-tree-item.no-select{cursor:default}.file-tree-item-icon{color:var(--color-text-muted);flex-shrink:0;align-items:center;display:flex}.file-tree-item.active .file-tree-item-icon{color:var(--color-accent)}.file-tree-item-name{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.file-tree-item.active .file-tree-item-name{color:var(--color-text-primary)}.file-tree-preview-badge{color:var(--color-accent);flex-shrink:0;align-items:center;display:flex}.file-tree-item-actions{align-items:center;gap:var(--space-1);flex-shrink:0;display:none}.file-tree-item:hover .file-tree-item-actions{display:flex}.file-tree-item-actions button{border-radius:var(--radius-sm);width:20px;height:20px;color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.file-tree-item-actions button:hover{background:var(--color-bg-surface);color:var(--color-text-primary)}.file-tree-item-actions button.danger:hover{color:var(--color-danger)}.file-tree-rename-wrap{flex:1}.file-tree-rename-input{background:var(--color-bg-primary);border:1px solid var(--color-accent);border-radius:var(--radius-sm);width:100%;padding:2px var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-primary);outline:none}.file-tree-new-file{padding:var(--space-2) var(--space-3)}.file-tree-new-input{background:var(--color-bg-primary);border:1px solid var(--color-accent);border-radius:var(--radius-sm);width:100%;padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-primary);outline:none}.file-tree-error{font-size:var(--font-size-xs);color:var(--color-danger);margin-top:var(--space-1);line-height:1.3}.file-tree-assets{border-top:1px solid var(--color-border-subtle);margin-top:var(--space-2);flex-shrink:0}.folder-tree{padding-bottom:var(--space-1)}.folder-tree-header{padding:var(--space-1) var(--space-3);align-items:center;gap:var(--space-1);display:flex}.folder-tree-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);flex:1;font-weight:600}.folder-tree-upload-btn{border-radius:var(--radius-sm);width:22px;height:22px;color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.folder-tree-upload-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.folder-tree-file-input{display:none}.folder-tree-empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.4}.ft-item{align-items:center;gap:var(--space-2);cursor:pointer;min-height:26px;transition:background var(--transition-fast);padding-right:var(--space-2);display:flex;position:relative}.ft-item:hover{background:var(--color-bg-hover)}.ft-item.active{background:var(--color-accent-muted)}.ft-item.no-select{cursor:default}.ft-folder-row{-webkit-user-select:none;user-select:none}.ft-item-chevron,.ft-item-icon{color:var(--color-text-muted);flex-shrink:0;align-items:center;display:flex}.ft-item.active .ft-item-icon{color:var(--color-accent)}.ft-item-name{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.ft-item.active .ft-item-name{color:var(--color-text-primary)}.ft-item-actions{align-items:center;gap:var(--space-1);flex-shrink:0;display:none}.ft-item:hover .ft-item-actions{display:flex}.ft-item-actions button{border-radius:var(--radius-sm);width:20px;height:20px;color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.ft-item-actions button:hover{background:var(--color-bg-surface);color:var(--color-text-primary)}.ft-item-actions button.danger:hover{color:var(--color-danger)}.ft-rename-wrap{flex:1;min-width:0}.ft-rename-input{box-sizing:border-box;background:var(--color-bg-primary);border:1px solid var(--color-accent);border-radius:var(--radius-sm);width:100%;padding:1px var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-primary);outline:none}.ft-rename-error{font-size:var(--font-size-xs);color:var(--color-danger);margin-top:2px;line-height:1.3}.folder-tree-import-form{margin:var(--space-2) var(--space-3);padding:var(--space-2);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.folder-tree-import-filename{align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);display:flex;overflow:hidden}.folder-tree-import-filename span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.folder-tree-import-label{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-1);display:block}.folder-tree-path-input{box-sizing:border-box;background:var(--color-bg-secondary);border:1px solid var(--color-accent);border-radius:var(--radius-sm);width:100%;padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-primary);outline:none}.folder-tree-path-preview{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-1);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.folder-tree-error{font-size:var(--font-size-xs);color:var(--color-danger);margin-top:var(--space-1)}.folder-tree-import-btns{gap:var(--space-2);margin-top:var(--space-2);display:flex}.folder-tree-btn-primary,.folder-tree-btn-secondary{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);border:none;flex:1}.folder-tree-btn-primary{background:var(--color-accent);color:#fff}.folder-tree-btn-primary:hover{opacity:.88}.folder-tree-btn-secondary{background:var(--color-bg-hover);color:var(--color-text-secondary)}.folder-tree-btn-secondary:hover{background:var(--color-bg-surface);color:var(--color-text-primary)}.logo{width:100px;margin:auto auto var(--space-4);display:block}.tab-bar{height:var(--tabbar-height);background:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border);padding:0 var(--space-2);gap:var(--space-1);flex-shrink:0;align-items:stretch;display:flex}.tab-bar-tab{align-items:center;gap:var(--space-1);padding:0 var(--space-3);color:var(--color-text-muted);cursor:pointer;font-size:var(--font-size-sm);transition:color var(--transition-fast), border-color var(--transition-fast);white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;display:flex;position:relative}.tab-bar-tab:hover{color:var(--color-text-secondary)}.tab-bar-tab.active{color:var(--color-text-primary);border-bottom-color:var(--color-accent)}.tab-bar-label{font-weight:500}.tab-bar-sublabel{font-size:var(--font-size-xs);color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-weight:400;overflow:hidden}.tab-bar-tab.active .tab-bar-sublabel{color:var(--color-text-secondary)}.tab-bar-spacer{flex:1}.tab-bar-learn.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.help-drawer{height:100%;width:var(--help-drawer-width);background:var(--color-bg-secondary);border-left:1px solid var(--color-border);transition:transform var(--transition-base);z-index:100;box-shadow:var(--shadow-lg);flex-direction:column;display:flex;position:absolute;top:0;right:0;transform:translate(100%)}.help-drawer.open{transform:translate(0)}.help-drawer-header{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);flex-shrink:0;display:flex}.help-drawer-title{font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-shrink:0;font-weight:600}.help-drawer-search{flex:1;align-items:center;display:flex;position:relative}.help-search-icon{left:var(--space-2);color:var(--color-text-muted);pointer-events:none;position:absolute}.help-search-input{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:100%;padding:var(--space-1) var(--space-2) var(--space-1) 26px;font-size:var(--font-size-sm);color:var(--color-text-primary);outline:none}.help-search-input:focus{border-color:var(--color-accent)}.help-drawer-close{border-radius:var(--radius-sm);width:26px;height:26px;color:var(--color-text-muted);transition:background var(--transition-fast), color var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.help-drawer-close:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.help-drawer-body{padding:var(--space-4);flex:1;overflow-y:auto}.help-entry-header{align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.help-entry-title{font-size:var(--font-size-lg);font-family:var(--font-code);color:var(--color-text-primary);flex:1}.help-badge{font-size:var(--font-size-xs);padding:2px var(--space-2);border-radius:var(--radius-sm);flex-shrink:0;font-weight:700}.help-badge-html{color:#ef6c00;background:#ef6c0033}.help-badge-css{color:#03a9f4;background:#03a9f433}.help-badge-js{color:#c8a800;background:#ffd50033}.help-entry-summary{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4);line-height:1.6}.help-entry-section{margin-bottom:var(--space-4)}.help-entry-section-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--space-2);font-weight:700}.help-code-block{background:var(--color-bg-primary);border:1px solid var(--color-border-subtle);padding:var(--space-3);border-radius:var(--radius-sm);font-family:var(--font-code);font-size:var(--font-size-sm);white-space:pre;color:var(--color-text-primary);line-height:1.5;overflow-x:auto}.help-def-list{gap:var(--space-2);flex-direction:column;display:flex}.help-def-row dt{font-family:var(--font-code);font-size:var(--font-size-sm);color:var(--color-accent)}.help-def-row dd{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-left:var(--space-3);line-height:1.5}.help-entry-returns{font-family:var(--font-code);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.help-entry-mdn{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-border-subtle)}.help-entry-mdn a{font-size:var(--font-size-sm);color:var(--color-accent);text-decoration:none}.help-entry-mdn a:hover{text-decoration:underline}.help-mdn-section{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}.help-mdn-heading{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--space-3);font-weight:700}.help-loading{font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:italic}.spr-credits{font-size:var(--font-size-xs);color:var(--color-text-muted);text-align:left;padding:var(--space-5) 0 var(--space-2) 0;border-top:1px solid var(--color-border-subtle);margin-top:auto}.mdn-result{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border-subtle)}.mdn-result:last-child{border-bottom:none}.mdn-result a{font-size:var(--font-size-sm);color:var(--color-accent);margin-bottom:var(--space-1);font-weight:600;text-decoration:none;display:block}.mdn-result a:hover{text-decoration:underline}.mdn-result p{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.help-no-local{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}.help-empty{padding:var(--space-6) var(--space-4);text-align:center}.help-empty p{font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:1.6}.editor-pane{flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.code-editor-empty{height:100%;color:var(--color-text-muted);font-size:var(--font-size-sm);justify-content:center;align-items:center;display:flex}.preview-pane{flex-direction:column;height:100%;display:flex;overflow:hidden}.preview-toolbar{align-items:center;gap:var(--space-2);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);height:40px;padding:0 var(--space-3);flex-shrink:0;display:flex}.preview-file-select{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;outline:none}.preview-file-select:focus{border-color:var(--color-accent)}.preview-viewport-controls{align-items:center;gap:var(--space-1);display:flex}.preview-width-label{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-left:var(--space-1)}.preview-toolbar-spacer{flex:1}.preview-toolbar-btn{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.preview-toolbar-btn:disabled{opacity:.3;cursor:default}.preview-toolbar-btn:not(:disabled):hover,.preview-toolbar-btn.active{background:var(--color-bg-hover);color:var(--color-text-primary)}.preview-toolbar-btn.active{color:var(--color-accent)}.preview-frame-container{padding:var(--space-4);background:var(--color-bg-primary);flex:1;justify-content:center;align-items:flex-start;display:flex;overflow:auto}.preview-frame{border:1px solid var(--color-border);background:#fff;height:100%;min-height:400px;display:block}.preview-frame.mobile-mode{box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);min-height:600px}.preview-empty{width:100%;color:var(--color-text-muted);font-size:var(--font-size-sm);justify-content:center;align-items:center;display:flex}.config-pane{height:100%;padding:var(--space-6);max-width:640px;overflow-y:auto}.config-section-title{font-size:var(--font-size-md);color:var(--color-text-primary);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border);font-weight:600}.config-section{margin-bottom:var(--space-6)}.config-row{align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);display:flex}.config-label{width:180px;font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-shrink:0}.config-control{flex:1}.config-range-row{align-items:center;gap:var(--space-3);display:flex}.config-range-row input[type=range]{accent-color:var(--color-accent);flex:1}.config-value-label{font-size:var(--font-size-sm);font-family:var(--font-code);color:var(--color-text-muted);text-align:right;min-width:48px}.config-select{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;outline:none;flex:1}.config-select:focus{border-color:var(--color-accent)}.config-input{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-primary);outline:none;flex:1}.config-input:focus{border-color:var(--color-accent)}.config-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast)}.config-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.config-btn-icon{padding:var(--space-1);justify-content:center;align-items:center;display:flex}.config-btn-accent{background:var(--color-accent-muted);border-color:var(--color-accent);color:var(--color-accent)}.config-btn-accent:hover{background:var(--color-accent);color:var(--color-text-inverse)}.config-new-project{gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.config-project-list{gap:var(--space-2);flex-direction:column;display:flex}.config-project-item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-bg-tertiary);border:1px solid var(--color-border-subtle);justify-content:space-between;align-items:center;display:flex}.config-project-item.current{border-color:var(--color-accent);background:var(--color-accent-muted)}.config-project-name{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.config-project-item.current .config-project-name{color:var(--color-text-primary);font-weight:600}.config-project-actions{gap:var(--space-2);align-items:center;display:flex}.config-current-badge{font-size:var(--font-size-xs);color:var(--color-accent);font-weight:600}.config-btn-danger{color:#c53030;border-color:#c53030}.config-btn-danger:hover{color:#fff;background:#c53030}.config-project-rename-input{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);flex:1}.config-project-name{align-items:baseline;gap:var(--space-2);display:flex}.config-project-size{font-size:var(--font-size-xs);color:var(--color-text-muted);font-family:var(--font-code)}.config-storage-header{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);justify-content:space-between;align-items:baseline;display:flex}.config-storage-quota{color:var(--color-text-muted)}.config-storage-label-right{font-family:var(--font-code);font-size:var(--font-size-sm)}.config-storage-bar{background:var(--color-bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--color-border-subtle);height:8px;overflow:hidden}.config-storage-fill{background:var(--color-accent);border-radius:var(--radius-sm);height:100%;transition:width .3s}.config-storage-fill.warn{background:#d97706}.config-storage-fill.danger{background:#c53030}.config-storage-warning{margin-top:var(--space-2);font-size:var(--font-size-sm);color:#c53030}.motd-para{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-3)}.motd-para a{color:var(--color-accent);text-decoration:none}.motd-para a:hover{text-decoration:underline}.teaching-drawer{background:var(--color-bg-primary);border-left:1px solid var(--color-border);width:72%;min-width:540px;height:100%;transition:transform var(--transition-slow);z-index:110;box-shadow:var(--shadow-lg);display:flex;position:absolute;top:0;right:0;overflow:hidden;transform:translate(100%)}.teaching-drawer.open{transform:translate(0)}.td-sidebar{background:var(--color-bg-tertiary);border-right:1px solid var(--color-border);flex-direction:column;flex-shrink:0;width:240px;display:flex;overflow:hidden}.td-sidebar-header{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);flex-shrink:0;height:44px;display:flex}.td-logo-icon{color:var(--color-accent);flex-shrink:0}.td-sidebar-title{font-size:var(--font-size-sm);color:var(--color-text-primary);letter-spacing:.04em;text-transform:uppercase;flex:1;font-weight:700}.td-close-btn{border-radius:var(--radius-sm);width:26px;height:26px;color:var(--color-text-muted);transition:background var(--transition-fast), color var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.td-close-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.td-search-wrap{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);flex-shrink:0;align-items:center;display:flex;position:relative}.td-search-icon{color:var(--color-text-muted);pointer-events:none;position:absolute;left:20px}.td-search-input{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:100%;padding:var(--space-1) var(--space-2) var(--space-1) 26px;font-size:var(--font-size-sm);color:var(--color-text-primary);font-family:var(--font-ui);outline:none}.td-search-input:focus{border-color:var(--color-accent)}.td-chapter-list{padding:var(--space-2) 0;flex:1;overflow-y:auto}.td-chapter-btn{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);cursor:pointer;text-align:left;color:var(--color-text-secondary);font-size:var(--font-size-sm);font-family:var(--font-ui);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;display:flex}.td-chapter-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.td-chapter-btn.active{background:var(--color-accent-muted);color:var(--color-text-primary)}.td-chapter-badge{font-size:var(--font-size-xs);border-radius:var(--radius-sm);white-space:nowrap;letter-spacing:.03em;flex-shrink:0;padding:1px 6px;font-weight:700}.td-chapter-name{flex:1;line-height:1.3}.td-chapter-arrow{color:var(--color-accent);flex-shrink:0}.td-no-results{padding:var(--space-4) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:1.5}.td-content{flex:1;overflow:hidden auto}.td-content-inner{max-width:760px;padding:var(--space-6) var(--space-6) 80px}.td-chapter-header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.td-chapter-badge-lg{font-size:var(--font-size-sm);border-radius:var(--radius-md);letter-spacing:.05em;white-space:nowrap;padding:3px 10px;font-weight:700}.td-chapter-title{font-size:var(--font-size-xl);color:var(--color-text-primary);margin:0;font-weight:700;line-height:1.2}.td-chapter-intro{font-size:var(--font-size-md);color:var(--color-text-secondary);margin-bottom:var(--space-6);padding-bottom:var(--space-5);border-bottom:1px solid var(--color-border-subtle);line-height:1.7}.td-section{margin-bottom:var(--space-6)}.td-section-title{font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-border-subtle);font-weight:600}.td-section-content{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--space-3);line-height:1.7}.td-code-wrap{margin:var(--space-3) 0;position:relative}.td-code-block{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);padding-top:calc(var(--space-4) + 8px);font-family:var(--font-code);font-size:var(--font-size-sm);color:var(--color-text-primary);white-space:pre;margin:0;line-height:1.6;overflow-x:auto}.td-copy-btn{top:var(--space-2);right:var(--space-2);font-size:var(--font-size-xs);font-family:var(--font-ui);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-secondary);color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);z-index:1;padding:2px 8px;position:absolute}.td-copy-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.td-table{border-collapse:collapse;width:100%;font-size:var(--font-size-sm);margin:var(--space-3) 0;border-radius:var(--radius-md);overflow:hidden}.td-table thead{background:var(--color-bg-tertiary)}.td-table th{text-align:left;padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);font-weight:700}.td-table td{padding:var(--space-2) var(--space-3);color:var(--color-text-secondary);border-bottom:1px solid var(--color-border-subtle);vertical-align:top;line-height:1.5}.td-table tr:last-child td{border-bottom:none}.td-table tr:nth-child(2n){background:var(--color-bg-secondary)}.td-table td code,.td-table th code{font-family:var(--font-code);font-size:var(--font-size-xs);color:var(--color-accent);background:var(--color-accent-muted);border-radius:3px;padding:1px 5px}.td-tip{gap:var(--space-3);border-left:3px solid var(--color-accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;background:#7c9ef514;display:flex}.td-tip-icon{flex-shrink:0;font-size:14px;line-height:1.6}.td-tip p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0;line-height:1.6}.td-key-points{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-top:var(--space-6)}.td-key-points-title{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent);margin:0 0 var(--space-3);font-weight:700}.td-key-points-list{padding-left:var(--space-4);gap:var(--space-2);flex-direction:column;margin:0;display:flex}.td-key-points-list li{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.td-chapter-nav{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle);justify-content:space-between;align-items:center;display:flex}.td-nav-btn{font-size:var(--font-size-sm);font-family:var(--font-ui);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-secondary);color:var(--color-text-secondary);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);text-overflow:ellipsis;white-space:nowrap;max-width:220px;overflow:hidden}.td-nav-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary);border-color:var(--color-accent)}.td-content::-webkit-scrollbar{width:6px}.td-chapter-list::-webkit-scrollbar{width:6px}.td-content::-webkit-scrollbar-track{background:0 0}.td-chapter-list::-webkit-scrollbar-track{background:0 0}.td-content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.td-chapter-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.td-section-content code{font-family:var(--font-code);color:var(--color-accent);background:var(--color-accent-muted);border-radius:3px;padding:1px 4px;font-size:.9em}[data-theme=light] .td-code-block{border-color:var(--color-border);color:#1e1e2e;background:#f0f0f8}[data-theme=light] .td-table tr:nth-child(2n){background:var(--color-bg-tertiary)}[data-theme=light] .td-tip{background:#4a6ef50f}.app-layout{flex-direction:column;height:100vh;display:flex;overflow:hidden}.app-body{flex:1;display:flex;overflow:hidden}.app-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.app-pane{flex:1;position:relative;overflow:hidden}