@charset "UTF-8";
:root {
    --ucmas-navy:#30338f;
    --ucmas-red:#f21823;
    --primary-blue:#176bff;
    --background:#f5f9ff;
    --surface:#fff;
    --yellow:#ffc83d;
    --green:#1cc878;
    --coral:#ff6678;
    --purple:#9658f5;
    --text-primary:#17224a;
    --text-secondary:#68758f;
    --border:#e5eaf2;
    --radius-card:20px;
    --shadow:0 8px 28px rgba(47,72,120,.045);
    font-family:"Avenir Next","Segoe UI",Arial,sans-serif;
    color:var(--text-primary);
    font-synthesis:none;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
    font-size:15px;
    line-height:1.5;
}
button,input {
    font:inherit;
}
button,a,input {
    -webkit-tap-highlight-color:transparent;
}
button,a {
    touch-action:manipulation;
}
button {
    cursor:pointer;
}
a {
    color:inherit;
    text-decoration:none;
}
img {
    max-width:100%;
    object-fit:contain;
}
h1,h2,h3,p {
    margin:0;
}
h1,h2,h3 {
    letter-spacing:-.035em;
    line-height:1.2;
}
h1 {
    font-size:clamp(27px,2.5vw,38px);
    font-weight:700;
}
h2 {
    font-size:22px;
    font-weight:700;
}
button:focus-visible,a:focus-visible,input:focus-visible {
    outline:3px solid #0b64da;
    outline-offset:4px;
}
button:disabled {
    opacity:.4;
    cursor:not-allowed;
}
button:disabled:hover {
    transform:none;
}
[hidden] {
    display:none!important;
}
.icon {
    width:21px;
    height:21px;
    flex-shrink:0;
    vertical-align:middle;
    stroke-width:1.8;
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid transparent;
    border-radius:11px;
    padding:13px 20px;
    min-height:46px;
    font-weight:650;
    font-size:14px;
    line-height:1.3;
    text-align:center;
    transition:background .15s,box-shadow .15s,transform .15s;
    white-space:nowrap;
}
.button:hover {
    transform:translateY(-1px);
    box-shadow:0 5px 12px #24314d12;
}
.button .icon {
    width:18px;
    height:18px;
}
.button-primary {
    background:var(--primary-blue);
    color:#fff;
    box-shadow:0 4px 10px #176bff1a;
}
.button-primary:hover {
    background:#0d5ce8;
}
.button-secondary {
    background:#fff;
    color:#23345c;
    border-color:#dfe7f1;
}
.button-secondary:hover {
    background:#edf5ff;
}
.button-warm {
    background:linear-gradient(180deg,#ffbb26,#ff951c);
    color:#432507;
}
.button-warm:hover {
    background:#ffa21e;
}
.button-green {
    background:linear-gradient(180deg,#18bd82,#079b6f);
    color:#fff;
}
.button-green:hover {
    background:#079b6f;
}
.button-small {
    font-size:12px;
    padding:9px 13px;
    min-height:38px;
}
.icon-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:8px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--text-secondary);
}
.icon-button:hover {
    background:#eef5ff;
    color:var(--primary-blue);
}
.eyebrow {
    display:block;
    color:#7181a1;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.6px;
    line-height:1.5;
}
.heading-dot {
    color:var(--primary-blue);
}
.tone-blue {
    background:#e7f1ff;
    color:#1774fc;
}
.tone-yellow {
    background:#fff2cf;
    color:#b06b00;
}
.tone-green {
    background:#def9ec;
    color:#098257;
}
.tone-pink {
    background:#ffe7f1;
    color:#d93989;
}
.tone-purple {
    background:#f0e8ff;
    color:#8a50d3;
}
.alert {
    display:flex;
    align-items:flex-start;
    gap:10px;
    border:1px solid;
    border-radius:12px;
    padding:13px 15px;
    font-size:13px;
    line-height:1.5;
    margin:20px 0;
}
.alert-error {
    background:#fff4f3;
    border-color:#ffd2cd;
    color:#a52c31;
}
.skip-link {
    position:fixed;
    top:-70px;
    left:15px;
    z-index:100;
    background:white;
    padding:12px;
    border-radius:8px;
}
.skip-link:focus {
    top:12px;
}
/* Login — the supplied brand assets retain their original proportions. */
.simple-body {
    background:#f5f9ff;
}
.login-page {
    position:relative;
    min-height:100svh;
    display:grid;
    grid-template-columns:1.12fr 1fr;
    align-items:center;
    gap:70px;
    max-width:1440px;
    padding:65px 85px 70px;
    margin:0 auto;
    isolation:isolate;
}
.simple-body:has(.login-page) {
    background:radial-gradient(circle at 98% 5%,#d6eaff 0,transparent 32%),radial-gradient(circle at 1% 55%,#fff0c4 0,transparent 28%),radial-gradient(circle at 92% 100%,#f4dfff 0,transparent 22%),#f8fbff;
}
.login-story {
    padding-top:6px;
    min-width:0;
}
.story-logo {
    width:190px;
    display:block;
    margin-bottom:48px;
}
.login-story>.eyebrow {
    color:#7786a5;
    margin-bottom:16px;
    font-size:10px;
}
.login-story h1 {
    font-size:clamp(36px,3.6vw,52px);
    color:#0f154b;
    line-height:1.15;
    letter-spacing:-2px;
}
.story-intro {
    font-size:21px;
    line-height:1.5;
    color:#737f9c;
    margin-top:18px;
}
.benefit-strip {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    background:#fff;
    border:1px solid #edf1f8;
    border-radius:17px;
    padding:25px 22px;
    box-shadow:var(--shadow);
}
.benefit {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 17px;
    border-right:1px solid #edf1f7;
    font-size:12px;
    font-weight:600;
    line-height:1.45;
}
.benefit:last-child {
    border-right:0;
}
.benefit-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:12px;
    flex-shrink:0;
}
.benefit-icon .icon {
    width:27px;
    height:27px;
    stroke-width:1.8;
}
.login-benefits {
    background:none;
    border:0;
    box-shadow:none;
    margin-top:30px;
    padding:0;
    gap:14px;
}
.login-benefits .benefit {
    flex-direction:column;
    text-align:center;
    padding:0;
    border:0;
    gap:10px;
    font-size:12px;
    color:#526184;
}
.login-benefits .benefit-icon {
    width:61px;
    height:61px;
    border-radius:17px;
}
.login-benefits .benefit-icon .icon {
    width:32px;
    height:32px;
}
.login-benefits .benefit>span:last-child {
    max-width:100px;
}
.abacus-scene {
    position:relative;
    margin-top:30px;
    padding:8px 0 18px;
}
.abacus-image {
    display:block;
    width:100%;
    height:auto;
    mix-blend-mode:multiply;
}
.abacus-caption {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    font-size:11px;
    letter-spacing:.2px;
    color:#7e89a1;
    margin:0 0 12px;
}
.abacus-caption .icon {
    width:15px;
    height:15px;
    color:#e7ac23;
}
.login-panel {
    padding:42px 42px 32px;
    background:#ffffffeb;
    border:1px solid #fff;
    border-radius:28px;
    box-shadow:0 18px 60px #435c9810;
    text-align:center;
}
.panel-logo {
    display:block;
    width:152px;
    margin:0 auto 28px;
}
.login-panel h2 {
    font-size:30px;
    color:#10174c;
}
.login-subtitle {
    color:#78839c;
    font-size:14px;
    margin-top:10px;
}
.login-form {
    margin-top:30px;
    text-align:left;
}
.login-form>label:not(.checkbox-label) {
    display:block;
    font-size:12px;
    font-weight:650;
    color:#52617e;
    margin:18px 0 8px;
}
.input-wrap {
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    border:1.5px solid #dfe5f0;
    border-radius:12px;
    min-height:54px;
    padding:0 15px;
    background:white;
}
.input-wrap:focus-within {
    border-color:#4b8eff;
    box-shadow:0 0 0 3px #176bff0a;
}
.input-wrap>.icon {
    color:#7c88a3;
    width:20px;
    height:20px;
}
.input-wrap input {
    min-width:0;
    width:100%;
    border:0;
    outline:none;
    background:none;
    padding:15px 0;
    font-size:14px;
    color:#24314d;
}
.input-wrap input:focus-visible {
    outline:none;
}
.input-wrap input::placeholder {
    color:#939cb2;
}
.input-wrap .icon-button {
    margin-right:-8px;
}
.checkbox-label {
    display:flex;
    align-items:center;
    gap:9px;
    margin:19px 0 25px;
    font-size:12px;
    color:#66738f;
    cursor:pointer;
}
.checkbox-label input {
    accent-color:var(--primary-blue);
    width:17px;
    height:17px;
    margin:0;
}
.login-submit {
    width:100%;
    justify-content:center;
    height:53px;
    font-size:17px;
    background:linear-gradient(110deg,#1598ff,#1555fa);
    border-radius:11px;
}
.login-submit .icon {
    margin-left:12px;
}
.instructor-notice {
    display:flex;
    align-items:center;
    gap:14px;
    text-align:left;
    margin-top:28px;
    padding:19px 18px;
    border-radius:14px;
    background:#f0f6ff;
}
.notice-icon {
    display:flex;
    color:#176bff;
}
.notice-icon .icon {
    width:32px;
    height:32px;
}
.instructor-notice strong {
    font-size:13px;
    color:#202856;
}
.instructor-notice p {
    color:#7987a4;
    font-size:11px;
    margin-top:4px;
}
.login-help {
    font-size:10px;
    color:#929bb0;
    margin-top:23px;
}
.login-footer {
    position:absolute;
    bottom:23px;
    left:0;
    right:0;
    text-align:center;
    font-size:10px;
    letter-spacing:.3px;
    color:#8c96ac;
}
/* Instructor workspace */
.app-body {
    background:var(--background);
}
.sidebar {
    width:240px;
    background:linear-gradient(170deg,#fff,#f8fcff);
    border-right:1px solid #e8eef7;
    position:fixed;
    inset:0 auto 0 0;
    z-index:30;
    display:flex;
    flex-direction:column;
    padding:30px 18px 18px;
}
.sidebar-brand {
    display:block;
    padding:2px 15px 29px;
}
.sidebar-brand img {
    width:152px;
    display:block;
}
.sidebar-label {
    font-size:9px;
    letter-spacing:1.5px;
    color:#9ba6bb;
    font-weight:700;
    padding:20px 13px 12px;
}
.sidebar-nav {
    display:flex;
    flex-direction:column;
    gap:7px;
}
.nav-link {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    font-weight:600;
    padding:14px 14px;
    border:0;
    background:none;
    color:#4b5b7e;
    border-radius:11px;
    text-align:left;
    width:100%;
    min-height:48px;
}
.nav-link .icon {
    width:19px;
    height:19px;
    color:#5263a2;
}
.nav-link:hover {
    background:#edf5ff;
    color:#176bff;
}
.nav-link.is-active {
    background:linear-gradient(105deg,#1771ff,#49a2ff);
    color:white;
    box-shadow:0 4px 10px #176bff15;
}
.nav-link.is-active .icon {
    color:white;
}
.sidebar-note {
    margin:48px 10px 20px;
    padding:22px 16px 18px;
    border:1px solid #e7effb;
    border-radius:17px;
    background:linear-gradient(135deg,#edf6ff,#f7f5ff);
}
.sidebar-note-icon {
    color:#7099e1;
    margin-bottom:10px;
}
.sidebar-note strong {
    font-size:17px;
    line-height:1.4;
    color:#354576;
}
.sidebar-note p {
    font-size:10px;
    line-height:1.7;
    color:#8492ac;
    margin-top:10px;
}
.sidebar-bottom {
    margin-top:auto;
    padding:12px 8px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#929db2;
    font-size:9px;
}
.sidebar-bottom .icon {
    width:15px;
    height:15px;
}
.app-shell {
    margin-left:240px;
    min-height:100svh;
    display:flex;
    flex-direction:column;
}
.app-header {
    min-height:82px;
    padding:15px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:#fff;
    border-bottom:1px solid #eaf0f8;
}
.header-title {
    display:flex;
    align-items:center;
    gap:15px;
    font-size:14px;
    font-weight:650;
}
.menu-toggle {
    display:none;
}
.header-account {
    display:flex;
    align-items:center;
    gap:11px;
}
.header-account strong {
    display:block;
    font-size:12px;
    font-weight:650;
    max-width:240px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.header-account>div>span {
    display:block;
    font-size:10px;
    color:#8b96ad;
    margin-top:2px;
}
.avatar {
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:3px solid #fff;
    outline:1px solid #e2ebf8;
    border-radius:50%;
    background:#e5efff;
    color:#416ec1;
    font-size:12px;
    font-weight:700;
}
.header-account>.icon-button {
    margin-left:12px;
}
.main-content {
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:36px 40px 32px;
    flex:1;
    outline:none;
    min-width:0;
}
.app-footer {
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:10px;
    color:#9aa5ba;
    padding:18px 40px;
    border-top:1px solid #e9eff7;
}
.welcome-section {
    padding:16px 6px 29px;
    position:relative;
}
.welcome-section h1 {
    font-size:clamp(32px,3.3vw,46px);
    margin-top:12px;
    color:#10174c;
}
.welcome-section p {
    font-size:15px;
    color:#6c7b9b;
    margin-top:11px;
}
.classroom-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.classroom-card {
    padding:27px 34px 30px;
    border:5px solid #fff;
    border-radius:25px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    overflow:hidden;
    min-height:300px;
}
.coaching-card {
    background:radial-gradient(circle at 95% 0%,#ffdf8b55,transparent 55%),#fff3dd;
}
.practice-card {
    background:radial-gradient(circle at 95% 0%,#89e6c755,transparent 55%),#e2f9f0;
}
.card-kicker {
    font-size:9px;
    letter-spacing:1.5px;
    font-weight:700;
    color:#a58242;
}
.practice-card .card-kicker {
    color:#55967f;
}
.feature-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:76px;
    height:76px;
    border-radius:20px;
    margin:19px 0 17px;
    color:#f88520;
    background:linear-gradient(150deg,#ffe7b4,#ffd59c);
    box-shadow:inset 0 1px 0 #fff;
}
.feature-icon .icon {
    width:43px;
    height:43px;
    stroke-width:1.8;
}
.practice-card .feature-icon {
    background:linear-gradient(150deg,#9deac4,#66d1a7);
    color:#068b68;
}
.classroom-card h2 {
    font-size:25px;
    color:#141c51;
}
.classroom-card p {
    font-size:13px;
    color:#6b728c;
    margin-top:9px;
}
.classroom-card .button {
    width:100%;
    max-width:340px;
    margin-top:26px;
    min-height:49px;
    justify-content:space-between;
    padding:14px 23px;
}
.practice-categories {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.practice-categories .classroom-card .button {
    margin-top:auto;
}
.practice-categories .classroom-card p {
    margin-bottom:26px;
}
.practice-modes {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}
.practice-modes .level-card h2 {
    font-size:20px;
}
.practice-modes .button-card {
    font-size:13px;
    min-height:44px;
}
.competition-settings {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr)) auto;
    gap:22px;
    padding:26px;
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    background:var(--surface);
    box-shadow:var(--shadow);
}
.competition-field {
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
}
.competition-field label,.competition-action-label {
    font-size:13px;
    font-weight:650;
}
.competition-field select {
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-height:50px;
    padding:10px 38px 10px 12px;
    border:1px solid #bbc8dc;
    border-radius:10px;
    background:#fff;
    background-image:url('/assets/icons/chevron-down.svg');
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px;
    color:var(--text-primary);
    font:inherit;
}
.competition-field select:focus-visible {
    outline:3px solid #0b64da;
    outline-offset:3px;
}
.competition-action .button {
    min-height:50px;
}
.competition-note {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-secondary);
    font-size:13px;
    margin-top:22px;
}
.competition-player .flow-canvas {
    min-height:50vh;
}
.flash-card-settings { grid-template-columns:repeat(3,minmax(0,1fr)) auto; }
.flash-card-player .flow-canvas { min-height:50vh; }
.flash-card-image { width:auto; max-width:min(1100px,90vw); max-height:55vh; object-fit:contain; }
@media(max-width:1100px) { .flash-card-settings { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:550px) { .flash-card-settings { grid-template-columns:1fr; } }
.competition-answer>span {
    display:block;
    margin-bottom:8px;
    font-size:clamp(1.25rem,3vw,2rem);
    font-weight:600;
    color:var(--text-secondary);
}
.competition-answer>strong {
    display:block;
    font-size:clamp(4rem,15vw,12rem);
    line-height:1.2;
    color:var(--text-primary);
}
@media(max-width:1100px) {
    .competition-settings { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .competition-action { grid-column:1 / -1; }
    .competition-action-label { display:none; }
}
@media(max-width:550px) {
    .competition-settings { grid-template-columns:1fr; padding:20px; }
    .competition-note { align-items:flex-start; }
}
.learning-section {
    margin-top:33px;
}
.section-caption {
    display:flex;
    align-items:center;
    gap:18px;
    font-size:10px;
    font-weight:600;
    letter-spacing:.3px;
    color:#919db3;
    margin:0 5px 14px;
}
.caption-line {
    height:1px;
    background:#e2eaf5;
    flex:1;
}
.teaching-note {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#8692aa;
    font-size:11px;
    margin-top:28px;
}
.teaching-note>.icon {
    width:16px;
    height:16px;
    color:#9ab2d5;
}
.teaching-note strong {
    color:#677a9b;
    font-weight:600;
    margin-right:6px;
}
.breadcrumbs {
    margin-bottom:24px;
}
.breadcrumbs ol {
    list-style:none;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    padding:0;
    margin:0;
}
.breadcrumbs li {
    display:flex;
    align-items:center;
    gap:6px;
    color:#7d8ba6;
    font-size:10px;
}
.breadcrumbs a {
    color:#5274b3;
}
.breadcrumbs a:hover {
    text-decoration:underline;
}
.breadcrumbs .icon {
    width:12px;
    height:12px;
    color:#9aabc5;
}
.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:30px;
}
.page-heading h1 {
    margin-top:8px;
    font-size:30px;
    color:#171f50;
}
.page-heading p {
    font-size:12px;
    color:#8390a8;
    margin-top:10px;
}
.page-heading>.button {
    font-size:11px;
    min-height:39px;
    padding:10px 14px;
    flex-shrink:0;
}
.light-heading {
    color:#727e9c;
    font-size:.8em;
    font-weight:500;
}
.level-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}
.level-card {
    --accent:#edb739;
    --pastel:#fff0bd;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:18px 16px 17px;
    min-height:235px;
    border-radius:18px;
    border:1px solid #ffffffa6;
    background:linear-gradient(150deg,var(--pastel),color-mix(in srgb,var(--pastel) 50%,#fff));
    box-shadow:var(--shadow);
}
.accent-yellow {
    --accent:#c08a0b;
    --pastel:#ffebad;
}
.accent-coral {
    --accent:#d74661;
    --pastel:#ffdae1;
}
.accent-blue {
    --accent:#2785d9;
    --pastel:#d0edff;
}
.accent-green {
    --accent:#19976f;
    --pastel:#d2f6e6;
}
.accent-purple {
    --accent:#8454c4;
    --pastel:#e7d9ff;
}
.accent-pink {
    --accent:#ce418b;
    --pastel:#ffd9ed;
}
.accent-orange {
    --accent:#c67923;
    --pastel:#ffe4c2;
}
.accent-teal {
    --accent:#14999c;
    --pastel:#cef4f3;
}
.level-top {
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:6px;
    align-items:center;
}
.level-number {
    font-size:8px;
    letter-spacing:1.1px;
    font-weight:700;
    color:color-mix(in srgb,var(--accent) 65%,#17224a);
}
.level-code {
    font-size:8px;
    background:#ffffff80;
    padding:3px 6px;
    border-radius:5px;
    color:var(--accent);
    font-weight:650;
}
.level-icon {
    width:57px;
    height:57px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff6b;
    color:var(--accent);
    margin:19px 0 15px;
    border:1px solid #ffffff70;
}
.level-icon .icon {
    width:31px;
    height:31px;
}
.level-card h2 {
    font-size:16px;
    line-height:1.4;
    margin-bottom:20px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.button-card {
    width:100%;
    background:#fff;
    color:#26345d;
    margin-top:auto;
    font-size:11px;
    min-height:36px;
    padding:9px 10px;
    justify-content:space-between;
    box-shadow:0 3px 6px #26345d04;
}
.button-card:hover {
    background:#ffffffbb;
}
.button-card .icon {
    width:14px;
    height:14px;
}
.list-caption {
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:#8b99af;
    font-size:10px;
    padding:0 3px;
    margin-bottom:17px;
}
.list-caption>span:last-child {
    display:flex;
    align-items:center;
    gap:6px;
}
.list-caption .icon {
    width:13px;
    height:13px;
}
.lesson-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.lesson-card {
    padding:20px;
    background:white;
    border:1px solid #e8eef7;
    border-radius:17px;
    box-shadow:var(--shadow);
    transition:transform .15s,border-color .15s;
}
.lesson-card:hover {
    transform:translateY(-3px);
    border-color:#c3d9fb;
}
.lesson-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:17px;
}
.lesson-icon {
    width:40px;
    height:40px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.lesson-sequence {
    font-size:18px;
    font-weight:600;
    color:#e2e9f5;
}
.lesson-card h2 {
    font-size:18px;
}
.book-label {
    font-size:9px;
    letter-spacing:.6px;
    color:#8b97ad;
    margin-top:9px;
}
.page-pill {
    display:inline-block;
    border-radius:6px;
    background:#f0f5fb;
    color:#7084a4;
    font-size:9px;
    font-weight:600;
    padding:4px 7px;
    margin:11px 0 17px;
}
.lesson-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border-top:1px solid #edf2f8;
    padding-top:13px;
    font-size:11px;
    font-weight:650;
    color:#377fe9;
}
.lesson-link .icon {
    width:15px;
    height:15px;
}
.empty-state {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#fff;
    border:1px solid #e9eff7;
    border-radius:23px;
    box-shadow:var(--shadow);
    padding:60px 30px;
    min-height:380px;
    justify-content:center;
    gap:14px;
}
.empty-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:72px;
    border-radius:20px;
    margin-bottom:5px;
}
.empty-icon .icon {
    width:34px;
    height:34px;
}
.empty-state h2 {
    font-size:26px;
}
.empty-state p {
    font-size:13px;
    color:#8491a8;
    line-height:1.9;
    max-width:600px;
}
.empty-state .button {
    margin-top:10px;
}
.metadata-divider {
    margin:0 9px;
    color:#b6c2d4;
}
.module-launch {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:#eaf3ff;
    border:1px solid #ddeafb;
    border-radius:16px;
    padding:22px 24px;
    margin-bottom:22px;
}
.module-launch>div {
    display:flex;
    align-items:center;
    gap:14px;
}
.launch-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    border-radius:12px;
    flex-shrink:0;
    background:#d6e7ff;
}
.module-launch h2 {
    font-size:17px;
}
.module-launch p {
    font-size:10px;
    color:#7b8eae;
    margin-top:7px;
}
.module-launch p span {
    margin:0 6px;
    color:#a8bad3;
}
.review-note {
    font-size:10px;
    color:#8b99ae;
    display:flex;
    align-items:center;
    gap:7px;
    margin:0 3px 16px;
}
.review-note .icon {
    width:14px;
    height:14px;
}
.exercise-set {
    background:#fff;
    border:1px solid #e5ecf7;
    border-radius:18px;
    overflow:hidden;
    margin-bottom:24px;
    box-shadow:var(--shadow);
}
.set-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:18px 23px;
}
.set-heading>div {
    display:flex;
    align-items:center;
    gap:12px;
}
.set-icon {
    width:33px;
    height:33px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
}
.set-icon .icon {
    width:18px;
    height:18px;
}
.set-heading h2 {
    font-size:16px;
    letter-spacing:.1px;
}
.section-start {
    flex-shrink:0;
}
.section-preview-toggle {
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 23px;
    border-top:1px solid var(--border);
    color:var(--text-secondary);
    font-size:12px;
    cursor:pointer;
    list-style:none;
}
.section-preview-toggle::-webkit-details-marker {
    display:none;
}
.section-preview-toggle:hover {
    background:#f6f9ff;
}
.section-preview-toggle:focus-visible {
    outline:3px solid #0b64da;
    outline-offset:-3px;
}
.section-preview-toggle .icon {
    width:16px;
    height:16px;
}
.section-preview[open] .section-preview-toggle .icon {
    transform:rotate(180deg);
}
.count-badge {
    font-size:9px;
    color:#8c9bb2;
    background:#f4f7fb;
    padding:4px 9px;
    border-radius:7px;
}
.table-scroll {
    overflow-x:auto;
}
.question-table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:12px;
}
.question-table thead {
    background:#f6f9ff;
    border-block:1px solid #e9eff8;
}
.question-table thead th {
    font-size:10px;
    font-weight:650;
    color:#7c8ca8;
    padding:12px 24px;
    white-space:nowrap;
}
.question-table tbody tr:not(:last-child) {
    border-bottom:1px solid #f0f3f9;
}
.question-table td,.question-table tbody th {
    padding:12px 24px;
}
.question-table tbody tr:hover {
    background:#fcfdff;
}
.question-table th:first-child {
    width:13%;
}
.question-table th:nth-child(2) {
    width:39%;
}
.question-table th:nth-child(3) {
    width:18%;
}
.question-number {
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    width:28px;
    height:28px;
    background:#f0f5ff;
    color:#6c87b7;
    font-size:11px;
    font-weight:600;
}
.exercise-preview {
    font-family:"Avenir Next","Segoe UI",sans-serif;
    font-size:17px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    letter-spacing:1px;
    color:#2f4268;
}
.source-answer {
    font-size:15px;
    font-weight:650;
    color:#415779;
}
.validation-status {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:9px;
    font-weight:600;
    white-space:nowrap;
}
.validation-status .icon {
    width:12px;
    height:12px;
}
.verified {
    color:#24a176;
}
.needs-review,.content-issue {
    color:#b45d23;
}
.content-issue {
    font-size:12px;
}
.validation-detail {
    max-width:300px;
    font-size:10px;
    line-height:1.6;
    color:#ab744e;
    margin-top:7px;
}
.module-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:12px 4px;
}
.module-bottom p {
    font-size:11px;
    color:#8f9db0;
    display:flex;
    align-items:center;
    gap:8px;
}
.module-bottom .icon {
    width:16px;
    height:16px;
}
/* Coming soon and controlled errors */
.coming-soon {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:25px 20px 60px;
}
.coming-visual {
    position:relative;
    width:250px;
    height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 18px;
}
.coming-icon {
    width:125px;
    height:125px;
    background:linear-gradient(140deg,#d6f9ea,#a6e8d4);
    border:6px solid white;
    box-shadow:0 12px 40px #2f946912;
    border-radius:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#13946c;
    transform:rotate(-8deg);
}
.coming-icon .icon {
    width:64px;
    height:64px;
    stroke-width:1.5;
}
.coming-orbit {
    position:absolute;
    border:1px dashed #d6e3f0;
    border-radius:50%;
    width:220px;
    height:170px;
    transform:rotate(-25deg);
}
.orbit-two {
    width:190px;
    height:190px;
    transform:rotate(25deg);
}
.coming-spark {
    position:absolute;
    display:flex;
    width:35px;
    height:35px;
    border-radius:11px;
    align-items:center;
    justify-content:center;
}
.spark-one {
    top:19px;
    right:29px;
    background:#fff1c9;
    color:#c49324;
    transform:rotate(12deg);
}
.spark-two {
    bottom:22px;
    left:25px;
    background:#e6edff;
    color:#8d8bdd;
    transform:rotate(-10deg);
}
.soon-badge {
    display:flex;
    align-items:center;
    gap:7px;
    background:#e7f7ee;
    color:#3e9073;
    font-size:9px;
    font-weight:650;
    letter-spacing:1px;
    border-radius:30px;
    padding:8px 13px;
    margin-bottom:22px;
}
.soon-badge .icon {
    width:13px;
    height:13px;
}
.coming-soon h1 {
    font-size:39px;
    line-height:1.3;
    color:#17224a;
}
.coming-soon h1 span {
    color:#1aaa7c;
}
.coming-soon>p {
    color:#8391aa;
    font-size:13px;
    line-height:1.9;
    margin:20px 0 28px;
}
.coming-actions {
    display:flex;
    gap:12px;
    justify-content:center;
}
.error-container {
    max-width:800px;
    padding:50px 25px;
    margin:auto;
}
.error-logo {
    width:140px;
    margin-bottom:10px;
}
.error-code {
    font-size:12px;
    color:#8c9bb4;
    letter-spacing:3px;
}
.confirmation-dialog {
    border:1px solid #e5edf6;
    border-radius:24px;
    box-shadow:0 20px 90px #1d355a30;
    max-width:440px;
    width:calc(100% - 40px);
    padding:32px;
    color:var(--text-primary);
}
.confirmation-dialog::backdrop {
    background:#152c5555;
    backdrop-filter:blur(4px);
}
.confirmation-dialog h2 {
    font-size:24px;
    margin:14px 0;
}
.confirmation-dialog p {
    font-size:13px;
    color:#7d8aa3;
    line-height:1.7;
}
.confirmation-dialog .empty-icon {
    width:56px;
    height:56px;
}
.confirmation-dialog .empty-icon .icon {
    width:27px;
    height:27px;
}
.dialog-actions {
    display:flex;
    gap:12px;
    justify-content:flex-end;
    margin-top:27px;
}
.dialog-actions form {
    margin:0;
}
/* The presentation gives the question the full classroom viewport. */
.presentation-body {
    background:#f7faff;
}
.presentation-shell {
    min-height:100svh;
    display:flex;
    flex-direction:column;
    background:radial-gradient(ellipse at 90% 1%,#eaf4ff 0,transparent 40%),#f8fbff;
}
.presentation-shell:fullscreen {
    height:100%;
    overflow-y:auto;
}
.presentation-header {
    display:flex;
    align-items:center;
    gap:30px;
    padding:23px 36px;
    border-bottom:1px solid #e5edf8;
    background:#ffffffdf;
}
.presentation-header>img {
    width:133px;
    flex-shrink:0;
}
.presentation-identity {
    padding-left:25px;
    border-left:1px solid #e3ebf5;
    flex:1;
    min-width:0;
}
.presentation-identity>span {
    font-size:10px;
    color:#7b8eaa;
}
.presentation-identity h1 {
    font-size:22px;
    margin:2px 0 4px;
}
.presentation-identity p {
    font-size:10px;
    color:#8b9bb1;
}
.presentation-identity p span {
    margin:0 7px;
    color:#b9c6d7;
}
.presentation-header-actions {
    display:flex;
    align-items:center;
    gap:9px;
}
.presentation-header-actions .button {
    font-size:11px;
    padding:10px 13px;
    min-height:40px;
}
.classroom-stage {
    display:flex;
    flex-direction:column;
    padding:24px 38px 12px;
    flex:1;
    min-height:360px;
}
.question-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1450px;
    width:100%;
    margin:0 auto;
    padding:0 7px;
    font-size:12px;
    color:#7d8da7;
}
.set-pill {
    background:#eaf2ff;
    color:#4e76b4;
    padding:7px 14px;
    border:1px solid #dfeafa;
    border-radius:25px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.7px;
}
.question-canvas {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    flex:1;
    min-height:360px;
    position:relative;
    padding:20px 10px 15px;
    text-align:center;
}
.question-eyebrow {
    color:#8b9ab0;
    font-size:11px;
    font-weight:700;
    letter-spacing:2.5px;
    margin-bottom:14px;
}
.question-content {
    font-size:clamp(80px,14vmin,165px);
    font-weight:700;
    line-height:1.05;
    color:#152143;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
}
.question-content.vertical-exercise {
    font-size:clamp(42px,8vmin,96px);
    line-height:1.18;
    text-align:right;
    min-width:170px;
    padding:0 20px;
}
.operand {
    display:block;
}
.exercise-line {
    display:block;
    border-top:4px solid #263652;
    margin-top:10px;
    padding-top:5px;
}
.exercise-question-mark {
    color:#9aa9bd;
}
.answer-area {
    margin-top:15px;
    min-height:59px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.answer-label {
    font-size:9px;
    letter-spacing:2px;
    color:#519b82;
    font-weight:700;
    margin-bottom:3px;
}
.answer-area strong {
    font-size:clamp(30px,5vmin,57px);
    line-height:1.1;
    color:#128463;
    font-variant-numeric:tabular-nums;
}
.answer-area p {
    font-size:13px;
    color:#a76328;
    background:#fff4dd;
    border:1px solid #f5dfa9;
    border-radius:12px;
    padding:10px 22px;
    line-height:1.5;
}
.presentation-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:15px 38px 12px;
    width:100%;
    max-width:1500px;
    margin:0 auto;
}
.toolbar-left {
    display:flex;
    align-items:center;
    gap:12px;
}
.presentation-toolbar .button {
    min-height:50px;
    font-size:13px;
    padding:14px 22px;
}
.reveal-button {
    min-width:185px;
}
.presentation-hints {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    font-size:10px;
    color:#9aa8ba;
    padding:10px 20px 19px;
}
.presentation-hints span {
    display:flex;
    align-items:center;
    gap:5px;
}
.presentation-hints .icon {
    width:15px;
    height:15px;
    margin-right:3px;
}
kbd {
    font-family:inherit;
    font-size:9px;
    padding:2px 5px;
    background:white;
    border:1px solid #dde5ef;
    border-radius:4px;
    color:#8293ad;
}
.presentation-progress {
    height:4px;
    line-height:0;
    background:#eaf0f8;
    overflow:hidden;
}
.presentation-progress progress {
    width:100%;
    height:4px;
    border:none;
    appearance:none;
    display:block;
}
.presentation-progress progress::-webkit-progress-bar {
    background:#eaf0f8;
}
.presentation-progress progress::-webkit-progress-value {
    background:#61a4ff;
    transition:width .15s;
}
.presentation-progress progress::-moz-progress-bar {
    background:#61a4ff;
}
.completion-screen {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:440px;
    text-align:center;
    padding:45px 25px;
    gap:18px;
}
.completion-icon {
    width:95px;
    height:95px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:28px;
    background:#ddf8eb;
    color:#20a67c;
    margin-bottom:10px;
}
.completion-icon .icon {
    width:50px;
    height:50px;
}
.completion-screen h2 {
    font-size:43px;
}
.completion-screen p {
    font-size:14px;
    color:#8090ab;
}
.completion-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:15px;
}
.long-exercise {
    font-size:clamp(25px,5vmin,50px)!important;
}
.drawer-backdrop {
    position:fixed;
    inset:0;
    z-index:25;
    background:#213b614a;
    backdrop-filter:blur(3px);
    border:0;
}
@media(min-width:1700px) {
    .main-content {
        padding-top:48px;
    }
    .classroom-card {
        min-height:365px;
        padding:35px 40px;
    }
    .feature-icon {
        margin:28px 0 25px;
        width:90px;
        height:90px;
    }
    .classroom-card h2 {
        font-size:31px;
    }
    .classroom-card .button {
        margin-top:34px;
    }
    .benefit-strip {
        padding:30px;
    }
    .level-grid {
        gap:24px;
    }
    .level-card {
        min-height:267px;
    }
    .level-card h2 {
        font-size:18px;
    }
    .question-canvas {
        min-height:500px;
    }
    .question-content {
        font-size:180px;
    }
    .question-content.vertical-exercise {
        font-size:100px;
    }
    .presentation-toolbar {
        padding-bottom:22px;
    }
}
@media(max-width:1200px) {
    .sidebar {
        width:215px;
        padding-inline:12px;
    }
    .app-shell {
        margin-left:215px;
    }
    .main-content {
        padding:28px;
    }
    .app-header {
        padding-inline:28px;
    }
    .nav-link {
        font-size:11px;
        padding-inline:12px;
    }
    .level-grid,.lesson-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .benefit {
        padding:0 11px;
        gap:9px;
        font-size:10px;
    }
    .benefit-icon {
        width:36px;
        height:36px;
    }
    .benefit-icon .icon {
        width:22px;
        height:22px;
    }
    .login-page {
        padding:55px;
        gap:45px;
    }
    .login-panel {
        padding:35px 30px;
    }
    .login-story h1 {
        font-size:42px;
    }
    .story-intro {
        font-size:18px;
    }
    .story-logo {
        width:166px;
        margin-bottom:34px;
    }
    .classroom-card {
        padding-inline:23px;
    }
    .classroom-card h2 {
        font-size:22px;
    }
    .page-heading {
        align-items:flex-start;
    }
    .page-heading h1 {
        font-size:26px;
    }
    .module-launch {
        padding:19px;
    }
    .module-launch h2 {
        font-size:15px;
    }
    .module-launch .button {
        font-size:12px;
        padding:12px;
    }
    .module-launch p span {
        margin:0 3px;
    }
}
@media(max-width:1000px) {
    .sidebar {
        transform:translateX(-100%);
        transition:transform .2s;
        width:240px;
    }
    .nav-open .sidebar {
        transform:translateX(0);
    }
    .app-shell {
        margin-left:0;
    }
    .menu-toggle {
        display:flex;
    }
    .app-header {
        min-height:72px;
    }
    .main-content {
        padding:30px;
    }
    .login-page {
        gap:35px;
        padding:45px 35px;
    }
    .login-story h1 {
        font-size:37px;
    }
    .login-story>.eyebrow {
        font-size:8px;
        letter-spacing:1px;
    }
    .story-intro {
        font-size:17px;
    }
    .login-benefits {
        gap:8px;
    }
    .login-benefits .benefit-icon {
        width:48px;
        height:48px;
        border-radius:13px;
    }
    .login-benefits .benefit-icon .icon {
        width:27px;
        height:27px;
    }
    .login-benefits .benefit {
        font-size:10px;
    }
    .login-panel {
        padding:30px 25px;
    }
    .panel-logo {
        width:128px;
    }
    .login-panel h2 {
        font-size:26px;
    }
    .login-subtitle {
        font-size:12px;
    }
    .login-help {
        font-size:9px;
    }
    .presentation-header {
        padding:18px 23px;
        gap:18px;
    }
    .presentation-identity {
        padding-left:18px;
    }
    .presentation-header>img {
        width:112px;
    }
    .presentation-toolbar {
        padding-inline:25px;
    }
    .presentation-toolbar .button {
        padding-inline:16px;
    }
}
@media(max-width:700px) {
    .login-page {
        display:block;
        padding:34px 22px 60px;
        max-width:520px;
    }
    .login-story>.eyebrow,.login-story .story-intro,.login-benefits,.abacus-scene {
        display:none;
    }
    .story-logo {
        width:135px;
        margin:0 auto 18px;
    }
    .login-story h1 {
        text-align:center;
        font-size:25px;
        letter-spacing:-.7px;
        margin-bottom:25px;
    }
    .login-story h1 br {
        display:none;
    }
    .login-panel {
        padding:30px 26px;
        border-radius:22px;
    }
    .panel-logo {
        width:120px;
        margin-bottom:20px;
    }
    .login-subtitle {
        font-size:12px;
    }
    .login-footer {
        font-size:8px;
        bottom:19px;
    }
    .main-content {
        padding:23px 19px;
    }
    .app-header {
        padding:14px 17px;
        gap:8px;
    }
    .header-title {
        font-size:12px;
        gap:6px;
    }
    .header-account>div {
        display:none;
    }
    .header-account>.icon-button {
        margin-left:0;
    }
    .avatar {
        width:33px;
        height:33px;
        font-size:10px;
    }
    .welcome-section {
        padding:8px 0 24px;
    }
    .welcome-section h1 {
        font-size:33px;
    }
    .welcome-section p {
        font-size:12px;
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:1.2px;
    }
    .classroom-cards {
        grid-template-columns:1fr;
        gap:18px;
    }
    .practice-modes {
        grid-template-columns:1fr;
        gap:18px;
    }
    .classroom-card {
        min-height:260px;
        padding:22px 27px;
    }
    .feature-icon {
        width:64px;
        height:64px;
        margin:15px 0;
    }
    .feature-icon .icon {
        width:36px;
        height:36px;
    }
    .classroom-card .button {
        margin-top:20px;
    }
    .classroom-card h2 {
        font-size:24px;
    }
    .benefit-strip {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
        padding:21px 13px;
    }
    .benefit {
        font-size:10px;
        padding:0 6px;
    }
    .benefit:nth-child(2) {
        border:0;
    }
    .section-caption {
        font-size:9px;
        gap:10px;
    }
    .teaching-note {
        align-items:flex-start;
        font-size:10px;
        text-align:center;
    }
    .teaching-note>.icon {
        display:none;
    }
    .teaching-note strong {
        display:block;
        margin-bottom:4px;
    }
    .app-footer {
        padding:17px 19px;
        font-size:8px;
    }
    .app-footer span:last-child {
        display:none;
    }
    .page-heading {
        flex-direction:column;
        gap:17px;
        margin-bottom:24px;
    }
    .page-heading h1 {
        font-size:26px;
    }
    .page-heading p {
        font-size:11px;
        line-height:1.7;
    }
    .light-heading {
        display:block;
        margin-top:6px;
    }
    .breadcrumbs {
        margin-bottom:22px;
    }
    .breadcrumbs li {
        font-size:8px;
    }
    .level-grid,.lesson-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
    .level-card {
        padding:14px 12px;
        min-height:218px;
    }
    .level-card h2 {
        font-size:14px;
        min-height:40px;
    }
    .level-icon {
        width:49px;
        height:49px;
        margin:17px 0 12px;
    }
    .level-number {
        font-size:7px;
    }
    .level-code {
        font-size:7px;
    }
    .lesson-card {
        padding:16px 13px;
    }
    .lesson-card h2 {
        font-size:15px;
    }
    .book-label {
        font-size:8px;
        letter-spacing:0;
    }
    .list-caption {
        font-size:9px;
    }
    .list-caption>span:last-child {
        display:none;
    }
    .module-launch {
        flex-direction:column;
        align-items:stretch;
        gap:15px;
        padding:18px;
    }
    .module-launch h2 {
        font-size:15px;
    }
    .module-launch p {
        font-size:9px;
        line-height:1.9;
    }
    .module-launch>div {
        gap:10px;
    }
    .set-heading {
        padding:16px 13px;
        gap:7px;
    }
    .set-heading>div {
        gap:7px;
    }
    .set-heading h2 {
        font-size:13px;
    }
    .set-icon {
        display:none;
    }
    .count-badge {
        font-size:8px;
        padding:4px 6px;
    }
    .set-heading .button-small {
        font-size:9px;
        padding:8px;
        gap:5px;
    }
    .question-table {
        min-width:535px;
    }
    .question-table thead th,.question-table td,.question-table tbody th {
        padding:11px 15px;
    }
    .module-bottom {
        flex-direction:column;
        align-items:stretch;
    }
    .module-bottom p {
        justify-content:center;
        font-size:9px;
    }
    .empty-state {
        padding:42px 18px;
        min-height:360px;
    }
    .empty-state h2 {
        font-size:22px;
    }
    .empty-state p {
        font-size:11px;
    }
    .coming-soon {
        padding:16px 0 40px;
    }
    .coming-soon h1 {
        font-size:31px;
    }
    .coming-soon>p {
        font-size:12px;
    }
    .coming-actions {
        flex-direction:column;
        width:100%;
    }
    .soon-badge {
        font-size:8px;
    }
    .presentation-header {
        padding:13px 16px;
        gap:14px;
        flex-wrap:wrap;
    }
    .presentation-header>img {
        width:95px;
    }
    .presentation-identity {
        padding-left:14px;
    }
    .presentation-identity h1 {
        font-size:17px;
    }
    .presentation-identity>span,.presentation-identity p {
        font-size:8px;
    }
    .presentation-header-actions {
        width:100%;
        justify-content:flex-end;
        padding-top:3px;
    }
    .presentation-header-actions .button {
        min-height:35px;
        font-size:10px;
        padding:8px 11px;
    }
    .classroom-stage {
        padding:17px 17px 7px;
        min-height:310px;
    }
    .question-meta {
        font-size:10px;
    }
    .question-canvas {
        min-height:310px;
        padding:20px 8px;
    }
    .question-content {
        font-size:110px;
    }
    .question-content.vertical-exercise {
        font-size:57px;
        min-width:130px;
        padding-inline:15px;
    }
    .answer-area strong {
        font-size:37px;
    }
    .question-eyebrow {
        font-size:9px;
        margin-bottom:15px;
    }
    .presentation-toolbar {
        padding:13px 14px 9px;
        gap:7px;
    }
    .presentation-toolbar .button {
        padding:12px 11px;
        font-size:10px;
        min-height:44px;
        gap:5px;
    }
    .presentation-toolbar .button .icon {
        width:14px;
        height:14px;
    }
    .reveal-button {
        min-width:120px;
    }
    .toolbar-left {
        gap:0;
    }
    .toolbar-left .icon-button {
        display:none;
    }
    .presentation-hints {
        gap:10px;
        font-size:7px;
        padding:9px 7px 14px;
    }
    .presentation-hints .icon {
        display:none;
    }
    kbd {
        font-size:7px;
        padding:1px 3px;
    }
    .completion-screen h2 {
        font-size:31px;
    }
    .completion-screen p {
        font-size:12px;
    }
    .confirmation-dialog {
        padding:26px;
    }
    .dialog-actions .button {
        font-size:12px;
        padding:11px 14px;
    }
}
@media(max-width:480px) {
    .level-grid,.lesson-grid {
        grid-template-columns:1fr;
    }
}
@media(max-width:370px) {
    .presentation-toolbar .button {
        font-size:9px;
        padding:10px 8px;
    }
    .reveal-button {
        min-width:107px;
    }
    .presentation-toolbar .button .icon {
        display:none;
    }
    .login-panel {
        padding-inline:19px;
    }
    .header-title {
        font-size:10px;
    }
}
@media(max-height:650px) and (min-width:701px) {
    .login-page {
        padding-block:30px;
        gap:50px;
    }
    .story-logo {
        margin-bottom:20px;
        width:150px;
    }
    .login-story h1 {
        font-size:38px;
    }
    .story-intro {
        font-size:16px;
    }
    .login-benefits {
        margin-top:22px;
    }
    .abacus-scene {
        margin-top:18px;
    }
    .login-panel {
        padding:25px 33px;
    }
    .panel-logo {
        width:120px;
        margin-bottom:18px;
    }
    .login-form {
        margin-top:18px;
    }
    .instructor-notice {
        margin-top:20px;
        padding:13px;
    }
    .login-help {
        margin-top:15px;
    }
    .login-footer {
        display:none;
    }
    .presentation-header {
        padding-block:12px;
    }
    .classroom-stage {
        min-height:260px;
        padding-top:12px;
    }
    .question-canvas {
        min-height:250px;
        padding-top:10px;
    }
    .question-content {
        font-size:95px;
    }
    .question-content.vertical-exercise {
        font-size:43px;
    }
    .question-eyebrow {
        margin-bottom:7px;
    }
    .answer-area {
        margin-top:10px;
        min-height:42px;
    }
    .answer-area strong {
        font-size:31px;
    }
    .presentation-toolbar {
        padding-block:8px;
    }
    .presentation-toolbar .button {
        min-height:42px;
    }
    .presentation-hints {
        padding-bottom:11px;
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        transition:none!important;
        scroll-behavior:auto!important;
    }
}

/* Sequential lesson playback */
.lesson-preview-link { display: inline-block; margin-top: 12px; color: var(--text-secondary); font-size: .82rem; text-decoration: underline; }
.lesson-core-link { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #09856c; font-size: .82rem; font-weight: 650; }
.lesson-core-link .icon { width: 15px; height: 15px; }
.lesson-core-link:hover { text-decoration: underline; }
.core-exercise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; list-style: none; margin: 0; padding: 22px; }
.core-exercise-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; border: 1px solid #e3edf7; border-radius: 14px; background: #f8fbff; text-align: center; }
.core-exercise-card:hover { border-color: #9bd9c9; background: #f0faf6; }
.core-exercise-name { color: var(--text-primary); font-size: 1.8rem; font-weight: 750; overflow-wrap: anywhere; }
.core-watch { display: flex; align-items: center; gap: 7px; color: #09856c; font-size: .85rem; font-weight: 650; }
.core-watch .icon { width: 16px; height: 16px; }
.core-video-panel { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(16px, 3vw, 32px); background: white; border: 1px solid #e8eef7; border-radius: 18px; box-shadow: var(--shadow); }
.core-video { display: block; }
.abacus-view-button { padding: 9px 14px; font-size: .82rem; white-space: nowrap; }
.abacus-view-button:disabled { opacity: .45; cursor: default; }
.abacus-unavailable { display: block; margin-top: 5px; font-size: .75rem; color: var(--text-secondary); }
.abacus-dialog { width: min(1000px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: clamp(16px, 3vw, 28px); border: 1px solid #e5edf6; border-radius: 20px; box-shadow: 0 20px 90px #1d355a30; color: var(--text-primary); }
.abacus-dialog::backdrop { background: #152c5580; backdrop-filter: blur(4px); }
.abacus-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.abacus-dialog-heading h2 { margin: 0 0 5px; font-size: clamp(1.15rem, 3vw, 1.5rem); }
.abacus-dialog-heading p { margin: 0; color: var(--text-secondary); }
.module-video-note { padding: 0 24px 24px; color: var(--text-secondary); }
.lesson-player { min-height: 100vh; }
.flow-stage { width: min(1200px, 100%); padding: 26px 36px 18px; margin: auto; flex: 1; }
.flow-canvas { min-height: 46vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; }
.lesson-youtube { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; min-height: 200px; }
.lesson-youtube iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 200px; border: 0; border-radius: 12px; }
.lesson-youtube[hidden] { display: none; }
.flow-message { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.12; color: var(--text-primary); margin: 20px 0; }
.flash-value { font-size: clamp(6rem, 18vw, 15rem); line-height: 1.1; font-weight: 800; color: var(--text-primary); letter-spacing: -.035em; }
.flash-beads { max-width: min(760px, 90vw); max-height: 52vh; object-fit: contain; }
.flow-description { color: var(--text-secondary); font-size: 1.02rem; max-width: 720px; }
.flow-error { color: #9b2432; background: #fff1f2; border: 1px solid #f1c9cd; border-radius: 14px; padding: 14px 20px; max-width: 760px; }
.listening-visual { color: var(--primary-blue); display: flex; flex-direction: column; align-items: center; gap: 20px; font-size: 2rem; font-weight: 700; }
.listening-visual .icon { width: 96px; height: 96px; }
.answer-countdown p { font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700; color: var(--text-primary); }
.countdown-dots { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 34px); padding: 30px 0; }
.countdown-dots span { width: clamp(24px, 4vw, 48px); height: clamp(24px, 4vw, 48px); border-radius: 50%; background: #e2e9f2; }
.countdown-dots .active { background: var(--primary-blue); }
.countdown-dots .current { animation: answer-dot .8s ease-in-out; }
@keyframes answer-dot { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.2); } }
.lesson-video { width: min(100%, 1000px); max-height: 62vh; background: #0c172b; border-radius: 18px; }
.flow-toolbar { border-top: 1px solid var(--border); background: #fff; padding: 20px 36px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.flow-settings, .flow-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.flow-settings { font-size: .88rem; color: var(--text-secondary); }
.flow-settings select { width: auto; padding: 9px 30px 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; color: var(--text-primary); font: inherit; }
.sound-setting { display: flex; align-items: center; gap: 7px; }
.sound-setting input { width: 16px; height: 16px; accent-color: var(--primary-blue); }
.flow-progress { display: flex; align-items: center; gap: 20px; padding: 12px 36px 20px; color: var(--text-secondary); font-size: .82rem; }
.flow-progress progress { flex: 1; height: 7px; accent-color: var(--primary-blue); }
.flow-answers { margin-top: 20px; background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.flow-answers h2 { font-size: 1.2rem; padding: 20px 24px; margin: 0; }
@media (max-width: 850px) {
    .flow-stage { padding: 18px 20px; }
    .flow-toolbar { padding: 18px 20px; }
    .flow-progress { padding: 12px 20px; }
    .flow-canvas { min-height: 42vh; }
    .flow-settings, .flow-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .countdown-dots .current { animation: none; } }

/* Cross-domain abacus-only answer player. */
#abacus-player{width:100%;background:#fff;border-radius:12px;overflow:hidden}#abacus-player[hidden]{display:none}