:root{--paper:url("assets/asset-02.png");--panel:url("assets/asset-03.png");--banner:url("assets/asset-04.png");--button:url("assets/asset-05.png");}
*{box-sizing:border-box}html{height:100%}body{margin:0;color:#643b21;font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#fff4e1 var(--paper) center/100% 100% fixed;min-height:100%;}main{max-width:1540px;margin:auto;padding:30px 4% 35px}header{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:22px}h1,h2,h3{font-family:"幼圆","YouYuan","Microsoft YaHei",sans-serif}h1{font-size:clamp(30px,3.2vw,48px);line-height:1.25;margin:0;min-width:360px;padding:25px 40px;background:var(--banner) center/105% 175% no-repeat}button{font:inherit;font-weight:700;color:inherit;cursor:pointer;touch-action:manipulation;border:0;min-height:45px}button:focus-visible{outline:3px solid #497d6c;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.action{background:var(--button) center/112% 163% no-repeat;padding:15px 24px;font-size:22px;min-width:124px}.soft{background:transparent;border-bottom:2px solid #d1b998;padding:9px 14px;font-size:19px}.frame{background:var(--panel) center/104% 127% no-repeat;padding:30px}.mascot{text-align:center}.mascot img{display:block;width:100%;height:100%;object-fit:contain}.mascot strong{display:block;font-size:24px;margin-top:4px}.mascot .figure{height:160px}.status{font-size:19px;min-height:28px;line-height:1.5;color:#47755f;text-align:center;margin:12px 0}dialog{max-width:92vw;border:0;background:#fff8ec;color:#643b21;border-radius:22px;padding:25px 30px;box-shadow:0 12px 80px #57341855}dialog::backdrop{background:#30251955}dialog h2{text-align:center;font-size:30px;margin:0 0 20px}.digits{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.digits button{font-size:30px;background:#f0ead3;min-width:56px;min-height:56px;border-radius:12px}.digits button:last-child{grid-column:3/5}.dialog-actions{display:flex;gap:15px;justify-content:center;margin-top:18px}.topnav{display:flex;gap:12px}.topnav button{background:transparent;font-size:22px;padding:12px 16px;border-bottom:3px solid transparent}.topnav .active{border-color:#ad713d;color:#854919}.hide{display:none!important}@media(max-width:1000px){main{padding:18px 20px}header{gap:8px;margin-bottom:12px}h1{min-width:280px;padding:18px 26px;font-size:33px}.topnav{gap:4px}.topnav button{font-size:18px;padding:10px}.action{font-size:18px;padding:12px 14px;min-width:90px}.frame{padding:20px}.mascot .figure{height:118px}.mascot strong{font-size:20px}}@media(max-width:680px){header{flex-wrap:wrap}.topnav{width:100%;justify-content:center}main{padding:12px}.frame{padding:12px}h1{font-size:29px;min-width:270px}.soft{font-size:16px}}.guidebody{display:flex;align-items:center;gap:35px;font-size:25px;line-height:1.8}.guidebody .mascot{width:150px}.guidebody .figure{height:165px}.maze-layout{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:20px;align-items:start}.maze-frame{padding:25px 24px 21px}#stage{position:relative;aspect-ratio:1440/1000;width:100%;user-select:none;-webkit-user-select:none}#maze,#ink,#questions{position:absolute;inset:0;width:100%;height:100%}#ink{pointer-events:none;touch-action:none}#questions{pointer-events:none}.question{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:2px;white-space:nowrap;font-weight:700;font-size:clamp(15px,1.45vw,23px);pointer-events:auto;line-height:1.1;color:#59402b}.blank{padding:0;width:clamp(23px,2.2vw,32px);height:clamp(25px,2.4vw,34px);min-height:0;border:2px solid #957557;background:#fffdfa;border-radius:4px;font-size:inherit;box-shadow:0 2px 0 #d3c2a5}.blank.good{background:#dbeed7;border-color:#70976c}.blank.bad{background:#ffe2bd;border-color:#bc8748}.drawing #questions{opacity:.55}.drawing .question{pointer-events:none}.drawing #ink{pointer-events:auto}.tools{gap:14px;padding:14px 0}.tools .mascot{margin-top:6px}.tools .mascot .figure{height:135px}.tools .status:empty{display:none}.tools .status{font-size:17px;margin:0}.tools>.action{width:176px}.toolpair{display:flex;gap:12px}.modes{display:flex;border-bottom:2px solid #dbc29e;width:100%;justify-content:center}.modes button{background:transparent;font-size:24px;padding:12px 17px;border-bottom:4px solid transparent}.modes button.active{color:#49785e;border-color:#739879}.question-title{text-align:center;font-size:34px;margin:22px 0}#familyCards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}.familyCard{background:var(--panel) center/104% 127% no-repeat;padding:65px 20px}.familyEq{display:flex;align-items:center;justify-content:center;gap:7px;font-size:36px;white-space:nowrap;margin:28px 0}.familyEq .blank{font-size:34px;width:48px;height:51px}.revealText{font-size:31px;text-align:center;color:#51755e;line-height:1.65}.center{display:flex;justify-content:center;gap:20px;margin:22px 0}.change-frame{max-width:930px;margin:auto;text-align:center;min-height:340px;padding:45px}.big-equation{font-size:66px;font-weight:bold;line-height:1.8}.big-equation span{color:#be8448}#result{width:1180px}#resultImg{width:100%;height:auto}#download{font-size:24px;color:#47755f;align-self:center}#changed{animation:appear .45s}@keyframes appear{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@media(max-width:1080px){.maze-layout{grid-template-columns:minmax(0,1fr) 156px;gap:5px}.maze-frame{padding:22px 12px}.tools>.action{width:148px}.tools{gap:9px}.modes button{font-size:21px;padding:9px 13px}.question{font-size:16px}.familyEq{font-size:28px}.familyCard{padding:48px 12px}.familyEq .blank{width:34px;height:40px;font-size:28px}}@media(max-width:700px){.maze-layout{grid-template-columns:1fr}.maze-frame{overflow-x:auto}#stage{min-width:850px}.tools{flex-direction:row;flex-wrap:wrap;justify-content:center}.tools .mascot{display:none}.tools .modes{width:auto}.tools .status{width:100%}.question{font-size:20px}#familyCards{grid-template-columns:1fr;gap:0}.familyCard{padding:25px}.familyEq{font-size:32px;margin:16px 0}.question-title{font-size:26px}.big-equation{font-size:46px}.change-frame{min-height:320px}.revealText{font-size:24px}}