:root{--surface:#fffdfa;--surface-soft:#f5efea;--text:#342a30;--muted:#74646d;--line:#ded2d6;--accent:#9b4968;--selected:#fae9ef;--viewer:#ede8e3;color-scheme:light}
:root[data-theme=brand]{--bg:#f7f0ff;--surface:#fffcff;--surface-soft:#eee4fa;--text:#362742;--muted:#6f557e;--line:#ddcbea;--accent:#775299;--selected:#eee0fb;--viewer:#f1eaf8}
:root[data-theme=dark]{--bg:#181a22;--surface:#242631;--surface-soft:#30323f;--text:#f6eff4;--muted:#c4bac9;--line:#51505e;--accent:#efb0c8;--selected:#483345;--viewer:#353640;color-scheme:dark}
body{background:var(--bg,#f7f3ee);color:var(--text)}
.editor,.result,.site-header,.access-card,.confirmation-card,.descender-dialog{background:var(--surface);color:var(--text);border-color:var(--line)}
input,select,textarea,.font-choice,.decoration-card{background:var(--surface);color:var(--text);border-color:var(--line)}
label,.section-heading h2,.result-head h2,.intro h1,.identity b,.quiet-button{color:var(--text)}
.intro p,.section-heading p,.phrase-hint,.measure-tip,.font-choice small,.status,.viewer-toolbar,.price p,.submit p,.result-data span,.price span,.quick-composition p,.size-comparison p,.size-comparison a,footer{color:var(--muted)}
.font-choice[aria-pressed=true],.decoration-card[aria-pressed=true],.plate-size[aria-pressed=true]{background:var(--selected);border-color:var(--accent)}
.submit,.quick-composition,.plate-size,.progress-box,footer{background:var(--surface-soft);border-color:var(--line);color:var(--text)}
.plate-size span,.progress-heading,.progress-box small,.progress-box p{color:var(--muted)}
.viewer{background:var(--viewer)}.viewer-empty h3,.viewer-empty p{color:var(--muted)}
.button.primary{background:var(--accent);color:var(--surface)}.button.reset-design{color:var(--text);border-color:var(--line)}
.decorative-slot{border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:22px;background:var(--surface)}
.decorative-slot h3{display:flex;justify-content:space-between;align-items:center;margin:0 0 17px;font-size:1.16rem}
.decorative-slot h3 span{font:500 .74rem Arial,sans-serif;color:var(--muted);background:var(--surface-soft);border-radius:20px;padding:6px 11px}
.slot-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.decorative-slot select{width:100%;min-width:0}
.decorative-slot details{margin:10px 0 17px}.decorative-slot summary{cursor:pointer;color:var(--accent);font-size:.82rem;padding:6px 0}
.decorative-slot .decoration-cards{max-height:360px;overflow:auto}.decorative-slot .decoration-card img{height:66px}
.decorative-slot .phrase-hint{margin:12px 0}.theme-label{display:flex;align-items:center;gap:8px;font:500 .74rem Arial,sans-serif;margin:0}.theme-label select{width:120px;height:34px;padding:4px 8px;font-size:.75rem}
.size-comparison svg text:not([fill]){fill:var(--text)}
.editor label,.submit label,.access label{color:var(--text)}
.editor input:not([type=checkbox]):not([type=range]),.editor select,.editor textarea,.submit input,.access input{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:10px 12px;font:400 .84rem Arial,sans-serif;width:100%;min-height:42px}
.editor input::placeholder,.editor textarea::placeholder,.submit input::placeholder{color:var(--muted)}
.measure-tip{background:var(--surface-soft);color:var(--muted)}
.section-heading>span{background:var(--surface-soft);color:var(--accent)}
.decorative-slot>label{display:block;margin:14px 0 7px}.slot-fields label{display:block;margin:6px 0 7px}
@media(max-width:600px){.decorative-slot{padding:14px}.slot-fields{gap:8px}.theme-label{gap:4px;font-size:0}.theme-label select{width:104px}.header-right{gap:8px}.identity small{font-size:.5rem}.identity span b{font-size:.85rem}.decorative-slot .decoration-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep the example beside the decision, rather than after both long selectors. */
#decorativeEditor{min-width:0;position:relative}
html,body{overflow-x:clip;overflow-y:visible}
.preview-dock{position:sticky;top:8px;z-index:10;background:var(--surface);border-radius:10px;box-shadow:0 5px 18px #23192318}
.preview-dock .quick-composition{margin:0;padding:10px 12px;border-radius:10px}
.preview-dock-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.preview-dock-title h3{margin:0;font-size:1rem}.preview-dock-title span{color:var(--muted);font-size:.64rem;white-space:nowrap}
.preview-dock .quick-stage{width:min(100%,340px);margin:4px auto;height:100px}
.preview-dock .quick-stage img{height:auto;max-height:100%;object-fit:contain}
.preview-dock .quick-composition p{font-size:.67rem;line-height:1.35;margin:4px 0 7px}
.preview-dock-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preview-dock-actions .button{font-size:.8rem;padding:10px;min-height:44px;justify-content:center;margin:0}
.dock-state{display:block;font-size:.68rem;color:var(--muted);line-height:1.35;margin-top:6px}
#decorativeEditor select,#decorativeEditor textarea,#decorativeEditor button,#decorativeEditor input,#decorativeEditor summary{scroll-margin-top:calc(var(--preview-height,220px) + 24px)}
.preview-dialog{width:min(960px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);overflow:auto}
.preview-dialog::backdrop{background:#151219b3}
.preview-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.preview-dialog-head h2{font-size:1.4rem;margin:0}.preview-dialog-head .button{width:auto;margin:0;min-height:44px;padding:10px 13px;font-size:.8rem}
.preview-dialog .viewer{height:clamp(220px,52dvh,600px);touch-action:none}
.preview-dialog .viewer-toolbar{flex-wrap:wrap;padding-bottom:10px}.preview-dialog .viewer-toolbar button{min-height:44px;padding:8px}
#expandedMeasurements,#expandedState{font-size:.8rem;line-height:1.4;margin:10px 0 0;color:var(--muted)}
@media(min-width:1201px) and (pointer:fine){.result{max-height:calc(100dvh - 26px);overflow:auto;scrollbar-gutter:stable}.result .viewer{height:clamp(240px,40dvh,370px)}}
@media(max-width:600px){.preview-dock{top:4px}.preview-dock .quick-stage{height:82px;width:min(100%,285px)}.preview-dock .quick-composition{padding:8px 10px}.preview-dock-title h3{font-size:.94rem}.preview-dialog{padding:12px}.preview-dialog-head h2{font-size:1.2rem}.preview-dialog .viewer{height:44dvh;min-height:190px}}
@media(max-height:600px){.preview-dock .quick-stage{height:50px}.preview-dock .quick-composition p{display:none}.preview-dock .dock-state{margin-top:3px}.preview-dialog .viewer{height:45dvh;min-height:140px}}
@media(max-width:380px){.preview-dock .quick-stage{height:60px}.preview-dock .quick-composition p{display:none}.preview-dock-title{gap:4px}.preview-dock-title h3{font-size:.82rem}.preview-dock-title span{font-size:.59rem}.preview-dock-actions .button{font-size:.73rem}.preview-dock .dock-state{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* One decision per step. The live sketch remains beside every decision. */
.wizard-tabs{display:flex;gap:5px;overflow:auto;margin:14px 0;scroll-margin-top:230px;padding:3px 0 8px}
.wizard-tabs button,.wizard-navigation button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;min-height:44px;padding:9px 12px;white-space:nowrap;font-size:.8rem}
.wizard-tabs button[aria-current=step]{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.wizard-page{min-width:0}.wizard-page>.decorative-slot{margin-top:0}
.wizard-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.wizard-navigation span{color:var(--muted);font-size:.8rem}
.figure-gallery h4{font-size:.85rem;margin:16px 0 8px}
.figure-gallery .decoration-cards{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,100px);grid-auto-columns:105px;grid-template-columns:none;gap:8px;max-height:none;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity}
.figure-gallery .decoration-card{scroll-snap-align:start;min-width:0;padding:5px;background:var(--surface-soft);color:var(--text);border:1px solid var(--line);border-radius:8px}
.figure-gallery .decoration-card[aria-pressed=true]{border:2px solid var(--accent);background:var(--paper)}
.figure-gallery .decoration-card img{height:58px;width:100%;object-fit:contain}
.figure-gallery .decoration-card span{display:block;font-size:.64rem;line-height:1.15}
.preview-dock .quick-stage{width:100%;height:120px}.quick-stage canvas{display:block;width:100%;height:100%;object-fit:contain}
.wizard-page .section-heading{margin-top:12px}.intro{padding-top:20px;padding-bottom:18px}.intro h1{font-size:2.4rem}
@media(max-width:1200px){body:not([data-wizard-step="4"]) .result{display:none}}
@media(max-width:600px){.editor{padding:14px}.intro p{display:none}.intro h1{font-size:1.8rem;margin-bottom:0}.intro{padding:14px 0}.preview-dock .quick-stage{height:100px}.wizard-tabs{scroll-margin-top:220px}.wizard-tabs button{font-size:.71rem;padding:8px}.wizard-page .font-choices{max-height:46dvh;overflow:auto}.preview-dock-title h3{font-size:.85rem}.preview-dock .quick-composition p{display:block;font-size:.62rem}.preview-dock-actions .button{min-height:40px;padding:8px}}
/* Explain decisions and keep return, progress and price inside the mobile dialog. */
.help-note{margin:10px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);font-size:.8rem;line-height:1.55;color:var(--text)}
.help-note summary{cursor:pointer;font-weight:650;min-height:28px}.help-note p{margin:9px 0;color:var(--text)}
.preview-dialog-head{position:sticky;top:-12px;background:var(--surface);z-index:5;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.preview-dialog-head button{min-height:44px}.preview-next{position:sticky;bottom:-12px;padding:10px 0;background:var(--surface);z-index:4;display:flex;gap:8px;border-top:1px solid var(--line)}
.preview-next button{flex:1;min-height:46px;font-size:.85rem;padding:9px}
.preview-dialog #expandedViewer{position:relative}
#progressBox{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(90vw,520px);max-height:80dvh;overflow:auto;z-index:50}
.preview-dialog #progressBox{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92%,520px);margin:0;box-shadow:0 16px 38px rgba(20,16,24,.28);box-sizing:border-box;border:2px solid var(--accent);background:color-mix(in srgb,var(--surface) 96%,transparent);color:var(--text);z-index:20;padding:16px 18px;border-radius:12px}
.preview-dialog #progressBox strong,.preview-dialog #progressBox p,.preview-dialog #progressBox small{color:var(--text)}
.preview-dialog #progressBox progress{height:14px}.preview-dialog #progressBox strong{font-size:.95rem}
.preview-dialog #resultDetails{margin-top:16px}.preview-dialog .price{scroll-margin-top:90px;border:2px solid var(--accent);border-radius:8px;padding:14px;background:var(--surface-soft)}
#resultDetails>.price{margin-top:16px}.size-comparison svg{max-height:none;display:block;color:var(--text)}
.more-sizes{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}.more-sizes h3{margin:0 0 6px;font-size:1rem}.size-estimate-note{margin:0 0 10px;color:var(--muted);font-size:.78rem;line-height:1.45}.size-estimate-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:8px}.size-estimate-card{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:10px}.size-estimate-card strong,.size-estimate-card span{display:block}.size-estimate-card strong{font-size:1rem}.size-estimate-card span{font-size:.75rem;color:var(--muted);margin:3px 0 8px}.size-estimate-card button{width:100%;min-height:40px;font-size:.75rem;padding:7px}.size-estimate-card[aria-current=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.size-comparison h4{font-size:.85rem;margin:14px 0 4px}
@media(max-width:600px){.preview-dialog{max-height:94dvh;max-width:100%;width:100%;border-radius:12px;padding:12px}.preview-dialog-head h2{font-size:1rem}.preview-dialog-head button{font-size:.77rem;padding:8px}.preview-dialog .viewer{height:35dvh;min-height:170px}.preview-dialog #progressBox{width:calc(100% - 20px);padding:15px 14px}.preview-dialog #progressBox strong{font-size:1rem}.preview-dialog #progressBox p{display:flex;flex-direction:column;gap:5px}.preview-next{flex-wrap:wrap}.preview-next button{font-size:.75rem;padding:9px}.preview-dialog #expandedMeasurements{font-size:.76rem}.preview-dialog #expandedState{color:var(--text);font-weight:650}.preview-dialog .price strong{font-size:2.2rem}}

.assembly-help-image{display:block;width:100%;max-width:100%;height:auto;margin:12px 0}