*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{font-family:Georgia,serif;color:#623858;background:#fff8ed url('/assets/treehouse/room.png') center/cover no-repeat}.builder{height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;max-width:1600px;margin:auto;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));gap:4px}.back{align-self:flex-start;color:inherit;text-decoration:none;font-size:clamp(16px,2vw,25px);padding:7px 20px;border:1px solid #dfc698;border-radius:30px;background:#fff8e8e6;box-shadow:0 2px 5px #8b683b22}header{text-align:center;flex:none;background:radial-gradient(ellipse,#fff8ecd9,transparent 75%);padding:0 16px}.emblem{display:flex;justify-content:center;align-items:center;color:#c89b40;height:clamp(37px,7vh,72px);gap:8px}.emblem img{height:100%;width:100px;object-fit:contain;mix-blend-mode:multiply}h1{font-weight:500;font-size:clamp(29px,6vh,65px);line-height:1.05;margin:0}header p{font-size:clamp(14px,2.4vh,25px);margin:7px 0}.workspace{display:grid;grid-template-columns:22% minmax(0,1fr) 23%;gap:clamp(10px,1.4vw,22px);width:100%;min-height:0;flex:1;padding:12px 0 5px}.panel{align-self:center;min-height:0;padding:clamp(10px,1.3vw,20px);border:2px solid #d7bd8d;border-radius:28px;background:linear-gradient(130deg,#fff9eddc,#f8e8c9f2);box-shadow:0 0 0 3px #fff3d09c,0 5px 10px #785d3020}h2{font-size:clamp(19px,2.3vw,31px);font-weight:500;text-align:center;line-height:1.1;margin:0 0 13px;white-space:nowrap}.mode-options{display:flex;flex-direction:column;gap:12px}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}.mode-options button{display:flex;align-items:center;gap:12px;min-height:100px;border:1px solid #d7b48d;border-radius:23px;background:#fffaf0d9;padding:8px 12px;font-size:clamp(19px,2.3vw,29px);text-align:left}.mode-options button[aria-pressed=true]{outline:2px solid #ae83c8;outline-offset:1px;background:#efe0f3e8}.mode-icon{display:block;width:38%;height:72px;flex:none}.blocks{background:linear-gradient(130deg,#f2e5f6ed,#dfc9e7f2);border-color:#c9aad5}.block-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.palette-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;height:clamp(88px,13.5vh,145px);border:1px solid #c5a8cd;border-radius:21px;background:#fff8ebe8;padding:8px;touch-action:none}.palette-block svg{flex:1;min-height:0}.palette-block span{font-size:12px;white-space:nowrap}.palette-block[aria-pressed=true]{outline:3px solid #d9ac56;outline-offset:1px}.stage{position:relative;min-height:0;min-width:0;display:flex;justify-content:center;align-items:flex-end;container-type:size}.board{width:min(100cqw,100cqh);aspect-ratio:5/3;position:relative;flex:none;margin-bottom:2%;outline:none;border-radius:12px;touch-action:none;isolation:isolate}.board:focus-visible{outline:2px dashed #9f7cb5;outline-offset:4px}.guide,.placed-blocks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.guide{fill:#e9dbf124;stroke:#a77dbb;stroke-width:3;stroke-dasharray:9 8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}.guide[hidden]{display:none}.placed-blocks button{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;background:none;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}.placed-blocks button.selected{outline:2px dashed #aa7ebc;outline-offset:3px;border-radius:5px}.placed-blocks button.dragging{z-index:100;cursor:grabbing;filter:drop-shadow(0 6px 4px #8e693a55)}svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.ghost{position:fixed;pointer-events:none;z-index:1000;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 5px #8e693a55)}footer{flex:none;text-align:center;width:100%;padding:5px 12px;border-radius:22px;background:radial-gradient(ellipse,#fff7e9ee,#fff7e955 70%,transparent 90%)}.tools{display:flex;justify-content:center;gap:14px}.tools button{display:flex;align-items:center;justify-content:center;gap:12px;background:#fff8ebef;border:1px solid #d4b48f;border-radius:30px;padding:10px 26px;font-size:clamp(17px,2.2vh,25px);min-height:47px}#reset{background:linear-gradient(130deg,#c29cd5,#9d74b9);color:#fff9f1;border-color:#a786bb}button:disabled{opacity:.45;cursor:default}#status{font-size:clamp(13px,1.9vh,20px);margin:7px 0 3px}small{font-size:clamp(10px,1.4vh,14px);display:block}button:focus-visible,a:focus-visible{outline:3px solid #89569f;outline-offset:3px}
@media(orientation:portrait){body{background:#fff8ed url('/assets/treehouse/hero.png') center/cover no-repeat}.builder{background:#fff9efba;gap:4px}.back{padding:5px 15px}.emblem{height:42px}h1{font-size:clamp(31px,5vw,55px)}header p{font-size:clamp(15px,2.5vw,24px);margin:4px 0}.workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:4px 0}.panel{align-self:stretch;padding:8px 12px;border-radius:21px;box-shadow:none}.modes h2{font-size:21px;margin:0 0 6px}.mode-options{flex-direction:row;gap:8px}.mode-options button{flex:1;min-height:60px;font-size:19px;padding:5px 10px;gap:6px;border-radius:16px}.mode-icon{height:46px;width:38%}.stage{background:#f5dfb9 url('/assets/treehouse/room.png') center/cover no-repeat;border:2px solid #d5b886;border-radius:25px;overflow:hidden}.board{width:min(94cqw,80cqh);margin-bottom:10%}.blocks h2{font-size:21px;margin:0 0 6px}.block-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.palette-block{height:82px;padding:5px;border-radius:15px}.palette-block span{font-size:11px}.tools button{font-size:18px;padding:7px 25px;min-height:42px}.tools{gap:10px}footer{padding:3px 5px}#status{font-size:15px;margin:5px 0 3px}small{font-size:11px}}
@media(orientation:portrait) and (max-width:550px){.builder{padding:7px 10px;gap:2px}.back{font-size:14px;padding:4px 12px}.emblem{height:30px}h1{font-size:29px}header p{font-size:14px;margin:3px 0}.workspace{gap:7px;padding:3px 0}.panel{padding:6px 8px;border-radius:17px}.modes h2,.blocks h2{font-size:17px;margin-bottom:4px}.mode-options{gap:5px}.mode-options button{font-size:14px;min-height:43px;padding:3px 5px;gap:3px}.mode-icon{height:32px;width:32%}.palette-block{height:58px;padding:4px 2px;border-radius:11px}.palette-block span{font-size:8px}.block-options{gap:4px}.stage{border-radius:19px}.board{width:min(96cqw,82cqh);margin-bottom:10%}.tools{gap:6px}.tools button{font-size:14px;padding:7px 12px;gap:6px;min-height:40px}#status{font-size:12px}small{font-size:9px;max-width:360px;margin:auto}}
@media(max-height:500px) and (orientation:landscape){.builder{padding:6px 10px;gap:2px}.back{position:absolute;left:12px;top:8px;font-size:15px;padding:5px 14px}.emblem{display:none}h1{font-size:28px}header p{font-size:13px;margin:3px 0}.workspace{padding:4px 0;grid-template-columns:20% minmax(0,1fr) 22%;gap:8px}.panel{padding:7px;border-radius:18px}h2{font-size:17px;margin:0 0 7px}.mode-options{gap:5px}.mode-options button{min-height:52px;font-size:15px;padding:4px 7px;gap:5px}.mode-icon{height:40px}.palette-block{height:64px;padding:4px;border-radius:13px}.palette-block span{font-size:9px}.block-options{gap:5px}.tools button{min-height:35px;font-size:15px;padding:4px 22px}footer{padding:2px}.tools{gap:8px}#status{font-size:12px;margin:4px 0 0}small{display:none}.board{width:min(100cqw,120cqh)}}

.mode-label{display:flex;flex-direction:column;gap:4px}.mode-label .design-count{font-family:Georgia,serif;font-size:13px;opacity:.8}#design-name{font-size:18px;margin:5px 0 0}#status{margin-top:3px}@media(max-width:550px){.mode-label .design-count{font-size:10px}#design-name{font-size:14px}}