/* Knowledge exercises: task + outcome beside a wide editor. */
body[data-ui-page=practice] .practice-workspace,.source-layout{grid-template-columns:minmax(260px,.8fr) minmax(0,2fr);grid-template-rows:auto 1fr;gap:16px;align-items:start}
#practiceTaskPanel,.source-task{grid-column:1;grid-row:1}
#practiceCodePanel,.source-editor{grid-column:2;grid-row:1 / span 2}
#practiceObservePanel,.source-observe{grid-column:1;grid-row:2}
.source-layout{grid-template-rows:auto}
.source-layout>.source-editor{grid-row:1}
.source-sidebar{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0;position:sticky;top:calc(var(--ui-nav-height,72px) + 16px);max-height:calc(100vh - var(--ui-nav-height,72px) - 32px);max-height:calc(100dvh - var(--ui-nav-height,72px) - 32px);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-color:var(--ui-dim) var(--ui-panel);border-radius:14px;padding:0 5px 4px 0}
.source-sidebar>.practice-panel{flex-shrink:0;min-width:0}
.source-sidebar{scroll-padding-block:56px 16px}
.source-sidebar::-webkit-scrollbar{width:12px}
.source-sidebar::-webkit-scrollbar-track{background:var(--ui-panel);border-radius:10px}
.source-sidebar::-webkit-scrollbar-thumb{background:var(--ui-dim);border:3px solid var(--ui-panel);border-radius:10px}
.source-sidebar:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
.source-sidebar-title{position:sticky;top:0;z-index:2;padding:10px 14px;background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:10px;color:var(--ui-dim);font-size:12px;line-height:1.5}
#practiceLessonTitle{font-size:24px;line-height:1.4;margin:0 0 16px}
#practiceScenarioTitle{font-size:15px;color:var(--ui-text);margin:20px 0 10px}
#practiceTarget{font-size:14px;line-height:1.8;margin:0 0 16px;padding:0;border:0;background:none}
.practice-disclosure{padding:13px 0;border-top:1px solid var(--ui-line);font-size:13px;line-height:1.65;color:var(--ui-dim)}
.practice-disclosure>summary{cursor:pointer;color:var(--ui-text);font-size:13px;font-weight:600}
.practice-disclosure :is(p,ul){margin-bottom:8px}
#practiceCodePanel>.practice-disclosure{padding:14px 16px}
#practiceCodePanel .practice-keil{padding:0;border:0;background:none}
#practiceCodePanel .hint{padding:10px 0;border:0;background:none}
#practiceCodePanel .hint h3{font-size:13px}
#practiceCodePanel .practice-status{margin:0}
#practiceCodePanel .practice-reference{white-space:pre;tab-size:4}
#practiceCancel:disabled{display:none}
#sourceProgress{font-size:12px;line-height:1.6;color:var(--ui-dim)}
.source-heading{margin:8px 0 18px}
.source-heading h1{margin:8px 0 0;font-size:26px}
.source-heading #sourceChapter{display:inline;margin-left:16px;font-size:12px}
.source-layout h2{margin:0 0 12px;font-size:16px}
.source-layout .practice-mode-buttons{margin:0 0 20px}
.source-layout #sourceGoal,.source-layout #sourceObserve{font-size:14px;line-height:1.8;margin:0 0 16px}
.source-layout .source-editor .editor-wrap{height:500px}
.source-layout .source-editor>.source-note:empty{display:none}
.source-layout .source-prediction{margin-top:12px}
.source-boundary{color:var(--ui-dim);font-size:12px!important;margin:8px 0}
.source-editor-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:0 16px}
.source-editor-footer .source-note{font-size:12px;margin:10px 0}
.source-editor-footer a{font-size:12px}
@media(max-width:950px){
 body[data-ui-page=practice] .practice-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
 #practiceTaskPanel,#practiceCodePanel,#practiceObservePanel{grid-column:auto;grid-row:auto}
 .source-layout{grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr)}
}
@media(max-width:760px){
 .source-layout{display:flex;flex-direction:column}
 .source-sidebar{position:static;max-height:none;overflow:visible;overscroll-behavior:auto;scrollbar-gutter:auto;padding:0}
 .source-sidebar-title{display:none}
 .source-layout .source-editor .editor-wrap{height:370px}
 .source-heading #sourceChapter{display:block;margin:10px 0 0}
 .source-heading h1{font-size:23px}
}