/* One studio, four clear places to personalize. No map filters or fake skins. */
html body #customizeMymappiDialog {
  width: min(960px, calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-width: 960px;
  height: min(820px, calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cbdeda;
  border-radius: 28px;
  color: #00243f;
  background: #f8fbf8;
  box-shadow: 0 26px 90px #00243f38;
}
html body #customizeMymappiDialog::backdrop { background: #00243596; backdrop-filter: blur(5px); }
html body #customizeMymappiForm {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f8fbf8;
  text-align: left;
  scroll-padding: 0;
}
html body #customizeMymappiDialog [hidden] { display: none !important; }
html body #customizeMymappiDialog .customize-mymappi-heading {
  position: relative;
  order: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 22px 26px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: #00243f;
  text-align: left;
}
html body #customizeMymappiDialog .customize-mymappi-heading > div { min-width: 0; padding: 0; }
html body #customizeMymappiDialog header.customize-mymappi-heading > div > span { color: #89d8c6 !important; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
html body #customizeMymappiDialog .customize-mymappi-heading h2 { margin: 4px 0; color: #fff; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 850; line-height: 1.2; }
html body #customizeMymappiDialog .customize-mymappi-heading p { margin: 0; color: #bfd4dc !important; font-size: .8rem; line-height: 1.5; }
html body #customizeMymappiClose {
  position: static;
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  margin: 0;
  padding: 10px;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  color: #00243f;
  background: #e5f5ee;
  box-shadow: none;
}
html body #customizeMymappiDialog .customize-view-switcher {
  order: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 10px 20px;
  border: 0;
  border-bottom: 1px solid #dae7e3;
  border-radius: 0;
  background: #f8fbf8;
}
html body #customizeMymappiDialog .customize-view-switcher button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  gap: 7px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #527079;
  background: transparent;
  box-shadow: none;
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
}
html body #customizeMymappiDialog .customize-view-switcher button[aria-selected="true"] { color: #00243f; border-color: #b0ddd0; background: #dbf2e8; }
html body #customizeMymappiDialog .customize-view-switcher svg { width: 17px; height: 17px; flex-shrink: 0; }
html body #customizeMymappiDialog .customize-workspace { order: 2; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-height: 0; overflow: hidden; }
html body #customizeMymappiDialog .customize-controls { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px; scrollbar-gutter: stable; }
html body #customizeMymappiDialog [data-customize-area] { display: grid; gap: 16px; min-width: 0; }
html body #customizeMymappiDialog .customize-live-preview {
  position: static;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 14px;
  margin: 22px 0 22px 22px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #d6e6df;
  border-radius: 20px;
  background: #eef5ef;
  box-shadow: none;
}
html body #customizeMymappiDialog .customize-preview-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; color: #527469; font-size: .66rem; font-weight: 750; }
html body #customizeCompareSaved { min-height: 44px; padding: 4px 7px; border: 0; border-radius: 8px; background: transparent; color: #0b6f66; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
html body #customizeCompareSaved:disabled { opacity: .5; text-decoration: none; }
html body #customizeMymappiDialog .customize-preview-scene { display: grid; gap: 10px; min-width: 0; }
html body #customizeMymappiDialog .customize-preview-explanation { display: grid; gap: 7px; text-align: center; }
html body #customizePreviewTitle { color: #00243f; font-size: .95rem; font-weight: 850; }
html body #customizePreviewExplanation { margin: 0; color: #4b696e; font-size: .76rem; line-height: 1.6; }
html body #customizePreviewSampleNote { color: #678279; font-size: .63rem; line-height: 1.5; }
html body #customizeMymappiDialog .customize-sample-map { position: relative; overflow: hidden; padding: 17px 10px 10px; border: 1px solid #c9ded4; border-radius: 14px; background: repeating-linear-gradient(35deg, transparent 0 42px, #ffffffc9 43px 47px, transparent 48px 92px), #e4eedf; }
html body #customizeMymappiDialog .customize-sample-pins { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 7px; }
html body #customizeMymappiDialog .customize-sample-pin { display: grid; justify-items: center; align-content: end; gap: 5px; min-width: 0; }
html body #customizeMymappiDialog .customize-sample-pin:nth-child(7):last-child { grid-column: 2; }
html body #customizeMymappiDialog .customize-sample-pin small { max-width: 100%; overflow-wrap: anywhere; padding: 2px 5px; border-radius: 6px; background: #ffffffd9; color: #234a50; font-size: .64rem; text-align: center; }
html body #customizeMymappiDialog .customize-real-pin { position: relative; display: block; width: 39px; height: 52px; }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px #00243f24); }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-body { fill: var(--marker-color); }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-rim { fill: none; stroke: #ffffffb8; stroke-width: 1.2; }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-inner { fill: color-mix(in srgb, var(--marker-color) 82%, #fff); opacity: .94; }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-shine { fill: #ffffff57; }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-center { fill: color-mix(in srgb, var(--marker-color) 68%, #062b36); stroke: #ffffff33; stroke-width: .65; }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-core { fill: #ffffffd9; }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-presence { fill: #164d4924; }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-symbol { font-size: 13px; }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-photo { position: absolute; left: 50%; display: none; overflow: hidden; top: 5px; width: 21px; height: 21px; transform: translateX(-50%); border: 1px solid #ffffffdd; border-radius: 50%; }
html body #customizeMymappiDialog .customize-real-pin .memory-pin-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body #customizeMymappiDialog .customize-real-pin[data-pin-style="photo"] .memory-pin-photo { display: block; }
html body #customizeMymappiDialog .customize-real-pin[data-pin-style="photo"]:has(.memory-pin-photo) :is(.memory-pin-center, .memory-pin-core) { opacity: 0; }
html body #customizeMymappiDialog .customize-real-pin[data-pin-style="minimal"] :is(.memory-pin-body, .memory-pin-rim, .memory-pin-inner, .memory-pin-shine, .memory-pin-symbol) { display: none; }
html body #customizeMymappiDialog .customize-real-pin[data-pin-style="minimal"] .memory-pin-center { fill: #fff; stroke: #073b47; stroke-width: 1.7px; transform: translateY(38px) scale(1.2); transform-origin: 32px 29.2px; }
html body #customizeMymappiDialog .customize-real-pin[data-pin-style="minimal"] .memory-pin-core { fill: var(--marker-color); transform: translateY(38px) scale(1.25); transform-origin: 32px 29.2px; }
html body #customizeMymappiDialog .customize-sample-map-label { display: block; padding-top: 12px; color: #43685b; font-size: .64rem; text-align: center; }
html body #customizeMymappiDialog .customize-memory-study { display: grid; gap: 12px; }
html body #customizeMymappiDialog .customize-photo-study { position: relative; display: grid; grid-template-rows: 145px auto; overflow: hidden; border: 1px solid #cfdfd7; border-radius: 14px; background: #fff; }
html body #customizeMymappiDialog .customize-photo-study img { display: block; width: 100%; height: 100%; object-fit: cover; transition: object-position 240ms ease; }
html body #customizeMymappiDialog .customize-photo-study > small { padding: 9px; color: #42655d; font-size: .66rem; text-align: center; }
html body #customizeMymappiDialog .customize-capsule-study { display: grid; gap: 7px; padding: 17px; border: 1px solid #d4e3dc; border-radius: 14px; background: #fff; }
html body #customizeMymappiDialog .customize-capsule-study > small { color: #5d7d74; font-size: .65rem; }
html body #customizeMymappiDialog .customize-capsule-study > strong { color: #00243f; font-size: 1.05rem; line-height: 1.3; }
html body #customizeMymappiDialog .customize-capsule-study p { margin: 0; color: #58726f; font-size: .77rem; line-height: 1.6; }
html body #customizeMymappiDialog .customize-capsule-study > span { color: #789087; font-size: .62rem; }
html body #customizeMymappiDialog .customize-capsule-study[data-capsule-style="postcard"] { background: #fff8e9; border-color: #d6caab; border-radius: 9px; }
html body #customizeMymappiDialog .customize-capsule-study[data-capsule-style="scrapbook"] { background: #f6f0e4; border: 1px dashed #b9ad94; border-radius: 7px 16px 9px 15px; box-shadow: 3px 4px 0 #b89f6f17; }
html body #customizeMymappiDialog .customize-capsule-study[data-capsule-style="journal"] { background: repeating-linear-gradient(#fffdf6 0 25px, #cfdcd94d 26px, #fffdf6 27px 28px); font-family: Georgia, serif; border-radius: 10px; }
html body #customizeMymappiDialog .customize-chapter-study { position: relative; overflow: hidden; border: 1px solid #d3e3dc; border-inline-start: 4px solid var(--preview-chapter-color); border-radius: 18px; background: #fff; }
html body #customizeMymappiDialog .customize-chapter-cover { position: relative; height: 150px; }
html body #customizeMymappiDialog .customize-chapter-cover img { width: 100%; height: 100%; object-fit: cover; }
html body #customizeMymappiDialog .customize-chapter-copy { display: grid; gap: 5px; padding: 14px; }
html body #customizeMymappiDialog .customize-chapter-copy small { color: #658078; font-size: .65rem; }
html body #customizeMymappiDialog .customize-chapter-copy strong { color: #00243f; font-size: 1rem; line-height: 1.35; }
html body #customizeMymappiDialog .customize-chapter-copy > span { color: #6a817a; font-size: .65rem; }
html body #customizeMymappiDialog .customize-chapter-study[data-chapter-style="postcard"] { border-radius: 14px; background: #fffaf0; }
html body #customizeMymappiDialog .customize-chapter-study[data-chapter-style="postcard"] .customize-chapter-cover::after,
html body #customizeMymappiDialog .customize-chapter-study[data-chapter-style="film"] .customize-chapter-cover::after { position: absolute; inset: 0; content: ""; border: 7px solid #fffaf0; pointer-events: none; }
html body #customizeMymappiDialog .customize-chapter-study[data-chapter-style="film"] .customize-chapter-cover::after { border-color: #102f37; border-inline-width: 11px; }
html body #customizeMymappiDialog .customize-chapter-study[data-chapter-style="film"] .customize-chapter-copy { background: #f0f6f6; }
html body #customizeMymappiDialog .customize-chapter-symbol { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #ffffffd9; border-radius: 10px; color: #fff; background: color-mix(in srgb, var(--preview-chapter-color) 42%, #00243f); }
html body #customizeMymappiDialog .customize-route-study { display: grid; justify-items: center; color: #5e7a70; font-size: .66rem; }
html body #customizeMymappiDialog .customize-route-study svg { width: 100%; height: 58px; }
html body #customizeMymappiDialog .customize-feel-study { display: grid; justify-items: center; gap: 8px; padding: 10px; text-align: center; }
html body #customizeMymappiDialog .customize-feel-mascot { display: grid; width: 92px; height: 104px; place-items: center; border-radius: 24px; background: #00243f; }
html body #customizeMymappiDialog .customize-feel-mascot img { width: 80px; height: 90px; object-fit: contain; }
html body #customizeMymappiDialog .customize-feel-study > strong { font-size: 1.1rem; }
html body #customizeMymappiDialog .customize-feel-study > p { margin: 0; color: #5e7a70; font-size: .76rem; line-height: 1.5; }
html body #customizeMymappiDialog .customize-feel-study.is-demoing[data-personality="calm"] .customize-feel-mascot { animation: customize-calm-demo 850ms ease-in-out; }
html body #customizeMymappiDialog .customize-feel-study.is-demoing[data-personality="playful"] .customize-feel-mascot { animation: customize-playful-demo 650ms ease-out; }
html body #customizeMymappiDialog .customize-home-words { display: grid; gap: 6px; padding: 14px; border-top: 1px solid #d4e2da; text-align: center; }
html body #customizeMymappiDialog .customize-home-words small { color: #779085; font-size: .63rem; }
html body #customizeMymappiDialog .customize-home-words strong { overflow-wrap: anywhere; color: #163f4a; font-size: 1rem; }
html body #customizeMymappiDialog .customize-home-words > span { overflow-wrap: anywhere; color: #56776f; font-size: .74rem; }
html body #customizeMymappiDialog .customize-mymappi-section { display: grid; min-width: 0; gap: 16px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body #customizeMymappiDialog .customize-section-heading { display: block; gap: 0; margin: 0; padding: 0; text-align: left; }
html body #customizeMymappiDialog .customize-section-icon { display: none; }
html body #customizeMymappiDialog .customize-step-label { color: #4c8276; font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html body #customizeMymappiDialog .customize-section-heading h3 { margin: 3px 0 7px; color: #00243f; font-size: 1.15rem; font-weight: 850; line-height: 1.3; }
html body #customizeMymappiDialog .customize-section-heading p { margin: 0; color: #5e797c; font-size: .78rem; line-height: 1.6; }
html body #customizeMymappiDialog .customize-choice-group { display: grid; min-width: 0; gap: 8px; margin: 0; padding: 0; border: 0; }
html body #customizeMymappiDialog .customize-choice-group legend { margin: 0 0 9px; padding: 0; color: #31535d; font-size: .76rem; font-weight: 800; text-transform: none; letter-spacing: 0; }
html body #customizeMymappiDialog .customize-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html body #customizeMymappiDialog .customize-choice-card { position: relative; display: flex; align-items: center; justify-content: space-between; min-width: 0; min-height: 65px; gap: 7px; margin: 0; padding: 12px; border: 1px solid #d6e3df; border-radius: 13px; color: #264e5a; background: #fff; box-shadow: none; text-align: left; }
html body #customizeMymappiDialog .customize-choice-card::before { display: none; }
html body #customizeMymappiDialog .customize-choice-card:has(input:checked) { border-color: #58b8a4; color: #00243f; background: #e7f5ee; box-shadow: inset 0 0 0 1px #58b8a4; }
html body #customizeMymappiDialog .customize-choice-card > span:first-of-type { min-width: 0; }
html body #customizeMymappiDialog .customize-choice-card strong { display: block; color: inherit; font-size: .79rem; line-height: 1.35; overflow-wrap: anywhere; }
html body #customizeMymappiDialog .customize-choice-card small { display: block; margin-top: 4px; color: #69837f; font-size: .66rem; line-height: 1.4; }
html body #customizeMymappiDialog .customize-choice-card em { display: block; margin-top: 3px; color: #31816e; font-size: .57rem; font-style: normal; }
html body #customizeMymappiDialog .customize-choice-check { flex: 0 0 16px; width: 16px; height: 16px; }
html body #customizeMymappiDialog .customize-secondary,
html body #customizeMymappiDialog .customize-category-palette { margin: 0; padding: 0; overflow: hidden; border: 1px solid #d7e6df; border-radius: 14px; background: #f1f7f1; }
html body #customizeMymappiDialog .customize-secondary > summary,
html body #customizeMymappiDialog .customize-category-palette > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 10px; padding: 13px; cursor: pointer; list-style: none; }
html body #customizeMymappiDialog summary::-webkit-details-marker { display: none; }
html body #customizeMymappiDialog summary strong { color: #214b55; font-size: .8rem; }
html body #customizeMymappiDialog summary small { display: block; margin-top: 3px; color: #6b837c; font-size: .64rem; line-height: 1.5; }
html body #customizeMymappiDialog .customize-secondary > section { padding: 15px; border-top: 1px solid #dce8e1; }
html body #customizeMymappiDialog .customize-secondary .customize-step-label { display: none; }
html body #customizeMymappiDialog .customize-category-palette > :not(summary) { margin: 0 12px 12px; }
html body #customizeMymappiDialog .customize-category-help,
html body #customizeMymappiDialog .customize-field-help,
html body #customizeMymappiDialog .customize-cover-note { color: #607c75; font-size: .7rem; line-height: 1.6; }
html body #customizeMymappiDialog .customize-core-category-row { min-width: 0; padding: 8px; border-radius: 10px; background: #fff; }
html body #customizeMymappiDialog .customize-inline-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
html body #customizeMymappiDialog .customize-single-color { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #60766e; font-size: .72rem; }
html body #customizeMymappiDialog input[type="color"] { width: 46px; min-width: 46px; height: 44px; padding: 4px; border: 1px solid #cbded4; border-radius: 10px; background: #fff; }
html body #customizeMymappiDialog .customize-text-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
html body #customizeMymappiDialog .customize-text-fields label { display: grid; min-width: 0; gap: 6px; color: #47695f; font-size: .75rem; }
html body #customizeMymappiDialog input[type="text"] { min-width: 0; max-width: 100%; min-height: 44px; border: 1px solid #cddfd5; border-radius: 10px; background: #fff; font-size: .85rem; }
html body #customizeMymappiDialog .customize-symbol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
html body #customizeMymappiDialog .customize-symbol-grid label > span { min-height: 58px; padding: 7px; border-radius: 11px; }
html body #customizeMymappiDialog .customize-symbol-grid small { font-size: .6rem; }
html body #customizeMymappiDialog .customize-personality-grid { grid-template-columns: minmax(0, 1fr); }
html body #customizeMymappiDialog .customize-demo-button { min-height: 44px; padding: 11px 15px; border: 1px solid #9fcebc; border-radius: 12px; color: #174f49; background: #e8f4eb; font-size: .8rem; font-weight: 800; }
html body #customizeMymappiDialog .customize-mymappi-actions { position: static; z-index: 3; order: 3; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); flex: none; gap: 8px 12px; margin: 0; padding: 12px 22px 15px; border: 0; border-top: 1px solid #d6e4db; border-radius: 0; background: #f8fbf8; box-shadow: 0 -6px 18px #00243f05; }
html body #customizeMymappiDialog .customize-device-note { grid-column: 1 / -1; display: flex; align-items: start; min-height: 0; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #6c857b; font-size: .62rem; line-height: 1.5; text-align: left; }
html body #customizeMymappiDialog .customize-device-note svg { flex: 0 0 13px; width: 13px; height: 13px; margin-top: 1px; }
html body #customizeMymappiDialog .customize-mymappi-status { grid-column: 1 / -1; min-height: 0; margin: 0; color: #426d5e; font-size: .7rem; line-height: 1.4; }
html body #customizeMymappiDialog .customize-feedback-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
html body #customizeMymappiDialog .customize-feedback-row:has(.customize-mymappi-status:empty):has(button[hidden]) { display: none; }
html body #customizeMymappiDialog .customize-feedback-row .customize-mymappi-status { flex: 1; }
html body #customizeReturnToPreview { flex-shrink: 0; min-height: 44px; padding: 6px 10px; border: 1px solid #baded0; border-radius: 10px; background: #e9f5ed; color: #196254; font-size: .7rem; font-weight: 800; }
html body #customizeMymappiDialog .customize-mymappi-status:empty { display: none; }
html body #customizeMymappiDialog .customize-mymappi-status[data-tone="error"] { color: #aa3f35; }
html body #customizeMymappiDialog .customize-mymappi-reset,
html body #customizeMymappiDialog .customize-mymappi-save { min-width: 0; min-height: 46px; margin: 0; padding: 11px 14px; border-radius: 12px; font-size: .8rem; font-weight: 800; line-height: 1.3; }
html body #customizeMymappiDialog .customize-mymappi-reset { border: 1px solid #d4e4da; color: #55776b; background: transparent; }
html body #customizeMymappiDialog .customize-mymappi-save { border: 1px solid #00243f; color: #fff; background: #00243f; box-shadow: none; }
html body #customizeMymappiDialog .customize-discard-confirm { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid #d8d5bf; border-radius: 10px; background: #fffaf0; }
html body #customizeMymappiDialog .customize-discard-confirm button { min-height: 44px; padding: 8px; }
html body #customizeMymappiDialog .signature-studio { margin: 0; border-radius: 14px; box-shadow: none; }
html body #customizeMymappiDialog :is(button, input, summary, label:has(input)):focus-visible { outline: 3px solid #138b7b; outline-offset: 3px; }
@keyframes customize-calm-demo { 50% { transform: translateY(-5px); } }
@keyframes customize-playful-demo { 35% { transform: translateY(-13px) rotate(-6deg); } 70% { transform: translateY(-2px) rotate(4deg); } }
@media (max-width: 700px) {
  html body #customizeMymappiDialog { width: calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); border-radius: 22px; }
  html body #customizeMymappiDialog .customize-mymappi-heading { padding: 17px 18px; }
  html body #customizeMymappiDialog .customize-view-switcher { padding: 8px 10px; }
  html body #customizeMymappiDialog .customize-view-switcher button { flex-direction: column; gap: 5px; padding: 7px 3px; font-size: .69rem; }
  html body #customizeMymappiDialog .customize-workspace { display: block; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  html body #customizeMymappiDialog .customize-controls { overflow: visible; padding: 18px; }
  html body #customizeMymappiDialog .customize-live-preview { margin: 15px 18px 0; padding: 12px; gap: 9px; }
  html body #customizeMymappiDialog .customize-sample-pins { gap: 7px; }
  html body #customizeMymappiDialog .customize-real-pin { width: 32px; height: 43px; }
  html body #customizeMymappiDialog .customize-real-pin .memory-pin-photo { width: 17px; height: 17px; top: 4px; }
  html body #customizeMymappiDialog .customize-preview-explanation { gap: 5px; }
  /* The adjacent section explains scope; don't repeat a paragraph above the choices. */
  html body #customizePreviewExplanation { display: none; }
  html body #customizeMymappiDialog .customize-memory-study { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  html body #customizeMymappiDialog .customize-photo-study { grid-template-rows: 115px auto; }
  html body #customizeMymappiDialog .customize-capsule-study { padding: 12px; }
  html body #customizeMymappiDialog .customize-capsule-study > strong { font-size: .85rem; }
  html body #customizeMymappiDialog .customize-capsule-study p { font-size: .7rem; }
  html body #customizeMymappiDialog .customize-chapter-cover { height: 100px; }
  html body #customizeMymappiDialog .customize-chapter-copy { padding: 10px 13px; }
  html body #customizeMymappiDialog .customize-route-study svg { height: 42px; }
  html body #customizeMymappiDialog .customize-mymappi-actions { padding: 11px 18px; gap: 7px 9px; }
}
/* Large text needs a continuous page, not fixed rails that squeeze out the form.
   Selected from font/viewport measurements; text remains at the user's size. */
