:root{color-scheme:light;--ink:#17201d;--muted:#6b746f;--line:#dfe5e1;--paper:#fff;--wash:#f3f6f4;--brand:#265c43;--brand-dark:#19442f;--accent:#d6a85c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 82% 10%,#e4eee8 0,transparent 34%),#f7f8f7;color:var(--ink)}button,input{font:inherit}.shell{width:min(1220px,calc(100% - 32px));margin:0 auto;padding:48px 0 72px}.hero{max-width:780px;margin-bottom:28px}.eyebrow{margin:0 0 7px;color:var(--brand);font-size:.76rem;font-weight:800;letter-spacing:.15em}.hero h1{font-family:Georgia,serif;font-size:clamp(2.5rem,7vw,5.4rem);font-weight:500;letter-spacing:-.045em;line-height:.95;margin:0 0 18px}.hero>p:last-child{color:var(--muted);font-size:1.04rem;line-height:1.65;margin:0}.designer{display:grid;grid-template-columns:minmax(340px,.82fr) minmax(460px,1.18fr);gap:22px;align-items:start}.form-card,.preview-card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 60px rgba(33,48,40,.08)}.form-card{padding:26px}.form-card h2{font-size:1.15rem;margin:0 0 24px}.form-card fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:20px 0}.form-card legend{float:left;width:100%;font-size:.78rem;font-weight:800;letter-spacing:.09em;margin:0 0 13px}.choice-grid{clear:both;display:grid;gap:8px}.choice-grid.models{grid-template-columns:1fr 1fr}.choice-grid.usage{grid-template-columns:1fr 1fr}.choice-grid input,.color-grid input{position:absolute;opacity:0;pointer-events:none}.choice-grid span,.color-grid span{display:block;border:1px solid var(--line);border-radius:11px;padding:12px 13px;cursor:pointer;transition:.15s}.choice-grid input:checked+span,.color-grid input:checked+span{border-color:var(--brand);box-shadow:0 0 0 2px rgba(38,92,67,.12);background:#f6faf7}.choice-grid .future span{color:#9da5a0;cursor:not-allowed}.choice-grid small{display:block;margin-top:3px;font-size:.66rem}.dimension-grid{clear:both;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.dimension-grid label{color:var(--muted);font-size:.72rem;font-weight:700}.dimension-grid label>span{display:flex;align-items:center;gap:5px;margin-top:7px;border:1px solid var(--line);border-radius:10px;padding:5px 8px;background:#fff;color:var(--muted)}.dimension-grid input{width:100%;min-width:0;border:0;outline:0;color:var(--ink);font-size:1rem;font-weight:750;padding:6px 2px}.color-grid{clear:both;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.color-grid span{font-size:.75rem;line-height:1.2}.color-grid i{display:block;width:100%;height:25px;border-radius:6px;background:var(--swatch);border:1px solid rgba(0,0,0,.12);margin-bottom:8px}.color-grid small{color:var(--muted)}.quantity{border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:800;letter-spacing:.08em}.quantity>span{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.quantity button,.quantity input{width:42px;height:38px;border:0;background:#fff;text-align:center}.quantity button{cursor:pointer;color:var(--brand);font-size:1.15rem}.quantity input{width:58px;font-weight:800;border-inline:1px solid var(--line)}.preview-card{overflow:hidden;padding:18px}.preview-head{display:flex;justify-content:space-between;align-items:center;padding:7px 6px 14px;font-size:.7rem;font-weight:850;letter-spacing:.12em}.preview-head small{letter-spacing:.05em;color:var(--muted)}.canvas-wrap{height:420px;border-radius:16px;background:linear-gradient(180deg,#eef1ef,#dfe5e1);overflow:hidden;position:relative}.canvas-wrap canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none}.canvas-wrap canvas.dragging{cursor:grabbing}.preview-reset{position:absolute;right:12px;top:12px;border:1px solid rgba(38,92,67,.24);border-radius:999px;background:rgba(255,255,255,.88);color:var(--brand);font-size:.72rem;font-weight:800;padding:8px 11px;cursor:pointer;box-shadow:0 4px 16px rgba(23,32,29,.08);backdrop-filter:blur(8px)}.preview-reset:hover{background:#fff}.dimension-line{text-align:center;font-weight:750;color:#56635d;margin:12px 0 16px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metrics>div{background:var(--wash);padding:16px;border-radius:13px}.metrics span,.metrics small{display:block;color:var(--muted);font-size:.67rem;font-weight:750;letter-spacing:.06em}.metrics strong{display:inline-block;margin:6px 5px 2px 0;font-family:Georgia,serif;font-size:1.85rem;font-weight:500}.quote{border:1px solid var(--line);border-radius:15px;margin-top:10px;padding:16px;transition:opacity .15s}.quote.loading{opacity:.55}.quote>div{display:flex;justify-content:space-between;gap:20px;align-items:baseline}.quote span{color:var(--muted);font-size:.82rem}.quote strong{font-family:Georgia,serif;font-size:1.5rem}.quote .total{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.quote .total strong{font-size:2rem;color:var(--brand)}.quote p{font-size:.7rem;color:var(--muted);margin:11px 0 0}.primary,.secondary{display:block;width:100%;border:0;border-radius:12px;padding:15px 18px;margin-top:10px;text-align:center;text-decoration:none;font-weight:800}.primary{background:var(--brand);color:#fff;cursor:pointer}.primary:hover:not(:disabled){background:var(--brand-dark)}.primary:disabled{background:#a8b2ad;cursor:not-allowed}.secondary{border:1px solid var(--brand);color:var(--brand)}.integration-note{text-align:center;color:var(--muted);font-size:.7rem;margin:9px 0 2px}@media(max-width:850px){.designer{grid-template-columns:1fr}.preview-card{order:-1}.canvas-wrap{height:330px}}@media(max-width:520px){.shell{width:min(100% - 20px,1220px);padding-top:28px}.form-card{padding:20px}.choice-grid.models{grid-template-columns:1fr 1fr}.dimension-grid{grid-template-columns:1fr}.color-grid{grid-template-columns:1fr 1fr 1fr}.canvas-wrap{height:270px}}