:root {
  --paper: #fff;
  --surface: #f5f5f3;
  --ink: #1d1d1f;
  --muted: #626462;
  --line: #e5e5e1;
  --green: #214f45;
  --focus: #437d6c;
  --radius: 12px;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

header {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 65px;
  padding: 10px max(24px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.05em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark { width: 32px; height: 32px; }
.product-link { color: var(--muted); font-size: 13px; text-decoration: none; }
.product-link:hover { text-decoration: underline; }
header .primary { margin-left: auto; }
.primary, .secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 13px;
  font-weight: 650;
}
.primary { background: var(--green); color: white; }
.primary:hover:not(:disabled) { background: #183d35; }
.secondary { background: transparent; color: var(--green); }
.secondary:hover { background: var(--surface); }

main { max-width: 1296px; margin: auto; padding: 38px 28px 56px; }
.intro { margin-bottom: 28px; }
.eyebrow {
  color: var(--green);
  font-weight: 720;
  font-size: 11px;
  letter-spacing: .10em;
}
.intro h1 {
  margin: 5px 0 8px;
  font-size: clamp(39px, 5vw, 66px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.062em;
}
.intro p, .step-panel p { margin: 0; color: var(--muted); }
.intro p { font-size: clamp(14px, 1.5vw, 17px); }
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 385px);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}

.preview {
  position: sticky;
  top: 16px;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #f4f3ef;
}
.viewbar, .viewfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 10px 17px;
}
.live { color: #53564f; font-size: 12px; font-weight: 650; }
.views, .tools { display: flex; align-items: center; gap: 3px; }
.views { padding: 3px; background: #e8e8e3; border-radius: 999px; }
.views button, .tools button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.views button[aria-pressed="true"] { background: white; box-shadow: 0 1px 3px #171a1520; }
.tools button { min-width: 33px; font-size: 17px; }
.tools button:hover, .views button:hover:not([aria-pressed="true"]) { background: #deded7; }
#viewport {
  width: 100%;
  height: clamp(320px, 48vw, 515px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 43%, #fdfcf8 5%, #f4f3ef 73%);
}
#viewport[data-room="true"] { cursor: grab; touch-action: none; }
#viewport.dragging { cursor: grabbing; }
#viewport:focus-visible { outline-offset: -3px; }
#scene { width: 100%; height: 100%; user-select: none; pointer-events: none; }
.hint { color: var(--muted); font-size: 12px; }
.specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  padding: 13px 9px 15px;
  border-top: 1px solid #e5e4df;
}
.specs span { padding: 0 6px; color: var(--muted); font-size: 11px; }
.specs span + span { border-left: 1px solid #e2e1db; }
.specs strong { display: block; color: var(--ink); font-size: 13px; font-weight: 650; }

.config { min-width: 0; }
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(min-content, 1fr));
  border-bottom: 1px solid var(--line);
}
.steps button {
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 56px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 4px 1px 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.steps button span { font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
.steps button:hover { color: var(--ink); }
.steps button[aria-current="step"] {
  border-bottom-color: var(--green);
  color: var(--green);
  font-weight: 720;
}
.step-panel { padding: 23px 0 20px; }
.step-panel h2 {
  margin: 0 0 7px;
  font-size: clamp(25px, 2.7vw, 34px);
  font-weight: 690;
  line-height: 1.1;
  letter-spacing: -.05em;
}
.step-panel > p { font-size: 14px; }
.step-panel h3 { font-size: 15px; font-weight: 680; }
.step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
#next-step { margin-left: auto; }
.option-title { margin: 20px 0 8px; }

.themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.themes button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 4px;
  background: white;
  font-size: 12px;
  white-space: nowrap;
}
.themes button:hover { background: var(--surface); }
.themes button[aria-pressed="true"] {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
  color: var(--green);
  font-weight: 650;
}
.themes i { width: 16px; height: 16px; border-radius: 50%; background: var(--swatch); }
.rug-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.rug-styles i { width: 22px; height: 14px; border-radius: 3px; }
.rug-styles button:nth-child(2) i { background: repeating-linear-gradient(90deg,#e6d9ba 0 3px,#37625d 3px 5px); }
.rug-styles button:nth-child(3) i { background: repeating-conic-gradient(#d6a48e 0% 25%,#784840 0% 50%) 0 0 / 7px 7px; }

.choices { display: grid; margin-top: 12px; }
.choices label {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  cursor: pointer;
}
.choices label:last-child { border-bottom: 0; }
.choices input {
  appearance: none;
  width: 35px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: #deded9;
  cursor: pointer;
}
.choices input::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px #0003;
}
.choices input:checked { background: var(--green); }
.choices input:checked::before { transform: translateX(15px); }

#slots { margin: 12px 0; }
.slot { border-bottom: 1px solid var(--line); }
.slot:last-child { border-bottom: 0; }
.slot-row { display: flex; align-items: center; gap: 8px; min-height: 54px; }
.thumb {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex: none;
  overflow: hidden;
  border-radius: 7px;
  background: #eeeee9;
  color: var(--muted);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.slot-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 680; }
.slot-title small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.upload, .minor {
  min-height: 33px;
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--surface);
  color: var(--green);
  font-size: 12px;
  font-weight: 620;
}
.upload:hover, .minor:hover:not(:disabled) { background: #e8ece7; }
.slot-controls { display: grid; gap: 7px; padding: 3px 0 11px; }
.slot-controls .crop-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.crop-heading span { color: var(--muted); font-weight: 400; }
.crop-preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: #29332f;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.crop-preview:active { cursor: grabbing; }
.crop-zoom, .crop-actions { display: flex; align-items: center; gap: 7px; }
.crop-zoom .minor { min-width: 34px; font-size: 17px; }
.crop-zoom input { flex: 1; min-width: 0; accent-color: var(--green); }
.crop-zoom output { min-width: 43px; text-align: right; }
.crop-actions .remove { margin-left: auto; }
.slot-controls .crop-tip, .crop-zoom output, .step-panel .privacy { font-size: 11px; color: var(--muted); }
.slot .slot-error:not(:empty) { padding-bottom: 7px; color: #8d3325; font-size: 12px; }

.book-editor { display: grid; gap: 11px; margin-top: 15px; }
.book-editor > label, #book-content > label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 650;
}
.book-editor select, .book-editor input[type="text"], .book-editor textarea {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px;
  background: #fafaf9;
  font-weight: 400;
}
.book-editor textarea { resize: vertical; min-height: 59px; }
.book-editor input[type="color"] {
  width: 44px;
  height: 31px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}
.book-editor input[type="range"] { width: 100%; accent-color: var(--green); margin: 0; }
.book-editor output { font-size: 11px; font-weight: 500; color: var(--muted); }
#book-reset { justify-self: start; }
#book-content > label + label { margin-top: 8px; }

.summary { margin: 14px 0; font-size: 13px; }
.summary div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 640; }
.export-card .primary { width: 100%; margin-top: 15px; }
#draft-status { margin: 0; }
#status:not(:empty), #draft-status:not(:empty) {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  background: #eff4ef;
  color: var(--green);
  font-size: 13px;
}
#draft-status:not(:empty) { margin-bottom: 16px; }

@media (max-width: 800px) {
  header { gap: 13px; min-height: 56px; padding: 8px 16px; }
  .brand { font-size: 20px; }
  .brand-mark { width: 29px; height: 29px; }
  .product-link { font-size: 12px; }
  main { padding: 24px 16px 32px; }
  .intro { margin-bottom: 17px; }
  .workspace { grid-template-columns: 1fr; gap: 15px; }
  .preview { position: static; border-radius: 17px; }
  .viewbar, .viewfoot { min-height: 40px; padding: 4px 10px; }
  #viewport { height: clamp(144px, 30svh, 226px); }
  #viewport[data-room="true"] { touch-action: pan-y; }
  .specs { display: none; }
  .config { scroll-margin-top: 12px; }
  .step-panel { padding-block: 18px; }
  .step-panel h2 { font-size: 29px; }
  .book-editor select, .book-editor input[type="text"], .book-editor textarea { font-size: 16px; }
}
@media (max-width: 375px) {
  .product-link { display: none; }
  .live, .hint { font-size: 11px; }
  header .primary { padding-inline: 12px; font-size: 12px; }
}
@media (max-width: 360px) {
  .viewbar:has([data-view="book"]:not([hidden])) .live { display: none; }
}

.room-styles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}
.room-styles button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 3px 8px;
  text-align: left;
  background: white;
}
.room-styles button:hover { background: var(--surface); }
.room-styles button[aria-pressed="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.room-styles .style-swatches {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px;
  width: 100%; height: clamp(34px,6vw,60px); margin: 0;
  overflow: hidden; border: 1px solid var(--line); border-radius: 7px;
}
.style-swatches i:nth-child(1) { background: var(--sample-wall); }
.style-swatches i:nth-child(2) { background: var(--sample-floor); }
.style-swatches i:nth-child(3) { background: var(--sample-rug); }
[data-room-style="classic"] {
  --sample-wall: linear-gradient(transparent 48%, #41695d 49% 53%, #719084 54%),
    repeating-linear-gradient(90deg,#ece1c6 0 7px,#ddcfaf 7px 8px);
  --sample-floor: repeating-linear-gradient(164deg,#d8af83 0 6px,#b88f65 7px,#dbb58c 8px 12px);
  --sample-rug: repeating-linear-gradient(135deg,#b86950 0 6px,#d79a73 7px 8px,#b86950 9px 13px);
}
[data-room-style="loft"] {
  --sample-wall: linear-gradient(125deg,#c6c5bd,#e5e4df 64%,#d7d6cd);
  --sample-floor: repeating-linear-gradient(164deg,#c4bfb4 0 9px,#aca69a 10px,#c4bfb4 11px 15px);
  --sample-rug: repeating-linear-gradient(90deg,#5a605f 0 3px,#636a68 4px 5px);
}
[data-room-style="studio"] {
  --sample-wall: repeating-linear-gradient(90deg,#ecdac2 0 5px,#ba9c7d 6px,#d6b999 7px 8px);
  --sample-floor: radial-gradient(ellipse at 3px 4px,#a89380 1px,transparent 1.6px) 0 0/10px 13px,
    radial-gradient(ellipse at 2px 3px,#c8a48c 1px,transparent 1.7px) 5px 6px/12px 11px,#e7dccd;
  --sample-rug: repeating-linear-gradient(90deg,#e6cbb8 0 3px,#dcbda9 4px 5px);
}
.room-styles strong { margin: 5px 5px 1px; font-size: 13px; }
.room-styles span { margin-inline: 5px; font-size: 10px; color: var(--muted); }
.choices label { flex-direction: row; min-height: 61px; padding-block: 5px; }
.choices input { flex: none; }
.furniture-name { flex: 1; }
.furniture-thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 54px;
  height: 46px;
  border-radius: 8px;
  background: var(--surface);
}
.color-control { margin-top: 13px; }
.color-control label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 650; }
.color-fields { display: flex; align-items: center; gap: 7px; }
.color-fields input[type="color"] { width: 39px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.color-fields input[type="text"] { width: 105px; min-height: 34px; border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; font-size: 13px; text-transform: uppercase; }
.color-fields input[aria-invalid="true"] { border-color: #a24737; }
.step-panel .color-error { color: #8d3325; font-size: 12px; }
.color-error:not(:empty) { margin-top: 4px; }

.layout-tools { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 12px 10px; }
.layout-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.layout-controls select { max-width: 100%; padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px; background: white; font-size: 12px; }
#layout-toggle[aria-pressed="true"] { background: var(--green); color: white; }
#viewport[data-layout="true"] { touch-action: none; }
#viewport[data-layout="true"] [data-piece] { pointer-events: visiblePainted; cursor: grab; }
#viewport[data-layout="true"].dragging [data-piece] { cursor: grabbing; }
.room-plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.room-plans button {
  display: grid; justify-items: center; align-content: start; gap: 4px;
  padding: 5px 3px 9px; min-width: 0; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: white;
}
.room-plans button:hover { background: var(--surface); }
.room-plans button[aria-pressed="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); color: var(--green); }
.room-plans svg { display: block; width: 100%; height: 78px; }
.room-plans strong { font-size: 12px; line-height: 1.2; }
.room-plans small { font-size: 10px; color: var(--muted); }

.step-panel .preview-key { margin: 0 0 8px; font-size: 12px; }
.plan-key { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 11px; }
.plan-key li { display: flex; align-items: center; gap: 5px; }
.plan-key i { display: inline-block; width: 15px; height: 3px; }
.plan-key-books { background: repeating-linear-gradient(90deg,#674329 0 3px,transparent 3px 5px); }
.plan-key-window { background: #34768c; }

.step-panel .room-plan-note { margin-top: 6px; font-size: 12px; }

@media (max-height: 500px) {
  .crop-preview { width: auto; max-width: 100%; height: 45svh; margin-inline: auto; }
}