:root {
  --cream:#f3f2ed;
  --charcoal:#171717;
  --orange:#c76315;
  --olive:#6a802e;
  --border:rgba(23,23,23,.16);
  --surface:rgba(255,255,255,.42);
}

* { box-sizing:border-box; }
html { background:var(--cream); }
body {
  min-width:320px;
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:Arial,Helvetica,sans-serif;
}
button,input,select { font:inherit; }

.topbar {
  min-height:72px;
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.topbar strong,.back-link,.builder-title { font-size:14px; font-weight:400; }
.builder-title { margin:0; }
.back-link { color:inherit; text-decoration:none; }
.back-link:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }

.builder {
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:clamp(32px,6vw,80px);
  padding:40px 28px 56px;
}
.controls {
  align-self:start;
  padding:24px;
  border:1px solid var(--border);
  border-radius:9px;
  background:rgba(255,255,255,.2);
  display:flex;
  flex-direction:column;
  gap:23px;
}
.control-group,.dynamic-fields { display:grid; gap:9px; }
.dynamic-fields { gap:16px; }
.control-group label,.control-label {
  color:rgba(23,23,23,.72);
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}

input,select,button {
  appearance:none;
  border:1px solid rgba(23,23,23,.24);
  border-radius:10px;
  color:inherit;
}
input:not([type=checkbox]):not([type=range]),select {
  width:100%;
  padding:12px 14px;
  background:var(--surface);
  transition:border-color .16s,box-shadow .16s,background-color .16s;
}
input:not([type=checkbox]):not([type=range]):hover,select:hover {
  border-color:rgba(23,23,23,.32);
  background:#fff;
}
input:not([type=checkbox]):not([type=range]):focus,select:focus {
  outline:none;
  border-color:var(--charcoal);
  box-shadow:0 0 0 3px rgba(199,99,21,.2);
  background:#fff;
}
select {
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:right 15px center;
  background-repeat:no-repeat;
}

.segmented-control { display:grid; gap:6px; padding:4px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.24); }
.segmented-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.segmented-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.segmented-control button {
  padding:9px 7px;
  border-color:transparent;
  background:transparent;
  font-size:12px;
}
.segmented-control button[aria-pressed=true] {
  border-color:rgba(23,23,23,.2);
  background:var(--charcoal);
  color:var(--cream);
}

.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.color-swatch {
  min-height:58px;
  padding:8px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  border-color:transparent;
  font-size:11px;
  text-align:left;
}
.swatch-cream { background:var(--cream); border-color:rgba(23,23,23,.2); }
.swatch-charcoal { background:var(--charcoal); color:var(--cream); }
.swatch-orange { background:var(--orange); color:var(--cream); }
.swatch-olive { background:var(--olive); color:var(--cream); }
.color-swatch[aria-pressed=true] { outline:2px solid var(--charcoal); outline-offset:2px; }

.range-group label { display:flex; justify-content:space-between; gap:12px; }
.range-group output { color:rgba(23,23,23,.58); font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; }
input[type=range] { width:100%; height:20px; padding:0; border:0; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:rgba(23,23,23,.18); }
input[type=range]::-webkit-slider-thumb {
  width:14px;
  height:14px;
  margin-top:-5px;
  appearance:none;
  border:2px solid var(--cream);
  border-radius:50%;
  background:var(--charcoal);
  box-shadow:0 0 0 1px var(--charcoal);
}
input[type=range]::-moz-range-track { height:4px; border-radius:4px; background:rgba(23,23,23,.18); }
input[type=range]::-moz-range-thumb {
  width:11px;
  height:11px;
  border:2px solid var(--cream);
  border-radius:50%;
  background:var(--charcoal);
  box-shadow:0 0 0 1px var(--charcoal);
}
input[type=range]:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

.toggle-control { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; cursor:pointer; }
.toggle-switch { position:relative; width:42px; height:24px; flex:0 0 auto; }
.toggle-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.toggle-track { width:100%; height:100%; display:block; border:1px solid rgba(23,23,23,.26); border-radius:999px; background:rgba(23,23,23,.12); }
.toggle-thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--cream); transition:transform .16s; }
.toggle-switch input:checked + .toggle-track { border-color:var(--charcoal); background:var(--charcoal); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform:translateX(18px); }
.toggle-switch input:focus-visible + .toggle-track { outline:2px solid var(--orange); outline-offset:3px; }

button { padding:12px 15px; background:transparent; font-size:13px; cursor:pointer; transition:background-color .16s,border-color .16s,transform .16s; }
button:hover { border-color:var(--charcoal); transform:translateY(-1px); }
button:active { transform:translateY(0); }
button:focus-visible { outline:none; border-color:var(--charcoal); box-shadow:0 0 0 3px rgba(199,99,21,.2); }
.actions { display:flex; gap:12px; padding-top:2px; }
.actions button { flex:1; }
.primary-button { background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); }
.primary-button:hover { background:rgba(23,23,23,.88); }
.export-note { margin:-8px 0 0; color:rgba(23,23,23,.58); font-size:12px; line-height:1.45; }

.preview-panel { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.canvas-wrap {
  width:min(100%,820px);
  padding:18px;
  border-radius:4px;
  overflow:hidden;
  transition:background .16s;
}
.preview-dark { background:#303030; }
.preview-light { background:#dedbd3; }
.preview-checker {
  background-color:#ddd;
  background-image:linear-gradient(45deg,#bbb 25%,transparent 25%),linear-gradient(-45deg,#bbb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bbb 75%),linear-gradient(-45deg,transparent 75%,#bbb 75%);
  background-size:32px 32px;
  background-position:0 0,0 16px,16px -16px,-16px 0;
}
canvas { display:block; width:100%; height:auto; background:transparent; }
.canvas-tip,.canvas-size { width:min(100%,820px); color:rgba(23,23,23,.58); font-size:12px; }
.canvas-tip { margin:12px 0 0; }
.canvas-size { margin:6px 0 0; }

@media (min-width:801px) {
  html,body { height:100%; overflow:hidden; }
  .topbar { position:sticky; top:0; z-index:20; height:72px; min-height:72px; }
  .builder { height:calc(100vh - 72px); min-height:0; overflow:hidden; align-items:start; padding:0 28px; }
  .controls { height:100%; max-height:100%; overflow-y:auto; align-self:stretch; padding:40px 24px 56px; }
  .preview-panel { position:sticky; top:0; height:100%; max-height:100%; overflow:auto; align-self:start; justify-content:flex-start; padding-top:40px; }
}

@media (max-width:800px) {
  html,body { height:auto; overflow:auto; }
  .topbar { padding:16px 20px; }
  .builder { min-height:0; grid-template-columns:1fr; gap:32px; padding:28px 20px 40px; }
  .controls { height:auto; max-height:none; overflow:visible; padding:20px; }
  .preview-panel { position:static; order:-1; height:auto; max-height:none; overflow:visible; padding-top:0; }
  .canvas-wrap,.canvas-tip,.canvas-size { width:100%; }
  .actions { flex-direction:column; }
}