:root {
  color-scheme:light;
  --page:#f7f8fc;
  --surface:#fff;
  --ink:#18213a;
  --muted:#68738b;
  --line:#e6e9f2;
  --accent:#5046e5;
  --accent-dark:#4036cc;
  --accent-soft:#f0efff;
  --green:#147357;
  --red:#ae3544;
  --radius:18px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-size:14px;
  line-height:1.55
}

button,input,select {
  font:inherit
}

button,a,input,select,summary,[tabindex] {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed
}

a {
  color:inherit;
  text-decoration:none
}

button {
  color:inherit
}

svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #a29bff;
  outline-offset:4px
}

button {
  border:0
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  line-height:1.2;
  letter-spacing:-.025em
}

button:disabled {
  opacity:.48
}

button[hidden],[hidden] {
  display:none!important
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  z-index:20;
  left:20px;
  top:-80px;
  background:var(--ink);
  color:white;
  padding:10px 16px;
  border-radius:8px
}

.skip-link:focus {
  top:15px
}

.site-header {
  max-width:1440px;
  margin:auto;
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 56px;
  border-bottom:1px solid var(--line);
  gap:25px
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.045em
}

.brand-symbol {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border-radius:10px;
  background:var(--accent);
  color:white
}

.brand-symbol svg {
  width:28px;
  height:28px
}

.header-nav {
  display:flex;
  align-items:center;
  gap:29px
}

.nav-link {
  padding:4px 0;
  background:none;
  color:#525d73;
  font-size:12px;
  font-weight:600
}

.nav-link:hover,.text-button:hover {
  color:var(--accent)
}

.header-tag {
  font-size:11px;
  border-left:1px solid var(--line);
  padding-left:27px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted)
}

.small-dot {
  width:6px;
  height:6px;
  background:#56a48a;
  border-radius:50%;
  display:block
}

main {
  max-width:1240px;
  margin:0 auto;
  padding:0 32px
}

.introduction {
  text-align:center;
  padding:53px 0 35px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:700;
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px
}

.eyebrow>span {
  height:5px;
  width:5px;
  background:var(--accent);
  border-radius:50%
}

h1 {
  font-size:45px;
  letter-spacing:-.052em;
  font-weight:750;
  margin:17px 0 15px
}

.intro-copy {
  font-size:15px;
  color:var(--muted);
  line-height:1.7
}

.mobile-break {
  display:none
}

.service-limits {
  padding:0;
  margin:26px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:27px;
  list-style:none;
  color:#637087;
  font-size:11px
}

.service-limits li {
  display:flex;
  align-items:center;
  gap:5px
}

.service-limits svg {
  width:16px;
  height:16px;
  margin-right:3px;
  color:#828ca0;
  stroke-width:1.5
}

.service-limits strong {
  font-weight:650;
  color:#46536c
}

.workspace {
  display:grid;
  grid-template-columns:minmax(0,1.68fr) minmax(315px,1fr);
  gap:24px;
  align-items:start;
  scroll-margin-top:20px
}

.work-column {
  min-width:0
}

.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 5px 14px #24305b03
}

.panel-heading {
  padding:23px 25px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px
}

.heading-with-step {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}

.step-number {
  border-radius:8px;
  background:#f2f3f8;
  color:#707b92;
  width:25px;
  height:25px;
  display:inline-grid;
  place-items:center;
  font-size:11px;
  font-weight:700;
  flex:none
}

.panel-heading h2 {
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em
}

.text-button {
  background:none;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:600;
  font-size:12px;
  color:var(--accent);
  line-height:1.5
}

.text-button svg {
  width:16px;
  height:16px
}

.text-button.subtle {
  color:var(--muted);
  font-size:11px
}

.text-button.danger {
  color:#a5434f
}

.count-pill {
  font-size:10px;
  background:var(--accent-soft);
  color:var(--accent);
  padding:2px 7px;
  border-radius:20px;
  font-weight:700
}

