*{box-sizing:border-box}body{margin:0;background:#f8f8f3;color:#252d2c;font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,input:focus-visible{outline:3px solid #de9460;outline-offset:5px}header{height:78px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e6df;background:#fffef8}.brand{font-size:18px;font-weight:600;display:flex;align-items:center;gap:14px}.brand>span{font-size:34px;color:#428d80;font-weight:400}.brand small{font-size:11px;color:#94a097;font-weight:400;margin-left:15px}header>div:last-child{display:flex;gap:24px;font-size:12px;color:#6b7870}nav{position:absolute;right:38px;top:104px;display:flex;gap:8px}nav button{padding:9px 13px;font-size:11px;color:#7f8c82;border-radius:6px}nav b{font-size:10px;margin-right:8px}nav .active{background:#e5ede4;color:#356958}main{padding:35px 38px 0}.headline>span{font-size:11px;color:#7c9386;letter-spacing:1px}h1{font-size:30px;font-weight:550;letter-spacing:-.6px;margin:13px 0 12px}.headline p{font-size:13px;color:#7c8980;margin:0}.workbench{position:absolute;top:240px;left:32px;right:32px;bottom:151px;display:flex;background:#fffef9;border:1px solid #e0e5d9;border-radius:15px;overflow:hidden;box-shadow:0 8px 35px #41594504}#board{flex:1;width:calc(100% - 250px);height:100%;background-image:radial-gradient(#b3c3b440 .8px,transparent .8px);background-size:20px 20px;touch-action:none}aside{width:250px;padding:34px 26px;border-left:1px solid #e8ebdf;flex-shrink:0;background:#f9faf3}aside .eyebrow{font-size:10px;color:#859081;letter-spacing:1px}aside h2{font-size:18px;font-weight:500;margin:16px 0 22px}aside p{font-size:13px;line-height:1.9;color:#758273}.area{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid #dde5d5;font-size:13px}.area strong{font-size:23px;font-weight:400;font-variant-numeric:tabular-nums}.sum{font-size:13px;color:#7b8677;margin-top:22px;line-height:1.8}.formula{font-size:27px;line-height:1.7;color:#425d50;margin:24px 0}.teal{color:#328d84}.coral{color:#d27855}.violet{color:#8680ae}footer{position:absolute;bottom:43px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;gap:40px}#controls{display:flex;gap:35px;align-items:center;flex:1;max-width:830px}#controls label{display:block;min-width:220px;flex:1;font-size:12px;color:#698071}#controls label>span{display:flex;justify-content:space-between;margin-bottom:12px}input{width:100%;accent-color:#59917d;cursor:ew-resize}#controls output{color:#446e5e;font-variant-numeric:tabular-nums}#controls .ends{display:flex;justify-content:space-between;font-size:11px;color:#82927c;margin-top:6px}#next{border-radius:8px;background:#345f50;color:#fff;padding:14px 22px;font-size:13px}.note{position:absolute;bottom:15px;left:40px;font-size:10px;color:#99a391}.handle{cursor:grab}.handle:active{cursor:grabbing}svg text{font-family:Arial,'PingFang SC',sans-serif}dialog{max-width:550px;padding:28px;border:1px solid #d6dfcf;border-radius:12px;background:#fffef7;color:#57705b}dialog::backdrop{background:#294b395b;backdrop-filter:blur(4px)}dialog h2{font-size:20px}dialog p{font-size:14px;line-height:1.9}#close{float:right}@media(max-height:820px){main{padding-top:25px}nav{top:97px}h1{font-size:27px}.workbench{top:213px;bottom:137px}aside{padding:23px}aside h2{font-size:16px;margin:12px 0 18px}.area{padding:12px 0}.area strong{font-size:21px}footer{bottom:36px}.note{bottom:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#whySquare{font-size:11px;line-height:1.6;color:#746598;padding:7px 9px;background:#eeebf6;border-radius:5px;text-align:left;margin-bottom:2px}
#showSum{font-size:11px;line-height:1.6;color:#446e5e;padding:7px 9px;background:#e5ede4;border-radius:5px;text-align:left;margin-top:10px}
#hands{border:1px solid #a6bbaa;background:#eef5eb;border-radius:7px;padding:13px 17px;font-size:12px;white-space:nowrap;color:#52755e}.piece{cursor:grab}.piece:active{cursor:grabbing}[hidden]{display:none!important}
.answers{display:flex;align-items:center;gap:12px;font-size:13px;color:#65816c}.answers button{border:1px solid #b1c3ad;background:#f2f7ed;border-radius:8px;padding:13px 27px;font-size:16px}.answers button.chosen{background:#3e6f59;color:#fff}

/* Desktop projection: prioritize the diagram and readable teaching text. */
.headline p{font-size:15px;color:#586c60}nav button{font-size:12px;color:#586e5d}aside{width:290px;padding:22px}#board{width:calc(100% - 290px)}aside .eyebrow{font-size:11px;color:#61745e}aside h2{font-size:20px;line-height:1.45;margin:12px 0 14px}aside p{font-size:15px;line-height:1.7;color:#52694f;margin:12px 0}.area{padding:9px 0;font-size:16px}.area strong{font-size:26px}.sum{font-size:15px;line-height:1.65;color:#52694f;margin-top:14px}.formula{margin:16px 0;font-size:28px}#whySquare,#showSum{font-size:13px;padding:8px 10px}#controls label{font-size:14px}#controls .ends{font-size:12px}#hands,#next{font-size:14px}@media(max-height:820px){.workbench{bottom:114px}aside{padding:16px 20px}aside h2{font-size:19px;margin:10px 0 12px}.area{padding:7px 0}.formula{margin:12px 0}aside p{margin:10px 0}.sum{margin-top:10px}footer{bottom:32px}#controls .ends{margin-top:3px}}

.proof-view{position:absolute;left:calc((100% - 290px)/2);top:12px;transform:translateX(-50%);font-size:13px;padding:10px 15px;color:#796130;border:1px solid #dfd0a3;background:#fff9e7;border-radius:20px;white-space:nowrap;box-shadow:0 2px 6px #70592009}.proof-view[aria-pressed="true"]{background:#e9e4f4;color:#625986;border-color:#c9c1df}[data-proof-piece]{transition:opacity .45s ease;pointer-events:none}.subtracted [data-proof-piece]{opacity:0}@media(prefers-reduced-motion:reduce){[data-proof-piece]{transition:none}}

#board.dragging-piece,#board.dragging-piece .piece{cursor:grabbing}.piece[data-done="true"]{cursor:default}.piece[data-active="true"]{filter:drop-shadow(0 4px 4px #574a352b)}aside .piece-feedback{color:#356f56;border-left:3px solid #93b69d;padding-left:10px;font-size:14px;line-height:1.7}

.route-compare{top:16px;bottom:auto;left:18px;transform:none;background:#eef5eb;color:#356f56;border-color:#b5cdb7}

.piece-tool{padding:11px 14px;border:1px solid #c6d4be;border-radius:7px;background:#f8fbf4;color:#4c6b50;font-size:13px;white-space:nowrap}.piece-tool:disabled{opacity:.4;cursor:default}
#board:focus{outline:none}#board:focus-visible{outline:2px solid #78b9ad;outline-offset:-4px}

/* Leave the dimension marks unobstructed at extreme a:b ratios. */
#subtract,#unitGrid{left:18px;transform:none}
.unit-grids{pointer-events:none}

#controls .plaza-picker{min-width:0;flex:0 0 auto;font-size:13px}.plaza-picker select{font:inherit;color:#385c48;background:#f5f8ef;border:1px solid #b7c7b0;border-radius:7px;padding:10px;margin-left:8px;cursor:pointer}select:focus-visible{outline:3px solid #de9460;outline-offset:4px}

/* Pair the same physical triangle across both arrangements without adding controls. */
[data-proof-piece]{pointer-events:auto;cursor:pointer;outline:none}
#board.comparing-pieces [data-proof-piece]{opacity:.2}
#board.comparing-pieces [data-proof-piece][data-selected="true"]{opacity:1}
[data-proof-piece][data-selected="true"]>polygon,[data-proof-piece]:focus-visible>polygon{stroke:#836331;stroke-width:4;stroke-linejoin:round}
.subtracted [data-proof-piece]{opacity:0!important;pointer-events:none}