/* Shared St Bernadette identity: compact navigation and consistent page graphics. */
:root{--green:#005039;--blue:#009ff2;--ink:#163d30;--muted:#686482;--line:#d9eaf0;--soft:#eff9f3;--bluewash:#edf8ff;--header-height:64px}
header{min-height:64px;padding:7px 28px;gap:20px}
header .school{min-width:280px;font-size:18px;line-height:1.08;gap:10px;padding-right:18px;letter-spacing:-.3px}
header .school img{width:43px;height:48px}
header nav{gap:13px}header nav a{font-size:13px;gap:6px;padding:8px 0 7px;font-weight:600}
header .nav-graphic{width:23px;height:23px}
header .unit-selector{font-size:10px}.unit-selector button{padding:6px 8px}
body.homepage #app{padding-top:12px}
.hp-introtext{grid-template-rows:var(--heading-height) 74px 64px!important;align-content:center;gap:12px}
.hp-eyebrow{display:none!important}
.hp-footer{color:#79728d}
#app>.pageTop{padding:1px 0 14px;margin-bottom:15px;border-bottom:1px solid var(--line);gap:16px;align-items:center}
.page-brand-art{width:64px;height:64px;object-fit:contain;flex:0 0 64px}
.page-heading-copy{flex:1;min-width:0}
.pageTop h1{font:750 29px/1.15 Outfit,Arial,sans-serif;letter-spacing:-.7px;color:#00452f;margin:5px 0 8px}
.pageTop p{font-size:13px;line-height:1.55;max-width:930px;color:#696480}
h2,h3,h4{font-family:Outfit,Arial,sans-serif;color:#005039}
h2{font-weight:700}h3{font-weight:650}
.tabs{gap:5px;border-color:#d6eaf0;margin-bottom:18px}.tabs a{display:flex;align-items:center;gap:7px;font:600 13px Outfit,Arial,sans-serif;padding:9px 13px;color:#365d50}.tabs a.active{color:#009ff2;border-bottom-color:#009ff2;background:#f0faff;border-radius:6px 6px 0 0}.tabs img{width:21px;height:21px;object-fit:contain}
.btn{font-family:Outfit,Arial,sans-serif;font-weight:650;background:#00543a;color:white;border-radius:7px}
.btn.subtle{background:#f0f9f5;color:#00543a;border-color:#d3e7df}.btn.blue{background:#009ff2}.btn:hover:not(:disabled){filter:brightness(.96)}
.goal{border:1px solid #def0e3;background:#f0faf4;color:#235b45;font-size:11px}
.lessonNav{border-color:#d9eaf0}.lessonNav>a.active{background:#eaf7ff;color:#008edb}.lessonNav>a{font-size:12px;color:#686482}
.block{padding:19px 0;border-color:#d9eaf0}.block h2{font-size:21px}.block p{font-size:14px;line-height:1.7;max-width:970px}.block pre,.code{border-color:#d8e9e2;background:#f7fbf8;color:#133c2e}
.check{background:#edf8fe;border:1px solid #d5edfb;border-left:4px solid #11a6ec;border-radius:7px;padding:14px 16px}.check label{font-family:Outfit,Arial,sans-serif;font-size:13px;color:#00543a}.check input,.check select{border-color:#bfdfed;background:white}
.instructions{background:#fff}.instructions .eyebrow{color:#008ed9;letter-spacing:1.4px}.taskPills button{font-family:Outfit,Arial,sans-serif;border-radius:5px;border-color:#d6e8e0;background:#f4faf6}.taskPills button.active{background:#e8f7ff;border-color:#00a1ef;color:#007aba}.taskInstructions h2{font-size:22px}.taskInstructions h4{font-size:15px}.taskInstructions p{font-size:14px;line-height:1.65;color:#676180}
.practiceWorkspace{border-color:#badfd3;border-radius:10px}.splitter{background:#d4e8df}.splitter:hover{background:#69c4ec}
.question{border-color:#d8eaf0}.question h3{font-size:16px;font-weight:650}.question .qtype{color:#008fcc}.option{border-radius:7px;border-color:#cfe3dc;background:#fff}.option:hover{background:#f4faf7}.option.selected{border-color:#09a0e7;background:#edf8ff}.question .code{background:#f6fbf8}.orderList li{background:#f0f8f4;border-color:#d2e7db}
.resourceGrid{gap:20px}.resource{position:relative;border-color:#d1e7dc;border-radius:10px;padding:21px;background:linear-gradient(135deg,#fff 78%,#f2faf5)}.resource-art{float:right;width:66px;height:66px;object-fit:contain;margin:0 0 10px 14px}.resource h2{font-size:21px}.resource ul{font-size:13px;line-height:1.7;padding-left:20px;color:#676180}.resource .eyebrow{color:#008dca}
.challengeCard{border-color:#cde6dc;border-radius:10px;background:linear-gradient(145deg,#fff 80%,#f2faf6);padding:19px}.challengeCard h3{font-size:18px}.challengeCard p{font-size:13px;line-height:1.65}.difficulty{color:#006348;background:#e5f5ed;border:1px solid #d4ebdf;font-family:Outfit,sans-serif;font-size:11px}.filters select,.filters input{border-color:#cae1d7;border-radius:6px}
.plcTable th{font-family:Outfit,Arial,sans-serif;font-size:12px;font-weight:650;color:#00543a;background:#edf8ff}.plcTable tr:nth-child(even){background:#f6fbf8}.plcTable td{border-color:#d8e9df}.plcTable td:first-child{color:#365c4d}.plcTable select,.plcTable input{border-color:#c8e0d2;border-radius:5px}
.term{border-color:#d7eae0}.term h3{font-size:18px}.term p{font-size:13px;line-height:1.65;color:#676180}.term code{color:#0086c9;background:#edf8ff;padding:4px 7px;border-radius:4px;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.footer{border-color:#d8e9ef;color:#827995;font-family:Outfit,Arial,sans-serif}
@media(max-width:1250px){header{padding:6px 18px;gap:12px;min-height:58px}header .school{min-width:238px;font-size:15px;gap:9px}header .school img{width:38px;height:44px}header nav{gap:8px}header nav a{font-size:11px;gap:4px;padding:7px 0 6px}header .nav-graphic{width:21px;height:21px}.unit-selector button{padding:5px 7px}.pageTop h1{font-size:26px}}
@media(max-width:950px){header{gap:6px 12px}header .school{min-width:230px;flex:1}header nav{flex-basis:100%;order:3;gap:14px;justify-content:space-between}header nav a{font-size:11px;padding:5px 0 4px}.hp-introtext{grid-template-rows:116px 58px 54px!important;gap:9px}.page-brand-art{width:55px;height:55px;flex-basis:55px}#app>.pageTop{align-items:flex-start}.pageTop h1{font-size:25px}}
@media(max-width:650px){header{padding:6px 13px;gap:5px 8px}header .school{min-width:190px;font-size:12px;padding-right:0;border-right:0;gap:7px}header .school img{width:31px;height:36px}header nav{gap:13px;justify-content:flex-start;overflow:auto}header nav a{font-size:9px;gap:3px;padding:3px 0}.nav-graphic,header .nav-graphic{width:20px;height:20px}.unit-selector{font-size:8px!important}.unit-selector button{padding:5px 6px}.hp-introtext{grid-template-rows:90px 65px 51px!important;gap:8px}.page-brand-art{width:45px;height:45px;flex-basis:45px}#app>.pageTop{gap:10px;flex-wrap:wrap}.page-heading-copy{flex-basis:calc(100% - 65px)}.pageTop h1{font-size:23px}.pageTop>.row{max-width:100%;margin-left:55px}.tabs a{font-size:11px;padding:8px 9px;gap:5px}.tabs img{width:17px;height:17px}.resource-art{width:55px;height:55px}.question h3{font-size:15px}}
/* Readable reference headings and clear navigation affordances. */
.hp-introtext h1{font-family:Outfit,Arial,sans-serif;font-weight:800;letter-spacing:-1.4px}
.hp-lessonheading h2,.hp-intermediate .hp-lessonheading h2{font-family:Outfit,Arial,sans-serif;font-weight:700;letter-spacing:-.2px;line-height:1.22}
.pageTop h1{font-weight:700;letter-spacing:-.5px}.block h2{font-weight:700;letter-spacing:-.2px}.term h3,.resource h2,.question h3{letter-spacing:-.15px}
header nav a{border-radius:5px 5px 0 0;transition:background-color .15s,color .15s,border-color .15s;position:relative}
header nav a:hover,header nav a:focus-visible{background:#def3ff;color:#0079ba;border-bottom-color:#009ff2;box-shadow:0 0 0 6px #def3ff}
header nav a.active:hover{background:#d4efff;box-shadow:0 0 0 6px #d4efff}
header .unit-selector button:hover{background:#def3ff;color:#00608f}.unit-selector button.active:hover{background:#0085d7;color:white}
.lesson-visual{grid-column:2;grid-row:1/5;width:220px;height:220px;object-fit:contain;align-self:center;justify-self:center}
.block.with-visual{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:22px;align-items:start}
.block.with-visual>h2{grid-column:1;grid-row:1}.block.with-visual>p{grid-column:1;grid-row:2}.block.with-visual>pre{grid-column:1;grid-row:3}.block.with-visual>button{grid-column:1;grid-row:4;justify-self:start}.block.with-visual>.check{grid-column:1/-1;grid-row:5}
@media(max-width:950px){.block.with-visual{grid-template-columns:minmax(0,1fr) 170px;column-gap:15px}.lesson-visual{width:170px;height:170px}}
@media(max-width:650px){.block.with-visual{display:block}.lesson-visual{display:block;width:160px;height:160px;margin:0 auto 12px}.block.with-visual>button{margin-bottom:0}header nav a:hover,header nav a:focus-visible{box-shadow:0 0 0 3px #def3ff}}
/* Keep working pages compact; reserve space for teaching and coding. */
body:not(.homepage) #app{padding:14px 28px 24px}
body:not(.homepage) #app>.pageTop{padding:0 0 10px;margin-bottom:11px;gap:12px}
.page-brand-art{width:54px;height:54px;flex-basis:54px}
.pageTop h1{font-size:27px;margin:3px 0 6px;line-height:1.15}
.pageTop .eyebrow{font-size:10px;letter-spacing:1.3px}.pageTop p{margin:3px 0 0;font-size:13px;line-height:1.45}.pageTop .back{font-size:11px}
.tabs{margin-bottom:12px}.tabs a{padding-top:7px;padding-bottom:7px}
.goals{margin:7px 0 10px;gap:5px}.goal{padding:4px 8px}
.block{padding:15px 0}.block h2{margin:3px 0 10px}.block p{margin:5px 0 11px}.block pre{margin:7px 0 11px}.check{margin-top:11px;padding:11px 13px}
.lessonNav a{padding:8px 9px;margin-bottom:2px}.lessonLayout{gap:23px}
.filters{margin:11px 0 16px;gap:10px}.challengeGrid{gap:15px}.resourceGrid{gap:16px}.resource{padding:17px}.resource h2{margin:5px 0 11px}.resource ul{margin:9px 0 13px}
.question{padding:19px 0}.quizHead h2{margin:3px 0 7px}.quizHead p{margin:4px 0 9px}.progressDots{margin-top:9px}
.term{padding:14px 0}.footer{margin-top:23px;padding-top:13px}
@media(max-width:650px){body:not(.homepage) #app{padding:12px 15px 20px}.pageTop h1{font-size:22px}.page-brand-art{width:40px;height:40px;flex-basis:40px}.pageTop>.row{margin-left:50px}.page-heading-copy{flex-basis:calc(100% - 52px)}.block{padding:13px 0}.lesson-visual{width:135px;height:135px;margin-bottom:8px}}
.ide.ide-dark .btn{background:var(--green);color:#0a2c20}
.ide.ide-dark .btn.subtle{background:var(--soft);color:var(--green);border-color:var(--line)}
/* Lesson knowledge follows one compact, readable editorial pattern. */
.lesson-introduction{margin:0 0 10px;padding:0 0 7px;border-bottom:1px solid #e2eee8}.lesson-introduction h2{font:700 19px/1.25 Outfit,Arial,sans-serif;margin:0 0 7px}.lesson-introduction p{font-size:14px;line-height:1.65;margin:5px 0;color:#625e77}.lesson-introduction .key-words{font-size:12px;color:#517165;margin-top:7px}
.knowledge-explanation p{font-size:14px;line-height:1.7;margin:6px 0 12px;max-width:980px;color:#615d75}
.example-window{margin:10px 0 13px;border:3px solid #00533c;border-radius:10px;overflow:hidden;background:#f0faff;min-width:0;max-width:100%}
.example-bar{background:#00533c;color:#e5f5ee;height:31px;display:flex;align-items:center;gap:15px;padding:0 13px;font:11px Outfit,Arial,sans-serif;letter-spacing:.3px}.example-bar>span:first-child{display:flex;gap:8px}.example-bar i{display:block;width:9px;height:9px;border-radius:50%;background:#05afea}.example-bar i:nth-child(2){background:#00b55c}.example-bar i:nth-child(3){background:#4ecc60}
.example-code-panel{padding:9px 9px 0}.example-code-panel pre{margin:0!important;padding:13px 15px!important;background:#fff!important;border:1px solid #b9def2!important;border-radius:5px!important;white-space:pre;overflow-x:auto;font:13px/1.75 Consolas,'Liberation Mono',monospace!important;color:#101b15;letter-spacing:0}
.example-output-panel{margin:9px;padding:10px 14px;border:1px solid #b9def2;border-radius:5px;background:#e5f5fd}.example-output-heading{display:flex;align-items:center;gap:10px;font:600 12px Outfit,Arial,sans-serif;color:#77709b}.example-play{width:0;height:0;border-left:13px solid #00533c;border-top:8px solid transparent;border-bottom:8px solid transparent;flex-shrink:0;border-radius:2px}.example-output-heading small{font:11px Arial,sans-serif;color:#6b7e84;margin-left:auto}
.example-output-panel pre{margin:7px 0 0 23px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;font:13px/1.6 Consolas,'Liberation Mono',monospace!important;white-space:pre-wrap;color:#152720;overflow-wrap:anywhere}
.py-comment{color:#777684}.py-string{color:#e01020}.py-keyword{color:#004cff}.py-number{color:#008c25}
.worked-walkthrough h3{font:650 15px/1.3 Outfit,Arial,sans-serif;margin:5px 0 7px}.worked-walkthrough ol{font-size:13px;color:#625e76;line-height:1.65;margin:5px 0 10px;padding-left:23px}.worked-walkthrough li{padding-left:3px;margin-bottom:3px}.worked-walkthrough li::marker{color:#008dc8;font-weight:700}.common-mistake{font-size:13px!important;line-height:1.6!important;margin:7px 0 11px!important;color:#625e76}.common-mistake strong{color:#00533c}
.block.with-visual>.knowledge-explanation{grid-column:1;grid-row:2}.block.with-visual>.example-window{grid-column:1/-1;grid-row:3}.block.with-visual>.worked-walkthrough{grid-column:1/-1;grid-row:4}.block.with-visual>.lesson-visual{grid-column:2;grid-row:1/3;align-self:center}
@media(max-width:650px){.example-bar{height:28px;font-size:10px}.example-code-panel{padding:6px 6px 0}.example-code-panel pre{font-size:11px!important;padding:10px!important}.example-output-panel{margin:6px;padding:8px 10px}.example-output-panel pre{font-size:11px!important;margin-left:20px!important}.example-output-heading{font-size:11px;gap:7px;flex-wrap:wrap}.example-output-heading small{margin-left:20px}.knowledge-explanation p{font-size:14px}.lesson-introduction h2{font-size:18px}}
/* Keep the original lesson heading visible beneath the navigation. */
.lesson-top-panel{position:sticky;top:var(--nav-height,64px);z-index:30;background:#fff;padding:0 0 1px;margin:0 0 13px}
.lesson-top-panel>.pageTop{padding:0 0 10px;margin:0 0 8px;border-bottom:1px solid #d9eaf0;gap:12px;align-items:center}
.lesson-top-panel .tabs{margin:0;overflow-x:auto;white-space:nowrap;background:#fff}
.lesson-top-panel .tabs a{flex-shrink:0}
.lesson-introduction{padding:0 0 13px;margin-bottom:0}.lesson-introduction h2{font-size:20px;margin-bottom:6px}.lesson-introduction>p{font-size:13px;line-height:1.65;max-width:900px;margin:4px 0 9px}.learning-objectives{margin:8px 0 14px;padding-left:20px;color:#416154;font-size:13px;line-height:1.65}.learning-objectives li{margin:4px 0;padding-left:4px}.learning-objectives li::marker{color:#08a4d9}
.lesson-keywords{border:1px solid #d9e9e1;border-radius:8px;background:#fff;margin:10px 0 0;overflow:hidden}.lesson-keywords summary{list-style:none;display:flex;align-items:center;gap:9px;padding:10px 13px;color:#00543a;font:600 13px Outfit,Arial,sans-serif}.lesson-keywords summary::-webkit-details-marker{display:none}.lesson-keywords summary:hover{background:#f1faff}.keyword-book{color:#009ade;font:700 14px Consolas,monospace}.keyword-count{font:11px Arial,sans-serif;color:#809187;margin-left:2px}.keyword-chevron{width:7px;height:7px;border-right:2px solid #488574;border-bottom:2px solid #488574;transform:rotate(45deg);margin-left:auto;margin-right:4px;transition:transform .15s}.lesson-keywords[open] .keyword-chevron{transform:rotate(225deg)}.lesson-keywords[open] summary{border-bottom:1px solid #dcece3;background:#f4fbf7}.lesson-keywords dl{margin:0;padding:0 14px}.lesson-keywords dl>div{display:grid;grid-template-columns:145px minmax(0,1fr);gap:15px;padding:10px 0;border-bottom:1px solid #edf2ef;font-size:12px;line-height:1.6}.lesson-keywords dl>div:last-child{border:0}.lesson-keywords dt{font-weight:600;color:#00583d}.lesson-keywords dd{margin:0;color:#656479}
.lessonLayout .block{scroll-margin-top:calc(var(--nav-height,64px) + var(--lesson-top-height,190px) + 10px)}
 .keyword-preview{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;flex:1;font:12px/1.5 Arial,sans-serif;color:#537466}.keyword-preview>span{white-space:nowrap}.lesson-keywords summary>strong{font-weight:600;white-space:nowrap}.lesson-keywords dd{font-size:13px;line-height:1.65}
@media(max-width:650px){.lesson-top-panel>.pageTop{gap:10px}.lesson-top-panel .tabs{gap:0}.lesson-top-panel .tabs a{padding:7px 8px;font-size:10px;gap:4px}.lesson-top-panel .tabs img{width:16px;height:16px}.lesson-keywords summary{flex-wrap:wrap;gap:7px}.keyword-preview{order:4;flex-basis:100%;padding-left:25px;gap:5px 12px}.lesson-keywords dl>div{grid-template-columns:95px minmax(0,1fr);gap:9px}.lesson-keywords dd{font-size:12px}}
/* Lesson tabs respond without moving surrounding content. */
.lesson-top-panel .tabs a{border-radius:6px 6px 0 0;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.lesson-top-panel .tabs a:hover,.lesson-top-panel .tabs a:focus-visible{background:#def3ff;color:#007ab8;border-bottom-color:#009ff2}
.lesson-top-panel .tabs a.active:hover{background:#d0edff;color:#006ea8;border-bottom-color:#0088d4}
@media(prefers-reduced-motion:reduce){.lesson-top-panel .tabs a,.keyword-chevron{transition:none}}
/* Workbook side panels use matching blue edge controls. */
body.lesson-reading #app{max-width:none;padding-left:18px;padding-right:42px}.lesson-reading .lessonLayout{grid-template-columns:32px minmax(0,1fr);gap:18px;transition:margin-right .2s ease}.lesson-reading .lessonLayout.outline-open{grid-template-columns:205px minmax(0,1fr)}.lesson-reading .contentPane{max-width:1100px;width:100%;margin:0 auto;min-width:0}
.lesson-outline{align-self:start;position:sticky;top:calc(var(--nav-height,64px) + var(--lesson-top-height,150px) + 14px);max-height:calc(100dvh - var(--nav-height,64px) - var(--lesson-top-height,150px) - 30px);overflow:auto;scrollbar-width:thin}.outline-tab,.ide-edge-tab{display:flex;align-items:center;justify-content:center;gap:10px;background:#009be6;color:#fff;border:1px solid #0088cf;font:600 12px Outfit,Arial,sans-serif;box-shadow:0 2px 5px #005d8d16}.outline-tab{width:32px;min-height:150px;writing-mode:vertical-rl;padding:12px 5px;border-radius:7px}.outline-tab img,.ide-edge-tab img{width:22px;height:22px;object-fit:contain}.outline-tab b{font:20px Arial,sans-serif}.outline-tab:hover,.ide-edge-tab:hover{background:#007eba}.outline-tab[aria-expanded=true]{writing-mode:horizontal-tb;min-height:40px;width:100%;padding:8px 10px;justify-content:flex-start}.outline-tab[aria-expanded=true] b{margin-left:auto;transform:rotate(180deg)}.lessonNav{display:block!important;border:1px solid #d6e8f1;border-top:0;border-radius:0 0 7px 7px;padding:10px 7px;background:#fff}.lessonNav[hidden]{display:none!important}.lessonNav .eyebrow{font-size:9px;letter-spacing:1px;padding:3px 8px}.lessonNav a{font-size:11px;white-space:normal;border:0;line-height:1.5}.lessonNav a:hover{background:#e9f7ff;color:#007bb8}
.ide-edge-tab{position:fixed;z-index:35;right:0;top:50%;writing-mode:vertical-rl;padding:14px 6px;min-height:153px;border-radius:8px 0 0 8px;width:34px}.ide-edge-tab b{font:22px Arial,sans-serif}.lesson-ide-open .ide-edge-tab{display:none}
.lesson-dock[hidden]{display:none!important}.lesson-dock{position:fixed;z-index:35;right:0;top:calc(var(--nav-height,64px) + var(--lesson-top-height,150px) + 14px);bottom:0;width:var(--lesson-ide-width,45vw);display:grid;grid-template-columns:9px minmax(0,1fr);background:#fff;border-top:1px solid #9ad6f4;box-shadow:-4px 0 14px #0049670e;animation:lesson-slide-in .2s ease-out}.lesson-dock-body{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid #bce5f6}.lesson-dock-heading{display:flex;align-items:center;gap:9px;flex:0 0 41px;padding:6px 12px;background:#eaf7ff;border-bottom:1px solid #bce5f6;color:#00543a;font:600 14px Outfit,Arial,sans-serif}.lesson-dock-heading img{height:27px;width:27px;object-fit:contain}.lesson-dock-heading button{margin-left:auto;font:600 11px Outfit,Arial,sans-serif;background:#fff;color:#007cb9;border:1px solid #c1e5f4;border-radius:5px;padding:5px 8px}.lesson-dock-heading button:hover{background:#d2efff}.lesson-dock .ide{flex:1;min-height:0;grid-template-rows:43px minmax(70px,var(--editor-height,50%)) 8px minmax(80px,1fr);border-radius:0}.lesson-dock .ideToolbar{flex-wrap:nowrap;overflow-x:auto;flex-shrink:0}.lesson-dock .ideActions{flex-wrap:nowrap;white-space:nowrap}.lesson-dock .ideToolbar>span{white-space:nowrap;font-size:10px}.lesson-dock #saveIndicator{display:none}.lesson-dock .ideActions button{font-size:10px;padding:4px 6px}.lesson-dock .console{min-height:0;overflow:auto}
.lesson-dock-resizer{cursor:col-resize;touch-action:none;background:#d9f0fc;position:relative}.lesson-dock-resizer:after{content:'';position:absolute;top:48%;height:44px;width:3px;border-radius:3px;background:#009ee6;left:3px}.lesson-dock-resizer:hover,.lesson-dock-resizer:focus-visible{background:#a2ddfb}.resizing-lesson{cursor:col-resize;user-select:none}.resizing-lesson .lessonLayout{transition:none}.lesson-ide-open .lessonLayout{margin-right:calc(var(--lesson-ide-width,45vw) - 23px)}.lesson-ide-open .block.with-visual{grid-template-columns:minmax(0,1fr) 150px;gap:12px}.lesson-ide-open .block.with-visual .lesson-visual{width:150px;height:150px}
@keyframes lesson-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(max-width:1050px){.lesson-ide-open .lessonLayout.outline-open{grid-template-columns:150px minmax(0,1fr)}.lesson-ide-open .block.with-visual{display:block}.lesson-ide-open .block.with-visual .lesson-visual{float:right;width:100px;height:100px}.lesson-ide-open .lessonLayout{gap:9px}.lesson-dock .ideToolbar{padding:5px}}
@media(max-width:799px){body.lesson-reading #app{padding-left:10px;padding-right:38px}.lesson-reading .lessonLayout{gap:9px}.lesson-reading .lessonLayout.outline-open{grid-template-columns:145px minmax(0,1fr)}.lesson-dock{width:90vw!important;top:var(--nav-height,64px)}.lesson-ide-open .lessonLayout{margin-right:0}.lesson-dock .ideToolbar>span{display:none}.lesson-dock .ideActions{width:100%;justify-content:space-between}.lesson-dock-heading{flex-basis:38px}.lesson-dock-resizer{display:none}.lesson-dock{grid-template-columns:1fr}.lesson-dock-body{grid-column:1}.ide-edge-tab{width:29px;font-size:11px}.outline-tab{font-size:11px}.lesson-reading .lesson-top-panel{margin-right:-25px}}
@media(prefers-reduced-motion:reduce){.lesson-dock{animation:none}.lesson-reading .lessonLayout{transition:none}}
.practical-instructions-toggle{display:flex;align-items:center;gap:8px;width:100%;background:#009be6;color:white;padding:8px 10px;font:600 12px Outfit,Arial,sans-serif;border-radius:6px;margin-bottom:12px}.practical-instructions-toggle img{width:23px;height:23px;object-fit:contain}.practical-instructions-toggle b{margin-left:auto;font:20px Arial,sans-serif}.practical-instructions-toggle:hover{background:#007eba}.practiceWorkspace.instructions-collapsed{grid-template-columns:34px 8px minmax(0,1fr)}.instructions-collapsed>.instructions{padding:0;overflow:hidden}.instructions-collapsed>.instructions>:not(.practical-instructions-toggle){display:none}.instructions-collapsed .practical-instructions-toggle{writing-mode:vertical-rl;min-height:183px;width:34px;border-radius:0;margin:0;padding:12px 5px}.instructions-collapsed .practical-instructions-toggle b{margin:0}
@media(max-width:799px){.practiceWorkspace.instructions-collapsed{display:grid;min-height:550px}.instructions-collapsed .ide{min-height:0}}
/* One edge control collapses the complete lesson, including its guide and text. */
body.lesson-reading #app{padding-left:42px}.lesson-reading .lessonLayout,.lesson-reading .lessonLayout.outline-open{grid-template-columns:205px minmax(0,1fr);gap:23px}.lessonLayout[hidden]{display:none!important}.lesson-outline{position:sticky}.lesson-outline .lessonNav{border-top:1px solid #d6e8f1;border-radius:7px}.lesson-content-tab.ide-edge-tab{left:0;right:auto;top:50%;width:34px;min-height:153px;border-radius:0 8px 8px 0;display:flex!important}.lesson-content-collapsed .lesson-dock{width:calc(100vw - 34px)!important}.lesson-content-collapsed .lesson-dock-resizer{visibility:hidden}.lesson-content-collapsed .footer{display:none}.lesson-ide-open .lessonLayout{grid-template-columns:160px minmax(0,1fr);gap:15px}
/* Keep the output clear to the bottom; queued input is an optional toolbar popover. */
.ide{position:relative}.ide #runtimeStatus{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0!important}.ide .fallback[hidden],.ide #queuedInputsToggle[hidden]{display:none!important}.ide .fallback{position:absolute;z-index:15;right:8px;top:44px;width:min(390px,calc(100% - 16px));padding:12px;background:var(--panel);color:var(--ink);border:1px solid #9cd7ef;border-radius:7px;box-shadow:0 4px 20px #003d5a20}.queued-input-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-family:Outfit,Arial,sans-serif;font-size:13px;color:var(--green)}.queued-input-heading button{background:var(--soft);border-radius:4px;color:var(--ink);font-size:19px;line-height:1;padding:3px 7px}.ide .fallback textarea{height:90px;margin-bottom:5px}.ide .consoleText{flex:1;min-height:0}.ide .console{padding-bottom:0}.lesson-dock .ideToolbar{overflow:visible}.lesson-dock .ideActions{gap:3px}
@media(max-width:1050px){.lesson-ide-open .lessonLayout{grid-template-columns:minmax(0,1fr)}.lesson-ide-open .lesson-outline{position:static;max-height:none}.lesson-ide-open .lessonNav{display:flex!important;flex-wrap:wrap;gap:0}.lesson-ide-open .lessonNav .eyebrow{flex-basis:100%}.lesson-ide-open .lessonNav a{padding:5px 7px}}
@media(max-width:799px){body.lesson-reading #app{padding-left:38px}.lesson-reading .lessonLayout,.lesson-reading .lessonLayout.outline-open{grid-template-columns:minmax(0,1fr);gap:12px}.lesson-outline{position:static;max-height:none}.lesson-content-tab.ide-edge-tab{width:29px}.lesson-content-collapsed .lesson-dock{width:calc(100vw - 29px)!important}.lesson-content-collapsed .lesson-dock-resizer{display:none}.ide .ideToolbar{overflow-x:auto}.lesson-dock .ideToolbar{overflow-x:auto}}
.ide-edge-tab,.lesson-content-tab.ide-edge-tab{top:50%;transform:translateY(-50%);height:180px;min-height:180px}.ide-edge-tab span{white-space:nowrap}
/* Slim lesson title and blue lesson-to-lesson navigation. */
.lesson-top-panel>.pageTop{min-height:44px;padding:0 0 6px;margin:0 0 3px;gap:12px}.lesson-top-panel .page-brand-art{width:38px;height:38px;flex-basis:38px}.lesson-top-panel .pageTop h1{font-size:23px;line-height:1.2;margin:0}.lesson-top-panel .tabs a{padding-top:5px;padding-bottom:5px}.lesson-top-panel{margin-bottom:10px}.lesson-step-navigation{display:flex;align-items:center;gap:4px;flex-shrink:0}.lesson-step-button{display:flex;align-items:center;justify-content:center;gap:4px;background:#009ff2;color:#fff;text-decoration:none;font:600 11px Outfit,Arial,sans-serif;border:1px solid #0094df;padding:6px 9px;min-height:30px;border-radius:0 7px 7px 0;white-space:nowrap;transition:background-color .15s}.lesson-step-button:first-child{border-radius:7px 0 0 7px}.lesson-step-button:only-child{border-radius:7px}.lesson-step-button:hover,.lesson-step-button:focus-visible{background:#007bbd;border-color:#007bbd}.lesson-step-button svg{width:15px;height:15px}
.program-name-wrap{display:flex;align-items:center;gap:5px;min-width:0}.program-name{background:transparent;color:var(--green);border:1px solid transparent;border-radius:4px;padding:3px 5px;font:600 12px Outfit,Arial,sans-serif;width:140px;min-width:75px;max-width:100%;text-overflow:ellipsis}.program-name:hover{background:var(--panel);border-color:#bddfe9}.program-name:focus{outline:2px solid #009ff2;outline-offset:0;background:var(--panel);border-color:transparent}.lesson-dock .ideToolbar>.program-name-wrap{display:flex!important;min-width:95px;flex:1}.lesson-dock .program-name{width:135px;min-width:75px}.lesson-dock .ideActions{flex-shrink:0}
@media(max-width:950px){.lesson-top-panel>.pageTop{gap:8px}.lesson-top-panel .pageTop h1{font-size:21px}.lesson-step-button{font-size:10px;padding:5px 7px}.lesson-dock .program-name{width:105px}}
@media(max-width:650px){.lesson-top-panel>.pageTop{flex-wrap:nowrap;min-height:39px;gap:7px}.lesson-top-panel .page-brand-art{width:29px;height:29px;flex-basis:29px}.lesson-top-panel .page-heading-copy{flex:1;min-width:0}.lesson-top-panel .pageTop h1{font-size:17px}.lesson-step-navigation{gap:3px}.lesson-step-button{padding:5px;min-width:27px;min-height:27px}.lesson-step-button span{display:none}.lesson-step-button svg{height:15px;width:15px}.lesson-dock .ideToolbar>.program-name-wrap{flex:0 0 95px}.lesson-dock .program-name{width:95px}.lesson-dock .ideActions{width:auto}.lesson-dock .ideToolbar{overflow-x:auto}}
.lesson-step-button{background:#00543a;border-color:#00543a}.lesson-step-button:hover,.lesson-step-button:focus-visible{background:#003e2b;border-color:#003e2b}
.py-variable{color:#111827}
/* A single blue toolbar holds every editor control. */
.ide .ideToolbar{background:#eaf7ff;border-bottom-color:#bce5f6;gap:8px}.ide .dock-collapse{display:none}.lesson-dock .dock-collapse{display:inline-flex}.lesson-dock .ide{flex:1;height:100%}.lesson-dock .ideToolbar{padding:6px 9px;overflow-x:auto;overflow-y:hidden}.lesson-dock .ideActions{gap:4px}.lesson-dock .program-name{width:130px}.lesson-dock .ideToolbar>.program-name-wrap{min-width:90px;flex:1}.ide.ide-dark .ideToolbar{background:var(--bluewash);border-color:var(--line)}
@media(max-width:799px){.lesson-dock .program-name{width:95px}.lesson-dock .ideToolbar>.program-name-wrap{flex:0 0 95px}}
/* Independent, compact guide control. */
.lesson-outline{position:sticky}.guide-collapse{position:absolute;right:7px;top:7px;z-index:2;width:23px;height:23px;padding:0;display:grid;place-items:center;font:17px/1 Arial,sans-serif;color:#007caf;background:#eaf7ff;border:1px solid #cce7f4;border-radius:5px}.guide-collapse:hover{background:#ccecff;color:#00543a}.lesson-outline .lessonNav>.eyebrow{display:block;padding-right:25px;padding-top:5px}.lesson-reading .lessonLayout.guide-collapsed,.lesson-reading.lesson-ide-open .lessonLayout.guide-collapsed{grid-template-columns:30px minmax(0,1fr);gap:13px}.guide-collapsed .lesson-outline{min-height:34px}.guide-collapsed .guide-collapse{right:2px;top:0}.guide-collapsed #lessonOutlineLinks{display:none!important}
@media(max-width:1050px){.lesson-ide-open .guide-collapse{top:7px}.lesson-ide-open .guide-collapsed .guide-collapse{top:0}}
@media(max-width:799px){.lesson-reading .lessonLayout.guide-collapsed{grid-template-columns:30px minmax(0,1fr)}.guide-collapse{top:7px}.guide-collapsed .guide-collapse{top:0}}
/* Each open panel has a collapse control; only closed panels show an edge tab. */
.lesson-content-tab.ide-edge-tab,.ide-edge-tab{display:flex!important;transition:opacity .18s ease,visibility .18s ease;opacity:1;visibility:visible}
.lesson-reading:not(.lesson-content-collapsed) .lesson-content-tab.ide-edge-tab,.lesson-ide-open #lessonIDEOpen{opacity:0;visibility:hidden;pointer-events:none}
.lesson-content-collapse{position:fixed;z-index:34;top:calc(var(--nav-height,64px) + var(--lesson-top-height,100px) + 13px);right:43px;display:inline-flex;align-items:center;justify-content:center;background:#eaf7ff;color:#007caf;border:1px solid #c1e4f5;border-radius:5px;padding:5px 9px;font:600 11px Outfit,Arial,sans-serif;min-height:29px}.lesson-content-collapse:hover{background:#ccecff;color:#00543a}.lesson-content-collapse[hidden]{display:none!important}.lesson-ide-open .lesson-content-collapse{right:calc(var(--lesson-ide-width,45vw) + 12px)}.lesson-reading .contentPane{padding-top:35px}.lesson-dock{animation:none}.lesson-content-collapsed .lesson-dock{width:calc(100vw - 34px)!important}
@media(max-width:799px){.lesson-content-collapse{right:38px}.lesson-ide-open .lesson-content-collapse{right:38px;z-index:34}.lesson-reading .contentPane{padding-top:35px}}
@media(prefers-reduced-motion:reduce){.lesson-content-tab.ide-edge-tab,.ide-edge-tab{transition:none}}
.lesson-reading .contentPane{padding-top:0}.lesson-introduction h2{padding-right:100px}
/* Expanded keywords pair a plain definition with a compact Python example. */
.keyword-preview,.keyword-preview>span{font-weight:700;color:#00543a}.lesson-keywords summary>strong{font-weight:700}.lesson-keywords dl>div{grid-template-columns:130px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0}.lesson-keywords dt{font-weight:700;padding-top:3px}.lesson-keywords .keyword-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.9fr);gap:18px;align-items:start}.keyword-detail>p{margin:0;font:13px/1.65 Arial,sans-serif;color:#656479}.keyword-code{border:1px solid #c1e0d5;border-radius:6px;overflow:hidden;min-width:0;background:#fff}.keyword-code>span{display:block;background:#eaf7ff;color:#00628c;font:600 10px Outfit,Arial,sans-serif;padding:4px 8px;border-bottom:1px solid #cce7f4}.keyword-code pre{font:12px/1.6 Consolas,'Liberation Mono',monospace;margin:0;padding:8px 10px;white-space:pre;overflow-x:auto;color:#111827}.keyword-code code{font:inherit}.lesson-keywords dd{font-weight:400}
@media(max-width:1050px){.lesson-ide-open .lesson-keywords .keyword-detail{grid-template-columns:minmax(0,1fr)}.lesson-ide-open .lesson-keywords dl>div{grid-template-columns:100px minmax(0,1fr)}}
@media(max-width:650px){.lesson-keywords dl>div{grid-template-columns:85px minmax(0,1fr);gap:10px}.lesson-keywords .keyword-detail{grid-template-columns:minmax(0,1fr);gap:9px}.keyword-code pre{font-size:11px}.keyword-detail>p{font-size:12px}}
/* The two edge labels are persistent, simple toggles. */
.lesson-reading #lessonContentToggle,.lesson-reading #lessonIDEOpen{display:flex!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:45;transition:background-color .15s}.lesson-reading .lesson-content-collapse,.lesson-reading .dock-collapse,.lesson-reading .guide-collapse{display:none!important}.lesson-reading #app{padding-left:42px;padding-right:42px}.lesson-reading .lesson-dock{right:34px}.lesson-ide-open .lessonLayout{margin-right:calc(var(--lesson-ide-width,45vw) + 5px)}.lesson-content-collapsed .lesson-dock{width:calc(100vw - 68px)!important}.lesson-reading .lesson-introduction h2{padding-right:0}.lesson-reading .lesson-outline .lessonNav>.eyebrow{padding-right:8px}
@media(max-width:799px){.lesson-reading #app{padding-left:38px;padding-right:38px}.lesson-reading .lesson-dock{right:29px;width:calc(100vw - 58px)!important}.lesson-content-collapsed .lesson-dock{width:calc(100vw - 58px)!important}.lesson-ide-open .lessonLayout{margin-right:0}}
/* Independent scrolling keeps the lesson and editor on screen together. */
body.lesson-reading{height:100dvh;overflow:hidden}.lesson-reading #app{max-height:calc(100dvh - var(--nav-height,64px));overflow:hidden;padding-bottom:0}.lesson-reading .lessonLayout{height:calc(100dvh - var(--lesson-viewport-top,180px) - 8px);min-height:0;overflow:hidden;align-items:start}.lesson-reading .contentPane{height:100%;max-height:100%;overflow-y:scroll;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#6ab9d7 #edf6fa;padding-right:12px;padding-bottom:28px}.lesson-reading .contentPane::-webkit-scrollbar{width:12px}.lesson-reading .contentPane::-webkit-scrollbar-track{background:#edf6fa;border-radius:7px}.lesson-reading .contentPane::-webkit-scrollbar-thumb{background:#6ab9d7;border:3px solid #edf6fa;border-radius:7px}.lesson-reading .contentPane::-webkit-scrollbar-thumb:hover{background:#2497c2}.lesson-reading .contentPane .block{scroll-margin-top:12px}.lesson-reading .lesson-outline{position:static;max-height:100%;overflow-y:auto;min-height:0}.lesson-reading #app>.footer{display:none}
@media(max-width:799px){.lesson-reading .lessonLayout{grid-template-rows:auto minmax(0,1fr)}.lesson-reading .lesson-outline{max-height:120px}.lesson-reading .contentPane{padding-right:7px}}
/* The lesson title and navigation occupy one fixed frame in every panel state. */
body.lesson-reading #app{padding-top:calc(var(--lesson-top-height,100px) + 12px)}
body.lesson-reading .lesson-top-panel{position:fixed;top:var(--nav-height,64px);left:42px;right:42px;z-index:40;margin:0;padding-top:8px;background:#fff}
.lesson-step-navigation{display:grid;grid-template-columns:100px 88px 78px;gap:4px;width:274px;min-width:274px}
.lesson-step-navigation .lesson-step-button{border-radius:6px;width:100%;height:32px}
.lesson-nav-spacer{display:block;visibility:hidden}
.lesson-step-navigation .lesson-step-button{background:#fff;color:#007cb8;border-color:#b8ddef;box-shadow:none;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}
.lesson-step-navigation .lesson-step-button:hover,.lesson-step-navigation .lesson-step-button:focus-visible{background:#e0f3ff;color:#005e91;border-color:#74bfe5;box-shadow:0 2px 6px #006b9a18}
.lesson-reading .lesson-top-panel>.pageTop{height:44px;min-height:44px;max-height:44px;flex-wrap:nowrap}
.lesson-reading .lesson-top-panel .page-heading-copy{min-width:0;flex:1}.lesson-reading .lesson-top-panel h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ide #inputForm[hidden]{display:none!important}.ide #inputForm:not([hidden]){display:flex;position:sticky;bottom:0;background:var(--panel);flex-shrink:0;border-top:1px solid #a6d9ec;z-index:3}.ide #programInput{font:var(--code-size,20px)/1.4 Consolas,monospace;min-width:0}
@media(max-width:950px){.lesson-step-navigation{grid-template-columns:86px 75px 65px;width:234px;min-width:234px}}
@media(max-width:650px){body.lesson-reading .lesson-top-panel{left:38px;right:38px;margin:0}.lesson-step-navigation{grid-template-columns:28px 28px 28px;width:92px;min-width:92px;gap:4px}.lesson-step-navigation .lesson-step-button{height:28px}.lesson-reading .lesson-top-panel>.pageTop{height:39px;min-height:39px;max-height:39px}}
@media(prefers-reduced-motion:reduce){.lesson-step-navigation .lesson-step-button{transition:none}}
/* Match Python example colours to the live editor. */
.py-variable{color:#005fa8}.py-function{color:#7b2cbf}.py-keyword{color:#004cff}.py-string{color:#d01020}.py-number{color:#008c25}.py-comment{color:#777684}
/* The guide alone can fold to a narrow rail, freeing room for lesson text. */
.lesson-reading .lesson-outline{position:relative}.lesson-reading #lessonGuideToggle{display:grid!important;position:absolute;z-index:2;right:7px;top:7px;width:25px;height:23px;background:#fff;color:#007caf;border:1px solid #c1e3f3;border-radius:5px;font:600 13px/1 Arial,sans-serif;letter-spacing:-1px;cursor:pointer}.lesson-reading #lessonGuideToggle:hover{background:#e0f3ff;border-color:#74bfe5}.lesson-reading .lesson-outline .lessonNav>.eyebrow{padding-right:28px}.lesson-reading .lessonLayout.guide-collapsed,.lesson-reading.lesson-ide-open .lessonLayout.guide-collapsed{grid-template-columns:30px minmax(0,1fr);gap:13px}.lesson-reading .guide-collapsed .lesson-outline{height:30px;min-height:30px;overflow:visible}.lesson-reading .guide-collapsed #lessonGuideToggle{top:0;right:1px}.lesson-reading .guide-collapsed #lessonOutlineLinks{display:none!important}
@media(max-width:799px){.lesson-reading .lessonLayout.guide-collapsed{grid-template-rows:minmax(0,1fr)}}
.learning-objectives li,.learning-objectives li strong{font-weight:700}
/* All lesson tabs share the same fixed masthead and full-width frame. */
body.lesson-page #app{max-width:none;margin:0;padding:calc(var(--lesson-top-height,100px) + 12px) 42px 24px}
body.lesson-reading #app{padding-bottom:0}
body.lesson-page .lesson-top-panel{position:fixed;top:var(--nav-height,64px);left:42px;right:42px;z-index:40;margin:0;padding-top:8px;background:#fff}
.lesson-page .lesson-top-panel>.pageTop{height:44px;min-height:44px;max-height:44px;flex-wrap:nowrap;gap:12px}
.lesson-page .lesson-top-panel .page-heading-copy{min-width:0;flex:1}.lesson-page .lesson-top-panel h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lesson-page .lesson-top-panel>.tabs{height:36px;min-height:36px;max-height:36px;margin-bottom:0;align-items:stretch;flex-wrap:nowrap}
@media(max-width:650px){body.lesson-page #app{padding-left:38px;padding-right:38px}body.lesson-page .lesson-top-panel{left:38px;right:38px;margin:0}.lesson-page .lesson-top-panel>.pageTop{height:39px;min-height:39px;max-height:39px;gap:7px}}
/* Keep the bookmarks list anchored to the top of the lesson area. */
.lesson-reading .lesson-outline{top:0;bottom:auto;margin-top:0;align-self:start;transform:none}
/* Workbook questions and programming tasks are visually distinct. */
.workbook-card{margin:18px 0;padding:18px 19px;border:1px solid #cce8f6;border-left:5px solid #009ff2;border-radius:9px;background:#eff9ff;min-width:0}.workbook-question{background:#f0faf4;border-color:#cfe9da;border-left-color:#078454}.workbook-setup{background:#f5faf8;border-left-color:#079573}.workbook-card-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:12px}.workbook-card-icon{width:40px;height:40px;flex:0 0 40px}.workbook-card-icon img,.workbook-card-icon svg{width:100%;height:100%;object-fit:contain}.workbook-card-label{font:700 11px/1.3 Outfit,Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#006f9e}.workbook-question .workbook-card-label{color:#006743}.workbook-card h3{font:700 20px/1.3 Outfit,Arial,sans-serif;margin:4px 0 0;color:#00543a}.workbook-card-body p,.workbook-task-help{font:13px/1.65 Arial,sans-serif;color:#635f78;margin:7px 0 11px}.workbook-card-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:14px}.workbook-card-actions label{font-size:12px;color:#48675b}.workbook-answer-label{display:block;font:600 12px Outfit,Arial,sans-serif;color:#42715c;margin:9px 0 13px}.workbook-answer{display:block;width:100%;min-height:80px;resize:vertical;border:1px solid #bfdbce;border-radius:6px;background:#fff;color:#233b32;font:13px/1.6 Arial,sans-serif;padding:9px 11px;margin-top:5px}.workbook-image{margin:10px 0;max-width:100%;overflow:hidden}.workbook-image img,.workbook-image svg{display:block;max-width:100%;max-height:440px;object-fit:contain;background:#fff;border:1px solid #d5e6e0;border-radius:5px}.workbook-table-wrap{max-width:100%;overflow:auto;margin:9px 0}.workbook-table{width:100%;border-collapse:collapse;font-size:12px;background:white}.workbook-table th,.workbook-table td{padding:8px;border:1px solid #c8e3d8;vertical-align:top;min-width:90px}.workbook-table th{background:#e7f5ed;color:#00543a}.workbook-table p{font-size:12px;margin:3px 0;line-height:1.5}.workbook-table .workbook-answer{min-height:55px}.workbook-table .workbook-answer-label{margin:0;font-size:10px}.workbook-table .workbook-image{margin:0}.workbook-code{border:2px solid #00543a;border-radius:7px;overflow:hidden;margin:10px 0;background:#fff}.workbook-code pre{margin:0;padding:11px 13px;overflow:auto;font:12px/1.7 Consolas,monospace;white-space:pre}.workbook-task-help{font-size:12px!important;color:#67857a!important}.egg-sort-intro{display:flex;align-items:center;justify-content:space-between;gap:14px}.egg-task-art{width:120px;height:120px;object-fit:contain;flex-shrink:0;mix-blend-mode:multiply}.egg-sort-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:5px 0 15px;padding:0}.egg-sort-step{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #b8dfef;border-radius:7px;min-height:46px;padding:7px 10px;cursor:grab;touch-action:pan-y}.egg-sort-step.dragging{opacity:.4;border-color:#009ff2}.egg-sort-handle{font-size:23px;color:#83a6b4;line-height:1}.egg-sort-number{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border-radius:50%;background:#e0f3ff;color:#0079b6;font:700 12px Outfit,Arial,sans-serif}.egg-sort-text{flex:1;font:600 13px Outfit,Arial,sans-serif;color:#245341}.egg-sort-move{display:flex;gap:4px}.egg-sort-move button{width:27px;height:27px;border-radius:4px;border:1px solid #c7e5f4;background:#f2faff;color:#007dbd;font-size:16px}.egg-sort-move button:hover:not(:disabled){background:#d7f0ff}.workbook-sorting .feedback{margin-bottom:0}.check textarea{display:block;min-height:70px;resize:vertical;width:100%;border:1px solid #bcdceb;background:#fff;border-radius:6px;padding:9px;font:13px/1.5 Arial,sans-serif;color:#234b3c}.check .row{display:block}.check .row>.btn{margin-top:9px}.taskPills button{max-width:260px;text-align:left;line-height:1.4}.instructions .workbook-image img{max-height:400px}.instructions .workbook-card-label{display:block;margin-bottom:7px}
@media(max-width:650px){.workbook-card{padding:13px 12px;margin:14px 0}.workbook-card-heading{gap:9px}.workbook-card-icon{width:32px;height:32px;flex-basis:32px}.workbook-card h3{font-size:17px}.workbook-card-label{font-size:9px;letter-spacing:.5px}.egg-task-art{width:85px;height:85px}.egg-sort-step{gap:7px;padding:6px 7px}.egg-sort-text{font-size:12px}.egg-sort-move button{width:25px;height:27px}.workbook-card-actions{gap:10px}.workbook-answer{min-height:70px}}
/* Dense, readable workbook panels with matching PNG artwork. */
.workbook-card{margin:12px 0;padding:12px 14px;border-radius:8px}.workbook-card-heading{gap:10px;margin-bottom:8px}.workbook-card-icon{width:33px;height:33px;flex-basis:33px}.workbook-card-label{font:700 10px/1.2 Outfit,Arial,sans-serif;letter-spacing:.6px}.workbook-card h3{font:700 17px/1.25 Outfit,Arial,sans-serif;margin:3px 0 0}.workbook-card-body p{font-size:12px;line-height:1.5;margin:5px 0 8px}.workbook-card-actions{margin-top:9px;gap:12px}.workbook-card-actions .btn{padding:5px 9px;font-size:11px}.workbook-card-actions label{font-size:11px}.workbook-answer-label{font:600 11px/1.3 Outfit,Arial,sans-serif;margin:6px 0 9px}.workbook-answer{min-height:54px;padding:7px 9px;margin-top:4px;font-size:12px;line-height:1.45}.workbook-table-wrap{margin:7px 0}.workbook-table{table-layout:fixed;font:12px/1.35 Arial,sans-serif;border:1px solid #bddfea}.workbook-table th{font:700 12px/1.3 Outfit,Arial,sans-serif;color:#00543a;background:#e4f4fd;text-align:left;padding:8px 10px}.workbook-table th,.workbook-table td{border-color:#cbe3e9}.workbook-table td{padding:5px 10px;vertical-align:middle;height:37px}.workbook-table tr:nth-child(even) td{background:#f6fbf8}.workbook-table td p{margin:1px 0;line-height:1.35;font-size:12px}.workbook-table td:first-child{color:#006d9e}.workbook-table-answer{width:100%;height:27px;min-height:27px;border:1px solid #bfdfe9;border-radius:4px;background:#fff;padding:4px 7px;font:12px/1.3 Arial,sans-serif;color:#234f3c}.workbook-table-answer:focus{border-color:#009ff2;outline:2px solid #d7f1ff;outline-offset:0}.workbook-table-answer::placeholder{color:#93a7a7;font-size:11px}.workbook-concepts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0}.workbook-concept{padding:0 10px;border-right:1px solid #cfe5dc;min-width:0;text-align:center}.workbook-concept:last-child{border-right:0}.workbook-concept>strong{display:block;font:700 13px/1.2 Outfit,Arial,sans-serif;color:#00543a}.workbook-concept>img{display:block;object-fit:contain;width:64px;height:64px;margin:3px auto}.workbook-concept .workbook-answer-label{font-size:10px;text-align:left;margin:0}.workbook-concept .workbook-answer{height:40px;min-height:40px;resize:vertical;padding:5px 7px;line-height:1.35;font-size:11px}.workbook-video{margin:9px 0 0;border-top:1px solid #d3e8dd;padding-top:7px;font-size:11px}.workbook-video summary{font:700 11px/1.4 Outfit,Arial,sans-serif;color:#007baa}.workbook-video summary span{font:400 10px Arial,sans-serif;color:#738c80;margin-left:6px}.workbook-video>a{display:block;font-size:11px;margin:7px 0 1px;color:#007baa}.workbook-concepts-card .workbook-card-heading{margin-bottom:9px}.workbook-concepts-card .workbook-card-body>p{margin-top:0}.egg-task-art{width:90px;height:90px}.egg-sort-list{gap:5px;margin:5px 0 10px}.egg-sort-step{min-height:37px;padding:4px 9px}.egg-sort-number{width:23px;height:23px;flex-basis:23px}.egg-sort-text{font-size:12px}.egg-sort-move button{height:25px;width:25px}
@media(max-width:650px){.workbook-card{padding:10px 11px}.workbook-card h3{font-size:16px}.workbook-concept{padding:0 5px}.workbook-concept>strong{font-size:11px}.workbook-concept>img{width:53px;height:53px}.workbook-concept .workbook-answer{font-size:10px;min-height:40px}.workbook-concept .workbook-answer-label{font-size:9px}.workbook-table th,.workbook-table td{padding:5px 7px}.workbook-table td{height:35px}.workbook-table-answer{height:25px}.workbook-video summary span{display:block;margin:3px 0 0 12px}}
.egg-sort-step.egg-correct{background:#e9f8ee;border-color:#77c793}.egg-sort-step.egg-move{background:#fff0ef;border-color:#e7a29e}.egg-correct .egg-sort-number{background:#c8ebd4;color:#17643a}.egg-move .egg-sort-number{background:#f9d6d3;color:#a1322b}.egg-sort-result{font:700 10px/1.3 Outfit,Arial,sans-serif;white-space:nowrap;color:#17643a}.egg-move .egg-sort-result{color:#a1322b}.egg-move .egg-sort-text{color:#773c37}
@media(max-width:650px){.egg-sort-result{font-size:9px}.egg-sort-step{gap:5px}.egg-sort-move{gap:3px}.egg-sort-handle{font-size:19px}}
/* Short written questions sit beside their answers to keep each activity compact. */
.workbook-question-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:13px;padding:5px 0;border-bottom:1px solid #dcece3}.workbook-question-row:last-child{border-bottom:0;padding-bottom:0}.workbook-question-row>label{font:600 12px/1.45 Outfit,Arial,sans-serif;color:#3a6351}.workbook-question-row .workbook-inline-answer{height:40px;min-height:40px;max-height:150px;margin:0;padding:7px 9px;resize:vertical;font:12px/1.4 Arial,sans-serif}.workbook-question .workbook-card-body>p{font-size:11px;margin:3px 0 5px}.workbook-question .workbook-card-heading{margin-bottom:6px}.check{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:7px 12px}.check>label{margin:0;font-size:12px;line-height:1.4}.check>.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px}.check textarea{height:40px;min-height:40px;font-size:12px;padding:6px 8px}.check .row>.btn{margin:0;padding:5px 8px;font-size:11px}.check>.feedback{grid-column:1/-1;margin-top:0;font-size:11px}.check>.feedback:empty{display:none}.workbook-card-icon img,.workbook-concept>img{mix-blend-mode:multiply}
@media(max-width:650px){.workbook-question-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:6px 0}.workbook-question-row .workbook-inline-answer{height:36px;min-height:36px}.workbook-question-row>label{font-size:11px}.check{grid-template-columns:minmax(0,1fr)}.check>.row{grid-template-columns:minmax(0,1fr) auto}}
/* Apply the approved illustrated icon family consistently without enlarging panels. */
.workbook-card-icon{width:40px;height:40px;flex-basis:40px}.workbook-card-heading{align-items:center}.workbook-card-icon img,.workbook-concept>img,.nav-graphic,.page-brand-art,.resource-art,.hp-lessonart,.tabs img{mix-blend-mode:multiply}.practical-task-art{display:block;float:right;width:44px;height:44px;margin:0 0 8px 10px}.practical-task-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.challenge-card-icon{float:right;width:38px;height:38px;object-fit:contain;margin:0 0 5px 9px;mix-blend-mode:multiply}.workbook-concept>img{width:66px;height:66px}.lesson-dock .nav-graphic{mix-blend-mode:normal}
@media(max-width:650px){.workbook-card-icon{width:34px;height:34px;flex-basis:34px}.workbook-concept>img{width:54px;height:54px}}
/* Approved compact panel reference: raster skins and illustrations, live text and fields. */
.workbook-card{border:12px solid transparent;border-image:url('assets/panels/programming-frame.png') 12 fill stretch;background:none;border-radius:10px;padding:0 4px 3px;margin:13px 0;box-shadow:none}
.workbook-card.workbook-question,.workbook-card.workbook-setup{border-image-source:url('assets/panels/question-frame.png')}
.workbook-card-heading{align-items:center;gap:12px;margin:0 0 7px}.workbook-card-icon{width:64px;height:64px;flex:0 0 64px}.workbook-card-copy{min-width:0;flex:1}.workbook-card-label{font:700 10px/1.25 Outfit,Arial,sans-serif;letter-spacing:0;color:#00543a}.workbook-card h3{font:750 20px/1.2 Outfit,Arial,sans-serif;letter-spacing:-.3px;color:#004b35;margin:3px 0 0}.workbook-card-subtitle{font:12px/1.45 Arial,sans-serif!important;color:#314c46!important;margin:5px 0 0!important}.workbook-question-row{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:13px;border:0;padding:3px 0}.workbook-question-row>label{font:600 13px/1.4 Outfit,Arial,sans-serif;color:#183f34}.workbook-question-row .workbook-inline-answer{height:34px;min-height:34px;padding:6px 9px;border:1px solid #b7c8d4;border-radius:6px;background:#fff;font:12px/1.5 Arial,sans-serif;color:#233e35;box-shadow:inset 0 1px 1px #17394805}.workbook-question-row .workbook-inline-answer::placeholder{color:#8c9dab}.workbook-save-note{font:10px/1.3 Arial,sans-serif;color:#70827e;text-align:right;margin:7px 0 0}.workbook-card-actions{min-height:28px;margin-top:8px;gap:14px;align-items:center}.workbook-card-actions .workbook-launch{font:600 12px/1.3 Outfit,Arial,sans-serif;padding:7px 13px;background:#009ff2;border:1px solid #009ff2;color:white;border-radius:6px}.workbook-card-actions .workbook-launch:hover{background:#0089d0;border-color:#0089d0}.workbook-launch[hidden]{display:none!important}.workbook-card-actions label{font:12px/1.4 Arial,sans-serif;color:#294a40;display:inline-flex;align-items:center;gap:5px}.workbook-card-actions input[type=checkbox]{width:16px;height:16px;accent-color:#009ff2;margin:0 3px 0 0}.workbook-table-wrap{border:1px solid #abd9ee;border-radius:7px;overflow:auto;margin:0}.workbook-table{border:0;background:#fff}.workbook-table th{background:#d9f0ff;font:700 13px/1.3 Outfit,Arial,sans-serif;color:#00543a;padding:6px 10px;text-align:left}.workbook-table th:first-child{width:48%}.workbook-table th,.workbook-table td{border-color:#bfe1ef}.workbook-table td{height:31px;padding:3px 10px}.workbook-table tr:nth-child(even) td{background:#fff}.workbook-table tr:nth-child(odd) td{background:#edfaf3}.workbook-table td:first-child>p{color:#007cff;font:600 13px/1.4 Consolas,'Liberation Mono',monospace;margin:0}.workbook-table-answer{height:25px;min-height:25px;padding:3px 7px;border:1px solid #c2cfd9;border-radius:5px;color:#284438;background:#fff;font:12px/1.3 Arial,sans-serif}.workbook-table-answer::placeholder{color:transparent}.workbook-calculator .workbook-card-heading{margin-bottom:0}.workbook-concepts-card .workbook-card-icon{width:48px;height:48px;flex-basis:48px}
@media(max-width:950px){.lesson-ide-open .workbook-card h3{font-size:18px}.lesson-ide-open .workbook-card-icon{width:54px;height:54px;flex-basis:54px}.lesson-ide-open .workbook-question-row>label{font-size:12px}}
@media(max-width:650px){.workbook-card{border-width:10px;padding:0 1px 2px;margin:11px 0}.workbook-card-icon{width:47px;height:47px;flex-basis:47px}.workbook-card-heading{gap:8px}.workbook-card h3{font-size:17px}.workbook-card-label{font-size:9px}.workbook-card-subtitle{font-size:11px!important;margin-top:4px!important}.workbook-question-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:5px 0}.workbook-question-row>label{font-size:12px}.workbook-question-row .workbook-inline-answer{height:34px;min-height:34px}.workbook-table th{font-size:11px;padding:6px}.workbook-table td{padding:3px 6px}.workbook-table td:first-child>p{font-size:11px}.workbook-card-actions label{font-size:11px}.workbook-calculator .workbook-card-icon{width:45px;height:45px;flex-basis:45px}}

/* Compact workbook refinements: consistent headings, wider answers, one completion control. */
.workbook-card{position:relative;padding-bottom:0;margin:10px 0}
.workbook-card-heading{min-height:44px;margin-bottom:4px;padding-right:23px;gap:9px}
.workbook-card-icon{width:48px;height:48px;flex-basis:48px}
.workbook-card h3{font-size:18px;line-height:1.15;margin-top:2px;font-weight:800}
.workbook-card-label{line-height:1.2;font-weight:800}
.workbook-complete{position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:center;width:21px;height:21px;z-index:2;margin:0}
.workbook-complete input{width:16px;height:16px;margin:0;accent-color:#009ff2;cursor:pointer}
.workbook-card-actions{min-height:0;margin-top:5px}
.workbook-card-actions:has(.workbook-launch[hidden]){display:none}
.workbook-card-body>p{margin:3px 0;font-size:12px;line-height:1.35}
.workbook-question-row{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:12px;padding:2px 0}
.workbook-question-row>label{line-height:1.35;font-weight:650}
.workbook-table th,.workbook-table th p{font:800 13px/1.2 Outfit,Arial,sans-serif!important;color:#00543a!important;margin:0!important}
.workbook-table th{padding:5px 9px}
.workbook-table td{height:28px;padding:2px 8px}
.workbook-table-answer{height:24px;min-height:24px}
.workbook-code{margin:3px 0}
.workbook-code .example-bar{padding-top:4px;padding-bottom:4px;min-height:0;font-size:10px}
.workbook-code pre{padding:7px 10px;margin:0;font-size:12px;line-height:1.35}
.workbook-sorting .egg-task-art{position:static;width:52px;height:52px;object-fit:contain;flex:0 0 52px;mix-blend-mode:multiply}
.workbook-sort-instruction{font-weight:400;text-transform:none;font-size:11px}
.workbook-sorting .workbook-card-label{text-transform:none}
.egg-sort-list{margin:3px 0 6px;gap:4px}
.egg-sort-step{min-height:32px;padding:3px 8px}
.egg-sort-step[draggable=true]{cursor:grab}
.egg-sort-step.dragging{cursor:grabbing}
.egg-sort-move button{height:23px;width:23px}
.egg-sort-number{width:21px;height:21px;flex-basis:21px}
.workbook-save-note{margin-top:3px}
@media(max-width:650px){.workbook-card h3{font-size:16px}.workbook-card-icon{width:40px;height:40px;flex-basis:40px}.workbook-question-row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:8px}.workbook-question-row>label{font-size:11px}.workbook-sorting .egg-task-art{width:40px;height:40px;flex-basis:40px}.workbook-table th,.workbook-table th p{font-size:11px!important}}
@media(max-width:420px){.workbook-question-row{grid-template-columns:minmax(0,1fr)}}

/* Illustrated source-task panels keep one title and live completion / IDE controls. */
.workbook-graphic-card .workbook-card-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:0}
.workbook-graphic-card .workbook-image{margin:0}
.workbook-graphic-card .workbook-image img{width:100%;max-width:none;height:auto;display:block}
.workbook-graphic-card .workbook-complete{right:7px;top:7px;background:white;border-radius:4px}

/* Restore the original alpha-transparent navigation PNGs without recolouring them. */
header .nav-graphic,header .active .nav-graphic,.ide-edge-tab img,.outline-tab img,.practical-instructions-toggle img{filter:none;mix-blend-mode:normal;background:transparent;opacity:1}

/* Finished lesson graphics carry their own outline, with no screenshot frame. */
.workbook-raster-panel .workbook-image{background:transparent;border:0;box-shadow:none;margin:0}
.workbook-raster-panel .workbook-image img{width:100%;height:auto;max-width:none;max-height:none;background:transparent;border:0;border-radius:0;box-shadow:none;display:block}
/* Task evidence: deliberately enabled only on registered boxes. */
.ide-code-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.ide-code-panel .editorMount{flex:1;min-height:0}
.ide-panel-title{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 9px;background:var(--bluewash);border-bottom:1px solid var(--line);font:600 11px/1.3 Outfit,Arial,sans-serif;min-height:30px;color:var(--ink)}
.ide-evidence-drag{display:inline-flex;align-items:center;gap:5px;cursor:grab;border:1px solid #a8d9ee;background:#fff;color:#007bb4;border-radius:5px;padding:3px 8px;font:700 11px/1.3 Outfit,Arial,sans-serif;white-space:nowrap;transition:background-color .15s,transform .15s}
.ide-evidence-drag:hover{background:#dff3ff;transform:translateY(-1px)}
.ide-evidence-drag:active{cursor:grabbing}
.output-label-actions{display:flex;gap:8px;align-items:center}
.consoleLabel{align-items:center;gap:8px;padding:5px 10px;letter-spacing:0}
.ascii-task-intro{font:12px/1.4 Outfit,Arial,sans-serif!important}
.ascii-task-examples{display:flex;flex-direction:column;gap:9px;margin-top:7px}
.ascii-evidence-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;align-items:stretch}
.ascii-target-example{min-width:0;border:1px solid #91cbdc;border-radius:7px;overflow:hidden;background:#fff}
.ascii-target-example h4{margin:0;background:#00543a;color:#fff;font:700 12px/1.3 Outfit,Arial,sans-serif;padding:5px 9px}
.ascii-target-example img{display:block;width:100%;height:145px;object-fit:contain;padding:7px}
.task-evidence-box{display:flex;flex-direction:column;min-width:0;min-height:175px;border:1px dashed #71b9dc;border-radius:7px;background:#f9fdff;overflow:hidden;transition:background-color .15s,border-color .15s}
.task-evidence-title{display:flex;justify-content:space-between;gap:6px;padding:5px 8px;background:#dff2fd;color:#00543a;font:12px/1.3 Outfit,Arial,sans-serif}
.task-evidence-title>span{font-size:10px;color:#458199}
.task-evidence-content{flex:1;min-height:82px}
.evidence-empty{display:grid;place-items:center;min-height:100px;padding:10px;color:#718b99;font:12px/1.3 Outfit,Arial,sans-serif;text-align:center}
.evidence-place{font:600 10px/1.3 Outfit,Arial,sans-serif;padding:4px 7px;background:#edf8ff;color:#007cb5;border-top:1px solid #d8ebf4}
.evidence-place:hover{background:#d4efff}
.evidence-status{font:10px/1.3 Outfit,Arial,sans-serif;color:#087948;padding:0 7px}
.evidence-status:empty{display:none}
.evidence-capture{margin:6px;border:1px solid #b6dccd;border-radius:5px;overflow:hidden;background:white}
.evidence-capture-bar{display:flex;justify-content:space-between;align-items:center;padding:3px 7px;background:#e7f6ed;font:700 10px/1.3 Outfit,Arial,sans-serif;color:#00543a}
.evidence-capture-bar button{background:transparent;color:#007bb4;font-size:16px;line-height:1}
.evidence-capture pre{padding:7px;margin:0;font:11px/1.5 Consolas,'Liberation Mono',monospace;overflow:auto;max-height:230px;white-space:pre;color:#16382d}
.task-evidence-box.drag-over{border:2px solid #009ff2;background:#def3ff}
.dragging-task-evidence .task-evidence-box{outline:2px solid #90d2f1;outline-offset:2px}
.ascii-task-extension{display:flex;gap:9px;align-items:center;margin-top:9px;padding:7px 9px;border:1px solid #00543a;border-radius:7px;background:#e5f5ff;font:12px/1.4 Outfit,Arial,sans-serif;color:#244e45}
.ascii-task-extension img{width:34px;height:34px;object-fit:contain}
.ascii-task-extension strong{color:#0093d9}
@media(max-width:650px){.ascii-evidence-row{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7px}.ascii-target-example img{height:130px;padding:5px}.task-evidence-title{flex-direction:column;gap:0}.ascii-task-extension{flex-wrap:wrap}.task-evidence-box{min-height:165px}}

/* Two ASCII tasks: compact artwork, more room for captured work. */
.ascii-evidence-row{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
.ascii-target-example img{height:190px}
.task-evidence-box{min-height:218px}
.evidence-empty{min-height:150px}
@media(max-width:650px){.ascii-evidence-row{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}.ascii-target-example img{height:175px}.task-evidence-box{min-height:203px}.evidence-empty{min-height:130px}}

/* Lesson portability controls share the existing fixed header frame. */
.lesson-heading-controls{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-shrink:0}
.lesson-transfer-actions{display:flex;gap:4px}
.lesson-transfer-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:5px 8px;background:#fff;border:1px solid #b8ddef;border-radius:6px;color:#007cb8;font:600 11px/1.2 Outfit,Arial,sans-serif;white-space:nowrap;cursor:pointer;transition:background-color .16s,transform .16s}
.lesson-transfer-button:hover{background:#e1f4ff;color:#005f94;transform:translateY(-1px)}
.lesson-transfer-button svg{width:15px;height:15px}
@media(max-width:1100px){.lesson-transfer-button span{display:none}.lesson-transfer-button{width:32px;padding:5px}.lesson-heading-controls{gap:6px}}
@media(max-width:650px){.lesson-transfer-button{height:27px;width:27px}.lesson-heading-controls{gap:4px}.lesson-transfer-actions{gap:3px}}

/* Keep every code control on the existing single toolbar row. */
.ide .ideToolbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
.ide .ideActions{flex-wrap:nowrap;white-space:nowrap;flex-shrink:0}
@media(max-width:799px){.lesson-dock .ideActions{width:auto;justify-content:flex-start}}
/* Standard compact page actions, always after the page's learning content. */
.page-bottom-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:7px;flex:none;width:100%;margin:15px 0 3px;padding:10px 0 0;border-top:1px solid #d6e8f1}
.page-bottom-actions .btn{height:33px;padding:6px 11px;background:#fff;color:#007cb8;border:1px solid #b8ddef;border-radius:6px;font:600 12px/1.3 Outfit,Arial,sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .16s,transform .16s}
.page-bottom-actions .btn:hover{background:#e1f4ff;transform:translateY(-1px)}
.page-bottom-actions .btn svg{width:16px;height:16px}
@media(max-width:650px){.page-bottom-actions{justify-content:flex-end;gap:5px}.page-bottom-actions .btn{padding:5px 8px;font-size:11px}}

/* Each source print activity has its own matching evidence box. */
.print-evidence-tasks{display:flex;flex-direction:column;gap:10px}
.print-evidence-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;align-items:stretch}
.print-task-reference{min-width:0;display:flex;align-items:flex-start}
.print-task-reference img{display:block;width:100%;height:auto;object-fit:contain}
.print-evidence-row .task-evidence-box{min-height:180px}
@media(max-width:650px){.print-evidence-row{gap:7px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.print-evidence-row .task-evidence-box{min-height:150px}}

/* Checked knowledge answers signal status inline without adding a new text row. */
.check>label{display:flex;align-items:center;gap:6px}
.question-status{display:inline-flex;align-items:center;justify-content:center;flex:0 0 17px;width:17px;min-width:17px;height:20px;font:800 18px/1 Outfit,Arial,sans-serif}
.question-status[data-result=correct]{color:#078749}
.question-status[data-result=wrong]{color:#c43b3b}
.check>.feedback{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0}
.quiz-question-heading{display:flex;align-items:flex-start;gap:7px}

.knowledge-options{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.knowledge-options label{display:flex;align-items:center;gap:4px;cursor:pointer;padding:5px 7px;border:1px solid #b8ddef;border-radius:5px;background:#fff;color:#00543a;font:600 11px/1.3 Outfit,Arial,sans-serif}
.knowledge-options label:hover{background:#e1f4ff}
.knowledge-options label:has(input:checked){background:#dff2ff;border-color:#009ff2;color:#007bb4}
.knowledge-options input{margin:0;accent-color:#009ff2;width:13px;height:13px}
.knowledge-mc{min-width:0}
/* Consistent lesson-one task proportions and one extra line for written answers. */
.workbook-answer{min-height:72px}
.workbook-question-row .workbook-inline-answer{height:52px;min-height:52px}
.workbook-concept .workbook-answer{height:60px;min-height:60px}
.check textarea{height:58px;min-height:58px}
.check:has(.knowledge-options){padding:8px 12px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.check:has(.knowledge-options) .row{align-items:center}
.knowledge-options{flex-wrap:nowrap;align-items:center}
.knowledge-options label{white-space:nowrap;padding:4px 6px;font-size:11px}
.error-types-list{list-style:none;padding:0;margin:8px 0 12px;border:1px solid #c7e4ef;border-radius:7px;overflow:hidden}
.error-types-list li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:8px 11px;background:#f2faff;border-bottom:1px solid #d7ebf3;font:12px/1.45 Outfit,Arial,sans-serif;color:#47645c}
.error-types-list li:last-child{border-bottom:0}
.error-types-list strong{font-weight:750;color:#00543a}
.print-task-reference{align-items:stretch}
.print-reference-panel{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;border:1px solid #00543a;border-radius:7px;overflow:hidden;background:white}
.print-reference-panel .example-bar{font-size:10px;padding:6px 8px}
.print-reference-body{display:flex;flex-direction:column;gap:6px;padding:9px;flex:1;min-width:0;font:12px/1.4 Outfit,Arial,sans-serif;color:#254c40}
.print-reference-body>strong{font-weight:750}
.print-reference-body pre{margin:0;font:12px/1.5 Consolas,'Liberation Mono',monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.print-reference-body p{margin:0;font:inherit;color:inherit}
.print-concept-callout{padding:5px 7px;border:1px solid #c4e5f5;border-radius:5px;background:#e7f6ff}
.print-concept-callout.mint{background:#e8f8ef;border-color:#bce5ce}
.print-reference-output{margin-top:auto;padding:6px 8px;background:#e1f6ed;border-radius:5px}
.print-reference-output>strong{font:750 9px/1.3 Outfit,Arial,sans-serif;color:#00543a}
.print-extension-panel{background:#e5f5ff}
.print-extension-title{display:flex;align-items:center;gap:8px;padding:8px 9px 0;font:800 18px/1.2 Outfit,Arial,sans-serif;color:#0093d9}
.print-extension-title img{width:34px;height:34px;object-fit:contain}
.print-reference-body .print-joke{font:12px/1.6 Consolas,'Liberation Mono',monospace;color:#d32332}
.print-evidence-row .task-evidence-box{min-height:0}
.print-evidence-row .evidence-empty{min-height:90px;height:100%}
.script-evidence-tasks{display:flex;flex-direction:column;gap:9px}
.script-evidence-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;align-items:stretch}
.script-evidence-row>.workbook-code{margin:0;display:flex;flex-direction:column}
.script-evidence-row>.workbook-code pre{flex:1;white-space:pre-wrap;overflow-wrap:anywhere}
.script-evidence-row .task-evidence-box{min-height:0}
.script-evidence-row .evidence-empty{min-height:90px;height:100%}
.script-task-reminder{font-size:11px!important}
.construct-recall-response{display:grid;grid-template-columns:minmax(0,1fr) 55px;gap:8px;align-items:center}
.construct-recall-response textarea{width:100%}
.construct-score{display:grid;place-items:center;background:#e5f5ff;border:1px solid #a5d6eb;border-radius:6px;min-height:34px;color:#007bb4;font:800 16px/1.2 Outfit,Arial,sans-serif;white-space:nowrap}
.construct-score.complete{background:#def3e6;border-color:#82c79f;color:#078749}
.construct-recall-help{font:10px/1.3 Outfit,Arial,sans-serif!important;color:#628175!important;margin:4px 0 0!important}
@media(max-width:650px){.check:has(.knowledge-options){grid-template-columns:minmax(0,1fr);gap:6px}.error-types-list li{grid-template-columns:90px minmax(0,1fr);font-size:11px}.print-reference-body{padding:7px;font-size:11px}.script-evidence-row{gap:7px}.workbook-concept .workbook-answer{height:60px;min-height:60px}.workbook-question-row .workbook-inline-answer{height:52px;min-height:52px}}
/* Task 7 uses equal halves with enough room for the full copied program/output. */
.script-evidence-row{grid-template-columns:repeat(2,minmax(0,1fr));min-height:190px}
.script-evidence-row>.workbook-code,.script-evidence-row>.task-evidence-box{height:100%;min-height:190px}
.script-evidence-row .evidence-empty{min-height:128px}
@media(max-width:650px){.script-evidence-row{grid-template-columns:repeat(2,minmax(0,1fr));min-height:190px}.script-evidence-row>.workbook-code pre{font-size:11px}}
.lesson-outline .lessonNav a{line-height:1.35;padding-top:6px;padding-bottom:6px}
.lesson-outline .lessonNav a.contents-knowledge{font-weight:750;color:#00543a}
.lesson-outline .lessonNav a.contents-task{font-size:11px;padding-left:12px;border-left:2px solid #c6e6dc;margin-left:5px}
.lesson-outline .lessonNav a.contents-task:hover{border-left-color:#009ff2}
/* Contents are simple text lines; only activity links carry the Task: prefix. */
.lesson-outline .lessonNav a.contents-task{padding-left:8px;border-left:0;margin-left:0}
.lesson-outline .lessonNav a.contents-knowledge{padding-left:8px}
.lesson-reading #app,.lesson-reading .lessonLayout{overflow-anchor:none}
.construct-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0}
.construct-inputs .workbook-construct-input{display:block;width:100%;height:38px;min-height:38px;margin:0;padding:6px 8px;border:1px solid #b7c8d4;border-radius:6px;background:#fff;font:12px/1.4 Arial,sans-serif;color:#233e35}
.construct-inputs .workbook-construct-input:focus{outline:2px solid #b8e5ff;border-color:#009ff2}
@media(max-width:650px){.construct-recall{grid-template-columns:minmax(0,1fr)}.construct-inputs{gap:5px}.construct-inputs .workbook-construct-input{padding:6px;font-size:11px}}
/* Blue contents links stay on one line, including the narrower split view. */
.lesson-outline .lessonNav .eyebrow{color:#009ff2}
.lesson-outline .lessonNav a.contents-task,.lesson-outline .lessonNav a.contents-knowledge{display:block;color:#009ff2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;font-size:11px}
.lesson-outline .lessonNav a.contents-task:hover,.lesson-outline .lessonNav a.contents-knowledge:hover{color:#007cb8;background:#e8f7ff}
/* A reserved blue tick column shows task completion without moving the labels. */
.lesson-outline .lessonNav a.contents-task{display:flex;align-items:center;gap:4px}
.contents-complete-icon{flex:0 0 12px;width:12px;min-width:12px;color:#009ff2;font:800 13px/1 Outfit,Arial,sans-serif;text-align:center}
.contents-link-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.egg-sort-actions{justify-content:flex-end;margin-top:7px}
.egg-sort-result{display:none}
.egg-sort-feedback{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0}
/* The final question is one shallow row: title, three inputs and live score. */
.workbook-construct-recall{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;padding-right:25px;padding-bottom:0}
.workbook-construct-recall .workbook-card-heading{margin:0;padding-right:0}
.workbook-construct-recall .workbook-card-body{min-width:0}
.workbook-construct-recall .construct-recall-response{grid-template-columns:minmax(0,1fr) 48px;gap:6px}
.workbook-construct-recall .workbook-construct-input{height:36px;min-height:36px}
@media(max-width:650px){.workbook-construct-recall{grid-template-columns:minmax(0,1fr);gap:6px;padding-right:21px}.workbook-construct-recall .workbook-card-heading{min-height:40px}}
/* Every contents label shares the same marker and text columns. */
.lesson-outline .lessonNav a.contents-task,.lesson-outline .lessonNav a.contents-knowledge{display:flex;align-items:center;gap:4px;padding-left:8px;padding-right:8px;margin-left:0;border-left:0}
/* Source activities reuse the approved task headers, code frames and evidence boxes. */
.source-task-sections{display:flex;flex-direction:column;gap:8px}
.source-task-section{min-width:0}
.source-task-section>p,.source-section-reference>p{margin:2px 0 7px;font:12px/1.45 Outfit,Arial,sans-serif;color:#375a4d}
.source-section-title{font:800 14px/1.3 Outfit,Arial,sans-serif;margin:3px 0 6px;color:#00543a}
.source-section-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:10px}
.source-section-reference{min-width:0;display:flex;flex-direction:column}
.source-section-reference>.workbook-code{flex:1}
.source-evidence-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.source-evidence-pair>.task-evidence-box:only-child{grid-column:1/-1}
.source-activity-card .task-evidence-box{min-height:155px}
.source-activity-card .evidence-empty{min-height:96px}
.source-code-window{margin:4px 0}
.source-code-window pre{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.source-task-note{padding:6px 8px;border:1px solid #c7e4f0;background:#eaf7ff;border-radius:5px;font-size:11px!important}
.source-reference-table td,.source-reference-table th{font-family:Outfit,Arial,sans-serif;font-size:12px;line-height:1.4}
.source-reference-table td:first-child{font-family:Consolas,'Liberation Mono',monospace}
.source-plan th:first-child{width:15%}
.source-plan th:nth-child(2){width:41%}
.source-plan th:nth-child(3){width:20%}
.source-plan th:nth-child(4){width:24%}
.source-plan th[scope=row]{font:750 11px/1.3 Outfit,Arial,sans-serif;background:#e9f6fc}
.source-plan-answer{display:block;width:100%;height:40px;min-height:40px;resize:vertical;border:1px solid #b8d2df;border-radius:5px;padding:5px 6px;background:white;font:11px/1.4 Arial,sans-serif;color:#234f40}
.source-task-question{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:10px;align-items:center;padding:4px 0}
.source-task-question>label{display:flex;gap:5px;align-items:center;font:650 12px/1.4 Outfit,Arial,sans-serif;color:#244d3e}
.source-question-answer{display:flex;gap:6px;align-items:center;min-width:0}
.source-question-answer>.workbook-answer{flex:1;height:52px;min-height:52px;margin:0;padding:6px 8px;font:12px/1.4 Arial,sans-serif}
.source-question-answer>.btn{flex-shrink:0;font-size:11px;padding:5px 8px}
.source-question-select{width:100%;min-width:0;height:32px;border:1px solid #b9d9e6;border-radius:5px;padding:4px 7px;background:#fff;font:12px Outfit,Arial,sans-serif;color:#00543a}
.source-question-answer>.knowledge-options{flex:1;flex-wrap:wrap;min-width:0}
.source-question-answer .knowledge-options label{font-size:10px}
.source-question-feedback{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.source-three-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-width:0}
.source-three-answers input{width:100%;min-width:0;height:34px;border:1px solid #b9d9e6;border-radius:5px;padding:5px;font-size:11px}
.example-input-values{margin:0!important;padding:6px 12px 0!important;font:600 10px/1.3 Outfit,Arial,sans-serif!important;color:#47816b!important}
@media(max-width:650px){.source-section-split{gap:7px}.source-task-question{grid-template-columns:minmax(0,1fr);gap:5px}.source-plan th,.source-plan td{padding:4px}.source-plan-answer{font-size:10px}.source-task-section>p,.source-section-reference>p{font-size:11px}}
.source-question-answer>.workbook-answer{min-width:0;width:100%}
.source-question-answer>.source-three-answers{flex:1}
@media(max-width:440px){.source-section-split{grid-template-columns:minmax(0,1fr)}.source-plan-answer{padding:4px}.source-task-section .source-reference-table{overflow-x:auto}}
.source-section-heading{display:flex;gap:7px;align-items:center;margin:3px 0 6px}
.source-section-heading>.source-section-title{margin:0}
.source-section-heading>img{width:29px;height:29px;object-fit:contain}
.source-extension-section{padding:8px;border:1px solid #00543a;border-radius:7px;background:#e5f5ff}
.source-extension-section .source-section-title{color:#0093d9}
.source-question-answer:has(.source-input-correction)>.source-question-select{width:65px;flex:0 0 65px}
.source-input-correction{display:block;flex:1;min-width:0;width:100%;height:46px;min-height:46px;border:1px solid #b8d2df;border-radius:5px;padding:5px;font:11px/1.4 Consolas,monospace;color:#234f40;background:#fff;resize:vertical}
.source-topic-graphic{float:right;width:68px;height:68px;object-fit:contain;margin:0 0 5px 10px}
.source-task-section:has(.source-topic-graphic)::after{content:"";display:block;clear:both}
.turtle-evidence{background:white;border:1px solid #c8e3ec;border-radius:5px;padding:6px;margin:5px}
.turtle-evidence svg{display:block;width:100%;max-height:260px}
.example-drawing{background:white;border:1px solid #c8e3ec;border-radius:5px;padding:6px}.example-drawing svg{display:block;width:100%;height:160px}
.source-operator-table select{width:100%;min-width:58px;background:white;color:#00543a;border:1px solid #b8dce8;border-radius:4px;padding:4px;font:500 13px Outfit,Arial,sans-serif}
.source-operator-table td{padding:4px 6px!important;vertical-align:middle!important}
.source-operator-answer{display:flex;gap:3px;align-items:center}.source-operator-answer .question-status{flex:0 0 15px}
.source-operator-actions{display:flex;justify-content:flex-end;margin-top:6px}
.contentPane{-webkit-user-select:none;user-select:none}
.contentPane input,.contentPane textarea,.contentPane select,.contentPane [contenteditable="true"],.contentPane .task-evidence-content,.contentPane .task-evidence-content *{-webkit-user-select:text;user-select:text}
/* Blend lesson illustrations into the opening text without a large right-hand column. */
body:not(.lesson-ide-open) .block.with-visual{display:block}
body:not(.lesson-ide-open) .block.with-visual>.lesson-visual{float:left;width:112px;height:112px;margin:0 16px 8px 0}
body:not(.lesson-ide-open) .block.with-visual>.example-window,body:not(.lesson-ide-open) .block.with-visual>.check,body:not(.lesson-ide-open) .block.with-visual>.worked-walkthrough{clear:both}
.block.with-visual::after{content:"";display:block;clear:both}
.source-three-evidence>.task-evidence-box:last-child{grid-column:1/-1;width:calc(50% - 4.5px);justify-self:center}
.source-full-width-evidence .source-evidence-pair{grid-template-columns:minmax(0,1fr)}
.source-full-width-evidence .task-evidence-content{min-height:240px;max-height:none;overflow:visible}
.source-full-width-evidence .task-evidence-content pre{max-height:none;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere}
.source-full-width-evidence .task-evidence-box:first-child .task-evidence-content{min-height:390px}
.workbook-definition .workbook-card-copy{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);gap:8px 14px;align-items:center;width:100%}
.workbook-definition .workbook-card-label{display:none}.workbook-definition h3{margin:0}.workbook-definition .inline-definition-answer{margin:0;width:100%;min-height:58px;height:58px}
.source-live-score{flex:0 0 auto;white-space:nowrap;color:#007cb8;font:700 12px Outfit,Arial,sans-serif}
.workbook-definition .workbook-card-heading{padding-right:25px}.workbook-definition .source-task-sections:has(.source-task-questions:empty){margin:0}
.workbook-definition .workbook-card-heading{display:grid;grid-template-columns:33px minmax(0,1fr);gap:10px}.workbook-definition .workbook-card-icon{width:33px;height:33px}
.workbook-definition .source-task-question{padding-left:43px;padding-right:25px;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);column-gap:14px}
.workbook-definition .source-task-section:has(>.source-task-questions:empty){display:none}
.inline-lesson-quiz{padding:12px 0}.inline-lesson-quiz .question{margin:12px 0}
.ide .console,.lesson-dock .ide .console{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.consoleLabel{flex:0 0 auto}.consoleScroll{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.ide .consoleText{flex:0 0 auto;order:1;overflow:visible;min-height:0}
.ide #inputForm{flex:0 0 auto;margin:0;background:var(--panel);position:relative;z-index:2}
.ide #inputForm[hidden]{display:none!important}
.consoleScroll .turtleCanvas{order:0;flex:0 0 auto;height:100%;min-height:80px;max-height:240px;padding:4px 8px;background:white}
.consoleScroll .turtleCanvas svg{display:block;width:100%;height:100%;min-height:0;vertical-align:top}
@media(max-width:650px){body:not(.lesson-ide-open) .block.with-visual>.lesson-visual{width:90px;height:90px;margin:0 10px 5px 0}.source-three-evidence>.task-evidence-box:last-child{width:100%}.workbook-definition .workbook-card-copy,.workbook-definition .source-task-question{grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr)}.workbook-definition h3{font-size:15px}.source-full-width-evidence .task-evidence-content{min-height:200px}}
/* Fit question controls to the lesson pane, including a resized split view. */
.contentPane{container-type:inline-size;container-name:lesson-content}
.check:has(.knowledge-options) .row,.source-question-answer:has(.knowledge-options){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-width:0;max-width:100%}
.check:has(.knowledge-options) .knowledge-mc{display:block;min-width:0}
.check:has(.knowledge-options) .knowledge-options,.source-question-answer>.knowledge-options{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;min-width:0}
.check .knowledge-options label,.source-question-answer .knowledge-options label{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;flex:0 1 auto;min-width:0;max-width:100%;height:auto;min-height:30px;margin:0;padding:4px 7px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.knowledge-options label>input{flex:0 0 13px;width:13px;min-width:13px;max-width:13px}
.knowledge-options label>span{min-width:0;overflow-wrap:anywhere;white-space:normal}
.check .row>.btn,.source-question-answer>.btn{margin:0;align-self:center;min-height:30px;line-height:1.3;position:static;white-space:nowrap}
.check>.row,.source-question-answer{min-width:0;max-width:100%}
@container lesson-content (max-width:900px){
 .check:has(.knowledge-options){grid-template-columns:minmax(0,1fr);gap:7px}
}

/* Narrow lesson panes reserve a separate column for Check; choices never overlap it. */
.check:has(.knowledge-options)>.row{box-sizing:border-box}
.check:has(.knowledge-options) .knowledge-mc{width:100%;max-width:100%;overflow:hidden}
.check:has(.knowledge-options) .knowledge-options{width:100%;max-width:100%}
.check .knowledge-options label>input{padding:0;border:0;flex-shrink:0}
@container lesson-content (max-width:1050px){
 .check:has(.knowledge-options){display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
 .check:has(.knowledge-options)>label{margin:0}
 .check:has(.knowledge-options) .knowledge-options,.source-question-answer>.knowledge-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
 .check .knowledge-options label,.source-question-answer .knowledge-options label{width:100%;height:100%;align-items:center}
}
@container lesson-content (max-width:520px){
 .check:has(.knowledge-options) .knowledge-options,.source-question-answer>.knowledge-options{grid-template-columns:minmax(0,1fr)}
 .check:has(.knowledge-options) .row>.btn,.source-question-answer>.btn{align-self:end}
}

/* Lesson 1 practice: shared task palette, paired panels and fixed action position. */
.lesson-one-quiz{max-width:1320px;margin:auto}.lesson-one-quiz .quizHead{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.lesson-one-quiz .quizHead>div{flex:1}.practice-score{color:#007fb5;background:#e1f5ff;border:1px solid #a5d9f4;border-radius:6px;padding:7px 10px;white-space:nowrap;font:800 17px Outfit,Arial,sans-serif}
.lesson-one-quiz .practice-card{padding:16px 18px;margin:18px 0;border:1px solid #6bc2a0;border-left:6px solid #008854;border-radius:10px;background:#eafbf3;overflow:hidden}.lesson-one-quiz .practice-blue{background:#e6f7ff;border-color:#80d0f8;border-left-color:#009ff2}.practice-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px}.practice-heading>div{flex:1}.practice-heading h3{font:800 21px Outfit,Arial,sans-serif;margin:3px 0}.practice-heading .qtype{font:800 12px Outfit,Arial,sans-serif;color:#00543a}.practice-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}.practice-prompt,.practice-answer{min-width:0;box-sizing:border-box;padding:14px;border:1px solid #b7dbd1;border-radius:7px;background:rgba(255,255,255,.7);min-height:210px}.practice-columns h4{margin:0 0 12px;font:700 15px/1.5 Outfit,Arial,sans-serif}.practice-answer{display:flex;flex-direction:column}.practice-field{min-width:0;flex:1}.practice-field input,.practice-field select{box-sizing:border-box;width:100%;padding:12px;border:1px solid #aac9d9;border-radius:6px;background:#fff}.practice-field .options{display:grid;grid-template-columns:1fr;gap:7px}.practice-field .option{width:100%;text-align:left;white-space:normal;overflow-wrap:anywhere;margin:0;min-height:38px}.practice-actions{display:flex;justify-content:flex-end;margin-top:14px}.practice-actions .btn{margin:0;min-height:34px}.practice-explanation:empty{display:none}.practice-explanation{margin:12px 0 0}.practice-code{border:1px solid #00543a;border-radius:7px;overflow:hidden}.practice-code-bar{background:#00543a;color:#fff;padding:8px 10px;font:600 12px Outfit,Arial,sans-serif}.practice-code pre{margin:0;background:white;white-space:pre-wrap;overflow-wrap:anywhere;padding:12px}.practice-field .orderList{margin:0;padding:0;list-style:none}.practice-field .orderList li{display:flex;align-items:center;gap:7px;min-width:0}.practice-field .orderList code{flex:1;white-space:pre-wrap;overflow-wrap:anywhere}.practice-field .lineChoice{width:100%;white-space:pre-wrap;text-align:left;overflow-wrap:anywhere}.practice-field .code{overflow-wrap:anywhere}.lesson-one-quiz .progressDots{flex-wrap:wrap}
@media(max-width:650px){.practice-columns{gap:8px}.practice-prompt,.practice-answer{padding:9px}.practice-heading h3{font-size:18px}.practice-field .orderList li{flex-wrap:wrap}.practice-field .orderList code{flex-basis:70%}.lesson-one-quiz .practice-card{padding:12px 10px}.practice-score{font-size:14px}}

/* Reference quiz flow: response on the left, checked answer and explanation on the right. */
.lesson-one-quiz{font-family:Outfit,Arial,sans-serif}.lesson-one-quiz .practice-card{background:#eafbf3}.lesson-one-quiz .practice-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.lesson-one-quiz .practice-prompt{border:0;border-right:1px solid #c3e4d9;border-radius:0;background:transparent;padding:4px 18px 12px 0}.lesson-one-quiz .practice-feedback-pane{border:0;background:rgba(255,255,255,.55);margin-left:16px;padding:16px;min-height:240px;border-radius:8px;justify-content:flex-start}.lesson-one-quiz .practice-heading{align-items:flex-start}.lesson-one-quiz .practice-heading h3{font:750 20px/1.35 Outfit,Arial,sans-serif}.lesson-one-quiz .practice-field .options{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-one-quiz .practice-field .option{display:flex;align-items:center;gap:10px;font:500 14px/1.4 Outfit,Arial,sans-serif;padding:10px}.practice-field .option::before{content:'';width:22px;height:22px;flex:0 0 22px;border:1px solid #b4cfc3;border-radius:5px;background:#eef5f1}.practice-field .option.selected::before{content:'✓';background:#009ff2;color:#fff;text-align:center}.lesson-one-quiz .practice-actions{border-top:1px solid #c3e4d9;padding-top:10px;min-height:46px}.practice-actions [hidden]{display:none!important}.lesson-one-quiz .practice-explanation{margin:0;padding:14px;border-left:4px solid #078454;background:#eaf5e7;line-height:1.5}.lesson-one-quiz .practice-explanation.retry{background:#fff2ed;border-color:#c8744e}.practice-model-answer{font-weight:700;color:#007048;white-space:pre-wrap;overflow-wrap:anywhere}.practice-feedback-placeholder{font-size:14px;color:#567769}.practice-feedback-pane .practice-score{align-self:flex-end;margin-top:auto}.practice-feedback-pane.has-feedback .practice-score{display:none}.practice-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;background:#e6f7ff;border:1px solid #b5e2f7;border-radius:8px;margin:12px 0}.practice-toolbar strong{color:#00543a}.practice-toolbar #practiceAnswered{margin-left:auto}.lesson-one-quiz .practice-pending{background:#fafafa;border-color:#d3d9d6;border-left-color:#a8b1ac;color:#777}.practice-pending .practice-columns{filter:grayscale(1);opacity:.65}.practice-pending .practice-check{background:#89958e}.practice-current{box-shadow:0 0 0 2px #9cd9c0}.lesson-one-quiz .practice-pending .practice-feedback-placeholder{visibility:hidden}#practiceReviewSummary{padding:16px;background:#eafbf3;border:1px solid #63b995;border-radius:8px;font-weight:700}
@media(max-width:700px){.lesson-one-quiz .practice-heading h3{font-size:16px}.lesson-one-quiz .practice-field .options{grid-template-columns:1fr}.lesson-one-quiz .practice-feedback-pane{margin-left:8px;padding:9px}.lesson-one-quiz .practice-prompt{padding-right:9px}.practice-toolbar #practiceAnswered{margin-left:0}}

/* Preserve the approved lesson palette throughout the reference flow. */
.lesson-one-quiz .practice-card.practice-blue{background:#e6f7ff;border-color:#80d0f8;border-left-color:#009ff2}
.lesson-one-quiz .practice-card.practice-mint{background:#eafbf3;border-color:#6bc2a0;border-left-color:#008854}
.lesson-one-quiz .practice-pending .practice-columns{filter:none;opacity:.6}
.lesson-one-quiz .practice-heading h3{font-size:20px;font-weight:800}

/* All quiz questions use the approved mint panel, including upcoming questions. */
.lesson-one-quiz .practice-card{background:#eafbf3;border-color:#6bc2a0;border-left-color:#008854}

/* Fixed quiz controls and an unmistakable inactive next panel. */
.lesson-one-quiz .quizHead{position:sticky;top:calc(var(--nav-height,64px) + var(--lesson-top-height,100px));z-index:30;display:flex;flex-direction:column;align-items:stretch;gap:8px;background:#fff;padding:10px 0 12px;margin:0;border-bottom:1px solid #c3e4d9}
.lesson-one-quiz .quizHead>div:first-child{flex:initial}.lesson-one-quiz .quizHead h2{margin:0 0 5px}.lesson-one-quiz .quizHead p{margin:0}.practice-top-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:3px 0;max-width:100%}.practice-top-actions>*{flex:0 0 auto;white-space:nowrap}.practice-top-actions #practiceAnswered{margin-left:auto}.practice-top-actions .btn{min-height:34px}.practice-top-actions .practice-score{font-size:16px;padding:6px 10px}
.lesson-one-quiz .practice-card{scroll-margin-top:calc(var(--nav-height,64px) + var(--lesson-top-height,100px) + 150px)}
.lesson-one-quiz .practice-card.practice-pending{background:#f4f4f4;border-color:#d2d2d2;border-left-color:#a4a4a4}.lesson-one-quiz .practice-pending .practice-columns{filter:grayscale(1);opacity:.65}.practice-pending .practice-actions{filter:grayscale(1);opacity:.65}
.lesson-one-quiz .practice-code{margin-bottom:14px}.lesson-one-quiz .practice-field .lineChoice,.lesson-one-quiz .practice-field .token{border:2px solid transparent;border-radius:5px;margin:4px 0;padding:8px;transition:border-color .12s,background .12s}.lesson-one-quiz .practice-field .lineChoice.selected,.lesson-one-quiz .practice-field .token.selected{border:2px solid #009ff2;background:#e8f7ff;box-shadow:0 0 0 1px #009ff2}.lesson-one-quiz .practice-field .lineChoice.selected.wrong{border-color:#c94b39}.lesson-one-quiz .practice-field .lineChoice.selected.correct{border-color:#008854}

/* Compact cards: the action belongs inside the white feedback panel. */
.lesson-one-quiz .practice-card{padding:12px 14px;margin:12px 0}
.lesson-one-quiz .practice-prompt{min-height:0;padding-bottom:0}.lesson-one-quiz .practice-feedback-pane{min-height:165px;padding:12px;display:flex;flex-direction:column}
.lesson-one-quiz .practice-feedback-pane .practice-actions{margin-top:auto;padding-top:10px;border:0;min-height:0;justify-content:flex-end;flex-shrink:0}
.lesson-one-quiz .practice-feedback-pane .practice-score{margin-top:10px;margin-bottom:8px}
.lesson-one-quiz .practice-explanation{padding:10px 12px}.lesson-one-quiz .practice-explanation p{margin:8px 0}.lesson-one-quiz .practice-explanation p:last-child{margin-bottom:0}
.lesson-one-quiz .practice-heading{margin-bottom:10px}.lesson-one-quiz .practice-field .option{min-height:34px;padding:7px 9px}

.page-confirmation{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,45,32,.28)}.page-confirmation-panel{width:min(480px,100%);background:#eafbf3;border:1px solid #6bc2a0;border-left:6px solid #008854;border-radius:10px;padding:22px;font-family:Outfit,Arial,sans-serif;box-shadow:0 12px 40px rgba(0,45,32,.18)}.page-confirmation-panel h2{font-size:21px;margin:0 0 12px}.page-confirmation-panel p{color:#194b3c;line-height:1.5}.page-confirmation-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* Keep every quiz control beside the heading, with its description beneath. */
.lesson-one-quiz .quizHead{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:18px;row-gap:5px}
.lesson-one-quiz .quizHead>div:first-child{display:contents}
.lesson-one-quiz .quizHead h2{grid-column:1;grid-row:1;white-space:nowrap;margin:0;font-size:23px}
.lesson-one-quiz .quizHead p{grid-column:1/-1;grid-row:2;margin:0}
.lesson-one-quiz .practice-top-actions{grid-column:2;grid-row:1;justify-content:flex-end;min-width:0;gap:7px;padding:3px 0}
.lesson-one-quiz .practice-top-actions #practiceAnswered{margin-left:0}
@media(max-width:1150px){.lesson-one-quiz .quizHead{grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);column-gap:12px}.lesson-one-quiz .quizHead h2{font-size:20px;white-space:normal}.lesson-one-quiz .practice-top-actions{justify-content:flex-start}}

/* Each question's mark stays in the answer panel's top-right corner. */
.lesson-one-quiz .practice-feedback-pane{position:relative;padding-top:12px}
.lesson-one-quiz .practice-feedback-pane .practice-score,.lesson-one-quiz .practice-feedback-pane.has-feedback .practice-score{display:block;position:absolute;top:10px;right:10px;margin:0;padding:6px 10px;font-size:17px;line-height:1.3;z-index:1}

.lesson-one-quiz .practice-feedback-pane .practice-explanation>strong:first-child{display:block;padding-right:75px;min-height:26px}.lesson-one-quiz .practice-feedback-placeholder{padding-right:75px;min-height:36px}

/* Quiz cards advance in place with one inactive preview. */
body.practice-flow-page{overflow:hidden}
body.practice-flow-page .lesson-one-quiz{height:calc(100dvh - var(--nav-height,64px) - var(--lesson-top-height,100px) - 36px);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.lesson-one-quiz .practice-card[hidden]{display:none!important}
body.practice-flow-page .quizHead{flex:0 0 auto;position:relative;top:auto;display:grid}
body.practice-flow-page .practice-current{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none}
body.practice-flow-page .practice-current::-webkit-scrollbar{display:none}
body.practice-flow-page .practice-current .practice-columns{min-height:100%}
body.practice-flow-page .practice-pending{flex:0 0 72px;max-height:72px;min-height:0;overflow:hidden;margin-top:5px;margin-bottom:0;pointer-events:none}
body.practice-flow-page .practice-pending .practice-field,body.practice-flow-page .practice-pending .practice-code,body.practice-flow-page .practice-pending .practice-feedback-pane{display:none}
body.practice-flow-page .practice-pending .practice-columns{display:block}
body.practice-flow-page .practice-pending .practice-prompt{border:0;padding:0}
body.practice-flow-page .practice-pending h3{font-size:16px}
body.practice-flow-page .practice-top-actions{overflow:visible;flex-wrap:wrap;justify-content:flex-end}
body.practice-flow-page #practiceReviewSummary{flex:0 0 auto;padding:9px;font-size:13px}
body.practice-flow-page #practiceReviewSummary[hidden]{display:none}
body.practice-flow-page .practice-current{flex:0 1 auto}body.practice-flow-page .practice-current .practice-columns{min-height:0}

/* Number badges replace the question/type labels; feedback sits beside the number. */
.lesson-one-quiz .practice-heading{align-items:flex-start;gap:10px}.lesson-one-quiz .practice-heading>.practice-number-status{display:flex;align-items:center;gap:5px;flex:0 0 auto}.practice-question-number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#008854;color:white;font:800 22px/1 Outfit,Arial,sans-serif}.practice-number-status .question-status{height:38px;width:18px;min-width:18px;font-size:22px}.lesson-one-quiz .practice-heading h3{flex:1;min-width:0;margin:3px 0 0}.practice-pending .practice-question-number{background:#969e99}

.lesson-one-quiz .quizHead h2 #practiceAnswered{font:500 14px/1.4 Outfit,Arial,sans-serif;white-space:nowrap;margin-left:6px;vertical-align:middle;color:#315d4e}

/* Fill the remaining screen with full grey upcoming questions; footer stays at its base. */
body.practice-flow-page .lesson-one-quiz{height:calc(100dvh - var(--nav-height,64px) - var(--lesson-top-height,100px) - 78px)}
.practice-card-stack{flex:1 1 auto;min-height:0;overflow:hidden}
body.practice-flow-page .practice-current{max-height:100%;margin-top:10px}
body.practice-flow-page .practice-pending{max-height:none;min-height:0;overflow:visible;margin:10px 0;pointer-events:none}
body.practice-flow-page .practice-pending .practice-field,body.practice-flow-page .practice-pending .practice-code,body.practice-flow-page .practice-pending .practice-feedback-pane{display:block}
body.practice-flow-page .practice-pending .practice-feedback-pane{display:flex}
body.practice-flow-page .practice-pending .practice-columns{display:grid}
body.practice-flow-page .practice-pending .practice-prompt{border-right:1px solid #d5d5d5;padding-right:18px}
body.practice-flow-page .practice-pending h3{font-size:20px}
body.practice-flow-page .page-bottom-actions{position:fixed;bottom:0;left:42px;right:42px;width:auto;z-index:35;margin:0;padding:9px 0;background:white;height:52px;box-sizing:border-box}
@media(max-width:650px){body.practice-flow-page .page-bottom-actions{left:38px;right:38px}}
/* Score badges share the question action button height. */
.lesson-one-quiz .practice-feedback-pane .practice-score,.lesson-one-quiz .practice-feedback-pane.has-feedback .practice-score{height:34px;min-height:34px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 10px}

/* Compact number badges become the result indicator without a separate marker gap. */
.lesson-one-quiz .practice-heading{gap:7px;align-items:flex-start}.lesson-one-quiz .practice-heading>.practice-number-status{gap:0}
.lesson-one-quiz .practice-number-status .practice-question-number{width:28px;min-width:28px;height:28px;flex:0 0 28px;border-radius:50%;font:800 16px/1 Outfit,Arial,sans-serif;color:#fff;background:#008854}
.lesson-one-quiz .practice-number-status .practice-question-number[data-result=correct]{background:#008854;color:#fff;font-size:20px}
.lesson-one-quiz .practice-number-status .practice-question-number[data-result=wrong]{background:#c43b3b;color:#fff;font-size:22px}
.lesson-one-quiz .practice-heading h3{margin:0}
.lesson-one-quiz .practice-pending .practice-question-number:not([data-result=correct]):not([data-result=wrong]){background:#969e99}
/* One balanced quiz heading row immediately below the lesson tabs. */
body.practice-flow-page #app{padding-top:var(--lesson-top-height,100px)}
body.practice-flow-page .quizHead{min-height:52px;padding:8px 0;row-gap:0;align-items:center;box-sizing:border-box}
body.practice-flow-page .quizHead h2{display:flex;align-items:center;gap:7px;margin:0;line-height:1.25;align-self:center}
body.practice-flow-page .quizHead h2 #practiceAnswered{margin:0;vertical-align:baseline}
body.practice-flow-page .practice-top-actions{padding:0;align-items:center;align-self:center;min-height:34px}
body.practice-flow-page .practice-top-actions>.btn,body.practice-flow-page .practice-top-actions>.practice-score{height:34px;min-height:34px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;padding-top:0;padding-bottom:0}

/* Checked scores sit wholly inside the coloured feedback surface. */
.lesson-one-quiz .practice-feedback-pane .practice-explanation{position:relative}
.lesson-one-quiz .practice-feedback-pane .practice-explanation>.practice-score{position:absolute;top:8px;right:8px;margin:0}
.lesson-one-quiz .practice-feedback-pane .practice-explanation>strong:first-child{padding-right:80px;min-height:30px}
/* Incorrect selected choices use red consistently, including their selection marker. */
.lesson-one-quiz .practice-field .option.selected.wrong,.lesson-one-quiz .practice-field .lineChoice.selected.wrong,.lesson-one-quiz .practice-field .token.selected.wrong{background:#fff0f0;border-color:#d34b4b;color:#9f2929;box-shadow:none}
.lesson-one-quiz .practice-field .option.selected.wrong::before{content:'×';background:#c43b3b;border-color:#c43b3b;color:#fff;font-weight:800}

/* Finish & review restores the full, scrollable question list from Question 1. */
body.practice-review-page{overflow-y:auto;overflow-x:hidden}
body.practice-review-page .lesson-one-quiz{height:auto;min-height:0;overflow:visible;display:block}
body.practice-review-page .practice-card-stack{overflow:visible;display:block}
body.practice-review-page .practice-card,body.practice-review-page .practice-current{max-height:none;overflow:visible}
body.practice-review-page .quizHead{position:sticky;top:calc(var(--nav-height,64px) + var(--lesson-top-height,100px));z-index:30}
body.practice-review-page .page-bottom-actions{position:static;left:auto;right:auto;width:100%;height:auto;margin-top:12px}

.lesson-one-quiz .practice-top-actions>[hidden]{display:none!important}

/* Approved D · Compact challenge design: white cards, numbered column and topic illustration. */
.challengeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.challengeGrid .compact-challenge{--challenge-band:#008854;display:grid;grid-template-columns:78px minmax(0,1fr) 180px;grid-template-rows:1fr auto;column-gap:22px;row-gap:18px;position:relative;padding:28px 26px 20px 28px;min-height:280px;border:1px solid #cbd3dc;border-left:7px solid var(--challenge-band);border-radius:6px;background:#fff;box-shadow:none;color:#00543a;font-family:Outfit,Arial,sans-serif;overflow:hidden}
.challengeGrid .compact-challenge[data-difficulty=intermediate]{--challenge-band:#efbd21}.challengeGrid .compact-challenge[data-difficulty=advanced]{--challenge-band:#f04c4b}
.compact-challenge-number{grid-column:1;grid-row:1;align-self:stretch;border-right:1px solid #d0d6df;padding-right:16px;color:#00543a;font:800 68px/1.05 Outfit,Arial,sans-serif;letter-spacing:-3px}
.compact-challenge-copy{grid-column:2;grid-row:1;min-width:0}.challengeGrid .compact-challenge h3{font:800 27px/1.15 Outfit,Arial,sans-serif;letter-spacing:-.5px;color:#00543a;margin:2px 0 7px;overflow-wrap:anywhere}
.compact-challenge-level{display:block;color:#646b80;font:400 17px/1.4 Outfit,Arial,sans-serif;margin-bottom:11px}
.challengeGrid .compact-challenge p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:400 17px/1.45 Outfit,Arial,sans-serif;color:#646b80;margin:0;max-width:none}
.compact-challenge-art{grid-column:3;grid-row:1/3;align-self:center;justify-self:center;width:100%;max-width:180px;height:180px;object-fit:contain;mix-blend-mode:normal;float:none;margin:0}
.compact-challenge-start{grid-column:1/3;grid-row:2;justify-self:start;align-self:end;display:inline-flex;align-items:center;gap:22px;padding:0;min-height:32px;border:0;border-radius:0;background:transparent;color:#009ff2;font:800 21px/1.2 Outfit,Arial,sans-serif;text-align:left;white-space:nowrap}
.compact-challenge-start span{font:400 35px/1 Outfit,Arial,sans-serif}.compact-challenge-start:hover{color:#007daf}.compact-challenge-start:focus-visible{outline:3px solid #009ff2;outline-offset:5px}
@media(min-width:1450px){.challengeGrid .compact-challenge{min-height:300px;grid-template-columns:88px minmax(0,1fr) 200px;column-gap:26px;padding:30px 28px 23px 30px}.compact-challenge-art{max-width:200px;height:200px}.compact-challenge-number{font-size:76px}.challengeGrid .compact-challenge h3{font-size:30px}.challengeGrid .compact-challenge p{font-size:18px}.compact-challenge-start{font-size:23px}}
@media(max-width:1100px){.challengeGrid{grid-template-columns:minmax(0,1fr);gap:20px}.challengeGrid .compact-challenge{grid-template-columns:78px minmax(0,1fr) 180px;min-height:260px}}
@media(max-width:540px){.challengeGrid .compact-challenge{grid-template-columns:48px minmax(0,1fr) 90px;column-gap:12px;row-gap:15px;padding:20px 14px 16px 16px;min-height:230px;border-left-width:5px}.compact-challenge-number{font-size:43px;padding-right:9px;letter-spacing:-2px}.challengeGrid .compact-challenge h3{font-size:20px}.compact-challenge-level{font-size:13px;margin-bottom:8px}.challengeGrid .compact-challenge p{font-size:14px;-webkit-line-clamp:4}.compact-challenge-art{height:105px;max-width:105px}.compact-challenge-start{font-size:17px;gap:14px;grid-column:1/-1}.compact-challenge-start span{font-size:28px}}
.compact-challenge-level{color:var(--challenge-band);font-weight:700}

.compact-challenge-number[data-digits="2"]{font-size:52px;letter-spacing:-2px}@media(max-width:540px){.compact-challenge-number[data-digits="2"]{font-size:30px;letter-spacing:-1px}}

/* Compact four-across cards and heading-level filters. */
#app:has(.challengeGrid){max-width:1920px;padding-top:20px}
.challenge-browser-head{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);align-items:center;gap:24px;margin-bottom:18px}
.challenge-browser-head h1{font-size:32px;margin:3px 0 5px}.challenge-browser-head p{font-size:13px;line-height:1.4;margin:0}
.challenge-browser-head>.filters{display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(115px,.7fr) minmax(150px,1fr);gap:12px;align-items:end;margin:0;padding:0;border:0}
.challenge-browser-head .filters label{min-width:0;display:flex;flex-direction:column;gap:5px}.challenge-browser-head .filters input,.challenge-browser-head .filters select{width:100%;min-width:0;box-sizing:border-box;height:40px}
.challengeGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.challengeGrid .compact-challenge{grid-template-columns:44px minmax(0,1fr) 98px;grid-template-rows:1fr auto;column-gap:12px;row-gap:12px;min-height:220px;padding:19px 16px 16px 17px;border-left-width:5px}
.challengeGrid .compact-challenge-number{font-size:48px;letter-spacing:-2px;padding-right:9px}.challengeGrid .compact-challenge-number[data-digits="2"]{font-size:32px;letter-spacing:-1px}
.challengeGrid .compact-challenge h3{font-size:20px;line-height:1.15;margin:0 0 5px;letter-spacing:-.3px}
.challengeGrid .compact-challenge-level{font-size:14px;line-height:1.3;margin-bottom:8px;font-weight:700;color:var(--challenge-band)}
.challengeGrid .compact-challenge p{font-size:14px;line-height:1.4;-webkit-line-clamp:3}
.challengeGrid .compact-challenge-art{width:98px;max-width:98px;height:112px;grid-row:1;align-self:center}
.challengeGrid .compact-challenge-start{font-size:17px;gap:14px;min-height:28px;grid-column:1/-1}.challengeGrid .compact-challenge-start span{font-size:28px}
@media(min-width:1600px){.challengeGrid .compact-challenge{height:224px;min-height:224px;grid-template-columns:48px minmax(0,1fr) 112px;column-gap:14px}.challengeGrid .compact-challenge-art{width:112px;max-width:112px;height:125px}}
@media(max-width:1450px){.challengeGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.challenge-browser-head{grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:18px}}
@media(max-width:1100px){.challengeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.challenge-browser-head{grid-template-columns:1fr}.challenge-browser-head>.filters{grid-template-columns:minmax(160px,1.1fr) minmax(110px,.7fr) minmax(150px,1fr)}}
@media(max-width:650px){.challengeGrid{grid-template-columns:minmax(0,1fr)}.challenge-browser-head>.filters{grid-template-columns:1fr 1fr}.challenge-browser-head>.filters label:last-child{grid-column:1/-1}.challengeGrid .compact-challenge{min-height:220px;grid-template-columns:44px minmax(0,1fr) 98px}}

.challenge-card-pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:14px 0;font:500 13px Outfit,Arial,sans-serif;color:#00543a}.challenge-card-pagination .btn{background:white;color:#007cb8;border:1px solid #b8ddef}
/* Challenge assessment uses the same compact green, blue and mint system. */
.challenge-assessment-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;margin:12px 0;background:#eafbf3;border:1px solid #88c8aa;border-radius:6px;color:#00543a;font-family:Outfit,Arial,sans-serif}.challenge-assessment-bar span{font-size:11px}.challenge-assessment-bar strong{font-size:15px;white-space:nowrap}
.challenge-hint-panel,.challenge-published-checks,.challenge-test-setup{display:block;padding:11px 12px;border:1px solid #cce6db;border-radius:6px;background:#f1fbf6;margin:10px 0}.challenge-hint-panel h3{margin:0 0 5px}.challenge-hint-panel p,.challenge-revealed-hint p,.challenge-test-setup p{font-size:12px;line-height:1.5;margin:6px 0 9px}.challenge-revealed-hint{padding:10px 0;border-top:1px solid #cce6db;margin-top:9px}.challenge-revealed-hint strong{font:700 13px Outfit,Arial,sans-serif}.challenge-revealed-hint pre,.challenge-model-answer pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:10px;background:white;border:1px solid #c0dfd3;border-radius:5px;font-size:12px;line-height:1.5}.challenge-published-checks{font-size:12px}.challenge-published-checks li{margin:5px 0}.challenge-test-setup input{max-width:100%;width:100%;padding:8px;border:1px solid #b5d6e6;border-radius:5px;background:white;margin:5px 0;color:#164c3c}.challenge-test-setup input:disabled{opacity:.7}
.challenge-submission{margin:12px 0;padding:10px;border:2px dashed #77c7ed;background:#edf9ff;border-radius:7px}.challenge-submission.drag-over{background:#d7f4ff;border-color:#009ff2}.challenge-submission.submission-locked{border-style:solid;border-color:#80b9a2}.challenge-submission-code{min-height:100px;max-height:260px;overflow:auto}.challenge-submission-code pre{margin:8px 0;white-space:pre;overflow:auto;background:white;padding:10px;font-size:12px}.challenge-submission-code>p{padding:15px 8px;font-size:13px;color:#3e687c}.challenge-mark-button{width:100%;margin:4px 0 10px;justify-content:center}.challenge-mark-report{padding:12px;margin:12px 0;background:#eafbf3;border:1px solid #88c8aa;border-radius:7px}.challenge-mark-report h3{margin:0 0 8px}.challenge-mark-report>p{font-size:12px}.challenge-mark-check{padding:8px 0;border-top:1px solid #cbe0d5;font-size:12px}.challenge-mark-check.passed summary{color:#008854}.challenge-mark-check.failed summary{color:#ba392d}.challenge-mark-check pre{white-space:pre-wrap;overflow-wrap:anywhere;background:white;padding:8px;font-size:11px}.challenge-model-answer{margin-top:14px}.challenge-model-answer summary{font-weight:700}.challenge-model-answer p{white-space:pre-line;font-size:12px}.challenge-card-score{position:absolute;right:15px;bottom:14px;display:inline-flex;align-items:center;justify-content:center;height:30px;padding:4px 8px;border:1px solid #9ad8f7;border-radius:5px;background:#e3f5ff;color:#007eaf;font:800 17px Outfit,Arial,sans-serif}.compact-challenge:has(.challenge-card-score) .compact-challenge-start{max-width:calc(100% - 72px)}
.challenge-browser-head{grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);align-items:center}.challenge-browser-head h1{text-align:left}.challenge-browser-head>.filters{justify-self:end;width:100%}
@media(max-width:1100px){.challenge-browser-head{grid-template-columns:1fr}.challenge-assessment-bar{flex-wrap:wrap}.compact-challenge:has(.challenge-card-score) .compact-challenge-start{font-size:15px}}
/* The shared page icon is a third grid item: reserve its own column so filters stay on row one. */
#app>.challenge-browser-head{display:grid;grid-template-columns:48px minmax(280px,1fr) minmax(560px,1.4fr);grid-template-rows:auto;column-gap:16px;row-gap:0;align-items:center;margin:0 0 14px;padding:0;min-height:62px}
#app>.challenge-browser-head>.page-brand-art{grid-column:1;grid-row:1;width:44px;height:44px;margin:0;align-self:center}
#app>.challenge-browser-head>.page-heading-copy{grid-column:2;grid-row:1;min-width:0;align-self:center}
#app>.challenge-browser-head>.filters{grid-column:3;grid-row:1;align-self:center;width:100%;margin:0;justify-self:end}
#app>.challenge-browser-head h1{margin:3px 0 0;font-size:32px;line-height:1.15;white-space:nowrap}
#app>.challenge-browser-head .eyebrow{font-size:10px}
@media(max-width:1250px){#app>.challenge-browser-head{grid-template-columns:40px minmax(230px,.85fr) minmax(470px,1.3fr);column-gap:12px}#app>.challenge-browser-head h1{font-size:27px}#app>.challenge-browser-head>.filters{grid-template-columns:minmax(150px,1fr) 105px minmax(140px,1fr)}}
@media(max-width:1000px){#app>.challenge-browser-head{grid-template-columns:40px minmax(0,1fr);row-gap:12px}#app>.challenge-browser-head>.filters{grid-column:1/-1;grid-row:2}#app>.challenge-browser-head h1{white-space:normal}}
/* Compact challenge workspace: brief and actions above, evidence and IDE below. */
.challenge-workspace-top{margin:0 0 12px;border-bottom:1px solid #cde7ee;padding:0 0 12px}.challenge-title-row{display:flex;align-items:center;gap:14px}.challenge-title-row h1{margin:0;font-size:28px}.challenge-title-row .unitBadge{margin:0}.challenge-title-row #challengeTopActions{margin-left:auto;display:flex;align-items:center;gap:8px}.challenge-brief{font-size:13px;margin-top:8px}.challenge-brief summary{font-weight:700;color:#00543a}.challenge-brief p{margin:5px 0 0;white-space:pre-line;max-height:130px;overflow:auto}.challenge-workspace{min-height:300px}.challenge-workspace>.challenge-evidence-panel{padding:12px;overflow:hidden;min-height:0;max-height:none}.challenge-evidence-panel #challengeAssessment{display:flex;flex-direction:column;height:100%;min-height:0;gap:8px}.challenge-evidence-panel .challenge-assessment-bar{margin:0;flex-wrap:wrap;padding:9px 10px;flex-shrink:0}.challenge-assessment-bar .btn{margin-left:auto;font-size:12px;padding:6px 9px}.challenge-evidence-panel .challenge-hint-panel{margin:0;padding:0 10px;max-height:30%;overflow:auto;flex-shrink:0}.challenge-evidence-panel .challenge-revealed-hint{margin:0;padding:8px 0}.challenge-revealed-hint summary{font-weight:700;font-size:13px}.challenge-evidence-panel .challenge-published-checks{margin:0;padding:7px 10px;max-height:22%;overflow:auto;flex-shrink:0}.challenge-evidence-panel .challenge-test-setup{margin:0;padding:6px 10px;max-height:24%;overflow:auto;flex-shrink:0}.challenge-evidence-panel .challenge-submission{display:flex;flex-direction:column;flex:1;min-height:95px;margin:0;padding:10px;overflow:hidden}.challenge-evidence-panel .challenge-submission-code{flex:1;min-height:0;max-height:none;overflow:auto}.challenge-evidence-panel .challenge-submission>.btn{align-self:flex-start;flex-shrink:0;margin-top:6px}.challenge-evidence-panel #challengeMarkStatus{font-size:12px;margin:0;flex-shrink:0}.challenge-evidence-panel #challengeMarkStatus:empty{display:none}#challengeRightPane{min-width:0;min-height:0;height:100%;overflow:hidden}#challengeRightPane>.ide{height:100%;min-height:0}#challengeRightPane.showing-result{overflow:auto;padding:14px;background:#f7fcfa}#challengeRightPane .challenge-mark-report{margin:0}.challenge-card-retry{position:absolute;right:12px;top:10px;width:27px;height:27px;padding:0!important;background:transparent!important;border:0!important;color:#009ff2!important;font:700 27px/1 Arial,sans-serif!important}.challenge-card-retry:hover{background:#e9f7ff!important}.compact-challenge:has(.challenge-card-retry) h3{padding-right:22px}.challenge-card-score.score-green{color:#007c48;background:#e7f8ef;border-color:#82cbaa}.challenge-card-score.score-amber{color:#9b6500;background:#fff5d4;border-color:#ebc65c}.challenge-card-score.score-red{color:#bd3039;background:#ffedf0;border-color:#ed9aa2}.challenge-mark-report h3.score-green{color:#00844e}.challenge-mark-report h3.score-amber{color:#a36b00}.challenge-mark-report h3.score-red{color:#c3343a}.compact-challenge:has(.challenge-card-score) .compact-challenge-start{font-size:16px;max-width:calc(100% - 80px)}
@media(max-width:950px){.challenge-title-row{flex-wrap:wrap}.challenge-title-row #challengeTopActions{margin-left:0;flex-wrap:wrap}.challenge-workspace{height:auto!important}.challenge-workspace>.challenge-evidence-panel{height:480px}.challenge-workspace #challengeRightPane{height:640px}.challenge-brief p{max-height:170px}}
.challenge-card-retry,.challenge-top-retry{display:inline-flex;align-items:center;justify-content:center}.challenge-top-retry{width:31px;height:31px;padding:3px!important;color:#009ff2!important;background:transparent!important;border:0!important}
/* Knowledge organiser controls share the heading row and leave the PDF the remaining viewport. */
#app>.knowledge-top-panel{display:grid;grid-template-columns:64px minmax(300px,1fr) auto;align-items:center;gap:18px;margin:0 0 12px;padding-bottom:12px}.knowledge-top-panel>.page-brand-art{margin:0;width:64px;height:64px}.knowledge-top-panel h1{margin:0}.knowledge-top-panel .page-heading-copy p{margin:5px 0 0}.knowledge-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.knowledge-top-actions .btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px}.knowledge-top-actions svg{width:16px;height:16px}.knowledge-top-panel+.ko{display:block;margin-top:0}
@media(max-width:1250px){#app>.knowledge-top-panel{grid-template-columns:64px minmax(0,1fr)}.knowledge-top-panel>.knowledge-top-actions{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:650px){#app>.knowledge-top-panel{gap:10px;grid-template-columns:44px minmax(0,1fr)}.knowledge-top-panel>.page-brand-art{width:44px;height:44px}.knowledge-top-panel h1{font-size:25px}.knowledge-top-actions{gap:6px}.knowledge-top-actions .btn{font-size:12px}}
/* Unit totals stay between the challenge heading and compact filters. */
#app>.challenge-browser-head{grid-template-columns:48px minmax(285px,1fr) auto minmax(480px,1.2fr);column-gap:20px}#app>.challenge-browser-head>.challenge-progress{grid-column:3;grid-row:1;display:flex;align-items:center;gap:24px;color:#111;font-size:14px;white-space:nowrap}.challenge-progress>span{display:flex;align-items:center;gap:8px}.challenge-progress strong{color:#009ff2;font-size:22px;font-weight:800}#app>.challenge-browser-head>.filters{grid-column:4;grid-row:1;grid-template-columns:minmax(155px,1fr) 115px minmax(145px,1fr);gap:10px}.challenge-title-row{display:grid;grid-template-columns:minmax(160px,.65fr) minmax(0,2fr) auto;gap:24px;align-items:center}.challenge-title-copy{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.challenge-title-row>.challenge-brief{margin:0;font-size:18px;font-weight:700;line-height:1.45;color:#007fbd;white-space:pre-line;max-height:145px;overflow:auto}.challenge-title-row #challengeTopActions{margin:0;max-width:360px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:1400px){#app>.challenge-browser-head{grid-template-columns:40px minmax(240px,1fr) auto minmax(420px,1.2fr);column-gap:14px}#app>.challenge-browser-head h1{font-size:27px}#app>.challenge-browser-head>.challenge-progress{gap:14px;font-size:12px}.challenge-progress strong{font-size:20px}#app>.challenge-browser-head>.filters{grid-template-columns:minmax(135px,1fr) 100px minmax(130px,1fr)}.challenge-title-row{grid-template-columns:150px minmax(0,1fr) auto;gap:16px}.challenge-title-row>.challenge-brief{font-size:17px}.challenge-title-row #challengeTopActions{max-width:235px}}
@media(max-width:1150px){#app>.challenge-browser-head{grid-template-columns:40px minmax(0,1fr) auto;row-gap:12px}#app>.challenge-browser-head>.filters{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(150px,1fr) 130px minmax(150px,1fr)}.challenge-title-row{grid-template-columns:150px minmax(0,1fr)}.challenge-title-row #challengeTopActions{grid-column:1/-1;max-width:none}}
@media(max-width:650px){#app>.challenge-browser-head{grid-template-columns:40px minmax(0,1fr)}#app>.challenge-browser-head>.challenge-progress{grid-column:1/-1;grid-row:2;gap:24px}#app>.challenge-browser-head>.filters{grid-row:3;grid-template-columns:1fr 1fr}#app>.challenge-browser-head>.filters label:last-child{grid-column:1/-1}.challenge-title-row{grid-template-columns:1fr;gap:10px}.challenge-title-row>.challenge-brief{font-size:17px;max-height:190px}.challenge-title-row #challengeTopActions{justify-content:flex-start}}
#app>.python-ide-heading{align-items:center;min-height:80px}#app>.python-ide-heading>.page-brand-art{width:80px;height:80px;flex:0 0 80px;margin:0 18px 0 0}#app>.python-ide-heading h1{margin:0}
/* Code and output share a draggable divider in either view. */
.ide.ide-side-by-side{grid-template-columns:minmax(0,var(--code-share,50fr)) 8px minmax(0,var(--output-share,50fr));grid-template-rows:auto minmax(0,1fr)}.ide.ide-side-by-side>.ideToolbar{grid-column:1/-1;grid-row:1}.ide.ide-side-by-side>.ide-code-panel{grid-column:1;grid-row:2}.ide.ide-side-by-side>#hSplit{grid-column:2;grid-row:2;cursor:col-resize;touch-action:none}.ide.ide-side-by-side>.console{grid-column:3;grid-row:2;min-width:0}.ide.ide-stacked{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,var(--code-share,50fr)) 8px minmax(0,var(--output-share,50fr))}.ide.ide-stacked>.ideToolbar{grid-column:1;grid-row:1}.ide.ide-stacked>.ide-code-panel{grid-column:1;grid-row:2}.ide.ide-stacked>#hSplit{grid-column:1;grid-row:3;cursor:row-resize;touch-action:none}.ide.ide-stacked>.console{grid-column:1;grid-row:4;min-height:0}.ide #hSplit{position:relative}.ide #hSplit:after{content:"";position:absolute;background:#66a995;border-radius:3px}.ide.ide-side-by-side #hSplit:after{width:3px;height:36px;top:calc(50% - 18px);left:2px}.ide.ide-stacked #hSplit:after{height:3px;width:36px;left:calc(50% - 18px);top:2px}.ideToolbar{flex-wrap:wrap;min-height:43px}.ide-code-panel .ide-panel-title{flex-shrink:0}.ide .consoleLabel{flex-wrap:wrap;gap:5px}.ide .console{overflow:hidden}
/* Match the challenge heading and centre the progress group. */
#app>.challenge-browser-head>.page-heading-copy{display:flex;align-items:center;height:100%}#app>.challenge-browser-head h1{margin:0}#app>.challenge-browser-head>.challenge-progress{justify-content:center;justify-self:center;gap:28px;text-align:center;font-family:Outfit,Arial,sans-serif;font-size:20px;font-weight:800;line-height:1.2}.challenge-progress>span{justify-content:center}.challenge-progress strong{font-family:Outfit,Arial,sans-serif;font-size:25px;font-weight:800}
@media(max-width:1400px){#app>.challenge-browser-head>.challenge-progress{font-size:17px;gap:18px}.challenge-progress strong{font-size:23px}}
@media(max-width:650px){#app>.challenge-browser-head>.challenge-progress{width:100%;font-size:18px}}
.challenge-title-row>.challenge-brief{font-family:Outfit,Arial,sans-serif;font-size:19px;font-weight:800;text-align:center;color:#007fbd;border:1px solid #63bde9;background:#f0faff;border-radius:7px;padding:12px 16px;line-height:1.45}
/* Challenge pagination belongs at the far right of the compact top panel. */
#app>.challenge-browser-head{grid-template-columns:48px minmax(280px,1fr) auto minmax(370px,.95fr) auto;column-gap:16px}#app>.challenge-browser-head>.filters{grid-column:4;grid-template-columns:minmax(135px,1fr) 95px minmax(120px,1fr);gap:8px}#app>.challenge-browser-head>#challengeCardPagination{grid-column:5;grid-row:1;margin:0;gap:9px;justify-self:end;white-space:nowrap;font-size:13px}#app>.challenge-browser-head>#challengeCardPagination .btn{padding:7px 10px;font-size:12px;min-height:36px}
@media(max-width:1550px){#app>.challenge-browser-head{grid-template-columns:40px minmax(230px,1fr) auto auto;row-gap:10px;column-gap:16px}#app>.challenge-browser-head>.filters{grid-column:2/-1;grid-row:2;max-width:650px;justify-self:end;grid-template-columns:minmax(135px,1fr) 110px minmax(140px,1fr)}#app>.challenge-browser-head>#challengeCardPagination{grid-column:4;grid-row:1}#app>.challenge-browser-head>.challenge-progress{grid-column:3;grid-row:1}}
@media(max-width:900px){#app>.challenge-browser-head{grid-template-columns:40px minmax(0,1fr) auto}#app>.challenge-browser-head>.challenge-progress{grid-column:1/3;grid-row:2;justify-self:start}#app>.challenge-browser-head>#challengeCardPagination{grid-column:3;grid-row:2}#app>.challenge-browser-head>.filters{grid-column:1/-1;grid-row:3;max-width:none}#app>.challenge-browser-head h1{white-space:normal}}
@media(max-width:650px){#app>.challenge-browser-head{grid-template-columns:40px minmax(0,1fr)}#app>.challenge-browser-head>.challenge-progress{grid-column:1/-1;grid-row:2;justify-self:center}#app>.challenge-browser-head>#challengeCardPagination{grid-column:1/-1;grid-row:3;justify-self:center}#app>.challenge-browser-head>.filters{grid-row:4;grid-template-columns:1fr 1fr}#app>.challenge-browser-head>.filters label:last-child{grid-column:1/-1}}
/* Glossary: twenty compact, accessible flip panels per page. */
#app>.glossary-top-panel{display:flex;align-items:center;justify-content:flex-start;gap:16px;min-height:72px;margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid #cee5ed}#app>.glossary-top-panel>.page-brand-art{width:64px;height:64px;margin:0;flex:0 0 64px}#app>.glossary-top-panel h1{margin:0;font-family:Outfit,Arial,sans-serif;font-weight:800;font-size:32px}.glossary-flip-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:12px;height:var(--glossary-height,760px);padding:0}.glossary-flip-card{perspective:1200px;min-width:0;min-height:0;cursor:pointer;border-radius:7px;outline-offset:3px}.glossary-card-inner{height:100%;width:100%;position:relative;transform-style:preserve-3d;transition:transform .48s cubic-bezier(.2,.7,.2,1)}.glossary-flip-card.is-flipped .glossary-card-inner{transform:rotateY(180deg)}.glossary-face{position:absolute;inset:0;border:1px solid #c9d7e2;border-left:5px solid #008854;border-radius:7px;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.glossary-front{display:flex;align-items:center;justify-content:center;padding:22px;text-align:center}.glossary-front h2{margin:0;color:#00543a;font:800 25px/1.2 Outfit,Arial,sans-serif;overflow-wrap:anywhere}.glossary-flip-card:hover .glossary-face{border-top-color:#71bfdc;border-right-color:#71bfdc;border-bottom-color:#71bfdc}.glossary-back{transform:rotateY(180deg);padding:9px 11px;overflow:auto;scrollbar-width:thin}.glossary-back h3{font:800 15px/1.1 Outfit,Arial,sans-serif;margin:0 0 4px;color:#00543a}.glossary-back .glossary-definition{font:500 12px/1.3 Outfit,Arial,sans-serif;color:#203c34;margin:0 0 6px}.glossary-code-window{border:1px solid #00543a;border-radius:5px;overflow:hidden;background:#f7fcff}.glossary-code-title{display:flex;align-items:center;gap:10px;padding:4px 8px;color:#fff;background:#00543a;font:600 10px/1.2 Outfit,Arial,sans-serif}.glossary-code-title>span{display:flex;gap:5px}.glossary-code-title i{width:7px;height:7px;border-radius:50%;background:#009ff2}.glossary-code-title i:nth-child(2){background:#00bf5a}.glossary-code-title i:nth-child(3){background:#50d274}.glossary-back pre.code{margin:0;padding:6px 8px;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.3 Consolas,'Courier New',monospace;max-height:100px;overflow:auto;background:#f7fcff;color:#18312b;border:0;border-radius:0}.glossary-explanation{font:500 11px/1.3 Outfit,Arial,sans-serif;color:#647078;margin:6px 0 0}.glossary-pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:12px 0 0;height:36px;color:#00543a;font:600 13px Outfit,Arial,sans-serif}.glossary-pagination .btn,.knowledge-top-actions .btn{background:#fff;border:1px solid #a7d7ef;color:#008acb}.glossary-flip-card:focus-visible{outline:3px solid #009ff2}
@media(max-width:1450px){.glossary-flip-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:210px;height:auto}.glossary-front h2{font-size:23px}}
@media(max-width:1050px){.glossary-flip-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:230px}}
@media(max-width:720px){.glossary-flip-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:250px}.glossary-front h2{font-size:22px}}
@media(max-width:450px){.glossary-flip-grid{grid-template-columns:1fr;grid-auto-rows:250px}}
@media(prefers-reduced-motion:reduce){.glossary-card-inner{transition:none}}
/* Equal side columns centre the brief; the title stays clearly on the left. */
.challenge-title-row{grid-template-columns:minmax(250px,1fr) minmax(0,3.2fr) minmax(250px,1fr);gap:20px}.challenge-title-copy{justify-self:start;padding-left:0;max-width:100%}.challenge-title-copy h1{font:800 28px/1.15 Outfit,Arial,sans-serif;overflow-wrap:anywhere}.challenge-title-row>.challenge-brief{text-align:left;font:700 17px/1.45 Outfit,Arial,sans-serif;padding:12px 16px}.challenge-title-row #challengeTopActions{max-width:none;justify-self:end}
@media(max-width:1300px){.challenge-title-row{grid-template-columns:minmax(190px,1fr) minmax(0,3fr) minmax(190px,1fr);gap:14px}.challenge-title-copy h1{font-size:25px}.challenge-title-row>.challenge-brief{font-size:16px}.challenge-title-row #challengeTopActions{grid-column:3}}
@media(max-width:950px){.challenge-title-row{grid-template-columns:1fr}.challenge-title-row>.challenge-brief{grid-column:1;max-height:190px}.challenge-title-row #challengeTopActions{grid-column:1;justify-self:start;justify-content:flex-start}}
/* Heading order: title, filters, progress, page controls. */
#app>.challenge-browser-head{grid-template-columns:48px minmax(280px,.95fr) minmax(360px,1.3fr) auto auto;column-gap:16px}#app>.challenge-browser-head>.filters{grid-column:3;grid-row:1;grid-template-columns:minmax(135px,1fr) 95px minmax(120px,1fr);max-width:560px;justify-self:center}#app>.challenge-browser-head>.challenge-progress{grid-column:4;grid-row:1}#app>.challenge-browser-head>#challengeCardPagination{grid-column:5;grid-row:1}
@media(max-width:1550px){#app>.challenge-browser-head{grid-template-columns:40px minmax(230px,.9fr) minmax(325px,1.15fr) auto auto;column-gap:12px;row-gap:0}#app>.challenge-browser-head>.filters{grid-column:3;grid-row:1;max-width:480px;grid-template-columns:minmax(125px,1fr) 85px minmax(105px,1fr);gap:6px}#app>.challenge-browser-head>.challenge-progress{grid-column:4;grid-row:1;font-size:16px;gap:14px}#app>.challenge-browser-head .challenge-progress strong{font-size:22px}#app>.challenge-browser-head>#challengeCardPagination{grid-column:5;grid-row:1;gap:7px;font-size:12px}#app>.challenge-browser-head>#challengeCardPagination .btn{padding:6px 8px;font-size:11px}#app>.challenge-browser-head .filters input,#app>.challenge-browser-head .filters select{font-size:12px;padding-left:9px;padding-right:9px}}
@media(max-width:1250px){#app>.challenge-browser-head{grid-template-columns:36px minmax(210px,.9fr) minmax(300px,1.1fr) auto auto;column-gap:9px}#app>.challenge-browser-head h1{font-size:24px}#app>.challenge-browser-head>.filters{grid-template-columns:minmax(115px,1fr) 80px minmax(95px,1fr)}#app>.challenge-browser-head>.challenge-progress{font-size:14px;gap:10px}#app>.challenge-browser-head .challenge-progress strong{font-size:20px}}
@media(max-width:1100px){#app>.challenge-browser-head{grid-template-columns:40px minmax(0,1fr) auto;row-gap:10px}#app>.challenge-browser-head>.filters{grid-column:1/3;grid-row:2;max-width:none;grid-template-columns:minmax(130px,1fr) 100px minmax(120px,1fr)}#app>.challenge-browser-head>.challenge-progress{grid-column:3;grid-row:2}#app>.challenge-browser-head>#challengeCardPagination{grid-column:3;grid-row:1}}
@media(max-width:700px){#app>.challenge-browser-head{grid-template-columns:40px minmax(0,1fr)}#app>.challenge-browser-head>.filters{grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr}#app>.challenge-browser-head>.filters label:last-child{grid-column:1/-1}#app>.challenge-browser-head>.challenge-progress{grid-column:1/-1;grid-row:3;justify-self:center}#app>.challenge-browser-head>#challengeCardPagination{grid-column:1/-1;grid-row:4;justify-self:center}}
/* Lesson challenge filters sit in the existing title row, keeping the lesson tabs in place. */
.lesson-top-panel>.pageTop.lesson-challenge-head{display:grid;grid-template-columns:38px minmax(250px,1fr) minmax(350px,480px) auto;gap:12px;min-height:44px;align-items:center}.lesson-challenge-head>.page-brand-art{grid-column:1;grid-row:1;margin:0!important}.lesson-challenge-head>.page-heading-copy{grid-column:2;grid-row:1;min-width:0}.lesson-challenge-head>.filters{grid-column:3;grid-row:1;display:grid;grid-template-columns:minmax(125px,1fr) 95px minmax(120px,1fr);gap:8px;padding:0;margin:0;border:0;align-self:center}.lesson-challenge-head>.filters label{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:9px;line-height:1.15}.lesson-challenge-head>.filters select,.lesson-challenge-head>.filters input{width:100%;min-width:0;height:28px;padding:3px 8px;font-size:11px;box-sizing:border-box}.lesson-challenge-head>.lesson-heading-controls{grid-column:4;grid-row:1}.lesson-challenge-panel>#challengeCardPagination{position:absolute;right:0;bottom:3px;height:30px;margin:0;gap:9px;font-size:12px}.lesson-challenge-panel>#challengeCardPagination .btn{padding:4px 9px;min-height:28px;font-size:11px}.lesson-challenge-panel:has(#challengeCardPagination)>.tabs{padding-right:280px}
@media(max-width:1450px){.lesson-top-panel>.pageTop.lesson-challenge-head{grid-template-columns:38px minmax(230px,1fr) minmax(310px,400px) auto;gap:8px}.lesson-challenge-head>.filters{grid-template-columns:minmax(110px,1fr) 85px minmax(105px,1fr);gap:6px}.lesson-challenge-head .lesson-transfer-button{padding:5px 7px}.lesson-challenge-head .lesson-step-button{padding:5px 7px;min-width:0}}
@media(max-width:1150px){.lesson-top-panel>.pageTop.lesson-challenge-head{grid-template-columns:38px minmax(210px,1fr) minmax(300px,1fr) auto;gap:7px}.lesson-challenge-head .lesson-transfer-button span{display:none}.lesson-challenge-head .lesson-transfer-button{width:30px;padding:5px}.lesson-challenge-head .lesson-step-button span{display:none}.lesson-challenge-head .lesson-step-button{min-width:30px;width:30px;padding:5px}}
@media(max-width:850px){.lesson-top-panel>.pageTop.lesson-challenge-head{grid-template-columns:29px minmax(0,1fr) auto;row-gap:7px}.lesson-challenge-head>.filters{grid-column:1/-1;grid-row:2}.lesson-challenge-head>.lesson-heading-controls{grid-column:3}.lesson-challenge-panel>#challengeCardPagination{position:static;justify-content:flex-end;margin:6px 0 0}.lesson-challenge-panel:has(#challengeCardPagination)>.tabs{padding-right:0}}
/* Unlabelled visual controls match the white and blue lesson navigation buttons. */
#app>.challenge-browser-head>.filters,.lesson-challenge-head>.filters{align-items:center;align-self:center}#app>.challenge-browser-head>.filters label,.lesson-challenge-head>.filters label{gap:0;justify-content:center;height:32px}#app>.challenge-browser-head .filters select,#app>.challenge-browser-head .filters input,.lesson-challenge-head>.filters select,.lesson-challenge-head>.filters input{height:32px;min-height:32px;margin:0;padding:5px 8px;border:1px solid #b8ddef;border-radius:6px;background:#fff;color:#007cb8;font:600 11px/1.2 Outfit,Arial,sans-serif;box-shadow:none}#app>.challenge-browser-head .filters input::placeholder,.lesson-challenge-head>.filters input::placeholder{color:#007cb8;opacity:1}#app>.challenge-browser-head .filters select:hover,#app>.challenge-browser-head .filters input:hover,.lesson-challenge-head>.filters select:hover,.lesson-challenge-head>.filters input:hover{background:#e0f3ff;border-color:#74bfe5;color:#005e91}#app>.challenge-browser-head>#challengeCardPagination .btn{height:32px;min-height:32px;display:inline-flex;align-items:center}
@media(max-width:650px){.lesson-challenge-head>.filters label{height:28px}.lesson-challenge-head>.filters select,.lesson-challenge-head>.filters input{height:28px;min-height:28px}}
/* Glossary fronts follow the approved compact challenge panel: five across, three down. */
.glossary-flip-grid{grid-template-rows:repeat(3,minmax(0,1fr))}.glossary-front{display:grid;grid-template-columns:50px minmax(0,1fr) 86px;grid-template-rows:minmax(0,1fr) auto;column-gap:12px;row-gap:18px;padding:20px 16px;text-align:left;align-items:start}.glossary-card-number{grid-column:1;grid-row:1;height:100%;border-right:1px solid #cfdce3;color:#00543a;font:800 36px/1 Outfit,Arial,sans-serif;letter-spacing:-2px;padding-right:8px}.glossary-front-copy{grid-column:2;grid-row:1;min-width:0;align-self:start}.glossary-front h2{font:800 21px/1.15 Outfit,Arial,sans-serif;text-align:left;overflow-wrap:normal;word-break:normal}.glossary-front-copy>p{font:400 13px/1.45 Outfit,Arial,sans-serif;color:#6b6a85;margin:16px 0 0}.glossary-card-art{grid-column:3;grid-row:1;align-self:center;justify-self:center;width:86px;height:110px;object-fit:contain}.glossary-card-action{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:16px;color:#009ff2;font:800 18px/1.2 Outfit,Arial,sans-serif}.glossary-card-action>span{font:400 28px/1 Arial,sans-serif}
@media(min-width:1750px){.glossary-front{grid-template-columns:50px minmax(0,1fr) 96px}.glossary-card-art{width:96px;height:120px}}
@media(max-width:1450px){.glossary-flip-grid{grid-template-rows:none;grid-auto-rows:270px}.glossary-front{grid-template-columns:44px minmax(0,1fr) 80px;column-gap:10px}.glossary-card-number{font-size:32px}.glossary-front h2{font-size:20px}.glossary-card-art{width:80px;height:110px}}
@media(max-width:720px){.glossary-flip-grid{grid-auto-rows:285px}.glossary-front{padding:18px 12px;grid-template-columns:38px minmax(0,1fr) 72px;column-gap:8px}.glossary-card-number{font-size:28px}.glossary-front h2{font-size:19px}.glossary-card-art{width:72px;height:100px}.glossary-front-copy>p{font-size:12px}.glossary-card-action{font-size:17px}}
/* Lesson-specific challenges need only topic and difficulty; return search space to the title. */
.lesson-top-panel>.pageTop.lesson-challenge-head{grid-template-columns:38px minmax(0,1fr) minmax(200px,260px) auto}.lesson-challenge-head>.filters{grid-template-columns:minmax(110px,1fr) 95px}.lesson-challenge-head .page-heading-copy h1{white-space:normal;overflow:visible;text-overflow:clip}
@media(max-width:1450px){.lesson-top-panel>.pageTop.lesson-challenge-head{grid-template-columns:38px minmax(0,1fr) minmax(185px,235px) auto}.lesson-challenge-head>.filters{grid-template-columns:minmax(100px,1fr) 85px}}
@media(max-width:1150px){.lesson-top-panel>.pageTop.lesson-challenge-head{grid-template-columns:38px minmax(0,1fr) minmax(185px,225px) auto}}
@media(max-width:850px){.lesson-top-panel>.pageTop.lesson-challenge-head{grid-template-columns:29px minmax(0,1fr) auto}.lesson-challenge-head>.filters{grid-template-columns:minmax(130px,1fr) 100px}}
/* Final glossary density: four columns and three rows, twelve cards per page. */
@media(min-width:1451px){.glossary-flip-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.glossary-front{grid-template-columns:50px minmax(0,1fr) 112px;column-gap:16px;padding:22px 20px}.glossary-card-art{width:112px;height:132px}.glossary-front h2{font-size:23px}.glossary-front-copy>p{font-size:14px}}
.challenge-title-meta{display:flex;align-items:center;gap:12px}.challenge-title-art{display:block;width:80px;height:80px;object-fit:contain}.challenge-title-copy{align-self:center;gap:7px}.challenge-title-copy h1{font-family:Outfit,Arial,sans-serif}.challenge-title-meta .unitBadge{flex-shrink:0}
@media(max-width:950px){.challenge-title-meta{gap:8px}.challenge-title-art{width:58px;height:58px}}
.knowledge-region-control{display:flex;align-items:center}.knowledge-region-control select{height:38px;max-width:260px;min-width:175px;padding:6px 30px 6px 10px;border:1px solid #b8ddef;border-radius:6px;background:#fff;color:#007cb8;font:600 12px Outfit,Arial,sans-serif}.ko.ko-viewer{position:relative;overflow:hidden;margin-top:0;background:#fff;border:1px solid #bbd9e5;border-radius:7px;cursor:grab;touch-action:none}.ko-viewer.is-panning{cursor:grabbing}.ko-viewer>img{position:absolute;left:0;top:0;max-width:none;max-height:none;transform-origin:0 0;user-select:none;pointer-events:none;will-change:transform}.knowledge-view-status{position:absolute;right:9px;bottom:8px;padding:4px 8px;border:1px solid #cce5ed;border-radius:4px;background:rgba(255,255,255,.95);color:#00543a;font:500 11px Outfit,Arial,sans-serif;pointer-events:none}.ko-viewer:focus-visible{outline:3px solid #009ff2;outline-offset:2px}.knowledge-top-actions{align-items:center}
@media(max-width:650px){.knowledge-region-control{flex:1;min-width:0}.knowledge-region-control select{width:100%;max-width:none;min-width:0}}
/* Glossary paging shares the title bar; a partial last page keeps the same row heights. */
#app>.glossary-top-panel>#glossaryPagination{margin:0 0 0 auto;flex:0 0 auto;align-self:center;white-space:nowrap}.glossary-flip-grid{align-content:start}.glossary-flip-card{height:100%}
@media(max-width:650px){#app>.glossary-top-panel{flex-wrap:wrap}#app>.glossary-top-panel>#glossaryPagination{flex-basis:100%;margin:0;justify-content:flex-end}}

/* Compact resource headers match the challenge browser header. */
#app>.python-ide-heading,#app>.knowledge-top-panel{min-height:62px;padding:0;margin:0 0 14px;align-items:center;gap:16px}
#app>.python-ide-heading>.page-brand-art,#app>.knowledge-top-panel>.page-brand-art{width:44px;height:44px;flex:0 0 44px;margin:0;align-self:center}
#app>.knowledge-top-panel{grid-template-columns:48px minmax(300px,1fr) auto}
#app>.python-ide-heading h1,#app>.knowledge-top-panel h1{margin:0;line-height:1.15}
.python-ide-heading .ide-open-file{background:#fff;color:#007cb8;border:1px solid #b8ddef;cursor:pointer}
.python-ide-heading .ide-open-file:hover{background:#e0f3ff;border-color:#74bfe5;color:#005e91}
@media(max-width:1250px){#app>.knowledge-top-panel{grid-template-columns:40px minmax(0,1fr)}#app>.knowledge-top-panel>.knowledge-top-actions{grid-column:1/-1;padding-bottom:10px}}

/* Keep the approved wide glossary shape on every screen and page. */
.glossary-flip-grid{height:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;align-items:start}
.glossary-flip-card{height:auto;aspect-ratio:447/265;container-type:inline-size}
.glossary-front{padding:6cqw 5cqw;grid-template-columns:15% minmax(0,1fr) 34%;column-gap:5cqw;row-gap:4cqw}
.glossary-card-number{font-size:10cqw;padding-right:2cqw;letter-spacing:-.4cqw}
.glossary-front h2{font-size:6.3cqw;line-height:1.15}
.glossary-front-copy>p{font-size:3.8cqw;line-height:1.45;margin-top:5cqw}
.glossary-card-art{width:100%;height:32cqw}
.glossary-card-action{font-size:5.2cqw;gap:4cqw}
.glossary-card-action>span{font-size:7cqw}
@media(max-width:1450px){.glossary-flip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.glossary-flip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.glossary-flip-grid{grid-template-columns:minmax(0,1fr)}}

/* Shared confirmation messages use the site's white and blue controls. */
.page-confirmation-panel{background:#fff;border:1px solid #b8ddef;border-left:6px solid #b8e5fa}
.page-confirmation-actions>.btn{background:#fff;border:1px solid #b8ddef;color:#007cb8;min-height:38px}
.page-confirmation-actions>.btn:hover{background:#e0f3ff;border-color:#74bfe5;color:#005e91}
.challenge-title-row>.challenge-brief-with-code{max-height:260px;white-space:normal}
.challenge-brief-with-code>p{margin:0;color:inherit;font:inherit;white-space:pre-line}
.challenge-brief-with-code>.source-code-window{margin:10px 0 0;white-space:normal;text-align:left}
.challenge-brief-with-code>.source-code-window pre{font-size:17px;line-height:1.4;padding:10px 12px;margin:0;white-space:pre-wrap}
/* Data-type recap: one accessible choice per input row. */
.source-data-type-table{table-layout:fixed;width:100%;background:white}.source-data-type-table thead th:first-child{width:38%}.source-data-type-table thead th{background:#d9f1ff;color:#00543a;font-family:Outfit,Arial,sans-serif;font-weight:800;font-size:16px;text-align:center;padding:12px}.source-data-type-table thead th:first-child{text-align:left}.source-data-type-table tbody th{background:#f3fbff;text-align:left;padding:10px 13px;color:#00543a;font-family:Outfit,Arial,sans-serif;font-size:16px;font-weight:700}.source-data-type-table tbody tr:nth-child(even) th{background:#edf8f3}.source-data-type-table tbody th>div{display:flex;align-items:center;gap:8px}.source-data-type-table tbody th small{display:block;margin:3px 0 0 32px;font-size:12px;font-weight:400;color:#667785}.source-data-type-table tbody th>.source-question-feedback{display:block;margin:3px 0 0 32px;font-size:12px}.source-data-type-table td{padding:5px!important;text-align:center;background:white}.source-data-type-table .data-type-option{display:flex;align-items:center;justify-content:center;min-height:45px;width:100%;border-radius:6px;border:1px solid transparent;cursor:pointer}.source-data-type-table .data-type-option:hover{background:#f0faff;border-color:#b9dff2}.source-data-type-table .data-type-option.chosen{background:#ddf3ff;border-color:#009ff2}.source-data-type-table input[type=radio]{width:20px;height:20px;accent-color:#009ff2;cursor:pointer}.source-data-type-table .data-type-option:focus-within{outline:3px solid #009ff2;outline-offset:1px}.source-data-type-actions{display:flex;justify-content:flex-end;margin-top:12px}@media(max-width:650px){.source-data-type-table{min-width:520px}.source-data-type-table thead th,.source-data-type-table tbody th{font-size:14px}.source-data-type-table tbody th small{margin-left:0}}
/* Keep the data-type recap tight, without per-row examples. */
.source-data-type-table thead th{padding:6px 10px;font-size:14px;line-height:1.2}.source-data-type-table tbody th{padding:3px 10px;font-size:14px;line-height:1.25}.source-data-type-table tbody th>div{gap:6px}.source-data-type-table td{padding:2px 4px!important}.source-data-type-table .data-type-option{min-height:26px}.source-data-type-table input[type=radio]{width:17px;height:17px;margin:0}.source-data-type-table .question-status{width:20px;height:20px;min-width:20px;flex:0 0 20px;font-size:13px}.source-data-type-table tbody th>.source-question-feedback{display:inline;margin:0 0 0 26px;font-size:11px;line-height:1.15}.source-data-type-table tbody th>.source-question-feedback:empty{display:none}.source-data-type-actions{margin-top:8px}@media(pointer:coarse){.source-data-type-table .data-type-option{min-height:34px}}
.source-data-type-table tbody th>.source-question-feedback{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Shared Knowledge Organiser / PLC / Revision title treatment. */
#app>.knowledge-top-panel h1{font-family:Outfit,Arial,sans-serif;font-size:32px;font-weight:800;line-height:1.15;letter-spacing:-.5px;margin:0}@media(max-width:650px){#app>.knowledge-top-panel h1{font-size:25px}}

/* One title treatment for every main section, matching Coding challenges. */
#app>.pageTop h1{font-family:Outfit,Arial,sans-serif;font-size:32px;font-weight:700;line-height:1.15;letter-spacing:-.5px;color:#00452f;margin:0}
@media(max-width:650px){#app>.pageTop h1{font-size:25px}}

/* Glossary and Coding challenges share card widths, heights and grid spacing. */
#app:has(.glossary-flip-grid){max-width:1920px;padding-top:20px}
.glossary-flip-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:220px;gap:16px;height:auto;align-items:stretch}
.glossary-flip-card{height:220px;min-height:220px;aspect-ratio:auto}
.glossary-face{border-radius:6px}
.glossary-front{padding:19px 16px 16px 17px;grid-template-columns:44px minmax(0,1fr) 98px;column-gap:12px;row-gap:12px}
.glossary-card-number{font-size:32px;letter-spacing:-1px;padding-right:9px}
.glossary-front h2{font-size:20px;line-height:1.15}
.glossary-front-copy>p{font-size:14px;line-height:1.4;margin-top:8px}
.glossary-card-art{width:98px;height:112px;object-fit:contain}
.glossary-card-action{font-size:17px;gap:14px}.glossary-card-action>span{font-size:28px}
@media(min-width:1600px){.glossary-flip-grid{grid-auto-rows:224px}.glossary-flip-card{height:224px;min-height:224px}.glossary-front{grid-template-columns:48px minmax(0,1fr) 112px;column-gap:14px}.glossary-card-art{width:112px;height:125px}}
@media(max-width:1450px){.glossary-flip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.glossary-flip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.glossary-flip-grid{grid-template-columns:minmax(0,1fr)}}

/* All glossary cards keep the same compact depth on both faces. */
.glossary-flip-grid{grid-auto-rows:180px}.glossary-flip-card{height:180px;min-height:180px}
.glossary-front{padding:12px 14px;grid-template-columns:40px minmax(0,1fr) 80px;column-gap:12px;row-gap:8px}
.glossary-card-art{width:80px;height:80px}.glossary-card-action{font-size:16px}.glossary-card-action>span{font-size:24px}
.glossary-back{padding:10px 14px}.glossary-back h3{font-size:16px;margin-bottom:3px}.glossary-back .glossary-definition{margin-bottom:5px}.glossary-back pre.code{max-height:85px;padding:5px 8px}.glossary-back .glossary-explanation{margin-top:5px}

/* Four glossary cards across on desktop, compact layouts on smaller screens. */
@media(min-width:1101px){.glossary-flip-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}