:root{--sdif-canvas:#f7f1e8;--sdif-paper:#fffdfc;--sdif-panel:#faf7f1;--sdif-ink:#24313d;--sdif-muted:#59635f;--sdif-sage:#44755d;--sdif-sage-dark:#315f4a;--sdif-blue:#536f88;--sdif-blue-dark:#3f596f;--sdif-tail:#b45f46;--sdif-tail-dark:#8a3f29;--sdif-line:#c8b9a9;--sdif-focus:#8a3f29}
*{box-sizing:border-box}
body.sum-difference-page{margin:0;min-height:100vh;overflow-x:hidden;color:var(--sdif-ink);background:linear-gradient(180deg,#f7f1e8,#f3ecdf);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
.sum-main{width:min(1320px,calc(100% - 32px));margin:0 auto;padding:8px 0 24px}
body.sum-difference-page.xinyu-tool .tool-heading{padding:3px 0 9px;text-align:center}
.sum-difference-page .eyebrow{margin:0 0 3px;color:#526c87;font-size:11px;font-weight:900}
body.sum-difference-page.xinyu-tool .tool-heading h1{margin:0;color:var(--sdif-ink);font-size:clamp(26px,2.8vw,38px);letter-spacing:-.03em;text-wrap:balance}
.sum-difference-page .lead{max-width:900px;margin:5px auto 0;color:var(--sdif-muted);font-size:13px;font-weight:700}
.sum-difference-page .chips{display:flex;justify-content:center;gap:6px;margin-top:6px}.sum-difference-page .chip{padding:4px 10px;border:1px solid #d9cec1;border-radius:999px;color:var(--sdif-blue-dark);background:var(--sdif-paper);font-size:11px;font-weight:850}
.sum-difference-lab{display:grid;grid-template-columns:minmax(0,1fr) 338px;min-height:620px;overflow:hidden;border:1px solid var(--sdif-line);border-radius:21px;background:var(--sdif-paper);box-shadow:0 20px 50px rgba(65,55,42,.13)}
.sum-difference-lab .stage{min-width:0;border-right:1px solid #e2d7ca;background:var(--sdif-paper)}
.sum-difference-lab .stage-head{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;color:var(--sdif-ink);background:#f2eadf;background-image:none}
.sum-difference-lab .stage-kicker{margin:0 0 2px;color:var(--sdif-sage-dark);font-size:11px;font-weight:900;letter-spacing:.04em}.sum-difference-lab .stage-title{margin:0;color:var(--sdif-ink);font-size:20px;line-height:1.22}.sum-difference-lab .stage-meta{margin:0;color:#485b67;font-size:12px;font-weight:850;text-align:right}
.problem-card,.piece-shelf,.tape-board{margin:9px 14px 0;border:1px solid #d9cec1;border-radius:14px;background:#fffaf3}
.problem-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:9px 11px}.problem-card div p{margin:0;color:var(--sdif-sage-dark);font-size:10px;font-weight:900}.problem-card h3{margin:1px 0 0;font-size:14px}.problem-card>p{margin:0;color:#344751;font-size:14px;font-weight:850;line-height:1.4}.problem-card>span{color:var(--sdif-muted);font-size:10px;font-weight:850;white-space:nowrap}
.piece-shelf{padding:9px 11px;background:#f6f1e8}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head h3{margin:0;color:#2c4958;font-size:13px}.section-head span{color:var(--sdif-muted);font-size:10px;font-weight:800}.piece-row{display:grid;grid-template-columns:1.25fr .75fr;gap:8px;margin-top:7px}
.manipulative,.board-slot,.case-button,.primary-action,.secondary-actions button,.step-input button{font:inherit;touch-action:manipulation;cursor:pointer}.manipulative{display:grid;align-content:center;gap:2px;min-height:52px;padding:7px 10px;border:1px solid #75675b;border-radius:10px;color:#294454;background:var(--sdif-paper);text-align:left;box-shadow:0 5px 12px rgba(76,61,47,.08);transition:transform .16s ease,box-shadow .16s ease}.manipulative span{font-size:10px;font-weight:800}.manipulative strong{font-size:12px}.manipulative:hover{transform:translateY(-2px)}.manipulative[aria-pressed="true"]{outline:3px solid var(--sdif-focus);outline-offset:2px;transform:translateY(-2px)}.sum-ticket{border-left:6px solid var(--sdif-blue)}.difference-piece{border-left:6px solid var(--sdif-tail);background:repeating-linear-gradient(135deg,#fff8f3 0 9px,#f7e7df 9px 14px)}.manipulative.is-placed{opacity:.66}.manipulative.is-placed::after{content:"已放置";justify-self:end;color:var(--sdif-sage-dark);font-size:9px;font-weight:900}
.tape-board{position:relative;padding:9px 11px 11px;background:linear-gradient(180deg,#fffdf9,#f5eee2);scroll-margin-block:20px}.sum-clip{width:100%;min-height:44px;margin-top:7px}.tape-row{display:grid;grid-template-columns:112px minmax(150px,1fr) 150px;align-items:center;gap:8px;min-height:76px;margin-top:8px;padding:8px;border:1px solid #d7c8b7;border-radius:12px;background:rgba(255,255,255,.72)}.row-label{display:grid;gap:1px;color:#2f4b5d}.row-label strong{font-size:12px}.row-label small{color:var(--sdif-muted);font-size:10px;font-weight:800}.base-tape{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:42px;border:2px solid #3f596f;border-radius:8px 3px 3px 8px;color:#304957;background:linear-gradient(180deg,#dbe5ec,#c9d8e1);box-shadow:inset 0 -5px 0 rgba(65,90,119,.12)}.base-tape::after{position:absolute;right:-7px;width:12px;height:20px;background:linear-gradient(135deg,transparent 0 44%,#3f596f 45% 55%,transparent 56% 100%);content:""}.base-tape span{font-size:10px;font-weight:900}.smaller-row .base-tape{border-color:#315f4a;background:linear-gradient(180deg,#deebe3,#c9ddcf)}.smaller-row .base-tape::after{background:linear-gradient(135deg,transparent 0 44%,#315f4a 45% 55%,transparent 56% 100%)}
.board-slot{display:grid;align-content:center;gap:1px;min-height:48px;padding:6px 8px;border:1.5px dashed #75675b;border-radius:9px;color:#425866;background:rgba(255,253,252,.96);text-align:left}.board-slot span{font-size:9px;font-weight:850}.board-slot strong{font-size:10px}.board-slot.is-preview{border-style:solid;border-color:var(--sdif-tail);background:#fff0e9}.board-slot.is-filled{border-style:solid;border-color:var(--sdif-sage);background:#edf5ef}.tail-slot{background:repeating-linear-gradient(135deg,#fff8f3 0 9px,#f7e7df 9px 14px)}.wrong-tail-slot{border-color:#9a8574}.wrong-tail-slot.is-filled{border-color:var(--sdif-tail);background:#fff0e9}.removal-tray{width:210px;min-height:50px;margin:8px auto 0;border:2px solid #8b765f;text-align:center;background:#eee5d9}.removal-tray.is-filled{border-color:var(--sdif-tail-dark);background:repeating-linear-gradient(135deg,#fff5ec 0 10px,#eed9cf 10px 15px)}
.fold-work{margin-top:9px;padding:8px 11px;border:1px solid #c6b7a6;border-radius:10px;background:#fffdfc}.fold-work label{display:flex;justify-content:space-between;gap:10px;color:#315f4a;font-size:11px;font-weight:850}.fold-work input{width:100%;min-height:44px;accent-color:var(--sdif-sage)}.fold-track{position:relative;display:grid;grid-template-columns:1fr 1fr;height:12px;margin:0 8px}.fold-track i{border-top:4px solid #536f88}.fold-track b{position:absolute;left:50%;top:-5px;width:3px;height:15px;background:var(--sdif-tail-dark)}.revealed-values{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.revealed-values article{padding:8px;border:1px solid #a9b9ac;border-radius:9px;background:#edf5ef}.revealed-values h4{margin:0;color:#315f4a;font-size:11px}.revealed-values strong{display:block;margin-top:3px;color:#24313d;font-size:15px}.revealed-values .evidence{grid-column:1/-1;color:#334d5a;font-size:11px;line-height:1.55}.revealed-values .evidence p{margin:2px 0}.revealed-values:focus{outline:3px solid var(--sdif-focus);outline-offset:3px;border-radius:10px}
.recent-step{min-height:38px;margin:9px 14px 11px;padding:8px 11px;border-left:3px solid #b3742d;border-radius:8px;color:#54493f;background:#fff5e4;font-size:11px;font-weight:800;line-height:1.45}.sum-difference-page .sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.sum-difference-lab .control-panel{min-width:0;padding:14px;background:var(--sdif-panel)}.control-title span{color:#52705f;font-size:11px;font-weight:900}.control-title h2{margin:3px 0 10px;color:#263f50;font-size:19px;line-height:1.2}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.sum-difference-page.xinyu-tool .case-button{display:grid;gap:2px;min-height:52px;padding:6px;border:1px solid #6f6256;border-radius:9px;color:#314e61;background:var(--sdif-paper);text-align:center}.case-button strong{font-size:11px}.case-button span{color:#59635f;font-size:9px;font-weight:800}.sum-difference-page.xinyu-tool .case-button.active{border-color:var(--sdif-sage-dark);box-shadow:inset 0 -4px var(--sdif-sage);color:#244c3b;background:#eaf4ee}
.parameter-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.parameter-grid label{display:grid;gap:3px;color:#314e61;font-size:11px;font-weight:900}.parameter-grid input,.step-input input{width:100%;min-height:44px;border:1px solid #76685b;border-radius:8px;color:var(--sdif-ink);background:var(--sdif-paper);font:inherit;font-size:14px;font-weight:850}.parameter-grid input{padding:0 9px}.parameter-grid small,.step-input small{min-height:14px;color:#8a3f29;font-size:9px;font-weight:800;line-height:1.25}.parameter-grid input[aria-invalid="true"],.step-input input[aria-invalid="true"]{border:2px solid #8a3f29}
.step-input{margin-top:9px;padding:8px;border:1px solid #d5cabd;border-radius:10px;background:#fffdfc}.step-input label{color:#314e61;font-size:11px;font-weight:850;line-height:1.35}.step-input>div{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:5px}.step-input input{padding:0 8px}.sum-difference-page.xinyu-tool .step-input button{min-height:44px;padding:0 10px;border:1px solid var(--sdif-sage-dark);border-radius:8px;color:#fff;background:var(--sdif-sage);font-size:11px;font-weight:900}.state-note,.grade-boundary{margin:9px 0 0;padding:8px 10px;border-radius:9px;font-size:10px;font-weight:800;line-height:1.4}.state-note{color:#315f4a;background:#edf4ef}.grade-boundary{color:#55636a;background:#eef1ef}.sum-difference-page.xinyu-tool .primary-action{width:100%;min-height:48px;margin-top:9px;border:1px solid var(--sdif-sage-dark);border-radius:10px;color:#fff;background:var(--sdif-sage);font-size:14px;font-weight:950}.sum-difference-page.xinyu-tool .primary-action:hover:not(:disabled){background:var(--sdif-sage-dark)}.sum-difference-page.xinyu-tool .primary-action:disabled{border-color:#989b97;color:#626866;background:#d8d9d5;cursor:not-allowed}.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.sum-difference-page.xinyu-tool .secondary-actions button{min-height:44px;border:1px solid #6f6256;border-radius:9px;color:#334f61;background:var(--sdif-paper);font-size:12px;font-weight:900}.sum-difference-page.xinyu-tool .secondary-actions button:disabled{color:#777f7b;background:#e5e1da;cursor:default}.operation-hint{margin:9px 0 0;color:#59635f;font-size:10px;font-weight:750;line-height:1.45}
body.workbench-tool-detail.sum-difference-page .sum-difference-lab :is(button,input):focus-visible{outline:3px solid var(--sdif-focus)!important;outline-offset:3px!important}
body.sum-difference-page.xinyu-tool:not(.classroom-screen) .sum-difference-lab .stage-head{color:var(--sdif-ink)!important;background:#f2eadf!important;background-image:none!important}body.sum-difference-page.xinyu-tool:not(.classroom-screen) .sum-difference-lab .stage-head :is(.stage-title,.stage-meta){color:var(--sdif-ink)!important;text-shadow:none!important}body.sum-difference-page.xinyu-tool:not(.classroom-screen) .sum-difference-lab .stage-head .stage-kicker{color:var(--sdif-sage-dark)!important;text-shadow:none!important}
body.sum-difference-page.xinyu-tool .sum-difference-lab .classroom-screen-toggle{min-height:44px!important;border-color:#6f5f50!important;color:var(--sdif-ink)!important;background:var(--sdif-paper)!important}body.sum-difference-page.xinyu-tool .sum-difference-lab .fullscreen-button{flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;border-color:#6f5f50!important;color:var(--sdif-ink)!important;background:var(--sdif-paper)!important}
body.classroom-screen.sum-difference-page{color:var(--sdif-ink)!important;background:var(--sdif-canvas)!important}body.classroom-screen.sum-difference-page .sum-difference-lab,body.classroom-screen.sum-difference-page .sum-difference-lab :is(.stage,.control-panel){border-color:#c8b9a9!important;color:var(--sdif-ink)!important;background:var(--sdif-paper)!important;box-shadow:none!important}body.classroom-screen.sum-difference-page .sum-difference-lab .stage-head{color:var(--sdif-ink)!important;background:#f2eadf!important;background-image:none!important}body.classroom-screen.sum-difference-page .sum-difference-lab :is(.stage-title,.stage-meta,.control-title h2,.parameter-grid label,.step-input label){color:var(--sdif-ink)!important;text-shadow:none!important}body.classroom-screen.sum-difference-page .sum-difference-lab :is(.manipulative,.board-slot,.case-button,.secondary-actions button,input){color:var(--sdif-ink)!important;background-color:var(--sdif-paper)!important}body.classroom-screen.sum-difference-page .sum-difference-lab .case-button.active{color:#244c3b!important;background:#eaf4ee!important}body.classroom-screen.sum-difference-page .sum-difference-lab :is(.piece-shelf,.tape-board){padding:14px 16px!important}body.classroom-screen.sum-difference-page .sum-difference-lab .tape-row{min-height:104px}body.classroom-screen.sum-difference-page .sum-difference-lab .base-tape{height:54px;font-size:13px}
body.sum-difference-page.xinyu-tool .sum-difference-lab:fullscreen{display:grid!important;grid-template-columns:minmax(0,1fr) 360px!important;gap:0!important;width:100vw!important;height:100vh!important;padding:14px!important;align-content:center;background:var(--sdif-canvas)!important}body.sum-difference-page .sum-difference-lab:fullscreen :is(.stage,.control-panel){overflow:auto}body.sum-difference-page .sum-difference-lab:fullscreen :is(.piece-shelf,.tape-board){padding:14px 16px!important}body.sum-difference-page .sum-difference-lab:fullscreen .tape-row{min-height:105px}body.sum-difference-page .sum-difference-lab:fullscreen .base-tape{height:54px;font-size:13px}
@media(min-width:721px) and (max-width:980px){.sum-main{width:calc(100% - 24px)}.sum-difference-lab,body.sum-difference-page.xinyu-tool .sum-difference-lab:fullscreen{grid-template-columns:minmax(0,1fr) minmax(276px,34vw)!important}.sum-difference-lab .control-panel{padding:11px}.problem-card,.piece-shelf,.tape-board{margin-left:8px;margin-right:8px}.sum-difference-lab .stage-head{padding-left:10px;padding-right:10px}.tape-row{grid-template-columns:82px minmax(116px,1fr) 106px;gap:5px;padding:6px}.base-tape span{font-size:9px}.case-grid{grid-template-columns:1fr}.sum-difference-page.xinyu-tool .case-button{grid-template-columns:80px 1fr;align-items:center;text-align:left;min-height:44px}.parameter-grid{gap:5px}.problem-card{grid-template-columns:auto 1fr}.problem-card>span{grid-column:1/-1}}
@media(max-width:720px){.sum-main{width:calc(100% - 18px);padding-top:7px}body.sum-difference-page.xinyu-tool .tool-heading{padding:0 0 8px}.sum-difference-page .tool-heading h1{font-size:22px;line-height:1.2}.sum-difference-page .lead{font-size:12px}.sum-difference-page .chips{flex-wrap:wrap}.sum-difference-lab,body.sum-difference-page.xinyu-tool .sum-difference-lab:fullscreen{grid-template-columns:1fr!important;border-radius:16px}.sum-difference-lab .stage{border-right:0;border-bottom:1px solid #e2d7ca}.sum-difference-lab .stage-head{align-items:flex-start;flex-wrap:wrap;padding:9px 10px}.sum-difference-lab .stage-title{font-size:17px}.sum-difference-lab .stage-actions{width:100%;justify-content:flex-start}.sum-difference-lab .stage-meta{margin-right:auto;text-align:left}.problem-card,.piece-shelf,.tape-board{margin-left:8px;margin-right:8px}.problem-card{grid-template-columns:auto 1fr}.problem-card>span{grid-column:1/-1}.piece-row{grid-template-columns:1fr 1fr}.tape-row{grid-template-columns:86px minmax(108px,1fr) 112px;gap:5px;padding:6px}.row-label strong{font-size:11px}.base-tape span{font-size:9px}.sum-difference-lab .control-panel{padding:12px}.case-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.sum-difference-page .tool-heading h1{font-size:20px}.problem-card>p{font-size:12px}.section-head{align-items:flex-start;flex-direction:column;gap:2px}.piece-row{grid-template-columns:1fr 1fr}.tape-row{grid-template-columns:1fr;gap:6px}.row-label{grid-template-columns:auto auto;justify-content:space-between}.base-tape{height:40px}.board-slot{min-height:44px;text-align:center}.removal-tray{width:100%}.case-button span{font-size:8px}.revealed-values{grid-template-columns:1fr}.revealed-values .evidence{grid-column:1}.step-input>div{grid-template-columns:1fr}.step-input button{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.manipulative:hover,.manipulative[aria-pressed="true"]{transform:none!important}}