:root{--ink: #f4f8ff;--ink-dim: rgba(230, 240, 255, .7);--glass: rgba(8, 28, 52, .72);--glass-hi: rgba(255, 255, 255, .08);--line: rgba(200, 225, 255, .22);--amber: #ffc857;--go: #3ddc84;--go-dark: #16a35a;--red: #ff6b5b;--mono: "Martian Mono", ui-monospace, monospace;--round: "Fredoka", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0f3d6b;color:var(--ink);font-family:var(--round)}body{touch-action:none;user-select:none;-webkit-user-select:none}canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}body.mode-test{--glass: rgba(30, 18, 30, .62);--line: rgba(255, 220, 190, .2)}.hud-top{position:fixed;top:0;left:0;right:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;padding:max(12px,env(safe-area-inset-top)) 16px 0;pointer-events:none}.hud-top>*{pointer-events:auto}.badge{justify-self:start;display:flex;align-items:center;gap:10px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:8px 14px 8px 8px;transition:background .6s}.logo{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--amber);color:#3b2a00}.logo svg{width:30px}.badge-title{font-weight:700;font-size:17px;letter-spacing:.2px;line-height:1.1}.badge-sub{font-family:var(--mono);font-size:11px;color:var(--ink-dim);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}.budget{min-width:260px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:9px 16px 11px;transition:background .6s,transform .2s}.budget.bump{transform:scale(1.04)}.budget-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}.budget-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-dim)}.budget-num{font-family:var(--mono);font-size:14px}.budget-num b{font-size:17px}.budget-num .of{color:var(--ink-dim)}.budget-bar{height:7px;border-radius:4px;background:#ffffff1f;margin-top:7px;overflow:hidden}.budget-fill{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#7dffb0,#ffc857);transition:width .25s cubic-bezier(.3,1.4,.5,1),background .3s}.budget.over .budget-fill{background:var(--red)}.budget.over .budget-num b{color:var(--red)}.top-right{justify-self:end;display:flex;gap:8px}.icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);font-weight:700;font-size:19px;transition:background .2s,transform .1s}.icon-btn:hover{background:#ffffff24}.icon-btn:active{transform:scale(.94)}.icon-btn svg{width:22px;height:22px}.icon-btn .cross{display:none}.icon-btn.muted .cross{display:inline}.icon-btn.muted .wave{display:none}.hint{position:fixed;left:50%;top:92px;transform:translate(-50%,-6px);z-index:4;font-size:15px;padding:9px 16px;border-radius:999px;white-space:nowrap;background:#ffc857f2;color:#2b1d00;font-weight:600;box-shadow:0 6px 24px #00000040;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}.hint.show{opacity:1;transform:translate(-50%)}.toolbar{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:5;display:flex;align-items:stretch;gap:10px;padding:8px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 40px #00000047;transition:opacity .35s,transform .35s cubic-bezier(.3,1.3,.5,1),background .6s;max-width:calc(100vw - 32px)}.mode-build .test-only,.mode-test .build-only{opacity:0;transform:translate(-50%,30px);pointer-events:none}.group{display:flex;gap:6px}.group+.group{padding-left:10px;border-left:1px solid var(--line)}.mat{position:relative;width:76px;padding:8px 4px 7px;border-radius:15px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:background .15s,transform .1s}.mat:hover{background:var(--glass-hi)}.mat:active{transform:scale(.95)}.mat.on{background:#ffffff29;box-shadow:inset 0 0 0 2px #ffffffbf}.mname{font-weight:600;font-size:14px;line-height:1}.mprice{font-family:var(--mono);font-size:10px;color:var(--ink-dim)}.mat kbd{position:absolute;top:4px;right:6px;font-family:var(--mono);font-size:9px;color:var(--ink-dim)}.sw{display:block;width:44px;height:14px;border-radius:4px;margin-bottom:3px}.sw-road{background:linear-gradient(#3a3f4a 0,#3a3f4a 40%,#5d6370 40%);box-shadow:inset 0 0 0 1.5px #2c3038;position:relative}.sw-road:after{content:"";position:absolute;left:6px;right:6px;top:3px;height:2px;background:repeating-linear-gradient(90deg,#ffd666 0 6px,transparent 6px 10px)}.sw-wood{height:9px;margin-top:2px;margin-bottom:6px;background:linear-gradient(#e6b27a 0,#e6b27a 40%,#c88a4e 40%);box-shadow:inset 0 0 0 1.5px #7a4f2c}.sw-steel{height:10px;margin-top:2px;margin-bottom:5px;background:linear-gradient(#dbe6f2 0,#dbe6f2 35%,#8ea2b8 35%,#8ea2b8 70%,#6b7f95 70%);box-shadow:inset 0 0 0 1.5px #43566b}.sw-cable{height:3px;margin-top:6px;margin-bottom:8px;background:#c8f1ff}.mode-test .sw-cable{background:#2b2b33}.sw-stress{width:22px;height:22px;border-radius:6px;margin:0;background:linear-gradient(135deg,#4ade80,#facc15 55%,#ef4444)}.tool{min-width:48px;border-radius:14px;display:grid;place-items:center;padding:0 10px;transition:background .15s,transform .1s,opacity .2s}.tool:hover{background:var(--glass-hi)}.tool:active{transform:scale(.94)}.tool svg{width:22px;height:22px}.tool:disabled{opacity:.3;cursor:default}.tool.on{background:#ff6b5b47;box-shadow:inset 0 0 0 2px var(--red)}.tool.wide{display:flex;gap:8px;align-items:center;padding:10px 14px;font-weight:600;font-size:15px;white-space:nowrap}.tool.toggle.on{background:#ffffff2e;box-shadow:inset 0 0 0 2px #ffffffb3}.go{display:flex;align-items:center;gap:8px;padding:0 22px 0 18px;border-radius:16px;background:linear-gradient(#4ee892,var(--go-dark));color:#04220f;font-weight:700;font-size:19px;letter-spacing:1px;box-shadow:0 4px #0c6b38,0 8px 22px #3ddc8459,inset 0 1px #fff9;transition:transform .1s,box-shadow .1s,filter .2s}.go svg{width:20px;height:20px}.go:hover{filter:brightness(1.07)}.go:active{transform:translateY(3px);box-shadow:0 1px #0c6b38,0 4px 12px #3ddc844d,inset 0 1px #fff9}.meter{display:flex;align-items:center;gap:10px;padding:0 12px 0 14px;border-left:1px solid var(--line);font-size:13px;color:var(--ink-dim);white-space:nowrap}.meter-bar{width:110px;height:8px;border-radius:4px;background:#ffffff1f;overflow:hidden}.meter-fill{height:100%;width:0;background:#4ade80;border-radius:4px}.meter b{font-family:var(--mono);color:var(--ink);min-width:42px;text-align:right}.result,.help{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:16px}.result[hidden],.help[hidden]{display:none}.help{background:#0514288c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.card{width:min(440px,100%);text-align:center;padding:26px 26px 22px;border-radius:26px;background:#fffcf5f7;color:#1f2433;box-shadow:0 30px 80px #00000073;animation:pop .5s cubic-bezier(.3,1.5,.5,1)}@keyframes pop{0%{transform:scale(.7) translateY(30px);opacity:0}}.card h2{margin:6px 0;font-size:30px;font-weight:700}.card p{margin:0 0 14px;color:#4a5068;font-size:16px;line-height:1.45}.result-icon{font-size:54px;line-height:1}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 18px}.stat{background:#f1ece2;border-radius:14px;padding:10px 6px}.stat b{display:block;font-family:var(--mono);font-size:16px;color:#1f2433}.stat span{font-size:12px;color:#6b7088}.stat.bad b{color:#d0412f}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.btn{padding:13px 22px;border-radius:14px;font-weight:700;font-size:16px;background:#1f6feb;color:#fff;box-shadow:0 3px #1450b0}.btn:active{transform:translateY(2px);box-shadow:0 1px #1450b0}.btn.ghost{background:#e9e4da;color:#1f2433;box-shadow:0 3px #cfc8ba}.help ol{text-align:left;padding-left:22px;margin:8px 0 14px;color:#3a4058;font-size:16px;line-height:1.5}.help li{margin-bottom:6px}.anchor-dot{display:inline-block;width:11px;height:11px;background:var(--amber);transform:rotate(45deg);border:1.5px solid #3b2a00;vertical-align:0}.keys{font-size:13px!important}kbd{font-family:var(--mono);font-size:11px;background:#ebe5d8;border-radius:5px;padding:1px 5px}.mat kbd{background:none;padding:0}@media(max-width:760px),(max-height:520px){.hud-top{grid-template-columns:auto 1fr auto;gap:8px}.badge-text{display:none}.badge{padding:6px}.budget{min-width:0;padding:7px 12px 9px}.budget-label{display:none}.mat{width:56px}.mprice,.mat kbd{display:none}.sw{width:34px}.toolbar{gap:6px;padding:6px}.group+.group{padding-left:6px}.tool{min-width:40px;padding:0 6px}.go{padding:0 14px;font-size:16px}.go span,.tool.wide span,.meter span{display:none}.meter-bar{width:60px}.hint{top:72px;font-size:13px;white-space:normal;width:max-content;max-width:calc(100vw - 32px);text-align:center}}@media(max-width:480px){.group.tools #btn-clear,.group.tools #btn-redo{display:none}}@media(max-width:480px){.mat{width:46px;padding:6px 2px}.sw{width:30px}.mname{font-size:12px}.tool{min-width:36px}.go{padding:0 12px}.budget-num{white-space:nowrap;font-size:12px}.budget-num b{font-size:14px}.toolbar{gap:4px}}.rotate{display:none}@media(max-width:600px)and (orientation:portrait){.rotate{position:fixed;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:6;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:#fffcf5f5;color:#1f2433;box-shadow:0 20px 50px #0006;font-size:15px;line-height:1.35}.rotate.gone{display:none}.rotate svg{flex:none;width:40px;height:40px;animation:tilt 2.4s ease-in-out infinite}.rotate button{flex:none;margin-left:auto;font-weight:700;color:#1f6feb;padding:6px}@keyframes tilt{0%,30%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}to{transform:rotate(0)}}}