.learning-hero{padding-bottom:22px}
.learning-hero p{width:100%;max-width:none}
.practice-shell,.stats-shell{width:100%;min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--blue) 23%,var(--line-soft));border-radius:22px;background:radial-gradient(ellipse at 0 0,rgba(102,169,255,.08),transparent 38%),linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,#192b45),var(--panel));box-shadow:var(--shadow)}
.practice-overview{display:flex;align-items:center;gap:15px;padding:21px 23px;border-bottom:1px solid var(--line-soft)}
.practice-overview-icon{display:grid;width:43px;height:43px;flex:none;place-items:center;border:1px solid rgba(100,226,229,.24);border-radius:13px;background:rgba(100,226,229,.1);color:var(--cyan);font-size:20px}
.practice-overview-copy{flex:1;min-width:0}
.practice-overview-copy .eyebrow-small{margin:0 0 4px;color:var(--cyan)}
.practice-overview-copy h2,.stats-card-heading h2,.stats-history-card h2{margin:0;font-size:20px;line-height:1.28;letter-spacing:-.025em}
.practice-overview-copy>p:last-child{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.practice-progress{display:grid;min-width:86px;justify-items:end;gap:2px}
.practice-progress strong{color:var(--cyan);font-size:20px;font-variant-numeric:tabular-nums}
.practice-progress span{color:var(--dim);font-size:10px;font-weight:750}
.practice-workspace{display:grid;grid-template-columns:minmax(220px,.58fr) minmax(0,1.42fr);gap:17px;padding:18px}
.practice-lesson-nav{min-width:0;padding:14px;border:1px solid var(--line-soft);border-radius:15px;background:color-mix(in srgb,var(--bg-soft) 52%,transparent)}
.practice-lesson-nav>.eyebrow-small{margin:0 0 10px;padding:0 3px}
#practiceLessonList{display:grid;gap:6px}
.practice-lesson-link{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:10px 9px;text-align:left;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.practice-lesson-link:hover{background:var(--panel);color:var(--text)}
.practice-lesson-link.is-active{border-color:rgba(102,169,255,.27);background:linear-gradient(100deg,rgba(56,137,245,.13),rgba(56,137,245,.045));color:var(--text)}
.practice-lesson-number{display:grid;width:31px;height:31px;flex:none;place-items:center;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2);color:var(--blue);font-size:10px;font-weight:900}
.practice-lesson-link-copy{display:grid;min-width:0;gap:2px}
.practice-lesson-link-copy strong{overflow:hidden;font-size:12px;line-height:1.35;text-overflow:ellipsis}
.practice-lesson-link-copy small{overflow:hidden;color:var(--dim);font-size:10px;line-height:1.35;text-overflow:ellipsis}
.practice-lesson-panel{min-width:0;padding:19px;border:1px solid var(--line-soft);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 55%),var(--panel)}
.practice-lesson-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.practice-lesson-heading .eyebrow-small{margin:0 0 4px;color:var(--blue)}
.practice-lesson-heading h2{margin:0 0 6px;font-size:23px;line-height:1.24;letter-spacing:-.03em}
.practice-lesson-heading p:last-child{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.practice-lesson-status{flex:none;padding:5px 8px;border:1px solid var(--line-soft);border-radius:999px;background:var(--panel-2);color:var(--dim);font-size:9px;font-weight:850;white-space:nowrap}
.practice-lesson-status.is-complete{border-color:rgba(120,226,177,.25);background:rgba(120,226,177,.1);color:var(--green)}
.practice-board-wrap{display:grid;min-height:130px;place-items:center;margin:18px 0 14px;padding:17px;border:1px solid var(--line-soft);border-radius:14px;background:radial-gradient(ellipse at 50% 0,rgba(102,169,255,.08),transparent 70%),rgba(4,10,18,.28)}
.theme-light .practice-board-wrap{background:radial-gradient(ellipse at 50% 0,rgba(56,137,245,.08),transparent 70%),#edf3fa}
.practice-board{display:grid;grid-template-columns:repeat(var(--practice-cols,3),clamp(42px,5vw,54px));grid-auto-rows:clamp(42px,5vw,54px);gap:4px;max-width:100%;user-select:none}
.practice-cell{display:grid;min-width:0;place-items:center;padding:0;border:1px solid #bccada;border-radius:6px;background:linear-gradient(145deg,#edf3f9,#d8e3ee);color:#25374d;font:900 21px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.practice-cell.practice-covered{border-color:#426282;background:linear-gradient(145deg,#3d5d7e,#29435e);box-shadow:inset 1px 1px rgba(255,255,255,.14),inset -1px -1px rgba(0,0,0,.22);color:#f7fbff;cursor:pointer;transition:transform .12s,filter .12s,border-color .12s,background .12s}
.practice-cell.practice-covered:hover:not(:disabled){filter:brightness(1.17);transform:translateY(-1px);border-color:#8ac1ff}
.practice-cell.practice-covered:active:not(:disabled){transform:translateY(1px)}
.practice-cell.practice-covered.is-selected{border-color:#79e5b7;background:linear-gradient(145deg,#247657,#165e48);box-shadow:0 0 0 2px rgba(120,226,177,.16),0 0 15px rgba(70,220,157,.2);color:white}
.practice-cell.practice-covered:disabled{cursor:default}
.practice-cell.practice-flag{border-color:#e5c36d;background:linear-gradient(145deg,#fff1bf,#f5daa0);color:#bd3f46;font-family:system-ui,sans-serif;font-size:22px}
.practice-cell.clue-1{color:#1768d1}.practice-cell.clue-2{color:#198353}.practice-cell.clue-3{color:#d54453}.practice-cell.clue-4{color:#563fbb}.practice-cell.clue-5{color:#9c3b21}.practice-cell.clue-6{color:#147f86}.practice-cell.clue-7{color:#172538}.practice-cell.clue-8{color:#718096}
.practice-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.practice-actions .button{min-height:39px;padding:9px 12px;font-size:11px}
.practice-actions .button:first-child{margin-right:auto}
.practice-actions [hidden]{display:none!important}
.practice-feedback{min-height:21px;margin:10px 0 0;color:var(--muted);font-size:12px;font-weight:700}
.practice-feedback[data-state="success"]{color:var(--green)}
.practice-feedback[data-state="error"]{color:var(--yellow)}
.practice-hint{margin:11px 0 0;padding:10px 12px;border:1px solid rgba(255,201,101,.22);border-radius:10px;background:rgba(255,201,101,.08);color:var(--text);font-size:12px;line-height:1.6}
.practice-explanation{margin-top:12px;padding:13px 14px;border:1px solid rgba(120,226,177,.22);border-left:3px solid var(--green);border-radius:12px;background:linear-gradient(110deg,rgba(120,226,177,.08),transparent 78%),var(--panel-2)}
.practice-explanation .eyebrow-small{margin:0 0 5px;color:var(--green)}
.practice-explanation p:last-child{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.practice-local-note,.stats-local-note{display:flex;align-items:flex-start;gap:9px;margin:0;padding:13px 19px;border-top:1px solid var(--line-soft);color:var(--dim);font-size:11px;line-height:1.55}
.practice-local-note span,.stats-local-note>span{color:var(--cyan);font-weight:900}
.practice-support-copy{margin-top:38px}
.practice-next-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.practice-next-link{display:flex;align-items:center;gap:11px;min-width:0;padding:14px;border:1px solid var(--line-soft);border-radius:14px;background:var(--panel);transition:transform .15s,border-color .15s}
.practice-next-link:hover{transform:translateY(-2px);border-color:rgba(102,169,255,.38)}
.practice-next-link>span:nth-child(2){display:grid;flex:1;min-width:0;gap:3px}
.practice-next-link strong{font-size:12px;line-height:1.4}
.practice-next-link small{color:var(--muted);font-size:10px;line-height:1.5}
.practice-next-link>b{color:var(--blue);font-size:18px}
.practice-next-icon{display:grid;width:34px;height:34px;flex:none;place-items:center;border:1px solid rgba(102,169,255,.22);border-radius:10px;background:rgba(102,169,255,.1);color:var(--blue);font-weight:900}
.practice-next-icon-mint{border-color:rgba(100,226,229,.2);background:rgba(100,226,229,.08);color:var(--cyan)}
.practice-next-icon-amber{border-color:rgba(255,201,101,.2);background:rgba(255,201,101,.08);color:var(--yellow)}
.stats-shell{padding:17px}
.stats-local-note{margin:-17px -17px 17px;border:0;border-bottom:1px solid var(--line-soft);background:rgba(100,226,229,.035)}
.stats-local-note p{margin:0}
.stats-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:15px}
.stats-summary-card{display:grid;min-width:0;gap:3px;padding:15px;border:1px solid var(--line-soft);border-radius:14px;background:linear-gradient(130deg,rgba(102,169,255,.06),transparent 70%),var(--panel-2)}
.stats-summary-card>span{color:var(--dim);font-size:10px;font-weight:800;letter-spacing:.04em}
.stats-summary-card>strong{overflow:hidden;color:var(--blue);font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums;text-overflow:ellipsis}
.stats-summary-wins>strong{color:var(--green)}.stats-summary-winRate>strong{color:var(--cyan)}.stats-summary-bestTime>strong{color:var(--yellow)}
.stats-summary-card>small{color:var(--muted);font-size:9px;line-height:1.4}
.stats-table-card,.stats-history-card{min-width:0;padding:17px;border:1px solid var(--line-soft);border-radius:15px;background:var(--panel)}
.stats-card-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}
.stats-card-heading .eyebrow-small,.stats-history-card .eyebrow-small{margin:0 0 3px;color:var(--cyan)}
.stats-card-heading .button{flex:none;min-height:36px;padding:8px 11px;font-size:10px}
.stats-table-scroll{width:100%;max-width:100%;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.stats-table{width:100%;border-collapse:collapse;font-size:12px}
.stats-table th,.stats-table td{padding:11px 9px;border-top:1px solid var(--line-soft);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stats-table thead th{border-top:0;color:var(--dim);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.stats-table th:first-child,.stats-table td:first-child{text-align:left}
.stats-table tbody th{color:var(--text);font-weight:800}
.stats-table tbody td{color:var(--muted)}
.stats-table tbody td[data-stat$="-best"]{color:var(--yellow);font-weight:800}
.stats-empty{margin:14px 0 0;padding:11px 12px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:11px;line-height:1.55}
.stats-history-card{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr);align-items:start;gap:15px;margin-top:14px}
.stats-history-card>div>p:last-child{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
.stats-history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:0;list-style:none}
.stats-history-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 9px;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2);font-size:10px}
.stats-history-list time{font-weight:750}.stats-history-list li>span:nth-child(2){color:var(--dim);font-size:9px}.stats-history-mark{color:var(--green);font-weight:900}
.stats-history-empty{grid-column:2;margin:0;padding:11px;border:1px dashed var(--line);border-radius:9px;color:var(--dim);font-size:10px;line-height:1.5}
.stats-history-empty[hidden]{display:none}
@media(max-width:900px){.practice-workspace{grid-template-columns:minmax(190px,.68fr) minmax(0,1.32fr);padding:14px;gap:12px}.practice-lesson-panel{padding:16px}.practice-next-links{grid-template-columns:1fr}.stats-history-card{grid-template-columns:1fr}.stats-history-empty{grid-column:1}}
@media(max-width:680px){.learning-hero{padding-bottom:19px}.practice-shell,.stats-shell{border-radius:17px}.practice-overview{align-items:flex-start;gap:11px;padding:15px}.practice-overview-icon{width:36px;height:36px;border-radius:11px;font-size:17px}.practice-overview-copy h2{font-size:17px}.practice-overview-copy>p:last-child{font-size:11px}.practice-progress{min-width:60px}.practice-progress strong{font-size:16px}.practice-progress span{font-size:8px;text-align:right}.practice-workspace{grid-template-columns:1fr;padding:10px;gap:10px}.practice-lesson-nav{padding:10px}.practice-lesson-nav>.eyebrow-small{margin-bottom:7px}.practice-lesson-nav #practiceLessonList{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 5px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.practice-lesson-link{flex:0 0 min(72vw,235px);padding:8px}.practice-lesson-link-copy strong{font-size:11px}.practice-lesson-panel{padding:14px 12px}.practice-lesson-heading h2{font-size:19px}.practice-lesson-heading p:last-child{font-size:12px}.practice-lesson-status{font-size:8px;padding:4px 6px}.practice-board-wrap{min-height:110px;margin:14px 0 11px;padding:12px}.practice-board{grid-template-columns:repeat(var(--practice-cols,3),clamp(40px,11vw,48px));grid-auto-rows:clamp(40px,11vw,48px);gap:3px}.practice-cell{font-size:18px;border-radius:5px}.practice-cell.practice-flag{font-size:19px}.practice-actions{justify-content:stretch;gap:6px}.practice-actions .button{flex:1;min-width:calc(50% - 6px);min-height:38px;padding:8px 9px;font-size:10px}.practice-actions .button:first-child{margin-right:0}.practice-actions .button[hidden]{display:none}.practice-feedback{font-size:11px}.practice-explanation{padding:11px}.practice-explanation p:last-child{font-size:11px}.practice-local-note{padding:11px 13px;font-size:10px}.practice-next-links{gap:8px}.practice-next-link{padding:12px}.stats-shell{padding:11px}.stats-local-note{margin:-11px -11px 11px;padding:11px 12px}.stats-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}.stats-summary-card{padding:11px;border-radius:11px}.stats-summary-card>strong{font-size:21px}.stats-table-card,.stats-history-card{padding:12px;border-radius:12px}.stats-card-heading{align-items:flex-start}.stats-card-heading h2,.stats-history-card h2{font-size:17px}.stats-card-heading .button{min-height:33px;padding:7px 8px;font-size:9px}.stats-table-scroll{overflow:visible}.stats-table,.stats-table tbody{display:block;width:100%}.stats-table thead{display:none}.stats-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;padding:7px 0;border-top:1px solid var(--line-soft)}.stats-table tr:first-child{border-top:0}.stats-table th,.stats-table td{display:flex;justify-content:space-between;gap:8px;padding:6px 2px;border:0;text-align:right;font-size:10px;white-space:normal}.stats-table tbody th{grid-column:1/-1;padding-bottom:8px;font-size:12px}.stats-table tbody td::before{content:attr(data-label);color:var(--dim);font-size:8px;letter-spacing:.03em;text-align:left}.stats-history-card{gap:11px}.stats-history-list{grid-template-columns:1fr}.stats-history-empty{grid-column:1}}
@media(prefers-reduced-motion:reduce){.practice-lesson-link,.practice-cell.practice-covered,.practice-next-link{transition:none}.practice-next-link:hover,.practice-cell.practice-covered:hover:not(:disabled){transform:none}}


/* Practice lesson accents keep the classic board legible while giving each topic its own cue. */
.practice-lesson-panel[data-palette="basics"],.practice-lesson-link[data-palette="basics"]{--lesson-accent:#62d9c0;--lesson-accent-rgb:98,217,192}
.practice-lesson-panel[data-palette="comparison"],.practice-lesson-link[data-palette="comparison"]{--lesson-accent:#f0b85b;--lesson-accent-rgb:240,184,91}
.practice-lesson-panel[data-palette="patterns"],.practice-lesson-link[data-palette="patterns"]{--lesson-accent:#b9a0ff;--lesson-accent-rgb:185,160,255}
.practice-lesson-panel[data-palette="advanced"],.practice-lesson-link[data-palette="advanced"]{--lesson-accent:#ff8f9e;--lesson-accent-rgb:255,143,158}
.practice-lesson-panel[data-palette="endgame"],.practice-lesson-link[data-palette="endgame"]{--lesson-accent:#8bd99b;--lesson-accent-rgb:139,217,155}
.practice-lesson-panel[data-palette="risk"],.practice-lesson-link[data-palette="risk"]{--lesson-accent:#ff9b71;--lesson-accent-rgb:255,155,113}
.practice-lesson-panel[data-palette]{border-color:color-mix(in srgb,var(--lesson-accent) 25%,var(--line-soft));background:linear-gradient(145deg,rgba(var(--lesson-accent-rgb),.045),transparent 44%),var(--panel)}
.practice-lesson-heading .eyebrow-small{color:var(--lesson-accent,var(--blue))!important}
.practice-lesson-link.is-active{border-color:rgba(var(--lesson-accent-rgb,102,169,255),.38);background:linear-gradient(100deg,rgba(var(--lesson-accent-rgb,102,169,255),.16),rgba(var(--lesson-accent-rgb,102,169,255),.055));}
.practice-lesson-number{border-color:color-mix(in srgb,var(--lesson-accent,var(--blue)) 24%,var(--line-soft));background:color-mix(in srgb,var(--lesson-accent,var(--blue)) 10%,var(--panel-2));color:var(--lesson-accent,var(--blue))}
.practice-board-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(ellipse at 50% 0,rgba(var(--lesson-accent-rgb,102,169,255),.12),transparent 70%),rgba(4,10,18,.28)}
.theme-light .practice-board-wrap{background:radial-gradient(ellipse at 50% 0,rgba(var(--lesson-accent-rgb,56,137,245),.11),transparent 70%),#edf3fa}
.practice-board-note{margin:0;padding:6px 10px;border:1px solid rgba(var(--lesson-accent-rgb,102,169,255),.28);border-radius:999px;background:rgba(var(--lesson-accent-rgb,102,169,255),.1);color:var(--lesson-accent,var(--blue));font-size:11px;font-weight:850;line-height:1.25;text-align:center;font-variant-numeric:tabular-nums}
.practice-board-note[hidden]{display:none}
.practice-cell.practice-void{visibility:hidden;border-color:transparent;background:transparent;box-shadow:none;pointer-events:none}
.practice-shell{border-color:color-mix(in srgb,#e6b45e 18%,var(--line-soft));background:radial-gradient(ellipse at 0 0,rgba(102,169,255,.075),transparent 38%),radial-gradient(ellipse at 100% 16%,rgba(185,160,255,.055),transparent 34%),radial-gradient(ellipse at 28% 100%,rgba(98,217,192,.045),transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,#192b45),var(--panel))}
@media(max-width:680px){.practice-board-wrap{gap:8px}.practice-board-note{font-size:10px;padding:5px 9px}}

/* Practice and personal stats follow the shared blue-and-slate interface. */
.practice-shell,.stats-shell{border-color:var(--line-soft);background:linear-gradient(145deg,rgba(117,177,255,.035),transparent 52%),var(--panel);box-shadow:var(--shadow)}
.practice-overview-icon,.practice-next-icon,.practice-next-icon-mint,.practice-next-icon-amber{border-color:rgba(117,177,255,.2);background:rgba(117,177,255,.08);color:var(--blue)}
.practice-overview-copy .eyebrow-small,.practice-progress strong,.practice-next-link>b,.stats-card-heading .eyebrow-small,.stats-history-card .eyebrow-small{color:var(--blue)}
.practice-lesson-nav,.practice-lesson-panel,.practice-board-wrap,.stats-table-card,.stats-history-card{border-color:var(--line-soft);background:var(--panel-2)}
.practice-lesson-link[data-palette],.practice-lesson-panel[data-palette]{--lesson-accent:var(--blue);--lesson-accent-rgb:117,177,255}
.practice-lesson-link.is-active{border-color:rgba(117,177,255,.28);background:rgba(117,177,255,.09)}
.practice-lesson-panel[data-palette]{border-color:rgba(117,177,255,.2);background:linear-gradient(145deg,rgba(117,177,255,.04),transparent 48%),var(--panel)}
.practice-lesson-number{border-color:rgba(117,177,255,.2);background:rgba(117,177,255,.08);color:var(--blue)}
.practice-cell.practice-covered.is-selected{border-color:var(--cyan);background:linear-gradient(145deg,#258576,#176b61);box-shadow:0 0 0 2px rgba(99,212,198,.12),0 0 12px rgba(99,212,198,.12)}
.practice-hint{border-color:rgba(239,195,109,.18);background:rgba(239,195,109,.055)}
.practice-explanation{border-color:rgba(99,212,198,.18);border-left-color:var(--cyan);background:linear-gradient(110deg,rgba(99,212,198,.045),transparent 75%),var(--panel-2)}
.practice-explanation .eyebrow-small,.stats-summary-wins>strong,.stats-summary-winRate>strong{color:var(--cyan)}
.practice-board-wrap{background:rgba(4,10,18,.18)}
.theme-light .practice-board-wrap{background:#f3f7fb}
.stats-summary-card{background:linear-gradient(145deg,rgba(117,177,255,.045),transparent 62%),var(--panel-2)}
.stats-summary-card>strong,.stats-summary-bestTime>strong{color:var(--blue)}
.practice-next-link:hover{border-color:rgba(117,177,255,.32)}