/* A calm set of surfaces makes the next action easy to find. */
@media screen {
  body { background: #f1f4f6; }
  body:not(.in-reader) .topbar { border-color: #d9e2e8; }
  body:not(.in-reader) main { padding-top: 38px; }
  body:not(.in-reader) .hero { margin-bottom: 24px; }
  body:not(.in-reader) .hero .eyebrow { color: #55718a; }
  body:not(.in-reader) .hero h1 { color: #203b59; margin: 10px 0 12px; }
  body:not(.in-reader) .hero > p:last-child { color: #586d7e; }
  .home-search { padding: 8px; border: 1px solid #d9e3ea; border-radius: 16px; background: #fff; box-shadow: 0 3px 14px #2b50620a; }
  .home-search .search-wrap { background: #f4f7f9; border-color: transparent; border-radius: 10px; }
  .home-search input[type=search] { min-height: 46px; }
  .home-search .button { border-radius: 10px; }
  .continue { background: #e5eff8; border: 1px solid #cfdeea; border-radius: 14px; padding: 12px 16px; color: #254b72; }
  .continue:hover { background: #dcebf7; color: #173e65; }
  body:not(.in-reader) .section-head { margin-top: 28px; }
  .section-head h2 { color: #284862; font-weight: 600; }
  .topic-grid { gap: 12px; }
  .topic-card {
    --widget: #345f87; --widget-tint: #e9f1f8;
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px;
    align-items: start; min-height: 106px; padding: 17px;
    border: 1px solid #dce5eb; border-radius: 15px; background: #fff;
    box-shadow: 0 3px 12px #2b506208;
  }
  .topic-card:nth-child(3n + 2) { --widget: #3b6b5c; --widget-tint: #e7f1ec; }
  .topic-card:nth-child(3n) { --widget: #7b5d3a; --widget-tint: #f6eee1; }
  .topic-card:hover { border-color: #adbfcd; box-shadow: 0 5px 16px #2b506214; }
  .topic-number { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 11px; background: var(--widget-tint); color: var(--widget); font-size: 11px; }
  .topic-card h3 { color: #243f59; font-size: 16px; line-height: 1.4; }
  .topic-card p { color: #607687; margin-top: 5px; }
  .topic-card .arrow { color: var(--widget); padding: 0; }
  .lesson-list { gap: 8px; }
  .lesson-link { padding: 15px 17px; border: 1px solid #dce5eb; border-radius: 14px; background: #fff; }
  .lesson-id { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #e9f1f8; color: #345f87; }
  .worksheet-reader { --sheet-blue: #285780; }
  .sheet-question { border-color: #d8e2e9; border-radius: 11px; box-shadow: 0 4px 15px #254b6610; }
  .sheet-model { border-color: #d2e0e9; border-radius: 11px; background: #fbfdff; box-shadow: 0 3px 12px #254b660a; }
  .sheet-small-button { border-radius: 9px; background: #edf5fb; }
  .worksheet-bottom .screen-primary { border-radius: 10px; }
  .sheet-middle-action { min-height: 40px; padding: 5px 8px; color: #355b7b; font-size: 11px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 9px; }
  .sheet-middle-action:hover, .sheet-middle-action:focus-visible { background: #e3edf5; }
  .sheet-level { background: #e7eff6; }
  .sheet-middle-action svg, .sheet-enlarge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .sheet-mark { color: #315f50; background: #e7f1ec; }
  .sheet-enlarge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; color: #315c80; padding: 3px 5px; border-radius: 8px; font-size: 10px; }
  .sheet-enlarge:hover, .sheet-enlarge:focus-visible { background: #e4eff7; }
  .screen-model-fit .model-comparison.comparison-side-by-side, .sheet-model-canvas .model-comparison.comparison-side-by-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .comparison-side-by-side .comparison-item + .comparison-item { border: 0; padding-top: 0; }
  .comparison-side-by-side .comparison-label { margin-bottom: 2px; }
  .worksheet-bottom.has-middle-action { grid-template-columns: minmax(0, 1fr) max-content max-content; }
}
@media screen and (max-width: 700px) {
  body:not(.in-reader) main { padding-top: 20px; }
  body:not(.in-reader) .hero { margin-bottom: 18px; }
  body:not(.in-reader) .hero h1 { font-size: 27px; margin: 7px 0 9px; }
  body:not(.in-reader) .hero > p:last-child { font-size: 12px; }
  .home-search { margin-bottom: 12px; padding: 6px; gap: 6px; }
  .home-search input[type=search] { font-size: 13px; padding: 10px; }
  .home-search .button { padding-inline: 13px; }
  .continue { font-size: 11px; min-height: 46px; }
  body:not(.in-reader) .section-head { margin-top: 22px; margin-bottom: 10px; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .topic-card { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 12px; min-height: 104px; border-radius: 13px; }
  .topic-number { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; }
  .topic-card h3 { font-size: 14px; line-height: 1.45; }
  .topic-card p { font-size: 11px; margin-top: 4px; }
  .topic-card .arrow { display: none; }
  .lesson-link { gap: 12px; padding: 12px; }
  .lesson-id { width: 34px; height: 34px; }
  .sheet-model { grid-template-rows: 34px auto minmax(0, 1fr) 32px; }
  .sheet-model:not(:has(.sheet-inline-hint)) { grid-template-rows: 34px minmax(0, 1fr) 32px; }
  .worksheet-bottom.has-middle-action { gap: 4px; }
  .sheet-middle-action { padding-inline: 7px; font-size: 11px; }
}
@media screen and (max-width: 360px) {
  .worksheet-bottom .screen-primary { min-width: 0; padding-inline: 8px; gap: 4px; font-size: 11px; white-space: nowrap; }
  .sheet-middle-action { font-size: 10px; padding-inline: 5px; }
}
@media screen and (max-height: 550px) {
  .sheet-model { grid-template-rows: 32px auto minmax(0, 1fr) 29px; }
  .sheet-model:not(:has(.sheet-inline-hint)) { grid-template-rows: 32px minmax(0, 1fr) 29px; }
}

/* Range inputs have a default side margin on mobile browsers. */
.sheet-menu-content input[type=range] { margin-inline: 0; }

@media screen {
  .arithmetic-entry { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; max-width: 640px; margin-top: 10px; padding: 13px 16px; border: 1px solid #d2dfdd; border-radius: 14px; background: #edf5f1; color: #315d50; }
  .arithmetic-entry:hover { border-color: #9eb9ad; background: #e5f1eb; }
  .arithmetic-entry strong, .arithmetic-entry small { display: block; }
  .arithmetic-entry strong { font-size: 14px; font-weight: 600; }
  .arithmetic-entry small { margin-top: 3px; font-size: 11px; color: #5d776b; }
  .arithmetic-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: #d7e9df; color: #315d50; font-size: 24px; }
  .setup-back { display: inline-flex; align-items: center; min-height: 44px; color: #41617d; font-size: 13px; }
  .arithmetic-setup { max-width: 640px; margin: 22px 0; padding: 28px; background: #fff; border: 1px solid #dce5eb; border-radius: 18px; box-shadow: 0 4px 20px #2b50620b; }
  .arithmetic-setup h1 { color: #203b59; font-size: 32px; margin: 9px 0 13px; }
  .arithmetic-setup > p:not(.eyebrow) { color: #586d7e; font-size: 14px; }
  .arithmetic-setup form { margin-top: 30px; }
  .arithmetic-setup fieldset { border: 0; margin: 0; padding: 0; }
  .arithmetic-setup legend { font-size: 13px; color: #35556e; margin-bottom: 13px; }
  .arithmetic-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .arithmetic-counts label { display: block; position: relative; cursor: pointer; }
  .arithmetic-counts input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .arithmetic-counts label > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 84px; border: 1px solid #d9e4ea; border-radius: 13px; background: #f7fafb; color: #305677; font-size: 24px; }
  .arithmetic-counts small { font-size: 10px; }
  .arithmetic-counts input:checked + span { border: 2px solid #315f84; background: #e9f2f9; }
  .arithmetic-counts input:focus-visible + span { outline: 2px solid #ad471e; outline-offset: 3px; }
  .arithmetic-tip { color: #607687; font-size: 12px; margin: 18px 0; }
  .arithmetic-start { width: 100%; border-radius: 10px; }
}
@media screen and (max-width: 700px) {
  .arithmetic-entry { padding: 10px 13px; }
  .arithmetic-entry strong { font-size: 13px; }
  body:not(.in-reader) main:has(.arithmetic-setup) { padding-top: 8px; }
  .setup-back { min-height: 34px; }
  .arithmetic-setup { margin-top: 0; padding: 16px; }
  .arithmetic-setup .eyebrow, .arithmetic-setup > p:not(.eyebrow) { display: none; }
  .arithmetic-setup h1 { font-size: 24px; margin: 0 0 12px; }
  .arithmetic-resume { min-height: 40px; padding: 8px 12px; }
  .arithmetic-setup form { margin-top: 14px; }
  .arithmetic-setup legend { margin-bottom: 8px; }
  .arithmetic-tip { margin: 10px 0; line-height: 1.35; }
  .arithmetic-counts { gap: 7px; }
  .arithmetic-counts label > span { min-height: 62px; font-size: 21px; }
}

/* A small set of materials, shared across the paper and its help. */
@media screen {
  .arithmetic-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
  .arithmetic-heading > div { min-width:0; }
  .arithmetic-heading .eyebrow { color:#557889; margin:0 0 6px; }
  .arithmetic-heading h1 { margin:0 0 8px; }
  .arithmetic-heading p:not(.eyebrow) { color:#586d7e; margin:0; font-size:13px; line-height:1.5; }
  .arithmetic-mark { flex:none; display:grid; grid-template-columns:repeat(2, 13px); gap:5px; padding:12px; border-radius:16px; background:#e8f2ee; box-shadow:inset 0 0 0 1px #d1e4dc; }
  .arithmetic-mark i { width:13px; height:13px; border-radius:50%; background:#5e9d87; box-shadow:inset 0 1px 0 #ffffffa0; }
  .arithmetic-mark i:nth-child(2), .arithmetic-mark i:nth-child(3) { background:#d3a256; }
  .arithmetic-setup .arithmetic-resume { margin-top:18px; }
  .arithmetic-counts label > span { transition:background .16s ease, border-color .16s ease, transform .16s ease; }
  .arithmetic-counts label:hover > span { border-color:#96b1c5; }
  .arithmetic-counts input:checked + span { color:#173f68; box-shadow:inset 0 0 0 1px #315f84; }
  .sheet-deeper { color:#62517b; background:#f0ebf6; }
  .worksheet-top::after { height:3px; border-radius:2px; background:#315f92; }
  .sheet-model { background:#fcfdff; }
  .sheet-model-controls > button, .sheet-enlarge { position:relative; }
  .sheet-model-controls > button::before, .sheet-enlarge::before { content:''; position:absolute; inset:-7px -5px; }
  .sheet-home { max-width:100%; }
  .sheet-home > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .model-dialog[open] {
    position:fixed;
    inset:calc(var(--visible-top, 0px) + var(--visible-height, 100dvh) / 2) 0 auto;
    display:flex;
    flex-direction:column;
    margin:0 auto;
    max-height:calc(var(--visible-height, 100dvh) - 20px);
    transform:translateY(-50%);
    overflow:hidden;
  }
  .model-dialog .dialog-top, .model-dialog .model-zoom { flex:none; }
  .model-dialog .model-zoom button { min-height:44px; }
  .model-dialog .model-viewport { flex:0 1 auto; min-height:0; max-height:none; scrollbar-gutter:stable; }
  #large-model { width:var(--model-base-width, 100%); }
  #large-model :is(.model-scroll, .line-scroll, .table-scroll) { overflow:visible; }
  .arith-model { width:min(100%, 320px); margin:auto; color:#254c70; }
  .arith-two-groups { display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); align-items:center; gap:6px; }
  .arith-counter-group { display:grid; justify-items:center; gap:4px; padding:7px 5px; border:1px solid #d0dfeb; border-radius:11px; background:#f2f7fb; }
  .arith-counter-group strong { font-size:15px; font-weight:500; line-height:1.2; }
  .arith-counter-group > div { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:120px; }
  .arith-operator { color:#49677d; text-align:center; font-size:20px; line-height:1; }
  .arith-counter { position:relative; display:inline-block; flex:none; width:16px; height:16px; border:1px solid #467bb6; border-radius:50%; background:radial-gradient(circle at 35% 25%, #eaf5ff, #a9cdf0 74%); box-shadow:inset 0 -1px 0 #274c6c2b, 0 1px 1px #274c6c22; }
  .arith-counter.second { border-color:#a67834; background:radial-gradient(circle at 35% 25%, #fff6dc, #ebc77e 75%); }
  .arith-counter.is-crossed::after { content:''; position:absolute; left:-2px; right:-2px; top:6px; border-top:2px solid #a24e43; transform:rotate(-43deg); }
  .arith-ten-frames { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
  .arith-ten-frame { display:grid; grid-template-columns:repeat(5,16px); gap:4px; padding:6px; border:1px solid #c9dbe9; border-radius:9px; background:#f5f9fc; min-height:48px; align-content:center; }
  .arith-whole { display:flex; justify-content:center; align-items:baseline; gap:9px; margin-bottom:6px; color:#647989; font-size:12px; }
  .arith-whole strong { color:#285780; font-size:21px; font-weight:500; line-height:1.2; }
  .arith-share-groups { display:grid; grid-template-columns:repeat(var(--groups), minmax(0,1fr)); gap:5px; }
  .arith-share-groups > span { display:grid; place-items:center; min-height:27px; border:1px solid #b9cfe0; border-radius:15px; background:#f1f7fb; color:#6b7f92; font-size:15px; line-height:1; }
  .arith-group-label { margin-top:5px; color:#637b8c; text-align:center; font-size:11px; }
  .arith-group-label strong { color:#315f84; font-size:13px; font-weight:500; }
  .arith-check { width:fit-content; max-width:100%; margin:auto; padding:10px 18px; border:1px solid #d0dfeb; border-radius:11px; background:#f2f7fb; color:#285780; font-size:22px; text-align:center; }
  .arith-parts-row { display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); align-items:center; gap:6px; }
  .arith-part { display:grid; place-items:center; min-height:40px; padding:5px; border:1px solid #bdd2e4; border-radius:9px; background:#f0f6fc; font-size:20px; }
  .arith-part.is-unknown { border-style:dashed; border-color:#aa95bf; color:#7650a3; background:#f8f4fb; }
  .arith-part.is-active { border-color:#c08a3f; background:#fff3db; }
  .arith-decimal-column { width:fit-content; margin:auto; color:#285780; font-size:21px; font-variant-numeric:tabular-nums; }
  .arith-decimal-row { display:grid; grid-template-columns:22px 22px 12px 22px; align-items:center; text-align:center; line-height:1.35; }
  .arith-decimal-sign { color:#647989; }
  .arith-decimal-result { margin-left:22px; padding-top:3px; border-top:1px solid #7696b3; color:#7650a3; text-align:center; line-height:1.2; }
}
@media screen and (max-width:700px) {
  .arithmetic-heading { gap:12px; }
  .arithmetic-heading .eyebrow { font-size:10px; margin-bottom:4px; }
  .arithmetic-heading h1 { font-size:23px; line-height:1.35; margin:0; }
  .arithmetic-heading p:not(.eyebrow) { display:none; }
  .arithmetic-mark { grid-template-columns:repeat(2, 10px); gap:4px; padding:10px; border-radius:12px; }
  .arithmetic-mark i { width:10px; height:10px; }
  .arithmetic-setup .arithmetic-resume { margin-top:11px; }
}
@media (prefers-reduced-motion:reduce) { .arithmetic-counts label > span { transition:none; } }