html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]){
 --ink:#eee8d7;--muted:#bac7b8;--sand:#ddbd83;--deep:#101b17;
 --lesson-paper:#101b17;--lesson-line:#35483b;--lesson-accent:#ddbd83;
 color-scheme:dark;background:var(--lesson-paper);color:var(--ink);
}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) :is(body,#app,.room,.surface){background:var(--lesson-paper);color:var(--ink)}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) .room::before{display:none}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first]{background:var(--lesson-paper);border-color:var(--lesson-line);color:var(--ink)}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],.outline){color:var(--ink)}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) dialog{background:#12241b;color:var(--ink);border-color:#52614d;box-shadow:0 20px 70px #00000066}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) dialog::backdrop{background:#020a07b3}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) dialog :is(p,li,h2,h3,label,summary){color:var(--ink)}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) dialog :is(small,.muted){color:var(--muted)}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) dialog a{color:var(--sand)}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first]{border-color:var(--lesson-line)}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) dialog :is(select,input:not([type=checkbox])){background:var(--lesson-paper);color:var(--ink);border-color:#52614d}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) :is(h1,h2,h3){font-family:var(--display-font,Georgia,serif);font-weight:400;letter-spacing:-.025em}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) :where(button:not(.tile)){border-color:var(--lesson-line);background:transparent;color:var(--ink);box-shadow:none;border-radius:12px;transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease;transform:none}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) button.primary{background:var(--lesson-accent);color:#17231a;border-color:var(--lesson-accent);box-shadow:0 4px 12px #00000024}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) button.quiet{background:transparent;border-color:transparent}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) button:focus-visible{outline:3px solid var(--sand);outline-offset:3px}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) ::selection{background:#ddbd83;color:#132219}
html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) :is(.app-learning,.app-lesson){padding:12px clamp(16px,3vw,44px) 14px;gap:14px;max-width:1400px}
html[data-screen=tutorial] .phase-observe .teaching-table:not(.has-table-demo){justify-content:flex-start;align-content:start;padding-top:24px}
@media(hover:hover){
 html[data-screen=learn] :is(.tutorial-row,.chapter-piece):hover{background:#1b3023}
 html:is([data-screen=learn],[data-screen=tutorial],[data-screen=first],[data-screen=scoring]) button.primary:hover{background:#ddc494}
}
@media(max-width:650px){
 html:is([data-screen=learn],[data-screen=tutorial]) :is(.app-learning,.app-lesson){padding:8px 16px 12px;gap:12px}
}
@media(orientation:landscape) and (max-height:650px){
 html:is([data-screen=learn],[data-screen=tutorial]) :is(.app-learning,.app-lesson){padding:4px 24px 8px;gap:6px}
 html[data-screen=tutorial] .phase-observe .teaching-table:not(.has-table-demo){grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;gap:18px 24px;padding-top:16px}
}
html[data-screen=tutorial] :is(.family-examples,.honour-examples){gap:24px 32px}
html[data-screen=tutorial] :is(.family-examples,.honour-examples) .teaching-set>div{gap:7px}
@media(orientation:landscape) and (max-height:650px){
 html[data-screen=tutorial] :is(.family-examples,.honour-examples){gap:12px 24px}
}