:root {
  --ink: #1e2b2a;
  --muted: #67716c;
  --paper: #f7f1e5;
  --cream: #fffaf1;
  --line: #dcd5c8;
  --teal: #126c65;
  --orange: #f15b36;
  --yellow: #f2bd31;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 88% 9%, #f4d977 0, #f4d977 1px, transparent 1.5px) 0 0/13px 13px, var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.site-header { max-width: 1380px; margin: auto; padding: 24px 42px; display: flex; justify-content: space-between; align-items: center; font: 500 11px "DM Mono", monospace; letter-spacing: .08em; }
.wordmark { color: var(--ink); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.wordmark-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 13px 0 var(--yellow), 26px 0 var(--teal); margin-right: 25px; }
.header-note { color: var(--muted); display: flex; align-items: center; gap: 7px; }
.header-note span, .status-dot { width: 7px; height: 7px; background: #44a46d; border-radius: 50%; display: inline-block; }
main { max-width: 1280px; margin: 0 auto; padding: 48px 28px 44px; }
.hero { max-width: 740px; margin: 0 0 46px; }
.eyebrow { margin: 0 0 10px; font: 500 11px "DM Mono", monospace; color: var(--orange); letter-spacing: .08em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font: 700 clamp(2.75rem, 6.2vw, 5.35rem)/.94 "Fraunces", Georgia, serif; letter-spacing: -.055em; margin: 0 0 20px; }
h1 em { color: var(--teal); font-style: italic; }
.hero-copy { font-size: 1.04rem; color: var(--muted); line-height: 1.55; max-width: 530px; }
.studio { display: grid; grid-template-columns: 365px minmax(0, 1fr); background: var(--cream); border: 1px solid var(--line); box-shadow: 8px 8px 0 rgba(30,43,42,.08); }
.controls { padding: 27px; border-right: 1px solid var(--line); }
.control-heading { display: flex; align-items: baseline; gap: 12px; }
.step { color: var(--orange); font: 500 11px "DM Mono", monospace; letter-spacing: .05em; }
.control-heading h2, .build-summary h2 { font: 600 1rem/1.2 "DM Sans", sans-serif; margin: 0; }
.spaced { margin-top: 29px; padding-top: 26px; border-top: 1px solid var(--line); }
.image-tools[hidden], .empty-state[hidden] { display: none; }
.reset-button { padding: 0; border: 0; color: var(--teal); background: transparent; font-size: .7rem; text-decoration: underline; text-underline-offset: 2px; }
.crop-preview { display: block; width: 100%; height: auto; max-height: 145px; margin-top: 10px; border: 1px solid var(--line); background: #d8d1c4; object-fit: contain; }
.crop-sliders, .adjustments { display: grid; gap: 8px; }.adjustments { padding-top: 16px; border-top: 1px solid var(--line); }
.adjustments .field-title { margin-bottom: 3px; }.adjustment-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 37px; align-items: center; gap: 8px; }.adjustment-row label { color: var(--muted); font-size: .69rem; line-height: 1.1; }.adjustment-row input[type="range"] { height: 4px; }.adjustment-row output { font-size: 10px; text-align: right; }
.upload-zone { margin-top: 17px; min-height: 100px; padding: 15px; display: flex; align-items: center; gap: 13px; border: 1.5px dashed #b9b1a4; background: #fcf8f0; transition: .2s; cursor: pointer; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--teal); background: #eff8f4; }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; color: var(--cream); background: var(--teal); border-radius: 50%; font-size: 25px; font-weight: 300; }
.upload-zone strong, .upload-zone small { display: block; }
.upload-zone strong { font-size: .92rem; }
.upload-zone small, .toggle-field small { margin-top: 3px; color: var(--muted); font-size: .76rem; }
.text-button { border: 0; padding: 10px 0 0; color: var(--teal); background: none; font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
.text-button span { display: inline-block; font-size: 1rem; transform: rotate(45deg); }
.field { margin-top: 23px; }
.field-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.field-title, .field-label label { font-size: .81rem; font-weight: 700; }
output { color: var(--orange); font: 500 12px "DM Mono", monospace; }
input[type="range"] { appearance: none; width: 100%; height: 5px; background: #d5cfc3; outline: 0; border-radius: 5px; accent-color: var(--teal); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; background: var(--teal); border: 3px solid var(--cream); box-shadow: 0 0 0 1px var(--teal); border-radius: 50%; }
.range-hints { display: flex; justify-content: space-between; color: #92978e; font: 10px "DM Mono", monospace; margin-top: 7px; }
.segment { display: grid; grid-template-columns: 1fr 1fr; margin-top: 9px; border: 1px solid var(--line); padding: 3px; }
.segment input { position: absolute; opacity: 0; }
.segment label { padding: 8px 6px; display: flex; justify-content: center; align-items: center; gap: 7px; font-size: .76rem; cursor: pointer; }
.segment input:checked + label { color: var(--cream); background: var(--ink); }
.shape-dot, .shape-square { width: 10px; height: 10px; display: inline-block; border: 1px solid currentColor; }
.shape-dot { border-radius: 50%; }
select { width: 100%; padding: 10px 31px 10px 11px; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: #fffdf8; font-size: .82rem; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 11px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.info-button { border: 1px solid #aaa699; color: var(--muted); background: transparent; border-radius: 50%; font: 500 10px Georgia, serif; width: 15px; height: 15px; padding: 0; }
.palette-swatches { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; min-height: 19px; }
.palette-swatches button { position: relative; width: 17px; height: 17px; padding: 0; border: 1px solid rgba(0,0,0,.16); border-radius: 50%; transition: transform .15s, opacity .15s; }
.palette-swatches button:hover { transform: scale(1.17); }.palette-swatches button[aria-pressed="false"] { opacity: .22; }.palette-swatches button[aria-pressed="false"]::after { content: ""; position: absolute; width: 1px; height: 23px; top: -4px; left: 7px; background: var(--ink); transform: rotate(45deg); }
.palette-tools { display: flex; align-items: center; gap: 6px; margin-top: 10px; }.custom-color { display: block; width: 28px; height: 27px; overflow: hidden; border: 1px solid var(--line); }.custom-color input { width: 43px; height: 43px; margin: -8px; cursor: pointer; border: 0; background: none; }.palette-tools button { padding: 6px 8px; border: 1px solid var(--line); color: var(--ink); background: transparent; font-size: .69rem; }.palette-tools button:hover { border-color: var(--teal); color: var(--teal); }.palette-help { margin: 7px 0 0; color: var(--muted); font-size: .69rem; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.toggle-field { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toggle-field small { display: block; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { display: block; width: 37px; height: 21px; border-radius: 20px; background: #c4c4bb; padding: 3px; transition: .2s; }
.toggle span:after { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: white; transition: .2s; }
.toggle input:checked + span { background: var(--teal); }.toggle input:checked + span:after { transform: translateX(16px); }
.primary-button, .secondary-button { width: 100%; min-height: 46px; border: 0; font-size: .83rem; font-weight: 700; transition: transform .15s, background .15s; }
.primary-button { margin-top: 22px; padding: 0 12px 0 17px; display: flex; justify-content: space-between; align-items: center; color: white; background: var(--orange); }.primary-button:hover { background: #d94827; transform: translateY(-1px); }.primary-button b { font-size: 1.1rem; font-weight: 400; }
.canvas-panel { min-width: 0; padding: 22px; display: flex; flex-direction: column; }
.canvas-topline, .canvas-footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 11px "DM Mono", monospace; letter-spacing: .02em; }
.canvas-topline > div { display: flex; align-items: center; gap: 7px; }.dimensions { color: var(--orange); }
.canvas-wrap { min-height: 505px; position: relative; display: grid; place-items: center; overflow: hidden; margin: 16px 0 11px; background: #dcd7ca; background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.22) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.22) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.22) 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }
.canvas-wrap.empty { background-color: #e9e3d7; }.canvas-wrap:not(.empty) { background: #252d2c; }
canvas { display: block; max-width: 94%; max-height: 480px; width: auto; height: auto; transform: scale(1); transition: transform .2s ease; image-rendering: auto; box-shadow: 4px 6px 0 rgba(0,0,0,.18); }
.empty-state { position: absolute; display: grid; place-items: center; text-align: center; color: #85847b; pointer-events: none; }.empty-state p { margin: 19px 0 0; font: 1.1rem/1.35 "Fraunces", serif; }.empty-state strong { color: var(--ink); font-weight: 600; }
.ghost-grid { display: grid; grid-template-columns: repeat(3, 17px); gap: 7px; }.ghost-grid i { width: 17px; height: 17px; border-radius: 50%; background: #bcb7ac; opacity: .7; }.ghost-grid i:nth-child(2n) { background: #e0a696; }.ghost-grid i:nth-child(3n) { background: #80aaa2; }
.canvas-footer { padding: 0 1px; }.legend { display: flex; align-items: center; gap: 7px; }.legend-round { width: 11px; height: 11px; border-radius: 50%; background: var(--orange); }.zoom-controls { display: flex; align-items: center; gap: 9px; }.zoom-controls button { border: 0; width: 23px; height: 23px; background: #e4ded2; color: var(--ink); font-size: 1.05rem; line-height: 1; }.zoom-controls button:hover { background: var(--yellow); }
.result-strip { margin-top: 19px; padding: 19px 21px; display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: center; gap: 20px; border: 1px solid var(--line); background: #fffaf1; box-shadow: 5px 5px 0 rgba(30,43,42,.06); }.build-summary { display: flex; gap: 12px; align-items: center; }.build-summary .eyebrow { margin-bottom: 4px; }.build-summary h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; }.top-colors { display: flex; flex-wrap: wrap; gap: 6px; }.color-chip { display: flex; align-items: center; gap: 5px; padding: 5px 7px 5px 5px; background: #f1ece1; font: 10px "DM Mono", monospace; }.color-chip i { width: 14px; height: 14px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; }.result-actions { display: flex; gap: 9px; }.secondary-button { width: auto; min-height: 42px; padding: 0 14px; border: 1px solid var(--ink); color: var(--ink); background: transparent; }.secondary-button:hover { color: white; background: var(--ink); }.primary-button.compact { width: auto; min-height: 42px; margin: 0; min-width: 148px; }
.tips { display: flex; align-items: baseline; gap: 21px; max-width: 720px; margin: 43px auto 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }.tips p { margin: 0; }.tips strong { color: var(--ink); }.tip-number { color: var(--orange); font: 11px "DM Mono", monospace; }
dialog { width: min(92vw, 570px); padding: 25px; border: 1px solid var(--ink); color: var(--ink); background: #fffaf1; box-shadow: 8px 8px 0 var(--ink); }dialog::backdrop { background: rgba(24,37,34,.45); backdrop-filter: blur(3px); }.dialog-heading { display: flex; justify-content: space-between; align-items: start; }.dialog-heading h2 { margin: 0; font: 600 1.75rem "Fraunces", serif; }.close-button { border: 0; background: none; color: var(--ink); font-size: 2rem; line-height: .7; }.guide-copy { color: var(--muted); font-size: .85rem; line-height: 1.5; }.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 21px 0; }.guide-color { display: flex; align-items: center; gap: 9px; padding: 10px; background: #eee8db; font-size: .78rem; }.guide-color i { width: 25px; height: 25px; flex: none; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); }.guide-color span { display: block; color: var(--muted); font: 10px "DM Mono", monospace; margin-top: 2px; }.toast { position: fixed; z-index: 4; left: 50%; bottom: 25px; padding: 11px 15px; color: #fff; background: var(--ink); font-size: .8rem; transform: translate(-50%, 80px); opacity: 0; transition: .25s; }.toast.show { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 820px) { .site-header { padding: 19px 20px; }.header-note { display: none; } main { padding: 34px 16px 32px; }.hero { margin-bottom: 31px; }.studio { grid-template-columns: 1fr; }.controls { border-right: 0; border-bottom: 1px solid var(--line); }.canvas-panel { padding: 16px; }.canvas-wrap { min-height: min(82vw, 505px); }.result-strip { grid-template-columns: 1fr; gap: 16px; }.result-actions { justify-content: stretch; }.result-actions > * { flex: 1; }.tips { margin-top: 31px; } }
@media (max-width: 430px) { h1 { font-size: 2.8rem; }.controls { padding: 21px; }.canvas-wrap { min-height: 77vw; } canvas { max-width: 98%; }.site-header { font-size: 10px; }.wordmark-dot { width: 8px; height: 8px; margin-right: 21px; }.upload-zone { min-height: 90px; }.adjustment-row { grid-template-columns: 78px minmax(0, 1fr) 35px; gap: 6px; } }