/* Calculator presentation shared by annual and monthly pages. */
:root {
  --canvas: #f8f7f2;
  --ink: #173a2c;
  --green: #3e654e;
  --green-dark: #173f2d;
  --border: #d6ded5;
  --shadow: 0 14px 32px rgba(24, 52, 37, 0.07);
}

.app-shell { padding-inline: clamp(16px, 3.5vw, 52px); }
.site-header { position: relative; z-index: 3; }
.brand { font-size: clamp(1.65rem, 2.4vw, 2.4rem); }
.calculator-mode { background: rgba(255, 255, 255, 0.82); }

.main-content {
  position: relative;
  isolation: isolate;
  width: min(1280px, 100%);
  grid-template-rows: minmax(300px, 1fr) auto;
  gap: 16px;
  padding-block: 20px 18px;
}

.landscape-stage { position: relative; isolation: isolate; display: grid; min-width: 0; }


/* Keep the artwork entirely inside the hero, above the calculator. */
body[data-scene="stockholm"] .landscape-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: min(1040px, 100%);
  transform: translateX(-50%);
  pointer-events: none;
  background: url("./scene-cache/727fa61e8d24acb09f24089fbdabcbad6a4f5229aec7bf27077a8bd997d945f3.png") center bottom / min(1040px, 100%) auto no-repeat;
  opacity: 0.94;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 84%, transparent 100%), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 84%, transparent 100%), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}

.result-area { position: relative; z-index: 1; }

.result-value { font-weight: 680; }
.result-change { font-size: clamp(0.8rem, 1.15vw, 1rem); }

.main-content .calculator-bar,
.main-content .calculator-bar.monthly-calculator {
  z-index: 1;
  width: min(100%, 640px);
  max-width: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: stretch;
  column-gap: 10px;
  row-gap: 8px;
  padding: 10px;
  border: 1px solid #cdd9cf;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--shadow);
}

.main-content .calculator-bar .field,
.main-content .calculator-bar.monthly-calculator .field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.main-content .calculator-bar .field:focus-within { background: transparent; box-shadow: none; }
.main-content .calculator-bar .amount-field.has-error { box-shadow: inset 0 -2px var(--danger); }
.main-content .calculator-bar .field label,
.main-content .calculator-bar .field-label,
.main-content .calculator-bar.monthly-calculator .field label,
.main-content .calculator-bar.monthly-calculator .field-label {
  display: flex;
  min-height: 16px;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #46564b;
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.25;
}

.main-content .calculator-bar .field label::before,
.main-content .calculator-bar .field-label::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  border-radius: 0;
  background: currentColor;
  opacity: 0.85;
  vertical-align: baseline;
  -webkit-mask: url("./assets/icons/globe.svg") center / contain no-repeat;
  mask: url("./assets/icons/globe.svg") center / contain no-repeat;
}

.main-content .calculator-bar .amount-field label::before {
  -webkit-mask-image: url("./assets/icons/coins.svg");
  mask-image: url("./assets/icons/coins.svg");
}

.main-content .calculator-bar .year-field label::before,
.main-content .calculator-bar .date-field .field-label::before {
  -webkit-mask-image: url("./assets/icons/calendar.svg");
  mask-image: url("./assets/icons/calendar.svg");
}

.main-content .calculator-bar .country-field { grid-column: 1; grid-row: 1; }
.main-content .calculator-bar .amount-field { grid-column: 3; grid-row: 1; }
.main-content .calculator-bar .year-field:nth-of-type(3),
.main-content .calculator-bar .start-date-field { grid-column: 1; grid-row: 2; }
.main-content .calculator-bar .year-field:nth-of-type(4),
.main-content .calculator-bar .end-date-field { grid-column: 3; grid-row: 2; }

.main-content .calculator-bar .select-wrap,
.main-content .calculator-bar .amount-input-wrap,
.main-content .calculator-bar .date-selects {
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 1px solid var(--border);
  outline-offset: -1px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

.main-content .calculator-bar .select-wrap:focus-within,
.main-content .calculator-bar .amount-input-wrap:focus-within,
.main-content .calculator-bar .date-selects:focus-within { outline-color: var(--green); box-shadow: 0 0 0 2px rgba(62, 101, 78, 0.2); }

.main-content .calculator-bar .select-wrap { display: flex; align-items: center; }
.main-content .calculator-bar .select-wrap::after,
[dir="rtl"] .main-content .calculator-bar .select-wrap::after {
  right: auto;
  left: auto;
  inset-inline-end: 19px;
  width: 8px;
  height: 8px;
  border-color: var(--green-dark);
}

.main-content .calculator-bar .field select,
[dir="rtl"] .main-content .calculator-bar .field select {
  height: 100%;
  min-height: 44px;
  padding-inline: 12px 28px;
  outline: none;
  font-size: 1rem;
  font-weight: 600;
}

.main-content .calculator-bar .country-field .country-flag {
  position: absolute;
  z-index: 1;
  inset-inline-start: 12px;
  top: 50%;
  width: 24px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  pointer-events: none;
  transform: translateY(-50%);
}

.main-content .calculator-bar .country-field select,
[dir="rtl"] .main-content .calculator-bar .country-field select { padding-inline-start: 46px; }

.main-content .calculator-bar .amount-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  padding-inline: 12px;
}

.main-content .calculator-bar .amount-input-wrap input {
  min-height: 44px;
  height: 100%;
  flex: 1 1 0;
  font-size: 1rem;
  font-weight: 600;
}

.main-content .calculator-bar .amount-input-wrap span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: flex-end;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--border);
  color: #46564b;
  font-size: 0.9rem;
  font-weight: 620;
  white-space: normal;
  text-align: end;
}

.main-content .calculator-bar .amount-field.has-long-currency .amount-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
}
.main-content .calculator-bar .amount-field.has-long-currency .amount-input-wrap input { width: 100%; height: 100%; }
.main-content .calculator-bar .amount-field.has-long-currency .amount-input-wrap span {
  max-width: none;
  min-height: 17px;
  justify-self: end;
  padding: 0;
  border: 0;
  font-size: 0.72rem;
  line-height: 1.1;
}

