.kg-page { --kg-stage: #137b70; background: #f7faf9; color: #283e47; padding-bottom: 64px; min-height: 80vh; }
.kg-page * { letter-spacing: 0; }
.kg-page h1 { font: 600 36px/1.15 var(--display); margin-bottom: 12px; overflow-wrap: anywhere; }
.kg-page h2 { font: 500 27px/1.25 var(--display); }
.kg-page h3 { font: 500 20px/1.3 var(--display); }
.kg-page p { line-height: 1.75; }
.kg-toolbar, .kg-toolbar > div, .kg-toolbar a { display: flex; align-items: center; gap: 10px; }
.kg-toolbar { justify-content: space-between; padding-block: 18px; border-bottom: 1px solid #d8e4df; flex-wrap: wrap; }
.kg-toolbar > div { flex-wrap: wrap; gap: 20px; }
.kg-toolbar a { min-height: 44px; font-weight: 600; font-size: 13px; }
.kg-toolbar a:hover, .kg-link, .kg-back { color: #086a68; }
#kg-room { outline: none; scroll-margin-top: 125px; }
.kg-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 32px 24px; }
.kg-heading p { margin: 0; color: #566c68; }
.kg-eyebrow { display: block; font-weight: 700; font-size: 11px; color: #536c64; margin-bottom: 9px; }
.kg-total { display: grid; grid-template-columns: 32px 1fr; gap: 8px 12px; flex-shrink: 0; font-size: 12px; }
.kg-total > svg { color: #137b70; width: 32px; height: 32px; grid-row: span 2; }
.kg-total strong { font: 500 25px var(--display); margin-right: 5px; }
.kg-total progress { width: 100%; height: 7px; accent-color: #137b70; }
.kg-next { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; align-items: center; padding: 22px 24px; border-block: 1px solid #cadfd6; background: repeating-linear-gradient(90deg, #ebf5ef 0, #ebf5ef 31px, #e4f0e8 31px, #e4f0e8 32px); }
.kg-next > div { display: flex; align-items: center; gap: 10px; color: #346658; font-size: 12px; font-weight: 600; }
.kg-next h2 { margin: 0; grid-column: 1; font-size: 24px; }
.kg-next > a { grid-column: 2; grid-row: 1 / 3; }
.kg-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-block: 26px 32px; }
.kg-stages a { display: grid; grid-template-columns: 36px 1fr; gap: 3px 10px; align-items: center; border: 1px solid #d9e2df; border-bottom: 4px solid var(--kg-stage); background: #fff; border-radius: 8px; padding: 17px 14px; min-width: 0; }
.kg-stages a[aria-current] { outline: 2px solid var(--kg-stage); outline-offset: 2px; }
.kg-stage-number { font: 500 26px var(--display); color: var(--kg-stage); grid-row: span 2; }
.kg-stages strong { font-size: 14px; overflow-wrap: anywhere; }
.kg-stages small { font-size: 11px; color: #596d68; }
.kg-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.kg-section-heading h2 { color: var(--kg-stage); margin-bottom: 10px; }
.kg-section-heading p { max-width: 690px; color: #536a64; }
.kg-link, .kg-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.kg-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kg-page label:not(.kg-radio), .kg-page legend { font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.kg-filters label, .kg-lesson-body label, .kg-weather-form label, .kg-workbench > label { display: block; }
.kg-page input:not([type=radio], [type=checkbox], [type=color], [type=range]), .kg-page select, .kg-page textarea { width: 100%; min-height: 44px; padding: 10px 12px; background: #fff; color: #283e47; border: 1px solid #adc6ba; border-radius: 5px; font-size: 16px; }
.kg-page textarea { resize: vertical; }
.kg-page input[type=radio], .kg-page input[type=checkbox], .kg-page input[type=range] { accent-color: #137b70; }
#kg-result-count { color: #5c6e68; font-size: 12px; margin: 16px 0 6px; }
.kg-topic-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.kg-topic-list > li { min-width: 0; }
.kg-lesson-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 12px; align-items: center; min-height: 90px; padding: 16px 5px; border-bottom: 1px solid #dce5e0; }
.kg-lesson-row:hover { background: #eaf3ef; }
.kg-topic-number { color: #687b73; font: 500 18px var(--display); }
.kg-lesson-row strong { display: block; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.kg-lesson-row small { display: block; color: #5b7169; margin-top: 5px; font-size: 11px; }
.kg-lesson-row > svg { color: var(--kg-stage); }
.kg-back { margin-top: 20px; font-size: 12px; flex-wrap: wrap; }
.kg-lesson-heading { display: flex; align-items: center; gap: 18px; margin-block: 18px 25px; }
.kg-lesson-heading > div { flex: 1; min-width: 0; }
.kg-lesson-heading h1 { font-size: 32px; margin: 0; }
.kg-lesson-symbol { display: grid; place-items: center; width: 68px; height: 68px; background: #fff; border: 1px solid #d8e4de; border-radius: 8px; color: var(--kg-stage); flex-shrink: 0; }
.kg-lesson-symbol svg { width: 38px; height: 38px; }
.kg-icon { width: 44px; height: 44px; border: 1px solid #bdcec5; background: #fff; border-radius: 5px; display: inline-grid; place-items: center; flex-shrink: 0; }
.kg-icon:hover, .kg-icon[aria-pressed=true] { background: #dfefe6; }
.kg-icon:disabled { opacity: .4; cursor: default; }
.kg-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #c6d8ce; margin-bottom: 30px; }
.kg-steps button { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 14px 8px; font-size: 14px; border-bottom: 3px solid transparent; }
.kg-steps button[aria-current] { color: #09675c; border-bottom-color: #137b70; background: #e7f2ec; font-weight: 700; }
.kg-steps span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #fff; flex-shrink: 0; }
.kg-lesson-body { max-width: 780px; margin: 0 auto; padding-block: 8px 24px; }
.kg-learn { font-size: 21px; line-height: 1.8 !important; margin-bottom: 30px; }
.kg-materials, .kg-adult-note { border-block: 1px solid #d4e1d9; padding: 20px 0; margin-bottom: 28px; }
.kg-materials h3 { display: flex; align-items: center; gap: 9px; }
.kg-materials p, .kg-adult-note p { margin-bottom: 0; }
.kg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-block: 18px; }
.kg-outline { background: #fff; border: 1px solid #9fbbb0; color: #176754; }
.kg-small { font-size: 12px; color: #5a6e67; }
.kg-radio { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px 16px 0; min-height: 36px; font-size: 14px; }
.kg-guidance { padding: 20px 0; border-block: 1px solid #d6e1da; margin-bottom: 24px; }
.kg-guidance summary { font-weight: 700; margin-bottom: 12px; cursor: pointer; }
.kg-guidance p { max-width: 880px; }
.kg-guidance a { color: #076d6e; text-decoration: underline; }
.kg-notebook-list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.kg-notebook-list ol { padding-left: 24px; }
.kg-notebook-list li { padding: 12px 0; border-bottom: 1px solid #dce5df; break-inside: avoid; }
.kg-notebook-list li a { font-weight: 600; }
.kg-notebook-list li span { display: block; font-size: 12px; color: #5c7168; }
.kg-notebook-list li p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kg-studio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kg-studio-card { padding: 24px; border: 1px solid #d3e0d8; border-bottom: 4px solid var(--kg-stage); border-radius: 8px; background: #fff; color: var(--kg-stage); }
.kg-studio-card h2 { font-size: 24px; margin-bottom: 8px; }
.kg-studio-card p { color: #596f65; }
.kg-studio-art { display: flex; align-items: center; gap: 24px; min-height: 100px; margin-bottom: 14px; }
.kg-studio-art svg { width: 64px; height: 64px; stroke-width: 1.3; }
.kg-studio-art span { font: 500 32px var(--display); }
.kg-workbench { max-width: 900px; margin: 0 auto; padding-block: 12px; }
.kg-number-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 24px; }
.kg-number-controls output { font: 500 44px var(--display); min-width: 65px; text-align: center; }
.kg-ten-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kg-ten-frame { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid #789b8a; border-left: 2px solid #789b8a; background: #fff; }
.kg-counter-cell { aspect-ratio: 1; border-right: 2px solid #789b8a; border-bottom: 2px solid #789b8a; display: grid; place-items: center; }
.kg-counter { width: 70%; height: 70%; border-radius: 50%; background: #187d75; box-shadow: inset 0 -4px #075d58; }
.kg-counter-coral { background: #c84e67; box-shadow: inset 0 -4px #983c50; }
.kg-equation { text-align: center; font: 500 24px var(--display); margin-block: 20px; min-height: 42px; }
.kg-parts { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; gap: 20px; align-items: center; padding-block: 20px; border-block: 1px solid #cbdcd1; }
.kg-parts output { font: 500 25px var(--display); min-width: 160px; }
.kg-number-challenge { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-block: 24px; }
.kg-number-challenge input { max-width: 90px; }
.kg-number-challenge p { flex-basis: 100%; min-height: 28px; }
.kg-word-picture { display: grid; place-items: center; color: #286ba6; height: 120px; }
.kg-word-picture svg { height: 100px; width: 100px; stroke-width: 1.4; }
.kg-word-picture + .kg-actions { justify-content: center; }
.kg-word-model { height: 52px; text-align: center; font: 500 36px var(--display); margin-bottom: 20px; }
.kg-letter-slots, .kg-letter-bank { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.kg-letter-slots button { width: 80px; height: 88px; border: 2px solid #709bb3; border-radius: 6px; background: #fff; font: 500 40px var(--display); }
.kg-letter-bank button { width: 54px; height: 58px; background: #e4f0f8; border: 1px solid #98b7ca; border-radius: 6px; color: #215577; font: 500 30px var(--display); }
#kg-word-feedback { text-align: center; min-height: 60px; }
.kg-draw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.kg-draw-tools input[type=color] { width: 48px; height: 44px; padding: 2px; border: 1px solid #b4c8be; background: #fff; }
.kg-draw-tools input[type=range] { width: 120px; }
#kg-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: #fff; border: 1px solid #a4beaf; touch-action: none; margin-bottom: 20px; }
.kg-weather-form { display: grid; gap: 18px; }
.kg-weather-form input[type=date] { max-width: 240px; }
.kg-weather-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.kg-weather-choices label { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 2px solid #cfdfd5; text-transform: capitalize; }
.kg-weather-choices label:has(input:checked) { border-color: #137b70; background: #e5f2e9; }
.kg-weather-counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; border-block: 1px solid #c8dad0; padding-block: 22px; margin-block: 24px; }
.kg-weather-counts > div { display: flex; align-items: center; flex-direction: column; gap: 5px; text-align: center; }
.kg-weather-counts strong { font: 500 30px var(--display); }
.kg-weather-counts span { font-size: 12px; }
.kg-weather-counts svg { color: #8a6216; }
.kg-weather-records { padding: 0; list-style: none; }
.kg-weather-records li { display: flex; gap: 18px; align-items: center; border-bottom: 1px solid #d5e2d9; padding-block: 12px; }
.kg-weather-records li span { flex: 1; overflow-wrap: anywhere; }
.kg-weather-records svg { margin-right: 8px; }
#kg-storage-message { padding: 12px; background: #fff2ce; color: #66501c; margin-top: 16px; }
.kg-page :focus-visible { outline: 3px solid #bb731c; outline-offset: 3px; }
@media (max-width: 760px) {
  .kg-page .wrap { width: calc(100% - 32px); }
  .kg-heading { align-items: flex-start; flex-wrap: wrap; }
  .kg-page h1 { font-size: 30px; }
  .kg-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kg-topic-list, .kg-notebook-list { grid-template-columns: 1fr; }
  .kg-section-heading { align-items: flex-start; flex-direction: column; gap: 0; }
  .kg-lesson-heading { flex-wrap: wrap; gap: 12px; }
  .kg-lesson-symbol { width: 48px; height: 48px; }
  .kg-lesson-symbol svg { width: 28px; height: 28px; }
  .kg-lesson-heading h1 { font-size: 26px; }
  .kg-steps button { flex-direction: column; gap: 7px; font-size: 12px; }
  .kg-learn { font-size: 19px; }
  .kg-ten-frames { grid-template-columns: 1fr; gap: 18px; max-width: 390px; margin-inline: auto; }
  .kg-parts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kg-parts input { width: 100%; }
  .kg-parts output { grid-column: span 2; }
}
@media (max-width: 480px) {
  .kg-toolbar > div { gap: 8px 14px; }
  .kg-toolbar a { font-size: 12px; }
  .kg-next { grid-template-columns: 1fr; padding: 20px 14px; }
  .kg-next > a { grid-column: 1; grid-row: auto; justify-self: start; }
  .kg-stages { gap: 10px; }
  .kg-stages a { grid-template-columns: 26px 1fr; padding: 12px 8px; }
  .kg-stage-number { font-size: 21px; }
  .kg-filters, .kg-studio-grid { grid-template-columns: 1fr; }
  .kg-weather-counts { gap: 5px; }
  .kg-weather-records li { gap: 8px; font-size: 12px; }
  .kg-actions .button { width: 100%; }
}
@media print {
  .site-header, .site-footer, footer, .kg-toolbar, .kg-icon, .kg-guidance:last-child, #kg-storage-message { display: none !important; }
  .kg-page, .kg-page .wrap { background: #fff; width: 100%; }
  .kg-notebook-list { display: block; }
  .kg-notebook-list section { break-before: auto; }
  .kg-notebook-list li { break-inside: avoid; }
  .kg-notebook-list a { color: #000; text-decoration: none; }
}