.chapter-levels { scroll-margin-top:100px; }
.chapter-levels [hidden] { display:none!important; }
.level-navigation { padding:22px 24px 16px; margin-bottom:24px; background:#f0f2e8; border:1px solid #d8dfcf; border-radius:17px; }
.level-nav-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; }
.level-nav-heading .eyebrow { font-size:9px; margin:0 0 5px; }
.level-nav-heading p { margin:0; color:#435c4e; font-size:13px; }
.level-total { color:#315849; font-size:12px; font-weight:650; white-space:nowrap; }
.level-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.level-step { display:flex; align-items:center; gap:12px; text-align:left; padding:14px; border:1px solid #cbd5c2; border-radius:11px; color:#395342; background:#fffef8; font:inherit; cursor:pointer; min-height:78px; }
.level-step[aria-current=step] { border:2px solid #2e6554; padding:13px; background:#e4efdf; box-shadow:0 0 0 3px #2e65540b; }
.level-step:disabled { cursor:default; background:#eeeee6; border-color:#dadcd2; color:#697368; }
.level-step[aria-current=step]:disabled { background:#e4efdf; }
.level-step strong { display:block; font-family:Georgia,'Times New Roman',serif; font-size:20px; font-weight:400; }
.level-step small { display:block; margin-top:4px; font-size:10px; line-height:1.5; }
.level-step-symbol { display:grid; place-items:center; flex:0 0 33px; width:33px; height:33px; border-radius:50%; background:#edf0e4; color:#54725a; font-family:Georgia,serif; font-size:17px; }
.level-step--complete .level-step-symbol { background:#2e6554; color:white; }
.level-locked { margin-left:auto; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.level-nav-note { color:#677665; font-size:11px; margin:12px 0 0; line-height:1.6; }
.level-lab { border:1px solid var(--line,#d8dfcf); border-radius:17px; background:#fffef8; overflow:hidden; }
.level-lab-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:25px 28px 0; }
.level-lab-heading .eyebrow { font-size:9px; margin-bottom:8px; }
.level-lab h2 { font-family:Georgia,'Times New Roman',serif; font-size:30px; font-weight:400; letter-spacing:-.025em; margin:0; line-height:1.16; }
.level-task-dots { display:flex; list-style:none; gap:8px; padding:0; margin:0; flex-shrink:0; }
.level-task-dots li { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; border:1px solid #d5ddce; color:#687766; font-size:12px; }
.level-task-dots li[aria-current] { background:#285c4d; color:white; border-color:#285c4d; }
.level-task-dots li.done { background:#e0ecd9; color:#37634b; }
.level-intro { color:#596b5f; font-size:13px; line-height:1.7; margin:13px 28px 23px; max-width:85ch; }
.level-lab-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); border-top:1px solid #e2e5da; }
.level-lab-picture { padding:25px 21px; background:#f5f1e7; min-width:0; }
.level-lab-picture svg { width:100%; height:auto; display:block; border-radius:11px; background:#f8f4e8; }
.level-lab-picture>p { color:#67766b; font-size:12px; line-height:1.8; margin:19px 11px 0; }
.level-lab-controls { padding:25px 28px; min-width:0; }
.level-task-instruction { background:#f0f3e8; border-left:3px solid #9eb188; border-radius:0 7px 7px 0; padding:15px 17px; font-size:13px; line-height:1.8; color:#38543f; margin-bottom:22px; }
.level-field { margin:0 0 19px; }
.level-field>label,.level-choice legend { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; line-height:1.6; font-weight:650; color:#38553e; margin-bottom:8px; }
.level-field output { color:#547549; font-size:12px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.level-input-row { display:flex; align-items:center; gap:10px; }
.level-input-row>span { color:#65745f; font-size:12px; }
.level-input-row input[type=number] { width:100%; min-width:0; max-width:250px; font:inherit; font-size:16px; color:#294a3c; background:white; border:1px solid #bdcbb5; border-radius:8px; padding:10px 12px; min-height:44px; }
.level-input-row input[type=range] { width:100%; min-width:0; min-height:36px; margin:0; accent-color:#3d6a51; cursor:pointer; }
.level-field-help { font-size:11px; line-height:1.7; color:#70816a; margin:7px 0 0; }
.level-choice { margin:0 0 20px; padding:0; border:0; }
.level-choice legend { margin-bottom:10px; }
.level-choice>label { display:flex; align-items:flex-start; gap:9px; padding:10px 11px; margin:6px 0; border:1px solid #dce2d3; border-radius:8px; font-size:12px; line-height:1.6; cursor:pointer; background:#fffefa; }
.level-choice input { flex:0 0 auto; width:16px; height:16px; margin:2px 0 0; accent-color:#376851; }
.level-choice>label:has(input:checked) { background:#eaf2e4; border-color:#79976b; }
.level-form-actions { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:22px; }
.level-reset { border:0; background:none; color:#687864; font:inherit; font-size:11px; text-decoration:underline; text-underline-offset:3px; padding:10px 4px; cursor:pointer; }
.level-score-note { font-size:10px; line-height:1.8; color:#76816f; margin:14px 0 0; }
.level-feedback { font-size:12px; line-height:1.8; margin-top:15px; }
.level-feedback:not(:empty) { border-radius:9px; padding:12px 14px; background:#f4eedb; color:#6e5c33; }
.level-feedback[data-kind=success] { background:#e4f0dc; color:#376044; }
.level-feedback[data-kind=error] { background:#f8e9df; color:#815139; }
.level-task-next { margin-top:16px; }
.level-ending { display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); overflow:hidden; border:1px solid #d9dfd0; border-radius:22px; background:#fffdf5; box-shadow:0 12px 38px #3b4c3610; }
.level-ending-art { margin:0; background:#203b39; display:flex; flex-direction:column; justify-content:center; }
.level-ending-art img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.level-ending-art figcaption { padding:25px 28px 30px; color:#fff7df; font-family:Georgia,'Times New Roman',serif; font-size:25px; line-height:1.3; }
.level-ending-art figcaption span { display:block; margin-top:9px; color:#d9e4ce; font-family:Inter,Arial,sans-serif; font-size:12px; }
.level-ending-copy { padding:35px 36px 28px; }
.level-ending-kicker { display:flex; align-items:center; gap:9px; color:#7a6b36; font-size:9px; letter-spacing:.1em; font-weight:700; line-height:1.6; }
.level-celebration-mark { font-size:29px; color:#b3953c; }
.level-ending h2 { font-family:Georgia,'Times New Roman',serif; font-size:34px; line-height:1.13; font-weight:400; letter-spacing:-.025em; margin:13px 0 20px; text-wrap:balance; }
.level-ending-story { color:#4e6358; font-size:14px; line-height:1.85; margin:0 0 24px; }
.level-ending-result { padding:16px; background:#edf3e3; border:1px solid #d5e1c7; border-radius:11px; display:flex; gap:15px; align-items:flex-start; }
.level-ending-result>.stars { white-space:nowrap; font-size:16px; letter-spacing:2px; line-height:1.5; }
.level-ending-result strong { display:block; font-size:12px; color:#34583d; }
.level-ending-result p { color:#59734d; font-size:11px; line-height:1.7; margin:5px 0 0; }
.level-save-message { color:#73816a; font-size:10px; line-height:1.7; margin:13px 0 19px; }
.level-ending-actions { display:flex; flex-wrap:wrap; gap:10px; }
.level-ending-actions .btn { font-size:11px; padding:11px 14px; }
.level-ending-replay { background:none; border:0; font:inherit; font-size:11px; color:#54734d; text-decoration:underline; text-underline-offset:4px; cursor:pointer; padding:16px 0 3px; }
.chapter-levels button:focus-visible,.chapter-levels input:focus-visible,.chapter-levels a:focus-visible { outline:3px solid #bd9043; outline-offset:4px; }
.chapter-levels h2:focus,.chapter-levels h3:focus { outline:none; }
.chapter-progress-tag { display:block; margin-top:8px; font-size:10px; line-height:1.7; color:#5c7453; }
.book-level-list { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0; padding:0; list-style:none; }
.book-level-list li { padding:5px 8px; border-radius:6px; background:#eef2e6; color:#59734c; font-size:10px; }
.book-level-list li.level-book-locked { background:#f0f0ea; color:#7c8478; }
@media(max-width:900px) { .level-step { gap:8px; padding:11px; }.level-step[aria-current=step] { padding:10px; }.level-locked { display:none; }.level-lab-layout { grid-template-columns:1fr; }.level-lab-picture { padding:20px; }.level-lab-picture [data-level-visual] { max-width:680px; margin:auto; }.level-lab-picture>p { max-width:650px; margin:15px auto 0; }.level-ending { grid-template-columns:1fr; }.level-ending-art { display:block; }.level-ending-art img { max-height:400px; object-fit:cover; }.level-ending-art figcaption { padding:18px 27px; font-size:23px; }.level-ending-art figcaption span { display:inline; margin-left:15px; font-size:11px; }.level-ending-copy { padding:29px 31px; } }
@media(max-width:560px) { .chapter-levels { scroll-margin-top:130px; }.level-navigation { padding:17px 14px 13px; margin-bottom:19px; }.level-nav-heading { align-items:flex-start; gap:8px; }.level-nav-heading p { font-size:11px; }.level-total { font-size:10px; white-space:normal; max-width:82px; text-align:right; line-height:1.6; }.level-steps { gap:6px; }.level-step { display:block; min-height:119px; padding:10px 8px; }.level-step[aria-current=step] { padding:9px 7px; }.level-step-symbol { width:25px; height:25px; font-size:13px; margin-bottom:8px; }.level-step strong { font-size:16px; }.level-step small { font-size:8px; line-height:1.6; }.level-nav-note { font-size:10px; }.level-lab-heading { padding:22px 19px 0; align-items:flex-start; gap:10px; }.level-lab h2 { font-size:26px; }.level-task-dots { gap:4px; }.level-task-dots li { width:23px; height:23px; font-size:10px; }.level-intro { margin:13px 19px 20px; font-size:12px; }.level-lab-picture { padding:15px 7px; }.level-lab-picture>p { font-size:11px; margin:13px 10px 0; }.level-lab-controls { padding:22px 18px; }.level-task-instruction { font-size:12px; padding:13px; }.level-ending-copy { padding:25px 21px; }.level-ending-art img { max-height:none; }.level-ending-art figcaption { font-size:22px; padding:19px 21px; }.level-ending-art figcaption span { display:block; margin:7px 0 0; }.level-ending h2 { font-size:30px; }.level-ending-story { font-size:13px; }.level-ending-result { display:block; }.level-ending-result .stars { display:block; margin-bottom:9px; }.level-ending-actions { flex-direction:column; align-items:stretch; }.level-ending-actions .btn { justify-content:center; }.level-ending-kicker { font-size:8px; } }
@media(max-width:360px) { .level-step strong { font-size:13px; }.level-step { padding-left:4px; padding-right:4px; }.level-step[aria-current=step] { padding-left:3px; padding-right:3px; } }
@media print { .level-navigation,.level-ending-actions,.level-ending-replay { display:none!important; }.level-ending { break-inside:avoid; box-shadow:none; } }