.main-content .calculator-bar .date-selects {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 0;
  overflow: hidden;
}

.main-content .calculator-bar .date-selects .select-wrap {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  border-radius: 0;
  background: transparent;
}

.main-content .calculator-bar .date-selects .select-wrap + .select-wrap,
[dir="rtl"] .main-content .calculator-bar .date-selects .select-wrap + .select-wrap {
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--border);
}

.main-content .calculator-bar .date-selects .select-wrap:focus-within { box-shadow: inset 0 0 0 2px rgba(62, 101, 78, 0.18); }
.main-content .calculator-bar .date-selects select,
[dir="rtl"] .main-content .calculator-bar .date-selects select { padding-inline: 13px 22px; font-size: 0.96rem; }
.main-content .calculator-bar .date-selects .select-wrap::after { inset-inline-end: 12px; width: 6px; height: 6px; }

.main-content .calculator-bar .swap-button,
.main-content .calculator-bar.monthly-calculator .swap-button {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  width: 44px;
  height: 44px;
  margin: 0;
  z-index: 1;
}

.main-content .calculator-bar .swap-button-visual { width: 36px; height: 36px; box-shadow: none; }
.main-content .calculator-bar.monthly-calculator .swap-button svg { transform: none; }

.main-content .calculator-bar .calculate-button,
.main-content .calculator-bar.monthly-calculator .calculate-button {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding-inline: 16px;
  border-radius: 11px;
  background: #3f654e;
  font-size: 1rem;
  font-weight: 680;
}


.main-content .calculator-bar.has-amount-error { row-gap: 54px; }
.main-content .calculator-bar .field-error {
  position: absolute;
  z-index: 2;
  top: calc(100% + 3px);
  right: auto;
  left: 0;
  width: 100%;
  padding: 0;
  background: transparent;
  font-size: 0.72rem;
  line-height: 1.2;
}
[dir="rtl"] .main-content .calculator-bar .field-error { right: 0; left: auto; }

.main-content .calculator-bar.has-expanded-amount .country-field,
.main-content .calculator-bar.has-amount-error .country-field { grid-column: 1; grid-row: 1; }
.main-content .calculator-bar.has-expanded-amount .amount-field,
.main-content .calculator-bar.has-amount-error .amount-field { grid-column: 3; grid-row: 1; }
.main-content .calculator-bar.has-expanded-amount .year-field:nth-of-type(3),
.main-content .calculator-bar.has-amount-error .year-field:nth-of-type(3),
.main-content .calculator-bar.has-expanded-amount .start-date-field,
.main-content .calculator-bar.has-amount-error .start-date-field { grid-column: 1; grid-row: 2; }
.main-content .calculator-bar.has-expanded-amount .year-field:nth-of-type(4),
.main-content .calculator-bar.has-amount-error .year-field:nth-of-type(4),
.main-content .calculator-bar.has-expanded-amount .end-date-field,
.main-content .calculator-bar.has-amount-error .end-date-field { grid-column: 3; grid-row: 2; }
.main-content .calculator-bar.has-expanded-amount .swap-button,
.main-content .calculator-bar.has-amount-error .swap-button { grid-column: 2; grid-row: 2; }
.main-content .calculator-bar.has-expanded-amount .calculate-button,
.main-content .calculator-bar.has-amount-error .calculate-button { grid-column: 1 / -1; grid-row: 3; }

