:root{font-family:Tahoma,system-ui,sans-serif;color:#30283c;background:#f6f2fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1240px;margin:auto;padding:34px 28px}header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}header small{font-size:12px;font-weight:bold;letter-spacing:3px;color:#9875bb}h1{font-size:29px;margin:12px 0}h2{font-size:21px;margin:0}.badge{font-size:12px;border-radius:30px;background:#e9e1f2;color:#82669a;padding:11px 18px}.workspace{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:start}.preview,.options{border:1px solid #e5d9f0;border-radius:27px;background:white;overflow:hidden}.preview{position:sticky;top:22px;background:#eee7f6}#viewer{height:510px;width:100%}#viewer canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#viewer canvas:active{cursor:grabbing}.dimensions{position:absolute;top:20px;left:20px;background:#fffc;border-radius:14px;padding:11px 14px;font-size:12px;color:#806a97;pointer-events:none}.tools{display:flex;gap:8px;position:absolute;bottom:58px;left:18px;right:18px}button{font:inherit;border:1px solid #ddceec;background:white;border-radius:13px;padding:12px 15px;cursor:pointer;color:#77528d}button:hover{background:#f8f3fd}button:focus-visible{outline:3px solid #aa86ce;outline-offset:3px}button[aria-pressed=true]{border-color:#aa83cd;box-shadow:0 0 0 2px #d1b9e9;background:#f2eaf9}.tools button{font-size:12px;background:#ffffffe6;padding:10px 13px}.preview-footer{background:white;color:#9a84ac;font-size:12px;padding:18px 22px}#loading{position:absolute;top:46%;left:20px;right:20px;text-align:center;pointer-events:none;color:#8f6eac;font-size:14px}.options{padding:29px}.section-label{display:flex;align-items:center;gap:13px;margin:0 0 20px}.section-label>span{background:#ebdff6;border-radius:12px;display:grid;place-items:center;width:36px;height:36px;color:#8e62b1;font-weight:bold}.surface-options{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:0 0 31px}.surface-options button{display:flex;flex-direction:column;align-items:center;gap:15px;padding:20px}.texture{width:62px;height:43px;display:block;border-radius:11px;background:#bc9dd8;border:1px solid #ac89ca;box-shadow:0 5px 0 #9471b1}.texture.basket{background-color:#c2a8d9;background-image:repeating-linear-gradient(0deg,transparent 0 7px,#9f7cbd 7px 10px),repeating-linear-gradient(90deg,transparent 0 7px,#e0c9f0 7px 10px)}.layout-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 31px}.layout-options button{padding:14px 8px}.layout-options small{display:block;font-size:11px;color:#9d87af;margin-top:8px}.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.colors button{font-size:11px;padding:11px 3px;display:flex;flex-direction:column;align-items:center;gap:8px}.swatch{display:block;width:26px;height:26px;border-radius:50%;border:1px solid #0002}.swatch.white{background:#fff}.swatch.black{background:#222}.swatch.brown{background:#c49367}.swatch.blue{background:#55acee}.swatch.pink{background:#ef9fc7}.swatch.purple{background:#7c45d6}.swatch.orange{background:#f4900c}.swatch.red{background:#dd2e44}.swatch.green{background:#55aa66}.swatch.gray{background:#aab8c2}.swatch.yellow{background:#ffd83d}.swatch.cream{background:#fff0d5}.selection{font-size:13px;color:#74538d;margin:22px 0 8px}.note,footer{font-size:11px;color:#a08bb1;line-height:1.8}footer{text-align:center;margin:22px 0 0}@media(max-width:760px){main{padding:23px 15px}h1{font-size:24px}header{align-items:start}.badge{font-size:11px;white-space:nowrap}.workspace{grid-template-columns:1fr;gap:20px}.preview{position:relative;top:auto}#viewer{height:380px}.options{padding:23px}.colors{grid-template-columns:repeat(4,1fr)}h2{font-size:20px}}

/* Controls stay in layout outside the WebGL canvas at every zoom level. */
.preview-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;background:#fff;border-bottom:1px solid #eadff3}.preview-bar .dimensions{position:static;inset:auto;padding:0;background:none;line-height:1.6;white-space:nowrap}.preview-bar .tools{position:static;inset:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.preview-bar .tools button{background:#faf7fd}.viewer-stage{position:relative;isolation:isolate;overflow:hidden}.preview-footer{border-top:1px solid #eadff3}
@media(max-width:760px){.preview-bar{padding:12px 14px}.preview-bar .tools{flex:1 1 auto}}