.drop-zone {
  margin:0 24px 23px;
  border:1.5px dashed #d6d9e9;
  background:linear-gradient(150deg,#fbfbff,#f8f9fd);
  border-radius:12px;
  text-align:center;
  padding:32px 20px 28px;
  cursor:pointer;
  transition:background .15s,border-color .15s
}

.drop-zone:hover,.drop-zone.dragging {
  border-color:var(--accent);
  background:#f2f1ff
}

.drop-zone.dragging {
  box-shadow:inset 0 0 0 2px #b7b1ff
}

.upload-art {
  width:126px;
  height:108px;
  position:relative;
  margin:0 auto 21px
}

.art-file {
  position:absolute;
  display:block;
  top:15px;
  width:68px;
  height:80px;
  border-radius:9px;
  box-shadow:0 5px 13px #31335008
}

.art-file-back {
  background:#efeff9;
  border:1px solid #dedff0;
  left:14px;
  transform:rotate(-13deg);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:10px;
  color:#a2a4bd;
  font-size:8px;
  font-weight:750;
  letter-spacing:.06em
}

.art-file-front {
  background:white;
  border:1px solid #dddff2;
  left:45px;
  transform:rotate(9deg);
  color:#9a95e7;
  padding:11px 10px 8px
}

.art-file-front svg {
  width:46px;
  height:40px;
  stroke-width:1.4
}

.art-file-front>span {
  font-size:8px;
  letter-spacing:.08em;
  font-weight:700;
  color:#8b87bb;
  display:block;
  margin-top:1px
}

.art-plus {
  position:absolute;
  display:grid;
  place-items:center;
  right:3px;
  bottom:5px;
  width:29px;
  height:29px;
  border:3px solid #f8f9fd;
  border-radius:50%;
  background:var(--accent);
  color:white;
  box-shadow:0 3px 10px #5046e526
}

.art-plus svg {
  width:17px;
  height:17px;
  stroke-width:1.7
}

.drop-zone h3 {
  font-size:17px;
  letter-spacing:-.02em
}

.drop-zone>p {
  color:var(--muted);
  font-size:12px;
  margin:6px 0 19px
}

.button {
  min-height:41px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:8px;
  padding:11px 17px;
  font-size:12px;
  line-height:1.3;
  font-weight:650;
  transition:background .15s,transform .15s;
  white-space:nowrap
}

.button-primary {
  background:var(--accent);
  color:white;
  box-shadow:0 2px 4px #5046e514
}

.button-primary:hover:not(:disabled) {
  background:var(--accent-dark)
}

.button:active:not(:disabled) {
  transform:translateY(1px)
}

.button svg {
  width:17px;
  height:17px;
  stroke-width:1.8
}

.button-secondary {
  background:white;
  border:1px solid var(--line);
  color:#515d75
}

.button-secondary:hover:not(:disabled) {
  background:#f7f8fc
}

.drop-zone>p.drop-hint {
  font-size:10px;
  margin:15px 0 0;
  color:#9098ac
}

.files-panel-note {
  border-top:1px solid var(--line);
  padding:14px 23px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#7b859a;
  font-size:10px;
  background:#fdfdff;
  border-radius:0 0 18px 18px
}

.files-panel-note svg {
  width:14px;
  height:14px;
  color:#8b95aa
}

.how-it-works {
  margin:27px 5px 15px;
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto 1fr;
  column-gap:8px;
  align-items:start
}

.how-number {
  font-size:10px;
  color:#9aa3b7;
  letter-spacing:.025em;
  margin-top:1px
}

.how-it-works strong {
  font-size:10px;
  font-weight:650;
  color:#637086
}

.how-it-works p {
  font-size:9px;
  color:#939bb0;
  margin-top:4px;
  line-height:1.55
}

.settings-panel {
  overflow:hidden
}

.settings-panel>.panel-heading {
  padding-bottom:20px
}

fieldset {
  border:none;
  margin:0;
  padding:0;
  min-width:0
}

#settings-form {
  padding:0 24px
}

.form-section {
  padding:0 0 23px
}

.field-label {
  font-size:11px;
  display:block;
  color:#46516a;
  font-weight:650;
  line-height:1.6;
  margin-bottom:9px
}

.select-wrap {
  position:relative
}

.select-wrap select {
  width:100%;
  appearance:none;
  border:1px solid #dfe3ef;
  border-radius:8px;
  background:#fff;
  padding:11px 35px 11px 12px;
  color:#35415c;
  font-size:12px;
  line-height:1.5
}

.select-wrap>svg {
  position:absolute;
  right:12px;
  top:13px;
  pointer-events:none;
  width:17px;
  height:17px;
  color:#8490a7
}

.field-help {
  font-size:10px;
  line-height:1.65;
  color:#8992a6;
  margin-top:8px
}

.mode-switch {
  display:flex;
  background:#f3f4f9;
  border:1px solid #eceef6;
  border-radius:9px;
  padding:4px;
  gap:3px
}

.mode-option {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:6px;
  background:none;
  padding:10px 5px;
  gap:3px
}

.mode-option strong {
  font-size:11px;
  font-weight:650;
  color:#4f5b78
}

.mode-option span {
  font-size:9px;
  color:#949bb0
}

.mode-option.active {
  background:white;
  box-shadow:0 1px 4px #2a326010;
  border-color:#e9e8f6
}

.mode-option.active strong {
  color:var(--accent)
}

.mode-option.active span {
  color:#867fd1
}

.quality-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px
}

.quality-label .field-label {
  margin:0
}

.quality-label output {
  font-size:12px;
  color:var(--accent);
  font-weight:700
}

.quality-label output span {
  font-size:10px;
  font-weight:400;
  color:#939bb0
}

input[type=range] {
  width:100%;
  margin:4px 0;
  accent-color:var(--accent);
  height:16px;
  cursor:pointer
}

.range-labels {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#939bb0;
  margin:3px 0 12px
}

.quality-presets {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px
}

.quality-presets button {
  font-size:10px;
  padding:6px 3px;
  background:white;
  border:1px solid #e9ebf3;
  border-radius:6px;
  color:#8992a7
}

.quality-presets button.active {
  background:var(--accent-soft);
  border-color:#dedbff;
  color:var(--accent)
}

.advanced-settings {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 -24px;
  padding:0 24px
}

.advanced-settings>summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  list-style:none;
  padding:16px 0;
  font-size:11px;
  color:#69748b;
  font-weight:600
}

.advanced-settings>summary::-webkit-details-marker {
  display:none
}

.advanced-settings>summary>svg {
  height:16px;
  width:16px;
  transition:transform .2s
}

