@font-face{font-family:'Noto Sans';src:url('assets/fonts/NotoSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('assets/fonts/NotoSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--space-6)}body{margin:0;background:var(--color-bg);color:var(--color-text);font:var(--weight-regular) var(--font-body)/var(--line-body) var(--font-family)}
button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:var(--color-primary)}h1,h2,h3,p{margin:0}h1{font-size:var(--font-heading)}h2{font-size:var(--font-title)}h3{font-size:var(--font-subtitle)}h1,h2,h3{line-height:var(--line-heading)}p+p{margin-top:var(--space-3)}
:focus-visible,.focus-demo{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.muted{color:var(--color-muted)}.small{font-size:var(--font-small)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}.grid>*{min-width:0}.card{padding:var(--space-5);background:var(--color-surface);border:var(--border-width) solid var(--color-line);border-radius:var(--radius-control)}.divider{border:0;border-top:var(--border-width) solid var(--color-line);margin:var(--space-6) 0}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--control-adult);padding:var(--space-2) var(--space-4);border:var(--border-selected) solid transparent;border-radius:var(--radius-control);font-size:var(--font-body);font-weight:var(--weight-bold);line-height:var(--line-heading);background:var(--color-primary);color:var(--color-on-primary);text-decoration:none;transition:background var(--motion-fast),border-color var(--motion-fast)}
.btn:hover,.btn.is-hover{background:var(--color-primary-hover)}.btn:active,.btn.is-pressed{background:var(--color-primary-pressed)}.btn.secondary{background:var(--color-course-math);color:var(--color-text)}.btn.secondary:hover{border-color:var(--color-primary)}.btn.tertiary{background:transparent;color:var(--color-primary);border-color:var(--color-control-border)}.btn.tertiary:hover{background:var(--color-bg)}.btn.danger{background:var(--color-danger-bg);color:var(--color-danger);border-color:var(--color-danger)}.btn.danger:hover{background:var(--color-danger);color:var(--color-on-primary)}.btn:disabled,.btn:disabled:hover{background:var(--color-disabled-bg);color:var(--color-disabled-text);border-color:transparent}.btn[aria-busy=true]{background:var(--color-primary);color:var(--color-on-primary);cursor:progress}.btn.student{min-height:var(--control-student);font-size:var(--font-student)}.btn.icon-only{min-width:var(--control-adult);padding:var(--space-2)}.icon{width:var(--icon-default);height:var(--icon-default);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.spinner{width:var(--icon-small);height:var(--icon-small);border:var(--border-selected) solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.field{display:flex;flex-direction:column;gap:var(--space-2)}.field label{font-weight:var(--weight-bold);font-size:var(--font-small)}input,select,textarea{min-height:var(--control-adult);padding:var(--space-3);border:var(--border-width) solid var(--color-control-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);width:100%}input:disabled{background:var(--color-disabled-bg)}input[aria-invalid=true]{border:var(--border-selected) solid var(--color-danger)}.error-text{color:var(--color-danger);font-size:var(--font-small)}.check{min-height:var(--control-adult);display:flex;gap:var(--space-3);align-items:center;cursor:pointer}.check input{width:var(--icon-default);height:var(--icon-default);min-height:0;margin:0;accent-color:var(--color-primary)}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--font-small);font-weight:var(--weight-bold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-small);background:var(--color-info-bg);color:var(--color-info)}.badge.success{background:var(--color-success-bg);color:var(--color-success)}.badge.soon{background:var(--color-warning-bg);color:var(--color-warning)}.notice{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-control);background:var(--color-info-bg);color:var(--color-info);border-left:var(--border-selected) solid currentColor}.notice.success{background:var(--color-success-bg);color:var(--color-success)}.notice.error{background:var(--color-danger-bg);color:var(--color-danger)}.notice.warning{background:var(--color-warning-bg);color:var(--color-warning)}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);border:0;padding:0;margin:0}.answers legend{margin-bottom:var(--space-4);font-size:var(--font-student);font-weight:var(--weight-bold)}.answer{position:relative;display:flex;align-items:center;justify-content:center;min-height:var(--control-answer);border:var(--border-selected) solid var(--color-control-border);border-radius:var(--radius-control);cursor:pointer;font-size:var(--font-title);gap:var(--space-2);background:var(--color-surface)}.answer input{position:absolute;width:var(--icon-small);height:var(--icon-small);min-height:0;left:var(--space-3);opacity:0}.answer:has(input:checked){border-color:var(--color-primary);background:var(--color-course-math)}.answer:has(input:checked)::after{content:'✓';font-size:var(--font-body);color:var(--color-primary)}.answer:has(input:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.answer:has(input:disabled){cursor:default}
progress{width:100%;height:var(--space-2);border:0;border-radius:var(--radius-control);overflow:hidden;appearance:none}progress::-webkit-progress-bar{background:var(--color-line)}progress::-webkit-progress-value{background:var(--color-primary)}progress::-moz-progress-bar{background:var(--color-primary)}.progress-label{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--font-small)}
.course{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-5);border:var(--border-width) solid var(--color-line);border-radius:var(--radius-control);background:var(--color-course-math)}.course h3{font-size:var(--font-student)}.course.coming{background:var(--color-surface)}.course-symbol{font-size:var(--font-title);font-weight:var(--weight-bold);color:var(--color-primary)}.course .btn{align-self:center}.mascot{object-fit:contain;max-width:100%;height:auto}.lesson-demo{max-width:var(--layout-reading);font-size:var(--font-student)}.lesson-lead{display:grid;grid-template-columns:1fr 140px;align-items:center;gap:var(--space-4);padding:var(--space-6);background:var(--color-course-math);border-radius:var(--radius-control)}.lesson-lead img{width:140px}.equation{font-size:var(--font-display);font-weight:var(--weight-bold);line-height:var(--line-heading)}.feedback-slot{min-height:var(--control-answer)}.skeleton{background:var(--color-line);height:var(--space-4);border-radius:var(--radius-small)}.empty{padding:var(--space-6);border:var(--border-width) dashed var(--color-control-border);border-radius:var(--radius-control)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Long translations and technical identifiers must wrap, never force page width. */
body{overflow-wrap:anywhere}.btn{max-width:100%;min-width:0}.btn.icon-only{min-width:var(--control-adult)}.row>*{min-width:0}.badge{max-width:100%}

/* Learning objects: same generated assets in every example. */
.learning-object{width:var(--object-default);height:var(--object-default);object-fit:contain;flex-shrink:0}.learning-object.small{width:var(--object-small);height:var(--object-small)}.learning-object.large{width:var(--object-large);height:var(--object-large)}.object-group{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.object-group+.object-group{margin-top:var(--space-4)}

/* LanguageSwitcher: app chrome, not lesson-author BDUI. Flag colors belong to assets. */
.language-switcher{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
.language-flag{display:inline-flex;align-items:center;justify-content:center;width:var(--control-adult);height:var(--control-adult);padding:var(--space-1);border:var(--border-selected) solid transparent;border-radius:50%;background:transparent;cursor:pointer;flex-shrink:0}
.language-flag img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 var(--border-width) var(--color-line)}
.language-flag:hover{background:var(--color-success-bg)}
.language-flag[aria-pressed=true]{border-color:var(--color-primary);background:var(--color-surface)}
.language-flag:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}
.language-flag:disabled{cursor:default;opacity:.5}
.student-view .language-flag{width:var(--control-student);height:var(--control-student)}