:root{font-family:'Microsoft YaHei','PingFang SC',sans-serif;color:#253742;background:#f5f0e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer;border:1px solid #c5c8c8;border-radius:9px;padding:9px 15px;background:#fffdf8;color:inherit;min-height:40px;transition:background .15s,transform .15s}button:hover{background:#e8f6f0}button:active{transform:scale(.97)}button.active,.primary{background:#157f76;color:white;border-color:#157f76}button:disabled{opacity:.4;cursor:default}a{color:#456575;text-decoration:none}header{height:64px;display:flex;align-items:center;gap:22px;padding:10px 24px;border-bottom:1px solid #d9d7d1;background:#ffffffc7}header h1{font-size:20px;letter-spacing:2px;margin:0;flex:1}header .small{font-size:12px;color:#72818b}main{max-width:1500px;margin:auto;padding:16px 24px}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}.toolbar .spacer{flex:1}.toolbar label{display:flex;align-items:center;gap:8px}.stage{position:relative;min-height:500px;border-radius:12px;overflow:hidden;background:#fffdf8;border:1px solid #deded7}.stage svg{width:100%;height:auto;display:block;touch-action:none}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.status{min-height:46px;text-align:center;padding:12px 15px;color:#426678;font-size:17px}.formula{font-size:27px;text-align:center;letter-spacing:2px;padding:16px;color:#275d59}.hint{font-size:13px;color:#71818a}.blue{background:#e9efff}.blue .stage{background:linear-gradient(135deg,#eef2ff,#dce8ff)}.white{background:#f8fafb}.white .stage{background:white}.peach{background:#fff0e9}.peach .stage{background:#fff4ec}.grid-layout{display:grid;grid-template-columns:220px 1fr;gap:16px}.side{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;background:#ffffff80}.side label{display:grid;gap:5px;font-size:14px}.side button{text-align:left}.side h2{font-size:16px;margin:0 0 5px}.side hr{border:0;border-top:1px solid #d9dddc;width:100%}input[type=range]{accent-color:#148a83;min-width:80px}input[type=number],select{padding:8px;border:1px solid #c8cfcf;border-radius:7px;background:#fff;max-width:140px}input[type=checkbox]{accent-color:#158e87;width:18px;height:18px}.badge{background:#e6f3ed;border-radius:8px;padding:8px 13px}.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}.mini-card{padding:15px;background:#ffffff80;border:1px solid #cddcd8;border-radius:10px}.big-number{font-size:36px;font-weight:600}.canvas-stage{height:560px}.floating{position:absolute;top:15px;left:20px;pointer-events:none}.bottom-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}.readout{padding:14px 20px;background:#ffffffa6;border:1px solid #c8cccc;border-radius:10px;font-size:24px;flex:1}.palette{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:12px}.palette button{min-width:75px}.orange{cursor:grab}.orange:active{cursor:grabbing}.net-options{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.net-options button{padding:4px;min-height:58px}.net-options svg{width:100%;height:48px}.view-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.pill{border-radius:25px}.note{font-size:12px;text-align:right;margin-top:12px;color:#8c98a1}.feedback-good{color:#07876a}.feedback-bad{color:#ba6260}@media(max-width:760px){header{padding:10px 12px;gap:10px;height:auto;min-height:60px}header h1{font-size:17px}header .small{display:none}main{padding:12px}.grid-layout{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap;padding:10px}.side>label{flex:1;min-width:120px}.side>h2{width:100%}.stage{min-height:350px}.canvas-stage{height:420px}.toolbar{gap:6px}.toolbar button{padding:8px 10px}.split{grid-template-columns:1fr}.formula{font-size:21px}.net-options{grid-template-columns:repeat(6,1fr);width:100%}.net-options button{min-width:45px}.readout{font-size:20px}}

@media(max-width:760px){.stage:has(>svg){min-height:0}.readout{flex-basis:100%;white-space:nowrap}.bottom-controls>label{flex:1}.bottom-controls>button{min-height:44px}.toolbar label{max-width:100%}}