.advanced-settings[open]>summary>svg {
  transform:rotate(180deg)
}

.advanced-content {
  padding:3px 0 20px
}

.optional-label {
  font-size:9px;
  font-weight:400;
  color:#929bb0;
  margin-left:4px
}

.dimension-fields {
  display:flex;
  align-items:end;
  gap:8px
}

.dimension-fields>div {
  flex:1;
  min-width:0
}

.dimension-fields label {
  display:block;
  color:#7e899f;
  font-size:10px;
  margin-bottom:5px
}

.dimension-cross {
  padding-bottom:10px;
  color:#a0a7b7;
  font-size:15px
}

.unit-field {
  position:relative
}

.unit-field input {
  width:100%;
  min-width:0;
  padding:9px 27px 9px 10px;
  border:1px solid #e1e5ee;
  border-radius:7px;
  font-size:11px;
  color:#35415c;
  background:#fff
}

.unit-field input::placeholder {
  color:#a4aaba
}

.unit-field input:disabled {
  background:#f7f8fb;
  color:#a4aaba
}

.unit-field span {
  position:absolute;
  right:9px;
  top:10px;
  font-size:10px;
  color:#9aa3b5;
  pointer-events:none
}

.unit-field input::-webkit-inner-spin-button {
  appearance:none
}

.check-option {
  display:flex;
  align-items:flex-start;
  gap:9px;
  cursor:pointer;
  margin-top:21px
}

.check-option input {
  accent-color:var(--accent);
  width:14px;
  height:14px;
  flex:none;
  margin:1px 0 0
}

.check-option strong {
  font-size:10px;
  display:block;
  color:#5d6980;
  font-weight:600
}

.check-option small {
  font-size:9px;
  color:#949bb0;
  line-height:1.6;
  display:block;
  margin-top:3px
}

.background-setting {
  margin-top:21px
}

.background-setting .field-label {
  font-size:10px
}

.color-field {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #e1e5ee;
  border-radius:7px;
  color:#78839a;
  font-size:10px
}

.color-field input {
  height:23px;
  width:25px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer
}

.color-field input::-webkit-color-swatch-wrapper {
  padding:0
}

.color-field input::-webkit-color-swatch {
  border:1px solid #dfe3ef;
  border-radius:4px
}

.color-label {
  font-size:8px;
  color:#a1a7b8;
  margin-left:auto
}

.convert-action {
  padding:20px 0 16px
}

.button-wide {
  width:100%;
  justify-content:space-between;
  padding:13px 15px;
  min-height:44px
}

.convert-action>p {
  font-size:9px;
  color:#969eb1;
  text-align:center;
  margin-top:9px
}

.assurances {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  border-top:1px solid var(--line);
  padding:34px 16px 36px;
  margin-top:36px
}

.assurances>div {
  display:flex;
  align-items:flex-start;
  gap:14px
}

.assurances>div>svg {
  width:23px;
  height:23px;
  color:#8994b1;
  margin-top:1px;
  stroke-width:1.3
}

.assurances h2 {
  font-size:12px;
  letter-spacing:-.01em;
  font-weight:650;
  color:#65718a;
  margin:0 0 7px
}

.assurances p {
  font-size:10px;
  color:#8c95a9;
  line-height:1.75;
  max-width:390px
}

.assurances .text-button {
  margin-top:8px;
  font-size:10px;
  font-weight:500
}

.site-footer {
  max-width:1328px;
  margin:auto;
  min-height:78px;
  padding:22px 30px;
  display:flex;
  align-items:center;
  gap:22px;
  border-top:1px solid var(--line);
  color:#a0a7b9
}

.footer-brand {
  font-size:11px;
  font-weight:750;
  letter-spacing:-.025em;
  color:#7e879d
}

.site-footer p {
  font-size:10px
}

.site-footer .nav-link {
  font-size:10px;
  margin-left:auto;
  color:#8a94a8;
  font-weight:400
}

.global-alert {
  background:#fff1f2;
  border:1px solid #f4d9de;
  border-radius:10px;
  color:#a13a48;
  padding:12px 16px;
  font-size:12px;
  margin-bottom:20px;
  overflow-wrap:anywhere
}

.convert-action .global-alert {
  margin-bottom:14px;
  text-align:left
}

.cancel-preparation {
  width:100%;
  margin-top:10px
}

.file-list {
  padding:0 24px;
  max-height:560px;
  overflow-y:auto
}

.file-row {
  display:flex;
  gap:12px;
  align-items:center;
  padding:15px 0;
  border-top:1px solid #eef0f6;
  position:relative
}

.file-row:first-child {
  border-top:none;
  padding-top:3px
}

