:root{--ink:#22231f;--muted:#77776f;--paper:#f5f4ef;--card:#fffef9;--line:#deddd4;--purple:#6d5efc;--purple-soft:#eeebff;--green:#24795a;--orange:#e88c38;--terminal:#17191a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);margin:0;font-family:Arial,Noto Sans Thai,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:2px;outline:3px solid #6d5efc59}.sr-only{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}.app-header{border-bottom:1px solid var(--line);z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffef9f5;grid-template-columns:290px 1fr auto;align-items:center;height:76px;padding:0 30px;display:grid;position:sticky;top:0}.brand{color:inherit;align-items:center;gap:12px;text-decoration:none;display:flex}.brand>span{color:#fff;background:var(--purple);border-radius:12px;place-items:center;width:40px;height:40px;font-family:Georgia,serif;font-weight:900;display:grid;transform:rotate(-3deg);box-shadow:4px 4px #d8d2ff}.brand div{flex-direction:column;display:flex}.brand b{font:800 20px/1.1 Georgia,serif}.brand small{letter-spacing:.13em;color:var(--muted);margin-top:4px;font-size:9px;font-weight:800}.app-header nav{background:#ecebe5;border-radius:12px;justify-self:center;gap:4px;padding:4px;display:flex}.app-header nav button{color:#67675f;background:0 0;border:0;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700}.app-header nav button span{color:#aaa9a1;margin-right:7px;font-family:monospace}.app-header nav button.active{background:var(--card);color:var(--ink);box-shadow:0 2px 8px #28281e14}.app-header nav button.active span{color:var(--purple)}.header-stats{gap:7px;display:flex}.header-stats span{color:var(--muted);background:#f0efe9;border:1px solid #e1e0d8;border-radius:8px;padding:7px 9px;font-size:11px}.header-stats b{color:var(--ink)}.workspace{grid-template-columns:minmax(300px,350px) minmax(680px,1fr);min-height:calc(100vh - 76px);display:grid}.lesson-panel{background:var(--card);border-right:1px solid var(--line);height:calc(100vh - 76px);padding:42px 34px 32px;position:sticky;top:76px;overflow-y:auto}.lesson-progress{letter-spacing:.04em;color:var(--muted);grid-template-columns:1fr auto;gap:9px;font-size:11px;font-weight:800;display:grid}.lesson-progress b{color:var(--purple)}.lesson-progress>div{background:#e8e6df;border-radius:10px;grid-column:1/-1;height:5px;overflow:hidden}.lesson-progress i{background:var(--purple);border-radius:inherit;height:100%;transition:width .35s;display:block}.lesson-command{background:var(--purple-soft);color:#5044d8;border:1px solid #cec8ff;border-radius:7px;margin-top:38px;padding:7px 11px;font:800 12px monospace;display:inline-flex}.lesson-panel h1{letter-spacing:-.025em;margin:17px 0 12px;font:800 30px/1.14 Georgia,Noto Sans Thai,serif}.lesson-panel>p{color:#66665f;margin:0;font-size:14px;line-height:1.75}.task-box{border:1px solid #dbd6ff;border-left:4px solid var(--purple);background:#f2f0ff;border-radius:9px;flex-direction:column;gap:7px;margin-top:24px;padding:15px;display:flex}.task-box span{color:#6458cf;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:900}.task-box b{font-size:13px;line-height:1.5}.task-box code{overflow-wrap:anywhere;color:#3f3c51;background:#fff;border:1px solid #dedbe9;border-radius:6px;padding:9px 10px;font-size:11px}.tip-box{color:#77746b;align-items:flex-start;gap:9px;margin-top:14px;font-size:11px;line-height:1.5;display:flex}.tip-box b{color:var(--orange);letter-spacing:.1em;background:#fff8ed;border:1px solid #f0c99f;border-radius:4px;padding:3px 5px;font-size:9px}.success-box{color:#216b50;background:#eaf8f2;border:1px solid #b8decf;border-radius:8px;margin-top:18px;padding:11px;font-size:12px;font-weight:700}.lesson-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:28px;display:grid}.lesson-actions button,.sandbox-actions button{border-radius:8px;min-height:42px;font-size:12px;font-weight:800}.lesson-actions .secondary,.sandbox-intro .secondary{color:#56564f;background:#fff;border:1px solid #d3d1c8}.lesson-actions .restart{color:#77766f;background:0 0;border:0}.lesson-actions .restart-all{color:#605f58;background:#f6f4ed;border:1px dashed #c6c3ba;grid-column:1/-1}.lesson-actions .primary{background:var(--purple);color:#fff;border:0;grid-column:1/-1;box-shadow:0 5px 12px #6d5efc33}.eyebrow{letter-spacing:.14em;color:var(--purple);font-size:9px;font-weight:900}.sandbox-intro .eyebrow{margin-top:18px;display:block}.command-grid{grid-template-columns:1fr 1fr;gap:7px;margin:25px 0;display:grid}.command-grid code{color:#55534d;background:#f0eee7;border:1px solid #dedbd2;border-radius:6px;padding:8px;font-size:11px}.sandbox-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.sandbox-actions .secondary{color:#56564f;background:#fff;border:1px solid #d3d1c8}.undo-button{color:#fff;background:var(--purple);border:0}.main-stage{min-width:0;padding:26px 30px 60px}.terminal-card{background:var(--terminal);color:#dfdfd9;border:1px solid #2e3130;border-radius:13px;overflow:hidden;box-shadow:0 12px 28px #1a1b1924}.terminal-topbar{color:#8d918e;background:#232626;border-bottom:1px solid #333635;grid-template-columns:1fr 1fr 1fr;align-items:center;height:39px;padding:0 13px;font:10px monospace;display:grid}.terminal-topbar>span:nth-child(2){text-align:center}.terminal-state{color:#77bc9a;justify-self:end}.traffic{gap:6px;display:flex}.traffic i{background:#e56f66;border-radius:50%;width:9px;height:9px}.traffic i:nth-child(2){background:#dfae50}.traffic i:nth-child(3){background:#65ac76}.terminal-output{height:142px;font:11px/1.55 var(--font-geist-mono), ui-monospace, monospace;scrollbar-color:#454a48 transparent;padding:14px 18px;overflow-y:auto}.terminal-line{white-space:pre-wrap;min-height:17px}.terminal-line.hint{color:#838a86}.terminal-line.error{color:#ff8982}.terminal-line.success{color:#72d3a3}.terminal-line.command{color:#fff;margin-top:3px}.prompt{color:#84d3ad}.prompt b{color:#b1a6ff}.terminal-form{background:#1c1f1e;border-top:1px solid #343837;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;height:48px;padding:0 10px 0 18px;display:grid}.prompt-mark{color:#79d3a4;font:800 13px monospace}.terminal-form input{color:#fff;background:0 0;border:0;outline:0;min-width:0;font:11px monospace}.terminal-form input::placeholder{color:#666c68}.terminal-form button{color:#c9cec9;background:#303432;border:1px solid #4c514f;border-radius:6px;padding:7px 11px;font:700 10px monospace}.conflict-banner{color:#8d3730;background:#fff0ee;border:1px solid #f2b6b0;border-radius:8px;align-items:center;gap:14px;margin-top:14px;padding:12px 15px;font-size:12px;display:flex}.flow-card,.graph-card{border:1px solid var(--line);background:var(--card);border-radius:13px;margin-top:19px;padding:20px 22px;box-shadow:0 5px 18px #28281e09}.section-heading{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-heading h2{margin:4px 0 0;font:800 17px Georgia,Noto Sans Thai,serif}.live-pill,.head-pill{letter-spacing:.08em;color:#4a8a6d;background:#eef7f1;border:1px solid #cfe5d7;border-radius:20px;padding:6px 8px;font:800 8px monospace}.live-pill i{background:#42a577;border-radius:50%;width:5px;height:5px;margin-right:4px;animation:1.8s infinite pulse;display:inline-block}@keyframes pulse{50%{opacity:.35}}.current-branch-strip{color:#5f5d72;background:#f2f0ff;border:1px solid #ddd8ff;border-radius:8px;align-items:center;gap:10px;margin:-2px 0 14px;padding:9px 12px;font-size:10px;display:flex}.current-branch-strip span{color:#8b87a5;text-transform:uppercase;letter-spacing:.08em;font-size:8px;font-weight:900}.current-branch-strip b{color:#5144d8;font:800 12px monospace}.current-branch-strip code{color:#77728f;margin-left:auto;font-size:9px}.repo-flow{align-items:stretch;display:flex}.flow-wrap{flex:1;align-items:center;min-width:0;display:flex}.repo-column{background:#fbfaf6;border:1px solid #e0dfd7;border-radius:9px;width:100%;min-height:148px;padding:13px;position:relative;overflow:hidden}.repo-column:before{content:"";background:var(--column-color);height:3px;position:absolute;top:0;left:0;right:0}.repo-column.orange{--column-color:#e79a53}.repo-column.blue{--column-color:#4e95dd}.repo-column.purple{--column-color:#7566e8}.repo-column.green{--column-color:#43a272}.repo-icon{float:right;width:24px;height:24px;color:var(--column-color);background:color-mix(in srgb, var(--column-color) 12%, white);border-radius:6px;place-items:center;font-size:12px;display:grid}.repo-column h3{margin:2px 0;font-size:11px}.repo-column p{color:#929188;margin:0 0 11px;font-size:9px}.file-stack{clear:both;flex-direction:column;gap:5px;display:flex}.file-stack span{background:#fff;border:1px solid #e8e6de;border-radius:5px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px;min-width:0;padding:5px 6px;font:9px monospace;display:grid;overflow:hidden}.file-stack span.file-highlight{background:#fff1f0;border-color:#efc8c4;box-shadow:inset 3px 0 #e89088}.file-stack span.file-highlight small{color:#b75650;font-weight:800}.file-stack span b{color:var(--column-color)}.file-stack small{color:#a09e96;grid-column:2;font-size:7px}.file-stack em{color:#aaa89f;text-align:center;padding:15px 0;font:italic 9px Georgia,serif}.flow-arrow{text-align:center;color:#b4b1a8;flex:none;width:28px}.head-pill{color:#5144d8;background:var(--purple-soft);border-color:#d8d2ff}.head-status-banner{color:#6f6b82;background:#f4f2ff;border:1px solid #dbd6ff;border-radius:8px;align-items:center;gap:8px;margin:-4px 0 13px;padding:9px 12px;font-size:9px;display:flex}.head-status-banner span{text-transform:uppercase;letter-spacing:.08em;font-weight:800}.head-status-banner b{color:#4135c5;font:900 12px monospace}.head-status-banner code{color:#716b8b;margin-left:auto;font-size:8px}.pending-files{color:#98544f;background:#fff5f3;border:1px solid #f1d3cf;border-radius:8px;flex-wrap:wrap;align-items:center;gap:5px;margin:-3px 0 12px;padding:8px 10px;font-size:8px;display:flex}.pending-files b{text-transform:uppercase;letter-spacing:.07em;margin-right:4px}.pending-files span{background:#ffe8e5;border:1px solid #efc2bd;border-radius:4px;padding:3px 6px;font:800 8px monospace}.empty-graph{color:#aaa89f;border:1px dashed #dad8cf;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:110px;display:flex}.empty-graph div{color:#b4aaff;font-size:24px}.empty-graph b{color:#6b6a63;font-size:12px}.empty-graph span{font-size:9px}.git-graph-scroll{scrollbar-color:#bdb8ec #eeece5;background-color:#fbfaf6;background-image:linear-gradient(#eeece5 1px,#0000 1px),linear-gradient(90deg,#eeece5 1px,#0000 1px);background-size:22px 22px;border:1px solid #dfddd5;border-radius:10px;overflow-x:auto}.git-graph-canvas{min-height:180px;position:relative}.branch-lane{border-top:1px dashed #d2cfc5;height:1px;position:absolute;left:14px;right:20px}.branch-lane span{text-overflow:ellipsis;background:#fbfaf6;border-radius:4px;width:62px;padding:3px 5px;font:900 8px monospace;position:absolute;top:-10px;left:0;overflow:hidden}.graph-edge{transform-origin:0;z-index:1;background:#96928a;border-radius:5px;height:4px;margin-top:-2px;position:absolute;box-shadow:0 1px #fff}.graph-node-wrap{z-index:3;width:0;height:0;position:absolute}.graph-commit-node{color:#fff;border:4px solid #fff;border-radius:50%;place-items:center;width:32px;height:32px;font:900 8px monospace;display:grid;position:absolute;top:-16px;left:-16px;box-shadow:0 0 0 2px #2d2c2726,0 4px 8px #2625202e}.graph-commit-node.is-head{width:38px;height:38px;top:-19px;left:-19px;box-shadow:0 0 0 5px #dcd7ff,0 0 0 7px #6d5efc,0 5px 12px #30268233}.head-flag{color:#fff;background:#242520;border-radius:4px;padding:4px 7px;font:900 8px monospace;position:absolute;top:-49px;left:-22px}.head-flag:after{content:"";border:4px solid #0000;border-top-color:#242520;border-bottom-width:0;position:absolute;bottom:-4px;left:18px}.node-pointers{white-space:nowrap;gap:4px;display:flex;position:absolute;top:-31px;left:24px}.branch-pointer-stack{flex-direction:column;align-items:stretch;gap:3px;display:flex}.branch-pointer-stack.active .pointer.local{color:#3b2fc0;border-color:#7164eb;box-shadow:0 0 0 2px #e3dfff}.head-branch-label{color:#176a36;text-align:center;background:#dff7e6;border:1px solid #5bb676;border-radius:3px;padding:3px 5px;font:900 8px monospace}.node-message{text-align:center;flex-direction:column;align-items:center;gap:3px;width:110px;display:flex;position:absolute;top:25px;left:-55px}.node-message b{text-overflow:ellipsis;white-space:nowrap;max-width:110px;font-size:9px;overflow:hidden}.node-message code{color:#918e85;font-size:7px}.node-change{text-overflow:ellipsis;white-space:nowrap;color:#a64d47;background:#ffe8e5;border:1px solid #efc3be;border-radius:4px;max-width:108px;padding:3px 5px;font:800 7px monospace;overflow:hidden}.pointer{border:1px solid;border-radius:4px;padding:4px 6px;font:800 8px monospace}.pointer.local{color:#594bd8;background:#eeebff;border-color:#cec7ff}.pointer.remote{color:#287154;background:#eaf7f0;border-color:#bfe0ce}.graph-legend{color:#85827a;gap:18px;margin-top:12px;font-size:8px;display:flex}.graph-legend span{align-items:center;gap:5px;display:flex}.graph-legend i{border-radius:50%;width:8px;height:8px}.legend-head{background:#242520;box-shadow:0 0 0 2px #dcd7ff}.legend-local{background:#6d5efc}.legend-remote{background:#25a56a}@media (width<=1100px){.app-header{grid-template-columns:240px 1fr}.header-stats{display:none}.workspace{grid-template-columns:300px minmax(620px,1fr)}.main-stage{padding-inline:20px}.lesson-panel{padding-inline:25px}}@media (width<=850px){.app-header{gap:10px;height:auto;min-height:72px;padding:12px 18px}.brand small{display:none}.app-header nav{justify-self:end}.app-header nav button{padding:8px 10px}.app-header nav button span{display:none}.workspace{display:block}.lesson-panel{border-right:0;border-bottom:1px solid var(--line);height:auto;position:static}.main-stage{padding:20px 14px 50px}.repo-flow{overflow-x:auto}.flow-wrap{min-width:175px}}