:root{--ink:#172c35;--muted:#64757b;--accent:#a87843;--line:#d7dfdd;--paper:#f5f6f2}*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,sans-serif;color:var(--ink);background:var(--paper)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button,.button{cursor:pointer;border:1px solid var(--line);border-radius:8px;background:white;padding:10px 14px;color:var(--ink);text-decoration:none}button:hover,.button:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}.primary{background:var(--ink);color:white}header{display:flex;justify-content:space-between;align-items:center;padding:18px 4vw;background:white;border-bottom:1px solid var(--line)}header a{color:var(--ink);text-decoration:none}header strong{letter-spacing:2px}header small{display:block;color:var(--muted)}main{max-width:1600px;margin:auto;padding:24px}h1{font-size:30px;margin:0}h2{font-size:21px;margin:0 0 16px}p{color:var(--muted)}.steps{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.steps button{flex:1;min-width:130px}.steps [aria-current=step]{background:var(--ink);color:white}.step{background:white;border:1px solid var(--line);border-radius:14px;padding:24px}.step[hidden]{display:none}.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}label{display:block;font-size:14px;margin-bottom:8px}input,select,textarea{display:block;width:100%;padding:10px;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink)}textarea{min-height:90px}.paired{display:flex;gap:8px}.actions,.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:16px 0}.templates{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.template{padding:10px;text-align:left}.template svg{display:block;width:100%;height:100px;background:#e8e6df;border-radius:6px}.template[aria-pressed=true]{outline:3px solid var(--accent)}.editor{display:grid;grid-template-columns:200px minmax(0,1fr) 240px;gap:16px}.library button{display:block;width:100%;margin:7px 0;text-align:left}.viewport{position:relative;background:#e4e7e3;border-radius:12px;overflow:hidden;height:530px;min-width:0;touch-action:none}.viewport canvas,.viewport svg{display:block;width:100%;height:100%;touch-action:none}.hint{font-size:14px}.properties{background:var(--paper);padding:14px;border-radius:10px}.properties .actions button{padding:7px}.item-list{max-height:180px;overflow:auto}.item-list button{display:block;font-size:14px;width:100%;margin:4px 0;text-align:left}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.price{padding:18px;background:var(--paper);border-radius:9px}.price strong{display:block;font-size:24px}.price small{color:var(--muted)}#message{position:sticky;bottom:10px;background:var(--ink);color:white;padding:12px;border-radius:9px;z-index:10}#message:empty{display:none}.renders{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.renders img{width:100%;border-radius:8px}.renders button[aria-pressed=true]{outline:3px solid var(--accent)}table{width:100%;border-collapse:collapse}td,th{text-align:left;border-bottom:1px solid var(--line);padding:10px}input[type=checkbox]{width:auto;display:inline}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media(max-width:1000px){.editor{grid-template-columns:150px minmax(0,1fr)}.properties{grid-column:1/-1}.properties .fields{grid-template-columns:repeat(3,1fr)}.templates{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){main{padding:12px}header{padding:12px}header small{font-size:12px}.step{padding:14px}.fields,.summary{grid-template-columns:1fr 1fr}.templates{grid-template-columns:1fr 1fr}.editor{display:flex;flex-direction:column}.library{display:flex;gap:6px;overflow:auto}.library button{min-width:130px;width:auto}.library h2{display:none}.viewport{height:380px}.properties .fields{grid-template-columns:1fr 1fr}.steps{gap:4px}.steps button{min-width:90px;font-size:14px;padding:8px}.renders{grid-template-columns:1fr 1fr}h1{font-size:24px}.hint{font-size:14px}}

.texture-swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:12px}.texture-swatches button{padding:6px;min-width:0;font-size:12px}.texture-swatches canvas{width:100%;height:32px;display:block;background:#c7ae82;border-radius:4px}.texture-swatches span{display:block;margin-top:4px}.texture-swatches [aria-pressed=true]{outline:2px solid var(--accent)}

.studio-context{position:fixed;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 8px 30px #0003;padding:6px;width:200px}.studio-context[hidden]{display:none}.studio-context button{display:block;width:100%;text-align:left;padding:10px;border:0;background:white}.studio-context button:hover,.studio-context button:focus{background:#efe5d4}

.wpc-finishes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.wpc-sample{font-size:11px;line-height:1.3;padding:6px;text-align:left}.wpc-sample span{display:block;height:36px;border-radius:3px;margin-bottom:5px}

/* Give the current render sufficient room for visual review on every screen. */
.renders{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}@media(max-width:650px){.renders{grid-template-columns:1fr}}

.template img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin-bottom:8px}.template small{display:block;color:#a87843;font-size:11px;margin-top:4px}.template p{font-size:12px;line-height:1.4;margin:5px 0 0}.template strong{display:block}

.starter-filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}.starter-filters button{font-size:13px;padding:8px 12px}.starter-filters [aria-pressed=true]{background:#172c35;color:white}.template[hidden]{display:none}