.stitchcheck {
  --sc-ink: #191719;
  --sc-paper: #f7f4f0;
  --sc-panel: #fffdfb;
  --sc-rose: #b98a96;
  --sc-green: #275c4b;
  --sc-line: rgba(39, 31, 34, .16);
  background: var(--sc-paper);
  color: var(--sc-ink);
  padding: clamp(4rem, 8vw, 7.5rem) clamp(1.25rem, 5vw, 5rem);
}
.stitchcheck * { box-sizing: border-box; }
.stitchcheck-shell { width: min(1180px, 100%); margin: 0 auto; }
.stitchcheck-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .6fr); gap: 3rem; align-items: end; margin-bottom: 2.5rem; }
.stitchcheck-kicker { color: #7b5962; font: 500 .72rem/1.3 Inter, sans-serif; text-transform: uppercase; letter-spacing: .18em; margin-bottom: .8rem; }
.stitchcheck-title { margin: 0; max-width: 760px; color: var(--sc-ink); font: 400 clamp(2.35rem, 5vw, 5rem)/.94 "Cormorant Garamond", serif; letter-spacing: 0; }
.stitchcheck-lede { margin: 1.2rem 0 0; max-width: 680px; color: #5f585a; font: 400 1rem/1.75 Inter, sans-serif; }
.stitchcheck-trust { border-left: 1px solid var(--sc-line); padding-left: 1.5rem; color: #655d60; font: 400 .82rem/1.65 Inter, sans-serif; }
.stitchcheck-trust strong { display: block; margin-bottom: .35rem; color: var(--sc-green); font-weight: 500; }
.stitchcheck-workspace { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); border: 1px solid var(--sc-line); background: var(--sc-panel); min-height: 540px; }
.stitchcheck-controls { padding: clamp(1.4rem, 3vw, 2.5rem); border-right: 1px solid var(--sc-line); }
.stitchcheck-drop { display: grid; place-items: center; min-height: 210px; padding: 2rem; border: 1px dashed #bcaeb1; background: #faf8f5; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.stitchcheck-drop:hover, .stitchcheck-drop.is-dragging { border-color: var(--sc-rose); background: #f8eff1; }
.stitchcheck-drop svg { margin-bottom: .9rem; color: var(--sc-rose); }
.stitchcheck-drop strong { display: block; font: 500 .92rem/1.4 Inter, sans-serif; }
.stitchcheck-drop span { display: block; margin-top: .4rem; color: #766f71; font: 400 .75rem/1.5 Inter, sans-serif; }
.stitchcheck-file-name { min-height: 1.4rem; margin: .75rem 0 1.5rem; color: #5c5255; font: 500 .75rem/1.4 Inter, sans-serif; overflow-wrap: anywhere; }
.stitchcheck-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.stitchcheck-field label { display: block; margin-bottom: .45rem; color: #6c6265; font: 500 .68rem/1.2 Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.stitchcheck-field select { width: 100%; height: 44px; border: 1px solid var(--sc-line); border-radius: 0; background: #fff; color: var(--sc-ink); padding: 0 .8rem; font: 400 .82rem Inter, sans-serif; }
.stitchcheck-run { width: 100%; min-height: 48px; margin-top: 1rem; border: 1px solid var(--sc-ink); border-radius: 0; background: var(--sc-ink); color: #fff; cursor: pointer; font: 500 .75rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; transition: background .2s, color .2s; }
.stitchcheck-run:hover { background: var(--sc-rose); border-color: var(--sc-rose); }
.stitchcheck-run:disabled { cursor: not-allowed; opacity: .45; }
.stitchcheck-status { min-height: 1.4rem; margin-top: .8rem; color: #655d60; font: 400 .75rem/1.5 Inter, sans-serif; }
.stitchcheck-output { position: relative; display: grid; place-items: center; padding: clamp(1.4rem, 3vw, 2.5rem); background: #eee9e4; overflow: hidden; }
.stitchcheck-empty { max-width: 420px; text-align: center; color: #746b6d; font: 400 .9rem/1.7 Inter, sans-serif; }
.stitchcheck-empty strong { display: block; margin-bottom: .5rem; color: var(--sc-ink); font: 400 1.7rem/1.1 "Cormorant Garamond", serif; }
.stitchcheck-result { display: none; width: 100%; align-self: stretch; grid-template-rows: minmax(260px, 1fr) auto; gap: 1rem; }
.stitchcheck-result.is-visible { display: grid; }
.stitchcheck-preview { min-height: 280px; width: 100%; background: #f7f4f0; border: 1px solid var(--sc-line); object-fit: contain; }
.stitchcheck-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--sc-line); background: var(--sc-panel); }
.stitchcheck-metric { padding: 1rem; border-right: 1px solid var(--sc-line); }
.stitchcheck-metric:last-child { border-right: none; }
.stitchcheck-metric span { display: block; color: #786f71; font: 500 .62rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.stitchcheck-metric strong { display: block; margin-top: .4rem; color: var(--sc-ink); font: 500 .85rem Inter, sans-serif; }
.stitchcheck-fit[data-fit="true"] { color: var(--sc-green); }
.stitchcheck-fit[data-fit="false"] { color: #9a3e48; }
.stitchcheck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.stitchcheck-download, .stitchcheck-help { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--sc-ink); color: var(--sc-ink); background: transparent; text-decoration: none; cursor: pointer; font: 500 .72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.stitchcheck-download { background: var(--sc-ink); color: #fff; }
.stitchcheck-warning { grid-column: 1 / -1; color: #7d454c; font: 400 .75rem/1.5 Inter, sans-serif; }
.stitchcheck-boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: min(1180px, 100%); margin: 1px auto 0; background: var(--sc-line); border: 1px solid var(--sc-line); }
.stitchcheck-boundary > div { background: var(--sc-panel); padding: 1.4rem; }
.stitchcheck-boundary strong { display: block; margin-bottom: .35rem; color: var(--sc-ink); font: 500 .78rem Inter, sans-serif; }
.stitchcheck-boundary p { margin: 0; color: #6e6668; font: 400 .76rem/1.55 Inter, sans-serif; }
.stitchcheck-page { margin: 0; background: #171517; color: #f4f1ed; font-family: Inter, sans-serif; }
.stitchcheck-page-nav { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid rgba(255,255,255,.12); }
.stitchcheck-page-nav a { color: inherit; text-decoration: none; }
.stitchcheck-page-brand { font: 400 1.1rem "Cormorant Garamond", serif; }
.stitchcheck-page-back { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.stitchcheck-page .stitchcheck { min-height: calc(100vh - 68px); }
@media (max-width: 820px) {
  .stitchcheck-heading, .stitchcheck-workspace { grid-template-columns: 1fr; }
  .stitchcheck-trust { border-left: 0; border-top: 1px solid var(--sc-line); padding: 1rem 0 0; }
  .stitchcheck-controls { border-right: 0; border-bottom: 1px solid var(--sc-line); }
  .stitchcheck-output { min-height: 420px; }
}
@media (max-width: 560px) {
  .stitchcheck { padding-inline: 1rem; }
  .stitchcheck-fields, .stitchcheck-actions, .stitchcheck-boundary { grid-template-columns: 1fr; }
  .stitchcheck-metrics { grid-template-columns: 1fr 1fr; }
  .stitchcheck-metric:nth-child(2) { border-right: none; }
  .stitchcheck-metric:nth-child(-n+2) { border-bottom: 1px solid var(--sc-line); }
}