:root{--ink:#17211d;--muted:#66716d;--line:#d9ded9;--paper:#f8faf7;--soft:#edf1ec;--red:#e53935;--yellow:#ffd21c}*{box-sizing:border-box}html,body{min-height:100%;margin:0;overflow:hidden}body{color:var(--ink);font-family:var(--font-geist-sans), Arial, Helvetica, sans-serif;-webkit-font-smoothing:antialiased;background:#e8ede8}button{color:inherit;font:inherit}button:focus-visible{outline-offset:2px;outline:3px solid #1676d2}.app-shell{background:#e9eee9;grid-template-rows:70px minmax(0,1fr) 28px;height:100svh;min-height:640px;display:grid}.topbar{z-index:20;border-bottom:1px solid var(--line);background:#fcfdfaf5;align-items:center;gap:12px;padding:0 18px;display:flex;position:relative;box-shadow:0 4px 20px #2030280d}.brand-mark{color:#fff;background:var(--red);border-radius:10px;place-items:center;width:40px;height:40px;display:grid;box-shadow:inset 0 -3px #6b121240,0 4px 10px #e5393533}.brand-copy{flex-direction:column;min-width:110px;line-height:1;display:flex}.brand-copy strong{letter-spacing:-.04em;font-size:16px;font-weight:900}.brand-copy span{letter-spacing:.22em;color:var(--muted);margin-top:5px;font-size:8px;font-weight:800}.project-name{border-left:1px solid var(--line);align-items:center;gap:9px;height:36px;margin-left:22px;padding-left:28px;display:flex}.project-name>span{letter-spacing:.16em;color:#8a938f;font-size:8px;font-weight:800}.project-name strong{font-size:13px}.project-name svg{color:#2e9c55}.header-actions{align-items:center;gap:9px;margin-left:auto;display:flex}.autosave{color:#74807b;align-items:center;gap:7px;margin-right:10px;font-size:10px;font-weight:700;display:flex}.autosave>span{background:#35a966;border-radius:999px;width:7px;height:7px;box-shadow:0 0 0 3px #dff0e5}.icon-button,.primary-button,.mobile-menu{cursor:pointer;border:0}.icon-button{border:1px solid var(--line);background:#fff;border-radius:9px;place-items:center;width:38px;height:38px;display:grid}.icon-button:hover{background:var(--soft)}.primary-button{color:#fff;background:var(--ink);border-radius:9px;align-items:center;gap:8px;height:39px;padding:0 15px;font-size:11px;font-weight:800;display:flex;box-shadow:0 4px 10px #17211d21}.primary-button:hover{background:#2b3833}.mobile-menu,.mobile-info{display:none}.builder-grid{grid-template-columns:224px minmax(0,1fr) 224px;min-height:0;display:grid}.library-panel,.info-panel{z-index:12;scrollbar-width:thin;background:#f8faf7f7;min-height:0;position:relative;overflow:auto}.library-panel{border-right:1px solid var(--line)}.info-panel{border-left:1px solid var(--line);padding-bottom:20px}.panel-heading{justify-content:space-between;align-items:center;padding:21px 18px 14px;display:flex}.panel-heading span,.build-score>span,.selected-part>span{letter-spacing:.18em;color:#8a938f;font-size:8px;font-weight:900;display:block}.panel-heading h2{letter-spacing:-.04em;text-transform:uppercase;margin:4px 0 0;font-size:19px;font-weight:900}.mobile-close{cursor:pointer;background:0 0;border:0;display:none}.panel-tabs{background:#e8ede8;border-radius:8px;grid-template-columns:1fr 1fr;height:37px;margin:0 14px 12px;padding:3px;display:grid}.panel-tabs button{letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-radius:6px;font-size:9px;font-weight:900}.panel-tabs button.active{background:#fff;box-shadow:0 2px 7px #1d2d2417}.brick-list{grid-template-columns:1fr 1fr;gap:7px;padding:0 14px;display:grid}.brick-choice{cursor:pointer;background:#fff;border:1px solid #dfe4df;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:78px;transition:border-color .15s,transform .15s,box-shadow .15s;display:flex;position:relative}.brick-choice:hover{border-color:#aeb8b2;transform:translateY(-1px)}.brick-choice.selected{border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}.brick-choice>span:not(.brick-preview){font-size:9px;font-weight:900}.brick-choice>svg{color:#fff;background:var(--ink);border-radius:999px;padding:2px;position:absolute;top:5px;right:5px}.brick-preview{--preview-ratio:2;width:calc(23px * min(var(--preview-ratio), 2.7));background:#cbd2cc;border-radius:3px;justify-content:space-around;align-items:flex-start;max-width:62px;height:21px;padding:0 3px;display:flex;position:relative;transform:skewY(-3deg);box-shadow:inset 0 -5px #9fa9a1,0 4px 5px #19231e1f}.brick-preview i{background:#d9dfda;border-radius:50% 50% 2px 2px;width:7px;height:5px;margin-top:-4px;box-shadow:inset 0 -2px #aeb7b0}.idea-block{border-top:1px solid var(--line);margin:16px 14px 0;padding-top:14px}.idea-block>span{color:#8a938f;letter-spacing:.14em;align-items:center;gap:6px;margin-bottom:8px;font-size:8px;font-weight:900;display:flex}.idea-block>button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;grid-template-columns:36px 1fr auto;align-items:center;gap:9px;width:100%;padding:7px 4px;display:grid}.idea-block>button:hover{background:#edf1ec}.idea-thumb{color:#fff;background:#1877d2;border-radius:7px;place-items:center;width:34px;height:34px;font-size:20px;font-weight:900;display:grid}.idea-thumb.multicolour{color:#17211d;background:linear-gradient(135deg,#e53935 0 50%,#ffd21c 50%)}.idea-block button>span:nth-child(2){flex-direction:column;gap:3px;display:flex}.idea-block strong{font-size:10px}.idea-block small{color:#8a938f;font-size:8px}.new-build-button{cursor:pointer;background:0 0;border:1px dashed #aeb8b2;border-radius:8px;justify-content:center;align-items:center;gap:7px;width:calc(100% - 28px);height:34px;margin:12px 14px 18px;font-size:9px;font-weight:800;display:flex}.canvas-stage{background:#e9eee9;min-width:0;min-height:0;position:relative;overflow:hidden}.canvas-stage:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 80px #2a39300d}.canvas-host{position:absolute;inset:0}.canvas-host canvas{touch-action:none;width:100%;height:100%;display:block}.webgl-fallback{z-index:2;text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:80px 20px 130px}.webgl-fallback>strong{margin-top:12px;font-size:13px}.webgl-fallback>span{color:#75807b;margin-top:5px;font-size:10px}.fallback-stack{width:155px;height:105px;position:relative;transform:rotate(-5deg)}.fallback-brick{border-radius:5px;width:112px;height:35px;position:absolute;left:50%;transform:translate(-50%)skewY(-7deg);box-shadow:inset 0 -8px #00000024,0 12px 16px #2d3d341f}.fallback-brick:before{content:"";background:repeating-radial-gradient(circle at 7px 6px,#ffffff59 0 5px,#0000000f 5.5px 7px,#0000 7.5px 26px);height:9px;position:absolute;inset:-7px 9px auto}.fallback-brick.one{background:#1877d2;bottom:3px}.fallback-brick.two{background:#ffd21c;width:84px;bottom:35px}.fallback-brick.three{background:#e53935;width:53px;bottom:66px}.stage-tools{z-index:3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffeb;border:1px solid #d5dbd6;border-radius:11px;align-items:center;padding:4px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 8px 25px #28372e1f}.stage-tools button{text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-radius:7px;justify-content:center;align-items:center;gap:6px;min-width:35px;height:34px;padding:0 9px;font-size:9px;font-weight:900;display:flex}.stage-tools button.active{color:#fff;background:var(--ink)}.stage-tools button:disabled{opacity:.3;cursor:default}.stage-tools button.clear-tool:not(:disabled){color:#c8332f}.stage-tools button.clear-tool:not(:disabled):hover{color:#fff;background:#c8332f}.stage-tools>i{background:var(--line);width:1px;height:20px;margin:0 3px}.view-tools{z-index:3;border:1px solid var(--line);background:#ffffffe6;border-radius:10px;flex-direction:column;padding:4px;display:flex;position:absolute;top:14px;right:14px;box-shadow:0 6px 18px #24342a1a}.view-tools button{cursor:pointer;background:0 0;border:0;border-bottom:1px solid #e3e7e3;place-items:center;width:34px;height:34px;display:grid}.view-tools button:last-child{border-bottom:0}.view-tools button.active{color:var(--red);background:#faeceb;border-radius:6px}.layer-control{z-index:3;border:1px solid var(--line);background:#ffffffeb;border-radius:10px;align-items:center;gap:3px;padding:4px;display:flex;position:absolute;top:14px;left:14px;box-shadow:0 6px 18px #24342a14}.layer-control>div{align-items:center;gap:7px;height:34px;padding:0 8px;display:flex}.layer-control span{letter-spacing:.1em;color:#7b8581;font-size:8px;font-weight:900}.layer-control strong{text-align:center;min-width:19px;font-size:13px}.layer-control button{cursor:pointer;background:#edf1ed;border:0;border-radius:6px;place-items:center;width:31px;height:31px;display:grid}.layer-control button:disabled{opacity:.35}.colour-tray{z-index:3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff0;border:1px solid #d4dad5;border-radius:13px;align-items:center;gap:11px;min-height:54px;padding:7px 10px 7px 13px;display:flex;position:absolute;bottom:46px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #22302824}.tray-label{letter-spacing:.12em;color:#7b8581;font-size:8px;font-weight:900}.swatches{gap:6px;display:flex}.swatches button{color:#fff;background:var(--swatch);cursor:pointer;border:2px solid #fff;border-radius:8px;place-items:center;width:30px;height:30px;transition:transform .15s;display:grid;box-shadow:0 0 0 1px #cbd2cc,inset 0 -3px #00000024}.swatches button:hover{transform:translateY(-2px)}.swatches button.active{box-shadow:0 0 0 2px var(--ink), inset 0 -3px 0 #00000024;transform:translateY(-3px)}.colour-tray>i{background:var(--line);width:1px;height:28px}.rotate-part{cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;height:34px;padding:0 7px;font-size:8px;font-weight:900;display:flex}.canvas-hint{z-index:2;white-space:nowrap;color:#68736e;text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:7px;font-size:8px;font-weight:700;display:flex;position:absolute;bottom:15px;left:50%;transform:translate(-50%)}.canvas-hint i{background:#9ca69f;border-radius:50%;width:3px;height:3px}.canvas-hint span{color:var(--ink)}.toast{z-index:8;color:#fff;opacity:0;pointer-events:none;background:#17211df0;border-radius:8px;padding:9px 13px;font-size:10px;font-weight:800;transition:opacity .2s,transform .2s;position:absolute;top:78px;left:50%;transform:translate(-50%,-8px)}.toast.show{opacity:1;transform:translate(-50%)}.mobile-brick-button{display:none}.build-score{color:#fff;background:#18221e;border-radius:11px;margin:0 16px;padding:15px;box-shadow:0 7px 18px #17211d24}.build-score>span{color:#9faaa5}.build-score>strong{margin:5px 0 7px;font-size:34px;line-height:1;display:block}.build-score>div{background:#3a4741;border-radius:999px;height:4px;overflow:hidden}.build-score>div>span{background:var(--yellow);border-radius:inherit;height:100%;transition:width .3s;display:block}.build-score small{color:#aab3af;margin-top:7px;font-size:8px;display:block}.stat-grid{grid-template-columns:1fr 1fr;gap:7px;margin:10px 16px 0;display:grid}.stat-grid>div{border:1px solid var(--line);background:#fff;border-radius:9px;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding:11px;display:grid}.stat-grid svg{color:#69746f;grid-row:span 2}.stat-grid strong{font-size:16px;line-height:1}.stat-grid span{color:#7b8581;margin-top:3px;font-size:8px}.selected-part{border-top:1px solid var(--line);text-align:center;margin:18px 16px 0;padding-top:16px}.selected-part>span{text-align:left}.large-brick-preview{background:#edf1ed;border-radius:9px;place-items:center;height:76px;margin:8px 0;display:grid}.large-brick-preview .brick-preview{transform:scale(1.5)skewY(-3deg)}.selected-part>strong{text-transform:uppercase;font-size:11px;display:block}.selected-part>small{color:#808a86;margin-top:4px;font-size:8px;display:block}.tips-card{background:#fff8da;border:1px solid #eddf9c;border-radius:10px;margin:18px 16px 0;padding:13px}.tips-card>div{color:#8b7111;align-items:center;gap:6px;display:flex}.tips-card strong{letter-spacing:.08em;font-size:8px}.tips-card p{color:#5f583a;margin:9px 0;font-size:9px;line-height:1.55}.tips-card button{cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;padding:0;font-size:8px;font-weight:900;display:flex}.snapshot-button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;justify-content:center;align-items:center;gap:7px;width:calc(100% - 32px);height:37px;margin:14px 16px 0;font-size:9px;font-weight:900;display:flex}.statusbar{z-index:15;color:#78827e;border-top:1px solid var(--line);letter-spacing:.05em;background:#f8faf7;justify-content:space-between;align-items:center;padding:0 17px;font-size:8px;font-weight:700;display:flex;position:relative}.statusbar span{align-items:center;gap:6px;display:flex}.status-centre{letter-spacing:.14em;font-size:7px}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#0b120f8f;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.help-modal{background:#fbfcfa;border-radius:18px;width:min(440px,100%);padding:28px;position:relative;box-shadow:0 28px 70px #00000040}.modal-close{cursor:pointer;background:#edf1ed;border:0;border-radius:8px;place-items:center;width:34px;height:34px;display:grid;position:absolute;top:14px;right:14px}.modal-icon{color:#fff;background:var(--red);border-radius:11px;place-items:center;width:48px;height:48px;margin-bottom:17px;display:grid;box-shadow:inset 0 -3px #00000026}.help-modal>span{color:#8a938f;letter-spacing:.17em;font-size:8px;font-weight:900}.help-modal h2{letter-spacing:-.05em;margin:5px 0 20px;font-size:27px}.help-steps{gap:9px;display:grid}.help-steps>div{background:#edf1ed;border-radius:10px;align-items:center;gap:12px;padding:11px;display:flex}.help-steps b{color:#fff;background:var(--ink);border-radius:7px;place-items:center;width:28px;height:28px;font-size:11px;display:grid}.help-steps span{flex-direction:column;gap:3px;display:flex}.help-steps strong{font-size:11px}.help-steps small{color:#69736f;font-size:9px}.shortcut-row{color:#69736f;justify-content:space-between;gap:10px;margin:15px 0;font-size:8px;display:flex}kbd{color:#38423e;background:#fff;border:1px solid #cfd6d0;border-bottom-width:2px;border-radius:4px;padding:3px 5px;font-size:8px}.modal-primary{color:#fff;background:var(--ink);text-transform:uppercase;cursor:pointer;border:0;border-radius:9px;justify-content:center;align-items:center;gap:7px;width:100%;height:42px;font-size:10px;font-weight:900;display:flex}.clear-modal{text-align:center;background:#fbfcfa;border-radius:18px;width:min(390px,100%);padding:28px;position:relative;box-shadow:0 28px 70px #00000040}.clear-modal-icon{color:#fff;background:#c8332f;border-radius:11px;place-items:center;width:48px;height:48px;margin:0 auto 16px;display:grid;box-shadow:inset 0 -3px #00000026}.clear-modal>span{color:#a14a47;letter-spacing:.17em;font-size:8px;font-weight:900}.clear-modal h2{letter-spacing:-.04em;margin:6px 0 8px;font-size:24px}.clear-modal p{color:#69736f;max-width:300px;margin:0 auto 20px;font-size:10px;line-height:1.55}.clear-modal-actions{grid-template-columns:1fr 1.35fr;gap:8px;display:grid}.clear-modal-actions button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:9px;justify-content:center;align-items:center;gap:7px;height:41px;font-size:9px;font-weight:900;display:flex}.clear-modal-actions button.danger{color:#fff;background:#c8332f;border-color:#c8332f}.mobile-scrim{display:none}@media (max-width:1080px){.builder-grid{grid-template-columns:196px minmax(0,1fr) 196px}.brick-list{grid-template-columns:1fr}.brick-choice{flex-direction:row;min-height:58px}.project-name{margin-left:8px;padding-left:15px}.colour-tray{bottom:42px}.swatches button{width:27px;height:27px}.tray-label,.rotate-part span{display:none}}@media (max-width:800px){html,body{overflow:hidden}.app-shell{grid-template-rows:58px minmax(0,1fr);min-height:0}.topbar{gap:8px;padding:0 10px}.brand-mark{border-radius:8px;width:34px;height:34px}.brand-copy{min-width:0}.brand-copy strong{font-size:14px}.brand-copy span,.project-name,.autosave,.header-icon{display:none}.primary-button{justify-content:center;width:37px;padding:0}.primary-button span{display:none}.mobile-menu,.mobile-info{background:0 0;border-radius:8px;place-items:center;width:36px;height:36px;padding:0;display:grid}.mobile-info{display:grid}.builder-grid{min-height:0;display:block}.canvas-stage{width:100%;height:100%}.statusbar{display:none}.library-panel,.info-panel{z-index:42;width:min(330px,88vw);padding-top:max(4px, env(safe-area-inset-top));transition:transform .25s;position:fixed;top:0;bottom:0;box-shadow:18px 0 50px #141f1938}.library-panel{left:0;transform:translate(-105%)}.info-panel{right:0;transform:translate(105%)}.library-panel.mobile-open,.info-panel.mobile-open{transform:translate(0)}.mobile-close{place-items:center;width:34px;height:34px;display:grid}.brick-list{grid-template-columns:1fr 1fr}.brick-choice{flex-direction:column;min-height:68px}.mobile-scrim{z-index:40;background:#0d151173;border:0;display:block;position:fixed;inset:0}.stage-tools{top:10px}.stage-tools button{min-width:37px;height:37px;padding:0 10px}.stage-tools button span{display:none}.layer-control{top:62px;left:10px}.layer-control>div{padding:0 5px}.layer-control span{display:none}.view-tools{top:62px;right:10px}.colour-tray{left:10px;right:10px;bottom:max(12px, env(safe-area-inset-bottom));justify-content:center;gap:7px;padding:8px;transform:none}.swatches{flex:1;justify-content:space-between;gap:3px}.swatches button{width:clamp(25px,8vw,34px);height:clamp(25px,8vw,34px)}.colour-tray>i,.rotate-part{display:none}.mobile-brick-button{z-index:4;color:#fff;background:var(--ink);border:0;border-radius:9px;align-items:center;gap:8px;height:36px;padding:0 13px;font-size:10px;font-weight:800;display:flex;position:absolute;bottom:67px;left:50%;transform:translate(-50%);box-shadow:0 8px 22px #17211d3d}.canvas-hint{font-size:7px;bottom:112px}.canvas-hint i:nth-of-type(2),.canvas-hint i:nth-of-type(2)~*{display:none}.toast{top:112px}}@media (max-width:430px){.header-actions{gap:5px}.brand-copy strong{font-size:12px}.swatches button{border-radius:7px}.canvas-hint{display:none}.help-modal{padding:23px 19px}.clear-modal{padding:24px 19px 19px}.shortcut-row{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}