@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#233d38;background:#f6f5ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid #d6ddd5;background:#fff;color:#28483e;border-radius:10px;padding:11px 14px;font-weight:700;transition:background .15s,transform .15s}button:hover{background:#e8f0df;transform:translateY(-1px)}button:focus-visible,input:focus-visible{outline:3px solid #de9456;outline-offset:3px}button:disabled{opacity:.4;cursor:default}header{display:flex;align-items:center;gap:14px;max-width:1600px;margin:auto;padding:23px 32px}.brand{width:48px;height:48px;background:#dbea9a;display:grid;place-items:center;font-size:34px;border-radius:13px}small,.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px}h1,h2{font-family:'Space Grotesk',sans-serif;margin:4px 0}h1{font-size:26px;letter-spacing:-1px}h1 span{font-family:'DM Sans';font-size:10px;background:#e4e8de;border-radius:5px;padding:4px;margin-left:8px;vertical-align:middle;letter-spacing:0}header>button{margin-left:auto;font-size:12px}main{display:grid;grid-template-columns:minmax(0,1fr) 354px;gap:20px;max-width:1600px;margin:auto;padding:0 24px}.stage{background:#e7ecdf;border:1px solid #d9e0d2;border-radius:22px;position:sticky;top:14px;height:calc(100vh - 124px);min-height:550px;overflow:hidden}.stage-top{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;gap:8px;z-index:2;pointer-events:none}.pill{font-size:10px;letter-spacing:.8px;background:#ffffffbb;padding:10px 12px;border-radius:8px;font-weight:700}#viewport{position:absolute;inset:0 0 120px}canvas{display:block;touch-action:none;width:100%;height:100%}#loading{position:absolute;top:45%;width:100%;text-align:center}.view-buttons{position:absolute;left:20px;top:66px;display:flex;gap:5px}.view-buttons button{padding:8px 11px;font-size:11px;background:#ffffffbf}.view-buttons .active{background:#2d5143;color:white}.hint{position:absolute;bottom:133px;left:15px;right:15px;text-align:center;font-size:11px;color:#566b5e;pointer-events:none}.stage-bottom{position:absolute;bottom:0;left:0;right:0;min-height:114px;padding:22px 26px;background:#f5f7efcc;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #d9e0d2}.stage-bottom h2{font-size:25px;letter-spacing:-.7px}.primary{background:#2c5344;color:white;border-color:#2c5344}.primary:hover{background:#3f6a55}.card{padding:22px;background:white;border:1px solid #e2e5db;border-radius:18px;margin-bottom:14px}.eyebrow{color:#6c8175;margin-bottom:12px}.card h2{font-size:21px;letter-spacing:-.7px}.card p{font-size:12px;line-height:1.6;color:#68796e;margin:8px 0 15px}#parts{display:grid;grid-template-columns:1fr 1fr;gap:7px}#parts button{text-align:left;font-size:11px;padding:11px 9px}#parts button.active{border-color:#65834a;background:#eff5dc;box-shadow:inset 3px 0 #648943}#parts button small{display:block;font-size:9px;letter-spacing:0;font-weight:400;margin-top:3px;color:#6d7d70}.selected{border-top:4px solid #c4d986}.actions{display:flex;gap:7px;margin-top:14px}.actions button{flex:1;font-size:11px;padding:11px 8px}.range-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:20px;gap:10px}.range-label label,.range-label strong{font-weight:700}.range-label output,.range-label span{color:#64785c;font-size:10px}input[type=range]{width:100%;accent-color:#638548;margin:11px 0}.check{font-size:11px;display:flex;align-items:center;gap:5px}.check input{accent-color:#638548}.blueprint{background:#f6f8f0;border-radius:10px;padding:0 12px 8px;margin-top:16px;overflow:auto}.blueprint>.range-label{padding-top:13px}.front-label{font-size:8px;text-align:center;letter-spacing:1px;margin:15px 0 8px;color:#70806d}#map{display:grid;gap:3px;justify-content:center}.cell{width:23px;height:23px;display:grid;place-items:center;border:1px solid #52645655;font:9px monospace;border-radius:2px}.empty{border:1px dashed #dce2d6;color:#aab6a5}.blueprint p{font-size:9px;text-align:center;margin-bottom:0}#materials{display:flex;flex-wrap:wrap;gap:7px}.material{font-size:10px;background:#f5f6f1;padding:6px 8px;border-radius:5px;display:flex;gap:6px;align-items:center}.swatch{width:12px;height:12px;border:1px solid #0002;border-radius:2px}.step-head{display:flex;align-items:center;justify-content:space-between;gap:10px}#step-number{font-size:10px;white-space:nowrap}footer{padding:16px 30px;font-size:10px;color:#788272;text-align:center}@media(max-width:900px){main{grid-template-columns:1fr 310px;gap:12px;padding:0 12px}.card{padding:16px}.stage-bottom{padding:16px;display:block}.stage-bottom h2{font-size:19px}.stage-bottom button{margin-top:8px;font-size:11px}.stage-top .pill{font-size:8px;padding:8px}.stage-top{left:12px;right:12px}.hint{font-size:9px}}@media(max-width:650px){header{padding:16px}.brand{width:36px;height:36px}h1{font-size:21px}header small{font-size:8px}header>button{font-size:9px;padding:8px;max-width:110px}main{display:flex;flex-direction:column}.stage{position:relative;top:0;min-height:460px;height:65vh}.stage-bottom{display:flex}.stage-bottom button{margin:0}.stage-bottom h2{font-size:19px}aside{display:grid;grid-template-columns:1fr}.view-buttons{left:12px}.card{padding:20px}}