.file-thumbnail {
  width:45px;
  height:45px;
  flex:none;
  border:1px solid #e8eaf2;
  border-radius:8px;
  overflow:hidden;
  background:repeating-conic-gradient(#f0f1f6 0 25%,white 0 50%) 0 0/12px 12px;
  display:grid;
  place-items:center;
  color:#959db0
}

.file-thumbnail img {
  width:100%;
  height:100%;
  object-fit:cover
}

.file-thumbnail svg {
  width:23px;
  height:23px;
  stroke-width:1.3
}

.file-information {
  flex:1;
  min-width:0
}

.file-name {
  font-size:11px;
  font-weight:600;
  color:#49546d;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
  display:block
}

.file-meta {
  color:#969eb1;
  font-size:9px;
  margin-top:3px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center
}

.file-result-size {
  font-weight:650;
  color:#52617a
}

.file-gain {
  color:var(--green);
  font-weight:650
}

.file-gain.negative {
  color:#9b6d37
}

.file-actions {
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
  flex:none
}

.icon-button {
  display:inline-grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:7px;
  background:none;
  color:#a2a9bb;
  flex:none
}

.icon-button:hover {
  background:#f1f0ff;
  color:var(--accent)
}

.icon-button svg {
  width:16px;
  height:16px
}

.file-error {
  font-size:10px;
  color:var(--red);
  margin-top:5px;
  line-height:1.6;
  overflow-wrap:anywhere
}

.file-warning {
  font-size:9px;
  color:#9a753d;
  margin-top:5px;
  line-height:1.5;
  overflow-wrap:anywhere
}

.file-status {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap
}

.file-state {
  font-size:9px;
  color:#8e98ac;
  white-space:nowrap
}

.file-state.error {
  color:var(--red)
}

.file-state.success {
  color:var(--green)
}

.mini-spinner {
  width:12px;
  height:12px;
  border-radius:50%;
  border:1.5px solid #e2e0ff;
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
  display:inline-block;
  flex:none
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }

}

.upload-progress {
  height:3px;
  background:#f0f1f7;
  border-radius:3px;
  margin-top:7px;
  overflow:hidden
}

.upload-progress>span {
  display:block;
  height:100%;
  width:0;
  background:var(--accent);
  border-radius:3px;
  transition:width .15s
}

.add-files-row {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:17px 24px 22px;
  border-top:1px solid #eef0f6;
  margin-top:6px
}

.add-files-row>span {
  font-size:10px;
  color:#939db0
}

.drop-zone.compact {
  margin-bottom:17px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:70px
}

.drop-zone.compact .upload-art,.drop-zone.compact h3,.drop-zone.compact>p {
  display:none
}

.drop-zone.compact .select-files-label {
  background:none;
  color:var(--accent);
  box-shadow:none;
  min-height:30px;
  padding:4px
}

.drop-zone.locked {
  pointer-events:none;
  opacity:.5
}

.job-panel {
  margin-top:20px;
  overflow:hidden
}

.job-panel .panel-heading {
  padding-bottom:18px
}

.status-pill {
  font-size:9px;
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:20px;
  padding:4px 9px;
  white-space:nowrap
}

.status-pill.success {
  color:var(--green);
  background:#eaf5ef
}

.status-pill.error {
  color:var(--red);
  background:#fcf0f1
}

.job-progress-area {
  padding:0 25px 8px;
  display:flex;
  align-items:center;
  gap:14px
}

