.bridge-main{max-width:1250px}.bridge-heading{display:flex;justify-content:space-between;align-items:center;margin:25px 0}.bridge-heading h1{font-size:38px;margin:6px 0}.bridge-heading p{color:#667064;font-size:14px}.bridge-version{border:1px solid #d2d8c8;padding:8px;font-size:12px;color:#66775f}.bridge-layout{display:grid;grid-template-columns:275px minmax(0,1fr);gap:20px}.bridge-options{padding:20px}.bridge-options h2,.bridge-materials h2{font-size:22px;margin:0 0 18px}.bridge-presets{display:grid;gap:9px;margin-bottom:22px}.bridge-presets button{display:grid;grid-template-columns:24px 1fr;gap:4px 8px;text-align:left;padding:12px;background:#f8f7ee;border:1px solid #d3d7c9;color:#394d3e}.bridge-presets button[aria-pressed=true]{background:#e0e9d7;border-color:#698367;box-shadow:inset 3px 0 #698367}.bridge-presets small{grid-column:2;font:11px/1.5 Arial;color:#697264}.bridge-range{display:grid;grid-template-columns:1fr auto;margin:18px 0;font-size:14px}.bridge-range input{grid-column:1/-1;width:100%;margin-top:10px;accent-color:#718969}.bridge-range output{font-family:var(--pixel-font);color:#536d50}.bridge-select{display:grid;gap:8px;font-size:14px;margin:20px 0}.bridge-select select{width:100%;padding:9px;background:#faf8ef;border:1px solid #ccd3c4;color:#394d3e}.bridge-options .pixel-check{margin:15px 0}.bridge-note{font:12px/1.65 Arial,sans-serif;color:#778171;margin:20px 0 0}.bridge-result{overflow:hidden;min-width:0;display:flex;flex-direction:column}.bridge-view-toolbar{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;color:#63715f;font:12px Arial}.bridge-view-toolbar>div{display:flex;gap:8px}.bridge-view-toolbar button,.bridge-view-toolbar select{background:#f1f3e8;border:1px solid #d3d9cb;padding:6px;color:#52674d}.bridge-stage{position:relative;flex:1;min-height:490px;background:#7b9bab}.bridge-stage canvas{display:block;width:100%;height:100%;min-height:490px;position:absolute;inset:0;touch-action:none}.bridge-controls{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font:11px Arial;color:white;background:#243a3c88;padding:8px 12px;white-space:nowrap;pointer-events:none}.bridge-actions{display:flex;gap:10px;padding:14px;flex-wrap:wrap}.bridge-actions button{padding:11px 16px;border:1px solid #bfcbb5;background:#edf1e4;color:#425d43}.bridge-actions .pixel-primary{background:#657f60;color:white}.bridge-result #bridgeStatus{font:12px/1.5 Arial;margin:0;padding:0 16px;color:#7d653c}.bridge-result #bridgeStatus:not(:empty){padding:12px 16px}.bridge-materials{margin:24px 0;padding:22px}.bridge-materials header{display:flex;justify-content:space-between;align-items:center}.bridge-materials header span{font:13px Arial;color:#697563}#bridgeMaterials{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.bridge-material-row{display:flex;gap:10px;align-items:center;padding:12px;background:#f0f1e7;border:1px solid #dfe3d5}.bridge-material-row img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}.bridge-material-row b{display:block;font:13px Arial;text-transform:capitalize}.bridge-material-row small{display:block;font:11px Arial;color:#78816f;margin-top:4px}#bridgeBusy{position:absolute;inset:0;display:grid;place-items:center;background:#1f353bd9;color:white;font:14px Arial}#bridgeBusy[hidden]{display:none}@media(max-width:850px){.bridge-layout{grid-template-columns:230px minmax(0,1fr)}.bridge-stage,.bridge-stage canvas{min-height:430px}#bridgeMaterials{grid-template-columns:repeat(2,1fr)}.bridge-controls{white-space:normal;width:80%;text-align:center}}@media(max-width:620px){.bridge-layout{grid-template-columns:1fr}.bridge-options{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.bridge-options h2,.bridge-presets,.bridge-select,.bridge-note{grid-column:1/-1}.bridge-presets{grid-template-columns:1fr 1fr}.bridge-heading h1{font-size:29px}.bridge-version{display:none}.bridge-stage,.bridge-stage canvas{min-height:370px}.bridge-view-toolbar{flex-wrap:wrap}#bridgeMaterials{grid-template-columns:1fr}.bridge-actions button{flex:1}.bridge-materials header{align-items:start;gap:12px}}
.bridge-design-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.bridge-design-card{position:relative;text-align:left;border:1px solid #cdd6c3;background:#f7f6ed;padding:14px 14px 14px 66px;min-height:78px;transition:background .18s,border-color .18s,transform .18s;color:#41523f}.bridge-design-card:hover{background:#eaf0e0;transform:translateY(-2px)}.bridge-design-card[aria-pressed=true]{border:2px solid #6b8564;background:#e3ecda;box-shadow:0 3px 0 #c8d4bf}.bridge-design-card b{font-size:16px;font-family:var(--pixel-font);display:block}.bridge-design-card small{font:11px/1.5 Arial;color:#7a8472}.bridge-design-card svg{position:absolute;left:14px;top:23px;width:38px;height:30px;opacity:.7}.bridge-variation{display:grid;gap:9px;border-bottom:1px solid #dce2d1;padding-bottom:18px;margin-bottom:12px}.bridge-variation button{padding:10px;background:#dfe8d5;border:1px solid #bfceb4;color:#425c3c;font-family:var(--pixel-font);font-size:15px}.bridge-variation label{display:flex;justify-content:space-between;align-items:center;font:11px Arial;color:#819076}.bridge-variation input{width:90px;border:1px solid #d2d9c6;background:#fbfaf3;color:#637559;padding:5px}.bridge-palette-chips{display:flex;gap:4px;margin-top:3px}.bridge-palette-chips i{height:12px;flex:1;background:var(--chip);border:1px solid #0001}.bridge-more{border-top:1px solid #dce2d1;padding-top:16px;margin-top:16px}.bridge-more summary{cursor:pointer;color:#5c7453;font-size:14px}.bridge-more select:disabled{opacity:.45}.bridge-options{align-self:start}.bridge-options [hidden]{display:none!important}.bridge-material-row{min-width:0}.bridge-material-row b{overflow-wrap:anywhere}@media(max-width:900px){.bridge-design-gallery{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.bridge-variation,.bridge-more{grid-column:1/-1}.bridge-design-card{padding-left:12px;min-height:70px}.bridge-design-card svg{display:none}.bridge-design-card b{font-size:15px}.bridge-options .pixel-check{align-self:center}.bridge-more .bridge-range{display:grid}.bridge-heading{margin-bottom:12px}}@media(prefers-reduced-motion:reduce){.bridge-design-card{transition:none}.bridge-design-card:hover{transform:none}}

.bridge-material-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px}.bridge-material-icon canvas{display:block;width:34px;height:34px;object-fit:contain;image-rendering:pixelated}.bridge-material-icon.icon-loading{background:#dfe5d6;border:1px solid #d3dbca;box-sizing:border-box}