.site-footer { position: relative; z-index: 1; gap: 16px; padding-top: 2px; font-size: 0.74rem; }
.site-footer .footer-note { font-size: 0.8rem; }
.site-footer .footer-nav { gap: 6px 0; }
.site-footer .footer-nav > *::before { content: ""; margin: 0 12px; border-inline-start: 1px solid #bdc9bf; }
.site-footer .footer-nav > *:first-child::before { display: none; }

@media (max-width: 680px) {
  .app-shell { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .header-actions { justify-self: end; flex-wrap: nowrap; }
  [dir="rtl"] .header-actions { justify-self: start; }
  .main-content { grid-template-rows: minmax(270px, 1fr) auto; gap: 12px; padding-block: 10px 16px; }
  .result-area { align-self: center; margin-top: 0; }
  
  
  body[data-scene="stockholm"] .landscape-stage::before {
    background-image: url("./scene-cache/47ae188a517de4b2a1a518b52896da23f256875a1d281bad4a9458f0666748f5.png");
    background-size: 100% auto;
    background-position: center top;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 85%, transparent 100%), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 85%, transparent 100%), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
  .main-content .calculator-bar,
  .main-content .calculator-bar.monthly-calculator {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    column-gap: 6px;
    row-gap: 6px;
    padding: 8px;
    border-radius: 17px;
  }
  .main-content .calculator-bar .field label,
  .main-content .calculator-bar .field-label,
  .main-content .calculator-bar.monthly-calculator .field label,
  .main-content .calculator-bar.monthly-calculator .field-label { min-height: 14px; gap: 5px; font-size: 0.74rem; }
  .main-content .calculator-bar .field label::before,
  .main-content .calculator-bar .field-label::before { width: 15px; height: 15px; flex-basis: 15px; }
  .main-content .calculator-bar .select-wrap,
  .main-content .calculator-bar .amount-input-wrap,
  .main-content .calculator-bar .date-selects { height: 44px; border-radius: 10px; }
  .main-content .calculator-bar .field select,
  [dir="rtl"] .main-content .calculator-bar .field select,
  .main-content .calculator-bar .amount-input-wrap input { font-size: 1rem; }
  .main-content .calculator-bar .field select,
  [dir="rtl"] .main-content .calculator-bar .field select { padding-inline: 10px 20px; }
  .main-content .calculator-bar .country-field select,
  [dir="rtl"] .main-content .calculator-bar .country-field select { padding-inline-start: 32px; }
  .main-content .calculator-bar .country-field .country-flag { inset-inline-start: 8px; width: 20px; height: 15px; }
  .main-content .calculator-bar .select-wrap::after,
  [dir="rtl"] .main-content .calculator-bar .select-wrap::after { inset-inline-end: 10px; width: 6px; height: 6px; }
  .main-content .calculator-bar .amount-input-wrap { padding-inline: 10px; }
  .main-content .calculator-bar .amount-input-wrap span { padding-inline-start: 6px; font-size: 0.75rem; }
  .main-content .calculator-bar .amount-field.has-long-currency .amount-input-wrap span { font-size: 0.65rem; }
  .main-content .calculator-bar .date-selects { grid-template-columns: minmax(0, 1fr) 55px; grid-template-rows: 1fr; }
  .main-content .calculator-bar.monthly-calculator .country-field .select-wrap,
  .main-content .calculator-bar.monthly-calculator .amount-input-wrap,
  .main-content .calculator-bar.monthly-calculator .date-selects { height: 44px; }
  .main-content .calculator-bar .date-selects .select-wrap + .select-wrap,
  [dir="rtl"] .main-content .calculator-bar .date-selects .select-wrap + .select-wrap { border-inline-start: 1px solid var(--border); border-block-start: 0; }
  .main-content .calculator-bar .date-selects select,
  [dir="rtl"] .main-content .calculator-bar .date-selects select { min-height: 44px; padding-inline: 7px 15px; font-size: 0.85rem; }
  .main-content .calculator-bar .date-selects .select-wrap::after { inset-inline-end: 6px; width: 5px; height: 5px; }
  .main-content .calculator-bar .swap-button,
  .main-content .calculator-bar.monthly-calculator .swap-button { width: 44px; height: 44px; }
  .main-content .calculator-bar.monthly-calculator .swap-button { height: 44px; }
  .main-content .calculator-bar .swap-button-visual { width: 34px; height: 34px; }
  .main-content .calculator-bar .swap-button svg { width: 18px; height: 18px; }
  .main-content .calculator-bar .calculate-button,
  .main-content .calculator-bar.monthly-calculator .calculate-button { min-height: 44px; margin-top: 0; font-size: 1rem; }
  .main-content .calculator-bar.has-amount-error { row-gap: 54px; }
  .site-footer .footer-nav > *::before { margin-inline: 7px; }

  /* Keep the existing full-width amount behavior for exceptionally long values. */
  .main-content .calculator-bar.has-expanded-amount .country-field { grid-column: 1 / -1; grid-row: 1; }
  .main-content .calculator-bar.has-expanded-amount .amount-field { grid-column: 1 / -1; grid-row: 2; }
  .main-content .calculator-bar.has-expanded-amount .year-field:nth-of-type(3),
  .main-content .calculator-bar.has-expanded-amount .start-date-field { grid-column: 1; grid-row: 3; }
  .main-content .calculator-bar.has-expanded-amount .year-field:nth-of-type(4),
  .main-content .calculator-bar.has-expanded-amount .end-date-field { grid-column: 3; grid-row: 3; }
  .main-content .calculator-bar.has-expanded-amount .swap-button { grid-column: 2; grid-row: 3; }
  .main-content .calculator-bar.has-expanded-amount .calculate-button { grid-column: 1 / -1; grid-row: 4; }
}

@media (max-width: 390px) {
  .header-actions { gap: 5px; }
  .language-icon { width: 17px; height: 17px; flex-basis: 17px; }
  .calculator-mode a { min-width: 45px; padding-inline: 6px; font-size: 0.67rem; }
  .main-content .calculator-bar,
  .main-content .calculator-bar.monthly-calculator { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); column-gap: 6px; padding: 8px; }
  .main-content .calculator-bar .field label,
  .main-content .calculator-bar .field-label,
  .main-content .calculator-bar.monthly-calculator .field label,
  .main-content .calculator-bar.monthly-calculator .field-label { font-size: 0.7rem; }
  .main-content .calculator-bar .swap-button,
  .main-content .calculator-bar.monthly-calculator .swap-button { width: 44px; }
  .main-content .calculator-bar .swap-button-visual { width: 34px; height: 34px; }
}

@media (max-width: 350px) {
  .site-header { grid-template-columns: minmax(0, 1fr); }
  .header-actions,
  [dir="rtl"] .header-actions { justify-self: start; min-width: 0; flex-wrap: wrap; }
}

/* Historical currency names need two lines without reducing the input's touch target. */
.main-content .calculator-bar:has(.amount-field.has-long-currency) .field > .select-wrap,
.main-content .calculator-bar:has(.amount-field.has-long-currency) .date-selects,
.main-content .calculator-bar:has(.amount-field.has-long-currency) .amount-input-wrap,
.main-content .calculator-bar:has(.amount-field.has-long-currency) .swap-button { height: 64px; }

/* US / Germany / Argentina: the chosen artwork fits the remaining screen space.
   Source PNGs stay unchanged; only sky and outer reflection margins are cropped.
   Cologne photo: © Raimond Spekking / CC BY-SA 4.0, via Wikimedia Commons.
   Credit: assets/images/cologne-pencil-photo-based-2026-11-02.license.html */


/* All existing country scenes share one result row above one artwork row.
   Only the image, architectural crop and edge treatment vary by country.
   The modest responsive sky space is independent of image aspect ratio. */
body[data-scene]:not([data-scene=""]) .app-shell { height: 100svh; }
body[data-scene]:not([data-scene=""]) .main-content {
  grid-template-rows: minmax(min-content, 1fr) auto;
}
body[data-scene]:not([data-scene=""]) .landscape-stage {
  min-height: 0;
  aspect-ratio: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: clamp(12px, 2svh, 20px);
  padding-block-start: clamp(12px, 4svh, 48px);
}
body[data-scene]:not([data-scene=""]) .result-area {
  grid-row: 1; grid-column: 1;
  align-self: start;
  margin-block-start: 0;
}
body[data-scene]:not([data-scene=""]) .landscape-artwork {
  grid-row: 2; grid-column: 1;
}
body[data-scene]:not([data-scene=""]) .landscape-stage::before { content: none; }
/* Reserve the same source area for one/two-line names and the existing history link.
   Text and links can still grow naturally; no source row is clipped or reduced. */
