:root{--blue:#0b7dda;--blue-dark:#0862ad;--blue-soft:#e8f4fc;--blue-mid:#b9dff7;--green:#22a06b;--green-soft:#e3f7ee;--orange:#f5a524;--orange-soft:#fff4df;--red:#e34935;--bg:#f4f8fc;--bg-elevated:#fff;--bg-soft:#eef5fb;--border:#d7e4f0;--border-strong:#b7cce0;--text:#1b2b3a;--text-muted:#5b6f82;--text-dim:#8aa0b5;--correct:#1f8f5f;--wrong:#d64545;--caret:#0b7dda;--accent:var(--blue);--radius:16px;--radius-sm:12px;--radius-pill:999px;--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--max:1120px;--nav-h:68px;--shadow-sm:0 4px 14px #0f467814;--shadow-md:0 12px 32px #0f46781f;--ease:cubic-bezier(.22, 1, .36, 1)}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);margin:0;font-size:15px;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}::selection{background:#0b7dda2e}.app-shell{background:radial-gradient(ellipse 80% 50% at 10% -10%, #0b7dda1f, transparent 55%), radial-gradient(ellipse 60% 40% at 100% 0%, #22a06b14, transparent 50%), var(--bg);flex-direction:column;min-height:100vh;display:flex}.app-main{width:min(100% - 40px, var(--max));flex:1;margin:0 auto;padding:28px 0 72px}.app-shell--app .app-main{width:100%;max-width:none;margin:0;padding:24px 28px 64px}.app-body{width:min(100%,1280px);min-height:calc(100vh - var(--nav-h) - 80px);flex:1;grid-template-columns:240px minmax(0,1fr);align-items:start;gap:0;margin:0 auto;display:grid}.app-content{border-left:1px solid var(--border);background:0 0;min-width:0}.nav{height:var(--nav-h);border-bottom:1px solid var(--border);z-index:40;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffeb;position:sticky;top:0;box-shadow:0 1px #fffc}.nav-inner{height:100%;width:min(100% - 40px, var(--max));justify-content:space-between;align-items:center;gap:20px;margin:0 auto;display:flex}.nav-brand{letter-spacing:-.03em;color:var(--blue-dark);align-items:center;gap:10px;font-size:18px;font-weight:800;display:inline-flex}.nav-brand .logo-mark{color:#fff;background:linear-gradient(145deg,#1a9cf0,#0b7dda 55%,#0862ad);border-radius:10px;place-items:center;width:34px;height:34px;font-size:14px;font-weight:800;display:grid;box-shadow:0 6px 14px #0b7dda59}.nav-brand span{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;margin-left:2px;font-size:11px;font-weight:600}.nav-links{align-items:center;gap:2px;display:flex}.nav-link{border-radius:var(--radius-pill);color:var(--text-muted);transition:color .15s var(--ease), background .15s var(--ease);padding:8px 12px;font-size:14px;font-weight:600}.nav-link:hover,.nav-link.active{color:var(--blue-dark);background:var(--blue-soft)}.nav-cta{border-radius:var(--radius-pill);background:var(--blue);color:#fff;transition:transform .15s var(--ease), background .15s var(--ease);margin-left:8px;padding:9px 16px;font-size:13px;font-weight:700;box-shadow:0 6px 16px #0b7dda47}.nav-cta:hover{background:var(--blue-dark);transform:translateY(-1px)}.h-hero{letter-spacing:-.035em;color:var(--text);margin:0;font-size:clamp(36px,6vw,56px);font-weight:800;line-height:1.08}.h-section{letter-spacing:-.03em;color:var(--text);margin:0;font-size:clamp(24px,3.5vw,34px);font-weight:800;line-height:1.15}.lead{color:var(--text-muted);max-width:38rem;font-size:clamp(15px,1.8vw,17px);line-height:1.65}.muted{color:var(--text-muted)}.dim{color:var(--text-dim)}.btn{border-radius:var(--radius-pill);height:46px;transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);justify-content:center;align-items:center;gap:8px;padding:0 20px;font-size:14px;font-weight:700;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 18px #0b7dda47}.btn-primary:hover{background:var(--blue-dark)}.btn-ghost{border:1.5px solid var(--border-strong);color:var(--blue-dark);background:#fff}.btn-ghost:hover{background:var(--blue-soft);border-color:var(--blue-mid)}.btn-sm{height:36px;padding:0 14px;font-size:13px}.hero-banner{color:#fff;box-shadow:var(--shadow-md);background:linear-gradient(135deg,#0b7dda 0%,#1a9cf0 45%,#3db8ff 100%);border-radius:24px;margin-bottom:28px;padding:48px 40px 44px;position:relative;overflow:hidden}.hero-banner:before,.hero-banner:after{content:"";pointer-events:none;background:#ffffff1f;border-radius:50%;position:absolute}.hero-banner:before{width:280px;height:280px;top:-80px;right:-60px}.hero-banner:after{background:#ffffff14;width:160px;height:160px;bottom:-70px;left:18%}.hero-banner .hero-kicker{color:#ffffffe0}.hero-banner .hero-kicker i{background:#fff;box-shadow:0 0 0 4px #fff3}.hero-banner .h-hero{color:#fff;z-index:1;position:relative}.hero-banner .lead{color:#ffffffe6;z-index:1;position:relative}.hero-banner .btn-primary{color:var(--blue-dark);background:#fff;box-shadow:0 8px 20px #0028502e}.hero-banner .btn-primary:hover{background:#f3f9ff}.hero-banner .btn-ghost{color:#fff;background:#ffffff1a;border-color:#ffffff8c}.hero-banner .btn-ghost:hover{background:#fff3}.hero-kicker{color:var(--blue);letter-spacing:.08em;text-transform:uppercase;z-index:1;align-items:center;gap:10px;margin-bottom:12px;font-size:12px;font-weight:700;display:inline-flex;position:relative}.hero-kicker i{background:var(--blue);border-radius:50%;width:8px;height:8px;display:inline-block}.hero-actions{z-index:1;flex-wrap:wrap;gap:12px;margin-top:22px;display:flex;position:relative}.split-cards{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px;display:grid}.split-card{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:20px;gap:12px;padding:28px 24px;display:grid;position:relative;overflow:hidden}.split-card--student{background:linear-gradient(#fff 0%,#f0f8ff 100%)}.split-card--learn{background:linear-gradient(#fff 0%,#eefbf5 100%)}.split-icon{background:var(--blue-soft);border-radius:14px;place-items:center;width:52px;height:52px;font-size:24px;display:grid}.split-card--learn .split-icon{background:var(--green-soft)}.split-card h2{letter-spacing:-.02em;margin:0;font-size:22px;font-weight:800}.split-card p{color:var(--text-muted);min-height:3.2em;margin:0;font-size:14px;line-height:1.55}.section-title{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;margin:8px 0 16px;display:flex}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:28px;display:grid}.feature-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);min-height:170px;transition:transform .18s var(--ease), box-shadow .18s var(--ease);padding:22px 18px}.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.feature-card h3{letter-spacing:-.02em;margin:0 0 8px;font-size:16px;font-weight:800}.feature-card p{color:var(--text-muted);margin:0;font-size:13.5px;line-height:1.5}.feature-index{background:var(--blue-soft);width:36px;height:36px;color:var(--blue-dark);font-family:var(--font-mono);border-radius:10px;place-items:center;margin-bottom:14px;font-size:12px;font-weight:700;display:grid}.card-link{color:var(--blue);margin-top:14px;font-size:13px;font-weight:700;display:inline-block}.card-link:hover{text-decoration:underline}.stats-strip{grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 28px;display:grid}.stat-box{border:1px solid var(--border);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow-sm);background:#fff;padding:18px}.stat-box strong{color:var(--blue-dark);letter-spacing:-.03em;font-size:28px;font-weight:800;display:block}.stat-box span{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:600}.map-strip{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:20px;grid-template-columns:1.1fr 1fr;align-items:start;gap:24px;margin-top:8px;padding:28px;display:grid}.map-steps{counter-reset:step;gap:14px;margin:0;padding:0;list-style:none;display:grid}.map-steps li{gap:4px;padding-left:40px;display:grid;position:relative}.map-steps li:before{counter-increment:step;content:counter(step);background:var(--blue);color:#fff;border-radius:50%;place-items:center;width:28px;height:28px;font-size:13px;font-weight:800;display:grid;position:absolute;top:0;left:0}.map-steps strong{font-size:14px}.map-steps span{color:var(--text-muted);font-size:13px;line-height:1.45}.test-page{gap:22px;padding-top:8px;display:grid}.test-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.segmented{border:1px solid var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);background:#fff;gap:2px;padding:4px;display:inline-flex}.segmented button{border-radius:var(--radius-pill);height:34px;color:var(--text-muted);padding:0 14px;font-size:13px;font-weight:600}.segmented button.active{background:var(--blue);color:#fff}.metrics-row{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;flex-wrap:wrap;align-items:baseline;gap:24px;padding:14px 18px;display:flex}.metric{gap:2px;display:grid}.metric-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);font-size:11px;font-weight:700}.metric-value{letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--blue-dark);font-size:28px;font-weight:800}.typing-stage{--stage-bg:#fff;--stage-pending:#9aafc2;--stage-correct:#1f8f5f;--stage-wrong:#d64545;--stage-border:#d7e4f0;border:1px solid var(--stage-border);background:var(--stage-bg);box-shadow:var(--shadow-sm);border-radius:18px;padding:28px 24px 20px;position:relative;overflow:hidden}.typing-text{font-family:var(--font-mono);letter-spacing:.01em;word-break:break-word;white-space:pre-wrap;caret-color:#0000;cursor:text;-webkit-user-select:none;user-select:none;outline:none;min-height:8.2em;font-size:clamp(17px,2.1vw,21px);line-height:1.85}.char.pending{color:var(--stage-pending)}.char.correct{color:var(--stage-correct)}.char.wrong{color:var(--stage-wrong);text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:2px}.char.current{position:relative}.char.current:after{content:"";background:var(--caret);border-radius:2px;width:2px;height:76%;animation:1s step-end infinite blink;position:absolute;top:12%;left:-1px}@keyframes blink{0%,50%{opacity:1}50.01%,to{opacity:0}}.typing-hint{color:var(--text-dim);letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:16px;font-size:12px;font-weight:600;display:flex}.typing-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.results{gap:24px;padding-top:20px;display:grid}.results-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.result-card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;padding:18px}.result-card .label{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:700}.result-card .value{letter-spacing:-.04em;color:var(--blue-dark);font-variant-numeric:tabular-nums;margin-top:8px;font-size:34px;font-weight:800}.history-list{gap:8px;margin-top:20px;display:grid}.history-item{border:1px solid var(--border);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;box-shadow:var(--shadow-sm);background:#fff;grid-template-columns:1.2fr 1fr 1fr 1fr;align-items:center;gap:12px;padding:14px 16px;display:grid}.history-item span:first-child{color:var(--text-muted);font-size:13px}.empty-state{border:1.5px dashed var(--border-strong);border-radius:var(--radius);text-align:center;color:var(--text-muted);background:#fff;padding:40px 24px}.site-footer{border-top:1px solid var(--border);color:var(--text-dim);background:#fff;padding:28px 0 36px;font-size:12px}.site-footer-inner{width:min(100% - 40px, var(--max));flex-wrap:wrap;justify-content:space-between;gap:12px;margin:0 auto;display:flex}.site-footer a{color:var(--blue);font-weight:600}.lessons-page{gap:28px;padding-top:8px;display:grid}.progress-pill{border:1px solid var(--border);border-radius:var(--radius);min-width:170px;box-shadow:var(--shadow-sm);background:#fff;padding:14px 16px}.progress-bar{background:var(--blue-soft);border-radius:999px;height:8px;margin-top:10px;overflow:hidden}.progress-bar i{background:linear-gradient(90deg, var(--blue), #3db8ff);border-radius:999px;height:100%;display:block}.achieve-row{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;display:grid}.achieve-chip{border:1px solid var(--border);border-radius:var(--radius-sm);opacity:.5;background:#fff;gap:4px;padding:12px;display:grid}.achieve-chip--on{opacity:1;border-color:var(--blue-mid);background:var(--blue-soft)}.achieve-chip strong{color:var(--blue-dark);font-size:13px}.achieve-chip span{color:var(--text-muted);font-size:12px}.lesson-group{gap:14px;display:grid}.lesson-group-head{align-items:flex-start;gap:14px;display:flex}.lesson-group-head h2{letter-spacing:-.02em;margin:0;font-size:20px;font-weight:800}.lesson-group-head p{margin:4px 0 0;font-size:14px}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;display:grid}.lesson-card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);background:#fff;gap:8px;padding:16px;display:grid}.lesson-card:hover{border-color:var(--blue-mid);box-shadow:var(--shadow-md);transform:translateY(-2px)}.lesson-card h3{letter-spacing:-.02em;color:var(--blue-dark);margin:0;font-size:16px;font-weight:800}.lesson-card p{color:var(--text-muted);min-height:2.9em;margin:0;font-size:13px;line-height:1.45}.lesson-card-top{justify-content:space-between;align-items:center;font-size:12px;display:flex}.lesson-meta{color:var(--text-dim);flex-direction:column;gap:2px;font-size:11px;font-weight:600;display:flex}.badge{border:1px solid var(--border);color:var(--text-muted);background:var(--bg-soft);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700}.badge--ok{color:var(--green);background:var(--green-soft);border-color:#b7e5cf}.badge--mute{opacity:.85}.kb{--key:42px;--key-wide:64px;--key-space:220px;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;gap:6px;margin-top:16px;padding:16px 12px;display:grid;overflow-x:auto}.kb-row{justify-content:center;gap:5px;display:flex}.kb-key{border:1px solid var(--border);height:40px;color:var(--text-muted);font-size:11px;font-family:var(--font-mono);text-transform:lowercase;transition:background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);background:#f7fbff;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.kb-key--space{min-width:var(--key-space)}.kb-key--dim{opacity:.35}.kb-key--active{background:var(--blue);color:#fff;border-color:var(--blue-dark);opacity:1;box-shadow:0 4px 12px #0b7dda59}.game-page{gap:18px;padding-top:8px;display:grid}.game-stage{border:1px solid var(--border);height:380px;box-shadow:var(--shadow-sm);background:linear-gradient(#e9f5ff 0%,#d6ecff 100%);border-radius:18px;position:relative;overflow:hidden}.game-overlay{z-index:3;text-align:center;background:#ffffffd1;place-content:center;justify-items:center;gap:16px;padding:20px;display:grid;position:absolute;inset:0}.game-word{font-family:var(--font-mono);color:var(--blue-dark);letter-spacing:.03em;border:1px solid var(--border);box-shadow:var(--shadow-sm);pointer-events:none;background:#fff;border-radius:999px;padding:4px 12px;font-size:18px;font-weight:700;position:absolute;transform:translate(-50%,-50%)}.game-input{border-radius:var(--radius-pill);border:1.5px solid var(--border-strong);width:100%;height:48px;color:var(--text);font-family:var(--font-mono);box-shadow:var(--shadow-sm);background:#fff;outline:none;padding:0 18px;font-size:16px}.game-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #0b7dda26}.student-menu{margin-left:6px;position:relative}.student-chip{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:999px;align-items:center;gap:8px;max-width:200px;padding:4px 10px 4px 4px;display:inline-flex}.student-chip:hover{border-color:var(--blue-mid)}.student-avatar{color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:32px;height:32px;font-size:11px;font-weight:800;display:grid}.student-avatar--lg{width:56px;height:56px;font-size:16px}.student-chip-text{text-align:left;min-width:0;line-height:1.15;display:grid}.student-chip-text strong{white-space:nowrap;text-overflow:ellipsis;color:var(--text);font-size:12px;overflow:hidden}.student-chip-text small{color:var(--text-dim);font-size:10px;font-weight:600}.student-chevron{color:var(--text-dim);font-size:10px}.student-dropdown{border:1px solid var(--border);width:280px;box-shadow:var(--shadow-md);z-index:50;background:#fff;border-radius:16px;gap:12px;padding:14px;display:grid;position:absolute;top:calc(100% + 8px);right:0}.student-dropdown-head{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding-bottom:10px;display:flex}.student-field{color:var(--text-muted);gap:6px;font-size:12px;font-weight:700;display:grid}.student-field input,.student-field select{border:1px solid var(--border);height:36px;color:var(--text);background:#fff;border-radius:10px;padding:0 10px;font-weight:600}.avatar-swatches{flex-wrap:wrap;gap:6px;display:flex}.swatch{border:2px solid #0000;border-radius:50%;width:22px;height:22px}.swatch--on{border-color:var(--text);box-shadow:inset 0 0 0 2px #fff}.student-dropdown-links{border-top:1px solid var(--border);gap:6px;padding-top:4px;display:grid}.student-dropdown-links a{color:var(--blue);padding:6px 0;font-size:13px;font-weight:700}.student-dash{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:20px;grid-template-columns:1.4fr 1fr;align-items:center;gap:16px;padding:20px;display:grid}.student-dash-left{align-items:center;gap:14px;display:flex}.student-dash-stats{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.student-dash-bar{grid-column:1/-1}.mini-stat{text-align:center;background:var(--blue-soft);border-radius:12px;min-width:64px;padding:8px 10px}.mini-stat strong{color:var(--blue-dark);font-size:18px;font-weight:800;display:block}.mini-stat span{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:10px;font-weight:700}.progress-bar--lg{background:var(--blue-soft);border-radius:999px;height:12px;overflow:hidden}.progress-bar--lg i{height:100%;transition:width .25s var(--ease);background:linear-gradient(90deg,#0b7dda,#3db8ff);border-radius:999px;display:block}.unit-list{gap:12px;display:grid}.unit-accordion{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:16px;overflow:hidden}.unit-header{text-align:left;cursor:pointer;align-items:center;gap:12px;width:100%;padding:14px 16px;display:flex}.unit-emoji{background:#ffffffbf;border:1px solid #fffc;border-radius:12px;flex-shrink:0;place-items:center;width:44px;height:44px;font-size:22px;display:grid}.unit-header-text{flex:1;gap:2px;min-width:0;display:grid}.unit-header-text small{letter-spacing:.06em;text-transform:uppercase;color:var(--blue-dark);font-size:11px;font-weight:800}.unit-header-text strong{color:var(--text);font-size:17px;font-weight:800}.unit-header-text em{color:var(--text-muted);font-size:12px;font-style:normal;font-weight:500}.unit-header-meta{flex-shrink:0;align-items:center;gap:10px;display:flex}.unit-count{color:var(--blue-dark);font-variant-numeric:tabular-nums;font-size:13px;font-weight:800}.unit-mini-bar{background:#ffffffb3;border:1px solid #0000000a;border-radius:999px;width:72px;height:8px;overflow:hidden}.unit-mini-bar i{background:var(--blue);border-radius:999px;height:100%;display:block}.unit-chevron{color:var(--text-dim);text-align:center;width:18px;font-size:14px}.unit-body{border-top:1px solid var(--border);background:#fbfdff;padding:8px}.lesson-row-list{gap:6px;display:grid}.lesson-row{transition:border-color .15s var(--ease), box-shadow .15s var(--ease);background:#fff;border:1px solid #0000;border-radius:12px;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:12px;display:grid;position:relative}.lesson-row:hover{border-color:var(--blue-mid);box-shadow:var(--shadow-sm)}.lesson-row--locked{opacity:.72;cursor:not-allowed;background:#f5f8fb}.lesson-row-num{background:var(--blue-soft);width:32px;height:32px;color:var(--blue-dark);border-radius:50%;place-items:center;font-size:13px;font-weight:800;display:grid}.lesson-row-main{gap:2px;min-width:0;display:grid}.lesson-row-main strong{color:var(--text);font-size:14px;font-weight:800}.lesson-row-main small{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.lesson-row-side{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.lock-icon{opacity:.7;font-size:12px;position:absolute;top:8px;right:10px}.stars{letter-spacing:0;gap:2px;line-height:1;display:inline-flex}.star{font-size:14px}.stars--sm .star{font-size:13px}.stars--md .star{font-size:18px}.stars--lg .star{font-size:36px}.star--on{color:#f5a524;text-shadow:0 1px #b4640026}.star--off{color:#d5e0ea}.lesson-play-top{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.crumb{color:var(--blue);font-size:13px;font-weight:700}.play-progress-card{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:linear-gradient(#fff 0%,#f0f8ff 100%);border-radius:16px;gap:10px;padding:14px 16px 12px;display:grid}.play-progress-head{color:var(--text-muted);flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;display:flex}.play-progress-head strong{color:var(--blue-dark)}.progress-bar--play{background:#dceefb;border-radius:999px;height:16px;position:relative;overflow:visible}.progress-bar--play i{background:linear-gradient(90deg,#22a06b,#3dd68c 60%,#f5a524);border-radius:999px;height:100%;transition:width .15s linear;display:block}.progress-mascot{filter:drop-shadow(0 2px 2px #0000001f);pointer-events:none;font-size:22px;transition:left .15s linear;position:absolute;top:-10px}.play-live-metrics{color:var(--text-muted);flex-wrap:wrap;gap:16px;font-size:13px;font-weight:600;display:flex}.play-live-metrics b{color:var(--blue-dark);font-variant-numeric:tabular-nums;font-weight:800}.result-hero-card{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#e8f4fc,#fff);border-radius:20px;padding:24px}.result-stars-wrap{gap:8px;margin-top:14px;display:grid}.result-card small{margin-top:4px;font-size:11px;display:block}.progress-page{gap:8px;padding-top:4px;display:grid}.star-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:8px;display:grid}.star-cell{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:12px;gap:6px;padding:12px;display:grid}.star-cell strong{color:var(--text);font-size:13px;font-weight:800}.student-sidebar{top:var(--nav-h);max-height:calc(100vh - var(--nav-h));align-content:start;gap:16px;padding:18px 14px 24px;display:grid;position:sticky;overflow:auto}.sidebar-profile{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:14px;align-items:center;gap:10px;padding:10px;display:flex}.sidebar-profile strong{font-size:13px;font-weight:800;display:block}.sidebar-profile small{color:var(--text-dim);font-size:11px;font-weight:600}.sidebar-nav{gap:4px;display:grid}.sidebar-link{color:var(--text-muted);transition:background .15s var(--ease), color .15s var(--ease);border-radius:12px;align-items:center;gap:10px;padding:10px 12px;font-size:14px;font-weight:700;display:flex}.sidebar-link:hover{background:var(--blue-soft);color:var(--blue-dark)}.sidebar-link.active{background:var(--blue);color:#fff}.sidebar-badge{background:#ffffff40;border-radius:999px;margin-left:auto;padding:1px 7px;font-size:11px;font-style:normal}.sidebar-link:not(.active) .sidebar-badge{background:var(--blue-soft);color:var(--blue-dark)}.sidebar-daily{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:14px;gap:8px;padding:12px;display:grid}.sidebar-daily-head{justify-content:space-between;gap:8px;font-size:12px;display:flex}.sidebar-daily-head strong{color:var(--text);font-weight:800}.sidebar-daily-head span{color:var(--text-muted);font-size:11px;font-weight:600}.sidebar-daily-head span.ok{color:var(--green)}.sidebar-goal-edit{color:var(--text-dim);justify-content:space-between;align-items:center;font-size:11px;font-weight:700;display:flex}.sidebar-goal-edit select{border:1px solid var(--border);height:28px;color:var(--text);background:#fff;border-radius:8px;font-weight:700}.sidebar-mini{grid-template-columns:1fr 1fr;gap:8px;display:grid}.theme-picker{color:var(--text-muted);align-items:center;gap:8px;font-size:12px;font-weight:700;display:inline-flex}.theme-picker select{border:1px solid var(--border);height:34px;color:var(--text);background:#fff;border-radius:999px;padding:0 10px;font-weight:700}.card-panel{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:16px;padding:18px}.card-panel h2{margin:0 0 12px;font-size:18px;font-weight:800}.field{color:var(--text-muted);gap:6px;margin-bottom:12px;font-size:12px;font-weight:700;display:grid}.field input,.field textarea,.field select{border:1px solid var(--border);color:var(--text);background:#fff;border-radius:12px;padding:10px 12px;font-family:inherit;font-weight:600}.field textarea{resize:vertical;min-height:120px;font-weight:500;line-height:1.5}.field--inline{max-width:180px}.form-error{color:var(--red);margin:0 0 10px;font-size:13px;font-weight:700}.form-ok{color:#0a7a3e;background:#e8f8ef;border:1px solid #b7e4c7;border-radius:10px;margin:0 0 14px;padding:10px 14px;font-size:13px;font-weight:600}.dash-home{gap:18px;display:grid}.dash-hero{grid-template-columns:1.4fr 1fr;align-items:stretch;gap:18px;display:grid}.dash-continue-card{color:#fff;box-shadow:var(--shadow-md,0 10px 30px #0b7dda40);background:linear-gradient(145deg,#0b7dda 0%,#0a5fad 100%);border-radius:18px;flex-direction:column;padding:22px 22px 20px;display:flex}.dash-continue-card .muted,.dash-continue-card .dim{color:#ffffffd1}.dash-mini-progress{opacity:.95;gap:6px;font-size:12px;display:grid}.dash-mini-bar{background:#ffffff38;border-radius:99px;height:8px;overflow:hidden}.dash-metric .dash-mini-bar{background:#e8f1fa;margin-top:8px}.dash-mini-bar>i{background:#fff;border-radius:99px;min-width:0;height:100%;display:block}.dash-metric .dash-mini-bar>i{background:linear-gradient(90deg,#0b7dda,#3aa0f0)}.dash-metrics{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.dash-metric{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:14px;padding:14px 16px}.dash-metric strong{color:var(--text);letter-spacing:-.02em;font-size:20px;font-weight:800;display:block}.dash-metric span{color:var(--muted);margin-top:4px;font-size:12px;font-weight:600;display:block}.dash-columns{grid-template-columns:1.2fr 1fr;gap:14px;display:grid}.dash-assign-list{gap:10px;margin:10px 0 0;padding:0;list-style:none;display:grid}.dash-assign-list li{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.dash-assign-list li:last-child{border-bottom:0}.dash-assign-list strong{font-size:14px;display:block}.dash-assign-list .dim{margin-top:2px;font-size:12px;display:block}.dash-quick{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.dash-quick a{border:1px solid var(--border);color:var(--text);background:#f4f8fc;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;text-decoration:none;display:block}.dash-quick a:hover{color:#0b7dda;border-color:#0b7dda}.gradebook-strip{grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px;display:grid}.weak-keys-panel{margin-top:4px}.weak-key-chips{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.weak-key-chip{background:#fff4e8;border:1px solid #ffd7a8;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:13px;display:inline-flex}.weak-key-chip b{font-family:var(--font-mono,ui-monospace, monospace);font-size:14px}.weak-key-chip em{color:var(--muted);font-size:11px;font-style:normal;font-weight:700}.plans-page{gap:8px;display:grid}.plan-interval{gap:8px;margin:4px 0 8px;display:flex}.plans-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;display:grid}.plan-card{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:16px;align-content:start;gap:10px;padding:22px 20px 18px;display:grid;position:relative}.plan-card--hot{border-color:#0b7dda;box-shadow:0 12px 32px #0b7dda26}.plan-card--current{outline:2px solid #0b7dda}.plan-badge{color:#fff;background:#0b7dda;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800;position:absolute;top:12px;right:12px}.plan-price{flex-wrap:wrap;align-items:baseline;gap:4px;margin:0;display:flex}.plan-price strong{letter-spacing:-.03em;color:var(--text);font-size:36px;font-weight:800}.plan-price span,.plan-price em{color:var(--muted);font-size:13px;font-style:normal;font-weight:600}.plan-blurb{min-height:40px;margin:0;font-size:13px}.plan-features{color:var(--text);gap:6px;margin:4px 0 8px;padding-left:18px;font-size:13px;display:grid}.plan-how{gap:8px;margin:8px 0 0;padding-left:18px;font-size:14px;line-height:1.45;display:grid}@media (width<=900px){.dash-hero,.dash-columns,.plans-grid{grid-template-columns:1fr}.dash-metrics,.gradebook-strip{grid-template-columns:1fr 1fr}}.custom-list{gap:10px;display:grid}.custom-item{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:14px;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:14px 16px;display:grid}.custom-item strong{font-size:15px;font-weight:800}.custom-item p{margin:4px 0;font-size:13px}.custom-item-actions{flex-direction:column;gap:6px;display:flex}.game-hub-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:8px;display:grid}.game-hub-card{border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:transform .15s var(--ease), box-shadow .15s var(--ease);background:#fff;border-radius:18px;grid-template-columns:72px 1fr;gap:14px;padding:18px;display:grid}.game-hub-card:hover{box-shadow:var(--shadow-md);border-color:var(--blue-mid);transform:translateY(-2px)}.game-hub-emoji{background:var(--blue-soft);border-radius:16px;place-items:center;width:72px;height:72px;font-size:34px;display:grid}.game-hub-body h2{color:var(--blue-dark);margin:6px 0 4px;font-size:18px;font-weight:800}.game-hub-body p{color:var(--text-muted);margin:0 0 8px;font-size:13px;line-height:1.45}.keydash-stage{border:1px solid var(--border);min-height:280px;box-shadow:var(--shadow-sm);background:linear-gradient(#fff,#eaf5ff);border-radius:18px;place-items:center;display:grid;position:relative}.keydash-target{color:var(--blue);letter-spacing:-.04em;animation:popIn .25s var(--ease);text-shadow:0 8px 24px #0b7dda40;font-size:clamp(72px,18vw,140px);font-weight:900}.teacher-page{gap:16px;display:grid}.teacher-banner{color:#fff;box-shadow:var(--shadow-md);background:linear-gradient(135deg,#0b7dda,#3db8ff);border-radius:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:28px;display:flex}.teacher-grid{grid-template-columns:1.2fr 1fr;gap:14px;display:grid}.teacher-table{border-collapse:collapse;width:100%;font-size:13px}.teacher-table th,.teacher-table td{text-align:left;border-bottom:1px solid var(--border);padding:8px 10px}.teacher-table th{text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);font-size:11px;font-weight:800}.teacher-list{gap:10px;margin:0 0 10px;padding:0;list-style:none;display:grid}.teacher-list li{gap:2px;display:grid}.teacher-list strong{font-size:14px}.teacher-list span{color:var(--text-muted);font-size:12px}.teacher-scroll{max-height:360px;overflow:auto}.class-list{gap:8px;display:grid}.class-row{text-align:left;border:1px solid var(--border);background:var(--bg-soft);cursor:pointer;border-radius:12px;justify-content:space-between;gap:10px;width:100%;padding:12px;font-weight:700;display:flex}.class-row:hover{border-color:var(--blue-mid)}.class-row--static{cursor:default}.class-row span{color:var(--text-muted);font-size:12px;font-weight:600}.class-row b{color:var(--blue-dark);letter-spacing:.08em}.assign-list{gap:10px;display:grid}.assign-item{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:14px;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;display:flex}.assign-item h3{margin:6px 0 4px;font-size:16px;font-weight:800}.stats-strip{grid-template-columns:repeat(4,1fr)}.sidebar-mini div{background:var(--blue-soft);text-align:center;border-radius:12px;padding:10px}.sidebar-mini b{color:var(--blue-dark);font-size:18px;font-weight:800;display:block}.sidebar-mini span{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:10px;font-weight:700}.sidebar-cta{width:100%}.ready-overlay{z-index:60;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f284673;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.ready-card{text-align:center;width:min(100%,420px);box-shadow:var(--shadow-md);border:1px solid var(--border);background:#fff;border-radius:22px;justify-items:center;gap:10px;padding:32px 28px;display:grid}.ready-emoji{font-size:40px}.ready-card h2{color:var(--blue-dark);margin:0;font-size:28px;font-weight:800}.ready-title{margin:0;font-size:16px;font-weight:700}.ready-tips{color:var(--text-muted);gap:4px;margin:8px 0 4px;padding:0;font-size:13px;font-weight:600;list-style:none;display:grid}.countdown-num{color:var(--blue);animation:popIn .45s var(--ease);font-size:88px;font-weight:900;line-height:1}@keyframes popIn{0%{opacity:.2;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.typing-stage--blocked{opacity:.55;pointer-events:none}.cert-unlock-banner{background:var(--orange-soft);color:#8a5a00;border:1px solid #f0d49a;border-radius:12px;margin-top:14px;padding:10px 14px;font-size:13px;font-weight:700}.cert-unlock-banner a{color:var(--blue-dark);margin-left:4px}.certs-page{gap:20px;display:grid}.cert-unit-grid{gap:10px;display:grid}.cert-unit-card{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:16px;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;padding:14px 16px;display:grid}.cert-unit-card--done{border-color:var(--blue-mid);background:linear-gradient(90deg,#f0f8ff,#fff)}.cert-unit-emoji{background:var(--blue-soft);border-radius:14px;place-items:center;width:48px;height:48px;font-size:24px;display:grid}.cert-unit-card small{color:var(--blue);letter-spacing:.04em;text-transform:uppercase;font-size:11px;font-weight:800;display:block}.cert-unit-card strong{font-size:16px;font-weight:800;display:block}.cert-unit-card p{color:var(--text-muted);margin:2px 0 0;font-size:12px;font-weight:600}.cert-view{gap:20px;display:grid}.cert-frame{place-items:center;padding:8px 0 24px;display:grid}.cert-card{aspect-ratio:1.35;border:3px solid var(--blue);width:min(100%,720px);box-shadow:var(--shadow-md);text-align:center;background:radial-gradient(circle at 100% 0,#0b7dda1a,#0000 40%),radial-gradient(circle at 0 100%,#22a06b14,#0000 40%),#fff;border-radius:8px;align-content:center;gap:10px;padding:36px 40px;display:grid;position:relative}.cert-ribbon{background:var(--blue);color:#fff;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 16px;font-size:12px;font-weight:800;position:absolute;top:18px;left:50%;transform:translate(-50%)}.cert-brand{color:var(--blue-dark);letter-spacing:.12em;text-transform:uppercase;margin:28px 0 0;font-size:12px;font-weight:800}.cert-card h2{color:var(--text-muted);margin:8px 0 0;font-size:16px;font-weight:600}.cert-name{color:var(--text);letter-spacing:-.03em;margin:4px 0;font-size:clamp(28px,5vw,40px);font-weight:900}.cert-body{max-width:480px;color:var(--text-muted);margin:0 auto;font-size:14px;line-height:1.55}.cert-meta-row{border-top:1px dashed var(--border);grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;padding-top:16px;display:grid}.cert-meta-row span{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-size:10px;font-weight:700;display:block}.cert-meta-row strong{color:var(--text);font-size:13px}.cert-seal{border:3px solid var(--orange);width:56px;height:56px;color:var(--orange);background:var(--orange-soft);border-radius:50%;place-items:center;font-size:28px;display:grid;position:absolute;bottom:24px;right:28px}@media print{.no-print,.nav,.student-sidebar,.site-footer{display:none!important}.app-body{display:block}.app-main{padding:0!important}.cert-card{box-shadow:none}}@media (width<=960px){.app-body{grid-template-columns:1fr}.student-sidebar{border-bottom:1px solid var(--border);background:#fff;max-height:none;position:relative;top:0}.app-content{border-left:none}.app-shell--app .app-main{padding:20px 16px 48px}}@media (width<=860px){.feature-grid,.results-grid,.map-strip,.split-cards,.stats-strip,.student-dash,.cert-meta-row,.teacher-grid,.custom-item{grid-template-columns:1fr}.student-dash-stats{justify-content:flex-start}.history-item{grid-template-columns:1fr 1fr}.nav-links .hide-sm,.student-chip-text{display:none}.hero-banner{padding:32px 22px}.unit-header{flex-wrap:wrap}.unit-header-meta{justify-content:flex-end;width:100%}.lesson-row{grid-template-columns:36px 1fr}.lesson-row-side{flex-direction:row;grid-column:2;justify-content:flex-start}.cert-unit-card{grid-template-columns:48px 1fr}.cert-unit-card .btn,.cert-unit-card .badge{grid-column:2;justify-self:start}.kb{--key:28px;--key-wide:42px;--key-space:140px}.kb-key{height:32px;font-size:9px}}