.progress-details { flex:1; min-width:0 }
.upload-ring { position:relative; display:grid; place-items:center; width:58px; height:58px; flex:none; color:var(--accent-dark); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums }
.upload-ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
.upload-ring circle { fill:none; stroke-width:4 }
.upload-ring-track { stroke:#eeedf9 }
.upload-ring-value { stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .15s }

.progress-label {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  color:#828da3;
  margin-bottom:7px
}

progress {
  width:100%;
  appearance:none;
  height:5px;
  border:0;
  border-radius:5px;
  overflow:hidden;
  background:#efeff8;
  color:var(--accent)
}

progress::-webkit-progress-bar {
  background:#efeff8
}

progress::-webkit-progress-value {
  background:var(--accent);
  border-radius:5px
}

progress::-moz-progress-bar {
  background:var(--accent);
  border-radius:5px
}

progress:indeterminate {
  background:linear-gradient(90deg,#efeff8 20%,var(--accent) 50%,#efeff8 80%);
  background-size:200% 100%;
  animation:progress-activity 1.5s ease-in-out infinite
}

progress:indeterminate::-webkit-progress-bar {
  background:transparent
}

progress:indeterminate::-moz-progress-bar {
  background:transparent
}

@keyframes progress-activity {
  from { background-position:100% 0 }
  to { background-position:-100% 0 }
}

.job-message {
  font-size:11px;
  color:#8390a6;
  padding:6px 25px 17px;
  line-height:1.7
}

.expiry-row {
  border-top:1px solid var(--line);
  background:#fdfdff;
  padding:14px 24px;
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  font-size:10px;
  color:#8f98ad
}

.expiry-row svg {
  width:14px;
  height:14px
}

.expiry-row strong {
  font-variant-numeric:tabular-nums;
  color:#687691;
  font-weight:600
}

.expiry-row .text-button {
  margin-left:auto;
  font-size:9px;
  font-weight:500
}

.session-note {
  font-size:9px;
  color:#9ba3b4;
  background:#fdfdff;
  padding:0 24px 14px;
  line-height:1.6
}

.result-summary {
  display:flex;
  align-items:center;
  gap:20px;
  margin:0 25px 16px;
  padding:17px 0;
  border-top:1px solid #f0f1f7;
  border-bottom:1px solid #f0f1f7
}

.result-summary>div {
  display:flex;
  flex-direction:column;
  gap:4px
}

.summary-label {
  font-size:9px;
  color:#939db1
}

.result-summary strong {
  font-size:19px;
  letter-spacing:-.035em;
  font-weight:650
}

.summary-arrow {
  color:#c0c5d3;
  font-size:19px
}

.gain-pill {
  font-size:12px;
  color:var(--green);
  background:#edf7f1;
  padding:6px 9px;
  border-radius:7px;
  margin-left:auto;
  font-weight:650;
  white-space:nowrap
}

.gain-pill.negative {
  color:#9b6d37;
  background:#fbf5e9
}

.result-actions {
  display:flex;
  gap:9px;
  padding:0 25px 21px
}

.result-actions .button {
  font-size:11px;
  min-height:39px
}

dialog {
  background:white;
  border:1px solid #e1e4ee;
  border-radius:20px;
  box-shadow:0 25px 100px #16213d38;
  color:var(--ink);
  max-height:calc(100dvh - 64px);
  padding:28px;
  width:min(830px,calc(100vw - 40px));
  font-size:13px
}

dialog::backdrop {
  background:#19213c70;
  backdrop-filter:blur(5px)
}

.dialog-top {
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:20px
}

.dialog-top .eyebrow {
  justify-content:flex-start;
  font-size:9px;
  letter-spacing:.12em;
  margin-bottom:10px
}

.dialog-top h2 {
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.04em
}

.dialog-close {
  background:#f5f6fa;
  color:#8d96ac;
  width:30px;
  height:30px
}

.info-dialog>p {
  font-size:12px;
  line-height:1.8;
  color:#7b879d
}

.format-table-wrap {
  overflow-x:auto;
  margin:22px 0 12px;
  border:1px solid var(--line);
  border-radius:10px
}

.format-table {
  width:100%;
  border-collapse:collapse;
  text-align:center;
  white-space:nowrap;
  font-size:11px
}

.format-table th {
  font-size:10px;
  color:#8a94aa;
  font-weight:600;
  padding:12px;
  background:#f8f9fc
}

.format-table th:first-child,.format-table td:first-child {
  text-align:left
}

.format-table td {
  padding:11px 12px;
  border-top:1px solid #eff0f6;
  color:#8691a6
}

.format-table td:first-child {
  font-weight:650;
  color:#57647e
}

.format-yes {
  color:var(--green)
}

.format-no {
  color:#b5bccb
}

.info-dialog .dialog-note,.dialog-note {
  color:#99a1b3;
  font-size:10px;
  line-height:1.8;
  margin-top:17px;
  overflow-wrap:anywhere
}

.info-note {
  padding:18px;
  background:#f7f8fc;
  border-radius:10px;
  margin-top:20px;
  color:#7a869d;
  font-size:11px;
  line-height:1.8
}

.info-note strong {
  color:#5c6982;
  font-size:11px
}

.info-note p {
  margin-top:8px
}

.privacy-dialog {
  max-width:660px
}

.privacy-point {
  display:flex;
  gap:17px;
  border-top:1px solid var(--line);
  padding-top:19px;
  margin-top:19px
}

.privacy-point>span {
  font-size:11px;
  color:#aaa5eb;
  font-weight:650;
  padding-top:2px
}

.privacy-point h3 {
  font-size:13px;
  color:#56627d;
  margin-bottom:8px
}

.privacy-point p {
  font-size:11px;
  color:#8791a6;
  line-height:1.8
}

.compare-dialog {
  max-width:1050px;
  width:calc(100vw - 40px)
}

.compare-filename {
  font-size:11px;
  color:#929cb0;
  overflow-wrap:anywhere;
  margin:-5px 0 22px
}

.comparison-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.comparison-grid figure {
  margin:0;
  min-width:0
}

.comparison-grid figcaption {
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
  font-size:12px;
  color:#66738c;
  font-weight:600;
  gap:10px
}

.comparison-grid figcaption>span {
  font-size:10px;
  font-weight:400;
  color:#9ba4b7
}

.comparison-image {
  height:min(56vh,480px);
  min-height:150px;
  border:1px solid var(--line);
  border-radius:10px;
  background:repeating-conic-gradient(#f2f3f7 0 25%,#fff 0 50%) 0 0/20px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  overflow:hidden
}

.comparison-image img {
  width:100%;
  height:100%;
  object-fit:contain
}

.comparison-image p {
  font-size:11px;
  padding:20px;
  line-height:1.8;
  text-align:center;
  max-width:300px;
  background:#ffffffed;
  border-radius:10px;
  color:#8b95aa
}

.toast {
  margin:12px 24px 18px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f7f7fc;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
  overflow-wrap:anywhere
}

.toast.error {
  background:#fcf3f3;
  border-color:#f0d8da;
  color:#973744
}

.processing #settings-fields button,.processing #settings-fields input,.processing #settings-fields select {
  cursor:not-allowed
}

@media(min-width:1500px) {
  .site-header {
    max-width:1500px;
    padding-left:70px;
    padding-right:70px
  }

  main {
    max-width:1280px
  }

  .introduction {
    padding-top:62px;
    padding-bottom:42px
  }

  h1 {
    font-size:49px
  }

  .drop-zone {
    padding-top:43px;
    padding-bottom:36px
  }

  .upload-art {
    margin-bottom:26px
  }

  .site-footer {
    max-width:1420px
  }

}

@media(max-width:1050px) {
  .site-header {
    padding:20px 30px
  }

  .header-nav {
    gap:23px
  }

  .header-tag {
    display:none
  }

  .workspace {
    grid-template-columns:minmax(0,1.35fr) minmax(295px,1fr);
    gap:18px
  }

  main {
    padding:0 25px
  }

  .panel-heading {
    padding-left:20px;
    padding-right:20px
  }

  #settings-form {
    padding:0 20px
  }

  .advanced-settings {
    margin:0 -20px;
    padding:0 20px
  }

  .drop-zone {
    margin-left:20px;
    margin-right:20px;
    padding-left:10px;
    padding-right:10px
  }

  .file-list {
    padding:0 20px
  }

  .how-it-works {
    grid-template-columns:auto 1fr;
    gap:12px 10px;
    max-width:260px;
    margin-top:25px
  }

  .how-it-works p {
    margin-top:2px
  }

  .how-it-works strong {
    font-size:11px
  }

  .how-it-works p {
    font-size:10px
  }

  .file-row {
    gap:9px
  }

  .file-actions {
    gap:0
  }

  .file-thumbnail {
    width:39px;
    height:39px
  }

  .file-name {
    font-size:10px
  }

  .file-meta {
    font-size:8px
  }

  .result-summary {
    gap:12px
  }

  .result-summary strong {
    font-size:17px
  }

  .result-actions {
    flex-wrap:wrap
  }

  .expiry-row .text-button {
    margin-left:21px
  }

  .assurances {
    gap:30px;
    padding-left:5px;
    padding-right:5px
  }

  .comparison-image {
    height:45vh
  }

}

@media(max-width:760px) {
  .site-header {
    min-height:79px;
    padding:17px 22px;
    gap:15px
  }

  .brand {
    font-size:17px;
    gap:9px
  }

  .brand-symbol {
    width:31px;
    height:31px;
    border-radius:8px
  }

  .brand-symbol svg {
    width:25px;
    height:25px
  }

  .header-nav {
    gap:14px
  }

  .header-nav .nav-link {
    font-size:10px
  }

  .header-nav .nav-link:first-child {
    max-width:80px;
    text-align:right;
    line-height:1.5
  }

  .header-nav .nav-link:nth-child(2) {
    display:none
  }

  main {
    padding:0 20px
  }

  .introduction {
    padding:36px 0 27px
  }

  .eyebrow {
    font-size:9px
  }

  h1 {
    font-size:38px;
    margin-top:14px;
    margin-bottom:14px
  }

  .intro-copy {
    font-size:12px
  }

  .service-limits {
    gap:13px;
    flex-wrap:wrap;
    font-size:9px;
    margin-top:21px
  }

  .service-limits li {
    gap:4px
  }

  .service-limits svg {
    width:14px;
    height:14px;
    margin-right:1px
  }

  .workspace {
    display:flex;
    flex-direction:column;
    gap:18px
  }

  .work-column {
    width:100%;
    display:contents
  }

  .files-panel {
    width:100%;
    order:1
  }

  .settings-panel {
    width:100%;
    order:2
  }

  .job-panel {
    width:100%;
    margin:0;
    order:3
  }

  .how-it-works {
    order:4;
    grid-template-columns:auto 1fr auto 1fr auto 1fr;
    max-width:none;
    margin:6px 0 0;
    gap:6px
  }

  .how-it-works strong {
    font-size:9px
  }

  .how-it-works p {
    font-size:8px
  }

  .how-number {
    font-size:8px
  }

  .panel-heading {
    padding-top:20px;
    padding-bottom:20px
  }

  .drop-zone {
    padding:24px 15px
  }

  .upload-art {
    margin-bottom:13px;
    height:100px
  }

  .files-panel-note {
    padding:12px 20px;
    font-size:9px
  }

  .settings-panel>.panel-heading {
    padding-bottom:18px
  }

  .form-section {
    padding-bottom:21px
  }

  .field-label {
    font-size:12px
  }

  .select-wrap select {
    font-size:13px
  }

  .mode-option strong {
    font-size:12px
  }

  .mode-option span {
    font-size:10px
  }

  .field-help {
    font-size:11px
  }

  .quality-presets button {
    font-size:11px;
    padding:8px
  }

  .quality-label output {
    font-size:14px
  }

  .range-labels {
    font-size:10px
  }

  .advanced-settings>summary {
    font-size:12px
  }

  .check-option strong,.background-setting .field-label {
    font-size:11px
  }

  .check-option small {
    font-size:10px
  }

  .dimension-fields label {
    font-size:11px
  }

  .unit-field input {
    font-size:12px
  }

  .color-label {
    font-size:9px
  }

  .button {
    font-size:12px
  }

  .convert-action>p {
    font-size:10px
  }

  .assurances {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:29px;
    padding-top:27px;
    padding-bottom:27px
  }

  .assurances h2 {
    font-size:12px
  }

  .assurances p {
    font-size:11px;
    max-width:none
  }

  .assurances .text-button {
    font-size:11px
  }

  .site-footer {
    margin:0 20px;
    padding:20px 0;
    gap:12px;
    flex-wrap:wrap;
    min-height:95px
  }

  .site-footer p {
    font-size:9px
  }

  .site-footer .nav-link {
    font-size:9px
  }

  .file-name {
    font-size:11px
  }

  .file-meta {
    font-size:9px
  }

  .file-thumbnail {
    width:42px;
    height:42px
  }

  .icon-button {
    width:30px;
    height:32px
  }

  .file-state {
    font-size:9px
  }

  .expiry-row .text-button {
    margin-left:auto
  }

  .job-panel .panel-heading h2 {
    font-size:14px
  }

  .result-summary {
    margin:0 20px 13px;
    gap:15px
  }

  .result-summary strong {
    font-size:20px
  }

  .job-progress-area,.job-message {
    padding-left:20px;
    padding-right:20px
  }

  .result-actions {
    padding-left:20px;
    padding-right:20px
  }

  .job-message {
    font-size:11px
  }

  .comparison-grid {
    grid-template-columns:1fr;
    gap:22px
  }

  .comparison-image {
    height:36vh;
    min-height:190px
  }

  .compare-dialog {
    width:calc(100vw - 24px)
  }

  dialog {
    padding:22px;
    border-radius:15px;
    max-height:calc(100dvh - 28px);
    width:calc(100vw - 24px)
  }

  .dialog-top h2 {
    font-size:21px
  }

  .dialog-top .eyebrow {
    font-size:8px
  }

  .format-table {
    font-size:10px
  }

  .format-table th {
    font-size:9px
  }

  .format-table th,.format-table td {
    padding:10px
  }

  .privacy-point {
    gap:11px
  }

  .privacy-point p {
    font-size:11px
  }

  .privacy-point h3 {
    font-size:12px
  }

}

@media(max-width:390px) {
  .mobile-break {
    display:block
  }

  .desktop-break {
    display:none
  }

  .introduction {
    padding-top:30px
  }

  h1 {
    font-size:36px;
    line-height:1.13
  }

  .intro-copy {
    font-size:11px
  }

  .service-limits {
    gap:8px 13px
  }

  .service-limits li:last-child {
    width:100%;
    justify-content:center
  }

  .brand {
    font-size:15px
  }

  .site-header {
    padding-left:18px;
    padding-right:18px
  }

  .header-nav .nav-link:first-child {
    font-size:9px
  }

  .panel-heading h2 {
    font-size:14px
  }

  .how-it-works {
    grid-template-columns:auto 1fr;
    gap:9px
  }

  .how-it-works strong {
    font-size:10px
  }

  .how-it-works p {
    font-size:9px
  }

  .expiry-row {
    font-size:9px;
    padding-left:20px;
    padding-right:20px
  }

  .expiry-row .text-button {
    margin-left:21px
  }

  .result-summary {
    gap:10px
  }

  .result-summary strong {
    font-size:18px
  }

  .gain-pill {
    font-size:10px
  }

  .file-row {
    gap:8px
  }

  .file-actions {
    flex-direction:column;
    gap:0
  }

  .file-actions .icon-button {
    height:25px
  }

  .file-thumbnail {
    width:37px;
    height:37px
  }

  .site-footer p {
    width:100%;
    order:3
  }

  .site-footer .nav-link {
    margin-left:auto
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }

}

/* Secondary text retains enough contrast for small interface labels. */
.field-help,.drop-zone>p.drop-hint,.files-panel-note,.how-it-works p,.how-number,.range-labels,.quality-presets button,.advanced-settings>summary,.optional-label,.dimension-fields label,.unit-field span,.check-option small,.color-field,.color-label,.convert-action>p,.assurances p,.site-footer,.site-footer p,.site-footer .nav-link,.file-meta,.file-state,.add-files-row>span,.progress-label,.job-message,.expiry-row,.session-note,.summary-label,.info-dialog>p,.info-dialog .dialog-note,.dialog-note,.format-table th,.format-table td,.info-note,.privacy-point p,.compare-filename,.comparison-grid figcaption>span,.comparison-image p {
  color:#68738b
}

.quality-presets button.active,.mode-option.active strong {
  color:var(--accent)
}

.mode-option span {
  color:#59667e
}

.field-help.field-error {
  color:var(--red)
}

.mode-option.active span {
  color:#6b61bf
}

.quality-label output span,.footer-brand {
  color:#68738b
}

.file-state.error {
  color:var(--red)
}

.file-state.success {
  color:var(--green)
}

.unit-field input::placeholder {
  color:#737d94
}

.format-table .format-yes {
  color:var(--green)
}

.format-table .format-no {
  color:#737d94
}

#formats-dialog {
  width: min(1120px, calc(100vw - 40px));
  max-width: 1120px;
}