body[data-scene]:not([data-scene=""]) .site-footer .footer-note {
  min-block-size: 3.5em;
  justify-content: center;
}

/* This decorative slot is added by the existing country visual synchronizer.
   Its size follows the grid row after the real result; no measured pixel loop. */
.landscape-artwork {
  grid-row: 2;
  position: relative;
  min-width: 0;
  min-height: 0;
  container-type: size;
  pointer-events: none;
}
.landscape-artwork::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(100cqw, calc(100cqh * var(--scene-crop-ratio)));
  aspect-ratio: var(--scene-crop-ratio);
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center var(--scene-crop-position);
  opacity: 0.94;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 85%, transparent), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 85%, transparent), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
body[data-scene="cologne"] .landscape-artwork {
  /* Source crop: x 0..1024, y 560..1380, from the same 1024x1536 PNG. */
  --scene-crop-ratio: 1.2487804878;
  --scene-crop-position: 78.2122905028%;
}
body[data-scene="cologne"] .landscape-artwork::before {
  background-image: url("./scene-cache/0ba1700670c6d2370c81c99eba3e4e5bc46ed636c20efa588b37fdfd022814e7.png");
}
body[data-scene="new-york"] .landscape-artwork {
  /* Source crop: x 0..941, y 660..1435, from the same 941x1672 PNG. */
  --scene-crop-ratio: 1.2141935484;
  --scene-crop-position: 73.5785953177%;
}
body[data-scene="new-york"] .landscape-artwork::before {
  background-image: url("./scene-cache/a97e330f291f58e26ed0c7008d213f205373b7bd1400977b286ade0c6db51732.png");
}

/* United Kingdom: approved preview, losslessly encoded from the selected PNG.
   Photo: Mattsjc / Wikimedia Commons, CC BY-SA 4.0.
   Credit: assets/images/westminster-pencil-photo-based-2026-11-02.license.html
   Stylized draft: exact bridge/facade geometry has not been certified. */


