:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#163b60;background:#e7f3ff;font-synthesis:none;--line:#285475;--blue:#087cd5;--yellow:#f5d728;--panel:#dceaff}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:2px solid #456c8e;border-radius:9px;padding:9px 12px;background:linear-gradient(#f6faff,#deebff);color:#163b60;font-weight:650;box-shadow:0 3px 0 #9eafca;min-height:42px;transition:background .12s,transform .12s}button:hover{background:#fff}button:active{transform:translateY(2px);box-shadow:0 1px 0 #9eafca}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ff9800;outline-offset:3px}button.active,button.primary{background:linear-gradient(#249df4,#0670d0);color:white;border-color:#194f7f;box-shadow:0 3px 0 #143a62}button:disabled{opacity:.5;cursor:not-allowed}button[hidden],[hidden]{display:none!important}header{display:flex;align-items:center;gap:20px;padding:18px 30px 12px;background:#f4f9ff;border-bottom:1px solid #c0d7ec}.back{color:#42698c;text-decoration:none;white-space:nowrap;font-size:14px}.title{flex:1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.title>span{background:#173f66;color:white;border-radius:8px;font-weight:700;padding:6px 9px}.title h1{margin:0;font-size:clamp(19px,2vw,28px);letter-spacing:.04em}.title p{margin:0;color:#607a92;font-size:14px}.quiet{font-size:14px;padding:5px 14px}nav{display:flex;justify-content:center;gap:10px;padding:13px 20px;background:#eaf4ff}nav button{min-width:160px;border-radius:9px;font-size:16px}main{display:grid;grid-template-columns:minmax(320px,410px) minmax(0,1fr);gap:16px;padding:4px 22px 10px;max-width:1700px;margin:auto}.panel{padding:20px;background:#dce9fe;border:2px solid #719bb8;border-radius:12px;box-shadow:0 4px 0 #7994b4;align-self:stretch}.panelheading{display:flex;align-items:center;justify-content:space-between;gap:15px}.panelheading h2{font-size:20px;margin:0}.panelheading strong{color:#176db0;background:#eef8ff;border-radius:8px;padding:5px 10px;white-space:nowrap}.sub{font-size:13px;line-height:1.65;color:#456888;margin:9px 0 13px}#grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:8px;background:#7cc3dc;border:3px solid #264f70;border-radius:10px;box-shadow:3px 4px 0 #27496c;touch-action:none;user-select:none;aspect-ratio:1}.cell{padding:0;min-height:0;aspect-ratio:1;border:2px solid #446c89;border-radius:7px;background:#d4e3ff;box-shadow:inset 1px 1px 0 white,1px 2px 0 #244d72;font-size:18px;line-height:1;color:#244669}.cell.selected{background:#f5db27}.cell.base{background:#168edc;color:white}.cell.invalid:not(.base){background:#e477e9;color:#631b77}.cell:hover{filter:brightness(1.12)}.tools{display:flex;gap:6px;margin:15px 0 13px}.tools button{flex:1;font-size:14px;padding:8px 6px}.actions{display:flex;gap:9px;margin:13px 0}.actions button{flex:1}.examples{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px}.examples select{flex:1;min-width:0;background:#f3f8ff;color:#244f76;border:1px solid #82a3c5;border-radius:6px;padding:7px}.status{border-left:4px solid #268aca;padding:9px 11px;background:#f1f7ff;font-size:14px;line-height:1.6;margin:14px 0 0;min-height:62px}.status.error{border-color:#c150a5;color:#842b78;background:#fce9fc}.status.success{border-color:#178669;color:#14644f;background:#e7fcf0}.stage-wrap{display:flex;flex-direction:column;min-width:0;border:2px solid #487697;border-radius:12px;overflow:hidden;box-shadow:0 4px 0 #7994b4;background:#dceaff}#stage{position:relative;flex:1;min-height:440px;background:linear-gradient(#2992de,#6cc2ef);overflow:hidden;touch-action:none}#stage canvas{display:block;width:100%;height:100%;position:absolute;inset:0;outline:none}.stage-label{position:absolute;top:20px;left:22px;color:#0c4d7c;font-size:17px;font-weight:700;z-index:2;pointer-events:none}.view-tools{position:absolute;top:15px;right:15px;display:flex;gap:6px;z-index:3}.view-tools button{font-size:12px;padding:5px 8px;min-height:33px;box-shadow:none;background:#e3f3ffdd;border-color:#3978a2;border-width:1px}.view-tools button.active{background:#166daa;color:#fff}.legend{position:absolute;bottom:18px;left:20px;display:flex;gap:7px;align-items:center;font-size:13px;z-index:2;color:#134971;pointer-events:none}.legend span{width:14px;height:14px;border:1.5px solid #244569;border-radius:2px;display:inline-block}.legend .yellow{background:#f5dc2a}.legend .blue{background:#118ddc}.gesture{position:absolute;bottom:18px;right:20px;color:#185983;font-size:12px;pointer-events:none}.stage-bottom{padding:19px 22px;background:linear-gradient(#e3edff,#d4e4fe);border-top:2px solid #285475}.fold-heading{display:flex;align-items:center;gap:9px}.fold-heading button{font-size:13px}.fold-heading #play{min-width:128px}#foldState{flex:1;color:#315f80;font-size:14px;text-align:center}.fold-slider{display:flex;align-items:center;gap:12px;margin-top:17px;font-size:13px}.fold-slider input{flex:1;min-width:30px}.fold-slider output{min-width:36px;text-align:right;font-weight:bold}input[type=range]{accent-color:#e66c3d;height:26px;cursor:pointer}.fold-slider input[type=range]{accent-color:#078cd9}footer{padding:14px 25px 18px;display:flex;justify-content:space-between;color:#6a839d;font-size:12px;max-width:1700px;margin:auto}.dimension{margin:17px 0}.dimension label{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:15px}.dimension output{font-weight:700;background:#f3f8ff;padding:3px 10px;border-radius:5px;min-width:44px;text-align:center}.dimension input{width:100%;display:block;margin:6px 0 0}#length{accent-color:#ea649a}#width{accent-color:#13a9df}#height{accent-color:#53ac72}h3{font-size:14px;margin:21px 0 -4px}.wide{width:100%}.checkbox{display:flex;gap:8px;align-items:center;font-size:13px;margin:18px 0}.checkbox input{width:18px;height:18px;accent-color:#0877c0}.formula{font-size:14px;line-height:1.8;padding:12px;background:#f0f7ff;border:1px solid #adc8df;border-radius:7px;margin-top:15px}.formula b{color:#aa6500}.slice-hint{font-size:14px;line-height:1.6;text-align:center}#renderError{position:absolute;inset:35% 15%;z-index:10;background:#fff;padding:20px;border:2px solid #9b3939;border-radius:8px;line-height:1.8}
@media(min-width:1400px){#stage{min-height:580px}.panel{padding:24px}main{grid-template-columns:430px minmax(0,1fr)}}
@media(max-width:1000px){header{padding:15px 18px}.title p{display:none}main{padding:4px 14px 10px;grid-template-columns:315px minmax(0,1fr);gap:12px}.panel{padding:14px}.stage-label{font-size:14px;top:65px;left:16px}.fold-heading{flex-wrap:wrap}.fold-heading #foldState{order:4;flex-basis:100%;margin-top:4px}.fold-heading button{flex:1;padding:7px 5px}.gesture{bottom:45px;left:20px}#grid{gap:3px;padding:6px}.cell{border-radius:5px}#stage{min-height:405px}.stage-bottom{padding:15px 12px}}
@media(max-width:710px){header{padding:12px;gap:10px}.back{font-size:12px}.title{gap:7px}.title h1{font-size:17px}.title>span{display:none}.quiet{padding:5px 8px;min-height:35px}nav{padding:10px 12px;gap:6px}nav button{min-width:0;flex:1;font-size:14px;padding:9px 5px}main{display:flex;flex-direction:column;max-width:600px;padding:4px 12px 10px}.panel{padding:16px}.stage-wrap{min-height:490px}#stage{min-height:340px}.panelheading h2{font-size:18px}#grid{max-width:360px;margin:auto}.tools,.actions{margin:11px 0}.status{min-height:0}.stage-label{top:62px}.fold-heading{flex-wrap:nowrap}.fold-heading #foldState{order:0;flex-basis:auto}.fold-heading button{flex:initial}.fold-heading #play{min-width:112px}.fold-heading #flat,.fold-heading #closed{font-size:11px}.gesture{bottom:42px}.dimension{margin:14px 0}footer{padding:12px 16px}.stage-bottom{padding:14px 12px}}