/* Chapter 18 shares the typography, palette and quiet panels of Chapter 17. */
:root{--bg:#f5f8f7;--paper:#fffefd;--ink:#344d48;--muted:#647c76;--green:#427b6c;--deep:#35695e;--line:#dce7e1;--gold:#a48c61;--teal:#beded2;--sand:#f0e3cb;--water:#8fc6cf;--water-deep:#579dab;--serif:'Yu Mincho','Hiragino Mincho ProN','Noto Serif CJK JP',serif;font:16px/1.75 'Yu Gothic','Hiragino Kaku Gothic ProN','Noto Sans CJK JP','Noto Sans JP',sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 15% 0,#fffdf5,transparent 55%),var(--bg)}button,input,select,textarea{font:inherit;color:inherit}button,a,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #ae9669;outline-offset:4px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}strong,b{font-weight:600}[hidden]{display:none!important}
.shell{width:min(1220px,calc(100% - 36px));margin:auto;padding-bottom:28px}.top-nav{display:flex;justify-content:center;gap:10px;padding:12px 0;flex-wrap:wrap}.top-nav a,.top-nav button{justify-content:center;display:flex;align-items:center;gap:8px;border:1px solid #c8dbd0;background:#ffffffc9;border-radius:10px;min-height:42px;padding:5px 17px;font-size:.85rem}.nav-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.brand{text-align:center;font-size:.8rem;letter-spacing:.08em;color:var(--muted)}.head{text-align:center;margin:8px 0 16px}.head h1{font:500 clamp(1.4rem,2.6vw,2rem)/1.5 var(--serif)}.head p{font-size:.9rem;color:var(--muted);margin-top:4px}.eyebrow{font-size:.8rem;letter-spacing:.08em;color:var(--green);margin-bottom:7px}
.mini-nav{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:13px 0}.mini-nav button,.mini-nav a{min-width:42px;min-height:38px;padding:3px 8px;border:1px solid var(--line);background:#fffc;border-radius:8px;font-size:.85rem;text-align:center;position:relative}.mini-nav .active,.mini-nav [aria-current=page]{color:white;background:var(--green);border-color:var(--green)}.mini-nav .done:after{content:'✓';position:absolute;top:-9px;right:-4px;color:#8f7954;background:#f9f2e5;border:1px solid #e8ddc8;border-radius:20px;width:18px;font-size:.7rem}
.layout{display:grid;grid-template-columns:minmax(0,1.43fr) minmax(350px,1fr);gap:16px;align-items:start}.panel{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px #244d3c07}.problem-panel{grid-column:2;grid-row:1;padding:19px 21px}.problem{font-size:.98rem;line-height:1.95}.ask{font-weight:600;margin-top:10px;padding-left:12px;border-left:3px solid #b3cdbf;font-size:1rem}.model-panel{grid-column:1;grid-row:1/span 2;padding:16px;position:sticky;top:12px}.model-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.model-head h2{font-size:1rem;font-weight:500}.reset{border:0;background:none;color:var(--muted);padding:8px 4px;font-size:.82rem}.instruction{font-size:.94rem;line-height:1.65;margin-bottom:10px}.stage{position:relative;border:1px solid #dce8e2;background:radial-gradient(ellipse at 55% 20%,#fff,#f0f7f5);border-radius:13px;overflow:hidden}.diagram{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}.diagram text{font-family:'Yu Gothic','Noto Sans CJK JP','Noto Sans JP',sans-serif;fill:var(--ink);paint-order:stroke;stroke:#fffefd;stroke-width:3;stroke-linejoin:round}.diagram .draggable{cursor:grab}.diagram .draggable:active{cursor:grabbing}.diagram .muted{fill:var(--muted)}.chart-note{padding:9px 12px;border-top:1px solid #e1eae4;background:#ffffffad;font-size:.82rem;line-height:1.6;color:var(--muted)}.controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;align-items:center}.btn{border:1px solid #c5d8ce;border-radius:9px;min-height:42px;padding:7px 13px;font-size:.87rem;background:white;line-height:1.6;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:hover{background:#f0f7f3}.btn.primary{background:var(--green);color:white;border-color:var(--green)}.btn.primary:hover{background:var(--deep)}.btn[aria-pressed=true],.btn.selected{background:#eaf4ee;border-color:#92b8a1;color:var(--deep)}.range-wrap{width:100%;padding:7px 12px;background:#f0f6f3;border-radius:10px}.range-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.86rem}.range-label output{color:var(--deep);font-weight:600;flex-shrink:0;white-space:nowrap}.range-wrap input{width:100%;min-height:34px;display:block;accent-color:var(--green);cursor:pointer}
.work-panel{grid-column:2;grid-row:2;padding:18px 21px}.work-panel h2{font-size:1rem;font-weight:500;margin-bottom:8px}.step-n{font-family:Georgia,serif;color:var(--gold);font-size:1.3rem;margin-right:7px}.fields{display:grid;gap:8px}.answer-item{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.9rem}.answer-box{display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}.answer-box input{width:94px;min-height:44px;font-size:1.15rem;text-align:center;border:1px solid #bed3c6;border-radius:8px;background:white}.answer-box input[aria-invalid=true]{background:#fff5df;border-color:#bb9139}.check{width:100%;margin-top:14px}.feedback{font-size:.9rem;line-height:1.7;color:#8c671c;margin-top:9px}.feedback:empty{display:none}.feedback.good{color:var(--deep)}.reward{display:flex;gap:10px;align-items:center;padding:9px 11px;margin-top:10px;border:1px solid #dfd0a6;border-radius:10px;background:#e8cc7b13;font-size:.85rem}.star{color:#b48d34;background:#e7c77224;border:2px double #ccb46f99;border-radius:50%;width:39px;height:39px;display:grid;place-items:center;font-size:1.3rem;flex-shrink:0;animation:celebrate .8s ease-in-out 3}.hint-box{font-size:.86rem;line-height:1.75;padding:10px 12px;background:#fcf8ed;border:1px solid #e9dfcb;border-radius:9px;margin-top:9px}.explanation{font-size:.88rem;line-height:1.8;padding:12px;background:#f0f7f2;border-radius:10px;margin-top:12px}.explanation p+p{margin-top:8px}.formula{font-size:1rem;color:var(--deep);padding:7px 0;overflow-wrap:anywhere}.support{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.solution-btn{border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:.82rem;color:var(--muted);padding:6px 0;margin-top:8px}.bottom-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}.footer{font-size:.77rem;color:var(--muted);text-align:center;margin:21px 0 5px}.guide-box{padding:13px 15px;background:#f0f7f3;border:1px solid #d2e4d8;border-radius:12px;margin-bottom:12px;overflow-wrap:anywhere}.guide-box .instruction{font-size:1rem;font-weight:600;line-height:1.7;margin:0}.guide-detail{font-size:.81rem;color:var(--muted);margin-top:5px;line-height:1.65}.guide-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.overview{max-width:1100px;margin:auto}.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;padding:25px 30px;margin:15px 0 24px;background:linear-gradient(115deg,#fffefd,#f0f7f4);border:1px solid var(--line);border-radius:22px}.hero h1{font:500 clamp(1.7rem,3vw,2.45rem)/1.5 var(--serif);letter-spacing:.07em;margin:6px 0 8px}.chapter-tagline{font:500 1.2rem/1.7 var(--serif);color:var(--deep);margin-bottom:10px}.hero .sub{font-size:.95rem;line-height:1.9;max-width:580px}.hero-art{width:100%;max-width:310px;justify-self:center;display:block}.route{display:flex;align-items:center;gap:18px;font-size:.85rem;margin:18px 0;flex-wrap:wrap}.route span b{font-family:Georgia,serif;color:var(--gold);font-size:1.2rem;margin-right:5px}.hero-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.hero-links a{display:inline-flex;align-items:center;min-height:38px;padding:4px 12px;border:1px solid var(--line);border-radius:25px;background:#ffffffc9;color:var(--deep);font-size:.78rem}.lesson-group{scroll-margin-top:18px;margin-bottom:26px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:10px;margin:22px 0 12px}.section-head h2{font:500 1.4rem/1.5 var(--serif)}.section-head p{font-size:.82rem;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lesson-card{display:flex;align-items:center;text-align:left;gap:17px;min-height:132px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:15px;transition:transform .15s,box-shadow .15s}.lesson-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #36694d12}.card-art{width:100px;height:95px;flex-shrink:0;background:#f6faf8;border-radius:10px}.lesson-card h3{font:500 1.1rem/1.5 var(--serif)}.lesson-card p{font-size:.82rem;line-height:1.75;color:var(--muted);margin-top:5px}.card-number{font-size:.73rem;color:var(--green);letter-spacing:.07em}.lesson-done{color:var(--deep);font-size:.72rem;margin-left:9px}.card-arrow{margin-left:auto;color:#789a8e;flex-shrink:0}.print-entry{padding:23px 26px;margin-top:28px;background:var(--paper);border:1px solid var(--line);border-radius:18px;scroll-margin-top:20px}.print-entry h2{font:500 1.4rem/1.5 var(--serif);margin-bottom:9px}.print-entry>p:not(.eyebrow){font-size:.87rem;color:var(--muted);margin-bottom:16px}.print-actions{display:flex;gap:9px;flex-wrap:wrap}.print-note{font-size:.76rem!important;margin:12px 0 0!important}.overview-note{background:#fcf9f1;border:1px solid #e9dfce;border-radius:12px;padding:14px 18px;font-size:.85rem;margin-top:22px}.key-note{font-size:.75rem;color:var(--muted);margin-top:8px}.skip-link{position:absolute;top:-70px;left:15px;z-index:20;background:#fff;padding:8px}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@keyframes celebrate{50%{transform:scale(1.13);box-shadow:0 0 15px #d1ae5755}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:850px){.layout{grid-template-columns:minmax(0,1fr) minmax(310px,.9fr)}.shell{width:calc(100% - 24px)}.problem-panel,.work-panel{padding:15px}.model-panel{padding:12px}.answer-box input{width:82px}.hero{padding:20px}.hero-art{max-width:230px}.route{gap:10px}.cards{gap:10px}.lesson-card{padding:13px;gap:12px}.card-art{width:80px;height:85px}}
@media(max-width:700px){.shell{width:calc(100% - 22px)}.layout{display:flex;flex-direction:column;gap:12px}.panel{width:100%;border-radius:15px}.model-panel{position:static;order:2}.problem-panel{order:1}.work-panel{order:3}.head{margin-bottom:10px}.head h1{font-size:1.4rem}.head p{font-size:.79rem}.brand{font-size:.7rem;letter-spacing:.02em}.mini-nav{gap:5px;margin:10px 0 13px}.mini-nav button,.mini-nav a{min-width:35px;min-height:36px;padding:2px 6px;font-size:.77rem}.top-nav{padding:9px 0;gap:7px}.top-nav a,.top-nav button{min-height:39px;font-size:.78rem;padding:4px 13px}.problem{font-size:.9rem;line-height:1.8}.ask{font-size:.94rem}.instruction{font-size:.87rem}.model-panel{padding:12px}.chart-note{font-size:.78rem}.answer-box input{width:104px}.hero{padding:23px 20px;margin-top:12px;grid-template-columns:1fr}.hero h1{font-size:1.8rem;letter-spacing:.03em}.hero-art{max-width:220px;margin-top:12px}.hero .sub{font-size:.89rem}.chapter-tagline{font-size:1.08rem}.route{gap:12px;font-size:.78rem}.hero .eyebrow{font-size:.72rem}.cards{grid-template-columns:1fr}.card-art{width:89px;height:90px}.lesson-card{min-height:125px}.section-head{display:block}.section-head p{margin-top:4px}.bottom-nav .btn{font-size:.83rem}.key-note{font-size:.71rem}.guide-box{padding:11px 12px}.guide-box .instruction{font-size:.91rem}.guide-detail{font-size:.78rem}.print-entry{padding:21px 18px}.print-actions{flex-direction:column}.print-actions .btn{width:100%}}
@media(max-width:360px){.range-label{font-size:.8rem}.answer-box input{width:88px}.route{gap:8px}.lesson-card{gap:10px}.card-art{width:72px;height:80px}.lesson-card h3{font-size:1rem}.top-nav a{padding:5px 10px}.hero{padding:20px 16px}}
@media print{body{background:white}.shell{width:100%}.top-nav,.hero-links,.footer,.mini-nav,.controls{display:none}.panel,.hero,.lesson-card,.print-entry{box-shadow:none;break-inside:avoid}}
.resume-card{margin:0 0 22px;padding:16px 20px;border:1px solid #c9ddce;border-radius:13px;background:#eef6ef}.resume-card h2{font-size:1rem;font-weight:500}.resume-card p{font-size:.84rem;color:var(--muted);margin:4px 0 8px}.resume-card a{display:inline-flex;align-items:center;min-height:40px;color:var(--deep);font-size:.87rem;text-decoration:underline;text-underline-offset:3px}
.lesson-copy{min-width:0;flex:1}.lesson-card p,.lesson-card h3{overflow-wrap:anywhere}