/* The learning island has its own scoped typography and layout. */
[hidden] { display: none !important; }
body { padding-bottom: 86px; }
.learn-shell, .learn-dialog { --ink: #244a40; --soft-ink: #657b70; --green: #296c51; --cream: #f9faf4; --border: #dee7dc; color: var(--ink); }
.learn-shell { max-width: 1120px; width: calc(100% - 64px); margin: 0 auto; }
#learningRoot { background: #f9faf4; min-height: calc(100vh - 86px); }
body[data-section="home"], body[data-section="plan"], body[data-section="parents"] { background:#f9faf4; }
.learn-shell h1, .learn-shell h2, .learn-shell h3, .learn-shell p, .learn-dialog h2, .learn-dialog h3, .learn-dialog p { margin: 0; }
.learn-shell h1 { color: var(--ink); font-size: clamp(36px, 5vw, 58px); line-height: 1.26; letter-spacing: -2px; font-weight: 850; }
.learn-shell h1 span { color: #4a8465; }
.learn-shell h2 { font-size: 25px; letter-spacing: -.6px; line-height: 1.4; color: var(--ink); }
.learn-shell h3 { font-size: 20px; line-height: 1.5; }
.learn-shell p { color: var(--soft-ink); line-height: 1.85; }
.learn-shell a { color: inherit; text-decoration: none; }
.learn-shell button, .learn-dialog button, .learn-nav button { cursor: pointer; font: inherit; }
.learn-shell button:disabled, .learn-dialog button:disabled { opacity: .45; cursor: default; }
.learn-shell input, .learn-shell select, .learn-dialog textarea { font: inherit; color: var(--ink); }
.learn-shell button, .learn-shell a, .learn-dialog button { -webkit-tap-highlight-color: transparent; }
.learn-shell :focus-visible, .learn-dialog :focus-visible, .learn-nav :focus-visible { outline: 3px solid #cf923a; outline-offset: 4px; }
.learn-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.learn-skip { position:fixed; top:-70px; left:20px; z-index:100; padding:12px; background:white; color:#244a40; }
.learn-skip:focus { top:12px; }
.learn-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:27px 0; border-bottom:1px solid var(--border); }
.learn-brand { display:flex; align-items:center; gap:12px; font-size:21px; font-weight:850; letter-spacing:-.5px; }
.learn-brand small { display:block; font-size:9px; font-weight:600; letter-spacing:2px; color:var(--soft-ink); margin-top:3px; }
.learn-brand-mark { display:grid; place-items:center; background:var(--green); color:#eaf4a6; width:44px; height:44px; border-radius:14px; font-size:32px; transform:rotate(-8deg); }
.learn-profile { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; }
.learn-profile img { width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 30%; border:3px solid white; box-shadow:0 0 0 1px var(--border); }
.learn-profile small { display:block; color:var(--soft-ink); font-size:11px; font-weight:500; }
.learn-eyebrow { display:block; font-size:11px; font-weight:750; letter-spacing:1.7px; color:var(--soft-ink); margin-bottom:9px; }
.learn-eyebrow i { display:inline-block; width:6px; height:6px; background:#87ac77; border-radius:50%; vertical-align:middle; margin-right:7px; }
.learn-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:408px; gap:40px; padding:38px 0 30px; overflow:hidden; }
.learn-hero .learn-eyebrow { letter-spacing:2px; margin-bottom:18px; font-size:12px; }
.learn-hero h1 span { display:block; }
.learn-hero p { font-size:16px; margin:18px 0 25px; }
.learn-hero-caption { margin-top:16px; font-size:11px; color:var(--soft-ink); letter-spacing:1px; }
.learn-primary, .learn-secondary, .learn-text-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:11px 20px; border-radius:14px; font-size:14px; font-weight:750; line-height:1.5; text-decoration:none; border:1px solid transparent; transition:transform .2s, box-shadow .2s, background .2s; }
.learn-shell .learn-primary, .learn-dialog .learn-primary { background:#296c51; color:#fff; border-color:#296c51; }
.learn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 14px #296c5124; }
.learn-secondary { background:white; border-color:#d8e2d6; color:#345a48; }
.learn-secondary:hover { background:#f0f5eb; }
.learn-text-button { background:transparent; color:#416851; padding:8px 0; font-size:13px; min-height:40px; }
.learn-island { position:relative; height:340px; overflow:hidden; isolation:isolate; border-radius:90px 110px 90px 110px; background:radial-gradient(ellipse at 55% 40%,#e4edcd 0, #edf2df 55%, transparent 75%); }
.learn-orbit { position:absolute; width:310px; height:250px; border:1px dashed #c2d2b6; border-radius:50%; transform:rotate(-22deg); top:45px; left:calc(50% - 155px); }
.learn-hill { position:absolute; border-radius:50%; transform:rotate(-8deg); }
.hill-back { width:300px; height:122px; bottom:37px; left:calc(50% - 150px); background:#b3cda0; }
.hill-front { width:315px; height:80px; bottom:26px; left:calc(50% - 150px); background:#7fac83; box-shadow:0 14px 0 #598468,0 21px 0 #e2cda4; }
.learn-house { position:absolute; left:calc(50% + 18px); bottom:89px; width:89px; height:96px; background:#f8edcf; border-radius:5px; transform:rotate(4deg); box-shadow:inset -10px 0 #eadabb; }
.learn-house::before { content:''; position:absolute; top:-38px; left:-9px; width:108px; height:50px; background:#ce7951; clip-path:polygon(50% 0,100% 100%,0 100%); }
.learn-house i { position:absolute; bottom:0; left:17px; width:25px; height:43px; border-radius:15px 15px 0 0; background:#6f9f8a; }
.learn-house b { position:absolute; width:22px; height:22px; top:21px; right:15px; background:#f9f9e9; border:4px solid #aebe9a; }
.learn-tree { position:absolute; left:calc(50% - 104px); bottom:91px; height:100px; width:16px; background:#93754f; border-radius:10px; }
.learn-tree::before { content:''; position:absolute; width:77px; height:108px; background:#527f56; border-radius:60% 45% 48% 46%; bottom:27px; left:-32px; transform:rotate(-10deg); }
.learn-tree::after { content:''; width:3px; height:68px; background:#729c6a; position:absolute; bottom:44px; left:6px; transform:rotate(-8deg); }
.learn-mascot { position:absolute; width:70px; height:83px; left:calc(50% - 56px); bottom:76px; animation:learn-bob 4s ease-in-out infinite; }
.learn-mascot .face { position:absolute; inset:28px 0 0; background:#fffbea; border:1px solid #e8e4cd; border-radius:45% 45% 40% 40%; display:flex; align-items:center; justify-content:center; gap:8px; color:#435849; font-size:19px; box-shadow:0 5px 0 #49795318; }
.learn-mascot .face i { font-style:normal; font-size:14px; margin-top:8px; }
.learn-mascot .ear { position:absolute; top:1px; width:22px; height:50px; background:#fffbea; border:1px solid #e8e4cd; border-radius:50%; }
.learn-mascot .one { left:8px; transform:rotate(-13deg); }
.learn-mascot .two { right:9px; transform:rotate(13deg); }
.learn-cloud { position:absolute; color:#fff; font-size:64px; text-shadow:0 4px 0 #e0e8d7; }
.learn-cloud.c1 { left:18px; top:10px; animation:learn-drift 7s ease-in-out infinite; }
.learn-cloud.c2 { right:26px; top:38px; font-size:45px; animation:learn-drift 8s ease-in-out infinite reverse; }
.learn-floating-tile { position:absolute; display:grid; place-items:center; width:58px; height:61px; border-radius:17px; background:#fff9e9; font-weight:800; box-shadow:0 8px 20px #60845312; z-index:2; }
.tile-book { color:#ad7058; left:38px; top:97px; transform:rotate(-12deg); font-family:Georgia,serif; font-size:27px; }
.tile-math { color:#7e7296; right:28px; top:150px; transform:rotate(13deg); background:#f1ecf7; font-size:33px; }
.learn-spark { position:absolute; color:#d1a745; font-size:24px; }
.s1 { top:21px; left:48%; }.s2 { top:98px; right:30%; font-size:14px; }
.learn-flower { position:absolute; bottom:77px; color:#f7e19a; z-index:3; }.f1 { left:calc(50% - 133px);font-size:31px; }.f2 { left:calc(50% + 117px); font-size:24px; bottom:88px; color:#fff8d4; }
.learn-island-label { position:absolute; left:50%; bottom:2px; transform:translateX(-50%) rotate(-4deg); font-size:9px; letter-spacing:3px; color:#6f8b68; white-space:nowrap; }
.learn-stat-strip { display:flex; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:17px 0; margin-bottom:35px; }
.learn-stat-strip > span { flex:1; text-align:center; font-size:12px; color:var(--soft-ink); border-right:1px solid var(--border); }.learn-stat-strip > span:last-child { border:0; }
.learn-stat-strip b { font-size:23px; font-weight:750; color:var(--ink); margin-right:10px; font-variant-numeric:tabular-nums; }
.learn-section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin:34px 0 20px; }
.learn-date-label { font-size:12px; color:var(--soft-ink); white-space:nowrap; padding-bottom:5px; }
.learn-today-card { border:1px solid #dbe5cb; background:#eef3e2; border-radius:22px; padding:24px; display:flex; align-items:center; gap:19px; }
.learn-today-card > div { flex:1; min-width:0; }.learn-today-card small { font-size:12px; color:#5f7a59; }.learn-today-card h3 { margin:5px 0; font-size:23px; }.learn-today-card p { font-size:13px; max-width:470px; }.learn-today-card .learn-primary { flex-shrink:0; }
.learn-rest-icon { font-size:42px; color:#bc974a; }.learn-rest-toggle { display:flex; margin-left:auto; font-size:11px; }
.learn-subject-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.learn-subject-card { display:flex; align-items:center; text-align:left; gap:13px; padding:22px 17px; background:white; border:1px solid var(--border); border-radius:20px; min-width:0; position:relative; transition:transform .25s,box-shadow .25s,border-color .25s; }
.learn-subject-card:hover { transform:translateY(-4px); border-color:var(--subject); box-shadow:0 10px 20px #2f55490b; }.learn-subject-card:active { transform:scale(.98); }
.learn-subject-icon { width:49px; height:49px; border-radius:16px; background:var(--subject-bg); color:var(--subject); display:inline-grid; place-items:center; flex:0 0 49px; font-size:23px; font-weight:750; font-family:Georgia,"Microsoft YaHei",sans-serif; }
.learn-subject-card > span:nth-child(2) { flex:1; min-width:0; }.learn-subject-card small { display:block; font-size:10px; color:var(--soft-ink); }.learn-subject-card strong { display:block; margin:6px 0; color:var(--ink); font-size:17px; }.learn-subject-card > span > span { font-size:10px; color:var(--soft-ink); }.learn-card-arrow { font-size:20px; color:var(--subject); font-weight:400; }
.learn-week-preview { margin-top:30px; padding:25px 0; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:20px; }.learn-week-preview h2 { font-size:22px; }.learn-week-preview p { font-size:13px; margin-top:7px; }
.learn-footer { margin:25px 0 0; padding:27px 0; text-align:center; color:#6f8376; font-size:12px; letter-spacing:.5px; border-top:1px solid var(--border); }.learn-footer small { display:block; font-size:10px; margin-top:7px; letter-spacing:1.5px; }
.learn-nav { position:fixed; bottom:14px; left:50%; transform:translateX(-50%); display:flex; z-index:20; padding:7px; gap:4px; width:min(440px,calc(100% - 30px)); border-radius:24px; background:#fffef8ed; border:1px solid #dce3d6; box-shadow:0 8px 36px #21372d1a; backdrop-filter:blur(20px); }
.learn-nav button { flex:1; background:transparent; border:0; border-radius:17px; min-height:53px; padding:6px; font-size:11px; color:#6c7e71; transition:background .25s,color .25s,transform .25s; }.learn-nav button span { display:block; font-size:22px; line-height:1.25; margin-bottom:3px; }.learn-nav button.active { background:#e9f0dd; color:#285a42; font-weight:750; }.learn-nav button:active { transform:scale(.95); }
.learn-page-intro { padding:40px 0 30px; }.learn-page-intro h1 { font-size:40px; margin:12px 0 18px; }.learn-page-intro p { font-size:15px; }
.learn-selectors { display:flex; flex-wrap:wrap; align-items:center; gap:13px; padding:15px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.learn-grade-tabs { display:flex; background:#eaf0e3; padding:4px; border-radius:14px; }.learn-grade-tabs button { border:0; background:transparent; padding:9px 15px; min-height:40px; color:var(--soft-ink); border-radius:10px; font-size:13px; }.learn-grade-tabs button[aria-pressed=true] { background:white; box-shadow:0 2px 5px #2d55470a; color:var(--green); font-weight:750; }
.learn-week-picker { display:flex; align-items:center; gap:5px; margin-left:auto; }.learn-week-picker button { width:36px; height:40px; background:transparent; border:1px solid var(--border); border-radius:10px; font-size:24px; }.learn-week-picker select { border:0; background:transparent; padding:10px 2px; font-size:14px; max-width:175px; }
.learn-plan-summary { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:24px 0; }.learn-plan-summary strong { font-size:20px; }.learn-plan-summary p { font-size:13px; margin-top:7px; max-width:680px; }
.learn-plan-days { display:grid; gap:12px; }.learn-plan-day { display:flex; gap:17px; align-items:flex-start; padding:24px 20px; border:1px solid var(--border); border-radius:20px; background:white; }.learn-plan-day-date { width:55px; flex-shrink:0; padding-top:3px; }.learn-plan-day-date strong { font-size:18px; display:block; }.learn-plan-day-date span { font-size:11px; color:var(--soft-ink); }.learn-plan-day-copy { flex:1; min-width:0; }.learn-plan-day-copy h3 { font-size:20px; margin:4px 0 7px; }.learn-plan-day-copy small { color:var(--subject); font-size:12px; }.learn-plan-day-copy p { font-size:14px; }.learn-plan-day-copy summary { margin-top:10px; color:var(--soft-ink); cursor:pointer; font-size:12px; }.learn-plan-day.done { border-color:#aac398; }.learn-plan-day > button { align-self:center; flex-shrink:0; font-size:13px; }
.learn-weekend { display:flex; gap:20px; padding:24px; background:#edf2e6; border-radius:20px; }.learn-weekend > span { font-size:33px; color:#b58c35; }.learn-weekend p { margin-top:6px; font-size:13px; }
.learn-search { display:flex; align-items:center; gap:10px; border:1px solid var(--border); padding:9px 16px; background:white; border-radius:14px; }.learn-search span { font-size:25px; }.learn-search input { flex:1; border:0; padding:5px; background:transparent; width:100%; min-width:0; font-size:15px; }
.learn-filter { display:flex; gap:7px; flex-wrap:wrap; padding:17px 0; }.learn-filter button { background:transparent; border:1px solid var(--border); padding:8px 13px; border-radius:30px; font-size:13px; min-height:40px; }.learn-filter button[aria-pressed=true] { background:#2c654d; color:white; border-color:#2c654d; }
.learn-unit { background:white; border:1px solid var(--border); border-radius:17px; margin:10px 0; overflow:hidden; }.learn-unit > summary { display:flex; align-items:center; gap:16px; padding:18px 20px; cursor:pointer; list-style:none; }.learn-unit > summary::-webkit-details-marker { display:none; }.learn-unit > summary > span { color:#a1b099; font-size:23px; font-family:Georgia,serif; }.learn-unit > summary strong { font-size:16px; }.learn-unit > summary small { font-size:11px; color:var(--soft-ink); margin-left:auto; }.learn-unit > summary b { font-size:18px; color:#7e9870; }.learn-unit[open] > summary b { transform:rotate(45deg); }
.learn-unit-items { border-top:1px solid var(--border); padding:0 20px; }.learn-unit-items > div { padding:18px 0; display:flex; gap:15px; border-bottom:1px solid #eef1ea; }.learn-unit-items > div:last-child { border:0; }.learn-unit-items > div > div { min-width:0; flex:1; }.learn-unit-items small { display:block; font-size:12px; color:var(--soft-ink); margin:5px 0; }.learn-unit-weeks { display:flex; gap:8px; margin-top:10px; }.learn-unit-weeks button { border:0; padding:8px 12px; border-radius:9px; background:#f0f4e9; color:#4d7057; font-size:12px; min-height:36px; }
.learn-parent-card { background:white; border:1px solid var(--border); border-radius:22px; padding:28px; margin:0 0 24px; }.learn-parent-card p { font-size:14px; margin:13px 0; }.learn-roadmap { margin-bottom:30px; }.learn-roadmap > div { display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--border); }.learn-roadmap b { font-size:32px; font-family:Georgia,serif; color:#a7b398; }.learn-roadmap p { font-size:14px; margin-top:10px; }
.learn-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:28px; }.learn-resource { border:1px solid var(--border); border-radius:20px; background:white; padding:24px; }.learn-resource-kind { color:#78936b; font-size:11px; font-weight:700; }.learn-resource h3 { margin:12px 0; font-size:21px; }.learn-rating { display:block; color:#a27c2c; font-size:16px; margin-bottom:6px; }.learn-resource > small { display:block; font-size:10px; color:var(--soft-ink); }.learn-resource p { font-size:13px; margin:15px 0; }.learn-resource dl { display:grid; grid-template-columns:35px minmax(0,1fr); gap:8px; font-size:12px; padding-top:13px; border-top:1px solid var(--border); }.learn-resource dt { color:#8a9788; }.learn-resource dd { margin:0; color:var(--soft-ink); }.learn-resource > div { display:flex; gap:20px; margin-top:20px; }.learn-resource a { font-size:13px; color:#356c4f; text-decoration:underline; text-underline-offset:4px; }
.learn-start-setting { display:flex; flex-wrap:wrap; gap:15px; align-items:center; font-size:14px; }.learn-start-setting input { border:1px solid var(--border); border-radius:10px; padding:9px; background:#fafcf6; }
.learn-backup-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }.learn-upload { cursor:pointer; position:relative; overflow:hidden; }.learn-upload input { position:absolute; inset:0; opacity:0; cursor:pointer; max-width:100%; }
.learn-progress-subjects { display:flex; flex-wrap:wrap; gap:16px; border-top:1px solid var(--border); padding-top:20px; }.learn-progress-subjects > div { display:flex; align-items:center; gap:8px; font-size:12px; }.learn-progress-subjects .learn-subject-icon { width:30px; height:30px; flex-basis:30px; border-radius:10px; font-size:16px; }.learn-progress-subjects b { font-size:12px; }.learn-records { margin-top:24px; }.learn-records summary { cursor:pointer; font-size:14px; }.learn-records article { padding:15px 0; border-bottom:1px solid var(--border); }.learn-records p { white-space:pre-wrap; overflow-wrap:anywhere; }
.learn-empty { padding:30px; text-align:center; }.learn-storage-warning { color:#914924; background:#fff1d4; padding:12px; border-radius:12px; }
.learn-dialog { border:0; padding:0; border-radius:27px; background:#fcfcf7; width:min(720px,calc(100% - 24px)); max-height:90dvh; overflow-y:auto; box-shadow:0 25px 90px #20372c38; }
.learn-dialog::backdrop { background:#1d352e80; backdrop-filter:blur(5px); }
.learn-dialog[open] { animation:learn-dialog-enter .25s ease-out; }.learn-dialog-shell { padding:24px 30px; }
.learn-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:15px; color:var(--soft-ink); font-size:12px; }.learn-dialog-header button { width:40px; height:40px; border:0; border-radius:50%; background:#eaf0e3; font-size:26px; }
.learn-lesson-title { display:flex; gap:15px; align-items:center; margin:12px 0 22px; }.learn-lesson-title h2 { font-size:27px; line-height:1.3; margin-top:5px; }.learn-lesson-title small { color:var(--subject); font-size:12px; }
.learn-lesson-steps { display:flex; gap:6px; }.learn-lesson-steps span { flex:1; text-align:center; padding:10px 4px; background:#edf1e7; color:#8a9583; border-radius:10px; font-size:12px; }.learn-lesson-steps span.active { background:var(--subject-bg); color:var(--subject); font-weight:800; }
.learn-phase-note { margin:16px 0; font-size:12px; color:var(--soft-ink); line-height:1.8; }.learn-lesson-content { padding:3px 0 18px; }.learn-reading { padding:22px; background:#f0f4e8; border-radius:18px; }.learn-reading > p { font-size:21px; line-height:2; margin-bottom:15px; letter-spacing:.5px; }.learn-reading > small { display:block; color:var(--soft-ink); font-size:10px; margin-top:10px; }
.learn-question { margin-top:25px; }.learn-question h3 { font-size:21px; line-height:1.7; }.learn-answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }.learn-answers button { min-height:60px; font-size:18px; padding:12px; color:#375643; background:white; border:1px solid #dce5d4; border-radius:14px; transition:transform .18s,background .2s; overflow-wrap:anywhere; }.learn-answers button:hover { background:var(--subject-bg); }.learn-answers button:active { transform:scale(.96); }.learn-answers button.correct { border-color:#4b8f62; background:#e5f2de; }
.learn-feedback { min-height:28px; color:#3e7252; font-size:15px; line-height:1.8; margin:15px 0 0 !important; }.learn-dialog-footer { padding-top:17px; border-top:1px solid #dce5d4; display:flex; align-items:center; justify-content:space-between; gap:15px; }.learn-dialog-footer > span { font-size:11px; color:var(--soft-ink); }.learn-dialog-footer > button { flex-shrink:0; }
.learn-word-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }.learn-word-cards button { display:flex; flex-direction:column; gap:5px; align-items:center; background:white; border:1px solid #dfdfd6; border-radius:16px; padding:17px; }.learn-word-cards strong { font-size:25px; font-family:Georgia,serif; }.learn-word-cards span { color:var(--soft-ink); font-size:15px; }.learn-word-cards small { font-size:10px; color:#929b8e; }
.learn-listen-button { display:block; width:100%; padding:20px; background:var(--subject-bg); color:var(--subject); border:0; border-radius:20px; font-size:35px !important; margin:20px 0; }.learn-listen-button small { display:block; font-size:11px; margin-top:8px; }
.learn-puzzle-title { font-size:24px; margin-top:15px !important; line-height:1.7; }.learn-math-visual { white-space:pre-wrap; overflow-wrap:anywhere; font-size:25px; letter-spacing:4px; padding:20px; background:var(--subject-bg); border-radius:15px; margin:20px 0; }
.learn-sentence-track { display:flex; gap:7px; flex-wrap:wrap; min-height:88px; align-items:center; padding:15px; margin:20px 0; background:#edf3e7; border:1px dashed #b8cba9; border-radius:16px; }.learn-sentence-track > span { font-size:13px; color:var(--soft-ink); }.learn-sentence-track button, .learn-word-bank button { border:1px solid #d5dfca; border-radius:12px; background:white; min-height:50px; padding:8px 14px; font-size:19px; color:#3c6448; }.learn-word-bank { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:20px; }
.learn-science-materials { padding:20px; border-radius:16px; background:#eaf2ef; }.learn-science-materials p { margin:8px 0; }.learn-science-materials small { font-size:12px; color:#6b7768; line-height:1.7; display:block; }
.learn-field { display:block; margin:20px 0; font-size:16px; font-weight:650; }.learn-field textarea { display:block; width:100%; min-height:115px; resize:vertical; background:white; border:1px solid #d7e1ce; border-radius:14px; padding:15px; margin-top:10px; font-size:17px; line-height:1.8; font-weight:400; }
.learn-check { display:flex; align-items:center; gap:10px; font-size:13px; }.learn-check input, .learn-experiment-steps input { width:20px; height:20px; accent-color:#377958; flex-shrink:0; }.learn-experiment-steps { padding-left:24px; }.learn-experiment-steps li { padding:8px 0; }.learn-experiment-steps label { display:flex; align-items:center; gap:10px; font-size:17px; }
.learn-project { background:#f0f4e8; padding:23px; border-radius:17px; }.learn-project h3 { font-size:21px; line-height:1.8; }.learn-project p { margin-top:12px; font-size:14px; color:var(--soft-ink); line-height:1.8; }.learn-small-note { font-size:12px; color:var(--soft-ink); line-height:1.7; }
.learn-code-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin:20px 0; }.learn-code-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); aspect-ratio:1; border:3px solid #dbe6ca; background:#e5eed7; gap:3px; border-radius:15px; overflow:hidden; }.learn-cell { background:#f7f8e9; position:relative; display:flex; align-items:center; justify-content:center; font-size:24px; }.learn-cell.blocked { background:#d2e3c1; }.learn-rabbit { position:absolute; inset:0; display:grid; place-items:center; font-size:31px; filter:drop-shadow(0 3px 1px #56783d25); animation:learn-step .25s ease-out; }.learn-command-buttons { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }.learn-command-buttons button { min-height:43px; padding:8px 10px; border:1px solid #d3cce1; border-radius:10px; background:#eee8f5; color:#675282; font-size:12px; }.learn-code-counter { font-size:13px; color:#967626; }.learn-program { display:flex; flex-wrap:wrap; gap:6px; background:white; border:1px dashed #c5d3b6; border-radius:13px; min-height:75px; padding:12px; margin:16px 0; }.learn-program span { font-size:13px; color:var(--soft-ink); }.learn-program button { background:#ede9f4; border:0; border-radius:8px; color:#67517e; padding:8px; font-size:11px; }.learn-game-actions { display:flex; gap:10px; }
.learn-toast { position:fixed; z-index:100; left:50%; top:20px; transform:translate(-50%,-30px); opacity:0; max-width:calc(100% - 32px); width:max-content; padding:14px 22px; border-radius:18px; background:#244d3e; color:white; box-shadow:0 8px 24px #244d3e25; font-size:14px; pointer-events:none; transition:opacity .25s, transform .25s; }.learn-toast.show { opacity:1; transform:translate(-50%,0); }
@keyframes learn-bob { 50% { transform:translateY(-5px) rotate(-3deg); } }
@keyframes learn-drift { 50% { transform:translateX(10px); } }
@keyframes learn-step { from { transform:translateY(-5px); opacity:.6; } to { transform:translateY(0); opacity:1; } }
@keyframes learn-dialog-enter { from { opacity:0; transform:translateY(20px) scale(.98); } to { opacity:1; transform:none; } }
/* Keep the timetable identity in its own panel, without a separate hero banner. */
#scheduleView .schedule-panel { margin-top:0; }
#scheduleView .schedule-heading { display:grid; gap:10px; min-width:0; margin-bottom:18px; }
#scheduleView .schedule-profile { display:flex; align-items:center; gap:10px; min-width:0; }
#scheduleView .schedule-avatar { display:block; width:40px; height:40px; flex:0 0 40px; object-fit:cover; border-radius:50%; border:1px solid var(--line); background:#fff; }
#scheduleView .schedule-profile strong { font-size:20px; line-height:1.3; color:var(--text); white-space:nowrap; }
#scheduleView .schedule-effective { margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; }
#scheduleView .schedule-heading h1 { margin:0; font-size:clamp(24px,5vw,30px); line-height:1.35; letter-spacing:0; color:var(--text); }
#scheduleView .schedule-note { margin:0; color:var(--muted); font-size:13px; line-height:1.7; text-wrap:pretty; }
@media(min-width:1000px) { .learn-subject-grid .learn-subject-card:nth-child(4),.learn-subject-grid .learn-subject-card:nth-child(5) { min-height:115px; } }
@media(max-width:850px) { .learn-shell { width:calc(100% - 40px); }.learn-hero { gap:5px; }.learn-subject-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.learn-today-card { flex-wrap:wrap; }.learn-today-card > div { flex-basis:calc(100% - 78px); }.learn-today-card .learn-primary { margin-left:68px; }.learn-plan-day { gap:12px; padding:19px 15px; }.learn-plan-day > button { padding:9px 12px; }.learn-week-preview { align-items:flex-start; }.learn-resource { padding:20px; } }
@media(max-width:560px) {
  .learn-shell { width:calc(100% - 32px); }.learn-header { padding:19px 0; }.learn-brand { font-size:17px; gap:8px; }.learn-brand small { font-size:7px; letter-spacing:1.2px; }.learn-brand-mark { width:34px; height:36px; font-size:25px; border-radius:11px; }.learn-profile { gap:0; }.learn-profile img { width:38px; height:38px; }.learn-profile > span { display:none; }
  .learn-hero { position:relative; display:block; min-height:350px; padding:28px 0 23px; }.learn-hero-copy { position:relative; z-index:3; pointer-events:none; }.learn-hero-copy a { pointer-events:auto; }.learn-hero h1 { font-size:43px; }.learn-hero .learn-eyebrow { font-size:10px; margin-bottom:15px; letter-spacing:1.4px; }.learn-hero p { font-size:13px; margin:16px 0 21px; max-width:64%; }.learn-hero .learn-primary { font-size:12px; padding:12px 15px; gap:16px; }.learn-hero-caption { font-size:9px; margin-top:16px; }.learn-island { position:absolute; width:260px; height:315px; right:-25px; top:26px; transform:scale(.68); transform-origin:right center; opacity:.94; z-index:1; }.learn-floating-tile { width:47px; height:49px; }.tile-book { left:12px; top:82px; }.tile-math { right:5px; }.learn-cloud.c1 { left:-10px; }.learn-orbit { width:240px; left:10px; }.learn-stat-strip { padding:15px 0; margin-bottom:26px; }.learn-stat-strip > span { font-size:10px; }.learn-stat-strip b { display:block; font-size:21px; margin:0 0 2px; }
  .learn-section-title { margin:25px 0 16px; gap:8px; align-items:flex-end; }.learn-section-title h2 { font-size:21px; }.learn-eyebrow { font-size:9px; letter-spacing:1px; }.learn-date-label { font-size:9px; }.learn-text-button { font-size:11px; }.learn-today-card { padding:17px; gap:12px; border-radius:18px; }.learn-today-card h3 { font-size:20px; margin:7px 0; }.learn-today-card small { font-size:10px; }.learn-today-card p { font-size:12px; }.learn-today-card > div { flex-basis:calc(100% - 65px); }.learn-today-card .learn-primary { margin-left:61px; font-size:12px; min-height:42px; }.learn-rest-toggle { font-size:10px; }
  .learn-subject-grid { gap:10px; }.learn-subject-card { display:block; padding:17px 13px; min-height:169px; border-radius:17px; }.learn-subject-card .learn-subject-icon { width:39px; height:39px; font-size:21px; border-radius:13px; margin-bottom:13px; }.learn-subject-card small { font-size:9px; }.learn-subject-card strong { font-size:16px; margin:7px 0; }.learn-subject-card > span > span { font-size:9px; }.learn-card-arrow { position:absolute; right:14px; top:18px; }.learn-subject-card:last-child { grid-column:1 / -1; display:flex; align-items:center; min-height:100px; }.learn-subject-card:last-child .learn-subject-icon { margin:0; }.learn-subject-card:last-child .learn-card-arrow { top:37px; }.learn-week-preview { display:block; margin-top:24px; padding:22px 0; }.learn-week-preview h2 { font-size:20px; }.learn-week-preview p { font-size:12px; }.learn-week-preview .learn-secondary { margin-top:14px; font-size:12px; }
  .learn-page-intro { padding:30px 0 25px; }.learn-page-intro h1 { font-size:33px; line-height:1.4; letter-spacing:-1px; }.learn-page-intro p { font-size:13px; }.learn-selectors { gap:10px; }.learn-grade-tabs { width:100%; }.learn-grade-tabs button { flex:1; }.learn-week-picker { margin-left:0; }.learn-selectors > .learn-text-button { margin-left:auto; }.learn-plan-summary { align-items:flex-start; }.learn-plan-summary strong { font-size:17px; }.learn-plan-summary p { font-size:12px; }.learn-plan-summary .learn-secondary { padding:9px 10px; font-size:10px; min-width:67px; }
  .learn-plan-day { display:grid; grid-template-columns:39px minmax(0,1fr) auto; gap:10px; }.learn-plan-day-date { grid-column:1 / 3; width:auto; display:flex; gap:10px; align-items:baseline; padding-bottom:7px; }.learn-plan-day-date strong { font-size:15px; }.learn-plan-day .learn-subject-icon { grid-column:1; grid-row:2; width:37px; height:39px; flex-basis:37px; font-size:19px; border-radius:12px; }.learn-plan-day-copy { grid-column:2 / 4; grid-row:2; }.learn-plan-day-copy h3 { font-size:19px; }.learn-plan-day-copy p { font-size:13px; }.learn-plan-day > button { grid-row:1; grid-column:3; font-size:11px; padding:7px 10px; min-height:36px; }.learn-weekend { padding:18px; gap:12px; }.learn-weekend h3 { font-size:18px; }.learn-weekend p { font-size:12px; }
  .learn-filter { gap:6px; }.learn-filter button { padding:6px 10px; font-size:11px; min-height:37px; }.learn-unit > summary { padding:16px 12px; gap:9px; }.learn-unit > summary strong { font-size:14px; }.learn-unit > summary small { font-size:8px; }.learn-unit-items { padding:0 13px; }.learn-unit-items .learn-subject-icon { width:34px; height:36px; flex-basis:34px; font-size:18px; border-radius:11px; }.learn-unit-items > div { gap:11px; }.learn-unit-items strong { font-size:16px; }.learn-unit-items small { font-size:11px; }.learn-unit-weeks { gap:6px; }.learn-unit-weeks button { padding:7px 10px; font-size:11px; }
  .learn-resource-grid { grid-template-columns:1fr; }.learn-parent-card { padding:22px 18px; }.learn-parent-card h2 { font-size:22px; }.learn-parent-card p { font-size:13px; }.learn-roadmap { margin-top:25px; }.learn-roadmap h2 { font-size:23px; }.learn-roadmap h3 { font-size:18px; }.learn-roadmap p { font-size:13px; }.learn-progress-subjects { gap:12px; }.learn-progress-subjects > div { width:calc(50% - 6px); flex-wrap:wrap; }.learn-progress-subjects b { font-size:10px; }
  .learn-dialog { border-radius:22px; max-height:92dvh; }.learn-dialog-shell { padding:15px 17px 20px; }.learn-dialog-header { font-size:11px; }.learn-lesson-title h2 { font-size:23px; }.learn-lesson-title { gap:11px; }.learn-lesson-title small { font-size:10px; }.learn-reading { padding:18px; }.learn-reading > p { font-size:19px; line-height:1.9; }.learn-question h3 { font-size:20px; }.learn-answers button { font-size:17px; min-height:61px; }.learn-dialog-footer > span { max-width:100px; }.learn-dialog-footer > button { font-size:12px; padding:11px 14px; }.learn-puzzle-title { font-size:22px; }.learn-code-layout { grid-template-columns:1fr; }.learn-code-grid { max-width:290px; width:100%; margin:0 auto; }.learn-command-buttons { gap:7px; }.learn-command-buttons button { font-size:11px; }.learn-project { padding:18px; }.learn-project h3 { font-size:19px; }.learn-field textarea { font-size:16px; }.learn-sentence-track button,.learn-word-bank button { padding:8px 11px; font-size:17px; }
}
@media(max-width:360px) { .learn-island { right:-39px; transform:scale(.59); top:42px; }.learn-hero h1 { font-size:39px; }.learn-hero p { font-size:12px; }.learn-unit > summary small { display:none; }.learn-subject-card strong { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .learn-shell *, .learn-dialog *, .learn-nav * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media print { body { background:white; padding:0; }.learn-nav,.learn-header,.learn-footer,.learn-selectors,.learn-curriculum,.learn-plan-summary button,.learn-plan-day button,.learn-plan-day details,.learn-toast,.learn-skip { display:none !important; }.learn-shell { width:100%; max-width:none; }.learn-page-intro { padding:0 0 12px; }.learn-page-intro h1 { font-size:23px; }.learn-page-intro p { font-size:11px; }.learn-plan-day { break-inside:avoid; padding:12px; }.learn-plan-day h3 { font-size:16px; }.learn-plan-day p { font-size:11px; }.learn-plan-summary { margin:15px 0; }.learn-weekend { break-inside:avoid; }.learn-plan-days { gap:8px; } }