@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#152b46;font-synthesis:none;--blue:#355eea;--muted:#64758b;--line:#dfe6ef;--mono:"IBM Plex Mono",monospace;background:#f4f7fb;font-family:Manrope,IBM Plex Sans Thai,sans-serif;font-weight:400}*{box-sizing:border-box}body{margin:0}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button{border:0}button:focus-visible,a:focus-visible,select:focus-visible,[role=button]:focus-visible{outline-offset:4px;outline:3px solid #7898ff}::selection{background:#dce5ff}.app{max-width:1440px;margin:auto;padding:0 54px}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:88px;display:flex}.brand{letter-spacing:-.9px;align-items:center;gap:11px;font-size:22px;font-weight:800;display:flex}.brand-symbol{background:var(--blue);color:#fff;text-align:center;width:38px;height:38px;font-size:27px;line-height:33px;font-family:var(--mono);letter-spacing:-5px;border-radius:10px;padding-right:5px;font-weight:500}.brand-period{color:var(--blue)}.header-actions{align-items:center;gap:18px;display:flex}.guide-label{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.guide-label>span{background:#278267;border-radius:50%;width:6px;height:6px}.icon-button{color:var(--muted);background:0 0;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;display:inline-flex}.icon-button:hover{color:#152b46;background:#e7edf5}.presentation-button{background:0 0;border:1px solid #cdd7e6;border-radius:7px;align-items:center;gap:8px;padding:8px 11px;font-size:12px;font-weight:600;display:flex}.presentation-button:hover,.presentation-button.active{background:#e4ebfa;border-color:#b6c6f2}kbd{font:10px var(--mono);color:#748197;background:#edf1f7;border:1px solid #dce3ed;border-radius:4px;padding:2px 5px}.introduction{justify-content:space-between;align-items:center;gap:24px;padding:34px 0 32px;display:flex}.intro-prelude{color:var(--muted);margin:0 0 10px;font-size:12px}.introduction h1{letter-spacing:-2.7px;margin:0;font-size:clamp(34px,4vw,54px);font-weight:600;line-height:1.15}.intro-aside{max-width:460px;padding-right:130px;position:relative}.intro-aside p{margin:0 0 8px;font-size:14px}.intro-aside strong{font-family:var(--mono);color:var(--blue);font-size:17px}.intro-aside>span{color:var(--muted);font-size:11px}.tiny-stack{align-items:center;display:flex;position:absolute;top:22px;right:3px}.tiny-stack i{border:2px solid #bdcbe2;border-radius:50%;width:12px;height:12px}.tiny-stack b{background:#bdcbe2;width:28px;height:1px}.tiny-stack .filled{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px #e4eafe}.chapters{border:1px solid var(--line);background:#edf2f8;border-radius:10px;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px;display:grid;overflow:hidden}.chapter{color:#6d7d91;text-align:left;background:0 0;border-radius:6px;align-items:center;gap:12px;min-width:0;padding:13px 14px;display:flex;position:relative}.chapter:hover{background:#e5ebf6}.chapter.active{color:var(--blue);background:#fff;box-shadow:0 2px 5px #152b460a}.chapter-number{font:11px var(--mono);opacity:.65}.chapter-copy{flex-direction:column;gap:4px;min-width:0;display:flex}.chapter-copy strong{white-space:nowrap;font-size:12px;font-weight:700}.chapter-copy small{white-space:nowrap;color:#7c899b;font-size:10px}.chapter-check{color:#278267;margin-left:auto}.lesson{border:1px solid var(--line);background:#fff;border-radius:13px;margin-top:25px;overflow:hidden;box-shadow:0 5px 20px #25467804}.lesson-heading{justify-content:space-between;align-items:center;gap:20px;padding:25px 28px 22px;display:flex}.lesson-heading h2{letter-spacing:-.7px;margin:0 0 7px;font-size:22px;font-weight:600}.lesson-heading p{color:var(--muted);margin:0;font-size:12px;line-height:1.8}.lesson-count{color:#7f8da1;white-space:nowrap;align-items:center;gap:9px;font-size:10px;display:flex}.lesson-count b{font:18px var(--mono);color:#2d496e;font-weight:400}.lesson-count>span{font-family:var(--mono);color:#a2aec0}.workbench{border:1px solid var(--line);border-radius:9px;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);min-height:330px;margin:0 28px;display:grid;overflow:hidden}.graph-panel{background:#fafcff;flex-direction:column;min-width:0;display:flex}.panel-heading{color:#536b87;background:#fff;border-bottom:1px solid #e8edf5;justify-content:space-between;align-items:center;gap:8px;padding:15px 18px;font-size:11px;display:flex}.panel-heading>span:first-child{align-items:center;gap:8px;font-weight:600;display:flex}.graph-hint{color:#8e9cb0;font-size:10px}.graph-body{flex:1;justify-content:center;align-items:center;min-height:275px;display:flex;position:relative;overflow:hidden}.commit-graph{aspect-ratio:760/375;width:100%;height:auto;max-height:350px;display:block;overflow:visible}.graph-edge{fill:none;stroke:#b7c8e1;stroke-width:2.2px}.graph-edge.rewritten{stroke:#e6a478}.graph-node{cursor:pointer}.node-hit{fill:#0000}.node-halo{fill:#e9eff9;opacity:0}.graph-node:hover .node-halo,.graph-node.selected .node-halo,.graph-node:focus-visible .node-halo{opacity:1}.node-ring{fill:#fff;stroke:#8da5c5;stroke-width:2.5px}.graph-node.current .node-ring{fill:#355eea;stroke:#355eea}.graph-node.current .node-halo{fill:#e6edff}.graph-node.rewritten .node-ring{stroke:#e58d58;stroke-width:3px}.graph-node.selected .node-halo,.graph-node:focus-visible .node-halo{stroke:#95b0fd;stroke-width:1.5px}.graph-node:focus-visible{outline:none}.node-title{text-anchor:middle;fill:#263e5d;font-size:14px;font-weight:600}.node-id{text-anchor:middle;font:12px var(--mono);fill:#355eea}.node-hash{text-anchor:middle;font:10px var(--mono);fill:#8c9aae}.current-label{fill:#e7edff}.current-label-text{text-anchor:middle;font:10px var(--mono);fill:#355eea}.bookmark-label{fill:#e7edf5}.bookmark-label-text{text-anchor:middle;font:11px var(--mono);fill:#5b7394}.pending-tag{color:#a36b40;white-space:nowrap;background:#fff1e6;border:1px solid #f4dbbf;border-radius:5px;align-items:center;gap:7px;padding:7px 10px;font-size:10px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.pending-tag>span{background:#e58d58;border-radius:50%;width:5px;height:5px}.graph-footer{color:#7d8ca2;border-top:1px solid #e8edf5;justify-content:space-between;align-items:center;gap:12px;padding:12px 17px;font-size:9px;display:flex}.graph-legend{gap:16px;display:flex}.graph-legend>span{align-items:center;gap:6px;display:flex}.legend-dot{border-radius:50%;width:7px;height:7px;display:inline-block}.legend-dot.current{background:var(--blue)}.legend-dot.changed{background:#e58d58}.identity-note{font-family:var(--mono);white-space:nowrap;font-size:8px}.identity-note b{color:#a8b4c4;margin:0 3px}.detail-panel{border-left:1px solid var(--line);background:#fff;flex-direction:column;min-width:0;display:flex}.terminal-panel{color:#f1f5ff;background:#14263e;flex-direction:column;min-height:186px;padding:0 19px;display:flex}.terminal-heading{color:#91a6c2;justify-content:space-between;align-items:center;padding:15px 0;font-size:10px;display:flex}.terminal-heading>span:first-child{align-items:center;gap:7px;display:flex}.terminal-dots{gap:4px;display:flex}.terminal-dots i{background:#4b607c;border-radius:50%;width:4px;height:4px}.command-line{align-items:flex-start;gap:10px;min-height:39px;padding-top:6px;display:flex}.prompt{color:#83a0ff;font:13px var(--mono)}.command-line code{font:11px/1.8 var(--mono);overflow-wrap:anywhere}.terminal-panel pre{font:9px/1.9 var(--mono);white-space:pre-wrap;color:#acbdd3;margin:8px 0 16px}.prepared-label{color:#6f85a3;border-top:1px solid #ffffff0c;margin-top:auto;padding:10px 0;font-size:8px}.diff-panel{flex:1;min-height:145px;padding-bottom:14px}.diff-heading{color:#526984;border-bottom:1px solid #eef2f6;align-items:center;gap:8px;padding:13px 15px;font-size:9px;display:flex}.diff-heading>span:first-of-type{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.diff-badge{color:#278267;font:8px var(--mono);white-space:nowrap;background:#eef7f1;border-radius:3px;margin-left:auto;padding:3px 5px}.diff-lines{padding:11px 0;overflow-x:auto}.diff-line{min-width:max-content;font:9px/2.25 var(--mono);color:#697a91;white-space:pre;padding:0 13px;display:flex}.diff-line.add{color:#298358;background:#f0f8f1}.diff-line.remove{color:#b56d5b;background:#fff2ef}.line-number{color:#b1bbc8;width:20px;font-size:8px}.diff-sign{flex-shrink:0;width:14px}.diff-line code{font:inherit}.story-panel{align-items:flex-start;gap:19px;min-height:120px;padding:26px 28px 23px;display:flex}.step-index{font:19px var(--mono);color:#355eea;white-space:nowrap;flex-direction:column;gap:5px;min-width:43px;padding-top:2px;display:flex}.step-index>span{color:#9eaabe;font-size:10px}.story-copy{flex:1;min-width:0}.story-copy h3{margin:0 0 7px;font-size:15px;font-weight:600}.story-copy p{color:#61748d;max-width:690px;margin:0;font-size:12px;line-height:1.95}.insight{border-left:1px solid var(--line);color:#5f7595;flex-shrink:0;width:190px;margin:3px 0 0 15px;padding-left:18px;font-size:10px;line-height:1.8}.insight-mark{color:#355eea;margin-bottom:7px;font-size:24px;line-height:1;display:block}.transport{border-top:1px solid var(--line);background:#fcfdff;justify-content:space-between;align-items:center;gap:18px;padding:15px 28px;display:flex}.playback-actions,.navigation-actions{align-items:center;gap:12px;display:flex}.play-button{color:#355eea;background:#eaf0ff;border-radius:6px;align-items:center;gap:9px;min-width:87px;padding:10px 16px;font-size:11px;font-weight:700;display:flex}.play-button:hover{background:#dce6ff}.play-button svg{width:13px}.replay-button{width:30px}.speed-control{border-left:1px solid var(--line);color:#8d9aaf;align-items:center;gap:8px;padding-left:15px;font-size:10px;display:flex}.speed-control select{color:#526b8b;cursor:pointer;background:0 0;border:0;padding:5px 0;font-size:10px}.step-track{gap:6px;margin:0 12px;display:flex}.step-tick{background:#e0e7f1;border-radius:3px;width:28px;height:6px;position:relative}.step-tick:after{content:"";position:absolute;inset:-9px -1px}.step-tick.visited{background:#a5b9f8}.step-tick.active{background:#355eea}.back-button,.next-button{color:#526984;background:0 0;border-radius:6px;align-items:center;gap:10px;padding:10px 15px;font-size:11px;display:flex}.back-button:hover{background:#edf2f8}.back-button:disabled{opacity:.35}.next-button{color:#fff;background:#355eea;justify-content:center;min-width:111px;font-weight:600}.next-button:hover{background:#284ed4}.next-button:disabled{color:#278267;background:#eaf3ed}.site-footer{color:#8b99ad;justify-content:space-between;align-items:center;padding:19px 0 23px;font-size:9px;display:flex}.site-footer>div{align-items:center;gap:6px;display:flex}.verified-dot{background:#739b86;border-radius:50%;width:5px;height:5px}.site-footer a{color:#627792;align-items:center;gap:5px;display:flex}.site-footer a:hover{color:#355eea}.footer-progress{font-family:var(--mono);color:#a2afc0}.node-inspector{z-index:2;background:#fff;border:1px solid #d1ddf1;border-radius:8px;width:236px;padding:13px 16px;position:absolute;bottom:12px;left:14px;box-shadow:0 8px 30px #14263e12}.node-inspector>div{justify-content:space-between;align-items:center;font-size:12px;display:flex}.node-inspector .icon-button{width:20px;height:20px}.node-inspector dl{grid-template-columns:1fr 1fr;gap:7px;font-size:9px;display:grid}.node-inspector dt{color:#8a98ad}.node-inspector dd{font:10px var(--mono);color:#355eea;margin:0}.node-inspector p{color:#6c809c;margin-bottom:0;font-size:9px;line-height:1.8}.operation-log{background:#f0f4fa;border-top:1px solid #e5ebf4;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:10px 12px;font-size:8px;display:flex}.op-title{color:#8494ab;margin-right:4px}.operation{color:#8b9ab0;align-items:center;gap:5px;display:flex}.operation>i{background:#aebcd0;border-radius:50%;width:5px;height:5px}.operation.active{color:#355eea}.operation.active>i{background:#355eea}.operation.undone{color:#aa8676;text-decoration:line-through}.operation.undone>i{background:#cba491}.help-popover{z-index:10;background:#fff;border:1px solid #d6e0ee;border-radius:10px;width:290px;padding:17px 20px;position:fixed;top:77px;right:max(24px,50vw - 666px);box-shadow:0 10px 50px #14263e20}.help-popover>div{justify-content:space-between;align-items:center;margin-bottom:12px;font-size:12px;display:flex}.help-popover p{color:#687d98;justify-content:space-between;align-items:center;gap:10px;font-size:10px;display:flex}.presenting .introduction{display:none}.presenting .site-header{height:64px}.presenting .chapters{margin-top:20px}.presenting .lesson{margin-top:18px}.presenting .graph-body{min-height:min(43vh,500px)}.presenting .commit-graph{max-height:460px}.presenting .story-copy p{font-size:14px}.presenting .lesson-heading h2{font-size:26px}.presenting .site-footer{padding:12px 0}.presenting .command-line code{font-size:12px}@media (width>=1450px){.app{padding:0 44px}.introduction{padding:43px 0}.workbench{min-height:385px}.graph-body{min-height:320px}.story-panel{padding-top:30px;padding-bottom:30px}}@media (width<=1100px){.app{padding:0 30px}.intro-aside{padding-right:0}.tiny-stack{display:none}.introduction h1{font-size:42px}.chapter{gap:8px;padding:13px 10px}.chapter-copy small{font-size:9px}.chapter-number{display:none}.insight{width:150px;margin-left:0}.workbench{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.graph-hint,.identity-note{display:none}.step-track{margin:0}.step-tick{width:20px}.lesson-heading,.story-panel{padding-left:22px;padding-right:22px}.workbench{margin-left:22px;margin-right:22px}.transport{padding-left:22px;padding-right:22px}}@media (width<=760px){.app{padding:0 18px}.site-header{height:73px}.guide-label{display:none}.header-actions{gap:6px}.introduction{flex-direction:column;align-items:flex-start;gap:15px;padding:26px 0}.introduction h1{letter-spacing:-1.8px;font-size:38px}.intro-aside p{margin-bottom:5px;font-size:12px}.intro-aside>span{font-size:10px}.chapters{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.chapter{gap:9px;padding:11px}.chapter-copy strong{font-size:11px}.chapter-copy small{font-size:9px}.chapter-check{display:none}.lesson{margin-top:18px}.lesson-heading{align-items:flex-start;padding:21px 18px 17px}.lesson-heading h2{font-size:19px;line-height:1.4}.lesson-heading p{font-size:11px}.lesson-count{display:none}.workbench{grid-template-columns:minmax(0,1fr);margin:0 16px}.graph-body{min-height:210px}.commit-graph{min-height:200px}.graph-footer{padding:11px 14px;font-size:8px}.graph-hint{font-size:8px;display:inline}.detail-panel{border-left:0;border-top:1px solid var(--line)}.terminal-panel{min-height:163px;padding:0 16px}.terminal-heading{padding:13px 0}.terminal-panel pre{margin-bottom:12px;font-size:10px}.command-line code{font-size:11px}.prepared-label{font-size:8px}.diff-panel{min-height:120px}.diff-line{font-size:10px}.story-panel{flex-wrap:wrap;gap:13px;padding:21px 17px}.step-index{min-width:32px;font-size:17px}.story-copy h3{font-size:14px}.story-copy p{font-size:12px;line-height:1.9}.insight{border:0;align-items:center;gap:8px;width:auto;margin:0 0 0 45px;padding:0;font-size:10px;display:flex}.insight-mark{margin:0;font-size:18px}.transport{flex-wrap:wrap;gap:10px;padding:13px 15px}.playback-actions{gap:8px}.play-button{min-width:64px;padding:9px 11px;font-size:10px}.play-button svg{width:11px}.speed-control{gap:4px;padding-left:9px}.speed-control label{display:none}.navigation-actions{gap:3px}.back-button,.next-button{gap:6px;padding:9px 10px;font-size:10px}.back-button span{display:none}.next-button{min-width:91px}.step-track{order:3;justify-content:center;width:100%;margin-top:8px}.step-tick{width:38px;height:5px}.site-footer{flex-wrap:wrap;gap:10px;font-size:8px}.footer-progress{display:none}.site-footer a{font-size:9px}.node-title{font-size:16px}.node-id{font-size:13px}.node-hash{font-size:11px}.presenting .graph-body{min-height:240px}.presenting .story-copy p{font-size:12px}.presenting .lesson-heading h2{font-size:20px}.presenting .chapters{margin-top:14px}.help-popover{top:64px;right:18px}.operation-log{gap:8px;font-size:7px}.op-title{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important}}.mobile-hint{display:none}.terminal-panel{flex-shrink:0;min-height:0;padding-bottom:12px}.terminal-output summary{color:#91a6c2;cursor:pointer;padding:6px 0;font-size:10px}.terminal-output summary:hover{color:#dae5ff}.terminal-output .prepared-label{padding-bottom:0;display:block}.app.presenting{z-index:30;background:#f4f7fb;width:100%;max-width:none;height:100dvh;position:fixed;inset:0;overflow:auto}.app::backdrop{background:#f4f7fb}.presenting .site-footer{display:none}.presenting .transport{z-index:60;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fcfdfff5;border:1px solid #d3deed;border-radius:12px;width:min(880px,100% - 48px);transition:opacity .18s,transform .18s;position:fixed;bottom:20px;left:50%;box-shadow:0 8px 32px #14263e16}.presenting .controls-visible{opacity:1;transform:translate(-50%)}.presenting .controls-hidden{opacity:0;pointer-events:none;transform:translate(-50%,10px)}@media (width>=761px){.presenting .site-header{height:40px}.presenting .chapters{margin-top:8px}.presenting .chapter{padding-top:7px;padding-bottom:7px}.presenting .chapter-copy small{display:none}.presenting .lesson{flex-direction:column;height:calc(100dvh - 180px);margin-top:8px;display:flex}.presenting .lesson-heading{padding-top:10px;padding-bottom:10px}.presenting .lesson-heading h2{font-size:22px}.presenting .lesson-heading p{display:none}.presenting .workbench{flex:1;min-height:0}.presenting .graph-body{min-height:0;display:block}.presenting .commit-graph{aspect-ratio:auto;width:100%;height:100%;max-height:none;position:absolute;inset:0}.presenting .node-title{font-size:19px}.presenting .node-id{font-size:16px}.presenting .node-hash{font-size:15px}.presenting .panel-heading{padding-top:12px;padding-bottom:12px}.presenting .graph-footer{padding-top:8px;padding-bottom:8px}.presenting .detail-panel{overflow:auto}.presenting .terminal-panel{min-height:0}.presenting .terminal-heading{padding-top:10px;padding-bottom:8px}.presenting .diff-panel{min-height:0;overflow:auto}.presenting .story-panel{min-height:0;padding-top:16px;padding-bottom:16px}.presenting .story-copy p{font-size:13px;line-height:1.8}.presenting .transport{padding-top:12px;padding-bottom:12px}.presenting .site-footer{padding-top:10px;padding-bottom:10px}}@media (width<=760px){.app.presenting{padding-bottom:120px}.presenting .transport{width:calc(100% - 24px);bottom:12px}.terminal-panel{min-height:0}.graph-body{justify-content:flex-start;overflow-x:auto}.commit-graph{flex-shrink:0;min-width:660px}.desktop-hint{display:none}.mobile-hint{display:inline}}.comparison-workbench{border:0;border-radius:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:visible}.engine-panel{border:1px solid var(--line);border-radius:9px;flex-direction:column;min-width:0;display:flex;overflow:hidden}.engine-heading{border-bottom:1px solid var(--line);background:#f8faff;justify-content:space-between;align-items:center;padding:13px 17px;display:flex}.engine-name{color:var(--blue);align-items:baseline;gap:11px;font-size:20px;font-weight:800;display:flex}.engine-name>span{color:#7c8ca2;font-size:9px;font-weight:500}.engine-number{font:10px var(--mono);color:#9eaac0}.git-panel .engine-heading{background:#fffaf5}.git-panel .engine-name{color:#b86432}.engine-panel .graph-body{height:220px;min-height:220px;display:block}.engine-panel .commit-graph{aspect-ratio:auto;width:100%;height:100%;max-height:none;position:absolute;inset:0}.engine-panel .node-title{font-size:19px}.engine-panel .node-id{font-size:14px}.engine-panel .node-hash{font-size:13px}.git-graph .current-label{fill:#fff0e2}.git-graph .current-label-text{fill:#a85528}.git-graph .graph-node.current .node-ring{fill:#c3713f;stroke:#c3713f}.git-graph .graph-node.current .node-halo{fill:#faeadc}.git-panel .legend-dot.current{background:#c3713f}.engine-panel .graph-footer{padding:9px 15px}.engine-panel .terminal-panel{height:250px;padding:0 15px 12px}.terminal-scroll{scrollbar-width:thin;scrollbar-color:#49617f transparent;flex:1;min-height:0;overflow:auto}.terminal-scroll:focus-visible{outline-offset:-2px;outline:2px solid #7898ff}.engine-panel .terminal-heading{padding:12px 0 8px;font-size:9px}.engine-panel .command-line{min-height:28px;padding-top:3px}.engine-panel .command-line code{font-size:11px}.engine-panel .terminal-panel pre{font:10px/1.8 var(--mono);white-space:pre;color:#c1cfe2;margin:5px 0 14px}.silent-output{color:#7990ae;margin:4px 0 12px;font-size:9px;display:block}.silent-inline{color:#7990ae;white-space:nowrap;margin-left:auto;padding-top:3px;font-size:9px}.engine-note{color:#62748c;background:#fafcff;border-top:1px solid #e4ebf4;padding:12px 16px;font-size:11px;line-height:1.8}.git-panel .engine-note{background:#fffaf5}.lesson-details{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:24px;margin:14px 28px 20px;display:grid}.shared-diff{background:#fafcff;border:1px solid #d9e3ef;border-radius:7px;min-width:0;overflow:hidden}.file-heading{color:#627894;background:#f0f4fa;border-bottom:1px solid #e1e8f2;align-items:center;gap:8px;padding:9px 13px;font-size:10px;display:flex}.file-heading strong{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:500;overflow:hidden}.file-heading>span{white-space:nowrap;color:#8797ac;margin-left:auto;font-size:9px}.shared-diff .diff-lines{padding:8px 0}.shared-diff .diff-line{font-size:11px;line-height:1.65}.lesson-details .story-panel{min-height:0;padding:10px 0}.lesson-details .insight{display:none}@media (width>=761px){.presenting .engine-panel{min-height:0}.presenting .engine-heading{flex-shrink:0;padding-top:9px;padding-bottom:9px}.presenting .engine-panel .graph-panel{flex:1.1;min-height:0}.presenting .engine-panel .graph-body{height:auto;min-height:0}.presenting .engine-panel .terminal-panel{flex:1;height:auto;min-height:100px;padding-bottom:7px}.presenting .engine-panel .command-line code{font-size:13px}.presenting .engine-panel .terminal-panel pre{font-size:12px;line-height:1.7}.presenting .engine-panel .branched-graph .node-title{font-size:28px}.presenting .engine-panel .branched-graph .node-id{font-size:24px}.presenting .engine-panel .branched-graph .node-hash{font-size:20px}.presenting .engine-note{flex-shrink:0;padding-top:8px;padding-bottom:8px;font-size:10px}.lesson-details .story-panel{order:-1}.presenting .lesson-details{flex-shrink:0;align-items:stretch;height:140px;margin-top:12px;margin-bottom:12px}.presenting .shared-diff{flex-direction:column;display:flex}.presenting .shared-diff .diff-lines{flex:1;min-height:0;padding:6px 0;overflow:auto}.presenting .lesson-details .story-copy p{font-size:12px;line-height:1.8}}@media (width<=1000px) and (width>=761px){.engine-name>span{display:none}}@media (width<=760px){.comparison-workbench{grid-template-columns:minmax(0,1fr);gap:16px}.engine-panel .graph-body{height:230px;min-height:230px;display:flex}.engine-panel .commit-graph{min-width:660px;position:static}.engine-panel .terminal-panel{height:250px}.lesson-details{grid-template-columns:minmax(0,1fr);gap:10px;margin:14px 16px 20px}}.mode-switch{background:#edf2f8;border:1px solid #dae3ef;border-radius:7px;gap:3px;margin-left:auto;margin-right:20px;padding:3px;display:flex}.mode-switch button{color:#72839b;background:0 0;border-radius:4px;padding:7px 11px;font-size:11px}.mode-switch button[aria-selected=true]{color:var(--blue);background:#fff;box-shadow:0 1px 5px #18355310}.playground{padding-bottom:32px}.playground-meta{flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:12px 0;display:flex}.live-badge{font:10px var(--mono);color:#34846c;display:inline-block}.live-badge:before{content:"";background:#34846c;border-radius:50%;width:5px;height:5px;margin:0 5px 1px 0;display:inline-block}.playground-scenarios{align-items:center;gap:8px;margin-left:auto;display:flex}.playground-scenarios select{border:1px solid var(--line);color:#526b8a;background:#fff;border-radius:6px;padding:6px 8px;font-size:11px}.play-reset{color:#637b9b;background:#e9eef7;border-radius:6px;align-items:center;gap:7px;padding:7px 9px;font-size:10px;display:flex}.play-reset:disabled{opacity:.5}.play-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"graph editor""terminal diff";gap:16px;display:grid}.play-panel{background:#fff;border:1px solid #dbe4ef;border-radius:9px;flex-direction:column;min-width:0;min-height:0;display:flex}.play-panel-heading{color:#8b9bb0;border-bottom:1px solid #e6edf5;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:12px 15px;font-size:10px;display:flex}.play-panel-heading strong{color:#526a87;align-items:center;gap:7px;font-size:11px;font-weight:600;display:flex}.play-panel-heading>div{align-items:center;gap:9px;display:flex}.play-panel-heading button{color:#617b9f;background:#edf2fa;border-radius:4px;align-items:center;gap:5px;padding:5px 7px;font-size:9px;display:flex}.play-panel-heading button:disabled{opacity:.35}.live-graph-panel{grid-area:graph;height:340px;overflow:hidden}.live-graph-scroll{background:#fafcff radial-gradient(#dce5f3 .8px,#0000 .8px) 0 0/22px 22px;flex:1;min-height:0;overflow:auto}.live-dag{min-width:100%;display:block}.live-edge{fill:none;stroke:#b6c8e1;stroke-width:2px}.live-node{cursor:pointer}.live-node rect{fill:#fff;stroke:#bccce1}.live-node.current rect{fill:#edf2ff;stroke:#557aec;stroke-width:1.6px}.live-node.rewritten rect{stroke:#e59a66;stroke-width:2px}.live-node.conflicted rect{fill:#fff0ee;stroke:#c26b62}.live-node.selected rect,.live-node:hover rect{stroke:#355eea;stroke-width:2px}.live-node:focus-visible{outline:none}.live-node:focus-visible rect{stroke:#355eea;stroke-width:3px}.live-node-title{fill:#324d70;font-size:12px;font-weight:600}.live-node-id{font:10px var(--mono);fill:#355eea}.live-node-hash{fill:#8c9bae}.live-node-meta{font:8px var(--mono);fill:#8195ad}.live-graph-inspector{color:#7e91ad;border-top:1px solid #e6edf5;flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;height:38px;padding:10px 13px;font-size:10px;display:flex}.live-graph-inspector>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.live-graph-inspector b{color:#355eea;font:10px var(--mono)}.live-graph-inspector button{color:#355eea;background:#edf2ff;border-radius:4px;flex-shrink:0;padding:4px 8px;font-size:9px}.live-editor{grid-area:editor;height:340px;overflow:hidden}.file-tabs{background:#fafcff;border-bottom:1px solid #e6edf5;flex-shrink:0;display:flex;overflow-x:auto}.file-tabs button{color:#8b9bb0;white-space:nowrap;font:10px var(--mono);background:0 0;border-bottom:2px solid #0000;padding:9px 13px}.file-tabs button[aria-selected=true]{color:#355eea;background:#fff;border-bottom-color:#355eea}.file-tabs span{color:#c28952}.live-editor textarea{resize:none;min-height:0;font:12px/1.9 var(--mono);color:#385173;tab-size:2;background:#fff;border:0;outline:0;flex:1;padding:16px}.live-editor textarea:focus-visible{box-shadow:inset 0 0 0 2px #afc0f8}.live-editor textarea:disabled{background:#fbfcff}.editor-note{color:#879ab4;border-top:1px solid #edf1f7;flex-shrink:0;padding:7px 12px;font-size:9px}.new-file-form{border-bottom:1px solid #e6edf5;gap:5px;padding:7px;display:flex}.new-file-form input{width:100%;min-width:0;font:10px var(--mono);border:1px solid #dce4f1;border-radius:4px;padding:5px 8px}.new-file-form button{color:#355eea;background:#edf2ff;border-radius:4px;padding:5px 8px;font-size:10px}.live-terminal{color:#c3d1e4;background:#14263e;grid-area:terminal;height:300px;position:relative}.live-terminal .play-panel-heading{border-color:#31465f}.live-terminal .play-panel-heading strong{color:#aebfd7}.live-transcript{scrollbar-width:thin;scrollbar-color:#49617f transparent;flex:1;min-height:0;padding:12px 15px;overflow:auto}.live-entry{margin-bottom:18px}.live-entry>div{font:11px/1.9 var(--mono);gap:10px;display:flex}.live-entry>div span{color:#86a2ff}.live-entry>div code{white-space:pre-wrap;overflow-wrap:anywhere}.live-entry pre{font:10px/1.8 var(--mono);white-space:pre;margin:7px 0 0}.live-entry.failed pre{color:#e5a293}.live-entry small{color:#7890af;font-size:9px}.terminal-welcome{color:#8ea3c0;font-size:11px;line-height:1.8}.terminal-welcome>div{gap:6px;margin:14px 0;display:flex}.terminal-welcome button{font:10px var(--mono);color:#acc0e3;background:#243a56;border-radius:4px;padding:6px 9px}.terminal-welcome small{color:#6d85a6}.live-command-form{border-top:1px solid #31465f;flex-shrink:0;align-items:center;gap:10px;padding:10px 13px;display:flex}.command-input-wrap{flex:1;min-width:0;position:relative}.command-input-wrap input{width:100%;font:12px/1.6 var(--mono);color:#ebf1ff;background:0 0;border:0;outline:none;padding:5px 0}.command-input-wrap input:focus-visible{box-shadow:0 1px #7898ff}.live-command-form>button{color:#fff;background:#355eea;border-radius:5px;align-items:center;gap:5px;padding:7px 9px;font-size:10px;display:flex}.live-command-form>button:disabled{opacity:.5}.jj-completions{color:#526e93;z-index:70;background:#fff;border:1px solid #bdcdea;border-radius:7px;max-height:280px;padding:5px;position:absolute;bottom:calc(100% + 13px);left:-25px;right:-50px;overflow:auto;box-shadow:0 8px 32px #14263e30}.jj-completions button{text-align:left;color:#516c90;background:0 0;border-radius:4px;align-items:center;gap:10px;width:100%;padding:8px 10px;font-size:10px;display:flex}.jj-completions button[aria-selected=true],.jj-completions button:hover{color:#355eea;background:#edf2ff}.jj-completions code{font:11px var(--mono);color:#355eea;min-width:90px}.jj-completions span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.jj-completions kbd{margin-left:auto}.live-diff{grid-area:diff;height:300px;overflow:hidden}.live-diff pre{min-height:0;font:11px/1.8 var(--mono);color:#627b9d;background:#fafcff;flex:1;margin:0;padding:15px;overflow:auto}.play-error{color:#9c634c;background:#fff0eb;border:1px solid #f1d2c3;border-radius:7px;justify-content:space-between;gap:14px;margin:12px 0;padding:13px 16px;font-size:12px;display:flex}.play-error button{color:#355eea;background:#fff;border-radius:4px;flex-shrink:0;padding:5px 10px}.play-loading{color:#8495ad;padding:40px 0;font-size:13px}@media (width>=761px){.playground{flex-direction:column;height:calc(100dvh - 88px);min-height:600px;padding-bottom:20px;display:flex}.play-grid{flex:1;grid-template-rows:1.1fr 1fr;min-height:0}.play-panel{height:auto;min-height:0}.presenting .playground{height:calc(100dvh - 40px);min-height:0;padding-bottom:12px}.presenting .playground-meta{padding:8px 0}.presenting .live-entry pre{font-size:11px}}@media (width<=1100px){.header-actions .guide-label{display:none}}@media (width<=760px){.site-header{flex-wrap:wrap;gap:12px;height:auto;min-height:73px;padding:14px 0 9px}.mode-switch{order:3;justify-content:center;width:100%;margin:0}.mode-switch button{flex:1}.play-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"graph""editor""terminal""diff"}.live-graph-panel{height:300px}.live-editor{height:290px}.live-terminal{height:320px}.live-diff{height:250px}.play-panel-heading{padding-left:11px;padding-right:11px;font-size:9px}.live-editor .play-panel-heading>div>span{display:none}.jj-completions{left:-20px;right:-50px}}