:root {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#202722;
  background:#f8f9f5;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,textarea {
  font:inherit
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.42
}
a {
  color:inherit
}
header,footer {
  max-width:1200px;
  margin:auto;
  padding:30px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.brand {
  font-size:29px;
  font-weight:850;
  letter-spacing:-1.7px;
  text-decoration:none
}
.brand span {
  color:#477d49
}
.brand-dot {
  color:#95ba54!important
}
.header-note {
  font-size:13px;
  color:#70786c
}
main {
  max-width:1120px;
  margin:auto;
  padding:0 32px
}
.intro {
  text-align:center;
  padding:54px 0 42px
}
.eyebrow {
  font-size:11px;
  letter-spacing:2.1px;
  font-weight:750;
  color:#58734a
}
h1 {
  font-size:clamp(36px,5vw,62px);
  font-weight:650;
  letter-spacing:-2.8px;
  line-height:1.12;
  margin:20px 0
}
h1 span {
  color:#4a774c
}
.lead {
  font-size:16px;
  line-height:1.8;
  color:#72796f;
  margin:0
}
.workspace {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:white;
  border:1px solid #e1e5dc;
  border-radius:24px;
  box-shadow:0 14px 50px #293f2010;
  overflow:hidden
}
.editor {
  padding:34px 38px
}
.section-heading {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:23px
}
.step {
  font-size:11px;
  color:#678259;
  border:1px solid #dfe8d9;
  background:#f5f8f0;
  padding:5px 7px;
  border-radius:7px
}
h2 {
  font-size:18px;
  letter-spacing:-.5px;
  font-weight:650;
  margin:0
}
label {
  display:block;
  font-size:12px;
  font-weight:600;
  margin-bottom:9px
}
input,textarea {
  border:1px solid #dbe1d6;
  border-radius:9px;
  background:#fff;
  color:#263023;
  min-width:0
}
textarea {
  padding:15px;
  width:100%;
  font-size:13px;
  line-height:1.5;
  resize:vertical
}
input::placeholder,textarea::placeholder {
  color:#90968c
}
.hint {
  font-size:11px;
  color:#7b8375;
  line-height:1.6;
  margin:10px 0 18px
}
.primary,.secondary {
  border-radius:9px;
  padding:14px 18px;
  font-size:13px;
  font-weight:650
}
.primary {
  background:#274c35;
  color:#fff;
  border:1px solid #274c35;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center
}
.primary:hover:not(:disabled) {
  background:#366346
}
form .primary {
  width:100%
}
.primary span {
  font-size:18px
}
.secondary {
  background:#fff;
  border:1px solid #dce2d4;
  color:#374531
}
.secondary:hover:not(:disabled) {
  background:#f3f6ed
}
.color-section {
  border-top:1px solid #ebeee7;
  margin-top:29px;
  padding-top:26px
}
.reset {
  margin-left:auto;
  background:none;
  border:none;
  color:#6d7965;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:11px
}
.color-row {
  display:flex;
  gap:12px
}
input[type=color] {
  height:57px;
  width:65px;
  padding:5px;
  cursor:pointer;
  background:#f8faf4
}
.hex-field {
  border:1px solid #dbe1d6;
  border-radius:9px;
  flex:1;
  padding:8px 12px
}
.hex-field label {
  font-size:8px;
  letter-spacing:1.5px;
  color:#7b8375;
  margin:0 0 3px
}
.hex-field input {
  font-size:14px;
  padding:0;
  border:0;
  width:100%;
  border-radius:0;
  font-family:monospace
}
.rgb-fields {
  display:flex;
  gap:10px;
  margin-top:14px
}
.rgb-fields label {
  flex:1;
  color:#6f7868;
  font-size:10px
}
.rgb-fields input {
  display:block;
  width:100%;
  padding:7px;
  margin-top:5px
}
.presets {
  display:flex;
  gap:10px;
  margin-top:6px
}
.presets button {
  background:none;
  border:1px solid #e0e5db;
  width:31px;
  height:31px;
  border-radius:50%;
  font-size:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1
}
.presets button:nth-child(1) {
  color:#000
}
.presets button:nth-child(2) {
  color:#3346a8
}
.presets button:nth-child(3) {
  color:#176b52
}
.presets button:nth-child(4) {
  color:#9b303f
}
.presets button:nth-child(5) {
  color:#7038a0
}
.preview {
  background:#f0f3e9;
  border-left:1px solid #e1e5dc;
  padding:31px 34px;
  display:flex;
  flex-direction:column;
  align-items:center
}
.preview-top {
  display:flex;
  width:100%;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:9px;
  letter-spacing:1.5px;
  color:#7a866d
}
.badge {
  letter-spacing:0;
  border:1px solid #d9e2ce;
  border-radius:20px;
  padding:7px 9px;
  font-size:10px;
  color:#688057;
  background:#f7f9f2
}
#preview-generate {
  width:min(100%,290px);
  justify-content:center;
  margin-top:33px
}
.qr-stage {
  width:min(100%,290px);
  aspect-ratio:1;
  background:#fff;
  border:1px solid #e2e8db;
  border-radius:18px;
  margin:14px 0 5px;
  display:grid;
  place-items:center;
  box-shadow:0 6px 20px #394c1710;
  padding:12px
}
#preview-generate[hidden] + .qr-stage {
  margin-top:33px
}
#placeholder {
  text-align:center;
  color:#87927b;
  padding:15px
}
.placeholder-icon {
  font-size:85px;
  line-height:1;
  color:#bac8a8
}
h3 {
  font-size:13px;
  font-weight:500;
  margin:18px 0 8px
}
#placeholder p {
  font-size:11px
}
canvas {
  width:100%;
  height:auto;
  image-rendering:pixelated
}
#preview-caption {
  font-size:11px;
  color:#7d8773;
  margin:17px 0 25px
}
.actions {
  display:flex;
  gap:10px;
  width:100%;
  margin-top:auto
}
.actions .primary {
  flex:1
}
.privacy {
  font-size:10px;
  color:#8a927f;
  margin:16px 0 0
}
#short-link {
  font-size:11px;
  overflow-wrap:anywhere;
  text-align:center;
  margin-top:16px;
  max-width:100%
}
#status {
  font-size:12px;
  line-height:1.6;
  margin-bottom:0;
  color:#36543a;
  min-height:19px
}
.warning {
  color:#9b4326
}
.features {
  display:flex;
  justify-content:space-around;
  padding:33px 0 47px;
  font-size:12px;
  color:#6c7664
}
.features span {
  color:#a3af96;
  margin-right:9px;
  font-size:10px
}
footer {
  border-top:1px solid #e3e8dc;
  padding-top:23px;
  padding-bottom:23px;
  color:#89917f;
  font-size:11px
}
footer .brand {
  font-size:19px
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid #72964d;
  outline-offset:4px
}
[hidden] {
  display:none!important
}
@media(max-width:700px) {
  header,footer {
  padding:22px
}
.header-note {
  font-size:10px
}
main {
  padding:0 18px
}
.intro {
  padding:28px 0 30px
}
h1 {
  letter-spacing:-1.8px
}
.lead {
  font-size:14px
}
.desktop {
  display:none
}
.workspace {
  grid-template-columns:1fr
}
.editor {
  padding:25px
}
.preview {
  border-left:0;
  border-top:1px solid #e1e5dc;
  padding:25px
}
.features {
  flex-direction:column;
  gap:16px;
  align-items:center;
  padding:28px
}
.actions {
  flex-wrap:wrap
}
.privacy {
  font-size:10px
}
footer {
  gap:20px
}
textarea {
  font-size:16px
}

}

#color-field {
  display:block;
  width:100%;
  height:112px;
  border-radius:8px;
  touch-action:none;
  cursor:crosshair;
  margin-bottom:10px
}
.hue-label {
  font-size:10px;
  color:#6f7868;
  margin-bottom:3px
}
#hue {
  width:100%;
  height:14px;
  appearance:none;
  background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);
  border:0;
  margin:4px 0 20px;
  cursor:pointer
}
#hue::-webkit-slider-thumb {
  appearance:none;
  width:12px;
  height:21px;
  border:2px solid white;
  border-radius:5px;
  background:transparent;
  box-shadow:0 0 2px #000
}
#hue::-moz-range-thumb {
  width:8px;
  height:17px;
  border:2px solid white;
  border-radius:5px;
  background:transparent;
  box-shadow:0 0 2px #000
}
#color-field:focus-visible {
  outline:3px solid #72964d;
  outline-offset:4px
}