:root{color-scheme:light;font-family:"Segoe UI","Malgun Gothic",sans-serif;color:#242424;background:#f0f0f0;--border:#c8c8c8;--accent:#287443;--selection:#e6f1ff}
*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,.open,select{background:#fafafa;border:1px solid #b7b7b7;border-radius:3px;color:#222;padding:6px 12px;font-size:13px}button,.open,summary{cursor:pointer}button:hover,.open:hover{background:#e6f1ff;border-color:#84a8d2}button:disabled{opacity:.45;cursor:default}.primary{background:#e9f5ec;border-color:#82a98b;color:#205b30}.primary:hover{background:#d5ecd9}.titlebar{height:35px;background:#eaf4f9;display:flex;align-items:center;gap:9px;padding:0 12px;font-size:13px}.app-icon{display:block;width:22px;height:22px;object-fit:contain;flex:none}.header-note{margin-left:auto;color:#707a81;font-size:11px}.menubar{display:flex;align-items:center;gap:18px;padding:5px 12px;border-bottom:1px solid var(--border);background:#fff;font-size:13px}.menubar strong{font-weight:400}.open{position:relative;overflow:hidden;padding:4px 12px}.open input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.local-note{color:#7a7a7a;font-size:11px}main{padding:0 10px 8px;max-width:2200px;margin:auto}.welcome{max-width:760px;margin:8vh auto;padding:44px;background:white;border:1px solid var(--border);border-radius:5px}.welcome-icon{font:bold 28px Consolas,monospace;color:var(--accent)}.welcome h1{font-size:32px;font-weight:500;line-height:1.5;margin:20px 0}.welcome p{line-height:1.9;color:#59616a}.welcome button{margin:12px 0 25px;padding:10px 18px}.welcome small{display:block;color:#777}.lesson{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 3px 6px}.lesson h1{font-size:14px;font-weight:500;margin:0;overflow-wrap:anywhere}.lesson>span{color:#737373;font-size:11px;white-space:nowrap}.toolbar{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--border);padding:4px 0 7px}.study-mode{display:flex;gap:5px}.study-mode button[aria-pressed="true"]{background:#dcebf8;border-color:#7ea7ce;color:#124775}.follow-option{margin-left:auto;font-size:12px;color:#555}.follow-option input{accent-color:#42845b;vertical-align:middle}.study,.controls{padding:9px 2px}.step-navigation,.transport{display:flex;align-items:center;gap:8px}.step-navigation select{flex:1;min-width:0;background:#fff}.step-navigation button{white-space:nowrap}#stepSummary{font-size:12px;margin:7px 0 0;color:#5e656b;overflow-wrap:anywhere}.transport{font-size:12px}.transport>label{margin-left:auto}.transport select{margin-left:8px}.transport>span{color:#555}#progress{width:100%;accent-color:#6b9a6b;margin:8px 0 0;cursor:pointer}.editor{display:grid;grid-template-columns:minmax(210px,23%) minmax(0,1fr);height:clamp(390px,61vh,950px);border:1px solid var(--border);background:#fff;overflow:hidden}aside{border-right:4px solid #eee;overflow:auto;background:#fff;min-width:0}aside h2{position:sticky;top:0;background:linear-gradient(#f9f9f9,#e4e4e4);border-bottom:1px solid var(--border);font-size:13px;font-weight:400;padding:7px 10px;margin:0;z-index:1}aside h2 span{color:#82736a;margin-right:5px}#files{padding:9px 5px;font-size:13px;min-width:max-content}#files details{margin-left:14px}#files>details{margin-left:0}#files summary{padding:3px 4px;white-space:nowrap;user-select:none;color:#3e4348}#files summary::marker{color:#9a9a9a}.folder-label::before{content:'▱';color:#b28b3c;margin-right:6px;font-size:16px}#files button{display:block;white-space:nowrap;border:0;border-radius:0;background:transparent;text-align:left;font-size:13px;padding:4px 8px;margin-left:16px;min-width:calc(100% - 16px)}#files button.selected{background:#cfe3fa;color:#182f49}.file-icon{display:inline-block;color:#507596;font:11px Consolas,monospace;margin-right:7px;border:1px solid #aebac6;background:#fff;padding:0 2px}.source{display:flex;flex-direction:column;min-width:0;min-height:0}.tabs{display:flex;flex:none;overflow-x:auto;align-items:end;background:linear-gradient(#fafafa,#ededed);min-height:32px;border-bottom:1px solid var(--border);padding:0 3px;gap:2px}.tabs button{flex:none;white-space:nowrap;border:1px solid #ccc;border-bottom:0;border-radius:5px 5px 0 0;background:#eee;font-size:13px;padding:7px 12px}.tabs button.selected{background:#fff;color:#182f49;box-shadow:inset 0 2px #87acd1}.source-body{position:relative;flex:1;min-height:0;overflow:hidden}.code-scroll{height:100%;overflow:auto;padding:4px 0 216px;background:#fff}pre{font:16px/1.65 Consolas,"Malgun Gothic",monospace;tab-size:4;margin:0;min-width:max-content}.code-line{display:grid;grid-template-columns:54px max-content;min-height:26.4px;padding-right:22px}.code-content{display:block;white-space:pre;tab-size:4}.line-number{display:inline-block;user-select:none;color:#898989;text-align:right;width:48px;padding-right:9px;border-right:1px solid #f2f2f2;margin-right:6px}.code-line.changed{background:var(--selection)}.syntax-keyword{color:#7f0055;font-weight:600}.syntax-string{color:#2a00ff}.syntax-comment{color:#3f7f5f}.syntax-annotation{color:#646464}.syntax-number{color:#164ba0}.syntax-tag{color:#006a83}.syntax-type{color:#377f89}.editor-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #ddd;background:#fafafa;padding:5px 9px;font-size:11px;color:#636363;min-height:24px}#path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-footer>span:last-child{white-space:nowrap}.transition{position:absolute;inset:0;background:#f8fafdf7;display:grid;place-items:center;z-index:2;animation:card-in .16s ease-out}.transition-card{text-align:center;max-width:90%;padding:30px}.transition-kicker{font-size:12px;color:#477d52;letter-spacing:3px}.transition-card p{font-size:13px;overflow-wrap:anywhere;color:#7a8289}.transition-arrow{color:#9caebb;font-size:26px}.transition-card h2{font:500 25px Consolas,"Malgun Gothic",monospace;color:#24466a;margin:14px 0;overflow-wrap:anywhere}.transition-note{display:block;font-size:12px;color:#7a8289;margin-top:24px}.step-changes{border:1px solid var(--border);border-top:0;background:#fff}.step-changes summary{background:linear-gradient(#fafafa,#e9e9e9);padding:7px 10px;font-size:12px}.comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:#ddd}.comparison section{background:#fff;padding:8px 12px}.comparison h2{font-size:11px;color:#747474;margin:0 0 6px;font-weight:400}.comparison pre{min-width:0;font-size:13px;max-height:130px;overflow:auto;white-space:pre}.comparison section:first-child pre{background:#fff4f1}.comparison section:last-child pre{background:#eff8f0}.statusbar{display:flex;justify-content:space-between;font-size:11px;color:#666;padding:5px;border-bottom:1px solid #d8d8d8}#notice{font-size:12px;line-height:1.6;color:#707070;margin:7px 2px;white-space:pre-wrap}#notice.error{color:#a12525}[hidden]{display:none!important}@keyframes card-in{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.transition{animation:none}}@media(max-width:760px){.editor{grid-template-columns:165px minmax(0,1fr)}.toolbar{flex-wrap:wrap}.follow-option{margin-left:0}.step-navigation{flex-wrap:wrap}.step-navigation select{order:-1;flex-basis:100%}.step-navigation button{flex:1}.transport{flex-wrap:wrap}.transport>label{margin-left:0}.comparison{grid-template-columns:minmax(0,1fr)}.statusbar>span:last-child,.header-note,.local-note{display:none}pre{font-size:14px}.line-number{width:35px}.code-line{grid-template-columns:41px max-content}.welcome{margin:30px 0;padding:24px}.welcome h1{font-size:26px}.transition-card h2{font-size:20px}}

.welcome-open{display:inline-block;margin:12px 0 25px;padding:10px 18px}.open-another{margin-top:12px}

.playback-options{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}.playback-options .follow-option{margin-left:0;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.playback-options input[type="checkbox"]{margin:0;flex:none}.toolbar{flex-wrap:wrap}#continuePlayback{margin-top:20px;padding:10px 24px}

body{min-height:100vh;display:flex;flex-direction:column}main{width:100%;flex:1}.credit{padding:8px 14px;text-align:right;font-size:11px;color:#707a81}

.timeline{display:flex;align-items:center;gap:12px;margin-top:8px}.timeline #progress{flex:1;min-width:0;width:auto;margin:0}.timeline-time{flex:none;color:#636f77;font-size:12px;font-variant-numeric:tabular-nums}

/* Keep each option label and its control in one clearly bounded group. */
.playback-options{gap:8px;align-items:stretch}
.playback-options .follow-option{min-height:42px;padding:7px 10px;gap:9px;border:1px solid #cbd3d8;border-radius:4px;background:#f9fbfc;color:#3d4f5b;box-shadow:inset 0 1px #fff}
.playback-options .follow-option select{margin-left:3px;min-width:68px;padding:4px 8px;background:#fff;border-color:#b9c6ce;font-size:12px}
.playback-options .follow-option input[type="checkbox"]{width:14px;height:14px}
.playback-options .follow-option.option-disabled{background:#eef0f2;border-color:#dde1e4;color:#969da3;box-shadow:none}
.playback-options .option-disabled select{background:#f3f4f5;color:#969da3;border-color:#d6dce0}
/* Suppress native focus outlines without changing keyboard focus. */
:focus { outline: none !important; }