:root {
  color-scheme:light;
  --ink:#172922;
  --muted:#64716b;
  --green:#216447;
  --pale:#f2f7f4;
  --line:#dce5df;
  --error:#a33225;
  font-family:Arial,"Helvetica Neue",sans-serif;
  color:var(--ink);
  background:#fff;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a,input {
  touch-action:manipulation
}
[hidden] {
  display:none!important
}
a {
  color:inherit
}
.site-header,main {
  width:calc(100% - 64px);
  max-width:1248px;
  margin:0 auto
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:36px 0
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:32px;
  font-weight:700;
  letter-spacing:-1px;
  text-decoration:none
}
.brand svg {
  width:48px;
  height:44px;
  fill:none;
  stroke:var(--ink);
  stroke-width:2.5
}
.privacy-label {
  font-size:17px;
  color:var(--muted)
}
.intro {
  text-align:center;
  margin:42px 0 38px
}
h1 {
  font-size:clamp(36px,4.5vw,64px);
  font-weight:700;
  letter-spacing:-2.5px;
  line-height:1.12;
  margin:0 0 18px
}
.intro p {
  margin:0;
  color:#485a52;
  font-size:22px;
  line-height:1.6
}
.steps {
  display:flex;
  list-style:none;
  margin:0 auto 38px;
  padding:0;
  max-width:920px
}
.steps li {
  position:relative;
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font-size:17px;
  color:#485a52
}
.steps li span {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid #becfc5;
  border-radius:50%;
  font-size:17px;
  background:#fff
}
.steps li:not(:last-child):after {
  content:"";
  height:1px;
  position:absolute;
  left:calc(50% + 48px);
  right:calc(-50% + 48px);
  top:23px;
  background:var(--line)
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1.83fr) minmax(0,1fr);
  gap:44px
}
.workspace section {
  min-width:0
}
h2 {
  font-size:32px;
  letter-spacing:-.8px;
  line-height:1.25;
  margin:0 0 22px
}
.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px
}
.section-heading h2 {
  flex-shrink:0
}
.drop-zone {
  min-height:370px;
  border:1.5px dashed #bfd1c6;
  border-radius:8px;
  background:var(--pale);
  overflow:hidden;
  transition:background .15s,border-color .15s
}
.drop-zone.drag-over {
  background:#e2efe7;
  border-color:var(--green)
}
.empty-state {
  text-align:center;
  padding:60px 20px 36px
}
.image-icon {
  display:block;
  width:68px;
  height:60px;
  margin:0 auto 22px;
  stroke:#667c70;
  stroke-width:2.4;
  stroke-linejoin:round
}
.empty-state h3 {
  margin:0 0 12px;
  font-size:25px;
  letter-spacing:-.5px;
  line-height:1.2
}
.empty-state p {
  font-size:17px;
  color:var(--muted);
  margin:0 0 20px;
  line-height:1.5
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  border:1px solid transparent;
  border-radius:6px;
  background:var(--green);
  color:#fff;
  padding:13px 30px;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s
}
.button:hover:not(:disabled) {
  background:#164a33
}
.button:disabled {
  background:#b1c3ba;
  color:#fff;
  cursor:not-allowed
}
.button svg {
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.full-width {
  width:100%
}
.empty-state .file-hint {
  margin:16px 0 0;
  font-size:14px
}
.text-button {
  border:0;
  background:none;
  color:var(--green);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  padding:10px 0;
  text-decoration:underline;
  text-underline-offset:4px
}
label {
  display:block;
  font-size:17px;
  margin:2px 0 10px;
  font-weight:500
}
.width-field {
  display:flex;
  min-height:52px;
  border:1px solid #b9c9c0;
  border-radius:6px;
  overflow:hidden
}
.width-field:focus-within {
  outline:3px solid #aed4bd;
  outline-offset:2px
}
.width-field:has(input[aria-invalid="true"]) {
  border-color:var(--error)
}
.width-field input {
  min-width:0;
  width:100%;
  border:0;
  padding:12px 16px;
  font-size:18px;
  line-height:1.5;
  background:white;
  color:var(--ink);
  outline:none
}
.width-field input::placeholder {
  color:var(--muted);
  opacity:1
}
.width-field input:disabled {
  color:var(--muted);
  background:#fafcfb
}
.width-field span {
  display:grid;
  place-items:center;
  min-width:58px;
  border-left:1px solid var(--line);
  background:var(--pale);
  font-size:17px
}
.helper {
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  margin:10px 0 24px
}
.dimensions {
  background:var(--pale);
  border-radius:8px;
  padding:10px 26px;
  margin:0 0 24px;
  font-size:17px;
  line-height:1.4
}
.dimensions div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:20px 0
}
.dimensions div+div {
  border-top:1px solid var(--line)
}
.dimensions dd {
  margin:0;
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-size:16px
}
.message {
  font-size:14px;
  line-height:1.5;
  margin:12px 0 0;
  overflow-wrap:anywhere
}
.error {
  color:var(--error)
}
.status {
  color:var(--green)
}
.status:empty {
  display:none
}
.result {
  margin-top:12px
}
.result p {
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 12px
}
.settings-section:has(.result:not([hidden])) #resize-button {
  background:white;
  border-color:#9eb9ab;
  color:var(--green)
}
.preview-canvas {
  height:300px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#fff;
  background-image:conic-gradient(#eef2ef 25%,transparent 0 50%,#eef2ef 0 75%,transparent 0);
  background-size:16px 16px
}
.preview-canvas img {
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 2px 12px #17292212
}
.file-info {
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  line-height:1.5;
  font-size:14px
}
.file-info strong {
  max-width:100%;
  overflow-wrap:anywhere;
  font-weight:600
}
.file-info span {
  color:var(--muted)
}
footer {
  border-top:1px solid var(--line);
  padding:22px 0 32px;
  margin-top:42px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  line-height:1.5
}
footer p {
  margin:0 0 2px
}
:focus-visible {
  outline:3px solid #87b79c;
  outline-offset:4px
}
@media(min-width:1400px) {
  .intro {
    margin-top:48px;
    margin-bottom:38px
  }
  .steps {
    margin-bottom:40px
  }
}
@media(max-width:760px) {
  .site-header,main {
    width:calc(100% - 40px)
  }
  .site-header {
    padding:24px 0
  }
  .brand {
    font-size:24px;
    gap:10px
  }
  .brand svg {
    width:35px;
    height:33px
  }
  .privacy-label {
    font-size:12px
  }
  .intro {
    margin:24px 0 28px
  }
  h1 {
    font-size:40px;
    letter-spacing:-1.7px;
    line-height:1.1;
    max-width:400px;
    margin:0 auto 16px
  }
  .intro p {
    font-size:16px;
    line-height:1.6;
    max-width:390px;
    margin:0 auto
  }
  .steps {
    margin-bottom:30px
  }
  .steps li {
    font-size:14px;
    gap:8px
  }
  .steps li span {
    width:36px;
    height:36px;
    font-size:14px
  }
  .steps li:not(:last-child):after {
    top:18px;
    left:calc(50% + 29px);
    right:calc(-50% + 29px)
  }
  .workspace {
    grid-template-columns:1fr;
    gap:28px
  }
  h2 {
    font-size:25px;
    margin-bottom:16px
  }
  .drop-zone {
    min-height:280px
  }
  .empty-state {
    padding:30px 12px
  }
  .image-icon {
    width:50px;
    height:44px;
    margin-bottom:16px
  }
  .empty-state h3 {
    font-size:23px
  }
  .empty-state p {
    font-size:15px
  }
  .empty-state .file-hint {
    font-size:12px
  }
  .preview-canvas {
    height:230px
  }
  .dimensions {
    margin-bottom:18px
  }
  .dimensions div {
    padding:14px 0
  }
  .helper {
    margin-bottom:18px
  }
  footer {
    margin-top:30px;
    padding-bottom:24px
  }
  .button {
    min-height:50px
  }
  .section-heading {
    align-items:baseline
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
}