*{box-sizing:border-box}body{margin:0;color:#20242b;background:#e8edf1;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{align-items:center;border:1px solid #c8d0d8;background:#fbfcfe;color:#20242b;cursor:pointer;display:inline-flex;font:inherit;gap:8px;min-height:36px;justify-content:center;padding:8px 10px}input,select{border:1px solid #c8d0d8;background:#fbfcfe;color:#20242b;font:inherit;min-height:34px;padding:6px 8px;width:100%}input[type=range]{min-height:0;padding:0}input[type=color]{min-height:34px;padding:2px}button:hover:not(:disabled),button.active{background:#24313b;border-color:#24313b;color:#fbfcfe}button:disabled{cursor:not-allowed;opacity:.48}.app{display:grid;grid-template-columns:292px 1fr;height:100vh;min-width:980px;overflow:hidden}.sidebar{background:#fff;border-right:1px solid #c8d0d8;display:flex;flex-direction:column;gap:18px;max-height:100vh;min-height:0;overflow-y:scroll;padding:18px;scrollbar-gutter:stable;scrollbar-color:#8a97a5 #eef3f5;scrollbar-width:thin}.sidebar::-webkit-scrollbar,.canvas-shell::-webkit-scrollbar{height:12px;width:12px}.sidebar::-webkit-scrollbar-track,.canvas-shell::-webkit-scrollbar-track{background:#eef3f5}.sidebar::-webkit-scrollbar-thumb,.canvas-shell::-webkit-scrollbar-thumb{background:#8a97a5;border:3px solid #eef3f5}.sidebar::-webkit-scrollbar-thumb:hover,.canvas-shell::-webkit-scrollbar-thumb:hover{background:#667381}.brand{align-items:flex-start;display:grid;gap:5px}.brand-title{align-items:center;display:flex;gap:10px}.brand-mark{height:46px;object-fit:contain;-webkit-user-select:none;user-select:none;width:46px}h1,h2,p{margin:0}h1{font-size:22px;line-height:1.1}.alpha-badge{align-self:start;background:#fff3d4;border:1px solid #d6a52f;color:#6f4b00;display:inline-flex;font-size:11px;font-weight:700;line-height:1;padding:4px 6px;text-transform:uppercase}.alpha-note{color:#6f4b00;font-size:12px;line-height:1.4}h2{font-size:13px;letter-spacing:0;text-transform:uppercase}.brand p,.panel p,.status,.topbar{color:#5f6873;font-size:13px}.tool-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.tool-grid button{flex-direction:column;gap:5px;height:68px}.tool-grid span{font-size:12px}.panel{display:grid;gap:8px}.panel summary{align-items:center;cursor:pointer;display:flex;justify-content:space-between;list-style:none}.panel summary::-webkit-details-marker{display:none}.panel summary:after{color:#5f6873;content:"+";font-size:16px;line-height:1}.panel[open] summary:after{content:"-"}.panel-body{display:grid;gap:8px}.panel label{color:#44515f;display:grid;font-size:12px;gap:4px}.panel button{justify-content:flex-start}.input-row{display:grid;gap:8px;grid-template-columns:1fr 1fr}.inspector-grid{display:grid;gap:6px;margin:0}.inspector-grid div{align-items:baseline;border-bottom:1px solid #eef3f5;display:grid;gap:8px;grid-template-columns:72px 1fr;padding-bottom:6px}.inspector-grid dt{color:#5f6873;font-size:12px}.inspector-grid dd{color:#20242b;font-size:12px;margin:0;min-width:0;overflow-wrap:anywhere}.tile-count{background:#eef3f5;border:1px solid #d7dde3;color:#20242b;font-size:13px;padding:8px}.panel.muted{border-top:1px solid #d7dde3;padding-top:14px}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{background-blend-mode:multiply;background-size:12px 12px;border:2px solid #fbfcfe;box-shadow:0 0 0 1px #9aa6b2;height:30px;min-height:30px;padding:0;width:30px}.swatch.active{border-color:#20242b}.workspace{display:grid;grid-template-rows:46px 1fr 34px;min-height:0;min-width:0}.topbar,.status{align-items:center;background:#fbfcfe;border-bottom:1px solid #d7dde3;display:flex;gap:18px;padding:0 16px}.topbar div,.status span{align-items:center;display:inline-flex;gap:6px}.topbar strong{color:#20242b}.topbar-button{min-height:30px;padding:5px 9px}.design-canvas{cursor:crosshair;display:block;touch-action:none}.canvas-shell{min-height:0;overflow:scroll;scrollbar-gutter:stable both-edges;scrollbar-color:#8a97a5 #d7dde3;scrollbar-width:thin}.zoom-control{align-items:center;display:flex;gap:10px;margin-left:auto;min-width:240px}.zoom-control input{width:150px}.modal-backdrop{align-items:center;background:#20242b61;display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:10}.modal{background:#fbfcfe;border:1px solid #9aa6b2;box-shadow:0 18px 52px #20242b38;display:grid;gap:14px;max-height:min(720px,90vh);max-width:860px;overflow:auto;padding:18px;width:min(860px,96vw)}.modal-header,.modal-footer,.color-row{align-items:center;display:flex;gap:10px}.modal-header{justify-content:space-between}.color-list{display:grid;gap:8px}.color-row{display:grid;grid-template-columns:48px 1.2fr .8fr .9fr 36px}.color-row-header{color:#5f6873;font-size:.78rem;font-weight:700;padding:0 0 2px;text-transform:uppercase}.icon-button{min-height:34px;padding:6px}.status{border-bottom:none;border-top:1px solid #d7dde3;min-width:0;overflow:hidden}.drawing-hint{color:#44515f;flex:1 1 auto;justify-content:flex-end;min-width:280px;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap}@media(max-width:900px){.app{grid-template-columns:220px 1fr;min-width:760px}.tool-grid{grid-template-columns:1fr}.drawing-hint{min-width:180px}}