:root { --ink:#263e43; --muted:#728285; --green:#2d7460; --mint:#e2f1e8; --cream:#f6f8f2; --line:#e4ebe4; --purple:#8577bc; --shadow:0 10px 40px #253c3510; font-family:ui-rounded,"Avenir Next","SF Pro Rounded",system-ui,sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; } body { margin:0; display:flex; min-height:100vh; } button,input,select { font:inherit; } button { color:inherit; cursor:pointer; } button:disabled { cursor:default; opacity:.55; } button,a,input,select { -webkit-tap-highlight-color:transparent; } button { transition:background .16s,transform .16s,box-shadow .16s; } button:hover:not(:disabled) { filter:brightness(.98); } button:active:not(:disabled) { transform:translateY(2px); } :focus-visible { outline:3px solid #6978bf; outline-offset:4px; } .sidebar { width:234px; padding:37px 22px 24px; background:#fcfdf9; border-right:1px solid var(--line); display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh; }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--ink); font-size:19px; line-height:1.25; font-weight:700; padding:0 10px; } .brand strong { font-weight:900; } .brand-mark { display:grid; place-items:center; width:43px; height:49px; border-radius:16px 16px 20px 10px; background:#dcece2; color:#37866c; font-size:34px; } .nav-label { font-size:10px; letter-spacing:1.9px; color:#8a9793; font-weight:900; margin:55px 12px 18px; } .sidebar nav { display:grid; gap:11px; } .nav-item { display:flex; align-items:center; gap:12px; border:none; background:transparent; width:100%; padding:12px 10px; border-radius:15px; font-size:14px; font-weight:800; text-align:left; min-height:58px; } .nav-item.active { background:#eaf2e8; color:#317258; } .nav-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:11px; font-size:24px; font-weight:800; } .lavender { background:#ece7fb; color:#8172b2; } .peach { background:#fce8dc; color:#ba8660; } .blue { background:#e1edf6; color:#718fb1; } .yellow { background:#faf0ce; color:#b4943e; } .nav-arrow { margin-left:auto; font-size:21px; color:#9daea2; opacity:0; } .active .nav-arrow { opacity:1; } .side-note { margin-top:auto; padding:22px 12px; } .side-note>span { display:block; font-size:27px; margin-bottom:10px; } .side-note strong { font-size:14px; } .side-note p { color:var(--muted); font-size:12px; line-height:1.7; margin-bottom:0; } .settings-link { background:transparent; border:0; border-top:1px solid var(--line); padding:23px 10px 0; text-align:left; font-size:13px; font-weight:700; color:#7a8883; min-height:48px; } .settings-link span { font-size:20px; margin-right:8px; }
main { width:calc(100% - 234px); max-width:1450px; padding:32px clamp(22px,4vw,64px) 20px; margin:auto; } .topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:38px; } .welcome { font-size:19px; font-weight:900; } .welcome span { font-size:20px; } .welcome small { display:block; color:var(--muted); font-size:12px; font-weight:600; margin-top:5px; } .top-controls { display:flex; gap:12px; align-items:center; } .icon-button { border:1px solid #e0e7dc; border-radius:50%; width:43px; height:43px; background:#fdfefb; font-size:20px; font-weight:800; } .icon-button.off { color:#8b9691; background:#edf0e8; } .star-counter { border:1px solid #ede3c6; background:#fff8de; display:flex; align-items:center; gap:9px; border-radius:22px; padding:8px 16px; min-height:43px; } .star-counter span { color:#cca23e; font-size:22px; } .star-counter b { font-size:15px; } .eyebrow { font-size:10px; font-weight:900; color:#63876d; letter-spacing:2px; display:flex; gap:7px; align-items:center; text-transform:uppercase; } .eyebrow:before { content:''; background:#91b294; width:6px; height:6px; border-radius:50%; } h1 { font-size:clamp(26px,3vw,39px); letter-spacing:-1.1px; line-height:1.2; margin:11px 0; font-weight:900; } h1 .soft { font-weight:600; color:#8ca98d; } .intro { color:var(--muted); font-size:14px; line-height:1.6; margin:0; } .section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:27px; } .level-wrap { display:grid; gap:7px; color:#7b8d81; font-size:10px; font-weight:900; letter-spacing:.5px; flex-shrink:0; } select { color:#527360; background:#eef4e9; border:1px solid #dee9d7; border-radius:12px; min-height:44px; padding:9px 30px 9px 12px; font-size:12px; font-weight:800; max-width:220px; }
.operation-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px; } .operation { border:1px solid #e0e7de; border-radius:17px; background:#fcfdf9; display:flex; align-items:center; gap:14px; padding:15px; font-weight:900; text-align:left; font-size:14px; min-height:75px; } .operation .op-symbol { font-size:30px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#eef2e9; color:#83967a; font-weight:600; flex-shrink:0; } .operation small { display:block; font-size:10px; color:#8a9688; font-weight:600; margin-top:2px; } .operation.selected { background:#eeebf8; border:2px solid #a096cc; padding:14px; color:#72619f; box-shadow:0 3px 0 #d3ccea; } .operation.selected .op-symbol { background:#e0d9f1; color:#8270ba; } .operation.selected small { color:#8b7dab; } .operation:nth-child(1):not(.selected) .op-symbol { background:#e4f0e6; color:#6b9c7c; } .operation:nth-child(2):not(.selected) .op-symbol { background:#f9e8dd; color:#c5916e; } .operation:nth-child(4):not(.selected) .op-symbol { background:#e2edf5; color:#7597b2; }
.round-line { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; color:#7e8d83; font-size:12px; } .round-line strong { color:#5a7963; font-weight:800; } .progress-dots { display:flex; gap:7px; align-items:center; } .progress-dots span { width:24px; height:24px; display:grid; place-items:center; color:#dce5d8; font-size:22px; } .progress-dots .earned { color:#d4aa44; } .progress-dots .current { color:#9cbaa0; } .task-card { background:#fffefa; border:1px solid #e3e9df; border-radius:26px; padding:25px 30px; box-shadow:var(--shadow); position:relative; } .task-top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .task-badge { font-size:10px; font-weight:900; letter-spacing:1.3px; color:#8b7ba9; background:#f1edf8; padding:7px 11px; border-radius:7px; } .link-button { border:0; background:transparent; padding:8px; color:#7c8d7d; font-size:12px; font-weight:800; min-height:36px; } .link-button:hover { text-decoration:underline; } .task-card h2 { margin:24px 0 7px; font-size:22px; font-weight:900; text-align:center; } .instruction { margin:0; text-align:center; color:#829184; font-size:13px; } .equation { display:flex; justify-content:center; align-items:center; gap:clamp(10px,1.8vw,25px); padding:30px 0 23px; } .number-slot { border:1px solid #e5e9e0; background:#f4f6ef; color:#4e6b59; width:clamp(90px,10vw,140px); min-height:124px; display:grid; place-items:center; border-radius:19px; font-size:clamp(38px,4.8vw,66px); font-weight:900; letter-spacing:-2px; box-shadow:0 4px 0 #e6eadf; } .number-slot.editable { cursor:pointer; } .number-slot.answer { background:#f1f6eb; border:2px dashed #99b284; color:#3e7353; box-shadow:none; position:relative; } .number-slot.answer.empty { color:#91a684; } .number-slot.answer.filled { border-style:solid; background:#e7f2df; } .number-slot.answer.correct { background:#e4f1e7; border:2px solid #77a883; color:#397452; } .equation-sign { font-size:34px; font-weight:600; color:#a8b49d; } .equation-sign.operator { color:#9c8ebd; } .slot-label { position:absolute; font-size:9px; color:#89a178; bottom:7px; letter-spacing:1px; text-transform:uppercase; } .equation.compact .number-slot { font-size:45px; } .number-slot.active-edit { outline:3px solid #a294c6; outline-offset:4px; }
.answer-prompt { text-align:center; font-size:10px; letter-spacing:1.5px; font-weight:900; color:#88957e; margin:6px 0 15px; } .choices { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; max-width:540px; margin:0 auto; } .choice { background:#fffefa; border:1px solid #dedfd7; border-bottom:4px solid #e1e2d9; border-radius:15px; min-height:73px; font-size:29px; font-weight:900; color:#647558; padding:10px 8px; } .choice:nth-child(2) { background:#f2eef9; border-color:#e1dcec; color:#8975ab; } .choice:nth-child(3) { background:#fdf0e5; border-color:#efdecc; color:#bb916a; } .choice:nth-child(4) { background:#eaf2f7; border-color:#dbe6ed; color:#7594a7; } .choice.chosen { outline:3px solid #73a185; outline-offset:3px; } .keypad { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; max-width:580px; margin:auto; } .keypad button { min-height:61px; border-radius:12px; border:1px solid #dde5d8; border-bottom:3px solid #dce3d4; background:#f5f8ef; font-size:26px; font-weight:800; } .input-tools { text-align:center; margin-top:12px; } .input-tools button { margin:0 6px; } .work-bottom { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-top:18px; margin-top:18px; border-top:1px solid #edf0e7; } .helper-mini { display:flex; align-items:center; gap:10px; min-width:0; } .helper-mini img { width:52px; height:57px; object-fit:contain; } .helper-mini strong { display:block; font-size:12px; font-weight:900; } .helper-mini span { color:#8c9789; font-size:11px; } .pill-button { border:1px solid #dee5d4; border-radius:11px; background:#f6f8ef; padding:9px 14px; min-height:42px; font-size:12px; font-weight:800; } .primary { background:#367a60; color:white; border:0; border-bottom:4px solid #28624b; border-radius:14px; padding:13px 30px; min-height:52px; font-weight:900; font-size:15px; display:inline-flex; gap:15px; align-items:center; justify-content:center; } .primary:disabled { opacity:.4; } .actions { display:flex; gap:10px; align-items:center; } .feedback { text-align:center; padding:11px; margin:17px 0 0; border-radius:12px; background:#f6f0df; color:#887449; font-size:14px; font-weight:700; } .feedback.success { background:#e8f4e8; color:#417453; } .feedback:empty { display:none; } .hint-panel { margin:18px auto 0; padding:18px; background:#f4f7ef; border-radius:16px; text-align:center; max-width:650px; } .hint-panel p { margin:7px 0; font-size:13px; line-height:1.7; color:#627c63; } .groups { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:4px 0 8px; } .group { display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:6px; border-radius:12px; border:1px solid #d7e3d0; background:#fdfef9; padding:10px; max-width:130px; } .pebble { width:18px; height:21px; border-radius:45% 45% 42% 42%; display:inline-block; background:#a9c7a1; box-shadow:inset -3px -3px 0 #8daa8b; } .pebble.coral { background:#eac1a9; box-shadow:inset -3px -3px 0 #d8aa94; } .pebble.removed { opacity:.25; position:relative; } .pebble.removed:after { content:'×'; color:#66584e; position:absolute; inset:0; line-height:20px; } .visual-summary { display:flex; gap:9px; justify-content:center; align-items:center; padding:10px 0 4px; color:#769475; font-size:11px; } .visual-summary i { display:inline-block; width:9px; height:9px; border-radius:3px; background:#b3ca9c; } .visual-summary span { margin-right:8px; } .step-equation { font-size:22px; font-weight:900; color:#658665; padding:8px; } .place-values { display:flex; justify-content:center; gap:8px; margin:8px; } .place-values span { padding:8px 12px; border-radius:10px; background:#e2eddb; font-weight:900; } .journey-strip { display:flex; gap:18px; align-items:center; padding:20px 5px 4px; } .journey-strip .small-star { font-size:30px; color:#c3aa5d; background:#f0eedb; width:50px; height:50px; display:grid; place-items:center; border-radius:16px; } .journey-strip p { margin:0; color:#7d8e78; font-size:12px; line-height:1.6; } .journey-strip strong { font-size:13px; color:#5d7a58; } .journey-strip .dots-line { flex:1; margin:0 10px; border-bottom:2px dashed #dce4d5; } .journey-strip .little-dragon { width:56px; height:62px; object-fit:contain; }
.tabs { display:flex; gap:9px; margin-bottom:22px; flex-wrap:wrap; } .tab { border:1px solid #dde5d9; background:#fcfdf8; border-radius:14px; padding:13px 23px; min-height:49px; font-size:14px; font-weight:800; } .tab.selected { background:#e3efe5; color:#39715c; border:2px solid #97bba6; padding:12px 22px; } .clock-layout { display:grid; grid-template-columns:minmax(260px,1fr) minmax(220px,1fr); gap:25px; align-items:center; padding:15px 0; } .clock-svg { width:100%; max-width:360px; display:block; margin:auto; touch-action:none; overflow:visible; } .clock-svg .hand { cursor:grab; } .clock-svg.dragging .hand { cursor:grabbing; } .clock-svg text { font-family:inherit; } .clock-read-choices { grid-template-columns:repeat(2,1fr); gap:12px; } .clock-read-choices .choice { font-size:24px; min-height:95px; } .clock-read-choices .choice small { display:block; font-size:11px; font-weight:600; color:#86918a; margin-top:3px; } .clock-instruction { color:#7a8b7e; font-size:12px; line-height:1.8; } .clock-legend { display:flex; justify-content:center; gap:16px; font-size:11px; font-weight:700; color:#849080; margin-top:5px; } .clock-legend i { display:inline-block; width:12px; height:4px; border-radius:5px; vertical-align:middle; margin-right:4px; } .clock-controls { display:grid; gap:13px; } .target-time { color:#647d65; text-align:center; background:#f1f5e9; padding:16px; border-radius:16px; } .target-time small { display:block; font-size:10px; letter-spacing:1px; font-weight:900; margin-bottom:4px; } .target-time strong { font-size:38px; font-weight:900; } .hand-select { display:flex; gap:8px; } .hand-select button { flex:1; border-radius:10px; border:1px solid #e6e6df; padding:9px 5px; min-height:48px; background:#fafbf6; font-weight:800; font-size:12px; } .hand-select button.selected { border:2px solid #8cafc4; background:#eaf2f8; } .hand-select button[data-hand="hour"].selected { border-color:#ce9b83; background:#f9eee6; } .adjustment { display:flex; gap:8px; align-items:center; } .adjustment button { min-height:50px; min-width:53px; border:1px solid #dce4d7; border-bottom:3px solid #d5dfd0; border-radius:12px; background:#f5f8f0; font-size:24px; font-weight:800; } .adjustment span { text-align:center; flex:1; font-size:14px; font-weight:900; } .clock-value { text-align:center; font-size:12px; color:#81917d; margin:0; } .slider-label { display:flex; align-items:center; gap:12px; font-size:11px; color:#718575; } input[type=range] { accent-color:#6b96ac; width:100%; min-height:36px; }
.complete { text-align:center; padding:24px; } .complete img { width:200px; height:205px; object-fit:contain; } .complete h2 { font-size:30px; margin:15px 0 10px; } .complete p { color:#7d8e7d; line-height:1.7; font-size:15px; } .complete .primary { margin:16px 0; } .big-stars { color:#d6ad48; font-size:38px; letter-spacing:9px; } .stars-hero { background:#edf4e8; border-radius:25px; display:flex; align-items:center; justify-content:center; gap:42px; padding:25px 35px; } .stars-hero img { width:210px; height:225px; object-fit:contain; } .stars-hero h2 { font-size:62px; color:#64875f; margin:0; font-weight:900; } .stars-hero p { font-size:14px; color:#788d71; margin:2px 0; } .stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0; } .stat { padding:22px; border-radius:18px; background:#fffefa; border:1px solid var(--line); text-align:center; } .stat span { display:block; font-size:28px; margin-bottom:8px; } .stat b { font-size:25px; } .stat p { font-size:12px; color:#7b8b7d; margin-bottom:0; } .privacy-note { color:#8e998a; font-size:11px; text-align:center; line-height:1.8; } .geometry-image { display:block; width:100%; height:220px; max-width:330px; margin:20px auto; } .unit-picture { font-size:75px; padding:12px; text-align:center; } .units-equation { flex-wrap:wrap; gap:13px; } .units-equation .number-slot { min-width:125px; font-size:45px; } .unit-label { font-size:22px; color:#889c7d; font-weight:900; }
footer { font-size:10px; color:#a0aa98; text-align:center; margin-top:29px; line-height:1.8; } footer span { margin-left:8px; color:#879d82; } dialog { border:1px solid #e0e8dc; padding:32px; border-radius:25px; max-width:480px; width:calc(100% - 32px); color:var(--ink); box-shadow:0 20px 120px #24403530; background:#fffefa; } dialog::backdrop { background:#273d3945; backdrop-filter:blur(4px); } dialog h2 { font-size:26px; margin:0 0 12px; } dialog p { color:#83907f; line-height:1.8; font-size:14px; } .dialog-close { position:absolute; top:12px; right:12px; border:0; background:#eff3e9; width:33px; height:33px; border-radius:50%; font-size:20px; } .setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; border-top:1px solid #e9eee4; font-size:14px; font-weight:800; } .setting-row label { line-height:1.4; } .setting-row small { display:block; font-weight:500; font-size:11px; color:#899581; margin-top:4px; } .setting-row input[type=checkbox] { width:23px; height:23px; accent-color:#548363; } .pause-img { display:block; width:180px; height:190px; object-fit:contain; margin:auto; } .pause-content { text-align:center; } .sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); } .skip { position:absolute; top:-80px; left:10px; padding:10px; background:white; z-index:99; } .skip:focus { top:10px; } .calm .journey-strip,.calm .side-note { visibility:hidden; } .calm * { transition:none!important; animation:none!important; }
@media(min-width:1500px) { main { padding-top:38px; } .task-card { padding:30px 48px; } .number-slot { min-height:142px; } }
@media(max-width:1100px) { .sidebar { width:195px; padding:28px 14px 20px; } .brand { font-size:16px; gap:9px; padding:0 5px; } .nav-item { font-size:12px; gap:9px; } main { width:calc(100% - 195px); padding:26px; } .operation { padding:12px 10px; gap:8px; font-size:12px; } .operation.selected { padding:11px 9px; } .operation .op-symbol { width:33px; height:36px; font-size:26px; } .task-card { padding:23px; } .equation-sign { font-size:28px; } .number-slot { min-height:113px; } .work-bottom { flex-wrap:wrap; } }
@media(max-width:800px) { body { display:block; } .sidebar { width:100%; height:auto; position:static; padding:17px 20px 12px; border-right:0; border-bottom:1px solid var(--line); display:block; } .brand { font-size:15px; } .brand br { display:none; } .brand strong { margin-left:4px; } .brand-mark { width:30px; height:34px; font-size:24px; border-radius:10px; } .nav-label,.side-note,.settings-link { display:none; } .sidebar nav { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:15px; } .nav-item { padding:10px 8px; min-height:46px; justify-content:center; gap:8px; font-size:11px; border-radius:11px; } .nav-icon { width:25px; height:27px; font-size:20px; border-radius:8px; } .nav-arrow { display:none; } main { width:100%; padding:24px; } .topbar { margin-bottom:25px; } .number-slot { width:clamp(80px,15vw,130px); font-size:clamp(35px,7vw,58px); } .clock-layout { grid-template-columns:1fr 1fr; gap:16px; } }
@media(max-width:540px) { .sidebar { padding:14px 12px 10px; } .nav-item { flex-direction:column; gap:3px; min-height:57px; padding:7px 3px; font-size:10px; } main { padding:19px 14px; } .welcome { font-size:16px; } .welcome small { font-size:11px; } .top-controls { gap:7px; } .icon-button { width:35px; height:35px; font-size:17px; } .star-counter { min-height:35px; padding:5px 10px; gap:6px; } .star-counter span { font-size:18px; } .section-head { align-items:flex-start; flex-direction:column; margin-bottom:18px; } h1 { font-size:30px; } .intro { font-size:12px; } .level-wrap { display:flex; align-items:center; gap:10px; } select { min-height:39px; font-size:11px; } .operation-grid { gap:7px; margin-bottom:20px; } .operation { flex-direction:column; gap:5px; text-align:center; padding:10px 5px; min-height:78px; font-size:11px; border-radius:13px; } .operation.selected { padding:9px 4px; } .operation small { font-size:8px; } .operation .op-symbol { width:30px; height:30px; font-size:25px; border-radius:9px; } .round-line { font-size:10px; } .progress-dots { gap:3px; } .progress-dots span { width:22px; } .task-card { border-radius:21px; padding:17px 14px; } .task-badge { font-size:8px; padding:6px 8px; letter-spacing:.8px; } .link-button { font-size:10px; padding:8px 4px; } .task-card h2 { font-size:20px; margin-top:19px; } .instruction { font-size:11px; } .equation { gap:7px; padding:24px 0 20px; } .number-slot { width:calc((100vw - 120px)/3); max-width:105px; min-height:93px; border-radius:14px; font-size:clamp(27px,8vw,40px); letter-spacing:-1px; } .equation-sign { font-size:24px; } .slot-label { font-size:7px; } .choices { gap:8px; } .choice { min-height:62px; font-size:25px; border-radius:12px; } .answer-prompt { font-size:8px; margin:0 0 12px; } .keypad { grid-template-columns:repeat(4,1fr); } .keypad button { min-height:54px; font-size:23px; } .work-bottom { margin-top:13px; padding-top:13px; gap:14px; } .helper-mini img { width:44px; height:48px; } .helper-mini strong { font-size:11px; } .helper-mini span { font-size:10px; } .pill-button { min-height:39px; padding:8px 10px; font-size:11px; } .actions { width:100%; } .actions .primary { width:100%; } .primary { min-height:49px; font-size:14px; padding:12px 25px; } .journey-strip { gap:11px; padding-top:18px; } .journey-strip .small-star { width:39px; height:39px; font-size:25px; border-radius:12px; } .journey-strip p { font-size:10px; } .journey-strip strong { font-size:11px; } .journey-strip .dots-line { display:none; } .journey-strip .little-dragon { margin-left:auto; width:41px; height:45px; } footer { margin-top:22px; font-size:9px; } .tabs { gap:8px; } .tab { flex:1; padding:10px 9px; min-height:43px; font-size:11px; border-radius:11px; } .tab.selected { padding:9px 8px; } .clock-layout { grid-template-columns:1fr; gap:20px; } .clock-svg { max-width:285px; } .clock-read-choices .choice { min-height:74px; font-size:24px; } .clock-read-choices { max-width:360px; } .clock-controls { max-width:340px; width:100%; margin:auto; } .clock-instruction { text-align:center; } .stars-hero { gap:16px; padding:22px 17px; } .stars-hero img { width:130px; height:150px; } .stars-hero h2 { font-size:49px; } .stats-grid { gap:8px; } .stat { padding:17px 8px; border-radius:14px; } .stat p { font-size:10px; } .complete { padding:15px 0; } .complete h2 { font-size:25px; } .units-equation .number-slot { min-width:85px; font-size:29px; } .unit-label { font-size:17px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }

.number-slot:disabled { opacity:1; cursor:default; }

.number-slot.long-number { font-size:clamp(27px,3.2vw,43px); letter-spacing:-1px; }
@media (min-width:801px) and (max-height:850px) {
  main { padding-top:20px; }
  .topbar { margin-bottom:20px; }
  .section-head { margin-bottom:17px; }
  h1 { font-size:31px; margin:6px 0; }
  .operation { min-height:62px; padding-top:9px; padding-bottom:9px; }
  .operation.selected { padding-top:8px; padding-bottom:8px; }
  .operation-grid { margin-bottom:15px; }
  .round-line { margin-bottom:12px; }
  .task-card { padding-top:18px; padding-bottom:18px; }
  .task-card h2 { margin-top:13px; font-size:20px; }
  .equation { padding-top:20px; padding-bottom:17px; }
  .number-slot { min-height:105px; }
  .choice { min-height:61px; }
  .input-tools { margin-top:5px; }
  .work-bottom { padding-top:12px; margin-top:12px; }
  .visual-summary { padding-top:4px; }
  .journey-strip { padding-top:14px; }
}
@media(max-width:540px) { .number-slot.long-number { font-size:29px; } .unit-label { font-size:15px; } }

/* Five tactile learning buttons stay in reach on every screen. */
:root { --sidebar-size:234px; }
main { padding-bottom:calc(142px + env(safe-area-inset-bottom, 0px)); }
html { scroll-padding-bottom:calc(140px + env(safe-area-inset-bottom, 0px)); }
.learning-dock { position:fixed; z-index:30; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); left:calc(var(--sidebar-size) + (100% - var(--sidebar-size)) / 2); transform:translateX(-50%); width:min(740px, calc(100% - var(--sidebar-size) - 40px)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0; padding:12px; background:#fffef8; border:1px solid #dce6d8; border-radius:25px; box-shadow:0 8px 35px #294c3830; }
.dock-button { --dock-depth:#559974; --dock-ink:#1b503b; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:79px; padding:5px 6px 8px; border:0; border-bottom:6px solid var(--dock-depth); border-radius:17px; color:var(--dock-ink); font-weight:900; }
.dock-plus { background:#87d3aa; }
.dock-minus { background:#f3a094; --dock-depth:#ce776b; --dock-ink:#743c35; }
.dock-multiply { background:#b6a7ee; --dock-depth:#8c7bbc; --dock-ink:#4b3a77; }
.dock-divide { background:#90c7ed; --dock-depth:#629abe; --dock-ink:#244f6a; }
.dock-clock { background:#f7d471; --dock-depth:#c4a343; --dock-ink:#70551e; }
.dock-symbol { display:grid; place-items:center; height:36px; font-size:38px; line-height:1; font-weight:800; }
.dock-symbol svg { width:34px; height:34px; }
.dock-label { font-size:13px; line-height:1.2; }
.dock-button.selected { outline:3px solid var(--dock-ink); outline-offset:2px; }
.dock-button::after { content:'✓'; position:absolute; right:8px; top:5px; font-size:12px; opacity:0; }
.dock-button.selected::after { opacity:1; }
.dock-button:active:not(:disabled) { transform:translateY(4px) scale(.98); }
.clock-svg { touch-action:auto; }
.clock-svg.interactive { touch-action:none; }
.calm .dock-button:active:not(:disabled) { transform:none; }
@media(max-width:1100px) { :root { --sidebar-size:195px; } }
@media(max-width:800px) { :root { --sidebar-size:0px; } .learning-dock { bottom:0; left:50%; width:100%; gap:10px; padding:12px max(12px,env(safe-area-inset-left, 0px)) calc(11px + env(safe-area-inset-bottom, 0px)); border-radius:22px 22px 0 0; border-left:0; border-right:0; border-bottom:0; } }
@media(max-width:540px) { .learning-dock { gap:8px; padding:10px max(9px,env(safe-area-inset-left, 0px)) calc(9px + env(safe-area-inset-bottom, 0px)); } .dock-button { min-height:69px; border-bottom-width:5px; border-radius:13px; padding:4px 2px 7px; } .dock-symbol { font-size:32px; height:31px; } .dock-symbol svg { width:28px; height:28px; } .dock-label { font-size:11px; } .dock-button::after { top:3px; right:5px; font-size:10px; } .dock-button.selected { outline-width:2px; outline-offset:2px; } main { padding-bottom:calc(124px + env(safe-area-inset-bottom, 0px)); } }
@media(prefers-reduced-motion:reduce) { .dock-button:active:not(:disabled) { transform:none; } }

/* Learn a complete row, then practise a single task. */
.math-tabs { margin-bottom:18px; }
.table-context { background:#ece6fa; color:#705a9e; border-radius:12px; padding:10px 16px; font-size:13px; font-weight:900; margin:0 0 18px; }
.table-numbers { display:grid; grid-template-columns:repeat(12,1fr); gap:7px; margin:22px auto 18px; max-width:720px; }
.table-numbers button { min-height:47px; border:1px solid #d9d1eb; border-bottom:3px solid #d0c5e3; border-radius:12px; background:#f3eefb; color:#8170a7; font-size:22px; font-weight:900; }
.table-numbers button.selected { background:#b6a7ee; border-color:#9280c2; color:#4b3a77; outline:2px solid #736098; outline-offset:2px; }
.table-rows { max-width:650px; margin:24px auto 10px; display:grid; gap:9px; }
.table-row { display:flex; align-items:center; gap:15px; padding:12px 15px; border:1px solid #e5e0ed; border-radius:15px; background:#fffefa; }
.table-row:nth-child(even) { background:#f6f2fc; }
.table-row-number { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:#eee9f6; color:#998bac; font-size:10px; flex-shrink:0; }
.table-equation { font-size:27px; font-weight:900; letter-spacing:.3px; flex:1; }
.table-equation span { color:#a392c2; margin:0 6px; }
.table-result { min-width:64px; min-height:48px; padding:5px 8px; border:1px dashed #b1a1ce; border-radius:10px; background:#eee7fb; color:#765ab0; font-weight:900; font-size:28px; }
.table-result.revealed { border-style:solid; background:#ebe3fb; }
.table-practice { border:0; background:#e6f1df; color:#618153; font-size:12px; font-weight:900; border-radius:11px; min-height:43px; padding:10px 14px; }
.table-start { margin-top:23px; padding-top:18px; border-top:1px solid #e6ece0; display:flex; align-items:center; gap:15px; }
.table-start img { width:66px; height:73px; object-fit:contain; }
.table-start p { color:#849279; font-size:12px; line-height:1.7; flex:1; margin:0; }
.table-start strong { color:#617b58; }
/* Place-value cells, with a fixed zero for tens partial products. */
.column-board { margin:26px auto; width:fit-content; max-width:100%; }
.column-row { display:grid; grid-template-columns:30px repeat(var(--column-count), minmax(0,70px)); gap:8px; justify-content:end; align-items:center; padding:5px 0; }
.column-number,.column-cell { min-width:0; height:78px; display:grid; place-items:center; font-size:51px; font-weight:900; color:#425b49; border-radius:13px; }
.column-symbol { font-size:30px; color:#9987bc; text-align:center; }
.column-rule { border-bottom:3px solid #9d8eb8; padding-bottom:13px; margin-bottom:12px; }
.column-cell { background:#f2eef9; border:1px solid #d9cee8; border-bottom:4px solid #d2c6e4; color:#8770ae; cursor:pointer; font-size:42px; }
.column-cell.active { outline:3px solid #9174bf; outline-offset:2px; background:#e6daf6; color:#654591; }
.column-cell.correct { outline:none; background:#e4f1de; border-color:#a7c192; color:#477246; }
.column-field-label { margin:13px 0 3px 38px; color:#9a8aa9; font-size:11px; font-weight:800; }
.column-final { padding-top:13px; border-top:3px solid #9d8eb8; margin-top:14px; }
.column-final .column-cell { background:#eef5e7; border-color:#c5d7b6; color:#769466; }
.column-final .column-cell.active { outline-color:#7f9b69; background:#e1eed3; color:#497044; }
.column-operands .blank { visibility:hidden; }
.shift-zero { color:#b4a4c7; background:#f6f2fa; font-size:37px; border:1px dashed #ddd3e9; }
.division-question { font-size:36px; font-weight:900; text-align:center; padding:12px 0; }
.written-keypad { max-width:440px; grid-template-columns:repeat(6,1fr); }
@media(max-width:540px) {
  .table-numbers { grid-template-columns:repeat(6,1fr); gap:8px; }
  .table-numbers button { min-height:46px; font-size:20px; }
  .table-row { gap:8px; padding:10px 8px; }
  .table-row-number { width:20px; height:20px; font-size:9px; }
  .table-equation { font-size:20px; letter-spacing:0; }
  .table-equation span { margin:0 1px; }
  .table-result { min-width:45px; min-height:45px; font-size:23px; }
  .table-practice { font-size:10px; padding:8px; min-height:43px; }
  .table-start { flex-wrap:wrap; gap:10px; }
  .table-start img { width:47px; height:53px; }
  .table-start .primary { width:100%; }
  .table-start p { font-size:11px; }
  .tables-card .task-top { flex-wrap:wrap; }
  .column-row { grid-template-columns:20px repeat(var(--column-count),minmax(0,52px)); gap:6px; }
  .column-number,.column-cell { height:63px; font-size:37px; border-radius:10px; }
  .column-cell { font-size:31px; }
  .column-symbol { font-size:24px; }
  .column-field-label { margin-left:26px; }
  .written-keypad { grid-template-columns:repeat(4,1fr); }
  .written-card .answer-prompt { line-height:1.8; font-size:9px; letter-spacing:.8px; }
  .math-tabs .tab { font-size:11px; padding-left:8px; padding-right:8px; }
}

.language-switch { display:flex; gap:3px; padding:3px; border:1px solid #d8e3d6; background:#fffef8; border-radius:13px; flex-shrink:0; }
.language-switch button { border:0; border-radius:9px; background:transparent; color:#82917c; padding:7px 10px; min-width:39px; min-height:35px; font-size:12px; font-weight:900; }
.language-switch button.selected { background:#367a60; color:white; box-shadow:0 2px 0 #285c49; }
.welcome { min-width:0; }
@media(max-width:540px) { .language-switch { padding:2px; border-radius:11px; } .language-switch button { min-width:31px; min-height:31px; font-size:11px; padding:5px 6px; } .top-controls { gap:6px; } }
@media(max-width:400px) { .topbar { flex-wrap:wrap; gap:12px; } .welcome { flex-basis:100%; } .top-controls { width:100%; justify-content:flex-end; } .language-switch { margin-right:auto; } }

/* A deliberate language choice starts every visit, with both classroom friends. */
.language-welcome { max-width:440px; padding:26px; text-align:center; }
.welcome-friends { display:flex; justify-content:center; gap:12px; margin:0 0 12px; }
.welcome-friends img { width:110px; height:125px; object-fit:contain; }
.language-welcome h2 { font-size:25px; line-height:1.35; }
.language-welcome h2 span { display:block; }
.language-welcome p { color:#567361; margin:12px 0 22px; }
.welcome-language-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.welcome-language-choices button { display:grid; gap:8px; padding:18px 10px; min-height:88px; border:2px solid #d3c9f1; border-bottom-width:5px; border-radius:17px; background:#ede7fc; color:#574087; }
.welcome-language-choices button[data-start-language="de"] { background:#e2f2e7; color:#285f48; border-color:#a8ceb5; }
.welcome-language-choices strong { font-size:21px; }
.welcome-language-choices span { font-size:12px; }
.welcome-language-choices button:active { transform:translateY(2px); }
@media(max-width:540px) { .topbar { flex-wrap:wrap; gap:12px; } .welcome { flex-basis:100%; } .top-controls { width:100%; justify-content:flex-end; } .language-switch { margin-right:auto; } }
@media(max-width:350px) { .language-welcome { padding:20px; } .welcome-friends img { width:90px; height:105px; } .welcome-language-choices strong { font-size:18px; } }

/* Larger, clearer reading sizes and six generously sized learning controls. */
body { font-size:17px; }
.intro,.instruction,.clock-instruction,.clock-value,.clock-legend,.slider-label,.hint-panel p { font-size:19px; line-height:1.7; color:#3e5e4b; }
.nav-item { font-size:16px; }
.nav-label,.eyebrow,.task-badge,.answer-prompt,.round-line,.column-field-label,.privacy-note { font-size:14px; line-height:1.6; color:#4f6556; letter-spacing:.6px; }
.welcome small,.helper-mini strong,.helper-mini span,.journey-strip p,.journey-strip strong,.table-start p,.table-context { font-size:16px; line-height:1.6; color:#4e6954; }
.primary,.pill-button,.tab,.link-button,.language-switch button,select,.setting-row { font-size:17px; }
.primary,.pill-button,.tab,select { min-height:48px; }
.task-card h2 { font-size:28px; }
.feedback { font-size:20px; line-height:1.5; }
.clock-read-choices .choice { font-size:34px; min-height:125px; }
.clock-read-choices .choice small { display:flex; flex-direction:column; gap:3px; color:inherit; }
.clock-read-choices .time-or { font-size:17px; font-weight:700; }
.clock-read-choices .second-time { font-size:32px; font-weight:900; color:#314e45; }
.clock-legend i { width:15px; height:15px; }
.target-time small,.hand-select button,.adjustment span { font-size:17px; }
.hint-panel { max-width:760px; }
.learning-dock { grid-template-columns:repeat(6,minmax(0,1fr)); width:min(920px,calc(100% - var(--sidebar-size) - 40px)); }
.dock-label { font-size:15px; overflow-wrap:anywhere; }
.dock-problems { background:#f6b77b; --dock-depth:#cf8a49; --dock-ink:#623d20; }
.sidebar nav { gap:9px; }
.stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stat p { font-size:15px; }
dialog { max-width:600px; max-height:calc(100dvh - 36px); overflow:auto; }
dialog p,dialog li { font-size:20px; line-height:1.6; color:#3e5e4b; }
.rule-reminder { display:flex; align-items:center; gap:16px; padding:18px; margin:16px 0 24px; background:#f1ebfc; border:2px solid #c6b5e0; border-radius:24px 24px 24px 6px; color:#3e315b; }
.rule-reminder img { width:65px; height:74px; object-fit:contain; flex-shrink:0; }
.rule-reminder div { flex:1; min-width:0; }
.rule-reminder strong { font-size:20px; }
.rule-reminder p { font-size:18px; line-height:1.6; margin:7px 0 0; }
.rule-reminder button { flex-shrink:0; border-color:#bcabd5; background:#fffafc; color:#513a74; }
.rule-dialog-head { display:flex; gap:16px; align-items:center; padding-right:15px; }
.rule-dialog-head img { width:75px; height:85px; object-fit:contain; }
.rule-dialog-head p { font-size:28px; font-weight:900; margin:4px 0; }
.rule-overview { border:1px solid #d6cbea; border-radius:14px; padding:14px; margin:16px 0; background:#f5f0fd; }
.rule-overview summary { cursor:pointer; font-size:19px; font-weight:900; }
.rule-overview li { margin:10px 0; }
.rule-example-actions,.rule-navigation { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.rule-example-actions { justify-content:flex-start; }
.rule-progress { font-weight:800; margin-bottom:8px; }
.rule-step { background:#f1f7eb; padding:18px; border-radius:18px; }
.rule-step h3 { font-size:23px; margin:0 0 12px; }
.rule-step p { margin:8px 0; }
.explain-equation { font-size:clamp(22px,4vw,33px); font-weight:900; text-align:center; padding:15px 0; overflow-wrap:anywhere; }
.explain-board { width:fit-content; max-width:100%; margin:15px auto 4px; }
.explain-row { display:grid; grid-template-columns:22px repeat(var(--places),minmax(0,65px)); gap:5px; align-items:center; text-align:center; padding:4px 0; }
.explain-row b { border-radius:8px; padding:7px 3px; font-size:28px; font-variant-numeric:tabular-nums; }
.explain-row .focus-place { background:#f8df94; outline:2px solid #b78a2d; }
.explain-head b { font-size:16px; color:#3c6250; }
.explain-carry b { font-size:17px; color:#684795; }
.explain-bottom { border-bottom:3px solid #64836c; }
.explain-result b { background:#deefd9; }
.rule-navigation { margin-top:20px; }
.problem-filter { display:flex; gap:14px; align-items:center; font-weight:800; margin:0 0 22px; }
.problem-filter select { max-width:300px; }
.story-icon { font-size:48px; text-align:center; }
.story-text { font-size:clamp(22px,2.5vw,28px); line-height:1.7; max-width:750px; margin:22px auto; color:#2f4c3b; }
.story-text mark { background:#f7e6ad; padding:1px 6px; border-radius:7px; font-weight:900; color:inherit; }
.story-plan { font-size:18px; line-height:1.7; background:#edf3f8; border-radius:13px; padding:15px; color:#365b73; }
.story-choices { max-width:650px; }
.story-rule-link { text-align:center; margin-top:20px; }
@media(max-width:1100px) { .rule-reminder { flex-wrap:wrap; gap:10px; } .rule-reminder button { margin-left:75px; } .nav-item { font-size:14px; } }
@media(max-width:800px) { .learning-dock { width:100%; } .sidebar nav { grid-template-columns:repeat(5,minmax(0,1fr)); } .nav-item { font-size:14px; } .nav-item .nav-text { overflow-wrap:anywhere; } .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  .learning-dock { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:9px; }
  .dock-button { min-height:72px; }
  .dock-label { font-size:15px; }
  main { padding-bottom:calc(215px + env(safe-area-inset-bottom,0px)); }
  html { scroll-padding-bottom:calc(215px + env(safe-area-inset-bottom,0px)); }
  .sidebar nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .nav-item { min-height:58px; font-size:14px; }
  .rule-reminder { padding:14px; }
  .rule-reminder strong { font-size:19px; }
  .rule-reminder p { font-size:17px; }
  .rule-reminder img { width:52px; height:61px; }
  .rule-reminder button { margin-left:0; width:100%; }
  .intro,.instruction,.clock-instruction,.clock-value,.clock-legend,.slider-label,.hint-panel p { font-size:18px; }
  .primary,.pill-button,.tab,.link-button,select { font-size:16px; }
  .tabs { flex-wrap:wrap; }
  .choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .choice { font-size:31px; min-height:76px; }
  .choice[style] { font-size:22px!important; overflow-wrap:anywhere; }
  .number-slot.long-number { font-size:32px; }
  .equation { gap:4px; }
  .clock-read-choices .choice { font-size:31px; }
  .clock-read-choices .second-time { font-size:30px; }
  .table-row { flex-wrap:wrap; }
  .table-equation { font-size:24px; }
  .table-practice { font-size:15px; }
  .table-start p { font-size:16px; }
  .rule-navigation .primary { padding:12px 15px; }
  dialog { padding:22px 18px; }
  .explain-row { grid-template-columns:17px repeat(var(--places),minmax(0,50px)); gap:3px; }
  .explain-row b { font-size:25px; }
  .explain-head b,.explain-carry b { font-size:15px; }
  .rule-step { padding:13px; }
  .rule-dialog-head h2 { font-size:23px; }
  .story-plan { font-size:17px; }
  .task-top { flex-wrap:wrap; gap:10px; }
}

/* Keep secondary labels readable when older compact selectors apply. */
.level-wrap,.slot-label,.table-row-number,footer { font-size:13px; line-height:1.5; }
.side-note strong,.side-note p,.setting-row small { font-size:16px; line-height:1.6; }
.math-tabs .tab { font-size:17px; }
.written-card .answer-prompt { font-size:15px; line-height:1.6; }
@media(max-width:600px) { .math-tabs .tab { font-size:16px; } .level-wrap { flex-wrap:wrap; } .topbar { flex-wrap:wrap; gap:15px; } .table-start img { width:60px; height:68px; } .welcome-friends img { width:95px; height:110px; } }

/* Geography: one highlighted place and one answer step at a time. */
.learning-dock { grid-template-columns:repeat(7,minmax(0,1fr)); width:min(1080px,calc(100% - var(--sidebar-size) - 40px)); }
.dock-geography { background:#7ed5d0; --dock-depth:#469e99; --dock-ink:#194f50; }
.geography-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(270px,1fr); gap:26px; align-items:start; }
.geo-map-panel { min-width:0; }
.geography-map { width:100%; height:auto; display:block; background:#e7f2f7; border:2px solid #bed6df; border-radius:20px; margin:12px 0; }
.geo-area { cursor:pointer; }
.geo-area.selected path { stroke:#243e58; stroke-width:4; }
.geo-area:focus { outline:none; }
.geo-area:focus path { stroke:#5f3285; stroke-width:5; }
.geo-number-disc { fill:#fffef8; stroke:#48666b; stroke-width:1.5; }
.geo-number { font-size:20px; font-weight:900; fill:#254453; pointer-events:none; }
.geo-area.selected .geo-number-disc { fill:#f9d874; stroke:#344f59; stroke-width:3; }
.geo-area.mastered .geo-number-disc { fill:#aee2ad; }
.capital-marker circle { fill:#ffe34d; stroke:#594423; stroke-width:3; }
.geo-map-controls { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; font-weight:900; font-size:20px; }
.geo-rule-cloud { display:flex; align-items:center; gap:15px; background:#e4f5f0; border:2px solid #97c9bb; border-radius:24px 24px 24px 6px; padding:16px; margin-bottom:24px; }
.geo-rule-cloud img { width:70px; height:80px; object-fit:contain; }
.geo-rule-cloud p { font-size:20px; line-height:1.6; margin:0; }
.map-legend,.map-credit { font-size:14px; color:#3d5d65; line-height:1.6; margin:8px 0; }
.geo-picker { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0 0; font-size:17px; font-weight:800; }
.geo-picker select { max-width:100%; }
.geo-question { min-width:0; outline:none; }
.geo-phase { border:2px solid #d6e3d1; border-radius:20px; padding:18px; margin:10px 0 20px; }
.geo-phase.active { background:#f7fbed; border-color:#acc49a; }
.geo-phase.locked { color:#5c6b62; background:#f2f4ee; }
.geo-phase h2 { font-size:24px; text-align:left; margin:8px 0 18px; }
.geo-phase p,.geo-complete p { font-size:20px; line-height:1.6; }
.phase-number { display:inline-grid; place-items:center; min-width:37px; height:37px; background:#d6e8cb; color:#284a39; border-radius:12px; font-size:22px; font-weight:900; }
.geo-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.geo-choices .choice { font-size:21px; min-height:78px; line-height:1.4; overflow-wrap:anywhere; color:#344d41; }
.geo-actions { flex-wrap:wrap; justify-content:flex-end; margin-top:18px; }
.geo-study-card,.geo-complete { background:#eef4ff; border:2px solid #bccce8; border-radius:22px; padding:24px; }
.geo-study-card p { font-size:20px; line-height:1.6; }
.geo-study-card>strong { display:block; font-size:34px; color:#2b4d76; }
.geo-sources { margin-top:26px; padding-top:16px; border-top:1px solid #d8e5de; }
.geo-sources summary { font-size:16px; font-weight:800; cursor:pointer; }
.geo-sources p { font-size:15px; line-height:1.6; color:#456355; }
.boundary-credit { display:block; font-size:13px; line-height:1.6; margin-top:6px; }
.stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:1100px) { .geography-layout { grid-template-columns:1fr; } .geo-question { max-width:700px; width:100%; margin:auto; } }
@media(max-width:800px) { .learning-dock { width:100%; } .sidebar nav { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
 .learning-dock { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
 .dock-geography { grid-column:1/-1; flex-direction:row; gap:14px; min-height:52px; }
 .dock-geography .dock-label { font-size:18px; }
 main { padding-bottom:calc(282px + env(safe-area-inset-bottom,0px)); }
 html { scroll-padding-bottom:calc(282px + env(safe-area-inset-bottom,0px)); }
 .geo-rule-cloud { padding:13px; gap:10px; }
 .geo-rule-cloud img { width:50px; height:60px; }
 .geo-rule-cloud p { font-size:18px; }
 .geo-phase { padding:14px; }
 .geo-choices .choice { font-size:20px; }
 .geo-map-controls .pill-button { width:100%; }
 .geo-actions .primary { width:100%; }
 .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.problem-diagram { display:block; width:min(100%,620px); margin:20px auto; }
.problem-diagram text { font-size:31px; font-weight:900; fill:#355440; }
.problem-diagram .diagram-note { font-size:18px; font-weight:600; }
.explain-board { width:min(100%,400px); }
.explain-row { grid-template-columns:20px repeat(var(--places),minmax(0,1fr)); }

.geo-label-line { stroke:#48666b; stroke-width:1.4; pointer-events:none; }
.geo-area.selected .geo-label-line { stroke:#243e58; stroke-width:2; }

/* Keep the exercise and hand-free memory clock together. */
.clock-layout.with-clock-hints { grid-template-columns:minmax(0,1fr); }
.clock-hint-pair { display:grid; grid-template-columns:repeat(2,minmax(230px,1fr)); gap:20px; overflow-x:auto; padding:8px 4px 16px; }
.clock-hint-pair figure { margin:0; min-width:0; }
.clock-hint-pair figcaption { text-align:center; font-size:20px; font-weight:900; line-height:1.4; color:#44654f; margin-bottom:16px; }
.clock-hint-pair figure:last-child figcaption { color:#2c5149; }
.clock-hint-pair .clock-svg { max-width:360px; }
@media(max-width:540px) { .clock-hint-pair { gap:12px; grid-template-columns:repeat(2,minmax(230px,1fr)); } .clock-hint-pair figcaption { font-size:18px; } }

/* A separate table reference sits directly beneath the multiplication control. */
.learning-dock { align-items:start; }
.dock-operation-group { display:flex; flex-direction:column; min-width:0; gap:0; }
.dock-tables { min-height:50px; padding:8px 4px; border:2px solid #b8a2d1; border-bottom-width:4px; border-radius:13px; background:#f2eafa; color:#4e336a; font-size:15px; line-height:1.25; font-weight:900; }
.dock-tables:focus-visible { outline:3px solid #523777; outline-offset:3px; }
main { padding-bottom:calc(225px + env(safe-area-inset-bottom,0px)); }
html { scroll-padding-bottom:calc(225px + env(safe-area-inset-bottom,0px)); }
.round-line { flex-wrap:wrap; gap:12px; }
.progress-dots.long-round { gap:4px; flex-wrap:wrap; }
.progress-dots.long-round span { width:32px; height:28px; font-size:14px; display:grid; place-items:center; }
.round-checkpoint { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border-radius:14px; background:#e6f1dc; color:#375d3e; font-size:18px; }
dialog.tables-reference-dialog { max-width:960px; width:calc(100% - 32px); }
.table-reference-picker { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; }
.table-reference-picker button { min-width:48px; min-height:48px; border:2px solid #b5a0cb; border-radius:12px; background:#f5eefb; color:#4e336a; font-size:19px; font-weight:900; padding:8px 12px; }
.table-reference-picker button[aria-pressed="true"] { background:#d7c7e9; border-color:#69488a; }
.operation-reference-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-bottom:24px; }
.operation-reference-table { border:2px solid #d9cbe9; border-radius:18px; background:#fcf9ff; padding:16px; }
.operation-reference-table h3 { margin:0 0 12px; color:#583780; font-size:26px; }
.operation-reference-table p { margin:0; display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid #eee5f6; font-size:22px; line-height:1.4; font-variant-numeric:tabular-nums; }
.operation-reference-table strong { color:#583780; }
@media(max-width:600px) { main { padding-bottom:calc(355px + env(safe-area-inset-bottom,0px)); } html { scroll-padding-bottom:calc(355px + env(safe-area-inset-bottom,0px)); } .dock-tables { min-height:48px; font-size:14px; } .round-checkpoint { flex-wrap:wrap; } }

.clock-hint-pair figcaption small { display:block; font-size:16px; font-weight:600; margin-top:6px; }
.memory-clock-key { text-align:center; padding-top:10px; }
.memory-clock-key p { margin:5px 0; font-size:16px; font-weight:900; line-height:1.5; }
.memory-clock-key .memory-minutes { color:#356f9f; }
.memory-clock-key .memory-hours { color:#2c5149; }
.memory-clock-key .memory-afternoon { color:#a94e39; }

.geo-hint-letter { font-size:1.4em; font-weight:900; color:#254e47; }

/* Expanding the bottom-anchored dock raises its main row and reveals tables below. */
.dock-tables-slot { display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .18s ease,opacity .12s ease; }
.dock-tables-inner { min-height:0; overflow:hidden; }
.dock-tables { width:100%; margin-top:8px; }
.dock-operation-group.touch-tables-open .dock-tables-slot,
.dock-operation-group:has(:focus-visible) .dock-tables-slot { grid-template-rows:1fr; opacity:1; visibility:visible; }
@media(hover:hover) and (pointer:fine) {
  .dock-operation-group:hover .dock-tables-slot { grid-template-rows:1fr; opacity:1; visibility:visible; }
}
.calm .dock-tables-slot { transition:none; }
@media(prefers-reduced-motion:reduce) { .dock-tables-slot { transition:none; } }

.dock-add-group .dock-tables { background:#eaf7ee; border-color:#85b798; color:#245a3b; }
.dock-sub-group .dock-tables { background:#fff0eb; border-color:#d79c8a; color:#834a38; }
.dock-div-group .dock-tables { background:#eaf4fc; border-color:#88b4d3; color:#345e7b; }

.exercise-report-link { text-align:right; margin:12px 0 4px; }
.exercise-report-link button,.reports-inbox-link { border:0; background:transparent; color:#586e65; font-size:14px; padding:10px 4px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.reports-inbox-link { display:block; margin-top:8px; }
.table-row-report { border:0; background:transparent; color:#647969; font-size:17px; width:34px; min-height:36px; cursor:pointer; padding:2px; }
.table-row { grid-template-columns:25px minmax(0,1fr) 85px 75px 34px; }
.operation-reference-table p { display:grid; grid-template-columns:minmax(0,1fr) auto 28px; gap:6px; align-items:center; }
.operation-reference-table .table-row-report { width:28px; }
.report-dialog { max-width:850px; width:calc(100% - 32px); }
.report-exercise { padding:14px; border:1px solid #d6dfd5; background:#f4f7ef; border-radius:12px; font-size:20px; line-height:1.5; white-space:pre-wrap; }
.report-label { display:block; font-weight:800; font-size:18px; margin:16px 0 8px; }
.report-dialog textarea { width:100%; border:2px solid #b9cbbc; border-radius:12px; padding:12px; font-family:inherit; font-size:19px; line-height:1.5; resize:vertical; }
.report-actions,.report-filters { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.report-status { min-height:24px; font-size:17px!important; color:#42674f; }
.report-entry { padding:18px; margin:16px 0; border:1px solid #d6dfd5; border-radius:16px; background:#fffefa; }
.report-entry-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; font-size:20px; line-height:1.5; }
.report-status-tag { font-size:14px; background:#e5efdf; padding:4px 8px; border-radius:9px; white-space:nowrap; }
.report-entry small { display:block; margin-top:8px; color:#526657; }
.report-message { white-space:pre-wrap; overflow-wrap:anywhere; }
.report-entry pre { overflow:auto; font-size:14px; line-height:1.5; max-height:260px; }
.report-entry summary { cursor:pointer; font-size:16px; font-weight:800; }
.report-receipt { font-size:14px!important; overflow-wrap:anywhere; }
.report-filters button[aria-pressed="true"] { background:#dfedd8; border-color:#809f86; }
@media(max-width:540px) { .table-row { grid-template-columns:20px minmax(0,1fr) 58px 54px 28px; gap:4px; } .table-row-report { width:28px; } .report-entry-top { flex-direction:column; } }


/* Compact exercise pages: useful controls first, explanations on request. */
main { margin:0 auto; align-self:flex-start; }
.topbar { margin-bottom:18px; }
.sidebar nav { margin-top:26px; }
.settings-link { margin-top:auto; }
.activity-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.activity-toolbar .tabs { flex:1 1 auto; margin:0; }
.activity-toolbar .level-wrap { gap:3px; }
.activity-toolbar .rule-shortcut { flex-shrink:0; }
.compact-level { float:right; margin:0 0 12px 16px; }
.compact-level .level-wrap { gap:3px; }
.round-line,.task-card,.stars-hero { clear:both; }
.round-line { margin-bottom:10px; }
.task-card h2 { font-size:24px; margin-top:14px; }
.task-card .instruction { font-size:16px; line-height:1.5; }
.column-board { margin:18px auto; }
.work-bottom { margin-top:12px; padding-top:12px; }
.helper-mini img { width:42px; height:46px; }
footer { margin-top:12px; }
@media(max-width:700px) {
  .compact-level { float:none; margin:0 0 10px; }
  .compact-level .level-wrap { display:flex; align-items:center; gap:8px; }
  .activity-toolbar .tabs { flex-basis:100%; }
  .activity-toolbar .level-wrap { display:flex; align-items:center; gap:8px; margin-right:auto; }
  .topbar { margin-bottom:14px; }
  .task-card h2 { font-size:22px; }
}


/* Reveal the mode buttons above the exercise and keep reports inside its card. */
.activity-toolbar { scroll-margin-top:40px; margin-bottom:10px; }
.rule-reminder.compact-reminder { gap:10px; padding:8px 12px; margin:0 0 12px; border-width:1px; border-radius:14px; flex-wrap:nowrap; }
.compact-reminder img { width:36px; height:42px; }
.compact-reminder strong { flex:1; min-width:0; font-size:16px; line-height:1.35; }
.compact-reminder button { margin:0; min-height:40px; font-size:14px; width:auto; }
.task-card > .exercise-report-link { margin:6px 0 0; }
.task-card > .exercise-report-link button { padding:6px 0; font-size:13px; }
@media(max-width:540px) {
  .rule-reminder.compact-reminder { padding:8px; gap:8px; }
  .compact-reminder strong { font-size:14px; }
  .compact-reminder button { font-size:12px; padding:7px; }
}

/* Programmatic focus on the whole exercise must not draw a page-sized ring. */
#workspace:focus, #workspace:focus-visible { outline:none; }


/* Self-paced multiplication breakdown: one working row at a time. */
.multiplication-hint { text-align:left; padding:16px; }
.split-step-count { color:#617568; font-size:13px; }
.split-step h3 { font-size:23px; margin:10px 0 14px; }
.split-step p { margin:0 0 14px; font-size:16px; line-height:1.45; }
.split-numbers { display:grid; gap:12px; font-size:24px; }
.split-numbers div { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.split-join { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.65fr); gap:14px; align-items:center; }
.split-products { display:grid; gap:12px; }
.split-products > div { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:clamp(17px,2vw,23px); font-weight:700; }
.split-arrow { color:#72927b; font-size:27px; }
.split-total { display:grid; gap:10px; padding:14px; border:2px solid #a4bea3; border-radius:13px; background:#fffefa; text-align:center; font-size:clamp(17px,2vw,23px); overflow-wrap:anywhere; }
.split-total strong { font-size:26px; color:#3d7055; border-top:1px solid #d7e1d2; padding-top:9px; }
.split-navigation { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.split-navigation .primary,.split-navigation .pill-button { min-height:44px; padding:10px 14px; font-size:15px; }
.split-navigation .primary { margin-left:auto; }
.split-reveal { background:#e8e1f5; border-color:#b8a5d1; }
@media(max-width:420px) { .split-join { grid-template-columns:1fr; } .split-arrow { transform:rotate(90deg); } .split-products > div { font-size:19px; } .split-navigation .primary { margin-left:0; } }


/* Locally served bold typeface derived from OpenDyslexic; license in assets/fonts. */
@font-face { font-family:MichaelReading; src:url('assets/fonts/OpenDyslexic-Bold.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
.dock-reading { background:#f0a9bb; --dock-depth:#ca7c95; --dock-ink:#69374a; }
.learning-dock { grid-template-columns:repeat(8,minmax(0,1fr)); width:min(1200px,calc(100% - var(--sidebar-size) - 36px)); gap:8px; }
.dock-label { font-size:14px; }
.reading-toolbar h2 { margin:0 auto 0 0; font-size:25px; }
.reading-toolbar .tabs { flex:0 1 auto; }
.reading-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.reading-story-card { display:grid; grid-template-columns:85px minmax(0,1fr); grid-template-rows:1fr auto; column-gap:18px; row-gap:8px; align-items:center; text-align:left; padding:18px; min-height:145px; border:2px solid #d5dfd2; border-bottom-width:5px; border-radius:20px; background:#fffefa; }
.reading-story-card:hover { border-color:#c598b9; background:#fff8fa; }
.story-art { display:block; width:85px; height:90px; grid-row:1/-1; }
.story-art img,.story-art svg { width:100%; height:100%; object-fit:contain; }
.story-card-title { font-size:22px; line-height:1.45; }
.story-level { font-size:14px; color:#72507a; }
.reader-heading { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.reader-heading h2 { margin:0; text-align:left; font-size:clamp(24px,2.5vw,30px); }
.reader-heading .story-art { flex-shrink:0; }
.reader-text { font-weight:700; max-width:44ch; margin:0 auto; text-align:left; font-size:clamp(23px,2.3vw,28px); line-height:1.8; letter-spacing:.025em; word-spacing:.08em; hyphens:none; }
.reader-text p { margin:0 0 .65em; padding:5px 9px; border-left:4px solid transparent; border-radius:6px; }
.reading-sentence { scroll-margin-top:20px; scroll-margin-bottom:230px; }
.reading-current { background:#fff0bf; border-left-color:#b98725!important; }
.reading-guide-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:14px; border-top:1px solid #e0e6dc; }
.reading-guide-controls span { font-size:14px; }
@media(max-width:950px) {
  .learning-dock { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .dock-geography { grid-column:auto; flex-direction:column; min-height:72px; }
  .dock-geography .dock-label { font-size:14px; }
  main { padding-bottom:calc(285px + env(safe-area-inset-bottom,0px)); }
  html { scroll-padding-bottom:calc(285px + env(safe-area-inset-bottom,0px)); }
  .reading-sentence { scroll-margin-bottom:285px; }
}
@media(max-width:700px) {
  .reading-grid { grid-template-columns:1fr; }
  .story-card-title { font-size:21px; }
  .reader-card { padding:18px 12px; }
  .reader-heading .story-art { width:62px; height:70px; }
  .reader-text { font-size:24px; }
  .reader-heading h2 { font-size:24px; }
  .reading-guide-controls .pill-button { font-size:14px; padding:9px; }
}


/* Seven-second milestone, with quiet motion-free rendering in calm mode. */
.celebrating { width:min(920px,calc(100vw - 32px)); max-width:920px; }
.celebration-content { position:relative; text-align:center; overflow:hidden; padding:8px; isolation:isolate; }
#celebration-video { display:block; width:100%; height:auto; max-height:calc(100dvh - 260px); object-fit:contain; background:#17273d; border-radius:14px; }
.celebration-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:16px; }
#celebration-status:empty { display:none; }
.celebration-content h2 { font-size:clamp(26px,4vw,36px); margin:8px 0; }
.celebration-content p { font-size:21px; line-height:1.6; }
.celebration-stars { color:#c99520; font-size:32px; }
.celebration-confetti { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.celebration-confetti i { position:absolute; left:var(--x); top:-18px; width:8px; height:14px; background:#d39ebc; border-radius:2px; animation:celebration-fall 4.8s linear both; animation-delay:calc(var(--i)*.06s); }
.celebration-confetti i:nth-child(3n) { background:#dab747; }
.celebration-confetti i:nth-child(3n+1) { background:#7fab93; }
@keyframes celebration-fall { to { transform:translateY(500px) rotate(240deg); } }
.calm .celebration-confetti { display:none; }
@media(prefers-reduced-motion:reduce) { .celebration-confetti { display:none; } }
#sound-test-status { font-size:16px; margin:10px 0; }
#sound-test-status:empty { display:none; }

/* These appearance variables exist only on story/preview paper. */
@font-face { font-family:MichaelLexend; src:url('assets/fonts/Lexend-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
.reading-toolbar { flex-wrap:wrap; }
.reader-settings { background:#fffefa; border:1px solid #d7e1d5; border-radius:18px; padding:18px; margin-bottom:20px; }
.reader-settings h3 { margin:0 0 14px; font-size:19px; color:#355d47; }
.reader-settings-layout { display:grid; grid-template-columns:minmax(300px,1.3fr) minmax(0,1fr); gap:24px; align-items:center; }
.reader-settings-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; }
.reader-settings-fields label { display:grid; gap:7px; font-size:15px; font-weight:700; min-width:0; }
.reader-settings-fields label > span { display:flex; justify-content:space-between; gap:8px; }
.reader-settings-fields output { white-space:nowrap; font-variant-numeric:tabular-nums; }
.reader-settings-fields select { width:100%; max-width:none; font-size:16px; }
.reader-settings-fields input[type=range] { margin:0; width:100%; min-height:28px; }
.reader-themes { padding:0; margin:0; border:0; display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.reader-themes legend { padding:0; margin-bottom:8px; font-size:15px; font-weight:700; }
.reader-theme { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:6px 9px; border:1px solid #d4dfd2; border-radius:10px; background:#f8faf5; font-size:14px; }
.reader-theme.selected { border:2px solid #508065; background:#e7f1e6; padding:5px 8px; }
.reader-swatch { display:inline-block; width:17px; height:17px; border-radius:50%; border:1px solid #a5b4a6; }
.swatch-white { background:#fff; }.swatch-cream { background:#fff8e8; }.swatch-dark { background:#202a32; }.swatch-blue { background:#90c7ed; }
.reader-reset { align-self:end; justify-self:end; font-size:13px; }
.reader-paper { background:var(--reader-background,#fff8e8); color:var(--reader-ink,#263e43); border-radius:14px; padding:22px; }
.reader-paper .reader-heading h2,.reader-paper .reader-text,.reader-paper.reader-preview p { font-family:var(--reader-font,Verdana,Arial,sans-serif); font-size:var(--reader-size,22px); letter-spacing:var(--reader-spacing,1px); line-height:var(--reader-line-height,1.5); color:var(--reader-ink,#263e43); font-weight:700; }
.reader-paper .reader-heading h2 { font-size:calc(var(--reader-size,22px) + 3px); overflow-wrap:anywhere; }
.reader-paper .reader-text { max-width:44ch; word-spacing:.08em; overflow-wrap:anywhere; }
.reader-preview-column { min-width:0; }
.reader-level-tabs { flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.reader-paper.reader-preview { padding:16px 20px; overflow-wrap:anywhere; }
.reader-paper.reader-preview p { margin:0 0 .55em; }
.reader-paper.reader-preview p:last-child { margin-bottom:0; }
.reader-paper[data-reader-theme=dark] .reading-current { background:#3b4d37; border-left-color:#d6c77b!important; }
.reader-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:18px; align-items:start; }
.reader-layout .reader-card { min-width:0; padding:20px; }
.reader-settings-compact { position:sticky; top:24px; padding:14px; margin:0; }
.reader-settings-compact h3 { font-size:16px; margin-bottom:12px; }
.reader-settings-compact .reader-settings-layout,.reader-settings-compact .reader-settings-fields { grid-template-columns:minmax(0,1fr); gap:13px; }
.reader-settings-compact .reader-settings-fields label,.reader-settings-compact .reader-themes legend { font-size:14px; }
.reader-settings-compact select { min-height:36px; padding:7px 22px 7px 8px; font-size:15px; }
.reader-settings-compact .reader-theme { font-size:12px; padding:6px; }
.reader-settings-compact .reader-theme.selected { padding:5px; }
.reader-settings-compact .reader-reset { justify-self:start; padding:4px 0; }
@media(max-width:1100px) { .reader-layout { grid-template-columns:185px minmax(0,1fr); gap:12px; }.reader-layout .reader-card { padding:12px; }.reader-paper { padding:18px; } }
@media(max-width:780px) {
 .reader-settings-layout { grid-template-columns:1fr; gap:16px; }
 .reader-layout { grid-template-columns:1fr; }
 .reader-settings-compact { position:static; }
 .reader-settings-compact .reader-settings-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .reader-paper { padding:14px; }
}
@media(max-width:420px) { .reader-settings-fields,.reader-settings-compact .reader-settings-fields { grid-template-columns:1fr; }.reader-heading { flex-wrap:wrap; }.reader-settings { padding:14px; } }

.reading-guide-status { display:flex; justify-content:flex-end; padding-top:12px; margin-top:12px; border-top:1px solid #e0e6dc; font-size:14px; color:#52705d; }

.celebration-content #modal-title:focus { outline:none; }

/* Compact written maths keeps the worksheet readable and the controls reachable. */
#geography-credit[hidden] { display:none; }
.column-maths .activity-toolbar { position:sticky; top:8px; z-index:20; background:var(--cream); padding:4px 0; border-radius:12px; }
.written-card { padding:12px 24px; }
.written-card h2 { font-size:22px; line-height:1.25; margin:5px 0 6px; }
.written-card .task-top .link-button { padding:4px 0; min-height:32px; font-size:14px; }
.written-card .column-board { margin:6px auto 8px; }
.written-card .column-row { padding:2px 0; gap:7px; }
.written-card .column-number { height:50px; font-size:42px; }
.written-card .column-cell { height:54px; font-size:35px; border-radius:11px; }
.written-card .column-rule { padding-bottom:3px; margin-bottom:2px; }
.written-card .column-field-label { margin-top:4px; margin-bottom:2px; font-size:12px; line-height:1.35; }
.written-card .column-final { padding-top:5px; margin-top:5px; }
.written-card[data-operation=add] .column-final,.written-card[data-operation=sub] .column-final { border-top:0; padding-top:0; margin-top:0; }
.written-card .answer-prompt { margin:5px 0 6px; font-size:12px; line-height:1.35; }
.written-card .written-keypad { gap:6px; max-width:420px; }
.written-card .written-keypad button { min-height:44px; font-size:24px; border-radius:10px; padding:4px; }
/* These controls follow the hint in normal flow; no overlay can hide its working. */
.written-card .work-bottom { position:static; width:fit-content; max-width:100%; margin:12px 0 0 auto; padding:0; border:0; background:transparent; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.written-card .work-bottom .actions { width:auto; max-width:100%; flex-wrap:wrap; justify-content:flex-end; }
.written-card .work-bottom .actions .primary { width:auto; }
.written-card .work-bottom .actions > button { box-shadow:0 3px 9px #294c3818; }
.written-card .helper-mini img { width:32px; height:36px; }
.written-card .work-bottom .primary,.written-card .work-bottom .pill-button { min-height:44px; padding:8px 18px; font-size:16px; }
.written-card > .exercise-report-link { position:static; width:fit-content; max-width:100%; margin:6px 0 0 auto; background:transparent; }
.written-card > .exercise-report-link button { padding:4px 0; }
@media(max-width:700px) {
 .written-card { padding:12px; }
 .written-card .column-number { font-size:36px; }
 .written-card .column-cell { font-size:31px; }
 .column-maths .activity-toolbar { top:0; }
}

/* The optional manual sentence controls stay at the upper right of the story. */
.reader-story-toolbar { position:sticky; top:8px; z-index:20; background:var(--cream); padding:6px 0; border-radius:12px; }
.reading-guide-navigation { display:flex; align-items:center; gap:7px; margin-left:auto; }
.reading-guide-navigation .pill-button { min-height:40px; padding:7px 11px; font-size:14px; }
.reading-guide-navigation [data-action=reading-previous] { min-width:40px; }
.reading-guide-navigation span { font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; color:#52705d; }
.reader-story-toolbar + .reader-layout .reader-settings-compact { top:84px; }
.reader-card .reading-sentence { scroll-margin-top:120px; }
@media(max-width:700px) { .reader-story-toolbar { top:0; gap:8px; }.reader-story-toolbar > .pill-button { min-height:40px; font-size:14px; padding:7px 10px; }.reading-guide-navigation { justify-content:flex-end; }.reader-card .reading-sentence { scroll-margin-top:160px; } }
.account-page { display:block; min-height:100vh; }
.account-main { margin:0; padding:32px 18px; max-width:none; display:grid; justify-items:center; }
.account-brand { font-size:22px; font-weight:800; color:#355d47; margin-bottom:24px; text-align:center; }
.account-card { width:min(100%,460px); padding:28px; background:#fffefa; border:1px solid #d7e1d5; border-radius:22px; }
.account-card h1 { font-size:28px; margin:14px 0 8px; }
.account-card form label { display:block; margin:18px 0 7px; font-weight:700; }
.account-card input { width:100%; padding:12px; border:1px solid #bfccb9; border-radius:10px; font:inherit; box-sizing:border-box; }
.account-card .primary { width:100%; margin:12px 0; }
.account-language { display:flex; justify-content:flex-end; gap:8px; }
.account-language button { padding:6px 10px; border:1px solid #cbd8c3; border-radius:8px; background:#f4f7ef; }

.account-page [hidden] { display:none!important; }

/* Phones put learning first. The full navigation remains available below it. */
@media(max-width:800px) {
  body:not(.account-page) { display:flex; flex-direction:column; padding-bottom:calc(225px + env(safe-area-inset-bottom,0px)); }
  body:not(.account-page) > main { order:0; width:100%; padding:12px 12px 18px; }
  body:not(.account-page) > .sidebar { order:1; position:static; height:auto; padding:14px 12px; border-top:1px solid var(--line); border-bottom:0; }
  .sidebar nav { margin-top:12px; }
  .sidebar .settings-link { display:block; padding:12px 8px; }
  .topbar { gap:8px; margin-bottom:12px; }
  .welcome { font-size:17px; }
  .welcome small { font-size:12px; }
  .top-controls { gap:6px; flex-wrap:wrap; }
  .activity-toolbar { gap:7px; margin-bottom:8px; }
  .activity-toolbar .tabs { gap:5px; margin-bottom:0; }
  .activity-toolbar .tab { padding:8px 7px; min-height:40px; }
  .activity-toolbar .tab.selected { padding:7px 6px; }
  .rule-reminder.compact-reminder { margin-bottom:8px; }
  .round-line { margin-bottom:8px; }
  .task-card { padding:12px; }
  .task-card h2 { margin-top:12px; }
  .equation { padding:18px 0; }
  .learning-dock { width:100%; gap:6px; padding:7px max(8px,env(safe-area-inset-left,0px)) calc(7px + env(safe-area-inset-bottom,0px)); }
  .learning-dock .dock-button { min-height:56px; padding:4px; border-bottom-width:4px; border-radius:12px; touch-action:manipulation; }
  .dock-symbol { height:25px; font-size:27px; }
  .dock-symbol svg { width:25px; height:25px; }
  .dock-label,.dock-geography .dock-label { font-size:12px; }
  .dock-tables { min-height:42px; font-size:12px; padding:5px 3px; margin-top:6px; }
  html { scroll-padding-bottom:calc(225px + env(safe-area-inset-bottom,0px)); }
}

/* Festion's quiet double heartbeat, with a full-size touch target. */
.donation-heart { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:9px; border:0; background:transparent; color:#dc3545; border-radius:12px; }
.donation-heart-symbol { width:26px; height:26px; transform-origin:center; animation:donation-heartbeat 1.8s ease-in-out infinite; }
@keyframes donation-heartbeat { 0%,15%,32.2%,100% {transform:scale(1)} 7.8% {transform:scale(1.12)} 22.2% {transform:scale(1.08)} }
.calm .donation-heart-symbol,.donation-motion-paused .donation-heart-symbol,body:has(dialog[open]) .donation-heart-symbol { animation:none; }
@media(prefers-reduced-motion:reduce) { .donation-heart-symbol { animation:none; } }
.donation-dialog { width:min(480px,calc(100vw - 24px)); }
.donation-dialog h2 { padding-right:24px; }
.donation-dialog p { line-height:1.6; }
.donation-dialog h3 { font-size:17px; margin:20px 0 12px; }
.donation-methods { display:grid; gap:9px; }
.donation-method { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:10px 12px; border:1px solid #dde5d9; border-radius:14px; background:#f6f9f3; text-align:left; }
.donation-method > span:nth-child(2) { flex:1; min-width:0; }
.donation-method strong { display:block; font-size:17px; }
.donation-method small { display:block; font-size:12px; margin-top:4px; color:#68796d; }
.donation-method-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#e4eee7; color:#39715c; font-weight:800; font-size:23px; }
.donation-pending { font-weight:800; color:#7b6350; background:#faf0df; padding:12px; border-radius:12px; }
@media(max-width:540px) { .top-controls { gap:4px; } .donation-heart { flex-basis:44px; } }

.topbar { position:relative; padding-right:48px; }
.topbar .donation-heart { position:absolute; top:0; right:0; }
@media(max-width:540px) { .topbar { padding-right:0; } .welcome { padding-right:48px; } }

/* The story behind the site sits directly above a clearly outlined Settings. */
.sidebar { overflow-y:auto; }
.about-button { display:block; flex-shrink:0; width:100%; margin-top:auto; padding:12px 10px; min-height:46px; border:1px solid #bd3b47; border-bottom:3px solid #ad303d; border-radius:12px; background:#dc4b58; color:#fff; font-size:14px; font-weight:800; text-align:center; animation:about-pulse 2.4s ease-in-out infinite; }
@keyframes about-pulse { 0%,100% {box-shadow:0 0 0 0 #dc4b5820} 50% {box-shadow:0 0 0 4px #dc4b5828} }
.sidebar .settings-link { display:block; flex-shrink:0; width:100%; margin-top:9px; padding:10px; min-height:46px; border:2px solid #8ba393; border-radius:12px; background:#f7faf4; color:#365d48; }
.about-dialog { width:min(680px,calc(100vw - 24px)); }
.about-dialog h2 { padding-right:24px; }
.about-story p { font-size:17px; line-height:1.7; margin:0 0 16px; }
.calm .about-button,.donation-motion-paused .about-button,body:has(dialog[open]) .about-button { animation:none; }
@media(prefers-reduced-motion:reduce) { .about-button { animation:none; } }
@media(max-width:800px) { .about-button { margin-top:16px; } }

.story-language-picker { display:flex; flex-wrap:wrap; gap:6px; }
.story-language-picker [aria-pressed="true"] { background:#e3efe5; border:2px solid #79a28b; color:#285a40; }
.language-switch { flex-wrap:wrap; }
.welcome-language-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:540px) { .language-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .story-language-picker { width:100%; } .story-language-picker button { flex:1 1 calc(50% - 6px); min-height:42px; } .reader-story-toolbar { gap:8px; } .dock-label { overflow-wrap:anywhere; font-size:11px; } }

/* Untimed typing: one small portion, stable input and a clear correction cue. */
.dock-typing { background:#b7d5c3; --dock-depth:#82aa92; --dock-ink:#264f3c; }
.learning-dock { grid-template-columns:repeat(9,minmax(0,1fr)); }
.typing-toolbar { flex-wrap:wrap; align-items:center; }
.typing-toolbar h1 { font-size:26px; margin:0 auto 0 0; }
.typing-card { max-width:950px; margin-inline:auto; padding:22px 28px; }
.typing-card label { display:block; font-weight:800; margin:10px 0 7px; }
.typing-card select { width:100%; min-height:44px; max-width:100%; padding:9px; font:inherit; border:1px solid #b4c5b4; border-radius:10px; background:#fffefa; }
.typing-progress { display:flex; gap:16px; align-items:center; margin:16px 0; font-size:14px; }
.typing-progress progress { flex:1; min-width:40px; height:10px; accent-color:#34745e; }
.typing-card h2 { margin:12px 0 6px; font-size:25px; }
.typing-tip { text-align:center; margin:0 0 14px; font-size:14px; }
.typing-prompt { font:700 clamp(25px,3vw,34px)/1.65 Verdana,Arial,sans-serif; text-align:left; letter-spacing:.5px; white-space:pre-wrap; overflow-wrap:anywhere; background:#fff8e7; padding:20px; border:1px solid #dfd1ad; border-radius:14px; min-height:120px; }
.typing-correct { color:#226844; background:#e3f0e5; }
.typing-current { background:#f4dea1; border-bottom:3px solid #957021; }
.typing-wrong { color:#872e30; background:#fbe0db; text-decoration:underline 3px; text-underline-offset:5px; }
#typing-input { box-sizing:border-box; display:block; width:100%; font:700 clamp(23px,2.5vw,30px)/1.6 Verdana,Arial,sans-serif; padding:12px 16px; resize:vertical; min-height:100px; border:2px solid #8baf9b; border-radius:12px; color:#243f34; background:#fffefa; }
#typing-input:focus { outline:3px solid #d1b458; outline-offset:3px; }
#typing-input[aria-invalid="true"] { border-color:#b96a5b; }
.typing-status { min-height:28px; margin:10px 0; font-weight:700; }
.typing-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.typing-finished { text-align:center; padding:28px 10px; }
.typing-finished > span { font-size:50px; color:#b48b27; }
@media(max-width:900px) { .learning-dock { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:600px) { .typing-card { padding:14px; }.typing-prompt { padding:14px; min-height:100px; }.typing-card h2 { font-size:22px; }.typing-toolbar .story-language-picker { width:100%; } }
.typing-card { padding:16px 22px; }
.typing-story-field { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; }
.typing-story-field label { margin:0; font-size:15px; }
.typing-progress { margin:12px 0; }
.typing-card h2 { font-size:22px; margin:8px 0 5px; }
.typing-tip { margin-bottom:10px; font-size:13px; }
.typing-prompt { min-height:84px; padding:12px 16px; font-size:clamp(25px,2.5vw,30px); line-height:1.5; }
#typing-input { min-height:84px; font-size:25px; line-height:1.35; padding:10px 14px; }
.typing-status { min-height:24px; margin:6px 0; }
.typing-actions small { font-size:12px; }
@media(max-width:600px) { .typing-card { padding:12px; }.typing-story-field { grid-template-columns:1fr; gap:5px; }.typing-prompt { font-size:25px; }.typing-actions { gap:8px; } }

/* Seasonal colours stay separate from the reading paper preferences. */
body[data-season="summer"] { --ink:#173e55; --muted:#516e7a; --green:#126c99; --mint:#dceffa; --cream:#eef9ff; --line:#bddceb; --season-paper:#fffefa; --season-wash:#e8f6fd; --season-accent:#edc460; }
body[data-season="winter"] { --ink:#213b50; --muted:#536d80; --green:#386a8b; --mint:#dceaf7; --cream:#edf5fa; --line:#ccdae5; --season-paper:#fcfeff; --season-wash:#e7f1fc; --season-accent:#8bbbd3; }
body[data-season="spring"] { --ink:#2e492c; --muted:#5d7354; --green:#4b733a; --mint:#e6efda; --cream:#f3f8ec; --line:#d8e4c8; --season-paper:#fffef7; --season-wash:#f2f6dd; --season-accent:#e9bc4f; }
body[data-season="autumn"] { --ink:#513a2b; --muted:#7c6656; --green:#95532b; --mint:#f2dfc5; --cream:#fcf3e6; --line:#e0c8ac; --season-paper:#fffaf2; --season-wash:#f9e6c9; --season-accent:#d7a239; }
body[data-season]:not([data-season="basic"]) { background:var(--cream); color:var(--ink); }
body[data-season]:not([data-season="basic"]) .sidebar { background:var(--season-paper); }
body[data-season]:not([data-season="basic"]) :is(.task-card,dialog,.reader-settings,.reading-story-card) { background:var(--season-paper); border-color:var(--line); }
body[data-season]:not([data-season="basic"]) :is(.rule-reminder,.hint-panel,.typing-prompt,.brand-mark) { background:var(--season-wash); border-color:var(--line); }
body[data-season]:not([data-season="basic"]) .primary { background:var(--green); color:white; }
body[data-season]:not([data-season="basic"]) .nav-item.active { background:var(--mint); color:var(--ink); }
body[data-season]:not([data-season="basic"]) .learning-dock { background:var(--season-paper); border-color:var(--line); }
.appearance-settings { margin:18px 0; padding-bottom:16px; border-bottom:1px solid var(--line); }
.appearance-settings > label,.site-theme-settings legend { font-weight:800; }
.name-setting-controls { display:flex; align-items:center; gap:10px; margin-top:8px; }
#setting-child-name { min-width:0; flex:1; padding:10px 12px; min-height:44px; border:1px solid #a7b9ac; border-radius:10px; background:#fffefa; color:#263e43; }
#local-name-status { font-size:14px; margin:6px 0; }
.keyboard-device-note { font-size:13px; line-height:1.5; color:var(--muted); }
.site-theme-settings { padding:0; border:0; margin:18px 0 0; }
.site-theme-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.site-theme-option { display:flex; align-items:center; gap:10px; padding:10px; min-height:48px; border:1px solid #c7d2c5; border-radius:12px; background:#fffefa; color:#263e43; font-weight:700; text-align:left; }
.site-theme-option[aria-pressed="true"] { border:2px solid var(--green); box-shadow:0 0 0 2px var(--mint); }
.site-theme-option:first-child { grid-column:1/-1; }
.season-swatch { width:25px; height:25px; border:1px solid #8b9a8d; border-radius:50%; flex-shrink:0; }
.season-swatch-basic { background:linear-gradient(135deg,#e2f1e8 50%,#f6f8f2 50%); }
.season-swatch-summer { background:linear-gradient(135deg,#88d7ed 50%,#f3dfa9 50%); }
.season-swatch-winter { background:linear-gradient(135deg,#b8d9ed 50%,#fff 50%); }
.season-swatch-spring { background:linear-gradient(135deg,#96bd73 50%,#f2d770 50%); }
.season-swatch-autumn { background:linear-gradient(135deg,#a96332 50%,#ebc86a 50%); }
dialog:has(.appearance-settings) { max-height:calc(100dvh - 32px); overflow-y:auto; }
#season-decor { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
#season-decor * { pointer-events:none; }
.season-sun { position:absolute; left:1px; top:1px; color:#e6ad27; font:30px/1 Arial,sans-serif; filter:drop-shadow(0 0 6px #f7dc86); animation:season-sun-glow 8s ease-in-out infinite; }
@keyframes season-sun-glow { 50% { transform:scale(1.08); opacity:.75; } }
.season-beach { position:absolute; left:0; right:0; bottom:0; height:40px; }
.season-beach svg { width:100%; height:100%; animation:season-wave 12s ease-in-out infinite alternate; }
@keyframes season-wave { to { transform:translateY(5px); } }
.beach-shell { position:absolute; bottom:3px; font-size:19px; }
.shell-left { left:18px; }.shell-right { right:18px; }
.beach-bucket { position:absolute; bottom:4px; width:22px; height:21px; background:#ecb557; border:2px solid #c08635; border-radius:2px 2px 7px 7px; transform:rotate(-8deg); }
.beach-bucket i { position:absolute; width:16px; height:15px; left:1px; top:-13px; border:2px solid #c08635; border-bottom:0; border-radius:14px 14px 0 0; }
.bucket-left { left:65px; }.bucket-right { right:62px; background:#e9a295; transform:rotate(8deg); }
.season-falling { position:absolute; top:-30px; width:15px; height:15px; animation:season-fall var(--duration) linear var(--delay) infinite; opacity:.8; }
.edge-left { left:3px; }.edge-right { right:3px; }
.season-leaf { background:#e4bf50; border:1px solid #bf8c30; border-radius:2px 85% 2px 85%; }
.season-leaf::after { content:''; position:absolute; width:1px; height:15px; background:#b18231; left:7px; transform:rotate(-35deg); }
.season-snow { color:#6fadc9; font-size:15px; width:17px; height:17px; }
@keyframes season-fall { 0% { transform:translateY(-40px) rotate(-15deg); opacity:0; } 8% { opacity:.8; } 45% { transform:translate(3px,48vh) rotate(65deg); } 92% { opacity:.7; } 100% { transform:translateY(105vh) rotate(135deg); opacity:0; } }
body[data-season="spring"] #donation-heart::after { content:'🐝'; position:absolute; top:0; left:0; font-size:21px; line-height:1; pointer-events:none; animation:season-bee 32s ease-in-out infinite; }
@keyframes season-bee { 0%,8% { opacity:0; transform:translate(-160px,-35px); } 13% { opacity:1; transform:translate(-80px,-12px) rotate(8deg); } 22%,39% { opacity:1; transform:translate(-3px,-18px); } 48% { opacity:1; transform:translate(calc(var(--bee-name-x,-200px) / 2),-35px) rotate(-8deg); } 58%,75% { opacity:1; transform:translate(var(--bee-name-x,-200px),-12px); } 86% { opacity:1; transform:translate(-140px,-35px); } 92%,100% { opacity:0; transform:translate(-30px,-60px); } }
body[data-season="winter"] .topbar { position:relative; }
body[data-season="winter"] .topbar::after { content:''; position:absolute; right:68px; bottom:-5px; width:95px; height:5px; background:white; border-radius:60% 40% 40% 50%; box-shadow:0 2px 4px #7ca8bb30; pointer-events:none; }
body[data-season="winter"] .welcome { position:relative; }
body[data-season="winter"] .welcome::after { content:''; position:absolute; top:-12px; left:12px; width:24px; height:18px; background:linear-gradient(#80b5cb 70%,white 70%); border-radius:15px 15px 4px 4px; transform:rotate(-12deg); box-shadow:0 -4px 0 -1px white; pointer-events:none; }
body[data-season="winter"] #welcome-greeting { text-shadow:0 -2px 0 white,1px 0 0 #c6e8f4; }
body[data-season="winter"] .brand-mark { box-shadow:0 -4px 0 white; }
.calm .season-moving,.calm[data-season="spring"] #donation-heart::after { display:none; }
.calm .season-sun,.calm .season-beach svg { animation:none; }
.donation-motion-paused :is(.season-moving,.season-sun,.season-beach svg),.donation-motion-paused #donation-heart::after { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) { .season-moving,body[data-season="spring"] #donation-heart::after { display:none; }.season-sun,.season-beach svg { animation:none; } }
@media(max-width:540px) { .site-theme-options { grid-template-columns:1fr; }.site-theme-option:first-child { grid-column:auto; }.name-setting-controls { flex-wrap:wrap; }#setting-child-name { flex-basis:100%; }.season-sun { font-size:30px; left:2px; top:0; }.season-falling { width:10px; height:10px; }.season-snow { font-size:11px; }.season-beach { height:36px; }.beach-bucket { width:17px; height:17px; }.bucket-left { left:43px; }.bucket-right { right:43px; } }

.dock-units { background:#b2d9d4; --dock-depth:#78aaa6; --dock-ink:#254e51; }
.learning-dock { grid-template-columns:repeat(10,minmax(0,1fr)); }
.units-toolbar { justify-content:space-between; align-items:center; }
.units-toolbar h1 { margin:0; font-size:26px; }
.unit-topic-tabs { flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.unit-topic-tabs .tab { min-height:43px; padding:8px 14px; font-size:15px; }
.units-card { padding:12px 20px; }
.units-card h2 { font-size:24px; margin:6px 0 8px; }
.units-card .task-top { gap:12px; }
.unit-question-equation { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; padding:8px 0 12px; font-size:clamp(24px,3vw,38px); font-weight:800; }
.unit-source { color:var(--ink); }
.unit-answer-display { min-width:100px; min-height:70px; display:grid; place-items:center; padding:6px 14px; border:2px dashed #94ad93; border-radius:15px; background:#edf3e6; color:#405f3d; font-variant-numeric:tabular-nums; }
.unit-target { font-size:24px; }
.units-card .choice { min-height:48px; font-size:clamp(17px,2vw,24px); overflow-wrap:anywhere; }
#unit-answer { min-width:0; width:clamp(120px,17vw,210px); max-width:100%; min-height:70px; text-align:center; font-size:clamp(24px,3vw,34px); font-weight:800; font-family:inherit; }
#unit-answer::placeholder { color:#657e50; opacity:1; }
.unit-month-context { text-align:center; background:#fff2d1; color:#594820; padding:10px; border-radius:10px; }
.unit-hint h3 { margin:0 0 8px; }.unit-hint ol { padding-left:22px; }.unit-hint li { padding:3px 0; }
.unit-method { font-weight:800; font-size:20px; }.unit-worked { border-top:1px solid #c6d5c3; padding:8px 0; }.unit-worked p { font-weight:750; font-size:20px; margin:8px 0; }
.unit-reference { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.unit-reference section { border:1px solid var(--line); padding:12px; border-radius:12px; }.unit-reference h3 { margin:0 0 8px; }.unit-reference p { font-size:18px; font-weight:750; margin:8px 0; }
.unit-reference-note { font-size:14px; line-height:1.5; }
.unit-animal-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:12px 0; }
.unit-animal { position:relative; padding:16px 8px; border:2px solid #cad8c5; background:#fffefa; border-radius:16px; min-height:128px; }
.unit-animal > span { display:block; font-size:48px; }.unit-animal strong { display:block; font-size:20px; margin-top:8px; }.unit-picked { border-color:#4b7e63; background:#e7f1e8; opacity:1!important; }
.unit-order-number { position:absolute; top:5px; right:7px; background:#3a765f; color:white; width:25px; height:25px; border-radius:50%; }
.unit-order-preview { min-height:48px; padding:10px; background:#f4f6ec; border-radius:10px; text-align:center; font-weight:750; line-height:1.7; }
.unit-pour-source { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:15px; }.unit-pour-source strong { font-size:30px; }.unit-pour-source > span { font-size:17px; }.unit-bottle { width:50px; height:86px; }
.unit-cups { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:5px; max-width:750px; margin:12px auto 18px; }
.unit-cup-button { display:grid; justify-items:center; gap:3px; background:#fffefa; border:1px solid #cfdbd3; padding:7px 3px; border-radius:9px; min-height:74px; }
.unit-glass { display:block; position:relative; width:28px; height:38px; border:2px solid #789da5; border-top:3px solid #789da5; border-radius:2px 2px 7px 7px; overflow:hidden; }.unit-glass i { position:absolute; bottom:0; left:0; right:0; height:0; background:#83c7dc; transition:height .2s; }.cup-filled .unit-glass i { height:80%; }.cup-filled { border-color:#3d819a; background:#eaf6fa; }
.units-card .work-bottom { margin-top:12px; padding-top:10px; }
@media(max-width:900px) { .learning-dock { grid-template-columns:repeat(5,minmax(0,1fr)); }.unit-cups { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:540px) { .units-card { padding:12px; }.unit-topic-tabs .tab { padding:7px 10px; font-size:13px; }.units-card h2 { font-size:22px; }.unit-question-equation { gap:8px; font-size:25px; }.unit-answer-display { min-height:60px; min-width:80px; }.unit-reference { grid-template-columns:1fr; }.unit-animal-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.unit-animal { min-height:105px; padding:9px 5px; }.unit-animal > span { font-size:38px; }.unit-worked p { font-size:17px; }.unit-pour-source { gap:9px; } }
.calm .unit-glass i { transition:none; }
@media(prefers-reduced-motion:reduce) { .unit-glass i { transition:none; } }

/* Keep the short unit exercises and their action buttons above the lesson dock. */
.units-toolbar .level-wrap { display:flex; align-items:center; flex-direction:row; gap:9px; }
.units-toolbar .level-wrap label { max-width:90px; }
.units-toolbar .level-wrap select { max-width:220px; }
.units-card .work-bottom .primary,.units-card .work-bottom .pill-button { min-height:44px; padding:8px 18px; }
.units-card .helper-mini img { width:40px; height:44px; }
.units-card .task-top .pill-button { min-height:40px; padding:7px 12px; }
@media(max-width:540px) { .units-toolbar .level-wrap { gap:6px; }.units-toolbar .level-wrap label { max-width:65px; }.units-toolbar .level-wrap select { max-width:185px; }.units-card .actions { width:auto; margin-left:auto; }.units-card .work-bottom { flex-wrap:nowrap; gap:6px; }.units-card .work-bottom .primary,.units-card .work-bottom .pill-button { padding:8px 10px; font-size:13px; }.units-card .helper-mini img { width:30px; } }

@media(max-width:540px) {
 .units-toolbar { flex-wrap:nowrap; }
 .units-toolbar h1 { font-size:23px; }
 .units-toolbar .level-wrap { font-size:0; gap:0; min-width:0; flex:0 1 185px; }
 .units-toolbar .level-wrap select { font-size:13px; width:100%; max-width:100%; min-width:0; }
 .unit-topic-tabs + .round-line .progress-dots { display:none; }
 .unit-question-equation { padding:4px 0 10px; }
 #unit-answer { min-height:60px; }
}

/* Length cards and a responsive numbered ruler, rather than physical screen centimetres. */
.unit-ruler { display:block; width:100%; max-width:440px; height:auto; margin:8px auto 0; }
.unit-ruler text { font:700 17px Arial,sans-serif; fill:#514933; }
.unit-equivalent .unit-source { background:#fff0c8; border:1px solid #d3b779; border-bottom:3px solid #c5a65e; border-radius:10px; padding:10px 15px; }
@media(max-width:540px) { .unit-equivalent .unit-source { padding:7px 10px; }.unit-ruler { margin-top:2px; } }

.unit-measure-prompt { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; max-width:740px; margin:auto; }
.unit-measure-prompt .unit-ruler { flex:1 1 280px; min-width:0; margin:2px 0; }
.unit-measure-prompt .unit-question-equation { flex:0 0 220px; }
.unit-measure-prompt #unit-answer { width:145px; }
@media(max-width:540px) { .unit-measure-prompt { gap:0; }.unit-measure-prompt .unit-question-equation { padding:0 0 8px; }.unit-measure-prompt #unit-answer { min-height:48px; } }

/* Length building, journey diagrams and furniture problems. */
.unit-draw-target { text-align:center; font-size:28px; font-weight:800; margin:4px 0; }
#unit-drawing-ruler { max-width:500px; margin:auto; }
#unit-drawing-ruler .unit-ruler { max-width:100%; }
.unit-draw-slider { display:block; width:calc(100% - 54px); max-width:446px; margin:0 auto 8px; min-height:44px; accent-color:#416e73; cursor:ew-resize; }
.unit-route { display:flex; justify-content:center; align-items:center; max-width:640px; margin:10px auto; gap:5px; }
.unit-route-stop { font-size:30px; }
.unit-route-leg { display:grid; flex:1; text-align:center; font-weight:750; font-size:19px; }
.unit-route-leg i { border-bottom:3px solid #90ac83; font-style:normal; color:#416e73; }
.unit-space { max-width:460px; margin:auto; text-align:center; }.unit-space p { margin:5px 0; font-size:20px; }
.unit-furniture { display:flex; justify-content:center; gap:10px; border-top:3px solid #cbb786; padding-top:5px; }
.unit-furniture > div { display:grid; justify-items:center; padding:4px 15px; background:#f7eedc; border:1px solid #ddcba5; border-radius:9px; }
.unit-furniture span { font-size:30px; }.unit-furniture strong { font-size:19px; }
@media(max-width:540px){.unit-route-leg{font-size:15px;}.unit-route-stop{font-size:23px;}.unit-furniture > div{padding:3px 10px;}.unit-space p{font-size:17px;}.unit-furniture strong{font-size:17px;}.unit-draw-target{font-size:25px;}.units-card:has(.unit-ruler) h2{margin:2px 0 4px;}}

.unit-drawing h2 { font-size:22px; margin:2px 0; }
.unit-drawing .instruction { font-size:14px; margin:0 0 3px; }
.unit-drawing .unit-draw-target { font-size:25px; margin:0; }
.unit-drawing #unit-drawing-ruler { max-width:380px; }
.unit-drawing .unit-draw-slider { max-width:326px; margin-top:-3px; }
.unit-drawing #units-feedback:empty { display:none; }
.unit-drawing .work-bottom { margin-top:3px; padding-top:4px; }

@media(max-width:540px){.unit-drawing #units-feedback:not(:empty){min-height:0; padding:7px; margin:6px 0; font-size:18px;}}

/* One deliberate step at a time in long division. */
.division-board-wrap { max-width:100%; overflow-x:auto; margin:12px auto; }
.division-board { border-collapse:collapse; margin:auto; font-size:clamp(17px,2.2vw,25px); font-weight:750; font-variant-numeric:tabular-nums; }
.division-board td { min-width:26px; height:35px; padding:3px 5px; text-align:center; border:1px solid #d9ddcf; background:#fffdf5; white-space:nowrap; }
.division-board .division-quotient { color:#4c7651; background:#e7f0de; }
.division-row-product td { border-bottom:2px solid #84947b; }
.division-board .division-source-digit { background:#d9eff7; color:#205d72; position:relative; }
.division-source-digit::after { content:'↓'; position:absolute; top:85%; left:30%; color:#287c9b; font-size:27px; z-index:1; }
.division-board .division-brought { background:#e6f4fa; }
.division-equation { text-align:center; font-size:clamp(21px,2.5vw,29px); font-weight:800; margin:8px 0; }
.division-small-fact { text-align:center; font-size:17px; background:#fff2d5; padding:7px; border-radius:8px; }
.division-hint .split-step p { max-width:620px; margin:8px auto; line-height:1.5; }
.division-remainder-example { display:block; margin:10px auto 0; font-size:14px; }
@media(max-width:540px){.division-board td{min-width:21px;height:30px;padding:2px 3px;}.division-hint{padding:12px;}.division-hint .split-navigation{gap:6px;}.division-hint .split-navigation button{padding:9px;font-size:13px;min-height:44px;}.division-hint .split-step p{font-size:16px;}.division-small-fact{font-size:14px;}}

/* One continuous lesson tube, with the completed count exposed to assistive technology. */
.round-line { display:block; }
.round-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.round-heading strong { font-size:14px; }
.round-heading small { font-size:11px; color:#53675c; letter-spacing:0; text-align:right; }
.round-progress { position:relative; width:100%; height:24px; border-radius:999px; background:#e7eee5; border:1px solid #b6c9b8; overflow:hidden; }
.round-progress-fill { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#438261,#34745e); transition:width .25s ease; }
.round-progress-marker { position:absolute; top:50%; transform:translate(-50%,-50%); color:#415c4d; font-size:12px; font-weight:800; line-height:1; letter-spacing:0; }
.round-progress-marker.first { left:4px!important; transform:translateY(-50%); }
.round-progress-marker.last { left:auto!important; right:4px; transform:translateY(-50%); }
.round-progress-marker.passed { color:white; }
.practice-stat small { display:block; margin-top:8px; font-size:12px; line-height:1.5; color:#53675c; }
.calm .round-progress-fill { transition:none; }
@media(prefers-reduced-motion:reduce){.round-progress-fill{transition:none}}
@media(max-width:540px){.round-progress{height:22px}.round-progress-marker{font-size:11px}.round-heading{gap:8px}.round-heading strong{font-size:13px}.round-heading small{font-size:10px;max-width:45%}}

/* A quiet, bottom-edge launcher shared by every activity. */
.learning-dock-region { --dock-handle-height:24px; position:fixed; z-index:30; bottom:0; left:calc(var(--sidebar-size) + (100% - var(--sidebar-size)) / 2); width:min(1120px,calc(100% - var(--sidebar-size) - 28px)); transform:translate(-50%,calc(100% - var(--dock-handle-height) - env(safe-area-inset-bottom,0px))); transition:transform .22s ease; padding-bottom:env(safe-area-inset-bottom,0px); }
.learning-dock-region.dock-visible { transform:translate(-50%,0); }
.learning-dock-region .learning-dock { position:relative; left:auto; bottom:auto; width:100%; transform:none; margin:0; visibility:hidden; transition:visibility 0s .22s; }
.learning-dock-region.dock-visible .learning-dock { visibility:visible; transition-delay:0s; }
.dock-reveal { display:flex; align-items:center; justify-content:center; gap:8px; min-height:var(--dock-handle-height); height:var(--dock-handle-height); width:180px; margin:0 auto; padding:0 12px; border:1px solid var(--line); border-bottom:0; border-radius:13px 13px 0 0; background:var(--paper,#fffef8); color:var(--ink,#294c38); box-shadow:0 -2px 10px #294c3812; cursor:pointer; }
.dock-grip { display:block; width:38px; height:4px; border-radius:5px; background:currentColor; opacity:.5; }
.dock-reveal-label { font-size:11px; font-weight:700; }
.dock-reveal-arrow { font-size:16px; line-height:1; }
.dock-visible .dock-reveal-arrow { transform:rotate(180deg); }
.dock-reveal:focus-visible { outline:3px solid #426d57; outline-offset:2px; }
body:not(.account-page) main { padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)); }
html { scroll-padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)); }
.reading-sentence { scroll-margin-bottom:60px; }
.calm .learning-dock-region,.calm .learning-dock-region .learning-dock { transition:none; }
@media(hover:hover) and (pointer:fine) { .dock-reveal-label { display:none; }.dock-reveal { width:100px; } }
@media(any-pointer:coarse) { .learning-dock-region { --dock-handle-height:44px; } }
@media(max-width:800px) { .learning-dock-region { left:50%; width:100%; } body:not(.account-page) { padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)); } }
@media(prefers-reduced-motion:reduce) { .learning-dock-region,.learning-dock-region .learning-dock { transition:none; } }

/* Desktop table shortcuts float above their operation without shifting its hit area. */
.learning-dock-region .dock-operation-group { position:relative; }
@media(hover:hover) and (pointer:fine) {
 .learning-dock-region .dock-tables-slot { position:absolute; left:0; right:0; bottom:100%; padding-bottom:8px; }
 .learning-dock-region .dock-tables { margin-top:0; box-shadow:0 4px 15px #294c3820; }
}

/* Do not activate a different button while the launcher is sliding under the pointer. */
.learning-dock-region .learning-dock { pointer-events:none; }
.learning-dock-region.dock-ready .learning-dock { pointer-events:auto; }

/* Compact practice sheets, with a steady writing and help area. */
.learning-mode-switch { display:flex; gap:3px; padding:3px; background:var(--mint); border:1px solid var(--line); border-radius:12px; flex-shrink:0; }
.learning-mode-switch button { padding:8px 10px; min-height:38px; border:0; border-radius:9px; background:transparent; color:var(--ink); font-size:12px; font-weight:800; }
.learning-mode-switch button[aria-pressed="true"] { background:var(--green); color:white; box-shadow:0 2px 5px #253c3920; }
.halloween-toggle { flex-shrink:0; display:grid; place-items:center; width:40px; min-height:40px; border:1px solid #dcb47f; border-radius:50%; background:#fff2db; font-size:25px; cursor:pointer; }
.halloween-toggle[aria-pressed="true"] { background:#f5bb65; border:2px solid #704087; box-shadow:0 0 0 3px #aa73c035; }
.top-controls { flex-wrap:wrap; justify-content:flex-end; }
.advanced-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.advanced-badge { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--green); }
.advanced-heading h1 { font-size:25px; margin:5px 0; line-height:1.25; }
.advanced-heading p { font-size:14px; line-height:1.6; margin:4px 0; color:var(--muted); }
.advanced-filters { display:flex; flex-wrap:wrap; gap:5px; }
.advanced-filters .pill-button { font-size:12px; min-height:36px; padding:6px 10px; }
.advanced-filters [aria-pressed="true"] { background:var(--green); color:white; border-color:var(--green); }
.advanced-progress-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:10px 0 6px; font-size:14px; }
.advanced-progress-heading small { font-size:11px; color:var(--muted); }
.advanced-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; align-items:start; gap:18px; margin-top:18px; }
.advanced-sheet { border:1px solid var(--line); border-radius:20px; background:var(--season-paper,#fffefa); padding:18px; min-width:0; }
.advanced-sheet-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:14px; font-size:13px; color:var(--muted); }
.advanced-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.advanced-card { position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; min-height:86px; padding:16px 9px 10px; border:1px solid var(--line); border-radius:13px; background:#f7f8f1; }
.advanced-card.is-current { border:2px solid #9a7423; background:#fff5d9; padding:15px 8px 9px; box-shadow:0 0 0 2px #efd69350; }
.advanced-card.is-solved { background:#e5f2e8; border-color:#94b99b; }
.advanced-number { position:absolute; top:4px; left:8px; font:11px/1.2 Arial,sans-serif; opacity:.65; }
.advanced-equation { font:700 19px/1.3 Verdana,sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap; }
.advanced-answer { min-width:66px; min-height:42px; max-width:100%; border:1px solid #b5c8b6; border-bottom:3px solid #9fb6a1; border-radius:9px; background:white; color:#284e3d; padding:6px 9px; font:700 21px/1.2 Verdana,sans-serif; }
.advanced-answer small { font-size:12px; padding-left:3px; }
.advanced-answer:focus-visible { outline:3px solid #9a7423; outline-offset:2px; }
.advanced-tools { position:sticky; top:16px; padding:17px; background:var(--season-paper,#fffefa); border:1px solid var(--line); border-radius:20px; }
.advanced-selected-label { font-size:12px; color:var(--muted); margin:0 0 7px; }
.advanced-selected { font:700 20px/1.45 Verdana,sans-serif; text-align:center; overflow-wrap:anywhere; min-height:58px; padding:8px 0; }
.advanced-selected strong { color:var(--green); }
.advanced-keypad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.advanced-keypad button { min-height:46px; padding:7px; background:var(--mint); color:var(--ink); border:1px solid var(--line); border-bottom:3px solid #adc4b3; border-radius:10px; font:700 22px Verdana,sans-serif; touch-action:manipulation; }
.advanced-feedback { min-height:36px; font-size:13px; line-height:1.5; margin:9px 0; }
.advanced-feedback.correct { color:#29683d; }.advanced-feedback.wrong { color:#915520; }
.advanced-check { width:100%; min-height:43px; padding:9px; font-size:15px; }
.advanced-help-actions { display:flex; gap:5px; flex-wrap:wrap; margin-top:9px; }
.advanced-help-actions .pill-button { flex:1; min-height:36px; padding:7px; font-size:12px; }
.advanced-hint { padding:12px; margin-top:10px; border:1px solid #e4d4a3; border-radius:12px; background:#fff7e3; }
.advanced-hint h2 { font-size:14px; margin:0 0 6px; }.advanced-hint p { margin:0 0 8px; font-size:12px; line-height:1.65; color:#65512e; }
.advanced-hint-equation { font:700 14px/1.8 Verdana,sans-serif; overflow-wrap:anywhere; }
.advanced-paging { display:flex; gap:7px; justify-content:space-between; align-items:center; margin-top:15px; font-size:12px; }.advanced-paging .pill-button { font-size:12px; padding:7px; }
.advanced-complete { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:16px; margin-top:14px; border:1px solid var(--line); border-radius:14px; background:var(--mint); }
@media(max-width:1050px){.advanced-layout{grid-template-columns:minmax(0,1fr) 250px;gap:12px}.advanced-cards{gap:8px}.advanced-equation{font-size:17px}.advanced-sheet{padding:12px}.advanced-tools{padding:12px}.top-controls .learning-mode-switch{margin-left:auto}}
@media(max-width:600px){.advanced-layout{grid-template-columns:minmax(0,1fr) 152px;gap:7px}.advanced-cards{grid-template-columns:1fr;gap:7px}.advanced-sheet{padding:8px;border-radius:14px}.advanced-card{gap:5px;min-height:91px;padding:16px 4px 7px}.advanced-card.is-current{padding:15px 3px 6px}.advanced-equation{font-size:14px}.advanced-answer{font-size:18px;min-height:40px;min-width:65px}.advanced-tools{padding:8px;top:8px;border-radius:14px}.advanced-selected{font-size:14px;min-height:55px}.advanced-keypad{gap:4px}.advanced-keypad button{min-height:43px;padding:3px;font-size:19px}.advanced-hint{padding:7px}.advanced-hint p{font-size:11px}.advanced-hint-equation{font-size:11px}.advanced-check{font-size:12px}.advanced-help-actions .pill-button{flex-basis:100%;font-size:11px}.advanced-paging{flex-wrap:wrap;justify-content:center;font-size:11px}.advanced-paging .pill-button{flex:1;min-width:60px;font-size:10px}.advanced-sheet-heading{align-items:flex-start;flex-direction:column;font-size:11px;padding-bottom:8px;gap:3px}.advanced-heading h1{font-size:22px}.advanced-heading p{font-size:12px}.advanced-filters .pill-button{font-size:11px}.learning-mode-switch button{font-size:11px;padding:7px}.advanced-progress-heading{font-size:12px}.advanced-progress-heading small{max-width:50%;font-size:10px}.halloween-toggle{width:36px;min-height:36px;font-size:23px}}
@media(max-width:350px){.advanced-layout{grid-template-columns:minmax(0,1fr) 137px}.advanced-equation{font-size:12px}}
/* A friendly Halloween layer; decorations stay away from the answers. */
body[data-season="halloween"] { --ink:#362a49; --muted:#695a76; --green:#74458e; --mint:#eee1f4; --cream:#faf1e8; --line:#dfcbdc; --season-paper:#fffaf4; --season-wash:#f4e5f5; --season-accent:#e8a34f; }
body[data-season="halloween"]:not([data-season="basic"]) .sidebar { background:#31223e; color:#fff4e5; border-color:#60446f; }
body[data-season="halloween"] .sidebar :is(.brand,.nav-item,.reports-inbox-link) { color:#fff4e5; }
body[data-season="halloween"] .sidebar .nav-item.active { background:#624073; color:#fff4e5; }
body[data-season="halloween"] .advanced-card { background:#f4eaf7; }
body[data-season="halloween"] .advanced-card.is-current { background:#ffedcc; border-color:#a35c21; }
body[data-season="halloween"] .advanced-card.is-solved { background:#e5f2e8; }
body[data-season="halloween"] .advanced-hint { background:#fff0d6; }
body[data-season="halloween"] .topbar { border-bottom:1px solid #e1c6af; padding-bottom:12px; }
.halloween-moon { position:absolute; top:2px; left:6px; color:#dda143; font:38px/1 Georgia,serif; text-shadow:0 0 12px #efbf79; }
.halloween-pumpkin { position:absolute; bottom:28px; font-size:25px; opacity:.65; }.halloween-left{left:3px}.halloween-right{right:3px}
.halloween-bats { position:absolute; top:2px; right:2px; width:82px; height:42px; fill:#694579; opacity:.6; }
.halloween-ghost { position:absolute; top:30%; right:4px; width:22px; height:27px; border:1px solid #ddcbe7; border-radius:12px 12px 4px 4px; background:#fffaf4; box-shadow:0 1px 6px #80638a20; animation:halloween-float 9s ease-in-out infinite; }
.halloween-ghost b { position:absolute; left:5px; top:3px; color:#79578c; font:12px/1 Arial,sans-serif;letter-spacing:2px; }.halloween-ghost i{position:absolute;bottom:-2px;left:3px;width:6px;height:6px;border-radius:50%;background:#fffaf4;box-shadow:9px 0 #fffaf4}
@keyframes halloween-float { 50% { transform:translateY(9px) rotate(5deg); } }
.calm .halloween-ghost { animation:none; }
@media(prefers-reduced-motion:reduce){.halloween-ghost{animation:none}}

/* Advanced-only visual challenges. Original Normal activity styles stay intact. */
.advanced-activity-menu { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 17px; }
.advanced-activity-menu .pill-button { font-size:13px; min-height:39px; }
.advanced-activity-menu [aria-pressed="true"],.adventure-topics [aria-pressed="true"] { background:var(--green); border-color:var(--green); color:white; }
.adventure-heading h1 { font-size:27px; margin:6px 0 15px; }.adventure-topics { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }.adventure-topics .pill-button { font-size:12px; padding:8px 11px; }
.adventure-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:18px; align-items:start; margin-top:18px; }
.adventure-task { min-width:0; padding:22px; border:1px solid var(--line); border-radius:20px; background:var(--season-paper,#fffefa); }
.adventure-task h2 { font-size:21px; margin:10px 0; }.adventure-prompt { font-size:19px; line-height:1.7; margin:12px 0 20px; }.adventure-target { text-align:center; font-size:18px; padding:12px; border-radius:13px; background:var(--mint); }
.adventure-grid-frame { display:grid; justify-items:center; gap:10px; margin:18px 0; font-size:14px; color:var(--muted); }
.adventure-square-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); grid-template-rows:repeat(var(--rows),minmax(0,1fr)); aspect-ratio:var(--columns) / var(--rows); width:100%; max-width:360px; margin:auto; gap:2px; }
.adventure-square { display:grid; place-items:center; min-width:0; min-height:0; border:1px solid #82a8bd; border-radius:3px; background:#d5edf6; color:#234f66; padding:0; font-size:18px; touch-action:manipulation; }.adventure-square.counted { background:#f6cd78; border-color:#ad8337; color:#574013; }.adventure-square-space { background:transparent; }
.adventure-count { font-size:18px; font-weight:800; text-align:center; margin:13px 0; }
.adventure-answer { font-size:30px; font-weight:800; text-align:center; padding:15px 6px; color:var(--green); overflow-wrap:anywhere; }.adventure-answer small { display:block; font-size:13px; line-height:1.5; margin-top:7px; color:var(--muted); }.adventure-answer:focus-visible{outline:3px solid #9a7423;border-radius:10px;outline-offset:1px}
.adventure-range { display:grid; grid-template-columns:1fr auto; gap:8px; font-size:15px; font-weight:700; margin:18px 0; }.adventure-range input { grid-column:1/-1; width:100%; min-height:42px; accent-color:var(--green); }.adventure-range output { font-variant-numeric:tabular-nums; }.adventure-scale-note { font-size:12px; color:var(--muted); line-height:1.6; }
.adventure-paging { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:22px; }.adventure-paging .pill-button { min-height:40px; font-size:12px; padding:8px 10px; }.adventure-paging span { font-size:13px; }
.adventure-fence-board { display:grid; justify-items:center; gap:9px; margin:20px auto; max-width:440px; }.adventure-fence-middle { display:flex; align-items:center; gap:8px; width:100%; }.adventure-fence-middle .adventure-square-grid { flex:1; min-width:0; border:3px solid #ad8246; }.fence-side { min-width:54px; min-height:44px; background:#f9e7c5; color:#6f4d20; border:2px dashed #b18751; border-radius:10px; font-size:13px; font-weight:800; padding:5px; }.fence-side.counted { background:#e3efdc; border:2px solid #61834c; }
.adventure-ruler { width:100%; max-width:520px; height:auto; display:block; margin:22px auto; }.adventure-ruler text { font:10px Arial,sans-serif; fill:#574522; }
.adventure-net { position:relative; width:100%; max-width:320px; margin:20px auto; }.adventure-face { position:absolute; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; min-width:0; padding:2px; border:2px dashed #9784b1; background:#eee6f6; color:#4d396b; border-radius:2px; }.adventure-face strong { font-size:20px; }.adventure-face small { font-size:11px; }.adventure-face.target-face { background:#f7d48d; border:3px solid #a77a28; }.adventure-face.marked-face { background:#d1e8d1; border:3px solid #548052; }.adventure-solid-choices { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:20px 0; }.adventure-solid-choices [aria-pressed="true"] { background:var(--green); color:white; }
.adventure-story-picture { text-align:center; padding:28px 6px; font-size:35px; letter-spacing:.15em; color:#9b8cb7; background:linear-gradient(135deg,#f5eedf,#eee9f7); border-radius:16px; }.adventure-help .rule-step p { font-size:18px; line-height:1.7; }
@media(max-width:1000px){.adventure-layout{grid-template-columns:minmax(0,1fr) 230px;gap:12px}.adventure-task{padding:17px}.adventure-prompt{font-size:17px}.adventure-task h2{font-size:19px}.adventure-fence-middle{gap:4px}.fence-side{min-width:43px;font-size:11px}}
@media(max-width:650px){.adventure-layout{grid-template-columns:1fr}.adventure-tools{position:static}.adventure-tools .advanced-keypad{max-width:270px;margin:0 auto}.adventure-task{padding:15px}.adventure-heading h1{font-size:24px}.advanced-activity-menu{gap:5px}.advanced-activity-menu .pill-button{font-size:11px;padding:8px}.adventure-topics .pill-button{font-size:11px}.adventure-square-grid{max-width:330px}.adventure-prompt{font-size:17px}.adventure-range{font-size:14px}.adventure-help .rule-step p{font-size:16px}.adventure-help .explain-equation{font-size:23px}.adventure-face strong{font-size:18px}}