:root {
  --ink:#252244; --muted:#655778; --purple:#7150dc; --violet:#f1ebff;
  --blue:#397eaf; --green:#167a57; --shadow:0 12px 35px rgba(51,36,105,.1);
}
* { box-sizing:border-box; }
html { min-height:100%; background:#f7f3ff; }
body {
  margin:0; min-height:100vh; color:var(--ink);
  background:radial-gradient(circle at 0 0,#fff7d4 0,transparent 38%),radial-gradient(circle at 100% 15%,#e8dcff 0,transparent 45%),#f7f3ff;
  font-family:ui-rounded,'Trebuchet MS',system-ui,-apple-system,sans-serif; line-height:1.45;
}
button,input { font:inherit; }
button { cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #4437b6; outline-offset:3px;
}
button:disabled { cursor:default; opacity:.65; }
a { color:#583cb1; }
p { margin:10px 0; }
h1 { font-size:32px; line-height:1.15; letter-spacing:-1px; margin:12px 0 8px; color:#382269; }
h2 { margin:0; font-size:24px; line-height:1.25; letter-spacing:-.5px; }
h3 { margin:10px 0; font-size:20px; }
.wrap { width:min(650px,100%); margin:auto; padding:16px 16px 32px; }
.hide { display:none!important; }
.panel { background:#fff; border:2px solid #f1eafa; border-radius:25px; padding:22px; box-shadow:var(--shadow); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-bottom:12px; }
.brand { display:flex; align-items:center; gap:8px; color:#5841ad; font-size:14px; font-weight:900; letter-spacing:.5px; }
.brand img { display:block; flex:none; object-fit:contain; }
.home-button { min-height:44px; padding:8px 12px; border:1px solid #e1d8f5; border-radius:14px; background:white; color:#583cb1; font-size:13px; font-weight:800; }
.saving-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:14px; padding:8px 12px; border-radius:15px; background:#e6f7ed; color:#205a43; }
.saving-bar p { margin:0; font-size:13px; font-weight:800; }
.saving-bar #savingNote { margin-top:3px; font-size:11px; font-weight:400; }
.saving-bar button { flex:none; min-height:44px; border:0; border-radius:11px; padding:8px 12px; background:white; color:#583cb1; font-size:13px; font-weight:800; }
.saving-bar.not-saving { background:#fff2dc; color:#74501c; }
.hero { text-align:center; padding:22px; }
.site-logo { display:block; width:160px; max-width:100%; height:auto; margin:0 auto 8px; }
.hero-sub { color:var(--muted); font-size:15px; margin:0 0 18px; }
.activities { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.activity { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:130px; padding:14px 8px; border:2px solid #cbbaf5; border-radius:20px; background:#f1ebff; color:#4b308f; }
.activity:hover { background:#e8dfff; }
.activity-icon { font-size:32px; line-height:1.2; }
.activity strong { font-size:25px; }
.activity>span:last-child { font-size:12px; font-weight:700; }
.clock-activity { border-color:#a8d7cb; background:#e9faf3; color:#235f4f; }
.clock-activity:hover { background:#daf3e8; }
.learning { margin-top:16px; text-align:center; }
.learning h2 { font-size:20px; }
.learning-sub,.round-count { color:var(--muted); font-size:13px; }
.totals { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.totals>div { padding:10px; border-radius:15px; background:#f6f1ff; }
.totals strong { display:block; font-size:31px; line-height:1.2; color:#583cb1; font-variant-numeric:tabular-nums; }
.totals span { color:#655778; font-size:13px; }
.small-print { color:var(--muted); font-size:12px; }
.btn { display:inline-flex; justify-content:center; align-items:center; width:100%; min-height:52px; padding:13px 17px; border:0; border-radius:15px; font-size:16px; font-weight:900; gap:8px; }
.primary { background:#7150dc; color:#fff; box-shadow:0 5px 0 #5034aa; }
.primary:active { transform:translateY(2px); box-shadow:0 3px 0 #5034aa; }
.secondary { background:#f1ebff; color:#583cb1; }
.tertiary { background:transparent; color:#66527f; font-size:13px; min-height:44px; }
.menu-button { margin-top:12px; }
.homework-details,.progress-tools { margin-top:16px; padding:12px 16px; border:1px solid #e1d8f5; border-radius:18px; background:white; color:#584a76; font-size:14px; }
summary { cursor:pointer; min-height:44px; align-content:center; font-weight:800; }
.headstats { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.phase { color:#67439c; font-size:12px; font-weight:900; }
.counter { color:#655778; font-size:13px; font-weight:800; }
.stars { color:#67439c; font-size:15px; font-weight:900; }
.stars strong { font-size:20px; font-variant-numeric:tabular-nums; }
.meter { height:10px; width:100%; border-radius:50px; background:#e8e2f5; overflow:hidden; margin:10px 0 16px; }
.meter>div { height:100%; width:0; border-radius:50px; background:linear-gradient(90deg,#9377e9,#37a784); transition:width .2s; }
.paper { position:relative; overflow:hidden; }
.titleline { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:8px; }
.titleline h2 { font-size:24px; }
.taskbadge { max-width:100%; white-space:normal; overflow-wrap:anywhere; border-radius:16px; padding:5px 9px; background:#fff1df; color:#82501d; font-size:12px; font-weight:800; }
.aid-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.aid-choice button { min-height:48px; padding:8px 6px; border:2px solid #e4dbf5; border-radius:13px; background:white; color:#655778; font-size:13px; font-weight:800; }
.aid-choice [aria-pressed=true] { border-color:#7150dc; background:#eee6ff; color:#4c308f; }
.instruction { min-height:21px; margin:12px 0; color:#655778; font-size:14px; }
.board { max-width:300px; margin:12px auto; padding:12px 14px 15px; border:2px solid #eee7fb; border-radius:20px; background:#fbf9ff; }
.board-head,.board-row { display:grid; grid-template-columns:32px 1fr 1fr; align-items:center; text-align:center; gap:8px; }
.board-head { color:#655778; font-size:11px; font-weight:900; }
.board-row { margin:5px 0; }
.math-digit { font-size:37px; font-weight:900; line-height:1.2; border-radius:10px; font-variant-numeric:tabular-nums; }
.math-digit.active { background:#eae2ff; color:#6642cf; }
.math-sign { color:#a8502e; font-size:28px; font-weight:900; }
.board-line { height:3px; margin:9px 0 9px 40px; border-radius:5px; background:#3c3461; }
.answer-digit { min-height:44px; border:2px dashed #bba7da; border-radius:12px; background:white; color:#65509e; font-size:29px; font-weight:900; line-height:40px; }
.answer-digit.filled { border:2px solid #77b99f; background:#e1f8ed; color:#117a5c; }
.question { margin:12px 0; text-align:center; font-size:20px; font-weight:900; }
.direct-answer { margin:16px 0 12px; }
.direct-answer label { display:block; color:#655778; font-size:14px; font-weight:800; margin-bottom:6px; }
.answer-entry { display:grid; grid-template-columns:90px 1fr; gap:12px; }
.answer-entry input { min-width:0; width:100%; min-height:54px; padding:6px; border:2px solid #9276ce; border-radius:14px; text-align:center; font-size:30px; font-weight:900; color:#382269; font-variant-numeric:tabular-nums; }
.blocks-title { margin:14px 0 8px; color:#65518d; text-align:center; font-size:13px; font-weight:900; }
.blocks { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; min-height:78px; padding:12px 6px; border:1px solid #e4dbf5; border-radius:18px; background:#f9f7ff; }
.block-group { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; max-width:100%; --block:#8e6ce4; --grid:#e1d8fa; }
.block-group.blue { --block:#5e85ea; --grid:#d9e4ff; }
.block-group.orange { --block:#e79848; --grid:#ffddae; }
.one { position:relative; display:inline-block; flex-shrink:0; width:44px; height:44px; border:2px solid #438b70; border-radius:50%; background:#68cda3; }
.block-group.blue .one { background:#5e85ea; border-color:#4569c6; }
.block-group.orange .one { background:#f5ac62; border-color:#a96826; }
.ten { position:relative; display:inline-flex; flex-shrink:0; flex-direction:column; overflow:hidden; width:44px; height:84px; padding:0; border:2px solid #6744aa; border-radius:7px; background:var(--block,#8e6ce4); }
.ten-cell { display:block; flex:1 1 0; width:100%; min-height:0; border-bottom:1px solid var(--grid,#e1d8fa); pointer-events:none; }
.ten-cell:last-child { border-bottom:0; }
.pick-block { padding:0; }
.pick-block.unselected { opacity:.65; border-style:dashed; }
.pick-block.selected { opacity:1; outline:3px solid #5841ad; outline-offset:-3px; }
.removed { opacity:.5; }
.removed::after { content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#a6123a; font-size:32px; font-weight:900; }
.group-op { color:#7652a0; font-size:25px; font-weight:900; }
.blocks-note { margin:7px 0 10px; color:#655778; text-align:center; font-size:13px; }
.mark-done { margin-top:12px; }
.keypad { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:12px 0; }
.num { min-height:54px; padding:4px; border:2px solid #d8c9ef; border-radius:14px; background:white; color:#453674; font-size:25px; font-weight:900; box-shadow:0 3px 0 #e2d8f6; }
.feedback { margin:14px 0 0; padding:12px; min-height:46px; border-radius:14px; background:#f5f0ff; color:#624494; text-align:center; font-size:14px; font-weight:800; }
.feedback.good { background:#e1f8ec; color:#176c4b; }
.feedback.try { background:#fff0dd; color:#7e4b1d; }
.help { display:block; margin:10px auto 0; min-height:44px; padding:8px 14px; border:1px solid #d7caed; border-radius:25px; background:white; color:#624494; font-size:13px; font-weight:800; }
.hint { padding:12px; margin-top:10px; border:1px solid #e3d39d; border-radius:14px; background:#fff8e3; color:#705425; font-size:14px; }
.donecard { margin:16px 0; padding:20px 12px; border:2px solid #c5e7d4; border-radius:22px; background:linear-gradient(135deg,#ebfff5,#f4f0ff); text-align:center; }
.party { display:block; font-size:36px; }
.donecard .total { color:#3f329a; font-size:60px; line-height:1.2; font-weight:900; }
.donecard p { color:#655778; font-size:14px; font-weight:700; }
.step-footer { margin-top:16px; }
.tiny-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tiny-nav button { min-height:44px; padding:8px 10px; border:0; border-radius:12px; background:transparent; color:#655778; font-size:12px; font-weight:800; }
.end { text-align:center; padding:30px 20px; }
.end h2 { font-size:30px; color:#382269; }
.trophy { display:block; font-size:72px; }
.finish-mini { margin:18px 0; padding:16px; border-radius:16px; background:#f2ebff; color:#513a9d; font-weight:800; }
.sparkles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sparkle { position:absolute; font-size:24px; animation:pop .8s both; }
@keyframes pop { 0%{transform:translateY(18px);opacity:0} 40%{opacity:1} 100%{transform:translateY(-50px);opacity:0} }
.clock-guide { color:#655778; font-size:14px; }
.clock-levels { display:grid; gap:12px; margin-top:20px; }
.clock-face { width:clamp(180px,55vw,240px); max-width:100%; margin:12px auto; }
.clock-face svg { display:block; width:100%; height:auto; }
.clock-answers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.clock-answers button { min-height:54px; font-size:23px; font-variant-numeric:tabular-nums; }
.save-choice { display:flex; align-items:center; gap:10px; min-height:48px; }
.save-choice input { flex:none; width:24px; height:24px; accent-color:#7150dc; }
.progress-actions { display:grid; gap:10px; }
.progress-actions .btn { min-height:46px; font-size:14px; }
dialog { width:min(430px,calc(100% - 24px)); max-height:calc(100dvh - 30px); overflow:auto; border:2px solid #e1d8f5; border-radius:24px; padding:24px; color:var(--ink); background:white; box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(37,34,68,.5); }
dialog h2 { color:#382269; }
dialog .primary { margin-top:14px; }
.privacy h1 { font-size:30px; }
.privacy h2 { font-size:21px; margin-top:26px; }
.privacy li { margin:10px 0; }
@media(max-width:390px) {
  .wrap { padding:10px 12px 26px; }
  .panel { padding:16px 14px; border-radius:22px; }
  .hero { padding:16px 14px; }
  .site-logo { width:120px; }
  h1 { font-size:27px; margin-top:8px; }
  .hero-sub { font-size:13px; margin-bottom:14px; }
  .activity { min-height:116px; gap:3px; }
  .activity strong { font-size:22px; }
  .activity-icon { font-size:28px; }
  .activity>span:last-child { font-size:11px; }
  .saving-bar { padding:6px 9px; gap:6px; margin-bottom:12px; }
  .saving-bar p { font-size:12px; }
  .saving-bar #savingNote { font-size:11px; }
  .titleline h2 { font-size:22px; }
  .aid-choice button { font-size:12px; }
  .math-digit { font-size:34px; }
  .board { padding:10px; }
  .keypad { gap:6px; }
  .answer-entry { grid-template-columns:76px 1fr; gap:9px; }
  .answer-entry .btn { font-size:14px; }
  dialog { padding:20px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}