:root {
  --navy:#101b2d;
  --navy2:#17253a;
  --navy3:#24344c;
  --paper:#f5f2ec;
  --cream:#fbf9f4;
  --ink:#19283a;
  --muted:#7b8792;
  --line:#e8e4db;
  --gold:#e9b879;
  --coral:#f18870;
  --mint:#6ad5b2;
  --purple:#b8a1e5
}
* {
  box-sizing:border-box
}
html,body {
  height:100%;
  margin:0
}
body {
  font-family:Manrope,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper)
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer
}
a {
  color:inherit
}
.app-shell {
  min-height:100vh;
  display:flex;
  flex-direction:column
}
.topbar {
  height:76px;
  min-height:76px;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:300px minmax(260px,490px) 1fr;
  gap:28px;
  align-items:center;
  padding:0 26px 0 30px;
  z-index:3
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  white-space:nowrap
}
.brand-mark {
  width:39px;
  height:39px;
  border:1.5px solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:30px;
  line-height:1;
  font-family:Georgia,serif
}
.brand strong {
  display:block;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:800
}
.brand small {
  display:block;
  font-size:10px;
  font-weight:600;
  color:#89919a;
  letter-spacing:.065em;
  margin-top:2px
}
.header-search {
  height:42px;
  border:1px solid #e0dfd9;
  border-radius:10px;
  background:#fff;
  display:flex;
  align-items:center;
  padding:0 12px;
  gap:9px;
  color:#9aa3aa
}
.search-icon {
  font-size:25px;
  line-height:1;
  transform:rotate(-22deg)
}
.header-search input {
  border:0;
  outline:0;
  min-width:0;
  flex:1;
  background:transparent;
  color:var(--ink);
  font-size:12px
}
.header-search input::placeholder {
  color:#a8afb3
}
.header-search kbd {
  font-size:11px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 6px;
  background:#faf9f7
}
.header-right {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:22px
}
.data-badge {
  font-size:10px;
  color:#6e7c84;
  white-space:nowrap
}
.data-badge i,.live-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5ebc94;
  margin-right:6px;
  vertical-align:middle
}
.icon-button {
  border:1px solid #e2e0da;
  background:#fff;
  color:#506172;
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:15px;
  font-weight:700
}
.main-grid {
  min-height:calc(100vh - 113px);
  flex:1;
  display:grid;
  grid-template-columns:326px minmax(420px,1fr) 344px
}
.sidebar {
  background:var(--cream);
  border-right:1px solid var(--line);
  padding:30px 22px 20px 30px;
  overflow-y:auto;
  max-height:calc(100vh - 113px)
}
.eyebrow {
  color:#b78757;
  font-size:9px;
  font-weight:800;
  letter-spacing:.19em
}
.sidebar h1 {
  font-size:30px;
  letter-spacing:-.06em;
  line-height:1.21;
  margin:13px 0 11px;
  font-weight:800
}
.sidebar h1 em {
  font-style:normal;
  color:#c48f5f
}
.intro {
  font-size:11px;
  line-height:1.75;
  color:#7d868d;
  margin:0 0 28px;
  max-width:265px
}
.control-block {
  margin-bottom:21px
}
.control-block label {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.02em;
  font-weight:800;
  margin-bottom:10px
}
.control-block label .muted {
  color:#a2aaa9;
  font-weight:500
}
.control-block select {
  width:100%;
  border:1px solid #e4e2dc;
  background:#fff;
  color:#485762;
  border-radius:8px;
  height:40px;
  padding:0 11px;
  font-size:11px;
  outline:none
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #e8e4db;
  border-radius:7px;
  background:#fff;
  padding:7px 9px;
  font-size:10px;
  color:#68747c;
  line-height:1
}
.chip.active {
  background:var(--navy);
  border-color:var(--navy);
  color:#fff
}
.dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  flex:none
}
.dot.cultural {
  background:#f5715c
}
.dot.natural {
  background:#27c99c
}
.dot.mixed {
  background:#aa7fea
}
.dot.route-review {
  background:conic-gradient(#f5715c 0 33%,#27c99c 33% 66%,#aa7fea 66%);
  opacity:.42;
  width:9px;
  height:9px
}
.score-control {
  margin-bottom:20px
}
.score-control b {
  color:#bd8c5b;
  font-size:12px
}
.score-control input {
  width:100%;
  accent-color:#b88a59;
  margin:0
}
.range-ends {
  display:flex;
  justify-content:space-between;
  color:#a7aeae;
  font-size:9px;
  margin-top:1px
}
.sidebar-divider {
  height:1px;
  background:var(--line);
  margin:22px 0
}
.list-head {
  display:flex;
  justify-content:space-between;
  align-items:end
}
.list-head h2 {
  font-size:18px;
  margin:5px 0 0;
  letter-spacing:-.04em
}
.text-button {
  border:0;
  background:transparent;
  color:#b38455;
  font-size:10px;
  font-weight:800;
  padding:0 0 3px
}
.results-count {
  font-size:10px;
  color:#a2a9a7;
  margin:7px 0 13px
}
.rank-list {
  display:flex;
  flex-direction:column;
  gap:4px
}
.rank-item {
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  width:100%;
  padding:9px 7px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  text-align:left
}
.rank-item:hover,.rank-item.selected {
  background:#fff;
  border-color:#ece9e2
}
.rank-number {
  font-size:10px;
  color:#a0a7aa;
  font-weight:800
}
.rank-main {
  min-width:0
}
.rank-name {
  display:block;
  font-size:10px;
  line-height:1.4;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.rank-sub {
  display:block;
  color:#a0a7aa;
  font-size:9px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.rank-score {
  font-size:11px;
  font-weight:800;
  color:#bb8654
}
.rank-score small {
  display:block;
  font-size:8px;
  color:#a7aeae;
  font-weight:500;
  text-align:right
}
.rank-score {text-align:right;white-space:nowrap}
.more-button {
  width:100%;
  margin-top:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px;
  color:#566570;
  padding:9px;
  font-size:10px;
  font-weight:700
}
.globe-stage {
  position:relative;
  background:radial-gradient(ellipse at 48% 48%,#243a55 0%,#16263b 45%,#0d192a 100%);
  overflow:hidden;
  min-height:640px
}
.globe-stage:before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:radial-gradient(#7f9ab2 .7px,transparent .7px);
  background-size:29px 29px;
  pointer-events:none
}
.stage-top {
  position:absolute;
  top:26px;
  left:30px;
  right:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1;
  color:#8fa3b4;
  font-size:10px
}
.stage-kicker {
  color:#cad6dc;
  letter-spacing:.15em;
  font-size:9px;
  font-weight:800
}
.globe-stage canvas {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  cursor:grab;
  touch-action:none
}
.globe-stage canvas:active {
  cursor:grabbing
}
.globe-stage canvas:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:-3px
}
.globe-hint {
  position:absolute;
  bottom:72px;
  left:28px;
  color:#d8e1e8;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:10px;
  line-height:1.5;
  pointer-events:none
}
.globe-hint small {
  color:#8da0ae;
  font-size:9px
}
.hint-icon {
  font-size:27px;
  color:#c6d4db
}
.globe-tools {
  position:absolute;
  right:28px;
  bottom:54px;
  display:flex;
  flex-direction:column;
  gap:3px
}
.globe-tools button {
  background:#263a50;
  border:1px solid #41566a;
  color:#d8e4ed;
  width:30px;
  height:30px;
  border-radius:5px;
  font-size:19px;
  line-height:1
}
.globe-tools button:last-child {
  font-size:16px
}
.legend {
  position:absolute;
  bottom:19px;
  left:28px;
  right:28px;
  display:flex;
  gap:17px;
  flex-wrap:wrap;
  color:#b8c6d1;
  font-size:9px;
  justify-content:center;
  pointer-events:none
}
.legend span {
  display:flex;
  align-items:center;
  gap:5px
}
.legend-border {display:inline-block;width:13px;border-top:1px solid #dce6cf}
.legend-disputed {display:inline-block;width:13px;height:7px;border:1px dashed #e8bd81;background:#dcc28b55;border-radius:2px}
.hover-tip {
  position:absolute;
  z-index:6;
  background:#fff;
  color:#1d2c3d;
  box-shadow:0 8px 24px #0005;
  border-radius:7px;
  padding:7px 10px;
  font-size:10px;
  font-weight:700;
  max-width:220px;
  pointer-events:none
}
.detail-panel {
  background:var(--cream);
  border-left:1px solid var(--line);
  overflow-y:auto;
  max-height:calc(100vh - 113px)
}
.detail-placeholder {
  padding:34px 28px
}
.detail-art {
  height:238px;
  border-radius:13px;
  background:radial-gradient(circle at center,#dfcda9,#decdb0 50%,#ebe2d0);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  margin-bottom:33px
}
.detail-art:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(130deg,#ffffff50,transparent 60%)
}
.detail-art span {
  font-family:Georgia,serif;
  font-size:70px;
  color:#fbf7eb;
  z-index:1;
  text-shadow:0 5px 18px #ad94707d
}
.art-orbit {
  position:absolute;
  border:1px solid #fff9;
  border-radius:50%;
  width:250px;
  height:250px;
  transform:rotate(35deg) scaleX(.44)
}
.art-orbit-two {
  width:340px;
  height:340px;
  transform:rotate(-30deg) scaleX(.48)
}
.detail-placeholder h2 {
  font-size:33px;
  letter-spacing:-.07em;
  line-height:1.1;
  margin:11px 0 12px
}
.detail-placeholder p {
  font-size:11px;
  line-height:1.75;
  color:#859096;
  margin:0 0 25px
}
.primary-button {
  width:100%;
  height:43px;
  border:0;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 16px
}
.primary-button span {
  font-size:18px
}
.detail-content {
  padding:24px 26px 30px
}
.detail-topline {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.detail-category {
  display:flex;
  gap:7px;
  align-items:center;
  color:#b38558;
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase
}
.close-detail {
  background:none;
  border:0;
  color:#9da5aa;
  font-size:24px;
  line-height:1
}
.detail-hero {
  height:125px;
  margin:18px 0 20px;
  border-radius:11px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 80% 30%,#6d8daa,#28425e 55%,#172a42)
}
.detail-hero:before {
  content:"";
  position:absolute;
  width:195px;
  height:195px;
  right:-5px;
  top:8px;
  border:1px solid #ffffff4d;
  border-radius:50%;
  box-shadow:0 0 0 24px #ffffff0c,0 0 0 52px #ffffff09
}
.detail-hero.natural {
  background:radial-gradient(circle at 80% 30%,#6ea990,#355f59 55%,#193b43)
}
.detail-hero.mixed {
  background:radial-gradient(circle at 80% 30%,#9c91b6,#514c73 55%,#302f51)
}
.detail-hero.has-photo {height:195px;background:#28425e}
.site-photo {width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.photo-credit {position:absolute;right:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 7px;border-radius:5px;background:#10263fcc;color:#fff;font-size:9px;line-height:1.3;text-align:right;text-shadow:0 1px 2px #0008}
.photo-credit a {color:inherit;text-decoration:none}
.photo-credit a:hover {text-decoration:underline}
.detail-hero.has-photo:before {display:none}
.detail-hero .hero-coord {
  position:absolute;
  left:18px;
  bottom:16px;
  color:#fff;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:700
}
.detail-hero .hero-symbol {
  position:absolute;
  right:38px;
  top:14px;
  color:#ffffff8c;
  font-family:Georgia,serif;
  font-size:65px
}
.detail-title {
  font-size:21px;
  line-height:1.28;
  letter-spacing:-.055em;
  margin:0 0 9px;
  font-weight:800
}
.detail-location {
  font-size:10px;
  color:#8b959a;
  line-height:1.5
}
.detail-score {
  margin:19px 0;
  padding:14px;
  background:#f0ede7;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:14px
}
.score-total {
  font-size:32px;
  line-height:1;
  color:#b9814a;
  font-weight:800;
  letter-spacing:-.06em
}
.score-total small {
  font-size:10px;
  color:#a2998c;
  font-weight:500;
  letter-spacing:0
}
.score-bars {
  flex:1;
  display:grid;
  gap:5px
}
.score-row {
  display:grid;
  grid-template-columns:86px 1fr 19px;
  align-items:center;
  gap:7px;
  font-size:9px;
  color:#75818b
}
.score-track {
  height:4px;
  background:#dfd9ce;
  border-radius:4px;
  overflow:hidden
}
.score-fill {
  height:100%;
  background:#b78757;
  border-radius:4px
}
.score-row b {
  text-align:right;
  color:#586673;
  font-size:9px
}
.section-title {
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  color:#b68658;
  text-transform:uppercase;
  margin:24px 0 10px
}
.detail-description {
  font-size:11px;
  color:#53626e;
  line-height:1.85;
  margin:0
}
.info-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px
}
.info-cell {
  border-top:1px solid var(--line);
  padding-top:10px
}
.info-cell small {
  display:block;
  font-size:9px;
  color:#a1aaa9;
  margin-bottom:5px
}
.info-cell b {
  display:block;
  font-size:10px;
  line-height:1.5;
  color:#465664
}
.danger {
  display:inline-block;
  color:#b65a4d;
  background:#f9e8e2;
  border-radius:4px;
  font-size:9px;
  padding:5px 7px;
  margin-top:10px
}
.nearby-list {
  display:grid;
  gap:6px
}
.nearby-button {
  background:#fff;
  border:1px solid #ebe7de;
  border-radius:7px;
  width:100%;
  padding:9px 10px;
  text-align:left;
  font-size:10px;
  color:#415260;
  display:flex;
  justify-content:space-between;
  gap:8px
}
.nearby-button span:first-child {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.unesco-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--navy);
  color:white;
  text-decoration:none;
  border-radius:8px;
  font-size:10px;
  font-weight:800;
  padding:13px 15px;
  margin-top:24px
}
.unesco-link span {
  font-size:16px
}
.footer {
  height:37px;
  min-height:37px;
  background:var(--cream);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 25px;
  gap:12px;
  color:#9aa3a5;
  font-size:9px
}
.footer a {
  color:#7c8790;
  text-decoration:underline
}
.footer span:last-child {
  text-align:right
}
dialog {
  border:0;
  border-radius:16px;
  max-width:530px;
  width:calc(100% - 32px);
  padding:34px;
  color:var(--ink);
  box-shadow:0 20px 70px #101b2d55
}
dialog::backdrop {
  background:#071220b3
}
.dialog-close {
  float:right;
  background:none;
  border:0;
  font-size:26px;
  color:#8d979a;
  line-height:1
}
dialog h2 {
  font-size:28px;
  letter-spacing:-.05em;
  margin:9px 0 15px
}
dialog p {
  font-size:12px;
  line-height:1.75;
  color:#677782
}
dialog a {
  color:#b08350
}
.formula {
  background:#f3eee5;
  padding:15px;
  border-radius:9px;
  margin:18px 0
}
.formula b,.formula span {
  display:block
}
.formula b {
  font-size:12px
}
.formula span {
  font-size:10px;
  color:#75818a;
  line-height:1.6;
  margin-top:6px
}
@media(max-width:1120px) {
  .main-grid {
    grid-template-columns:280px minmax(370px,1fr) 310px
  }
  .topbar {
    grid-template-columns:250px minmax(210px,1fr) auto;
    gap:14px
  }
  .sidebar {
    padding-left:20px
  }
  .detail-content {
    padding-left:20px;
    padding-right:20px
  }
  
}
@media(max-width:950px) {
  .main-grid {
    grid-template-columns:280px 1fr
  }
  .detail-panel {
    grid-column:1/-1;
    max-height:none;
    border-left:0;
    border-top:1px solid var(--line)
  }
  .detail-placeholder {
    display:none
  }
  .detail-content {
    max-width:650px;
    margin:auto
  }
  .globe-stage {
    min-height:690px
  }
  .sidebar {
    max-height:690px
  }
  .footer {
    height:auto;
    min-height:37px;
    padding:10px 20px
  }
  
}
@media(max-width:680px) {
  .topbar {
    height:auto;
    min-height:108px;
    grid-template-columns:1fr auto;
    gap:10px;
    padding:12px 16px
  }
  .header-search {
    grid-column:1/-1;
    grid-row:2
  }
  .header-right {
    grid-column:2;
    grid-row:1
  }
  .data-badge {
    display:none
  }
  .main-grid {
    display:flex;
    flex-direction:column
  }
  .sidebar {
    max-height:none;
    padding:22px 18px
  }
  .sidebar h1 {
    font-size:25px
  }
  .intro {
    max-width:none;
    margin-bottom:20px
  }
  .control-block {
    margin-bottom:15px
  }
  .rank-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .rank-item {
    grid-template-columns:18px minmax(0,1fr) auto;
    gap:4px
  }
  .globe-stage {
    height:570px;
    min-height:570px;
    order:-1
  }
  .globe-hint {
    bottom:70px;
    left:16px
  }
  .globe-tools {
    right:16px
  }
  .legend {
    bottom:13px
  }
  .stage-top {
    left:16px;
    right:16px
  }
  .detail-panel {
    order:2
  }
  .detail-placeholder {
    display:block;
    padding:20px 18px
  }
  .detail-art {
    display:none
  }
  .detail-placeholder h2 {
    font-size:25px
  }
  .footer {
    display:block;
    text-align:center;
    line-height:1.6
  }
  .footer span {
    display:block
  }
  .footer span:last-child {
    text-align:center
  }
  
}
@media(max-width:390px) {
  .rank-list {
    grid-template-columns:1fr
  }
  .stage-top {
    font-size:8px
  }
  .legend {
    gap:8px;
    font-size:8px
  }
  
}

/* Trip planning layers share the atlas's warm paper / dark ocean palette. */
[hidden] { display:none !important }
.control-label {font-size:10px;font-weight:800;margin-bottom:10px}
.duration-control {display:grid;grid-template-columns:repeat(4,1fr);padding:4px;background:#ece8df;border-radius:10px;gap:3px}
.duration-control button {border:0;background:transparent;color:#73808a;border-radius:7px;min-height:39px;font-size:12px;font-weight:800;transition:background .18s,color .18s,box-shadow .18s}
.duration-control button small {font-size:8px;font-weight:500;display:block;margin-top:1px}
.duration-control button.active {background:var(--navy);color:#faecd7;box-shadow:0 3px 8px #101b2d22}
.duration-control button:hover:not(.active) {background:#ffffffa6;color:var(--ink)}
button:focus-visible,select:focus-visible {outline:2px solid #b8804a;outline-offset:3px}
.control-help {font-size:9px;line-height:1.6;color:#8a918f;margin:9px 2px 0}
.trip-item {padding:10px 5px;grid-template-columns:33px minmax(0,1fr) 14px;gap:9px}
.trip-orbit {display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--navy);border:1px solid var(--trip-color);box-shadow:0 0 0 3px #dfd9cb55;color:var(--trip-color);font-size:11px;font-weight:800}
.trip-item .rank-name {white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:10px}
.trip-meta {display:block;color:#a07d55;font-size:9px;margin-top:4px}
.trip-arrow {color:#a0a9ac;font-size:14px}
.cluster-mode-label {position:absolute;left:28px;top:64px;display:flex;align-items:center;gap:9px;color:#eecb99;pointer-events:none;z-index:1;text-shadow:0 2px 10px #071827}
.cluster-mode-label strong {display:block;font-size:12px;font-weight:600;letter-spacing:.015em}
.cluster-mode-label small {display:block;margin-top:3px;font-size:9px;color:#9bafbd}
.cluster-symbol {font-size:30px}
.hover-tip {max-width:270px;padding:12px 14px;background:#fbf9f4f5;border:1px solid #efe1c7;backdrop-filter:blur(12px);border-radius:10px;box-shadow:0 12px 32px #020b1955}
.hover-tip strong {display:block;font-size:11px;line-height:1.5}
.hover-tip span {display:block;color:#a2784c;font-size:10px;margin-top:6px;font-weight:600}
.hover-tip small {display:block;color:#8b969a;font-size:9px;margin-top:5px;font-weight:400}
.globe-tools {z-index:2;gap:5px}
.globe-tools button {height:34px;width:34px}
.globe-tools button:disabled {opacity:.35;cursor:default}
.globe-tools output {font-size:10px;color:#d9e4ed;text-align:center;margin-bottom:3px;font-variant-numeric:tabular-nums;text-shadow:0 1px 5px #000}
.trip-hero {position:relative;overflow:hidden;padding:23px 20px;margin:20px 0 23px;border-radius:12px;background:radial-gradient(ellipse at 100% 10%,#415b6a,#172c40 75%);color:var(--trip-color)}
.trip-hero>span {font-size:53px;line-height:1.1;font-weight:500;letter-spacing:-.06em}
.trip-hero small {display:block;font-size:10px;color:#d0dbe0;margin-top:9px;letter-spacing:0}
.trip-hero i {font-style:normal;position:absolute;font-size:140px;right:-8px;top:-22px;opacity:.4;line-height:1}
.trip-score-hero {display:flex;align-items:end;justify-content:space-between;gap:8px;margin:22px 0 10px;padding:20px 22px}
.trip-score-hero>span {position:relative;z-index:1;font-size:60px;font-weight:700}
.trip-score-hero small {font-size:10px;font-weight:500}
.trip-score-percent {position:relative;z-index:1;margin-bottom:3px;white-space:nowrap;color:#f4e3ca;font-size:25px;line-height:1;font-weight:800;letter-spacing:-.04em;text-align:right}
.trip-score-percent small {margin-top:7px;color:#c5d1d5;font-size:9px;font-weight:500;letter-spacing:0}
.trip-score-breakdown {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.trip-score-breakdown>div {min-width:0;padding:11px 9px;border-radius:8px;background:#f0ede7}
.trip-score-breakdown span {display:block;min-height:24px;color:#7f898c;font-size:9px;line-height:1.3}
.trip-score-breakdown b {display:block;margin-top:5px;color:#243749;font-size:18px;line-height:1;font-weight:800}
.trip-category-values {display:flex;align-items:baseline;justify-content:space-between;gap:3px;white-space:nowrap}
.trip-category-values strong {color:#ad784e;font-size:10px;font-weight:800}
.trip-time {display:flex;align-items:center;gap:15px;margin-top:19px;padding:15px 17px;border:1px solid #e5d8c5;border-radius:9px;background:#faf7f0}
.trip-time strong {white-space:nowrap;color:#ae7748;font-size:29px;line-height:1;font-weight:800;letter-spacing:-.05em}
.trip-time strong small {font-size:14px;font-weight:600;letter-spacing:0}
.trip-time>span {color:#576675;font-size:10px;line-height:1.5}
.trip-time>span small {color:#9b8c7c;font-size:9px}
.trip-title-suffix {font-weight:500;color:#8e999d;font-size:15px}
.trip-budget {display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:20px 0 14px}
.trip-budget.one-stat {grid-template-columns:1fr}
.trip-budget b {display:block;font-size:17px;letter-spacing:-.03em;font-weight:700}
.trip-budget small {display:block;color:#8a969c;font-size:9px;margin-top:5px}
.budget-breakdown {display:grid;gap:7px;color:#859197;font-size:10px}
.budget-breakdown.no-budget {margin-top:20px;border-top:1px solid var(--line);padding-top:17px}
.budget-breakdown span {display:flex;justify-content:space-between;gap:10px}
.country-intro {margin:0 0 20px;color:#89959b;font-size:11px;line-height:1.5}
.country-summary {display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:17px;border-radius:12px;background:linear-gradient(130deg,#1b3144,#365867);color:#f6eedf}
.country-summary div {display:grid;gap:4px}
.country-summary strong {font-size:32px;line-height:1;font-weight:800;letter-spacing:-.06em}
.country-summary span {font-size:10px;color:#d7e2df}
.country-categories {display:grid;gap:9px}
.country-categories>div {display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:8px;background:#f0ede7;color:#566673;font-size:11px}
.country-categories b {margin-left:auto;color:#223749;font-size:15px}
.country-review {margin:15px 0;color:#9b846d;font-size:10px}
.country-detail .nearby-button strong {flex:none;color:#a8794f}
.country-filter-button {width:100%;margin-top:17px;padding:12px;border:1px solid #d9c29f;border-radius:8px;background:#f9f2e8;color:#8b5f39;text-align:left;font-size:11px;font-weight:800;cursor:pointer}
.budget-breakdown b {font-weight:600;color:#586875}
.trip-note {font-size:10px;line-height:1.75;color:#8e9697;margin:18px 0}
.trip-filter-note {padding:11px;border-radius:7px;background:#eee9de;font-size:10px;line-height:1.65;color:#85745e}
.trip-stops {display:grid;gap:5px}
.trip-stop {border:1px solid transparent;border-radius:8px;background:transparent;display:grid;grid-template-columns:22px minmax(0,1fr) 12px;gap:9px;text-align:left;padding:10px 3px;color:#52616e;align-items:start}
.trip-stop:hover {background:white;border-color:var(--line)}
.stop-number {display:grid;place-items:center;border-radius:50%;border:1px solid #ddd8cb;width:21px;height:21px;color:#b0875d;font-size:9px;font-weight:700}
.trip-stop strong {font-size:10px;line-height:1.5;display:block}
.trip-stop small {font-size:9px;color:#9ba3a3;margin-top:4px;display:block}
.context-stop strong {font-weight:500;color:#929b9e}
.trip-return {margin:22px 0 0;border:1px solid #dacfbd;border-radius:8px;background:#eee7db;width:100%;padding:12px 10px;color:#8d6d46;display:flex;justify-content:space-between;font-size:10px;font-weight:700}
@media(max-width:680px){.cluster-mode-label{left:16px;top:60px}.duration-control button{min-height:43px}.trip-item{grid-template-columns:30px minmax(0,1fr) 12px}.globe-hint{font-size:9px}.globe-hint small{font-size:8px}.trip-budget{max-width:360px}}
@media(prefers-reduced-motion:reduce){.duration-control button{transition:none}}
.trip-title-suffix {display:block;margin-top:6px;letter-spacing:0}

.stop-access {margin:0 0 14px 33px;color:#73838b;font-size:10px;line-height:1.65}
.stop-access a {color:#91704b;white-space:nowrap}

.site-trip-choices {margin:20px 0}
.site-trip-choice {width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:#20374a;border:1px solid #ffffff20;border-radius:9px;padding:10px 12px;margin:6px 0;color:#f6f0e5;cursor:pointer}
.site-trip-choice i {width:8px;height:8px;border-radius:50%;background:var(--trip-color);flex-shrink:0}
.site-trip-choice>span:nth-child(2) {flex:1;font-size:12px;font-weight:700}
.site-trip-choice small {display:block;font-size:10px;font-weight:400;color:#c0cdd2;margin-top:3px}
.site-trip-choice:hover,.site-trip-choice:focus-visible {outline:2px solid var(--trip-color);outline-offset:1px}
.site-trip-unavailable {font-size:10px;color:#8e9697;padding:8px 0}