:root {
  color-scheme: light;
  --paper: #f7f1eb;
  --paper-deep: #eee3da;
  --card: rgba(255, 252, 248, 0.92);
  --ink: #574844;
  --muted: #8d7c77;
  --line: #dfd0c8;
  --rose: #d9a2ae;
  --rose-dark: #a86576;
  --sage: #aebda7;
  --danger: #ad4f5f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 8% 4%, #f4dfe3 0, transparent 25rem), radial-gradient(circle at 94% 18%, #e2eadf 0, transparent 28rem), var(--paper); }
body::before { position: fixed; inset: 0; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M45 4c2 15 12 25 27 27-15 2-25 12-27 27-2-15-12-25-27-27C33 29 43 19 45 4Z' fill='none' stroke='%23c9ada6' stroke-width='.45'/%3E%3C/svg%3E"); content: ""; pointer-events: none; }
button, input, select { font: inherit; }
.page-shell { position: relative; width: min(1220px, calc(100% - 36px)); margin: 0 auto; padding: 34px 0 22px; }
.brand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-bottom: 28px; }
.brand-flower { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #cbaeb4; border-radius: 50%; color: var(--rose-dark); background: rgba(255,255,255,.45); font-size: 1.55rem; }
.eyebrow, .step { margin: 0 0 7px; color: var(--rose-dark); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-family: Georgia, serif; font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 500; } h2 { margin-bottom: 12px; font-family: Georgia, serif; font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 500; line-height: 1.08; }
.build-badge { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.5); font-size: .72rem; }
.configurator { display: grid; grid-template-columns: minmax(390px,.93fr) minmax(430px,1.07fr); overflow: hidden; border: 1px solid rgba(190,164,155,.62); border-radius: 30px; background: var(--card); box-shadow: 0 24px 70px rgba(100,75,68,.13); backdrop-filter: blur(12px); }
.controls, .preview-panel { padding: clamp(28px,4.2vw,52px); }
.controls { border-right: 1px solid var(--line); }
.intro { max-width: 35rem; margin-bottom: 27px; color: var(--muted); line-height: 1.6; }
.field-block { min-width: 0; } label, legend { color: #6d5a55; font-size: .78rem; font-weight: 750; }
.input-wrap { position: relative; margin-top: 8px; }
input[type="text"], select { width: 100%; padding: 14px 74px 14px 15px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: rgba(255,255,255,.72); transition: border-color .15s, box-shadow .15s; }
select { margin-top: 8px; padding-right: 14px; }
input:focus, select:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(217,162,174,.18); }
input.invalid { border-color: var(--danger); }
#character-count { position: absolute; top: 50%; right: 14px; color: var(--muted); font-size: .73rem; transform: translateY(-50%); }
.help, .error, .status { min-height: 1.2em; margin: 7px 0 0; font-size: .72rem; }.help{color:var(--muted)}.error{color:var(--danger)}
.parameter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 19px; }
.sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(247,240,234,.62); }
.slider-row > span { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }.slider-row output{color:var(--rose-dark);font-size:.72rem;font-weight:800}
input[type="range"] { width:100%; height:5px; margin:0; border-radius:999px; accent-color:var(--rose-dark); background:#dfd1ca; }
.fit-note{margin:-10px 0 20px;padding:10px 13px;border-left:3px solid var(--rose);border-radius:0 9px 9px 0;color:var(--muted);background:rgba(255,247,245,.72);font-size:.72rem;line-height:1.45}
.color-picker { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; padding:0; border:0; }.color-picker legend{width:100%;margin-bottom:3px}.color-picker label{display:flex;align-items:center;gap:5px;cursor:pointer}.color-picker label.out-of-stock{opacity:.42;cursor:not-allowed;text-decoration:line-through}.color-picker input{position:absolute;opacity:0}.swatch{display:block;width:25px;height:25px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--line)}.color-picker input:checked+.swatch{box-shadow:0 0 0 2px var(--rose-dark)}.color-picker em{font-size:.66rem;font-style:normal;font-weight:500}.blush{background:#d99aa8}.sage{background:#a9bba2}.lavender{background:#b8a8c9}.powder{background:#9fb8c9}.cream{background:#d7c6a5}.black{background:#302d2e}.white{background:#f2efe9}.text-color-picker{padding-top:14px;border-top:1px solid var(--line)}.material-status{margin:-8px 0 18px;color:var(--muted);font-size:.82rem}.material-status.failure{color:var(--danger)}
.dimension-card { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; padding:12px 14px; border:1px solid #cad6c5; border-radius:12px; color:#61705d; background:#f0f5ed; font-size:.73rem; }.dimension-card span{display:flex;align-items:center;gap:7px}.dimension-card i{width:8px;height:8px;border-radius:50%;background:#7e9b75}.dimension-card strong{font-size:.76rem}.dimension-card.invalid{border-color:#deb1b7;color:var(--danger);background:#fbeced}.dimension-card.invalid i{background:var(--danger)}
.actions { display:grid; grid-template-columns:.9fr 1.1fr; gap:10px; } button{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border:1px solid var(--rose-dark);border-radius:12px;cursor:pointer;color:#fff;background:var(--rose-dark);font-weight:800;transition:transform .15s,filter .15s}button:hover{filter:brightness(1.04);transform:translateY(-1px)}button:disabled{cursor:wait;opacity:.6;transform:none}button[hidden]{display:none}.secondary-button{color:var(--rose-dark);background:#fff8f6;border-color:#d7b6bd}.cart-button{background:#74866d;border-color:#74866d}
.status{text-align:center;color:var(--muted)}.status.success{color:#6d865f}.status.failure{color:var(--danger)}
.preview-panel { display:flex; flex-direction:column; min-width:0; background:linear-gradient(155deg,rgba(250,239,240,.72),rgba(237,242,233,.72)); }.preview-heading{display:flex;align-items:flex-start;justify-content:space-between}.live-badge{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.45);font-size:.7rem}.live-badge i{width:7px;height:7px;border-radius:50%;background:var(--sage)}
.preview-stage{position:relative;display:grid;flex:1;place-items:center;min-height:480px;overflow:hidden;border:1px solid rgba(189,164,158,.38);border-radius:24px;background:radial-gradient(circle at 42% 34%,rgba(255,255,255,.95),rgba(250,244,241,.55) 48%,rgba(224,214,209,.35) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -20px 50px rgba(126,103,96,.06)}.preview-stage::before{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(170,145,140,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(170,145,140,.08) 1px,transparent 1px);background-size:36px 36px;content:""}
.model-shadow{position:absolute;z-index:0;left:50%;top:66%;width:54%;height:8%;border-radius:50%;opacity:.46;background:rgba(91,65,59,.34);filter:blur(15px);transform:translate(-50%,-50%) perspective(200px) rotateX(62deg);transition:width .2s,opacity .2s}.model-shadow[hidden]{display:none}#preview-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;cursor:grab;touch-action:none}#preview-canvas:active{cursor:grabbing}.preview-placeholder{z-index:2;display:flex;align-items:center;flex-direction:column;width:min(270px,80%);color:var(--muted);line-height:1.5;text-align:center;pointer-events:none}.preview-placeholder[hidden]{display:none}.preview-placeholder>span{color:var(--rose);font-size:3rem}.preview-placeholder strong{margin:8px 0 4px;font-family:Georgia,serif;font-size:1.05rem;font-weight:500}.preview-placeholder small{font-size:.72rem}.drag-hint{position:absolute;z-index:2;bottom:14px;left:50%;padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:rgba(255,250,247,.85);font-size:.65rem;transform:translateX(-50%);pointer-events:none}.preview-note{margin:14px 0 0;color:var(--muted);font-size:.72rem;text-align:center}
footer{display:flex;justify-content:space-between;padding:18px 4px 0;color:#9b8984;font-size:.72rem}footer a{color:inherit;text-decoration:none}footer a:hover{color:var(--rose-dark)}
@media(max-width:900px){.configurator{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line)}.preview-stage{min-height:420px}.build-badge{display:none}}
@media(max-width:540px){.page-shell{width:min(100% - 20px,1220px);padding-top:20px}.brand{grid-template-columns:auto 1fr;align-items:start}.brand-flower{width:43px;height:43px}.configurator{border-radius:20px}.controls,.preview-panel{padding:25px 18px}.parameter-grid,.sliders,.actions{grid-template-columns:1fr}.sliders{gap:17px}.color-picker em{display:none}.preview-stage{min-height:340px}footer{gap:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}