@import url('/style.css');
body{display:block;margin:0;background:var(--accent-soft);color:var(--text);font-family:Inter,Segoe UI,sans-serif;overflow:auto;height:auto;min-height:100vh}body>header{display:flex;align-items:center;justify-content:space-between;padding:24px 5vw;border-bottom:1px solid var(--line);gap:20px}a{color:var(--text);text-underline-offset:4px}header>a:last-child{font-size:13px}.brand{text-decoration:none;font-size:25px;font-weight:750}.brand span{font-weight:400}main{max-width:1450px;padding:36px 5vw;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}.intro h1{font-size:clamp(29px,3.2vw,46px);letter-spacing:-1.5px;margin:10px 0}.intro h1 span{color:var(--accent)}.intro p{color:var(--text-muted);font-size:14px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--accent)}.race-link{font-size:12px;max-width:210px;line-height:1.8}.learning-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:28px;align-items:start}.course{padding:8px 0}.course h2{font-size:16px;margin:0 0 8px}.course p{font-size:12px;color:var(--text-muted);line-height:1.6}.course nav{display:grid;gap:7px;margin:22px 0 12px}.course-button{display:block;width:100%;text-align:left;padding:13px 12px;border:1px solid transparent;background:transparent;color:var(--text);border-radius:9px;font:inherit;font-size:13px;cursor:pointer}.course-button small{display:block;font-size:10px;margin-top:6px;color:var(--text-muted)}.course-button:hover{background:var(--line)}.course-button.active{background:var(--line);border-color:var(--line-strong);font-weight:650}.course .storage-note{font-size:10px;margin-top:20px}.exercise{background:var(--accent-faint);border:1px solid var(--line);padding:26px;border-radius:16px;min-width:0}.exercise-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.exercise-heading h2{font-size:25px;margin:8px 0}#lesson-progress{font-size:11px;white-space:nowrap;color:var(--text-muted)}#lesson-intro{font-size:13px;line-height:1.8;max-width:730px;margin:8px 0 22px;color:var(--text-muted)}.exercise-layout{display:grid;grid-template-columns:minmax(230px,470px) minmax(180px,1fr);gap:26px}.learn-board{display:grid;grid-template-columns:repeat(9,1fr);width:100%;aspect-ratio:1;border:2px solid var(--text);background:var(--accent-faint);border-radius:3px;overflow:hidden}.learn-cell{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--accent-faint);position:relative;padding:0;min-width:0;min-height:0;color:var(--accent);font-size:clamp(18px,2.2vw,29px);font-family:inherit;cursor:pointer}.learn-cell:nth-child(3n){border-right:2px solid var(--text-muted)}.learn-cell:nth-child(9n){border-right:0}.learn-cell:nth-child(n+19):nth-child(-n+27),.learn-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--text-muted)}.learn-cell.given{color:var(--text);font-weight:650}.learn-cell.source{background:#e0edf0}.learn-cell.target{background:var(--accent-soft)}.learn-cell.selected{box-shadow:inset 0 0 0 2px var(--accent)}.learn-cell:focus-visible{outline:3px solid #3c7585;outline-offset:-3px;z-index:1}.learn-candidates{position:absolute;inset:3px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:clamp(8px,.9vw,12px);color:var(--text-muted);align-items:center}.learn-candidates .marked{color:var(--accent);font-weight:800;background:var(--accent-soft);border-radius:3px}.number-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin:14px 0;height:auto}.number-pad button{border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);height:40px;padding:0;font:inherit;font-size:17px;cursor:pointer}.number-pad button:hover{background:var(--line)}.board-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.board-tools .secondary{font-size:11px;padding:9px}.board-tools label{font-size:10px;display:flex;align-items:center;gap:4px}.board-tools input{width:auto}.board-tools button[aria-pressed=true]{background:var(--line);border-color:var(--text-muted)}.legend{display:flex;justify-content:space-between;font-size:9px;color:var(--text-muted);gap:8px;margin-top:9px}.legend span:first-child{color:#456f7b}.legend span:last-child{color:var(--accent)}.coach{background:var(--panel);border:1px solid var(--line);padding:18px;border-radius:10px;align-self:start;min-width:0}.coach h3{font-size:18px;margin:12px 0}.coach p,.coach #hint-text{font-size:12px;line-height:1.8;overflow-wrap:anywhere}.coach button{display:block;width:100%;margin-top:10px;font-size:12px;white-space:normal}.coach .score{font-size:10px;color:var(--text-muted);border-top:1px solid var(--line);padding-top:14px;margin-top:18px}#feedback{font-weight:600}#hint-text{padding-top:5px}#practice-controls{margin-bottom:20px;font-size:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}#practice-controls[hidden],[hidden]{display:none!important}#practice-controls select{padding:8px;border:1px solid var(--line-strong);background:white;border-radius:6px}button:disabled{opacity:.5;cursor:default}
@media(min-width:1450px){.learn-cell{font-size:29px}.learn-candidates{font-size:12px}}@media(max-width:1100px){.learning-layout{grid-template-columns:185px minmax(0,1fr);gap:18px}.exercise{padding:20px}.exercise-layout{grid-template-columns:minmax(230px,1fr);gap:20px}.coach{width:auto}.learn-cell{font-size:28px}.learn-candidates{font-size:12px}}@media(max-width:650px){body>header{padding:18px 5vw}.brand{font-size:20px}main{padding-top:24px}.intro{display:block;margin-bottom:24px}.intro h1{font-size:32px}.race-link{display:inline-block;max-width:none}.learning-layout{display:block}.course nav{display:flex;overflow:auto;gap:8px;margin:12px 0}.course nav .course-button{min-width:150px}.course-button small{font-size:10px}.course .storage-note{margin:8px 0 20px}.exercise{padding:16px}.exercise-heading h2{font-size:21px}.learn-cell{font-size:23px}.learn-candidates{font-size:10px}.exercise-layout{grid-template-columns:minmax(0,1fr)}.coach{padding:16px}.exercise-heading{align-items:flex-start}#lesson-progress{font-size:10px}.number-pad button{height:36px}}

/* Keep the board, input and coaching together within the available viewport. */
body>header{padding:12px 32px}.brand{font-size:22px}main{max-width:1500px;padding:14px 32px}.intro{margin-bottom:12px;gap:16px}.intro .eyebrow{display:none}.intro h1{font-size:26px;letter-spacing:-.8px;margin:0 0 4px}.intro p{font-size:12px;margin:0}.learning-layout{grid-template-columns:190px minmax(0,1fr);gap:20px}.course{max-height:calc(100dvh - 138px);overflow:auto;padding:4px 0}.course h2{font-size:14px}.course p{margin:6px 0}.course nav{margin:12px 0 8px;gap:4px}.course-button{padding:10px;font-size:12px}.course-button small{margin-top:4px}.course .storage-note{margin-top:12px}.exercise{padding:16px;min-width:0}.exercise-heading{margin-bottom:12px}.exercise-heading h2{font-size:22px;margin:4px 0 0}.exercise-layout{grid-template-columns:minmax(0,var(--learning-board-size,400px)) minmax(0,1fr);gap:20px;align-items:start}.exercise-layout>div:first-child{min-width:0}.learn-board{width:100%;font-size:initial}.learn-cell{font-size:clamp(16px,calc(var(--learning-board-size,400px)/17),29px)}.learn-candidates{font-size:clamp(7px,calc(var(--learning-board-size,400px)/42),12px);inset:2px}.number-pad{width:100%;max-width:none;min-height:0;margin:8px 0;gap:4px}.number-pad button{height:36px;min-height:36px;font-size:17px}.legend{margin-top:6px;font-size:9px}.board-tools{gap:5px}.board-tools .secondary{padding:7px;font-size:10px}.board-tools label{font-size:10px}.coach{padding:14px}.coach h3{font-size:16px;margin:8px 0}.coach p,.coach #hint-text{font-size:12px;line-height:1.6;margin:8px 0}.coach #lesson-intro{margin:8px 0 12px;font-size:12px;line-height:1.6}.coach #hint-text{padding-top:0}.coach p:empty,.coach #hint-text:empty{display:none}.coach button{padding:10px 12px;margin-top:8px}.coach .score{margin:12px 0 0;padding-top:10px;font-size:10px}#practice-controls{margin-bottom:12px}
@media(min-width:801px) and (max-width:1100px){.learning-layout{grid-template-columns:155px minmax(0,1fr);gap:14px}main{padding:12px 20px}.exercise-layout{gap:16px}.exercise{padding:12px}.course-button{padding:9px 7px}}
@media(max-width:800px){body>header{padding:10px 16px}.brand{font-size:20px}main{padding:10px 12px}.intro{display:none}.learning-layout{display:block}.course{display:flex;gap:8px;align-items:center;overflow:visible;max-height:none;margin:0 0 10px;padding:0}.course h2,.course>p,.course-button small{display:none}.course nav{display:flex;overflow:auto;flex:1;min-width:0;margin:0;gap:5px}.course nav .course-button{min-width:130px;padding:9px;font-size:11px;white-space:nowrap}.course>#practice-tab{width:auto;flex:none;font-size:11px;padding:9px}.exercise{padding:12px}.exercise-heading{margin-bottom:10px}.exercise-heading h2{font-size:20px}.exercise-layout{display:flex;flex-direction:column;gap:12px}.exercise-layout>div:first-child{width:var(--learning-board-size,300px);max-width:100%;align-self:center}.coach{order:-1;width:100%;padding:10px 12px}.coach>.eyebrow,.coach h3,.coach .score{display:none}.coach #lesson-intro{margin:0 0 6px;font-size:11px;line-height:1.5}.coach p,.coach #hint-text{font-size:11px;line-height:1.5;margin:6px 0}.coach button{display:inline-block;width:auto;margin:4px 6px 0 0;padding:8px 10px;font-size:11px}.board-tools{justify-content:center}.number-pad button{height:34px;min-height:34px}.legend{font-size:8px}#practice-controls{margin-bottom:8px}#practice-controls .secondary{padding:8px;font-size:11px}}
.technique-explanation summary{cursor:pointer;font-size:11px;color:var(--text-muted);line-height:1.5}.technique-explanation[open] summary{margin-bottom:4px}
.course-variants{display:flex;gap:6px;margin:0 0 14px}
.learn-board{grid-template-rows:repeat(9,minmax(0,1fr))}
.course-variants a{font-size:12px;text-decoration:none;padding:8px 13px;border:1px solid var(--line);border-radius:7px}
.course-variants a[aria-current=page]{background:var(--line);border-color:var(--text-subtle);font-weight:650}
.learn-cage-outline{position:absolute;inset:3px;pointer-events:none;border:0 dashed var(--text-muted)}
.learn-cage-outline.edge-top{border-top-width:1px}.learn-cage-outline.edge-bottom{border-bottom-width:1px}
.learn-cage-outline.edge-left{border-left-width:1px}.learn-cage-outline.edge-right{border-right-width:1px}
.learn-cage-sum{position:absolute;top:3px;left:5px;font-size:clamp(9px,calc(var(--learning-board-size,400px)/40),12px);font-weight:750;line-height:1;background:#fffefa;padding:0 1px;color:#354d3c;pointer-events:none}
.learn-cell.source .learn-cage-sum{background:#e0edf0}.learn-cell.target .learn-cage-sum{background:#fae6d4}
.killer-course .learn-cell.outside-excerpt:not(.source):not(.given):not(.target){background:var(--panel)}
.killer-course .learn-cell{padding-top:7px}
.killer-answer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.coach .killer-answer-list button{margin:0;padding:8px;font-size:13px;width:100%}
.killer-answer-list button[aria-pressed=true]{background:var(--line);border-color:var(--text-muted);box-shadow:inset 0 0 0 1px var(--text-muted)}
.coach .excerpt-note{font-size:10px;color:var(--text-muted)}
@media(max-width:800px){.course-variants{margin-bottom:8px}.course-variants a{padding:6px 10px;font-size:11px}.killer-course .coach #killer-excerpt{font-size:9px}.killer-course .killer-answer-list{grid-template-columns:repeat(3,minmax(0,1fr))}.killer-course #killer-choices>p{font-size:10px}.killer-course .coach .killer-answer-list button{padding:6px;font-size:12px}.killer-course #number-pad[hidden]{display:none!important}.killer-course .exercise-layout>div:first-child:has(#number-pad[hidden]){grid-template-columns:1fr}.killer-course .exercise-layout>div:first-child:has(#number-pad[hidden]) .learn-board{grid-column:1;justify-self:center}}
@media(max-width:800px){.course nav{scrollbar-width:thin}.exercise-layout>div:first-child{width:100%;display:grid;justify-items:stretch}.learn-board{width:var(--learning-board-size,300px);max-width:100%;justify-self:center}.number-pad{max-width:none}.exercise-heading h2{font-size:18px}.exercise-heading{margin-bottom:8px}.technique-explanation summary{font-size:10px}.coach #lesson-intro{margin-top:6px}.board-tools{flex-wrap:nowrap}.board-tools label{white-space:nowrap;font-size:9px}.board-tools .secondary{padding:7px;font-size:10px}}
@media(max-width:800px){body>header{padding:6px 16px}.course{margin-bottom:6px}.course nav .course-button,.course>#practice-tab{padding:6px 8px}.exercise-heading .eyebrow{display:none}.exercise-heading h2{margin:0}.exercise-layout>div:first-child{grid-template-columns:minmax(0,1fr) 112px;gap:6px 12px}.learn-board{grid-column:1;grid-row:1}.number-pad{grid-column:2;grid-row:1;grid-template-columns:repeat(3,1fr);gap:5px;align-self:center;margin:0}.number-pad button{min-width:0;height:36px;min-height:36px}.legend{grid-column:1/-1;grid-row:2;margin-top:0}.board-tools{grid-column:1/-1;grid-row:3}}

.killer-answer-list button.excluded[aria-pressed=true]{text-decoration:line-through;color:#858b7f;background:var(--panel);border-color:var(--line);box-shadow:none}

.killer-course #learn-board{touch-action:none}
.killer-course .learn-cell.tool-selected{box-shadow:inset 0 0 0 2px var(--text-muted);background:var(--line)}
.killer-course .learn-cell.target.tool-selected{background:var(--accent-soft)}
#tutorial-killer-tools{min-width:0;align-self:start;width:100%;margin:0}
#tutorial-killer-tools .killer-tool-body{max-height:none;overflow:visible}
#tutorial-killer-tools .killer-combos{max-height:none;overflow:visible}
@media(min-width:1200px){.killer-course .exercise-layout{grid-template-columns:minmax(0,var(--learning-board-size,400px)) minmax(240px,1fr) minmax(235px,280px)}}
@media(min-width:801px) and (max-width:1199px){.killer-course .exercise-layout>div:first-child{grid-column:1;grid-row:1 / span 2}.killer-course .coach{grid-column:2;grid-row:1}#tutorial-killer-tools{grid-column:2;grid-row:2}}
@media(max-width:800px){#tutorial-killer-tools{order:1}#tutorial-killer-tools summary{padding:9px 11px}.killer-course .exercise-layout>div:first-child:has(#number-pad[hidden]){grid-template-columns:1fr}}

/* Selection changes content inside the tools, never the page's geometry. */
html{scrollbar-gutter:stable}
.killer-course .exercise{overflow-anchor:none}
#tutorial-killer-tools summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 8px}
#tutorial-killer-tools summary strong{grid-column:1;grid-row:1}
#tutorial-killer-tools summary:after{grid-column:3;grid-row:1}
#tutorial-killer-tools summary output{grid-column:2;grid-row:1}
#tutorial-killer-tools .killer-combo-count{min-height:16px;margin:0}
#tutorial-killer-tools .killer-combos{grid-auto-rows:30px;min-height:calc(var(--tutorial-combo-rows,1)*30px + (var(--tutorial-combo-rows,1) - 1)*5px)}
#tutorial-killer-tools .killer-cage-context{min-height:24px}
#tutorial-killer-tools .select-current-cage[hidden],#tutorial-killer-tools .reset-cage-exclusions[hidden]{display:block!important;visibility:hidden}
@media(max-width:700px){#tutorial-killer-tools .killer-combos{grid-auto-rows:38px;min-height:calc(var(--tutorial-combo-rows,1)*38px + (var(--tutorial-combo-rows,1) - 1)*6px)}}


/* All lessons are visible in a native menu on mobile, without sideways scrolling. */
.mobile-course-picker{display:none}
.learning-app>header .beta-topbar{margin-right:auto}
@media(max-width:800px){
 .learning-app>header{padding:4px 12px;gap:8px;min-height:36px}
 .learning-app>header .brand{font-size:17px;flex:none}
 .learning-app>header>a:last-child{font-size:11px;white-space:nowrap}
 .learning-app main{padding:6px 8px}
 .learning-app .course-variants{gap:5px;margin-bottom:6px}
 .learning-app .course-variants a{padding:5px 9px;min-height:30px;display:flex;align-items:center}
 .learning-app .course{display:block;margin-bottom:8px}
 .learning-app .course #lessons,.learning-app .course #practice-tab{display:none}
 .learning-app .mobile-course-picker{display:flex;align-items:center;gap:8px;width:100%;font-size:10px;font-weight:650;color:var(--text-muted)}
 .mobile-course-picker>span{flex:0 0 66px;line-height:1.5}
 .mobile-course-picker select{width:100%;min-width:0;min-height:40px;padding:8px;border:1px solid var(--line-strong);border-radius:7px;background:var(--accent-faint);color:var(--text);font:inherit;font-size:12px}
 .learning-app .exercise{padding:8px;border-radius:12px}
 .learning-app .exercise-heading{margin-bottom:6px;align-items:center;gap:6px}
 .learning-app .exercise-heading h2{font-size:16px;line-height:1.3}
 .learning-app #lesson-progress{font-size:9px}
 .learning-app .exercise-layout{gap:8px}
 .learning-app .exercise-layout>div:first-child{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;width:100%;align-self:stretch}
 .learning-app .exercise-layout>div:first-child .learn-board{grid-column:1;grid-row:1;width:var(--learning-board-size);max-width:100%}
 .learning-app .number-pad{grid-column:1;grid-row:3;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;margin:0}
 .learning-app .number-pad button{min-height:36px;height:36px}
 .learning-app .legend{grid-column:1;grid-row:2;margin:0;font-size:8px}
 .learning-app .board-tools{grid-column:1;grid-row:4;flex-wrap:wrap}
 .learning-app .coach{order:-2;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:8px}
 .learning-app .coach #task{order:-1;width:100%;margin:0;font-size:11px}
 .learning-app .coach .technique-explanation{flex:1;min-width:140px}
 .learning-app .coach .technique-explanation[open]{flex-basis:100%}
 .learning-app .coach .technique-explanation summary{font-size:10px}
 .learning-app .coach>button{width:auto;min-height:34px;margin:0;padding:7px 9px;font-size:10px}
 .learning-app .coach #feedback{flex-basis:100%;margin:0}
 .learning-app .coach #review-controls{flex-basis:100%}
 .learning-app .exercise-layout>#killer-choices{order:2;width:100%;min-width:0}
 .learning-app #killer-choices>p{font-size:11px;line-height:1.5;margin:0 0 6px}
 .learning-app #killer-choices .killer-answer-list button{width:100%;min-height:38px;margin:0;padding:6px;font-size:12px}
 .learning-app #tutorial-killer-tools{order:-1}
 .learning-app #tutorial-killer-tools summary{padding:7px 9px;min-height:34px}
}

/* Give post-race reviews the full width and keep cage sums clear of notes. */
.learning-app.review-mode .intro,.learning-app.review-mode .course,.review-mode .course-variants,.review-mode #killer-excerpt,.review-mode #task{display:none}
.review-mode .learning-layout{grid-template-columns:minmax(0,1fr)}
.review-mode #lesson-intro{margin-bottom:10px}
.review-mode #review-controls{display:flex;gap:8px}
.review-mode #review-controls button{flex:1;min-width:0}
.review-mode.killer-course .learn-candidates{inset:12px 3px 2px;font-size:clamp(7px,calc(var(--learning-board-size,400px)/48),11px)}
.killer-course .learn-candidates{inset:12px 3px 2px;font-size:clamp(7px,calc(var(--learning-board-size,400px)/48),11px)}
@media(min-width:801px){.review-mode main{padding-top:20px}}

/* Explanations are reading material, even when the exercise is compact. */
.learning-app{--muted:var(--text);font-size:16px}
.learning-app .intro p,.learning-app .course p{font-size:15px;line-height:1.65;color:var(--text)}
.learning-app .eyebrow{font-size:12px;color:var(--accent-strong);letter-spacing:1px}
.learning-app .course nav .course-button,.learning-app .course>#practice-tab{font-size:14px;line-height:1.5;white-space:normal;min-height:44px}
.learning-app .course-button small,.learning-app .course .storage-note{font-size:13px;line-height:1.6;color:var(--text)}
.learning-app .coach p,.learning-app .coach #hint-text,.learning-app .coach #lesson-intro{font-size:16px;line-height:1.65}
.learning-app .coach .score,.learning-app #lesson-progress,.learning-app .technique-explanation summary{font-size:14px;line-height:1.6;color:var(--text)}
.learning-app .coach button,.learning-app .board-tools .secondary,.learning-app #practice-controls .secondary{font-size:14px;line-height:1.5;min-height:44px;white-space:normal}
.learning-app .board-tools label,.learning-app #practice-controls,.learning-app .course-variants a{font-size:14px;line-height:1.5}
.learning-app .course-variants{flex-wrap:wrap}
.learning-app .course-variants a{min-height:44px}
.learning-app .legend{font-size:12px;line-height:1.5;flex-wrap:wrap}
.learning-app .legend span:first-child{color:#365e70}
.learning-app .legend span:last-child{color:var(--accent-strong)}
.learning-app .primary{background:var(--accent);color:#fff}
.learning-app .primary:hover{background:var(--accent-strong)}
.learning-app .board-tools input{width:18px;height:18px}
.learning-app :is(button,a,input,select,summary):focus-visible{outline:3px solid #365e79;outline-offset:3px}