:root{--bg:#f3f6f2;--paper:#fffefa;--ink:#29413b;--muted:#65796e;--green:#367467;--mint:#e2eee8;--line:#d2dfd7;--blue:#547e9d;--gold:#a97d33;--gold-pale:#fcf1d9;font-family:'Yu Gothic','Hiragino Kaku Gothic ProN','Noto Sans CJK JP',sans-serif;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0,#fffbef,transparent 45%),var(--bg);color:var(--ink);font-size:16px;line-height:1.8}button,input,textarea{font:inherit;color:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:inherit}a,button,input,textarea{outline-offset:4px}:focus-visible{outline:3px solid var(--gold)}[hidden]{display:none!important}.shell{width:min(1230px,calc(100% - 36px));margin:0 auto 24px}.top-nav{display:flex;justify-content:center;gap:10px;padding:15px 0}.top-nav a{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid #a9c1b6;background:#fff;border-radius:11px;padding:6px 17px;font-size:14px;min-height:40px;font-weight:600}.nav-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.page-head{text-align:center;margin-bottom:20px}.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--green);margin:0 0 5px}.title-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}h1{font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:clamp(23px,2.6vw,30px);line-height:1.55;margin:0;font-weight:600}.level{font-size:13px;white-space:nowrap;border:1px solid #d5c49c;color:#7d6536;background:#fffaec;padding:2px 10px;border-radius:20px}.lesson-nav{display:flex;justify-content:center;gap:7px;margin:12px 0 0;flex-wrap:wrap}.lesson-nav a{padding:1px 13px;border:1px solid var(--line);border-radius:7px;background:#ffffffa3;text-decoration:none;font-size:14px}.lesson-nav a[aria-current=page]{background:var(--green);border-color:var(--green);color:white}.layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr);gap:18px;align-items:start}.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 7px 26px #294d3810;min-width:0}.model{grid-column:1;grid-row:1 / span 2;padding:20px}.problem-panel{grid-column:2;padding:21px 24px}.work-panel{grid-column:2;padding:20px 24px}.section-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.section-label h2{font-size:16px;margin:0;font-weight:600}.question-number{font-family:Georgia,serif;color:#a8bdb0;font-size:29px;line-height:1}.problem{font-size:16px;line-height:2;margin:0}.ask{border-left:3px solid #83a690;padding-left:12px;font-weight:600;margin:14px 0 0}.timeline{display:grid;gap:6px;margin-top:16px}.change{border-left:2px solid var(--line);padding:2px 0 2px 10px;font-size:14px;line-height:1.7}.change strong{font-weight:600;color:var(--green)}.timeline-title{font-size:13px;color:var(--muted);margin:0}.transfer-note{padding:6px 10px;border-radius:7px;background:#f3f0e8;font-size:14px}.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);padding:0;margin:0 0 16px;gap:8px}.steps li{font-size:14px;color:#77887d;border-bottom:3px solid #e4eae2;padding-bottom:8px;line-height:1.5}.steps b{font-family:Georgia,serif;font-size:17px;margin-right:4px;font-weight:400}.steps li.active{border-color:var(--green);color:var(--green);font-weight:600}.steps li.done{border-color:#9ec2ae;color:var(--green)}.instruction{margin:0 0 13px;font-size:16px;line-height:1.8;min-height:58px}.board{background:linear-gradient(180deg,#fbfcf8,#f5f9f3);border:1px solid #dce5d9;border-radius:15px;overflow:hidden}.board-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 15px 0;font-size:14px}.board-state{font-weight:600;color:var(--green)}.total-tag{font-size:14px;padding:3px 10px;border:1px solid #cedecf;background:#fff;border-radius:20px}.total-tag strong{font-size:17px}.diagram{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;overflow:visible}.diagram text{font-family:inherit;fill:var(--ink);font-size:19px}.diagram .person{font-size:20px;font-weight:600}.diagram .subtext{font-size:17px;fill:var(--muted)}.diagram .amount{font-size:22px;font-weight:600}.diagram .one{font-size:19px;fill:var(--green)}.diagram .unit-piece{cursor:pointer}.diagram .unit-piece:focus{outline:none}.diagram .unit-piece:focus .unit-fill{stroke:#ad842b;stroke-width:2}.diagram .handle{cursor:ew-resize;touch-action:none;outline:none}.diagram .handle:focus .handle-ring{stroke:#a87924;stroke-width:4}.diagram .extra-piece{cursor:pointer;outline:none}.diagram .extra-piece:focus .extra-line{stroke-width:6}.board-foot{padding:0 12px 12px;margin:0;color:var(--muted);font-size:14px;text-align:center;line-height:1.7;min-height:35px}.model-controls{margin-top:16px}.mini-form{display:flex;gap:9px 12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.mini-form label{font-size:15px;font-weight:600}.input-wrap{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.num-input{width:104px;min-height:43px;background:#fff;border:1px solid #afc7b7;border-radius:9px;text-align:center;font-size:20px;font-variant-numeric:tabular-nums}.num-input.small{width:68px}.num-input[aria-invalid=true]{border-color:#ab7b30;background:#fff8e8}.num-input.correct{background:#edf6ee;border-color:#77a988}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:7px 15px;border:1px solid #b5cbbd;background:#fff;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none}.btn:hover:not(:disabled){background:#edf4ed}.btn.primary{background:var(--green);border-color:var(--green);color:#fff}.btn.primary:hover:not(:disabled){background:#285e53}.btn.ghost{background:none;border-color:transparent;color:var(--muted);font-weight:400;padding:5px 6px}.choices{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.choices .btn{flex:1;min-width:155px;border-color:#d4c7a8;background:#fffaf0}.reverse-title{margin:0;font-size:16px;font-weight:600}.reverse-reason{font-size:14px;color:var(--muted);margin:5px 0}.message{font-size:14px;color:#8b672f;margin:9px 0 0;min-height:27px;line-height:1.8}.message.good{color:var(--green)}.align-controls{margin-bottom:12px;font-size:14px}.align-controls .btn{margin-bottom:7px}.unit-fields{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap}.unit-fields .input-wrap{gap:6px}.checkpoint{background:#edf5ed;border-left:3px solid #7daa8d;padding:10px 13px;font-size:14px;line-height:1.9;margin-top:14px}.checkpoint p{margin:0}.bottom-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:9px;margin-top:14px}.hint{background:#fff8e6;border:1px solid #eadbb5;padding:10px 13px;border-radius:10px;font-size:14px;line-height:1.85;margin:8px 0 0}.memo-label{font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}.memo-label span{font-size:12px;font-weight:400;color:var(--muted)}textarea{display:block;width:100%;min-height:87px;resize:vertical;border:1px solid #cad9cb;border-radius:10px;background:repeating-linear-gradient(#fffefa,#fffefa 30px,#eaf0e4 31px);padding:7px 11px;line-height:31px;font-size:16px;margin:7px 0 15px}.answer-form h2{font-size:15px;margin:0 0 10px}.answer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}.answer-row label{font-size:15px;font-weight:600}.answer-submit{width:100%;margin-top:8px}.reward{padding:11px 13px;border:1px solid #decfaa;border-radius:12px;background:linear-gradient(110deg,#fffae7c9,#f2f7ecc2);margin-top:10px;display:flex;align-items:center;gap:14px}.medal{font-family:Georgia,serif;display:grid;place-items:center;border:3px double #b99448;border-radius:50%;width:55px;height:55px;flex-shrink:0;color:#997235;background:#ecce7c45;font-size:27px;opacity:.8}.reward strong{font-size:17px;color:#776134}.reward p{font-size:14px;margin:0}.solution{border-top:1px solid var(--line);margin-top:15px;font-size:14px}.solution summary{padding:12px 0;cursor:pointer;font-weight:600;color:var(--green)}.solution-body{line-height:1.95}.solution-body h3{font-size:15px;margin:14px 0 5px}.equation{background:#f4f7ee;padding:6px 10px;border-radius:7px;margin:5px 0;font-size:16px;overflow-wrap:anywhere}.solution-body p{margin:5px 0 10px}.takeaway{border-left:3px solid #b99a58;background:#fff8e8;padding:9px 12px}.footer-nav{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;margin:22px 0 13px;font-size:14px}.footer-nav a{text-decoration:none;min-height:36px;padding:4px 9px}.footer{text-align:center;font-size:12px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{background:#fff8e6;padding:15px;border:1px solid #eadbb5;border-radius:10px;margin:15px 0}.compare-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}.compare-actions button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:white}
@media(max-width:950px){.shell{width:min(760px,calc(100% - 24px))}.layout{grid-template-columns:1fr}.problem-panel{grid-column:1;grid-row:1}.model{grid-column:1;grid-row:2}.work-panel{grid-column:1;grid-row:3}.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline-title,.transfer-note{grid-column:1/-1}.work-panel textarea{min-height:80px}.answer-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.answer-row{min-width:0}.answer-row .num-input{width:92px}}
@media(max-width:520px){.shell{width:calc(100% - 16px)}.model,.problem-panel,.work-panel{padding:16px}.top-nav a{padding:6px 12px}.page-head{margin-bottom:15px}.title-row{gap:5px}.title-row h1{font-size:23px}.level{font-size:12px}.steps{gap:5px}.steps li{font-size:13px}.steps b{font-size:15px}.instruction{font-size:15px;min-height:0}.board{margin:0 -7px}.board-top{padding:11px 10px 0;flex-wrap:wrap;gap:5px}.board-top,.total-tag,.board-foot{font-size:13px}.diagram .person{font-size:22px}.diagram text{font-size:23px}.diagram .subtext{font-size:21px}.diagram .one{font-size:22px}.diagram .amount{font-size:24px}.timeline{grid-template-columns:1fr}.mini-form{display:block}.mini-form>.input-wrap{margin-top:8px}.unit-fields{gap:10px}.unit-fields label{font-size:14px}.choices .btn{min-width:125px;font-size:13px;padding:8px}.answer-fields{grid-template-columns:1fr}.answer-row .num-input{width:120px}.lesson-nav{gap:5px}.lesson-nav a{padding:2px 11px}.problem{line-height:1.95}.memo-label{flex-wrap:wrap}.footer-nav{gap:5px}.compare-actions .btn{font-size:13px;padding:7px 10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{.top-nav,.lesson-nav,.model,.memo-label,textarea,.answer-form,.footer-nav,.solution summary,.reward{display:none!important}.shell{width:100%}.layout{display:block}.panel{box-shadow:none;border:0;padding:10px 0}.solution{display:block}.page-head{text-align:left}.solution-body{display:block}.footer{margin-top:20px}}

.money-flow{display:grid;grid-template-columns:1fr 1.35fr 1fr;align-items:center;border:1px solid #d6e2d8;border-radius:12px;background:#fff;margin:0 0 14px;padding:9px 12px;gap:10px}.flow-total{display:flex;flex-direction:column;align-items:center;justify-content:center}.flow-total>span{font-size:13px;color:var(--muted)}.flow-total strong{font-size:23px;line-height:1.55;font-weight:600}.flow-total small{font-size:14px;font-weight:400;margin-left:5px}.flow-after{background:#edf5ee;border-radius:8px}.flow-changes{position:relative;padding-right:24px}.flow-changes p{margin:0;font-size:16px;font-weight:600;line-height:1.8;font-variant-numeric:tabular-nums}.flow-changes p span{font-size:13px;color:var(--muted);margin-right:7px;font-weight:400}.flow-changes p:first-child{color:#8f692b}.flow-changes p:nth-child(2){color:#547e9d}.flow-arrow{position:absolute;right:0;top:13px;font-size:22px;color:#81988a}.board-top{padding-top:13px}.board-state{font-size:15px}.board[data-focus=true]{border-color:#b9cfc0}.board-foot{background:#eef4ea90;border-top:1px solid #e2eade;padding:9px 12px;min-height:44px;color:#506d5b}.diagram text{font-size:21px}.diagram .person{font-size:22px}.diagram .subtext{font-size:18px}.diagram .amount{font-size:24px;font-variant-numeric:tabular-nums}.diagram .segment-label{font-size:18px;fill:#8c6727}.diagram .comparison-label{font-size:20px;fill:#3b6553}.diagram .stage-name{font-size:22px;fill:#3b6553;font-weight:600}.diagram .result-equation{font-size:21px;fill:#3b6553}.diagram .motion-arrow{fill:none;stroke:#aa813a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.diagram .handle-ring{fill:#fffbeb;stroke:#9c7837;stroke-width:2.5}.diagram .handle:not(:focus) .handle-ring{animation:handle-breathe 2.4s ease-in-out infinite}.move-result{border-left:3px solid #89b098;background:#f2f7ee;border-radius:0 11px 11px 0;padding:10px 14px}.move-result p{margin:0;font-size:15px;line-height:1.8}.move-result .move-equation{font-size:22px;font-weight:600;letter-spacing:.03em;margin:5px 0 10px}.move-result .btn{width:100%}.reverse-title{line-height:1.7}.instruction{min-height:0;line-height:1.9}.checkpoint{font-size:13px;margin-top:10px}.bottom-controls{margin-top:12px}.model-controls{margin-top:14px}.move-result+.message:empty{display:none}.model .message{min-height:0}.work-panel{padding-top:18px}.steps li{font-size:14px}.steps b{display:inline-block;margin-right:5px}
@keyframes handle-breathe{0%,100%{fill:#fffbeb;stroke-width:2.5}50%{fill:#f5e5b6;stroke-width:3.5}}
@media(max-width:520px){.money-flow{padding:8px;gap:6px;grid-template-columns:1fr 1.3fr 1fr}.flow-total>span{font-size:12px}.flow-total strong{font-size:21px}.flow-changes p{font-size:14px}.flow-changes p span{font-size:12px;display:block;line-height:1.3}.flow-arrow{top:24px}.board-state{font-size:14px}.diagram .person{font-size:25px}.diagram .subtext{font-size:23px}.diagram .amount{font-size:27px}.diagram .segment-label{font-size:23px}.diagram .stage-name{font-size:25px}.diagram .comparison-label{font-size:24px}.diagram .result-equation{font-size:25px}.board-foot{font-size:14px;line-height:1.8}.move-result p{font-size:15px}.move-result .move-equation{font-size:21px}.steps li{font-size:13px}.flow-total small{font-size:13px;margin-left:2px}.instruction{font-size:15px}.money-flow+.board{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.diagram .handle-ring{animation:none!important}}
@media(max-width:520px){.model .board{margin-left:-16px;margin-right:-16px;border-left:0;border-right:0;border-radius:0}.diagram .person{font-size:28px}.diagram .subtext{font-size:29px}.diagram .amount{font-size:32px}.diagram .segment-label{font-size:29px}.diagram .stage-name{font-size:29px}.diagram .comparison-label{font-size:29px}.diagram .result-equation{font-size:28px}}
.person-a{color:#367460;font-weight:600}.person-b{color:#527b98;font-weight:600}.given-total{background:#e7f0e83d;border-bottom:2px solid #9ab5a2;padding:0 2px}.given-change{background:linear-gradient(transparent 60%,#f2e5c7 60%);padding:0 2px}.given-equal{background:#e4eee2;border-radius:4px;padding:0 4px}.problem-panel .ask{margin-top:18px}.model{background:#fffefa}.board{background:#f9fcf7;scroll-margin-top:12px}.board-top{padding-bottom:4px}.board[data-person=mio] .board-state{color:#527b98}.board[data-person=mio]{border-color:#bfced5}.board[data-person=mio] .board-foot{background:#edf3f5;color:#526f82}.flow-changes p:nth-child(2){color:#8f692b}.flow-changes p:first-child span{color:#367460}.flow-changes p:nth-child(2) span{color:#527b98}.model .instruction{font-weight:600;line-height:1.8;margin-bottom:13px}.reverse-reason{margin:0;color:#63776a}.choices{margin-top:8px;gap:9px}.choices .btn{background:#fffdf7;min-height:46px}.choices .btn:hover:not(:disabled){background:#fbf0d7;border-color:#b99a5e}.move-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:9px;align-items:stretch}.move-result .move-actions .btn{font-size:14px;line-height:1.6;padding:9px 11px}.move-result .move-actions .replay{background:#fffefa;font-weight:400;border-color:#c7d8c7}.move-result .move-actions .replay:hover{background:#edf4e9}.work-panel{background:#fefefa}.answer-proof{background:#f5f8ef;border:1px solid #d5e0cd;border-radius:12px;margin-top:9px;padding:10px 12px}.answer-proof p{margin:4px 0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;font-size:14px}.answer-proof b{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}.answer-proof .proof-conclusion{display:block;border-top:1px solid #dce5d5;margin:9px 0 0;padding-top:8px;font-size:13px;color:#4f7059}.reward{padding:10px 12px}.reward p{font-size:13px}.model .btn:focus-visible{outline:3px solid #ab8a47;outline-offset:3px}.bottom-controls{margin-top:12px}.model-controls .message:empty{display:none}.page-head{margin-bottom:18px}
@media(max-width:520px){.model .board{border-radius:0}.move-actions{grid-template-columns:1fr}.move-actions .primary{grid-row:1}.move-result .move-actions .btn{min-height:44px}.problem-panel .ask{margin-top:14px}.answer-proof p{font-size:14px}.answer-proof b{font-size:15px}.instruction{font-size:16px}.flow-changes p span{font-weight:600}}