.collection{max-width:1600px;margin:0 auto 20px;padding:0 24px}.collection-heading{display:flex;align-items:center;justify-content:space-between;margin:0 4px 12px}.collection-heading h2{font-size:23px}.collection-heading p{font-size:12px;color:#68796e}#designs{display:flex;gap:9px;overflow-x:auto;padding:3px 2px 10px;scrollbar-color:#a8b594 transparent}.design-card{flex:0 0 140px;padding:10px;text-align:left;white-space:normal}.design-card.active{background:#eff5dc;border-color:#648943;box-shadow:inset 0 -3px #648943}.design-card svg{width:100%;height:85px;display:block;margin-bottom:6px}.design-card strong{font-size:11px;display:block}.design-card small{font-size:9px;letter-spacing:0;display:block;margin-top:4px;color:#71806b;font-weight:400}#design-name{font-size:12px;letter-spacing:.2px}#design-tag{font-size:11px;margin-top:5px;color:#68796e}@media(max-width:650px){.collection{padding:0 12px;margin-bottom:10px}.collection-heading{display:block}.collection-heading h2{font-size:20px}.collection-heading p{margin:5px 0}.design-card{flex-basis:125px}.design-card svg{height:65px}.stage-bottom h2{font-size:17px}.stage-bottom{padding:14px}#design-tag{font-size:9px}}
.pack-nav{display:flex;justify-content:flex-end;align-items:center;gap:6px;font-size:10px;color:#68796e}.pack-nav button{padding:4px 12px}.pack-nav span{margin-right:6px}
.block-guide{border:2px solid #a4bf65;background:#fbfdf4}#begin-blocks{font-size:19px;width:100%;padding:17px 12px;margin-top:5px}.building .collection,.building aside>.card:not(.block-guide),.building .stage-bottom,.building .hint{display:none}.building #viewport{bottom:0}.building .stage{height:calc(100vh - 125px);min-height:540px}.building main{grid-template-columns:minmax(0,1fr) 390px}.building .block-guide{position:sticky;top:14px;padding:22px}.build-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}#block-number{font-size:15px;font-weight:800;letter-spacing:.5px}#exit-blocks{padding:7px;font-size:11px}#build-progress{width:100%;height:10px;accent-color:#678c42;margin:15px 0 20px}#block-action{font-size:14px;letter-spacing:2px;font-weight:800;color:#50644b}.big-material{display:flex;gap:14px;align-items:center;margin:16px 0}#block-swatch{display:block;flex:0 0 65px;height:65px;border:2px solid #0003;border-radius:7px;box-shadow:inset -8px -8px #0001}#block-color{font-size:34px;line-height:1.12;letter-spacing:-1px;overflow-wrap:anywhere;margin:0}#block-part{font-size:18px;color:#647457}.build-nav{display:flex;gap:10px;margin:22px 0 14px}.build-nav button{font-size:20px;min-height:58px;padding:12px;white-space:nowrap}.build-nav #block-next{flex:1}#block-restart{width:100%;font-size:20px;margin-top:12px}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}.position-grid>div{background:#eaf0df;text-align:center;padding:10px 4px;border-radius:8px;font-size:14px}.position-grid strong{display:block;font-size:30px;margin-top:3px}#block-location{font-size:16px;line-height:1.45}.build-options{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12px}.build-options button{font-size:12px;padding:8px}.build-options input{accent-color:#638548}.block-guide h3{font-size:16px;margin:21px 0 6px}#build-map-wrap{overflow-x:auto;padding:5px 3px}#build-map{display:grid;gap:3px;justify-content:center}.build-axis{font-size:10px;display:grid;place-items:center;color:#647457}.build-cell{width:27px;height:27px;border:1px dashed #bec9b3;border-radius:3px;color:#8a987e;display:grid;place-items:center;font:12px monospace}.build-cell.placed{border:1px solid #53694f55}.build-cell.current{outline:3px solid #ef8824;outline-offset:0;border-color:white;font-size:18px;z-index:1}.block-guide .map-key{font-size:12px;line-height:1.6}.building aside{min-width:0}@media(max-width:900px){.building main{grid-template-columns:minmax(0,1fr) 340px}.building .block-guide{padding:17px}#block-color{font-size:30px}}@media(max-width:650px){.building main{display:flex;flex-direction:column}.building .stage{height:42vh;min-height:300px;position:sticky;top:0;z-index:3}.building .block-guide{position:static;padding:20px}.building header{display:none}.building main{padding-top:10px}#block-color{font-size:34px}.build-nav button{font-size:21px}.building .stage-top{top:10px}.building .view-buttons{top:48px}.building .pill{font-size:8px}.building #design-name{font-size:10px}}

@media(max-width:650px){.building .stage{position:relative;top:auto}.building .block-guide{scroll-margin-top:12px}}

/* Picture choices and shared selection controls */
[hidden]{display:none!important}.collection-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0}.collection-filters button{padding:10px 18px;border-radius:99px}.collection-filters button.active,.selection-tools button.active{background:#2d5345;color:white}.collection-filters a{font-size:11px;color:#687c6e;margin-left:auto}.selection-tools{display:flex;align-items:center;gap:6px;margin:12px 0}.selection-tools button{padding:10px 9px}.selection-tools output{margin-left:auto;font-weight:800;white-space:nowrap}#parts button{position:relative;display:flex;align-items:center;gap:8px;min-height:98px;padding:10px 8px;text-align:left}#parts .part-picture{width:60px;height:70px;flex-shrink:0;display:flex}#parts .part-picture svg{width:100%;height:100%}#parts .part-label{font-size:12px;line-height:1.25}#parts small{font-size:11px;margin-top:5px}.part-check{position:absolute;right:5px;top:4px;border:1px solid #9baa99;border-radius:50%;width:19px;height:19px;text-align:center;line-height:18px;color:transparent;background:white}#parts button.active .part-check{background:#2d5345;color:white;border-color:#2d5345}#parts button.active{outline:2px solid #6b8b43;outline-offset:-2px}#selection-pictures{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}#selection-pictures span{width:58px;height:65px;border-radius:10px;background:#f1f4e9;padding:4px}#selection-pictures svg{width:100%;height:100%}.design-card strong{line-height:1.3}.design-card{min-height:190px}button:focus-visible,a:focus-visible{outline:3px solid #e28b20;outline-offset:3px}@media(max-width:600px){.collection-filters a{width:100%;margin-left:0}#parts .part-picture{width:66px}}