.format-table {
  min-width: 910px;
}

.format-table th:first-child,
.format-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 1px 0 var(--line);
  max-width: 230px;
  white-space: normal;
}

.format-table th:first-child {
  background: #f8f9fc;
}

.raw-compatibility {
  margin-top: 24px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fcfcff;
}

.raw-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.raw-section-heading h3 {
  font-size: 15px;
  color: #46516a;
}

.raw-section-heading > span {
  font-size: 10px;
  color: var(--muted);
}

.raw-compatibility > p {
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 9px;
}

.raw-compatibility .field-label {
  margin-top: 17px;
  margin-bottom: 6px;
}

#raw-search {
  display: block;
  width: 100%;
  border: 1px solid #dfe3ef;
  border-radius: 8px;
  padding: 11px 12px;
  color: #35415c;
  background: #fff;
  font-size: 12px;
}

#raw-search::placeholder {
  color: #737d94;
}

.raw-camera-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.raw-camera-list li {
  font-size: 11px;
  color: #58657d;
  padding: 9px 12px;
  border-bottom: 1px solid #eff0f6;
  overflow-wrap: anywhere;
}

.raw-camera-list li:nth-child(odd) {
  border-right: 1px solid #eff0f6;
}

.raw-compatibility > .dialog-note {
  font-size: 10px;
  margin-top: 12px;
}

