/* Image Spec Studio (r4). One accent (teal-green), neutral paper, ink headings, white work surfaces.
   The recurring mark is the printer's crop corner: it frames the brand, the examples and the kept area. */
:root {
  color-scheme: light;
  --paper: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #f5f8fe;
  --well: #eaf0f9;
  --ink: #17243b;
  --text: #2a3750;
  --muted: #586880;
  --line: #dce3ee;
  --line-strong: #afbdd2;
  --accent: #2456d9;
  --accent-hover: #193fad;
  --accent-soft: #edf2ff;
  --ok: #1d6a3e;
  --ok-soft: #e3f1e7;
  --warn: #874800;
  --warn-soft: #fcf0dc;
  --warn-line: #e1c393;
  --bad: #a3271d;
  --bad-soft: #fbe8e5;
  --focus: #2456d9;
  --scrim: rgba(20, 32, 41, 0.58);
  --radius: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(23, 36, 59, 0.05);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --checker: repeating-conic-gradient(#e4eaf4 0% 25%, #fafcff 0% 50%) 0 0 / 16px 16px;
}
:lang(ko) { --font: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
:lang(ja) { --font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif; }
:lang(zh-Hans) { --font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text); font-family: var(--font);
  font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
}
:lang(ko) body, body:lang(ko) { word-break: keep-all; }
h1, h2, h3 { line-height: 1.3; margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -48px; z-index: 10; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { .wrap { padding-left: 24px; padding-right: 24px; } }

/* ---------- Header: brand, work / my specs, languages ---------- */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; min-width: 0; margin-right: 8px; }
.brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand-name { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.appnav { display: flex; gap: 2px; margin-right: auto; }
.appnav-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.appnav-btn:hover { color: var(--ink); background: var(--surface-2); }
.appnav-btn[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.appnav-count { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: 6px; }
.appnav-count:empty { display: none; }
.langs { display: flex; flex-wrap: wrap; gap: 2px; }
.langs a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 10px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: 0.875rem; }
.langs a:hover { color: var(--ink); background: var(--surface-2); }
.langs a[aria-current="page"] { color: var(--accent); font-weight: 700; }
@media (max-width: 640px) {
  .top-in { padding-top: 4px; padding-bottom: 0; gap: 0 8px; }
  .brand { flex: 0 1 auto; min-height: 44px; margin-right: auto; }
  .brand-name { font-size: 1rem; }
  .appnav { order: 2; margin-right: -8px; }
  .appnav-btn { padding: 4px 8px; font-size: 0.875rem; min-height: 44px; }
  .langs { order: 3; flex: 1 1 100%; margin-left: -6px; }
  .langs a { padding: 4px 6px; font-size: 0.8125rem; min-height: 36px; }
}

/* ---------- Landing ---------- */
.landing { display: grid; gap: 32px; padding-top: 40px; padding-bottom: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .landing { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr); gap: 56px; padding-top: 56px; padding-bottom: 56px; align-items: start; } }
.landing h1 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); letter-spacing: -0.02em; line-height: 1.2; max-width: 20ch; }
:lang(ko) .landing h1, :lang(ja) .landing h1, :lang(zh-Hans) .landing h1 { letter-spacing: -0.01em; max-width: 16em; }
.lede { color: var(--muted); font-size: 1.0625rem; margin-top: 12px; max-width: 38em; }
.ask { font-size: 0.9375rem; font-weight: 700; color: var(--ink); margin: 28px 0 10px; }
.tasks { display: grid; gap: 8px; }
.task {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic t" "ic d"; gap: 0 14px; align-items: center;
  text-align: left; padding: 14px 16px; min-height: 68px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; box-shadow: var(--shadow); color: var(--text);
}
.task:hover { border-color: var(--accent); }
.task-ic { grid-area: ic; width: 40px; height: 40px; padding: 8px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.task-t { grid-area: t; font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.task-d { grid-area: d; color: var(--muted); font-size: 0.875rem; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }
.btn-lg { min-height: 52px; padding: 10px 22px; font-size: 1.0625rem; border-radius: var(--radius-md); }
.pick-note { color: var(--muted); font-size: 0.875rem; flex: 1 1 18rem; }
.spec-quick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.spec-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic n" "ic d"; gap: 0 8px; align-items: center; text-align: left; min-height: 48px; padding: 6px 14px 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.spec-chip:hover { border-color: var(--accent); }
.spec-chip .icon { grid-area: ic; color: var(--accent); }
.spec-chip-name { grid-area: n; font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.spec-chip-desc { grid-area: d; font-size: 0.8125rem; color: var(--muted); }

/* Examples: real pictures drawn by the page, framed with crop corners */
.samples { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.samples .ask { grid-column: 1 / -1; margin: 0; }
@media (min-width: 960px) { .samples { padding-top: 6px; } }
.sample { display: grid; gap: 10px; align-content: start; padding: 10px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; box-shadow: var(--shadow); color: var(--text); }
.sample:hover { border-color: var(--accent); }
.sample[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.sample-img { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--checker); border-radius: var(--radius-sm); }
.sample-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.sample-img::before, .sample-img::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); }
.sample-img::before { left: -5px; top: -5px; border-right: 0; border-bottom: 0; }
.sample-img::after { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.sample-text { display: grid; gap: 2px; padding: 0 2px 2px; }
.sample-t { font-weight: 700; color: var(--ink); }
.sample-d { font-size: 0.875rem; color: var(--muted); }
.samples-note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); }
body.is-dragging .landing .pick { outline: 3px dashed var(--accent); outline-offset: 8px; border-radius: var(--radius); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
  text-decoration: none; white-space: normal; text-align: center;
}
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn-secondary:hover { background: var(--accent-soft); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); font-weight: 500; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { min-height: 36px; padding: 4px 12px; font-size: 0.875rem; }
.btn-quiet { background: transparent; color: var(--accent); border-color: transparent; font-weight: 600; padding: 6px 8px; min-height: 36px; }
.btn-quiet:hover { background: var(--accent-soft); }
.btn-warn { background: var(--surface); color: var(--warn); border-color: var(--warn-line); font-weight: 600; }
.btn-warn:hover { background: var(--warn-soft); }
.btn-block { width: 100%; min-height: 50px; font-size: 1.0625rem; border-radius: var(--radius-md); }
.btn[aria-disabled="true"] { background: #78a59f; cursor: progress; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- Workspace ---------- */
.work { padding-top: 20px; padding-bottom: 32px; }
.workspace { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 348px; gap: 24px; }
  .steps { display: none !important; }
  .only-narrow { display: none !important; }
}
/* Narrow screens: one pane at a time, chosen with the step bar. */
@media (max-width: 899px) {
  .workspace[data-pane="image"] .cond-col { display: none; }
  .workspace[data-pane="cond"] .stage-col { display: none; }
}
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: center; text-align: left; min-height: 52px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; color: var(--text); }
.step[aria-current="step"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.step[aria-current="step"] .step-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-body { display: grid; min-width: 0; line-height: 1.25; }
.step-t { font-weight: 700; font-size: 0.875rem; color: var(--ink); }
.step-t { overflow-wrap: normal; }
@media (max-width: 480px) { .step { grid-template-columns: minmax(0, 1fr); padding: 6px 8px; } .step-n { display: none; } }
.step-s { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stage-col, .cond-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.stage-col { padding: 14px; }
@media (min-width: 900px) { .stage-col { padding: 18px 20px 20px; } }

/* File strip */
.strip-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 36px; }
.strip-h { font-size: 1rem; }
.list-count { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.list-tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 10px 0 14px; }
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.item { position: relative; }
.item-select { position: relative; display: block; width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--checker); cursor: pointer; overflow: visible; }
.item-select .thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-md) - 1px); }
.item-select .thumb-ph { display: grid; place-items: center; color: var(--muted); }
.item.is-active .item-select { border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.item[data-state="rejected"] .item-select .thumb, .item[data-state="rejected"] .thumb-ph { opacity: 0.45; }
.tile-mark { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); }
.tile-mark:empty { display: none; }
.tile-mark .icon { width: 14px; height: 14px; }
.tile-mark[data-tone="ok"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.tile-mark[data-tone="warn"] { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.tile-mark[data-tone="bad"] { background: var(--bad); border-color: var(--bad); color: #fff; }
.tile-mark .spinner { width: 12px; height: 12px; border-width: 2px; }
.strip-add { display: grid; place-items: center; align-content: center; gap: 0; width: 64px; height: 64px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--accent); font-size: 0.75rem; font-weight: 700; cursor: pointer; line-height: 1.2; }
.strip-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.strip-add .icon { width: 20px; height: 20px; }

.notice { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-hover); font-size: 0.875rem; font-weight: 600; }
.notice.is-warn { background: var(--warn-soft); color: var(--warn); }

/* Stage: the active file, large */
.stage-empty {
  display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; padding: 32px 16px; min-height: 280px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2);
}
@media (min-width: 900px) { .stage-empty { min-height: 420px; } }
.stage-empty-ic { width: 36px; height: 36px; color: var(--accent); }
.stage-empty-t { font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.stage-empty-d { color: var(--muted); font-size: 0.8125rem; max-width: 34em; }
.drop-over { display: none; }
body.is-dragging .stage-empty, body.is-dragging .stage-body { outline: 3px dashed var(--accent); outline-offset: 4px; }
body.is-dragging .stage-empty { background: var(--accent-soft); }
body.is-dragging .drop-idle { display: none; }
body.is-dragging .drop-over { display: inline; color: var(--accent); }

.stage-body { display: grid; gap: 14px; border-radius: var(--radius); }
.stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; justify-content: space-between; }
.stage-name { font-size: 1.0625rem; min-width: 0; flex: 1 1 12rem; }
.badge { display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; font-size: 0.8125rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.badge .icon { width: 14px; height: 14px; }
.badge[data-tone="ok"] { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge[data-tone="warn"] { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge[data-tone="bad"] { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.badge[data-tone="busy"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.views { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); padding: 16px; background: var(--well); border-radius: var(--radius); }
@media (min-width: 360px) { .views.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .views { padding: 10px; gap: 8px; } }
.view { margin: 0; display: grid; gap: 8px; justify-items: center; align-content: start; min-width: 0; }
.frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; background: var(--checker); overflow: hidden; border-radius: 3px; box-shadow: 0 1px 3px rgba(20, 32, 41, 0.18); }
.view-img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(58vh, 540px); }
.views.is-pair .view-img { max-height: min(42vh, 420px); }
.view-ph { display: grid; place-items: center; width: 160px; height: 120px; color: var(--muted); }
.view .meta { font-size: 0.8125rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.view .meta-result { color: var(--ink); font-weight: 700; }
.btn-view { min-height: 40px; padding: 6px 14px; font-size: 0.875rem; }
/* The mobile preview rail below uses the same truthful DOM order as desktop and keyboard. */
/* Crop: the kept window stays clear; everything else is shaded. Corners mark the cut. */
.keep { position: absolute; box-shadow: 0 0 0 9999px var(--scrim); outline: 1px solid rgba(255, 255, 255, 0.9); pointer-events: none; }
.mark { position: absolute; width: 16px; height: 16px; border: 3px solid #fff; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); }
.mark-tl { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
.mark-tr { right: -3px; top: -3px; border-left: 0; border-bottom: 0; }
.mark-bl { left: -3px; bottom: -3px; border-right: 0; border-top: 0; }
.mark-br { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
/* Pad: the output frame; the image sits where the encoder will draw it. */
.frame-out .sizer { opacity: 0; }
.pad-place { position: absolute; outline: 2px dashed rgba(10, 108, 96, 0.9); outline-offset: -1px; }
.pad-place .view-img { width: 100%; height: 100%; max-width: none; max-height: none; }
.stage-note { font-size: 0.8125rem; color: var(--muted); }
.geo-text { font-size: 0.875rem; color: var(--text); display: flex; gap: 8px; align-items: flex-start; }
.geo-text .icon { width: 16px; height: 16px; margin-top: 0.2em; color: var(--accent); }

.stage-title { display: grid; gap: 2px; font-weight: 700; color: var(--ink); }
.stage-title.ok { display: flex; align-items: center; gap: 8px; color: var(--ok); }
.stage-sub { font-weight: 400; font-size: 0.875rem; color: var(--muted); }
.progress { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 0.875rem; font-weight: 600; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 0.8s linear infinite; flex: none; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Target vs actual */
.checks { list-style: none; margin: 0; padding: 0; }
.spec { display: grid; border-top: 1px solid var(--line); }
.spec-head, .spec-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 4px 12px; align-items: baseline; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.spec-head { padding-top: 6px; padding-bottom: 6px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.spec-k { font-weight: 700; color: var(--ink); font-size: 0.875rem; }
.spec-t { font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.spec-a { font-size: 0.9375rem; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.spec-s { justify-self: end; }
.spec-s .icon { width: 20px; height: 20px; }
.spec-row.pass .spec-s { color: var(--ok); }
.spec-row.fail { background: var(--bad-soft); }
.spec-row.fail .spec-k, .spec-row.fail .spec-a, .spec-row.fail .spec-s { color: var(--bad); }
.spec-row.info .spec-a { font-weight: 500; }
.spec-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spec-verify { display: flex; gap: 8px; align-items: flex-start; padding: 10px 8px; font-size: 0.8125rem; color: var(--muted); }
.spec-verify .icon { width: 16px; height: 16px; margin-top: 0.2em; flex: none; }
.spec-verify.pass .icon { color: var(--ok); }
.spec-verify.fail { color: var(--bad); font-weight: 600; }
@media (max-width: 560px) {
  .spec-head { display: none; }
  .spec-row { grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "k s" "t t" "a a"; gap: 2px 8px; }
  .spec-k { grid-area: k; } .spec-s { grid-area: s; } .spec-t { grid-area: t; } .spec-a { grid-area: a; }
  .spec-cap { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: var(--muted); font-weight: 500; }
}

.unmet-box, .err-box { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 0.9375rem; }
.unmet-box { background: var(--warn-soft); color: #4d2c00; }
.err-box { background: var(--bad-soft); color: #5c140e; }
.box-h { display: flex; gap: 8px; align-items: center; font-size: 1rem; }
.unmet-box .box-h { color: var(--warn); }
.err-box .box-h { color: var(--bad); }
.unmet-choose { font-weight: 700; font-size: 0.875rem; }
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.keep-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--warn-line); }
.keep-row .hint { flex: 1 1 14rem; color: #6b4310; }
@media (max-width: 480px) { .opt-row .btn, .keep-row .btn { flex: 1 1 100%; } }
.override { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 0.875rem; color: var(--accent); font-weight: 600; }

.save-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px 10px 16px; border-radius: var(--radius-md); background: var(--ok-soft); }
.save-text { display: grid; gap: 2px; flex: 1 1 16rem; min-width: 0; }
.save-note { font-size: 0.8125rem; color: #2f5a40; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stage-actions .spacer { flex: 1; }
.btn-save { min-height: 48px; padding: 8px 22px; font-size: 1rem; border-radius: var(--radius-md); }
@media (max-width: 480px) { .save-bar .btn-save { flex: 1 1 100%; } }
.item-more summary { color: var(--muted); }
.notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.8125rem; color: var(--muted); }
.notes li { display: flex; gap: 6px; align-items: flex-start; }
.notes .icon { width: 14px; height: 14px; margin-top: 0.25em; }

/* ---------- Conditions ---------- */
.cond-col { display: grid; gap: 16px; min-width: 0; }
.cond-card { padding: 16px; }
@media (min-width: 900px) { .cond-card { padding: 18px 20px; } }
.cond-h { font-size: 1rem; margin-bottom: 10px; }
.task-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.tab { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; color: var(--muted); cursor: pointer; text-align: center; line-height: 1.2; }
.tab > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tab:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 32, 41, 0.14); }
.tab:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.tab > span { pointer-events: none; }
@media (max-width: 899px) { .tab { min-height: 44px; } }
.task-help { color: var(--muted); font-size: 0.875rem; margin: 10px 0 2px; }

#settings { display: grid; }
.group { border: 0; margin: 0; padding: 14px 0; min-width: 0; display: grid; gap: 6px; border-top: 1px solid var(--line); }
.cond-main > .group:first-child { border-top: 0; }
.label { font-weight: 700; font-size: 0.9375rem; color: var(--ink); padding: 0; }
.sublabel { display: block; font-size: 0.8125rem; color: var(--muted); margin-bottom: 2px; }
.row { display: flex; gap: 8px; align-items: flex-end; min-width: 0; }
.input, .select { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 8px 10px; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.input::placeholder { color: #848b91; }
.input:hover, .select:hover { border-color: #98a097; }
.input[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-soft); }
.select-unit { width: auto; flex: none; min-width: 84px; }
.dims .dim { flex: 1 1 0; min-width: 0; }
.times { padding-bottom: 10px; color: var(--muted); }
.hint, .help { color: var(--muted); font-size: 0.8125rem; }
.field-err { color: var(--bad); font-size: 0.8125rem; font-weight: 700; }
.size-bytes { font-size: 0.8125rem; color: var(--text); font-variant-numeric: tabular-nums; }
.size-bytes:empty { display: none; }
.size-bytes .alt { color: var(--muted); }
.size-bytes .alt::before { content: " · "; }
.group:has(#size:not(:placeholder-shown)) #size-hint { display: none; }
.subfield { display: grid; gap: 8px; margin-top: 4px; }
.dims { margin-top: 4px; }
.more summary { cursor: pointer; color: var(--accent); font-size: 0.8125rem; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font-size: 0.75rem; line-height: 1; }
.more[open] summary::before { content: "−"; }
.more .help { margin-top: 4px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); }
.check-field { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; margin-top: 4px; }
.check-field input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.check-field label { font-size: 0.9375rem; }
.check-field .hint { grid-column: 2; }

/* Choice controls: each native radio covers its own label box (hit area = focus = name). */
.seg { display: grid; gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg-4 .opt { padding: 6px 4px; }
@media (max-width: 359px) { .seg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.875rem; text-align: center; background: var(--surface); min-width: 0; line-height: 1.25; }
.opt > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt:hover { border-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
.opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt > span { pointer-events: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.swatches .opt { justify-content: flex-start; }
.swatches .opt:has(input:checked) { background: var(--surface); }
.sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line-strong); flex: none; }
.sw-white { background: #fff; }
.sw-black { background: #000; }
.sw-custom { background: #f2efe6; }
.color-input { width: 44px; height: 44px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }

/* Part to keep: a 3×3 picture of the frame */
.anchor-row { display: flex; gap: 12px; align-items: flex-start; }
.anchor-grid { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); gap: 3px; padding: 3px; background: var(--well); border-radius: var(--radius-sm); flex: none; }
.cell { position: relative; display: grid; place-items: center; background: var(--surface); border-radius: 4px; cursor: pointer; }
.cell > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cell > span { width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid var(--line-strong); pointer-events: none; }
.cell:hover > span { border-color: var(--accent); }
.cell:has(input:checked) { background: var(--accent); }
.cell:has(input:checked) > span { background: #fff; border-color: #fff; }
.cell:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; z-index: 1; }
.anchor-side { display: grid; gap: 6px; justify-items: start; min-width: 0; }

.more-cond { border-top: 1px solid var(--line); }
.more-cond > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.more-cond > summary::-webkit-details-marker { display: none; }
.more-cond > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); }
.more-cond[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.more-sum { color: var(--accent); font-weight: 600; font-size: 0.875rem; }
.cond-more > .group:first-child { border-top: 0; padding-top: 4px; }

.target { margin-top: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.target-h { font-size: 0.8125rem; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.target-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.9375rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.target-list li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 1px; background: var(--accent); }
.target-list .target-scope { color: var(--muted); font-size: 0.8125rem; margin-top: 4px; }
.target-list .target-scope::before { display: none; }

.start-area { padding-top: 12px; }
/* Desktop: the conditions card stays in view; its fields scroll inside it and Start sits below
   the scrolling area, so it never lies on top of a field, the result or the focus. */
@media (min-width: 900px) and (min-height: 560px) {
  .cond-col { position: sticky; top: 16px; }
  .cond-card { display: flex; flex-direction: column; max-height: calc(100dvh - 100px); }
  .cond-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -20px; padding: 0 20px 4px; }
  .start-area { flex: none; border-top: 1px solid var(--line); margin: 0 -20px -18px; padding: 12px 20px 14px; }
}
.start-msg { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); min-height: 1.3em; }
.start-msg.is-bad { color: var(--bad); font-weight: 700; }

/* My specs: a strip at the top of the conditions, part of the main flow */
.specs { display: grid; gap: 8px; margin: 12px 0 4px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.specs-head { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.specs-head .icon { color: var(--accent); }
.specs-h { font-size: 0.9375rem; }
.specs-head .hint { flex: 1 1 100%; }
.preset-unavailable { background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.8125rem; }
.preset-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.preset { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.preset:hover { border-color: var(--accent); }
.preset-apply { display: grid; gap: 0; text-align: left; padding: 6px 10px; min-height: 44px; border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.preset-name { font-weight: 700; font-size: 0.9375rem; color: var(--ink); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.tag { font-size: 0.75rem; font-weight: 600; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 0 8px; }
.preset-desc { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.preset-del { width: 44px; height: auto; min-height: 44px; border-left: 1px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.preset-save .row { align-items: stretch; }
.preset-save .input { min-height: 40px; }
.preset-save .btn { flex: none; min-height: 40px; }
.preset-msg { font-size: 0.8125rem; color: var(--muted); min-height: 1.3em; margin-top: 4px; }
.preset-msg:empty { min-height: 0; margin: 0; }
.preset-msg.is-bad { color: var(--warn); font-weight: 600; }
@media (max-width: 380px) { .preset-save .row { flex-wrap: wrap; } .preset-save .btn { flex: 1 1 100%; } }

/* ---------- About, help, privacy, footer ---------- */
.guide { margin: 8px auto 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 1192px; display: grid; gap: 10px; }
.guide h2 { font-size: 1.125rem; }
.guide p { color: var(--muted); font-size: 0.9375rem; max-width: 46em; }
.about { padding-top: 24px; padding-bottom: 24px; }
.how { border-top: 1px solid var(--line); padding-top: 24px; }
.how h2, .info-grid h2 { font-size: 1.0625rem; margin-bottom: 12px; }
.how-list { list-style: none; counter-reset: how; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .how-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.how-list li { counter-increment: how; display: grid; gap: 4px; padding-left: 36px; position: relative; }
.how-list li::before { content: counter(how); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.875rem; }
.how-t { font-weight: 700; color: var(--ink); }
.how-d { color: var(--muted); font-size: 0.9375rem; }
.info-grid { display: grid; gap: 24px; margin: 32px 0 24px; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); padding-top: 24px; }
@media (min-width: 900px) { .info-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; } }
.help-sec details { border-top: 1px solid var(--line); padding: 4px 0; }
.help-sec details:last-of-type { border-bottom: 1px solid var(--line); }
.help-sec summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; font-size: 0.9375rem; color: var(--ink); }
.help-sec details p { color: var(--muted); padding: 0 0 12px; font-size: 0.9375rem; max-width: 46em; }
.privacy-sec p { color: var(--muted); font-size: 0.9375rem; margin-bottom: 8px; }
.ad-slot { margin: 0 0 24px; min-height: 100px; border: 1px dashed var(--line-strong); border-radius: var(--radius); display: grid; place-items: center; color: var(--muted); font-size: 0.8125rem; }
.footer { border-top: 1px solid var(--line); padding: 16px 0 28px; color: var(--muted); font-size: 0.8125rem; background: var(--surface); }
.footer-in { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: center; }
.routes { display: flex; flex-wrap: wrap; gap: 2px 4px; flex: 1 1 100%; }
.routes a { display: inline-flex; align-items: center; min-height: 36px; padding: 2px 8px; border-radius: var(--radius-sm); color: var(--accent); font-weight: 600; text-decoration: none; }
.routes a:hover { background: var(--accent-soft); }
.routes a[aria-current="page"] { color: var(--ink); }
.routes-sep { color: var(--line-strong); align-self: center; }

/* ---------- Compare dialog ---------- */
.compare { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); color: var(--text); overflow: auto; }
.compare::backdrop { background: rgba(20, 32, 41, 0.6); }
.cmp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cmp-head h2 { font-size: 1.0625rem; }
.cmp-name { color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.cmp-stage { position: relative; display: grid; place-items: center; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--checker); }
.cmp-stage img { display: block; max-width: 100%; max-height: 56dvh; object-fit: contain; }
.cmp-clip { position: absolute; inset: 0; display: grid; place-items: center; clip-path: inset(0 50% 0 0); }
.cmp-clip img { width: 100%; height: 100%; max-height: none; }
.cmp-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; }
.cmp-tag { position: absolute; top: 8px; background: rgba(20, 32, 41, 0.8); color: #fff; font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; }
.cmp-tag-l { left: 8px; }
.cmp-tag-r { right: 8px; }
.cmp-range { width: 100%; margin: 12px 0; accent-color: var(--accent); min-height: 32px; }
.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.cmp-table th, .cmp-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th { color: var(--muted); font-weight: 600; font-size: 0.8125rem; }
.cmp-table tbody th { font-weight: 600; }
.cmp-views { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cmp-views .btn { min-height: 40px; }
.cmp-views .btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); font-weight: 700; }
.cmp-note { font-size: 0.8125rem; color: var(--muted); margin-bottom: 10px; }
.cmp-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cmp-side figure { margin: 0; display: grid; gap: 6px; }
.cmp-side figcaption { font-size: 0.8125rem; color: var(--muted); }
.cmp-side-box { position: relative; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 120px; overflow: hidden; background: var(--checker); }
.cmp-side-box img { display: block; max-width: 100%; max-height: 46dvh; }
.cmp-keep { position: absolute; border: 2px dashed #fff; box-shadow: 0 0 0 9999px rgba(20, 32, 41, 0.45); pointer-events: none; }
.cmp-actual { max-height: 60dvh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--checker); }
.cmp-actual img { display: block; max-width: none; max-height: none; }
#cmp-checks { margin-top: 4px; }

/* ---------- Root language chooser ---------- */
.root-page .root-main { max-width: 560px; padding-top: 48px; padding-bottom: 48px; }
.root-brand { margin-bottom: 12px; }
.root-heading { font-size: 1rem; font-weight: 600; color: var(--muted); margin-bottom: 16px; }
.root-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.root-list a { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text); }
.root-list a:hover { border-color: var(--accent); }
.root-lang { font-weight: 700; color: var(--accent); }
.root-desc { color: var(--muted); font-size: 0.875rem; }

/* Mobile UX R1: task-first studio, real image surfaces and ordered-set rails. */
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; font-size: .8125rem; margin-bottom: 16px; }
.landing { gap: 32px; }
.landing h1 { font-size: clamp(2rem, 1.3rem + 2.7vw, 3.25rem); letter-spacing: -.035em; line-height: 1.17; }
.landing .lede { font-size: 1rem; line-height: 1.7; margin-top: 16px; }
.pick { margin-top: 24px; }
.pick .btn-lg { min-height: 56px; box-shadow: 0 4px 12px #2456d922; }
.tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.task { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 14px 12px; min-height: 120px; box-shadow: none; }
.task-ic { width: 32px; height: 32px; padding: 6px; }
.task-t { font-size: .9375rem; line-height: 1.4; }
.task-d { font-size: .8125rem; line-height: 1.45; }
.samples { display: block; min-width: 0; align-self: center; }
.samples .ask { margin-bottom: 12px; }
.sample-rail { display: flex; gap: 16px; padding: 5px 3px 8px; }
.sample { flex: 0 0 88%; padding: 12px; gap: 16px; }
.sample-img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; }
.sample-img::before, .sample-img::after { display: none; }
.sample-t { font-size: 1.0625rem; }
.sample-d { font-size: .875rem; }
.sample-text { padding: 0 4px 4px; }
.samples-note { margin-top: 4px; line-height: 1.6; }
.rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 2px; scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; cursor: grab; min-width: 0; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none !important; scroll-behavior: auto !important; }
.rail-marks { display: flex; justify-content: center; gap: 2px; align-items: center; min-height: 44px; }
.rail-mark { min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--muted); padding: 6px; font-size: .8125rem; }
.rail-mark span:empty { width: 6px; height: 6px; background: #afbdd2; border-radius: 50%; }
.rail-mark[aria-current="true"] span:empty { width: 18px; border-radius: 6px; background: var(--accent); }
.rail-mark.named { padding-inline: 16px; font-weight: 600; }
.rail-mark.named[aria-current="true"] { color: var(--accent); background: var(--accent-soft); }
.strip { flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 0; }
.items { flex: 1 1 auto; flex-wrap: nowrap; padding: 6px; gap: 12px; }
.items > .item { flex: none; }
.strip-add { flex: none; }
.items:empty { display: none; }
.stage-col { padding: 18px; }
.stage-head { gap: 8px; }
.stage-name { font-size: 1rem; }
.views { background: var(--well); padding: 12px; gap: 12px; }
.view .meta { text-align: center; font-size: .8125rem; line-height: 1.6; }
.view { gap: 12px; }
.view .frame { border-radius: 8px; }
.btn-view { min-height: 44px; width: 100%; }
.result-facts { display: grid; gap: 10px; padding: 4px 2px; }
.byte-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; }
.byte-heading strong { font-size: 1.5rem; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric-label, .metric-limit { font-size: .8125rem; color: var(--muted); }
.byte-track { height: 6px; background: var(--well); border-radius: 999px; overflow: hidden; }
.byte-track > span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.byte-track.exceeds > span { background: var(--warn); }
.fact-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fact-chips > span { display: flex; gap: 6px; align-items: center; font-size: .875rem; font-weight: 600; color: var(--ink); }
.fact-chips .icon { color: var(--accent); }
.result-facts .hint { line-height: 1.6; }
.result-checks { border-top: 1px solid var(--line); }
.result-checks > summary, .specs > summary { min-height: 44px; cursor: pointer; font-size: .9375rem; font-weight: 600; padding-block: 10px; color: var(--ink); }
.framing-options > summary { min-height: 44px; cursor: pointer; font-size: .875rem; color: var(--accent); font-weight: 600; padding-block: 10px; }
.framing-options[open] { padding-bottom: 8px; }
.save-bar { background: var(--ok-soft); border: 1px solid #cce6d6; padding: 14px; }
.save-bar .stage-title { font-size: .9375rem; }
.save-note { line-height: 1.6; }
.cond-context { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface-2); border-radius: 12px; margin-bottom: 14px; min-width: 0; }
.cond-context img { width: 48px; height: 48px; object-fit: contain; background: var(--checker); border-radius: 6px; flex: none; }
.cond-context > div { min-width: 0; }
.context-name { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.quick-specs { padding-block: 14px; border-top: 1px solid var(--line); }
.quick-specs h3 { font-size: .9375rem; margin-bottom: 4px; }
.starter-rail { display: flex; gap: 10px; padding: 8px 2px; }
.starter { flex: 0 0 78%; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px 8px; cursor: pointer; }
.starter > .icon { grid-row: 1 / 3; align-self: center; width: 26px; height: 26px; color: var(--accent); }
.starter-title { font-size: .9375rem; font-weight: 600; }
.starter-hint { font-size: .8125rem; color: var(--muted); }
.specs { border-top: 1px solid var(--line); padding: 0; background: transparent; }
.specs-head { margin-top: 4px; }
.preset-list { display: flex; flex-wrap: nowrap; gap: 12px; padding: 6px 2px; }
.preset-list > .preset { flex: 0 0 88%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.preset-apply { min-width: 0; }
.about { margin-top: 16px; }
@media (min-width: 900px) {
  .workspace { grid-template-columns: minmax(0,1fr) 360px; }
  .views.is-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cond-context { padding: 8px 10px; margin-bottom: 10px; }
}
@media (max-width: 899px) {
  .work { padding-top: 12px; }
  .steps { gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
  .step { border: 0; background: transparent; border-radius: 0; box-shadow: none !important; padding: 6px 4px; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; }
  .step[aria-current="step"] { background: transparent; border-bottom: 3px solid var(--accent); }
  .step-s { display: none; }
  .step-t { font-size: .8125rem; }
  .stage-col { padding: 14px; }
  .stage-col .strip-head { margin-bottom: 6px; }
  .stage-body { gap: 14px; }
  .preview-rail.is-pair { display: flex; overflow-x: auto; padding: 12px; margin-inline: -14px; width: calc(100% + 28px); }
  .preview-rail.is-pair > .view { flex: 0 0 94%; display: grid; grid-template-columns: minmax(0,1fr); align-items: start; justify-items: center; }
  .preview-rail.is-pair .frame { width: 100%; display: grid; place-items: center; }
  .preview-rail.is-pair .view-img { width: auto; height: auto; max-width: 100%; max-height: 46dvh; object-fit: contain; }
  /* Source crop/pad overlays must share the actual image's aspect ratio, including tall inputs. */
  .preview-rail.is-pair .view-src .frame { width: auto; display: inline-block; }
  .preview-rail.is-pair .view-src .view-img { width: auto; height: auto; }
  .preview-rail.is-pair .view-src .pad-place .view-img { width: 100%; height: 100%; max-height: none; max-width: none; }
  .preview-marks { margin-top: -8px; }
  .save-text { flex: 1 1 100%; }
  .save-bar .btn-save { width: 100%; }
  .cond-card { padding: 16px; }
  .cond-scroll > .start-area { padding-block: 12px 16px; }
  .top-in { gap: 0 8px; }
  .starter { flex-basis: 78%; }
}
@media (max-width: 559px) {
  .landing { padding-top: 28px; padding-bottom: 24px; gap: 28px; }
  .eyebrow { margin-bottom: 12px; }
  .landing h1 { font-size: 2rem; }
  .pick { gap: 10px; }
  .pick .btn-lg { width: 100%; }
  .pick-note { font-size: .8125rem; }
  .ask { margin-top: 24px; }
  .task { padding: 12px 10px; gap: 6px; }
  .task-t { font-size: .875rem; }
  .sample { flex-basis: 88%; }
  .strip-h { font-size: .9375rem; }
  .stage-col { border-radius: 16px; }
  .badge { white-space: normal; }
}

@media (max-width: 360px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .stage-col, .cond-card { padding: 12px; }
  .views { padding: 10px; }
  .anchor-grid { grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .spinner { border-color: var(--accent); opacity: 0.6; }
}
@media (forced-colors: active) {
  .badge, .btn, .opt, .task, .sample, .tab, .cell, .step { border: 1px solid CanvasText; }
  .opt:has(input:checked), .tab:has(input:checked), .cell:has(input:checked), .item.is-active .item-select { outline: 2px solid Highlight; }
  .keep { outline: 2px solid Highlight; }
}

/* ADS1 Design Refresh · precise, quiet image workbench. Existing functional selectors retained. */
:root {
 --paper:#f7f9f6; --surface:#fff; --surface-2:#f3f6f2; --well:#edf2ed;
 --ink:#20382e; --text:#3f5149; --muted:#607168; --line:#dfe6de; --line-strong:#bfcfc2;
 --accent:#236d53; --accent-hover:#17513d; --accent-soft:#eaf3eb; --focus:#237455;
 --ok:#23684b; --ok-soft:#edf5ee; --radius:16px; --radius-md:10px; --radius-sm:7px;
 --shadow:0 4px 20px #243c2d04;
 --checker:repeating-conic-gradient(#e6ece5 0% 25%,#f9fbf8 0% 50%) 0 0/16px 16px;
}
body {font-size:15px;letter-spacing:-.015em; background:var(--paper)}
.wrap {max-width:1328px;padding-inline:40px}
.top {background:#fff;border-bottom:1px solid var(--line)}
.top-in {min-height:76px;gap:24px}
.brand {gap:9px;margin-right:28px}
.brand-mark {width:34px;height:34px;padding:5px;background:var(--accent);color:#fff;border-radius:9px}
.brand-word {font-weight:750;font-size:25px;letter-spacing:-1.2px;color:var(--ink);display:flex;align-items:baseline}
.brand-word>span {font-weight:400}
.brand-word i {font-size:9px;font-style:normal;letter-spacing:1.8px;margin-left:9px;color:var(--muted);font-weight:600}
.appnav {gap:12px}
.appnav-btn {font-size:14px;min-height:44px;padding:8px 6px}
.appnav-btn[aria-current=page] {color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
.langs {gap:0}
.langs a {font-size:12px;min-height:44px;padding:5px 9px}
.btn {font-size:14px;font-weight:650;letter-spacing:-.015em}
.btn-primary {box-shadow:0 3px 5px #1b5a3f12}
.btn-ghost {border-color:var(--line)}
.btn-lg {padding:14px 32px;min-height:52px;border-radius:9px}
.eyebrow {font-size:11px;letter-spacing:.08em;line-height:1.4;color:var(--accent);margin:0 0 14px;font-weight:650}
.status-dot {width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px #e5eee5;margin-right:4px}
.landing {display:block;padding-top:48px;padding-bottom:38px}
.landing-heading {margin-bottom:30px}
.landing h1 {max-width:none;font-size:clamp(30px,3.2vw,42px);line-height:1.22;letter-spacing:-.05em;font-weight:720}
.landing .lede {max-width:50em;font-size:14px;line-height:1.8;margin-top:13px;color:#607168}
.landing-studio {display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:24px;align-items:stretch}
.upload-well {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:324px;padding:24px;border:1px dashed #b6c9b7;border-radius:18px;background:#fff;position:relative}
.upload-well::before {content:'';position:absolute;inset:7px;border:1px solid #f0f3ee;border-radius:13px;pointer-events:none}
.upload-art {width:146px;height:98px;margin-bottom:12px}
.upload-well h2 {font-size:19px;letter-spacing:-.035em}
.upload-sub {font-size:13px;color:var(--muted);margin:7px 0 19px}
.upload-formats {display:flex;gap:12px;font-size:10px;letter-spacing:.1em;color:#63736a;margin-top:13px}
.upload-formats span {color:#bac6bd}
.upload-local {display:flex;align-items:center;gap:5px;color:#63736a;font-size:11px;margin-top:17px}
.upload-local .icon {width:13px;height:13px;color:var(--accent)}
body.is-dragging .upload-well {background:var(--accent-soft);border:2px dashed var(--accent)}
.samples {border:1px solid var(--line);border-radius:18px;background:#fff;padding:18px 18px 8px;min-width:0;align-self:stretch;display:flex;flex-direction:column}
.samples>.ask {font-size:12px;font-weight:600;color:var(--muted);margin:0 0 13px}
.sample-rail {gap:12px;padding:0 0 4px;flex:1}
.sample {border:0;box-shadow:none;background:transparent;padding:0;gap:13px;flex-basis:90%;border-radius:10px;overflow:hidden}
.sample:hover {background:var(--surface-2)}
.sample-img {border-radius:9px;aspect-ratio:1.92}
.sample-text {padding:0 2px;gap:4px}
.sample-t {font-size:14px;font-weight:650}
.sample-d {font-size:12px;line-height:1.5}
.samples-note {font-size:10px;margin:0 0 4px;color:#63736a;line-height:1.5}
.rail-marks {min-height:44px}
.rail-mark {min-width:44px;min-height:44px}
.rail-mark.named {min-height:44px;padding-inline:22px;font-size:13px}
.sample-rail .sample-img img {object-fit:cover}
.section-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:30px 0 13px}
.section-heading h2 {font-size:14px;letter-spacing:-.02em}
.section-heading>span {font-size:11px;color:var(--muted)}
.tasks {gap:12px}
.task {display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:'ic t' 'ic d';gap:3px 13px;padding:17px 19px;min-height:88px;border-radius:12px;background:#fff;text-align:left}
.task-ic {width:39px;height:39px;padding:9px;border-radius:10px;background:var(--surface-2)}
.task-t {font-size:14px;line-height:1.4}
.task-d {font-size:11px;line-height:1.5}
.task:hover {border-color:#8dae99;background:#fcfefb}
.work {padding-top:25px}
.work-heading {display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}
.work-heading .eyebrow {font-size:9px;letter-spacing:.16em;margin-bottom:7px}
.work-heading h1 {font-size:25px;font-weight:700;letter-spacing:-.04em}
.work-privacy {display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.work-privacy .icon {color:var(--accent);width:15px;height:15px}
.stage-col {padding:19px;border-radius:15px;box-shadow:none}
.strip-head {padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.strip-h {font-size:13px;font-weight:600;color:var(--muted)}
.list-count {font-size:11px}
.strip {margin-bottom:16px}
.items {gap:8px;padding:2px}
.items .item {border-radius:8px}
.strip-add {border-radius:8px}
.stage-head {padding-top:7px}
.stage-name {font-size:14px;font-weight:650}
.badge {font-size:10px;padding:5px 9px;letter-spacing:0}
.views {padding:20px;border-radius:10px;background:var(--well);border:1px solid #e4ebe1;min-height:300px;align-items:center}
.view {gap:12px}
.view .meta {font-size:11px;letter-spacing:.01em}
.view-img {max-height:52dvh}
.frame {box-shadow:0 3px 14px #263b2914}
.btn-view {background:#fff;border:1px solid #c2d2c4;color:var(--accent);border-radius:8px;min-height:44px}
.result-facts {padding:6px 0;gap:12px}
.byte-heading strong {font-size:25px;letter-spacing:-.035em}
.fact-chips {gap:16px}
.fact-chips>span {font-size:12px}
.byte-track {height:4px}
.save-bar {padding:16px;border-radius:10px;border-color:#d7e5d9;background:#f3f8f2}
.save-note {font-size:11px}
.cond-card {border-radius:15px;box-shadow:none;padding:20px}
.cond-h {font-size:15px;margin-bottom:15px;letter-spacing:-.025em}
.task-tabs {gap:2px;padding:4px;background:#f2f5f0;border:0;border-radius:9px}
.tab {font-size:12px;min-width:0}
.tab span {padding:9px 6px;min-height:39px}
.tab:has(input:checked) {background:#fff;border-color:transparent;box-shadow:0 1px 4px #213e2910;border-radius:6px}
.task-help {font-size:11px;line-height:1.6;margin-top:10px}
.label {font-size:13px}
.sublabel {font-size:11px}
.input,.select {border-color:#d5dfd2;border-radius:8px;min-height:45px;font-size:15px;background:#fff}
.group {padding-block:18px}
.hint,.help {font-size:11px;line-height:1.65}
.cond-context {background:transparent;border:1px solid var(--line);border-radius:8px;padding:9px;gap:9px}
.cond-context img {width:36px;height:36px}
.context-name {font-size:11px}
.quick-specs {padding-block:14px}
.quick-specs h3 {font-size:12px}
.starter {border-radius:8px;padding:10px;flex-basis:87%;background:#f7faf5}
.starter-title {font-size:12px}.starter-hint {font-size:10px}
.target {background:#f4f7f1;border-color:#e1e9dc;border-radius:8px}
.target-h {font-size:11px}.target-list {font-size:11px}
.specs>summary,.result-checks>summary {font-size:12px;min-height:44px}
.about {border-top:1px solid var(--line);margin-top:18px;padding-top:30px}
.how h2,.help-sec h2,.privacy-sec h2 {font-size:14px}
.how-list {gap:24px}.how-t {font-size:12px}.how-d {font-size:11px}
.help-sec summary {font-size:12px}.help-sec p,.privacy-sec p {font-size:11px}
.in-work .how {display:none}
.footer {background:transparent;font-size:10px}
.compare {border-radius:15px}.cmp-head {padding-bottom:13px;border-bottom:1px solid var(--line)}
@media(min-width:900px){
 .workspace {grid-template-columns:310px minmax(0,1fr);gap:22px}
 .cond-col {grid-column:1;grid-row:1;top:20px}
 .stage-col {grid-column:2;grid-row:1}
 .cond-scroll {margin-inline:-20px;padding-inline:20px}
 .cond-card {max-height:calc(100dvh - 180px)}
 .start-area {margin-inline:-20px;margin-bottom:-20px;padding:14px 20px 16px;background:#fff;border-radius:0 0 15px 15px}
 .views.is-pair {grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;min-height:310px}
 .views.is-pair .view-img {max-height:46dvh}
 .view-res {align-self:center}
}
@media(max-width:899px){
 .wrap {padding-inline:22px}
 .top-in {gap:10px;min-height:66px}
 .brand {margin-right:auto}
 .brand-word {font-size:23px}.brand-word i {font-size:8px}
 .appnav {margin-right:0;gap:8px}
 .langs {flex-basis:100%;justify-content:flex-end;margin-left:0;border-top:1px solid #eff2ec}
 .langs a {min-height:34px;font-size:10px;padding:4px 12px}
 .landing {padding-top:30px}
 .landing-studio {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
 .landing .lede {font-size:13px}
 .landing h1 {font-size:33px}
 .upload-well {min-height:310px;padding:20px 14px}
 .upload-well h2 {font-size:17px}
 .task {grid-template-columns:30px minmax(0,1fr);gap:4px 9px;padding:14px 10px}
 .task-ic {width:30px;height:30px;padding:7px}
 .work-heading {margin-bottom:17px}
 .work-heading h1 {font-size:22px}
 .work-privacy {font-size:10px}
 .steps {position:sticky;top:0;z-index:3;background:var(--paper);margin-bottom:15px}
 .step {min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 3px}
 .step-n {display:inline-grid;width:20px;height:20px;font-size:10px}
 .step-t {font-size:12px}
 .stage-col {padding:15px}
 .preview-rail.is-pair {padding:16px;margin-inline:-15px;width:calc(100% + 30px);min-height:0;gap:14px}
 .preview-rail.is-pair>.view {flex-basis:94%;gap:12px}
 .preview-rail.is-pair .view-img {max-height:48dvh}
 .views:not(.is-pair) {min-height:250px}
 .save-bar .btn-save {min-height:48px}
 .cond-card {padding:20px}
 .cond-scroll>.start-area {padding:14px 0 19px}
 .result-facts .hint {font-size:11px}
}
@media(max-width:559px){
 .wrap {padding-inline:18px}
 .top-in {padding-top:8px;padding-bottom:0;gap:0 12px;min-height:0}
 .brand {min-height:44px;margin-right:auto;gap:7px}
 .brand-word i {display:none}.brand-mark {width:29px;height:29px;border-radius:7px}
 .appnav-btn {min-height:44px;font-size:11px;padding:4px 3px}
 .langs {justify-content:flex-start;margin-top:5px}
 .langs a {min-height:33px;padding-inline:10px}
 .landing {padding-top:27px;padding-bottom:20px}
 .landing-heading {margin-bottom:23px}
 .eyebrow {font-size:10px;margin-bottom:12px}
 .landing h1 {font-size:31px;line-height:1.3;max-width:11em;letter-spacing:-.045em}
 .landing .lede {font-size:12px;margin-top:12px;line-height:1.8}
 .landing-studio {grid-template-columns:minmax(0,1fr);gap:22px}
 .upload-well {min-height:280px;padding:23px 20px 18px}
 .upload-art {width:120px;height:80px;margin-bottom:8px}
 .upload-well h2 {font-size:17px}
 .upload-sub {font-size:11px;margin:6px 0 16px}
 .upload-well .btn {width:100%;min-height:49px}
 .upload-local {margin-top:12px;font-size:10px}
 .upload-formats {margin-top:10px}
 .samples {padding:15px 14px 8px}
 .samples>.ask {font-size:11px;margin-bottom:10px}
 .sample {flex-basis:90%}.sample-img {aspect-ratio:1.8}
 .samples-note {font-size:9px}
 .section-heading {margin-top:24px}.section-heading>span {display:none}
 .tasks {grid-template-columns:minmax(0,1fr);gap:8px}
 .task {grid-template-columns:39px minmax(0,1fr);padding:13px 15px;min-height:76px;gap:2px 13px}
 .task-ic {width:37px;height:37px;padding:9px}
 .task-t {font-size:13px}.task-d {font-size:11px}
 .work {padding-top:18px}
 .work-heading {gap:12px;margin-bottom:14px}
 .work-heading .eyebrow {font-size:8px;margin-bottom:6px}
 .work-heading h1 {font-size:21px}
 .work-privacy {font-size:9px;max-width:110px;line-height:1.5}
 .stage-col {padding:13px;border-radius:12px}
 .strip-head {gap:5px;padding-bottom:9px}
 .list-tools {gap:4px}.list-tools .btn {font-size:10px;padding:4px 7px}
 .stage-name {font-size:12px;flex-basis:55%}
 .preview-rail.is-pair {margin-inline:-13px;width:calc(100% + 26px);padding:13px;gap:12px}
 .view .meta {font-size:10px}
 .cond-card {border-radius:12px;padding:17px}
 .cond-h {font-size:14px}.cond-context {margin-bottom:12px}
 .task-tabs .tab span {font-size:11px;padding-inline:5px}
 .fact-chips>span {font-size:11px}.fact-chips {gap:11px}
 .save-bar {padding:13px}.byte-heading strong {font-size:24px}
 .about {padding-top:22px}.info-grid {gap:22px}
 .how-list {gap:14px}
 .compare {padding:13px}
}


/* Explicit submission requirements and repeat-use workflow. */
.landing {padding-top:32px}.landing-heading {margin-bottom:22px}.landing h1 {font-size:clamp(29px,3vw,40px)}
.value-conditions {margin-bottom:15px}.value-condition-head {display:flex;gap:18px;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.value-condition-head h2 {font-size:13px}.value-condition-head p {font-size:11px;color:var(--muted);max-width:44em}
.value-starters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.value-spec-card {display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto auto;text-align:left;gap:3px 10px;padding:13px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;min-height:95px}
.value-spec-card>.icon {grid-row:1/4;color:var(--accent);align-self:center;width:24px;height:24px}.value-spec-title {font-size:14px;font-weight:700;color:var(--ink)}
.value-spec-desc {font-size:11px;color:var(--muted)}.value-spec-action {font-size:11px;color:var(--accent);margin-top:4px;font-weight:600}
.value-spec-card:hover {border-color:var(--accent);background:var(--accent-soft)}
.value-repeat {display:flex;justify-content:space-between;gap:20px;align-items:center;padding:12px 16px;margin-bottom:20px;background:#edf3e9;border-radius:10px;border:1px solid #dce7d6}
.value-repeat strong {font-size:13px}.value-repeat p {font-size:11px;color:var(--muted);margin-top:3px}.value-repeat>.btn {flex:none;font-size:12px;min-height:44px}
.value-demo {margin-top:10px;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.value-honesty {font-size:11px;color:var(--muted);margin-top:15px;line-height:1.7}
@media(max-width:559px){
 .landing {padding-top:22px}.landing h1 {font-size:28px}.landing .lede {font-size:12px}
 .value-condition-head {display:block}.value-condition-head p {font-size:10px;line-height:1.6;margin-top:5px}
 .value-starters {gap:6px}.value-spec-card {display:flex;flex-direction:column;gap:6px;padding:11px 9px;min-height:128px}
 .value-spec-card>.icon {align-self:flex-start;width:20px;height:20px}.value-spec-title {font-size:12px;line-height:1.5}.value-spec-desc {font-size:10px;line-height:1.6}.value-spec-action {font-size:10px;margin-top:auto}
 .value-repeat {gap:10px;padding:12px;align-items:flex-start;flex-wrap:wrap}.value-repeat strong {font-size:12px}.value-repeat p {font-size:10px}.value-repeat>.btn {width:100%;font-size:12px}
 .value-repeat {margin-bottom:18px}.upload-well {min-height:270px}.upload-art {width:100px;height:65px}.value-demo {font-size:11px}
}

.example-confirm {width:min(460px,calc(100vw - 32px));padding:25px;border:1px solid var(--line);border-radius:15px;color:var(--text);background:#fff;box-shadow:0 20px 80px #14332130}
.example-confirm::backdrop {background:#19372d66}.example-confirm h2 {font-size:18px;margin-bottom:12px}.example-confirm p {font-size:14px;line-height:1.8}.example-confirm>div {display:flex;justify-content:flex-end;gap:10px;margin-top:24px;flex-wrap:wrap}.example-confirm .btn {min-height:46px}