@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Syne:wght@500;600;700;800&display=swap');
:root{--ink:#29261f;--muted:#7c786f;--paper:#f7f5ef;--line:#ddd9cf;--accent:#6b7055}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:15px}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #716248;outline-offset:4px}button{border:1px solid var(--line);background:transparent;border-radius:7px;padding:10px 15px}button:hover{border-color:#88806e}button:disabled{opacity:.4;cursor:default}header{max-width:1440px;margin:auto;padding:32px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:32px;letter-spacing:-3px;text-decoration:none;color:var(--ink);line-height:.85}.logo span{display:block;font:8px 'DM Sans',sans-serif;letter-spacing:5px;text-align:center;margin-top:12px}.eyebrow,.draft{font-size:10px;letter-spacing:2.4px;font-weight:600}.draft{border:1px solid var(--line);padding:8px 11px;border-radius:20px;color:var(--muted)}main{max-width:1440px;margin:auto;padding:50px 5% 70px}.intro{position:relative;margin-bottom:35px}.intro h1{font:700 clamp(38px,4vw,60px)/1.02 'Syne',sans-serif;letter-spacing:-2px;margin:16px 0}.intro>p:last-child{position:absolute;right:0;bottom:0;max-width:330px;color:var(--muted);line-height:1.7}.designer{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:52px;align-items:start}.visual{position:sticky;top:20px;min-width:0}.preview-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}.preview-top{padding:23px 25px 0;display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:1.8px;color:#77766f}#stage{height:360px;position:relative;overflow:hidden;touch-action:pan-y}#stage canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:40% 10% auto;text-align:center;color:var(--muted);z-index:2;font-size:13px;pointer-events:none;background:#ffffffdd;border-radius:10px;padding:10px}#loading:empty{display:none}.view-tools{padding:14px 20px;display:flex;gap:8px;align-items:center;justify-content:space-between;border-top:1px solid #f0eee9}.segmented{display:flex;gap:3px;flex-wrap:wrap}.segmented button{font-size:11px;padding:8px;border:0}.segmented button[aria-pressed=true]{background:#eeece5}.text-button{border:0;padding:5px 0;border-radius:0;text-decoration:underline;text-underline-offset:4px;font-size:11px;white-space:nowrap}.wall{display:flex;align-items:center;flex-wrap:wrap;gap:15px;padding:24px 0 8px}.wall strong{font-size:13px}.wall p,.fine{font-size:11px;color:var(--muted);line-height:1.6}.wall p{margin:6px 0 0}.wall-input{display:flex;gap:8px;margin-left:auto;align-items:center}.wall-input input[type=color]{width:34px;height:34px;border:1px solid var(--line);padding:2px;border-radius:50%;background:#fff;cursor:pointer}.wall-input input[type=text],#wall-hex{width:86px;border:0;background:none;font-size:12px}.wall .swatches{flex-basis:100%;gap:7px}.wall .swatches button{width:22px;height:22px}.fine{margin:12px 0 24px}.summary{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;font-size:13px}.summary summary{cursor:pointer}.summary summary span{float:right;color:var(--muted);padding-right:5px}.summary table{width:100%;border-collapse:collapse;margin:16px 0}.summary th,.summary td{text-align:left;padding:7px;border-bottom:1px solid var(--line);font-size:12px}.step{padding-bottom:26px}.step>label,.step h2{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;margin:0 0 17px}.number{font-size:10px;border:1px solid var(--line);border-radius:50%;width:24px;height:24px;display:inline-grid;place-items:center;font-weight:400}#name{width:100%;padding:14px 16px;background:transparent;border:1px solid #a69f90;border-radius:8px;font-size:21px;letter-spacing:2px}.hint,.sample-note{font-size:11px;line-height:1.6;color:var(--muted);margin:9px 0 18px}#name-error{font-size:12px;color:#8a442e}#name-error:empty{display:none}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;font-size:12px;margin-bottom:10px}.sizes{display:flex;gap:10px}.sizes button{flex:1;font-size:13px}.sizes button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.surprise{padding:19px;background:#ebece3;border-radius:10px;margin-bottom:28px}.surprise strong{font-family:'Syne',sans-serif;font-weight:700;font-size:18px}.surprise p{font-size:11px;color:#77786a;margin:6px 0 14px}.surprise-row{display:flex;gap:8px}.surprise select{min-width:0;flex:1;background:#f7f7f1;border:1px solid #d7d9cb;padding:9px;border-radius:6px;font-size:12px}#surprise{font-size:12px;background:var(--accent);color:white;border-color:var(--accent)}#letters{display:flex;gap:9px;overflow-x:auto;padding:4px 3px 12px;max-width:100%}#letters button{min-width:45px;height:53px;padding:5px;flex-shrink:0;background:#eeebe3;border:1px solid transparent;font-family:'Syne',sans-serif;font-weight:700;font-size:23px}#letters button span{display:block;font:8px Arial,sans-serif;color:#756f64}#letters button[aria-pressed=true]{outline:2px solid #63583f;outline-offset:1px;background:#fff}.editing{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:9px 0}.editing strong{font-size:12px}.auto{font-size:10px;display:flex;gap:5px;align-items:center}.auto input{accent-color:#6b7055}.choice-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 14px}.choice-heading h3{font-size:12px;margin:0}.choice-heading h3 span{color:var(--muted);font-weight:400;margin-left:7px}.swatches{display:flex;gap:12px;flex-wrap:wrap}.swatches button{width:31px;height:31px;border-radius:50%;padding:0;border:1px solid #0002;background:var(--colour)}.swatches button[aria-pressed=true]{outline:2px solid #63583f;outline-offset:3px}.sample-note{font-size:10px;margin-bottom:23px}.textures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.textures button{padding:11px 4px;font-size:11px;min-width:0}.textures button[aria-pressed=true]{border:1.5px solid #5f5746;background:#eeebe3}.textures button span{display:block;font-size:8px;color:var(--muted);margin-top:5px}.sample{display:block;margin:0 auto 9px;width:36px;height:36px;border-radius:11px;background:#d8c5a6;box-shadow:inset -4px -4px 7px #9d896675,inset 3px 3px 6px #fff8}.sample.pebble{background:repeating-radial-gradient(ellipse at 5px 5px,#d4c1a1 0 1px,#c0ac8b 1.5px 2px,#e0cfb2 2.4px 3px);background-size:5px 6px}.sample.knit{background:repeating-linear-gradient(55deg,#baa482 0 2px,#e8d6b6 2px 4px,#cdb897 4px 6px);background-size:10px 8px}.sample.polka{background:radial-gradient(circle,#e8d5b6 0 4px,#baa585 5px,transparent 6px),#d8c5a6;background-size:15px 15px}#feedback{font-size:11px;color:#5d6448;min-height:18px;margin-bottom:0}.coming{border-top:1px solid var(--line);padding-top:19px}.coming strong{font-size:13px}.coming p{font-size:11px;line-height:1.6;color:var(--muted)}#pages{padding:10px;display:flex;align-items:center;justify-content:space-between;font-size:11px}#pages[hidden]{display:none}#pages button{font-size:11px;padding:7px}footer{max-width:1440px;margin:auto;border-top:1px solid var(--line);padding:25px 5%;font-size:10px;letter-spacing:2px;color:var(--muted)}footer span{float:right}@media(min-width:1400px){#stage{height:430px}}@media(max-width:900px){.designer{gap:26px}.intro>p:last-child{position:static;max-width:none}.view-tools{flex-wrap:wrap}.textures{gap:5px}}@media(max-width:700px){header{padding:23px 5%}.draft{font-size:8px;letter-spacing:1px}.eyebrow{font-size:9px;letter-spacing:1.5px}main{padding-top:25px}.intro h1{font-size:42px}.intro>p:last-child{font-size:13px}.designer{grid-template-columns:1fr;gap:26px}.visual{position:static}.preview-top{padding:17px 15px 0;font-size:8px}#stage{height:290px}.wall{gap:10px}.wall-input{margin-left:0}.controls{min-width:0}.textures button span{font-size:8px}.fine{margin-bottom:15px}.intro{margin-bottom:25px}}

.summary{margin-top:12px;margin-bottom:23px}.cart-button{width:100%;background:var(--ink);color:white;padding:15px;font-weight:600}.cart-button:disabled{opacity:.45}.surprise-row button{width:100%}.wall{justify-content:space-between}.wall-input{margin-left:0}

header{max-width:1180px;padding:24px 28px;margin:0 auto}.logo{font-size:0;line-height:normal}.logo img{width:150px;height:auto;display:block}main{max-width:1180px;padding:36px 28px 60px}.intro h1{font-family:Syne,Arial,sans-serif;font-weight:800;font-size:clamp(32px,4vw,54px);line-height:1.05;text-transform:uppercase;color:#211c18;letter-spacing:0;margin:0 0 19px}.intro>p:last-child{position:static;max-width:620px;color:#514637;font-size:15px;line-height:1.65}.surprise strong{font-family:"DM Sans",Arial,sans-serif;font-size:15px}.cart-button{border-radius:0}footer{max-width:1180px;padding:35px 28px}@media(max-width:600px){header{padding:24px 18px}.logo img{width:115px}main{padding:26px 18px 32px}.intro h1{font-size:38px}}

.surprise{background:transparent;border:1px solid #ddd4d5;padding:16px}.surprise p{margin:12px 0 0;line-height:1.6;color:#776a6c}.surprise #surprise{background:#b63864;border-color:#b63864;color:#fff;padding:14px;font-size:14px;font-weight:600}.surprise #surprise:hover{background:#962c51;border-color:#962c51}.intro>p:last-child{font-size:18px}

.preview-top{justify-content:flex-end}

.controls>.summary+fieldset{margin:0 0 26px}.controls>.summary+fieldset .hint{margin-top:0}
.logo img{width:190px}@media(max-width:600px){.logo img{width:150px}}

/* Finish-aware stock swatches */
#colours button[data-finish="silk"],#colours button[data-finish="metallic"]{background:linear-gradient(125deg,transparent 15%,#ffffff80 45%,transparent 70%),var(--colour)}
#colours button[data-finish="sparkle"]{background:radial-gradient(circle,#ffffffb0 0 1px,transparent 1.5px) 0 0/9px 11px,var(--colour)}
#colours button[data-finish="marble"]{background:radial-gradient(ellipse,#20202099 0 1px,transparent 1.5px) 0 0/11px 8px,var(--colour)}

#colours button[data-finish="sparkle"]{background:radial-gradient(circle at 30% 35%,#ffffff65 0 .35px,transparent .7px) 0 0/5px 7px,linear-gradient(125deg,#ffffff20,transparent 60%),var(--colour)}
#colours button[data-finish="marble"]{background:radial-gradient(ellipse,#33333335 0 .3px,transparent .7px) 1px 2px/7px 9px,var(--colour)}
#colours button[data-sample="bambu-marble"]{background-image:url('assets/bambu-marble-reference.png');background-size:900% 900%;background-position:46% 76%}

.embedded header,.embedded footer,.embedded .intro{display:none}.embedded main{padding:10px 0 25px}.embedded .designer{grid-template-columns:1fr}.embedded .visual{position:static}.embedded #stage{height:300px}#design-total{font-size:24px}.coming{margin-top:20px}
