.layout{background:var(--color-bg);height:100vh;display:flex;overflow:hidden}.layout-sidebar{border-right:1px solid var(--color-border);background:var(--color-bg-secondary);flex-direction:column;width:280px;min-width:280px;display:flex;overflow-y:auto}.layout-main{flex-direction:column;flex:1;display:flex;overflow:hidden}.code-editor{border-radius:var(--radius-md);border:1px solid var(--color-border);flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.code-editor .cm-editor{height:100%;font-size:14px;font-family:var(--font-mono);background:#0a0a0a;flex:1;overflow:hidden}.code-editor .cm-editor .cm-scroller{font-family:var(--font-mono);overflow:auto!important}.code-editor .cm-editor.cm-focused{outline:none}.code-editor .cm-editor .cm-gutters{border-right:1px solid var(--color-border);color:#4a4a4a;background:#050505}.code-editor .cm-editor .cm-activeLineGutter{color:#888;background:#141414}.code-editor .cm-editor .cm-activeLine{background:#ffffff08}.code-editor .cm-editor .cm-cursor{border-left-color:var(--color-primary);border-left-width:2px}.code-editor .cm-editor .cm-selectionBackground{background:#fb923c26!important}.code-editor .cm-editor .cm-content ::selection{background:#fb923c26!important}.code-editor .cm-editor .cm-content{caret-color:var(--color-primary)}.code-editor .cm-editor .cm-line{padding-left:8px}.code-editor .cm-editor .cm-matchingBracket{background:#fb923c40;outline:none;color:var(--color-primary)!important}.cm-tooltip{border:1px solid var(--color-border)!important;border-radius:var(--radius-sm)!important;background:#141414!important}.cm-tooltip-autocomplete ul li[aria-selected]{color:#fff!important;background:#fb923c26!important}.live-preview{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-secondary);flex-direction:column;height:100%;display:flex;overflow:hidden}.live-preview-header{background:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:8px 12px;font-size:12px;font-weight:500;display:flex}.live-preview-title{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.live-preview-status{align-items:center;gap:6px;font-size:11px;display:flex}.live-preview-status:before{content:"";border-radius:50%;width:6px;height:6px}.live-preview-status--loading:before{background:var(--color-text-dim)}.live-preview-status--ok{color:var(--color-success)}.live-preview-status--ok:before{background:var(--color-success)}.live-preview-status--error{color:var(--color-error)}.live-preview-status--error:before{background:var(--color-error)}.live-preview-frame-container{flex:1;position:relative;overflow:hidden}.live-preview-frame{background:#0a0a0a;border:none;width:100%;height:100%}.live-preview-error-overlay{color:var(--color-error);font-family:var(--font-mono);white-space:pre-wrap;background:#ef44441a;border-top:1px solid #ef44444d;align-items:flex-start;gap:8px;max-height:120px;padding:8px 12px;font-size:12px;display:flex;position:absolute;bottom:0;left:0;right:0;overflow-y:auto}.live-preview-error-icon{background:var(--color-error);color:#000;border-radius:50%;justify-content:center;align-items:center;width:18px;min-width:18px;height:18px;font-size:11px;font-weight:700;display:inline-flex}.celebration-canvas{pointer-events:none;z-index:9999;width:100vw;height:100vh;position:fixed;top:0;left:0}.chapter-topbar{border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary);justify-content:space-between;align-items:center;min-height:52px;padding:12px 16px;display:flex}.chapter-topbar-left{align-items:center;gap:12px;display:flex}.chapter-number{color:var(--color-primary);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.chapter-title{color:var(--color-text);font-size:16px;font-weight:600}.chapter-topbar-right{align-items:center;gap:8px;display:flex}.chapter-nav-buttons{border-left:1px solid var(--color-border);gap:6px;margin-left:8px;padding-left:8px;display:flex}.chapter-content{flex:1;overflow:hidden}.chapter-split-horizontal{height:100%;display:flex}.chapter-split-vertical{flex-direction:column;height:100%;display:flex}.chapter-left-panel,.chapter-right-panel{height:100%;overflow:hidden}.chapter-instructions-pane{background:var(--color-bg);height:100%;overflow-y:auto}.chapter-editor-pane{height:100%;min-height:0;position:relative;overflow:hidden}.chapter-preview-pane,.chapter-tests-pane{height:100%;padding:4px;overflow:hidden}.gutter{background:var(--color-border);transition:background .15s}.gutter:hover{background:var(--color-primary)}.gutter.gutter-horizontal{cursor:col-resize}.gutter.gutter-vertical{cursor:row-resize}.chapter-hints,.chapter-solution{border-top:1px solid var(--color-border);background:var(--color-bg-tertiary);padding:12px 16px}.chapter-hints h4,.chapter-solution h4{color:var(--color-primary);margin-bottom:8px;font-size:13px;font-weight:600}.chapter-hints ul{padding:0;list-style:none}.chapter-hints li{color:var(--color-text-muted);padding:4px 0 4px 16px;font-size:13px;position:relative}.chapter-hints li:before{content:"→";color:var(--color-primary);position:absolute;left:0}.chapter-solution pre{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px;overflow-x:auto}.chapter-solution code{font-family:var(--font-mono);color:var(--color-text);font-size:13px}.ftb-label{background:var(--color-error);color:#000;letter-spacing:.5px;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700}.ftb-bug-banner{border-bottom:1px solid #ef444433;border-left:3px solid var(--color-error);background:#ef444414;align-items:flex-start;gap:12px;padding:14px 16px;display:flex}.ftb-bug-banner .ftb-bug-icon{margin-top:2px;font-size:20px;line-height:1}.ftb-bug-banner strong{color:var(--color-error);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:13px;font-weight:600;display:block}.ftb-bug-banner p{color:var(--color-text-muted);margin:0;font-size:13px;line-height:1.5}:root{--color-bg:#000;--color-bg-secondary:#0a0a0a;--color-bg-tertiary:#141414;--color-surface:#1a1a1a;--color-border:#262626;--color-border-light:#333;--color-text:#fff;--color-text-muted:#a3a3a3;--color-text-dim:#737373;--color-primary:#fb923c;--color-primary-hover:#f97316;--color-success:#22c55e;--color-error:#ef4444;--font-body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--radius-sm:4px;--radius-md:8px;--radius-lg:12px}