@media (max-width: 760px) {
  #formats-dialog {
    width: calc(100vw - 24px);
  }

  .raw-compatibility {
    padding: 16px;
  }

  .raw-camera-list {
    grid-template-columns: 1fr;
  }

  .raw-camera-list li:nth-child(odd) {
    border-right: 0;
  }
}

/* Safari keeps pinch zoom available; form controls use a readable touch size. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button, .button, summary, select, input[type="checkbox"], input[type="range"] {
  touch-action: manipulation;
}

.apple-file-pickers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px 18px;
  font-size: 11px;
  color: var(--muted);
}

.apple-file-pickers .text-button {
  font-size: 10px;
}

.share-dialog {
  max-width: 580px;
}

.share-filename {
  overflow-wrap: anywhere;
  margin-bottom: 14px;
  font-weight: 600;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(var(--visible-viewport-height, 100dvh) - 32px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (pointer: coarse) {
  .icon-button, .mode-option, .quality-presets button, .text-button, .nav-link,
  .advanced-settings > summary {
    min-height: 44px;
  }

  .icon-button {
    width: 44px;
    min-width: 44px;
  }

  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  input[type="range"] {
    min-height: 32px;
  }

  .file-actions {
    flex-direction: row;
  }

  .file-actions .icon-button {
    height: 44px;
  }

  .file-list {
    -webkit-overflow-scrolling: touch;
  }
}

/* The converter keeps the essential controls on the first screen. */
.compact-tool .site-header {
  max-width:1120px;
  min-height:76px;
  padding:16px 28px
}