body[data-scene="london"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.1377777778;
  --scene-crop-position: 95.9119496855%;
}
body[data-scene="london"] .landscape-artwork::before {
  background-image: url("./scene-cache/8ca5c7f0e99f338a983f78c21b5a84ce5b6e3e714bf630b0d5078dfb1053d5d7.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 92%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 92%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="london"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


/* Argentina: the exact user-supplied drawing, with an unchanged original PNG.
   Same image at every size; CSS crops only open sky and the outer bottom margin.
   Photo source, usage rights and architectural correspondence remain unverified. */


body[data-scene="buenos-aires"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0343434343;
  --scene-crop-position: 91.5750915751%;
}
body[data-scene="buenos-aires"] .landscape-artwork::before {
  background-image: url("./scene-cache/3c7cbf6d7c2dbeb67ecbad4feaae183d4e5cc610b3f4e95dbd608000bd403799.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 92%, transparent), linear-gradient(to right, transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 92%, transparent), linear-gradient(to right, transparent, #000 2%, #000 98%, transparent);
}

/* Existing large-result mode needs its own row, including historical unit text. */


/* Austria: the approved Salzburg pencil drawing, unchanged and losslessly encoded.
   Original photograph: Wikihoreca / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/salzburg-pencil-photo-based-2026-11-02.license.html */
body[data-scene="salzburg"] .landscape-artwork {
  /* Source crop: x 0..1024, y 780..1500, from the 1024x1536 original.
     Preserve every landmark; remove only the open paper above the city. */
  --scene-crop-ratio: 1.4222222222;
  --scene-crop-position: 95.5882352941%;
}
body[data-scene="salzburg"] .landscape-artwork::before {
  background-image: url("./scene-cache/905a0c5d801f530a5f9523ed833bb2ef6618fe570fb597b823ddb4f81cf59078.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 90%, transparent), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 90%, transparent), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

/* Use the available hero width for Austria's long historical amounts.
   Keep the existing type scale and fitting behavior; do not clip the currency. */
body[data-scene="salzburg"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}

/* Brazil: exact selected graphite preview, lossless WebP.
   Photo: Donatas Dabravolskas / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/rio-pencil-photo-based-2026-11-02.license.html */


body[data-scene="rio"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.4027397260;
  --scene-crop-position: 96.7741935484%;
}
body[data-scene="rio"] .landscape-artwork::before {
  background-image: url("./scene-cache/d368715d9182f22d6bfa93271dbcce07ca75edad5c080dcfc9ebcd3831c626ef.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="rio"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


/* China: approved Shanghai graphite preview, unchanged original and lossless WebP.
   Photo: Quintin Soloviev / Wikimedia Commons, CC BY 4.0.
   Attribution: assets/images/shanghai-pencil-photo-based-2026-11-03.license.html */


body[data-scene="shanghai"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.1252747253;
  --scene-crop-position: 95.8466453674%;
}
body[data-scene="shanghai"] .landscape-artwork::before {
  background-image: url("./scene-cache/e940409463874de0f17bbebc2f5783441805c07e5fe8e32d302a90585e3b0029.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="shanghai"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


/* Denmark: approved Nyhavn graphite drawing, unchanged original and lossless WebP.
   Photo: Ole Neitzel / Wikimedia Commons, CC BY 4.0.
   Attribution: assets/images/nyhavn-pencil-photo-based-2026-11-03.license.html */


body[data-scene="nyhavn"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0666666667;
  --scene-crop-position: 97.2222222222%;
}
body[data-scene="nyhavn"] .landscape-artwork::before {
  background-image: url("./scene-cache/9ca51ca556aba81465fedcf2fffc0cc124fd978e7821e2c31bdfd8392a26319b.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="nyhavn"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


/* Indonesia: selected Manado graphite drawing, unchanged original and lossless WebP.
   Photo: Kondephy / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/manado-pencil-photo-based-2026-11-03.license.html */


body[data-scene="manado"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.1906976744;
  --scene-crop-position: 96.1538461538%;
}
body[data-scene="manado"] .landscape-artwork::before {
  background-image: url("./scene-cache/f4643827c7637f1a3661437ccfb35a1f28462c8c92adc0c667393ad55b8ff2ed.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="manado"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


/* Philippines: approved Manila graphite drawing, unchanged original and lossless WebP.
   Photo: Patrickroque01 / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/manila-roxas-pencil-2026-11-03.license.html */


body[data-scene="manila"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0666666667;
  --scene-crop-position: 95.4861111111%;
}
body[data-scene="manila"] .landscape-artwork::before {
  background-image: url("./scene-cache/186fc692d8209fbfe17d29b2f28217a0024211d217b1556d36b957d08c43ba20.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="manila"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


/* Keep very long Philippine results readable even before the shared fit callback runs. */
body[data-scene="manila"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem);
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}

/* Finland: approved Helsinki graphite drawing, unchanged original and lossless WebP.
   Photo: Az90210 / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/helsinki-harbour-pencil-2026-11-03.license.html */


body[data-scene="helsinki"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0666666667;
  --scene-crop-position: 95.4861111111%;
}
body[data-scene="helsinki"] .landscape-artwork::before {
  background-image: url("./scene-cache/eee1b447de23699e27ff9c0b6654071e8a92e90d68318cc52bc15e829800ca7b.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="helsinki"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


/* Give the same portrait artwork a wider crop on larger screens without stretching it. */
@media (min-width: 768px) {
  body[data-scene="helsinki"] .landscape-stage:not(:has(.result-area.has-large-amount)) .landscape-artwork {
    /* x 0..1024, y 500..1510 of the unchanged source. */
    --scene-crop-ratio: 1.0138613861;
    --scene-crop-position: 95.0570342205%;
  }
}
/* Scope the existing long-result safeguard to Finland's new artwork layout. */
body[data-scene="helsinki"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem);
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}

/* France: approved Paris graphite drawing, unchanged original and lossless WebP.
   Photo: DiscoA340 / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/paris-seine-pencil-2026-11-03.license.html */


body[data-scene="paris"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 0.9660377358;
  --scene-crop-position: 94.5378151261%;
}
body[data-scene="paris"] .landscape-artwork::before {
  background-image: url("./scene-cache/1242ce97015cd2640e9d6acb8f90daa2e8c4b5382f9ead2d5bfd59cd8650689e.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="paris"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="paris"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem);
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}

/* South Africa: approved Cape Town graphite drawing, unchanged original and lossless WebP.
   Photo: Dietmar Rabich / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/cape-town-waterfront-pencil-2026-11-03.license.html */


body[data-scene="cape-town"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 0.9660377358;
  --scene-crop-position: 94.5378151261%;
}
body[data-scene="cape-town"] .landscape-artwork::before {
  background-image: url("./scene-cache/239b819904bbd78b4449d3e0d3b6655f3a72d34cb8b28c03c4850163c8e5532d.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="cape-town"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="cape-town"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}

/* South Korea: approved Seoul Hyangwonjeong graphite drawing, unchanged original and lossless WebP.
   Photo: Basile Morin / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/seoul-hyangwonjeong-pencil-2026-11-03.license.html */


body[data-scene="seoul"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 0.9660377358;
  --scene-crop-position: 94.5378151261%;
}
body[data-scene="seoul"] .landscape-artwork::before {
  background-image: url("./scene-cache/b8bf55e09b785082ae274479e7c493ca4999ad1a30b3a47a89bcdc459a0c708d.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="seoul"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="seoul"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}

/* India: approved Mumbai waterfront graphite drawing, unchanged original and lossless WebP.
   Photo: iMahesh / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/mumbai-waterfront-pencil-2026-11-03.license.html */


body[data-scene="mumbai"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 0.9660377358;
  --scene-crop-position: 94.5378151261%;
}
body[data-scene="mumbai"] .landscape-artwork::before {
  background-image: url("./scene-cache/616ce91e584826858bc88a4d611d61fe7cf1be32fb8527413133d2fcefafdfc1.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="mumbai"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="mumbai"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}

/* Netherlands: approved Amsterdam Damrak graphite drawing, unchanged original and lossless WebP.
   Photo: Basile Morin / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/amsterdam-damrak-pencil-2026-11-04.license.html */


body[data-scene="amsterdam"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 0.9660377358;
  --scene-crop-position: 94.5378151261%;
}
body[data-scene="amsterdam"] .landscape-artwork::before {
  background-image: url("./scene-cache/63c3953c2a61d6452ca8bf5056e740c903d239620e1e81b70d1064569992db23.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="amsterdam"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="amsterdam"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Spain: approved Seville Plaza de España graphite drawing, unchanged original and lossless WebP.
   Photo: Fernando Domínguez Cerejido (Fedoce1) / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/seville-plaza-espana-pencil-2026-11-04.license.html */


body[data-scene="seville"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 0.9660377358;
  --scene-crop-position: 94.5378151261%;
}
body[data-scene="seville"] .landscape-artwork::before {
  background-image: url("./scene-cache/957ad2fd02512331c8b761df429165f7522eeb920994287f33e474f94ba25dac.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="seville"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="seville"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Sweden: approved Stockholm Nationalmuseum waterfront graphite drawing, unchanged original and lossless WebP.
   Photo: AleWi / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/stockholm-nationalmuseum-pencil-2026-11-04.license.html */


body[data-scene="stockholm"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.2641975309;
  --scene-crop-position: 96.4187327824%;
}
body[data-scene="stockholm"] .landscape-artwork::before {
  background-image: url("./scene-cache/140b6445f211dba8b7b53ae9640e0fcb1edb0e9df627f605425c4e4f6a0c1f3e.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="stockholm"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="stockholm"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Switzerland: approved Lucerne Kapellbrücke graphite drawing, unchanged original and lossless WebP.
   Photo: Hurstbergn / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/lucerne-kapellbruecke-pencil-2026-11-04.license.html */


body[data-scene="lucerne"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.1252747253;
  --scene-crop-position: 95.8466453674%;
}
body[data-scene="lucerne"] .landscape-artwork::before {
  background-image: url("./scene-cache/96ed99b912a459553eb3c37e4bfac5675bba6af2a7a99293e3d592024f976563.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="lucerne"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="lucerne"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Italy: approved Burano Rio San Mauro graphite drawing, unchanged original and lossless WebP.
   Photo: Kallerna / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/burano-rio-san-mauro-pencil-2026-11-04.license.html */


body[data-scene="burano"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="burano"] .landscape-artwork::before {
  background-image: url("./scene-cache/4993dbfa33ce0a9e60fca80070e5c9dec438e643de61ec505a1c4df3319ebebe.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="burano"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="burano"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Japan: approved Tokyo Sumida River Walk and Skytree graphite drawing, unchanged original and lossless WebP.
   Photo: くろふね / Wikimedia Commons, CC BY 4.0.
   Attribution: assets/images/tokyo-sumida-riverwalk-pencil-2026-11-05.license.html */


body[data-scene="tokyo"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="tokyo"] .landscape-artwork::before {
  background-image: url("./scene-cache/a63fc0b9686a874d4d2a0223ae95906ece22a573a28b86350c833438f316fdfa.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="tokyo"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="tokyo"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Canada: approved Toronto harbour and skyline graphite drawing, unchanged original and lossless WebP.
   Photo: Can Pac Swire / Wikimedia Commons, CC BY-SA 2.0.
   Attribution: assets/images/toronto-harbour-pencil-2026-11-05.license.html */


body[data-scene="toronto"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="toronto"] .landscape-artwork::before {
  background-image: url("./scene-cache/6c494349a2f395d8561a939dd3f4e76a41598e3b6caf0c3027df2fdd307342a5.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="toronto"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="toronto"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Malaysia: approved Kuala Lumpur Petronas Towers and KLCC Park graphite drawing, unchanged original and lossless WebP.
   Photo: Takeshi Aida / Wikimedia Commons, CC BY-SA 2.0.
   Attribution: assets/images/kuala-lumpur-petronas-pencil-2026-11-05.license.html */


body[data-scene="kuala-lumpur"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="kuala-lumpur"] .landscape-artwork::before {
  background-image: url("./scene-cache/3397fb8087b560f962fecbd68b4ab32bf19e5042c5958bd5670fff25a8d12099.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="kuala-lumpur"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="kuala-lumpur"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Mexico: approved Palacio de Bellas Artes and Torre Latinoamericana graphite drawing, unchanged original and lossless WebP.
   Photo: José Luiz Bernardes Ribeiro / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/mexico-city-bellas-artes-pencil-2026-11-05.license.html */


body[data-scene="mexico-city"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="mexico-city"] .landscape-artwork::before {
  background-image: url("./scene-cache/e2cf7b480eeadf1c796ebe6e9e8e78981f08bb532013de846158746c1f1be781.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="mexico-city"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="mexico-city"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Nigeria: approved Lagos Lekki-Ikoyi Link Bridge graphite drawing, unchanged original and lossless WebP.
   Photo: Pelumimedia / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/lagos-lekki-ikoyi-pencil-2026-11-05.license.html */


body[data-scene="lagos"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="lagos"] .landscape-artwork::before {
  background-image: url("./scene-cache/0c391abca1ae89cde6d2b3b6dd89110e80253583c5a840f15b8c6c77a5c8b7ae.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="lagos"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="lagos"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Norway: approved Bergen Bryggen waterfront graphite drawing, unchanged original and lossless WebP.
   Photo: Ryan Hodnett / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/bergen-bryggen-pencil-2026-11-05.license.html */


body[data-scene="bergen"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="bergen"] .landscape-artwork::before {
  background-image: url("./scene-cache/395479af400a81a34ee1780fe0dd9b9d9cf03616c9bb6047e10adb8f3045768a.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="bergen"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="bergen"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Pakistan: approved Lahore Badshahi Mosque courtyard graphite drawing, unchanged original and lossless WebP.
   Photo: Khan.gesta / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/lahore-badshahi-pencil-2026-11-05.license.html */


body[data-scene="lahore"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="lahore"] .landscape-artwork::before {
  background-image: url("./scene-cache/71ea1a2f650ccecee31da8752107de399ebda09fc153e145ee37c333c52beb36.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="lahore"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="lahore"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Poland: approved Gdańsk Motława waterfront graphite drawing, unchanged original and lossless WebP.
   Photo: Silar / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/gdansk-motlawa-pencil-2026-11-05.license.html */


body[data-scene="gdansk"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="gdansk"] .landscape-artwork::before {
  background-image: url("./scene-cache/f3dd84175635a27e49b6015e7ade481e6ba094b077c82bb1d5294dd187ca8dc3.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="gdansk"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="gdansk"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Russia: approved Saint Petersburg Palace Embankment graphite drawing, unchanged original and lossless WebP.
   Photo: Александровы АГ / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/saint-petersburg-palace-pencil-2026-11-05.license.html */


body[data-scene="saint-petersburg"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="saint-petersburg"] .landscape-artwork::before {
  background-image: url("./scene-cache/f5b138691215cc908ef03c8194f8a91c777f0f5b11f272821d2efe47ae92a366.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="saint-petersburg"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="saint-petersburg"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Saudi Arabia: approved Jeddah Corniche graphite drawing, unchanged original and lossless WebP.
   Photo: Radosław Botev / Fundacja Nomos / Wikimedia Commons, CC BY 3.0 PL.
   Attribution: assets/images/jeddah-corniche-pencil-2026-11-05.license.html */


body[data-scene="jeddah"] .landscape-artwork {
  grid-row: 1;
  grid-column: 1;
  

  /* Architectural crop formerly used for the separate large-result row. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="jeddah"] .landscape-artwork::before {
  background-image: url("./scene-cache/4aa0cdea8b4fcb8f3b9285da49ade072d3eefe1aee9b000bd5375eb5930c30a8.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="jeddah"] .result-area.has-large-amount {
  width: 100%;
  max-width: 100%;
}


body[data-scene="jeddah"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.12;
}


/* Thailand: approved Wat Arun graphite drawing; unchanged original and lossless WebP.
   Photo: Paul_012 / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/bangkok-wat-arun-pencil-2026-11-05.license.html
   Tall central prang stays in its own grid row below the live result. */


body[data-scene="wat-arun"] .landscape-artwork {
  grid-row: 2; grid-column: 1;
  /* x 0..1024, y 350..1510; preserve the complete central finial at y ~420. */
  --scene-crop-ratio: 0.8827586207;
  --scene-crop-position: 93.0851063830%;
}
body[data-scene="wat-arun"] .landscape-artwork::before {
  background-image: url("./scene-cache/8de4eea252774d8372c378b8c3b8cc572fd094bbbd7ba30471c9c776e78a2cb5.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="wat-arun"] .result-area.has-large-amount { width: 100%; max-width: 100%; }
body[data-scene="wat-arun"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important; white-space: normal !important;
  overflow-wrap: anywhere !important; line-height: 1.12;
}

/* Taiwan: selected Taipei graphite drawing, original PNG and lossless WebP.
   Source photo: NHC, 23 June 2026 / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/taipei-pencil-2026-11-05.license.html */


body[data-scene="taipei"] .landscape-artwork {
  /* Preserve the whole skyline: x 0..1024, y 560..1510. */
  --scene-crop-ratio: 1.0778947368;
  --scene-crop-position: 95.5631399317%;
}
body[data-scene="taipei"] .landscape-artwork::before {
  background-image: url("./scene-cache/e30e9f9c890631149bb7bbdb7a6de917e2bcfa27188daf8bacbf37037004037d.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="taipei"] .result-area.has-large-amount { width: 100%; max-width: 100%; }
body[data-scene="taipei"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important; white-space: normal !important;
  overflow-wrap: anywhere !important; line-height: 1.12;
}

/* Türkiye: selected Ortaköy graphite drawing, unchanged original and lossless WebP.
   Photo: Calistemon, 25 March 2024 / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/istanbul-ortakoy-pencil-2026-11-05.license.html */


body[data-scene="istanbul"] .landscape-artwork {
  /* x 0..1024, y 500..1510; preserve both finials and the waterfront. */
  --scene-crop-ratio: 1.0138613861;
  --scene-crop-position: 95.0570342205%;
}
body[data-scene="istanbul"] .landscape-artwork::before {
  background-image: url("./scene-cache/8f393c8c26c084d6b1993059d323cd36bebd2a6c98cec706e2a80e798433197a.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="istanbul"] .result-area.has-large-amount { width: 100%; max-width: 100%; }
body[data-scene="istanbul"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important; white-space: normal !important;
  overflow-wrap: anywhere !important; line-height: 1.12;
}

/* Vietnam: selected Hoi An graphite drawing; original PNG and lossless WebP.
   Photo: Chainwit., 1 August 2024 / Wikimedia Commons, CC BY 4.0.
   Attribution: assets/images/hoi-an-pencil-2026-11-05.license.html */


body[data-scene="hoi-an"] .landscape-artwork {
  /* x 0..1024, y 620..1510; retain buildings, bridge and exposed stone banks. */
  --scene-crop-ratio: 1.1505617978;
  --scene-crop-position: 95.9752321981%;
}
body[data-scene="hoi-an"] .landscape-artwork::before {
  background-image: url("./scene-cache/4ca1676cb49f47bf6352a74f58786b7c90eee8fbf4b6f6b058ff006388eeab00.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="hoi-an"] .result-area.has-large-amount { width: 100%; max-width: 100%; }
body[data-scene="hoi-an"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important; white-space: normal !important;
  overflow-wrap: anywhere !important; line-height: 1.12;
}

/* Australia: approved Sydney graphite drawing; unchanged PNG and lossless WebP.
   Photo: Ymblanter, 1 April 2024 / Wikimedia Commons, CC BY-SA 4.0.
   Attribution: assets/images/sydney-harbour-pencil-2026-11-05.license.html */


body[data-scene="sydney"] .landscape-artwork {
  /* x 0..1024, y 680..1510; retain bridge flags, opera shells and harbour. */
  --scene-crop-ratio: 1.2337349398;
  --scene-crop-position: 96.3172804533%;
}
body[data-scene="sydney"] .landscape-artwork::before {
  background-image: url("./scene-cache/d4e1680ed837956354bde1c7530e1c7d6046867108481a727b4ec9c78be8705f.webp");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
body[data-scene="sydney"] .result-area.has-large-amount { width: 100%; max-width: 100%; }
body[data-scene="sydney"] .result-area.has-large-amount .result-value {
  font-size: clamp(1.5rem, 6.4vw, 3rem) !important;
  display: block !important; white-space: normal !important;
  overflow-wrap: anywhere !important; line-height: 1.12;
}

/* Compact attribution: full institution names remain in accessible text/title.
   Keep the established source-area height and original mark/divider dimensions. */
body[data-scene]:not([data-scene=""]) .footer-note-line:not([data-ar-compact]) {
  flex-wrap: nowrap;
}
body[data-scene]:not([data-scene=""]) .footer-source-unit { flex: 0 1 auto; }
body[data-scene]:not([data-scene=""]) .footer-source-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
body[data-scene]:not([data-scene=""]) [data-ar-compact] .footer-source-name {
  display: block;
}

/* Existing historical-currency notes keep their pre-existing space. */
body[data-scene]:not([data-scene=""]) .footer-note:has(.currency-era-note:not([hidden])) .footer-source-name {
  -webkit-line-clamp: 1;
}

/* Source readability update: approved natural height for multi-provider mobile rows. */
body[data-scene]:not([data-scene=""]) .footer-note-line,
body[data-scene]:not([data-scene=""]) .footer-note-line[data-ar-compact] {height:auto;min-height:24px;flex-wrap:wrap;}
body[data-scene]:not([data-scene=""]) .footer-source-name,
body[data-scene]:not([data-scene=""]) [data-ar-compact] .footer-source-name,
body[data-scene]:not([data-scene=""]) .footer-note:has(.currency-era-note:not([hidden])) .footer-source-name {
 display:block; -webkit-line-clamp:unset;white-space:normal;overflow:visible;text-overflow:clip;
}
.footer-source-unit.has-provider-list > .footer-institution-links {display:none;}
.provider-text-separator {display:none;}
.footer-provider {display:inline-flex;align-items:center;gap:4px;min-width:0;}
.footer-provider .provider-name {min-width:0;overflow-wrap:anywhere;}
.footer-provider .has-provider-mark {border-inline-start:1px solid #c8d1c9;padding-inline-start:9px;margin-inline-start:4px;}
.has-provider-list .footer-source-name {display:flex!important;gap:8px 18px;flex-wrap:wrap;justify-content:center;}
.has-provider-list .footer-source-name::before {content:none;}
@media(max-width:680px){
 body[data-scene]:not([data-scene=""]) .footer-note-line {flex-direction:column;gap:8px;}
 body[data-scene]:not([data-scene=""]) .footer-source-unit {width:100%;}
 body[data-scene]:not([data-scene=""]) .footer-note-line[data-ar-compact] {font-size:0.8rem;}
 .footer-source-unit-secondary:not([hidden])::before {content:none;}
 .has-provider-list .footer-source-name {flex-direction:column;align-items:center;}
}

/* Approved compact Argentina attribution, 2026-11-09. */
@media(max-width:680px){
 html[lang="tr-TR"] body[data-scene]:not([data-scene=""]) .footer-note-line[data-ar-compact] {
   gap:5px;padding-inline:8px;font-size:11.5px;
 }
 html[lang="tr-TR"] body[data-scene]:not([data-scene=""]) [data-ar-compact] .footer-source-name[data-mobile-short-source] {
   font-size:11.5px;white-space:nowrap;line-height:20px;overflow:visible;
 }
 html[lang="tr-TR"] body[data-scene]:not([data-scene=""]) [data-ar-compact] .has-source-mark > .footer-source-name {
   margin-inline-start:3px;padding-inline-start:6px;
 }
 html[lang="tr-TR"] [data-ar-compact] .footer-source-link {gap:3px;}
 html[lang="tr-TR"] [data-ar-compact] .footer-source-link[data-source-acronym]::before {font-size:11px;}
}

/* Use the lira reference size for ordinary currency marks without changing controls.
   Historical descriptions retain their dedicated stacked layout and type size. */
.main-content .calculator-bar .amount-field:not(.has-long-currency) .amount-input-wrap > #currency-code {
  font-size: 16px;
}

/* A compact source/navigation/signature group on calculator pages only. */
.app-shell:has(> .main-content) > .site-footer:has(> .site-copyright) {
  row-gap: 6px; margin-block-end: 10px;
}
body .app-shell:has(> .main-content) > .site-footer > .footer-note {
  min-block-size: 0; justify-content: flex-start;
}
.app-shell:has(> .main-content) > .site-footer > .site-copyright { margin-block-start: 6px; }

.app-shell:has(> .main-content) > .site-footer > .footer-nav { margin-block-start: 0; }

/* Form labels, values and arrows use the same ink, without changing control states. */
.main-content .calculator-bar .field:not(.has-error) > label,
.main-content .calculator-bar .field:not(.has-error) > .field-label,
.main-content .calculator-bar .field:not(.has-error) select:not(:disabled),
.main-content .calculator-bar .field:not(.has-error) input:not(:disabled),
.main-content .calculator-bar .field:not(.has-error) #currency-code,
.main-content .calculator-bar .swap-button:not(:disabled) { color: #3f654e; }
.main-content .calculator-bar .field:not(.has-error) .select-wrap:not(:has(select:disabled))::after,
[dir="rtl"] .main-content .calculator-bar .field:not(.has-error) .select-wrap:not(:has(select:disabled))::after { border-color: #3f654e; }

/* Short phone viewports retain the controls; reclaim hero whitespace for the art. */
@media (max-width: 680px) {
  body[data-scene]:not([data-scene=""]) .main-content { padding-block: 4px; }
  body[data-scene]:not([data-scene=""]) .landscape-stage {
    padding-block-start: 8px;
    row-gap: 8px;
  }
  body[data-scene="istanbul"] .landscape-artwork {
    /* Original image remains intact: y 530..1430 keeps finials and reflections. */
    --scene-crop-ratio: 1.1377777778;
    --scene-crop-position: 83.3333333333%;
  }
}

/* Approved mobile composition: artwork follows width; short screens scroll naturally. */
@media (max-width: 680px) {
  body[data-scene]:not([data-scene=""]) .app-shell {
    height: auto;
    min-height: 100svh;
    grid-template-rows: auto auto auto;
    align-content: start;
  }
  body[data-scene]:not([data-scene=""]) .main-content,
  body[data-scene]:not([data-scene=""]) .landscape-stage {
    grid-template-rows: auto auto;
  }
  body[data-scene]:not([data-scene=""]) .landscape-artwork {
    inline-size: min(90vw, 100%);
    block-size: calc(min(90vw, calc(100vw - 24px)) / var(--scene-crop-ratio));
    justify-self: center;
  }
}

/* Mobile calculator attribution and navigation sit lower; signature stays in flow. */
@media (max-width: 680px) {
  .app-shell:has(> .main-content) > .site-footer > :is(.footer-note, .footer-nav) {
    position: relative;
    top: 6px;
  }
}