html body #customizeMymappiDialog[data-customization-flow="scroll"] #customizeMymappiForm { display: block; overflow: auto; overscroll-behavior: contain; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-mymappi-heading { position: sticky; top: 0; z-index: 6; padding: 12px 18px; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-mymappi-heading h2 { font-size: 1.1rem; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-mymappi-heading :is(p, div > span) { display: none; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-view-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-view-switcher button { flex-direction: column; overflow-wrap: normal; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-workspace { display: block; overflow: visible; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-controls { overflow: visible; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-live-preview { margin: 16px 18px 0; overflow: visible; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-memory-study,
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-choice-grid { grid-template-columns: minmax(0, 1fr); }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-discard-confirm { grid-template-columns: 1fr; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-mymappi-actions { position: static; }
html body #customizeMymappiDialog[data-customization-flow="scroll"] .customize-feedback-row { flex-wrap: wrap; }
@media (max-width: 360px) {
  html body #customizeMymappiDialog .customize-mymappi-heading p { display: none; }
  html body #customizeMymappiDialog .customize-choice-grid { grid-template-columns: minmax(0, 1fr); }
  html body #customizeMymappiDialog .customize-pin-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body #customizeMymappiDialog .customize-discard-confirm { grid-template-columns: 1fr 1fr; }
  html body #customizeMymappiDialog .customize-discard-confirm > span { grid-column: 1 / -1; }
  html body #customizeMymappiDialog .customize-device-note { font-size: .6rem; }
}
@media (max-height: 550px) and (min-width: 701px) {
  html body #customizeMymappiDialog .customize-mymappi-heading { padding: 10px 18px; }
  html body #customizeMymappiDialog .customize-mymappi-heading p { display: none; }
  html body #customizeMymappiDialog .customize-view-switcher { padding: 4px 12px; }
  html body #customizeMymappiDialog .customize-controls { padding: 14px; }
  html body #customizeMymappiDialog .customize-live-preview { align-self: stretch; overflow: auto; margin: 12px 0 12px 14px; padding: 10px; gap: 6px; }
  html body #customizeMymappiDialog .customize-preview-toolbar { font-size: .6rem; }
  html body #customizeMymappiDialog .customize-preview-explanation { display: none; }
  html body #customizeMymappiDialog .customize-chapter-cover { height: 70px; }
  html body #customizeMymappiDialog .customize-chapter-copy { padding: 8px; }
  html body #customizeMymappiDialog .customize-sample-pins { gap: 5px; }
  html body #customizeMymappiDialog .customize-real-pin { width: 24px; height: 32px; }
  html body #customizeMymappiDialog .customize-sample-map { padding: 8px; }
  html body #customizeMymappiDialog .customize-sample-map-label { padding-top: 5px; }
  html body #customizeMymappiDialog .customize-mymappi-actions { padding: 7px 18px; gap: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #customizeMymappiDialog *, html body #customizeMymappiDialog *::before, html body #customizeMymappiDialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}