*{box-sizing:border-box}body{margin:0;background:#edf1f5;color:#24405e;font:14px system-ui,sans-serif;display:flex;flex-direction:column;height:100dvh;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:white;border-bottom:1px solid #dbe4ee;gap:16px;flex-wrap:wrap;flex-shrink:0}h1{margin:0;font-size:25px;letter-spacing:-1px}h1 span{color:#1684ce}header p{margin:3px 0;color:#6b7e91;font-size:12px}nav,.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}button,a{font:inherit;cursor:pointer;border:1px solid #cad7e6;background:white;color:#24405e;padding:8px 11px;border-radius:8px;text-decoration:none}button:hover,a:hover{background:#edf7ff;border-color:#1684ce}button.active,#save{background:#1684ce;color:white}button:disabled{opacity:.4;cursor:default}.tools{padding:12px 20px;background:#f9fbfe;flex-shrink:0}.tools input{width:60px;padding:5px;border:1px solid #cad7e6;border-radius:5px}.tools input[type=checkbox]{width:auto}.tools select{font:inherit;padding:6px;border:1px solid #cad7e6;border-radius:6px;background:white}.legend{margin-left:auto;color:#65778a;font-size:12px}.legend i{display:inline-block;width:16px;height:3px;background:#1769ac;vertical-align:middle;margin:0 4px 0 12px}.legend .derived{background:#566b81}.legend .pending{background:#d88b1c}#hint{margin:0;padding:9px 22px;background:#e3eefb;font-size:12px;flex-shrink:0}
main{flex:1;min-height:560px;display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:14px;padding:14px}.drawing-sheet{position:relative;min-width:0;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border:1px solid #97a4af;background-color:white;background-image:linear-gradient(to right,#e2e8ee 1px,transparent 1px),linear-gradient(to bottom,#e2e8ee 1px,transparent 1px);background-size:var(--grid-step,22px) var(--grid-step,22px);background-position:var(--grid-x,0px) var(--grid-y,0px);background-origin:border-box}.drawing-sheet::before,.drawing-sheet::after{content:'';position:absolute;z-index:3;pointer-events:none;background:#8d9aa6}.drawing-sheet::before{left:50%;top:0;bottom:0;width:1px}.drawing-sheet::after{top:50%;left:0;right:0;height:1px}.panel{overflow:hidden;display:flex;flex-direction:column;min-width:0;min-height:0}.drawing-sheet>.panel{position:relative;background:transparent;border:0;border-radius:0}.right{grid-column:1;grid-row:1}.face{grid-column:2;grid-row:1}.top{grid-column:2;grid-row:2}h2{margin:0;padding:10px 14px;background:#f8fafe;font-size:14px;border-bottom:1px solid #e1e8f1}h2 small{font-weight:normal;color:#7a8da1;margin-left:10px;font-size:11px}.drawing-sheet h2{position:absolute;left:10px;top:9px;z-index:1;padding:3px 7px;font-size:12px;background:#ffffffed;border:0;font-weight:500;pointer-events:none}.panel.calculated h2{color:#497263}.panel.calculated canvas{cursor:default}canvas{display:block;flex:1;width:100%;min-height:0;touch-action:none;cursor:crosshair}.model{background:white;border:1px solid #d4dfec;border-radius:10px}.model iframe{border:0;width:100%;flex:1;min-height:0}footer{padding:5px 20px;font-size:12px;color:#61778c;flex-shrink:0}
[hidden]{display:none!important}.exercise-bar{padding:10px 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f0f7ff;border-bottom:1px solid #d3e2f2;flex-shrink:0}.exercise-bar select{font:inherit;padding:7px;border:1px solid #c7d8eb;border-radius:6px;background:white;max-width:370px}.exercise-bar span{color:#5f7c91;font-size:12px;margin-left:auto}.reference{display:flex;flex-direction:column;flex:1;min-height:0;border-bottom:2px solid #d4dfec}.reference h2{background:#e8f3ee;color:#286650}.exercise-help{grid-column:1;grid-row:2;justify-content:flex-end;padding:14px}.exercise-help h2{position:static;align-self:flex-start}.exercise-help p{line-height:1.6;margin:8px 7px;color:#5c7186;background:#ffffffed;font-size:12px;max-width:300px}body.exercise-mode #example{display:none}body.exercise-mode .tools .legend{margin-left:0}
@media(max-width:900px){body{height:auto}main{grid-template-columns:1fr;flex:none;min-height:0}.drawing-sheet{height:620px}.model{height:500px}body.exercise-mode .model{height:650px;flex-direction:row;flex-wrap:wrap}body.exercise-mode .reference,body.exercise-mode #engine{flex:1 1 49%;height:100%}body.exercise-mode .model>h2{display:none}.legend{margin-left:0}}
@media(max-width:550px){header{padding:12px}.tools{padding:10px}.drawing-sheet{height:500px}.drawing-sheet h2{left:4px;top:6px;font-size:11px;padding:2px 4px}.drawing-sheet h2 small{display:none}.exercise-help{padding:6px}.exercise-help p{font-size:11px}.exercise-bar select{max-width:245px}body.exercise-mode .model{flex-direction:column;flex-wrap:nowrap;height:650px}body.exercise-mode .reference,body.exercise-mode #engine{flex:1;height:auto}body.exercise-mode .model>h2{display:block}}
#demoCursor{position:fixed;z-index:20;pointer-events:none;color:#e15b23;font-size:26px;line-height:1;transform:translate(-3px,-4px) rotate(-30deg);filter:drop-shadow(0 1px 1px white)}body.demo-running canvas{pointer-events:none}body.demo-running nav a{pointer-events:none;opacity:.4}#demo.active{background:#c75121;color:white}

.icon-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:8px;flex-shrink:0}.icon-button svg{display:block;pointer-events:none}