.compact-tool main {
  max-width:1120px;
  padding:0 28px
}

.compact-tool .introduction {
  padding:26px 0 20px;
  text-align:left
}

.compact-tool h1 {
  font-size:30px;
  line-height:1.25;
  margin:0 0 8px;
  letter-spacing:-.035em
}

.compact-tool .service-limits {
  justify-content:flex-start;
  gap:9px;
  margin:0;
  font-size:12px;
  flex-wrap:wrap
}

.compact-tool .panel-heading {
  padding:18px 20px
}

.compact-tool .drop-zone {
  margin:0 20px 20px;
  padding:24px 16px;
  background:#fbfbfe
}

.compact-tool .drop-zone h3 {
  margin:0 0 6px;
  font-size:15px
}

.compact-tool .drop-zone>p {
  margin:0 0 14px
}

.compact-tool #settings-form {
  padding:22px 22px 0
}

.compact-tool .form-section {
  padding-bottom:18px
}

.compact-tool .advanced-settings {
  margin:0 -22px;
  padding:0 22px
}

.compact-tool .convert-action {
  padding:18px 0
}

.compact-tool .site-footer {
  max-width:1064px;
  margin:28px auto 0;
  min-height:68px;
  padding:16px 0;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap
}

.compact-tool .site-footer .nav-link {
  margin:0;
  font-size:12px
}

@media (max-width:760px) {
  .compact-tool .site-header {
    min-height:64px;
    padding:12px 20px
  }
  .compact-tool .header-nav .nav-link:first-child {
    max-width:none;
    font-size:13px
  }
  .compact-tool main { padding:0 16px }
  .compact-tool .introduction { padding:22px 0 18px }
  .compact-tool h1 { font-size:27px }
  .compact-tool .panel-heading { padding:16px 18px }
  .compact-tool .drop-zone { margin:0 18px 18px; padding:20px 12px }
  .compact-tool .file-list { max-height:320px }
  .compact-tool #settings-form { padding:18px 18px 0 }
  .compact-tool .advanced-settings { margin:0 -18px; padding:0 18px }
  .compact-tool .site-footer { margin:24px 16px 0; padding:14px 0; gap:8px 20px }
}

@media (max-width: 760px) {
  .site-header {
    padding-top: max(17px, env(safe-area-inset-top, 0px));
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
  }

  main {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  .site-footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }

  dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(var(--visible-viewport-height, 100dvh) - 24px);
  }

  .select-wrap select, .unit-field input, #raw-search {
    font-size: 16px;
  }

  .file-actions {
    flex-direction: row;
  }

  .site-footer .nav-link {
    margin-left: 0;
  }

  .share-actions .button {
    min-height: 44px;
  }
}

@media (max-width: 390px) {
  .header-nav {
    gap: 12px;
  }

  .header-nav .nav-link:first-child {
    max-width: 62px;
  }
}

dialog {
  overflow: auto;
}

@media (pointer: coarse) {
  .select-wrap select, .unit-field input, #raw-search {
    font-size: 16px;
  }
}