#content.xp { max-width: 720px; margin: 0 auto; }
#content.xp.xp--course { max-width: none; }
.xp-title { padding: 6px 0 14px; }
.xp-sec { display: flex; align-items: baseline; gap: 6px; margin: 26px 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.xp-sec small { font-size: 13px; font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.xp-sec--res { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.xp-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.xp-note--foot { margin: 14px 0 0; color: var(--text-faint); }
.xp-note--empty { padding: 28px 0; text-align: center; font-size: 14px; }
.xp-search { position: relative; }
.xp-search input::-webkit-search-cancel-button { display: none; }
.xp-search__x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--text-faint); cursor: pointer; flex: none; margin-right: -6px; }
.xp-search__x .icon { width: 18px; height: 18px; }
.xp-th { object-fit: cover; }
.xp-th--lg { width: 64px; height: 64px; border-radius: 12px; }
.xp-th--xs { width: 40px; height: 40px; border-radius: 9px; }
.xp-th.ui-thumb--kind .icon { width: 22px; height: 22px; }
.sv-heart { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; background: none; color: var(--text-faint); border-radius: 50%; cursor: pointer; flex: none; padding: 0; }
.sv-heart .icon { width: 22px; height: 22px; }
.sv-heart:hover { background: var(--bg-sunken); }
.sv-heart.is-on, .xp-hbtn.is-on { color: var(--brand-fg); }
.sv-heart.is-on .icon path, .xp-hbtn.is-on .icon path { fill: currentColor; }
html.sv-off .sv-heart, html.sv-off [data-save-kind] { display: none !important; }
.xp-hbtn { height: 38px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--text); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; flex: none; cursor: pointer; white-space: nowrap; }
.xp-hbtn .icon { width: 18px; height: 18px; }
.xp-hbtn.is-on { box-shadow: none; background: var(--brand-soft); }
.xp-hbtn--ic { width: 38px; padding: 0; justify-content: center; }
.xp-cities { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--container-pad-x) * -1); padding: 2px var(--container-pad-x) 4px; }
.xp-cities::-webkit-scrollbar { display: none; }
.xp-city { flex: none; width: 104px; color: var(--text); text-decoration: none; }
.xp-city__pic { width: 104px; height: 104px; border-radius: 14px; }
.xp-city b { display: block; padding-top: 7px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-crs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); }
.xp-crs:last-child { border-bottom: 0; }
.xp-crs__a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--text-muted); text-decoration: none; font-size: 13px; }
.xp-crs__pic { position: relative; flex: none; width: 104px; height: 78px; border-radius: 12px; overflow: hidden; }
.xp-crs__pic .xp-th { width: 100%; height: 100%; border-radius: 0; }
.xp-crs__pic em { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.62)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-crs__t { flex: 1; min-width: 0; line-height: 1.45; }
.xp-crs__t b { display: block; font-size: 16px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; text-wrap: pretty; }
.xp-morebtn { margin-top: 10px; height: 44px; font-size: 14px; }
.xp-res { padding: 9px 0; gap: 14px; }
.xp-res .ui-row__main > b { font-size: 16px; }
#xp-home .guide-continent-group:first-child { margin-top: 0; }
.xp-hero { position: relative; height: 220px; margin: calc(var(--container-pad-y) * -1) calc(var(--container-pad-x) * -1) 0; background: var(--bg-sunken); overflow: hidden; }
.xp-hero > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-hero__credit { position: absolute; left: 10px; bottom: 6px; max-width: 60%; font-style: normal; font-size: 10px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-hero__bar { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; gap: 8px; }
.xp-hero__bar > i { flex: 1; }
.xp-ib, .xp-hero__bar .sv-heart { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bg); color: var(--text); box-shadow: 0 2px 8px -2px rgba(16, 20, 27, 0.35); cursor: pointer; padding: 0; }
.xp-ib .icon { width: 22px; height: 22px; }
.xp-hero__bar .sv-heart.is-on { color: var(--brand-fg); }
.xp-crumb { display: none; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.xp-crumb .icon { width: 16px; height: 16px; }
.xp-cname { margin: 0; padding: 18px 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.xp-cname small { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.xp-cname--co { font-size: 22px; padding: 16px 0 2px; text-wrap: balance; }
.xp-csub { margin: 0; padding-bottom: 12px; font-size: 13px; color: var(--text-muted); }
.xp-tabs { margin: 0 calc(var(--container-pad-x) * -1); padding: 0 var(--container-pad-x); }
.xp-chead__acts { display: none; }
.xp-panel { padding-top: 6px; }
.xp-intro { margin: 12px 0 2px; font-size: 14px; line-height: 1.6; color: var(--text-secondary, var(--text-muted)); text-wrap: pretty; }
.xp-opt { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--border); }
.xp-opt:last-child { border-bottom: 0; }
.xp-opt__a { flex: 1; min-width: 0; padding: 14px 0; color: var(--text-muted); text-decoration: none; font-size: 13px; line-height: 1.5; }
.xp-opt__a b { display: block; font-size: 16px; font-weight: 700; color: var(--text); text-wrap: pretty; }
.xp-opt__a small { display: block; font-size: 12.5px; color: var(--text-faint); }
.xp-opt__chev { display: grid; place-items: center; width: 24px; color: var(--text-faint); }
.xp-opt__chev .icon { width: 20px; height: 20px; }
.xp-chips { margin: 8px calc(var(--container-pad-x) * -1) 4px; padding: 2px var(--container-pad-x); }
.xp-srow { display: flex; align-items: center; gap: 4px; }
.xp-srow__a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 9px 0; border: 0; background: none; text-align: left; font: inherit; color: var(--text-muted); font-size: 13px; cursor: pointer; }
.xp-srow__t { flex: 1; min-width: 0; line-height: 1.45; }
.xp-srow__t b { display: block; font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-srow[hidden] { display: none; }
.xp-say { margin: 16px 0 10px; font-size: 24px; }
.xp-info .lc-wx__row { margin: 0 calc(var(--container-pad-x) * -1); padding: 2px var(--container-pad-x) 10px; }
.xp-info .lc-wx__d { background: var(--bg-sunken); border-radius: 10px; width: 62px; margin-right: 4px; }
.xp-inforows { display: flex; flex-direction: column; gap: 0; }
.xp-inforows .gd-info__row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border); background: none; border-radius: 0; }
.xp-inforows .gd-info__icon { width: 24px; height: 24px; background: none; color: var(--text); display: grid; place-items: center; flex: none; }
.xp-inforows .gd-info__icon .icon { width: 22px; height: 22px; }
.xp-inforows .gd-info__label { display: block; font-size: 12.5px; color: var(--text-muted); }
.xp-inforows .gd-info__val { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; }
.xp-inforows .gd-info__consular { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.xp-dock { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
#content.xp { padding-bottom: 84px; }
.xp-hero--co { height: 170px; }
.xp-hero__map { position: absolute; inset: 0; display: none; }
.xp-hero__map #map, .xp-hero__map .map-card { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
.xp-hero__map.is-empty { display: grid; place-items: center; color: var(--text-muted); font-size: 13px; }
.xp-hero--co[data-mode="map"] .xp-hero__map { display: block; }
.xp-hero--co[data-mode="map"] .xp-hero__photo, .xp-hero--co[data-mode="map"] .xp-hero__credit { visibility: hidden; }
.xp-swap { position: absolute; right: 12px; bottom: 12px; height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 8px -2px rgba(16, 20, 27, 0.35); cursor: pointer; z-index: 2; }
.xp-swap .icon { width: 17px; height: 17px; }
.xp-hero--co[data-mode="map"] .xp-hero__bar { right: auto; }
.xp-hero--co[data-mode="map"] .xp-hero__bar > :not(:first-child) { display: none; }
.xp-co__acts { display: none; }
.xp-days { margin: 0 calc(var(--container-pad-x) * -1); padding: 2px var(--container-pad-x) 10px; border-bottom: 1px solid var(--border); }
.xp-days .ui-chip { height: 36px; padding: 0 14px; }
.xp-days .ui-chip b { font-weight: 700; }
.xp-day[hidden] { display: none; }
.xp-day__t { margin: 14px 0 0; font-size: 15px; font-weight: 700; text-wrap: pretty; }
.xp-day__s { margin: 4px 0 4px; font-size: 12.5px; color: var(--text-muted); }
.xp-day__t + .xp-day__s { margin-top: 2px; }
.xp-day > .xp-day__s:first-child { margin-top: 12px; }
.xp-pl { display: flex; align-items: center; gap: 2px; border-radius: 12px; }
.xp-pl.is-focused { background: var(--bg-sunken); box-shadow: 0 0 0 6px var(--bg-sunken); }
.xp-pl__a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 11px 0 10px; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; color: var(--text-muted); font-size: 12.5px; }
.xp-no { width: 24px; height: 24px; border-radius: 50%; background: var(--gd, var(--brand)); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.xp-pl__t { flex: 1; min-width: 0; line-height: 1.45; }
.xp-pl__t b { display: block; font-size: 16px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.xp-pl time { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.xp-leg { display: flex; align-items: center; gap: 6px; margin-left: 11px; padding: 2px 0 2px 18px; border-left: 1.5px solid var(--border); font-size: 12px; color: var(--text-faint); }
.xp-leg .icon { width: 14px; height: 14px; flex: none; }
.xp-leg a { margin-left: 4px; }
.xp-leg--free { color: var(--text-muted); }
.xp-sheet .app-sheet-body { padding-bottom: 4px; }
.xp-box { padding: 0 14px; border-radius: var(--radius-md); background: var(--bg-sunken); }
.xp-box .ui-row { border-bottom: 0; padding: 12px 0; }
.xp-gap { padding-top: 18px; }
.xp-trow > .icon { width: 24px; height: 24px; color: var(--text); flex: none; }
.xp-trow .ui-row__main > b { font-size: 16px; }
.xp-trow--new > .icon, .xp-on { color: var(--brand-fg); }
.xp-on .icon { width: 20px; height: 20px; }
.xp-clist { max-height: 42vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.xp-clist--pick { margin-top: 10px; max-height: 34vh; }
.xp-crow { padding: 9px 0; cursor: pointer; }
.xp-crow.is-dup { opacity: 0.55; cursor: default; }
.xp-tdays { margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.xp-tdays .ui-chip { height: 36px; }
.xp-memo-of { margin: -6px 0 12px; font-size: 13px; color: var(--text-muted); }
.xp-sheet--pl .app-sheet-body { padding-top: 2px; }
.xp-plp { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: var(--bg-sunken); }
.xp-plp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-plp em { position: absolute; right: 8px; bottom: 6px; max-width: 90%; font-style: normal; font-size: 10px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-plh { display: flex; align-items: center; gap: 12px; padding: 14px 0 10px; }
.xp-plh > span { flex: 1; min-width: 0; font-size: 13px; color: var(--text-muted); }
.xp-plh b { display: block; font-size: 20px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.xp-dl { display: flex; gap: 14px; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; text-align: left; align-items: flex-start; }
.xp-dl > span { flex: none; width: 76px; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.xp-dl > b { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--text); line-height: 1.55; text-wrap: pretty; }
.xp-dl--memo { cursor: pointer; }
.xp-dl--memo > b.is-empty { color: var(--text-faint); }
.xp-dl--memo > .icon { width: 18px; height: 18px; color: var(--text-faint); flex: none; margin-top: 2px; }
.xp-more { border-top: 1px solid var(--border); padding: 4px 0; }
.xp-more summary { display: flex; align-items: center; gap: 4px; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; list-style: none; }
.xp-more summary::-webkit-details-marker { display: none; }
.xp-more summary .icon { width: 16px; height: 16px; transition: transform 0.15s; }
.xp-more[open] summary .icon { transform: rotate(90deg); }
.xp-more p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.xp-src { font-size: 12px !important; }
.xp-acts { display: flex; gap: 8px; margin-top: 10px; }
.xp-act { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 64px; padding: 0 4px; border: 0; border-radius: var(--radius-md); background: var(--bg-sunken); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2; }
.xp-act .icon { width: 22px; height: 22px; }
.sv-head { display: flex; align-items: center; gap: 12px; }
.sv-head .t-screen { flex: 1; }
.sv-tog { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-sunken); }
.sv-tog button, .sv-tog a { width: 38px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; }
.sv-tog button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(16, 20, 27, 0.18); }
.sv-tog .icon { width: 20px; height: 20px; }
.sv-view { padding-bottom: 76px; }
@media (min-width: 861px) { .sv-dock { position: static; justify-content: center; margin-top: 18px; } .sv-view { padding-bottom: 0; } }
.sv-tabs { padding: 0; margin-bottom: 4px; }
.sv-line { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 2px; padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sv-line > .icon { width: 22px; height: 22px; color: var(--brand-fg); flex: none; }
.sv-line span { flex: 1; min-width: 0; font-size: 13px; color: var(--text-muted); }
.sv-line b { display: block; font-size: 15px; font-weight: 700; color: var(--brand-fg); }
.sv-row { display: flex; align-items: center; gap: 4px; }
.sv-row__a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 5px 0; border: 0; background: none; font: inherit; text-align: left; color: var(--text-muted); font-size: 12.5px; cursor: pointer; text-decoration: none; }
.sv-row__a .xp-th { width: 44px; height: 44px; border-radius: 9px; }
.sv-row__t { flex: 1; min-width: 0; line-height: 1.4; }
.sv-row__t b { display: block; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-row__t i { font-style: normal; color: var(--brand-fg); }
.sv-row:not(.sv-ccard) .sv-row__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-ccard .xp-crs__pic .xp-th { width: 100%; height: 100%; border-radius: 0; }
.sv-ccard { border-bottom: 1px solid var(--border); }
.sv-ccard .sv-row__a { gap: 14px; padding: 12px 0; font-size: 13px; }
.sv-ccard .xp-crs__pic { width: 104px; height: 78px; }
.sv-ccard .sv-row__t b { font-size: 18px; font-weight: 800; white-space: normal; text-wrap: pretty; }
@media (min-width: 861px) {
  #content.xp { max-width: 980px; padding-bottom: 24px; }
  .xp-cities { margin: 0; padding: 2px 0 10px; scrollbar-width: thin; }
  .xp-co__acts .ui-btn--sm { padding: 0 12px; }
  .xp-co__acts .xp-hbtn:not(.xp-hbtn--ic) { padding: 0 11px 0 8px; font-size: 13px; }
  .xp-list#xp-courses { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .xp-list#xp-courses .xp-crs:nth-last-child(-n + 2) { border-bottom: 0; }
  .xp-dock { display: none; }
  .xp-chead { display: flex; align-items: flex-end; gap: 18px; padding-top: 6px; border-bottom: 1px solid var(--border); }
  .xp-chead .xp-hero { width: 148px; height: 104px; margin: 0 0 12px; border-radius: 14px; flex: none; }
  .xp-chead .xp-hero__bar, .xp-chead .xp-hero__credit { display: none; }
  .xp-chead__main { flex: 1; min-width: 0; }
  .xp-crumb { display: inline-flex; }
  .xp-chead .xp-cname { padding: 4px 0 6px; }
  .xp-chead .xp-tabs { margin: 0; padding: 0; border-bottom: 0; }
  .xp-chead__acts { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 12px; }
  .xp-chead__acts .xp-hbtn { height: 40px; }
  .xp-chead__acts .xp-hbtn--ic { width: 40px; }
  .xp-chips, .xp-info .lc-wx__row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .xp-sgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .xp-srow { border-bottom: 1px solid var(--border); }
  .xp-info { max-width: 620px; }
  .xp-co { display: grid; grid-template-columns: 430px minmax(0, 1fr); grid-template-areas: "list map"; gap: 0; margin: calc(var(--container-pad-y) * -1) calc(var(--container-pad-x) * -1) 0; }
  .xp-co__list { grid-area: list; padding: 14px 24px 24px 28px; border-right: 1px solid var(--border); min-height: calc(100vh - 57px); }
  .xp-hero--co { grid-area: map; position: sticky; top: 57px; height: calc(100vh - 57px); margin: 0; }
  .xp-hero--co .xp-hero__map { display: block; }
  .xp-hero--co .xp-hero__photo, .xp-hero--co .xp-hero__credit, .xp-hero--co .xp-hero__bar, .xp-swap { display: none; }
  .xp-cname--co { padding-top: 6px; }
  .xp-co__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 14px; }
  .xp-co__acts .xp-hbtn { height: 40px; }
  .xp-co__acts .xp-hbtn--ic { width: 40px; }
  .xp-days { margin: 0; padding: 2px 0 10px; }
  #content.xp.xp--course { padding-bottom: 0; }
  body:has(#content.xp--course) .app-footer { display: none; }
  .xp-sheet--pl { width: 400px; }
}
body.xp-smap-on .app-footer, body.xp-smap-on .fb-launcher-btn { display: none; }
@media (max-width: 860px) { body.xp-smap-on .topbar { display: none; } }
body.xp-smap-on .toast { bottom: 190px; }
@media (min-width: 861px) { body.xp-smap-on .toast { bottom: 120px; } }
#content.xp--smap { max-width: none; padding: 0; }
.xp-smap { position: fixed; left: 0; right: 0; top: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 30; background: var(--bg-sunken); }
.xp-smap__map, .xp-smap__map #map, .xp-smap__map .map-card { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
.xp-smap__map { display: grid; place-items: center; color: var(--text-muted); font-size: 13px; }
.xp-smap__bar { position: absolute; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 8px; z-index: 3; }
.xp-smap__q { flex: 1; min-width: 0; min-height: 46px; background: var(--bg); box-shadow: 0 2px 10px -2px rgba(16, 20, 27, 0.35); border-radius: 999px; padding: 0 16px; }
.xp-smap__q input { padding: 11px 0; }
.xp-smap__q input::-webkit-search-cancel-button { display: none; }
.xp-smap__res { position: absolute; left: 12px; right: 12px; top: calc(66px + env(safe-area-inset-top, 0px)); z-index: 3; max-height: 55%; overflow-y: auto; padding: 4px 14px; border-radius: 16px; background: var(--bg); box-shadow: 0 8px 24px -8px rgba(16, 20, 27, 0.4); }
.xp-smap__r { padding: 10px 0; }
.xp-smap__r > .icon { width: 20px; height: 20px; }
.xp-smap__attr { padding: 6px 0 8px; text-align: right; }
.xp-smap__card { position: absolute; left: 12px; right: 12px; bottom: 34px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--bg); box-shadow: 0 8px 24px -8px rgba(16, 20, 27, 0.45); }
.xp-smap__card[hidden], .xp-smap__res[hidden], .xp-smap__hint[hidden] { display: none; }
.xp-smap__t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.xp-smap__t b { display: block; font-size: 16px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-smap__hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 2; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--bg); color: var(--text-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 10px -2px rgba(16, 20, 27, 0.3); max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 861px) {
  .xp-smap { top: 57px; bottom: 0; z-index: 5; }
  .xp-smap__bar, .xp-smap__res { right: auto; width: 400px; left: 16px; }
  .xp-smap__card { right: auto; width: 400px; left: 16px; bottom: 30px; }
}
.fp-view { padding-bottom: 84px; }
.fp-head__acts { display: none; }
.fp-flag { width: 32px; height: 24px; border-radius: 4px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--border); }
.fp-flag--xl { width: 44px; height: 33px; border-radius: 6px; }
.fp-l { display: flex; align-items: center; gap: 22px; padding: 4px 0 18px; }
.fp-globe { width: 150px; height: 150px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; }
.fp-gl { display: block; width: 150px; height: 150px; touch-action: none; }
.fp-globe0 { width: 120px; height: 120px; flex: none; margin: 15px; fill: none; stroke: var(--line); stroke-width: 1.5; }
.fp-n p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.2; padding: 3px 0; }
.fp-n b { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-right: 4px; font-variant-numeric: tabular-nums; }
.fp-grp { margin-top: 0; }
.fp-row { padding: 11px 0; gap: 14px; }
.fp-row .ui-row__main > b { font-size: 16px; }
.fp-row .ui-tag { margin-left: 4px; }
.fp-add { gap: 14px; }
.fp-add > .icon { width: 24px; height: 24px; color: var(--brand-fg); margin: 0 4px; }
.fp-c + .fp-add .ui-row__main > b { color: var(--brand-fg); }
.fp-c + .fp-add { border-bottom: 0; }
.fp-empty__t { margin-top: 10px; }
.fp-empty__rows .ui-row > .icon { width: 24px; height: 24px; color: var(--brand-fg); }
.fp-dock { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.fp-dock .ui-btn--line { background: var(--bg); }
.fp-ch { display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; }
.fp-ch > span { font-size: 13px; color: var(--text-muted); min-width: 0; }
.fp-ch b { display: block; font-size: 22px; font-weight: 800; color: var(--text); }
.fp-cities { padding-bottom: 6px; }
.fp-cities .ui-chip { text-decoration: none; }
.fp-lb { padding-top: 14px; }
.fp-trow { gap: 14px; padding: 9px 0; }
.fp-trow .ui-thumb { object-fit: cover; }
.fp-trow .ui-row__main > b { font-size: 16px; }
.fp-xrow > .icon, .fp-sheet .ui-row > .icon { width: 24px; height: 24px; flex: none; }
.fp-note { margin: 0 0 6px; }
.fp-yq { margin: -8px 0 12px; font-size: 13px; color: var(--text-muted); }
.fp-yrs { display: grid; grid-template-columns: repeat(3, 1fr); }
.fp-yrs > * { height: 44px; padding: 0; font-variant-numeric: tabular-nums; }
.fp-sheet--pick .app-sheet-body { display: flex; flex-direction: column; min-height: 0; }
.fp-pq { margin-bottom: 10px; }
.fp-pg { padding-bottom: 8px; }
.fp-plist { flex: 1; min-height: 180px; max-height: 46vh; overflow-y: auto; }
.fp-pr { display: flex; align-items: center; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--border); cursor: pointer; }
.fp-pr > span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
.fp-pr b { display: block; font-size: 16px; font-weight: 600; color: var(--text-muted); }
.fp-pr.is-on b { color: var(--text); font-weight: 700; }
.fp-pr.is-lock { cursor: default; }
.fp-pr.is-lock .ui-check { opacity: 0.45; }
.fp-pr .ui-check { border-radius: 50%; }
.fp-pfoot { margin-top: 12px; }
.fp-cd__l { display: grid; place-items: center; min-height: 200px; }
.fp-cd__cv { display: block; width: 100%; max-width: 300px; height: auto; border-radius: 16px; box-shadow: 0 10px 28px -14px rgba(16, 20, 27, 0.5); }
.fp-sw { padding: 12px 0; }
.fp-sw .ui-row__main > b { font-size: 15px; }
.ui-switch-i { width: 46px; height: 28px; border-radius: 999px; background: var(--border-strong); position: relative; flex: none; transition: background 0.15s; }
.ui-switch-i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.ui-switch-i.is-on { background: var(--brand); }
.ui-switch-i.is-on::after { left: 21px; }
.fp-cd__r { padding-top: 10px; }
.fp-cd__b { display: flex; gap: 8px; padding-top: 14px; }
.fp-cd__b > * { flex: 1; }
body.fp-over-on { overflow: hidden; }
.fp-over:focus { outline: 0; }
.fp-over { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; background: #050914; color: #fff; }
.fp-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fp-over__top { position: relative; display: flex; align-items: center; height: 56px; padding: 0 8px; padding-top: env(safe-area-inset-top, 0px); }
.fp-over__top b { flex: 1; text-align: center; font-size: 17px; font-weight: 800; }
.fp-over__top > span { width: 44px; }
.fp-over__x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: #fff; border-radius: 50%; cursor: pointer; }
.fp-over__x .icon { width: 24px; height: 24px; }
.fp-over__g { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.fp-gl--l { width: min(86vw, 62vh, 520px); height: min(86vw, 62vh, 520px); cursor: grab; }
.fp-over__hint { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }
.fp-over__now { position: relative; padding: 6px 20px 14px; }
.fp-over__now p { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.fp-over__now span { font-size: 14px; color: rgba(255, 255, 255, 0.66); }
.fp-over__chips { position: relative; display: flex; gap: 8px; padding: 0 20px calc(22px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; scrollbar-width: none; flex: none; }
.fp-over__chips::-webkit-scrollbar { display: none; }
.fp-gchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; flex: none; }
.fp-gchip .fp-flag { width: 24px; height: 18px; border-radius: 3px; box-shadow: none; }
.fp-gchip.is-on { background: #fff; color: #10141b; }
@media (min-width: 861px) {
  .av-wrap[data-view="footprint"] { max-width: 880px; }
  .fp-view { padding-bottom: 0; }
  .fp-head__acts { display: inline-flex; gap: 8px; }
  .fp-dock, .fp-c + .fp-add { display: none; }
  .fp-g { display: grid; grid-template-columns: 270px minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .fp-g--empty { display: block; }
  .fp-g:not(.fp-g--empty) .fp-l { flex-direction: column; gap: 14px; padding-top: 10px; }
  .fp-g:not(.fp-g--empty) .fp-globe, .fp-g:not(.fp-g--empty) .fp-gl { width: 230px; height: 230px; }
  .fp-g:not(.fp-g--empty) .fp-n { display: flex; gap: 22px; }
  .fp-c { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .fp-sheet--pick { width: 540px; }
  .fp-plist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-content: start; }
  .fp-sheet--card { width: 660px; }
  .fp-cd { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .fp-cd__r { padding-top: 0; }
  .fp-cd__b { flex-direction: column-reverse; }
  .fp-over__now, .fp-over__chips { padding-left: 40px; padding-right: 40px; }
}
.fp-row .ui-tag, .fp-view em.ui-tag { font-style: normal; }
@media (min-width: 861px) { .fp-cd__b > * { flex: none; } }
.xp-day__s { display: flex; align-items: center; gap: 8px; }
.xp-day__s > span { flex: 1; min-width: 0; }
.xp-day__add { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 4px 0 6px; border: 0; background: none; color: var(--brand-fg, var(--brand)); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: var(--radius-sm); white-space: nowrap; }
.xp-day__add .icon { width: 14px; height: 14px; }
.xp-pl__add { flex: none; height: 30px; padding: 0 10px; margin-left: 6px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; position: relative; }
.xp-pl__add::after { content: ""; position: absolute; inset: -6px -2px; }
.xp-pl__add:hover, .xp-day__add:hover { background: var(--bg-sunken); }
@media (max-width: 640px) { #content.xp, .sv-view, .fp-view { padding-bottom: 0; } }
.xp-smap { bottom: calc(var(--tabbar-h, 56px) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 861px) { .xp-smap { top: 69px; bottom: 0; } .xp-smap__bar { top: 16px; } }
.xp-city { position: relative; }
.xp-city > .photo-ci { right: 6px; top: 82px; }
.xp-hero > .photo-ci { display: none; right: 6px; bottom: 6px; }
@media (min-width: 861px) { .xp-chead .xp-hero > .photo-ci { display: inline-flex; } }
.xp-hero > .photo-ci { display: inline-flex; bottom: 8px; }
.xp-hero:has(> .photo-ci) > .xp-hero__credit { display: none; }
.fpc-sec { margin-bottom: 18px; min-width: 0; }
.fpc-grp { display: flex; align-items: baseline; }
.fpc-grp > span { margin-left: 6px; }
.fpc-all { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.fpc-all .icon { width: 14px; height: 14px; }
.fpc-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; scroll-snap-type: x proximity; }
.fpc-strip::-webkit-scrollbar { display: none; }
.fpc { position: relative; flex: none; width: 104px; padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden; background: #0b1226; color: #fff; text-align: left; font: inherit; cursor: pointer; scroll-snap-align: start; }
.fpc-art { display: block; aspect-ratio: 1; overflow: hidden; background: #050a18; }
.fpc-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fpc-art--flag { display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, #1a2c5c 0, #0b1226 72%); }
.fpc-art--flag > .fp-flag { width: 46%; height: auto; aspect-ratio: 4 / 3; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.fpc__t { display: block; padding: 7px 9px 9px; font-size: 10.5px; line-height: 1.35; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpc__t > b { display: block; font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.fpc.is-lock .fpc-art > img { filter: grayscale(1) brightness(.42) contrast(1.1); }
.fpc.is-lock .fpc__t { opacity: .55; }
.fpc__lk { position: absolute; left: 50%; top: 0; width: 26px; aspect-ratio: 1; margin: calc(50% - 22px) 0 0 -13px; border-radius: 50%; background: rgba(255, 255, 255, .16); backdrop-filter: blur(4px); }
.fpc__lk::before { content: ""; position: absolute; left: 8px; top: 11px; width: 10px; height: 8px; border-radius: 2px; background: #fff; }
.fpc__lk::after { content: ""; position: absolute; left: 9.5px; top: 5.5px; width: 7px; height: 8px; border: 1.6px solid #fff; border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
@media (min-width: 861px) { .fpc-strip { margin-right: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; } .fpc { width: 112px; } }
.fp-over.fpk, .fp-over.fpo { background: radial-gradient(120% 70% at 50% 12%, #0f1b3d 0%, #060b1a 62%, #03060f 100%); }
.fpk__n { width: auto !important; margin-right: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fpk .fp-over__top > b { padding-left: 0; }
.fpk__prog { flex: none; display: flex; align-items: center; gap: 12px; padding: 2px 18px 12px; }
.fpk__prog > span { flex: none; font-size: 13px; color: rgba(255, 255, 255, .66); font-variant-numeric: tabular-nums; }
.fpk__prog > span > b { font-size: 17px; font-weight: 800; color: #ffcf7a; }
.fpk__bar { flex: 1; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.fpk__bar > i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #ffd98a, #ff9d2e); }
.fpk__grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; grid-auto-rows: max-content; padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 1040px; margin: 0 auto; box-sizing: border-box; }
.fpk__grid .fpc { width: auto; }
@media (min-width: 700px) { .fpk__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 22px 28px 40px; } .fpk__grid .fpc__t { font-size: 12px; padding: 9px 11px 11px; } .fpk__grid .fpc__t > b { font-size: 14.5px; } }
.fpo__in { flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 400px; margin: 0 auto; padding: 4px 26px calc(24px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; text-align: center; }
.fpo__in > .fpc-art { border-radius: 22px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.fpo__in > h2 { margin: 18px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.fpo__s { margin: 0; font-size: 13.5px; color: #b9c6e0; }
.fpo__st { display: flex; margin: 16px 0 18px; }
.fpo__st > span { flex: 1; font-size: 11.5px; color: #8fa0c4; }
.fpo__st b { display: block; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.fpo__b { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 46px; margin-bottom: 8px; border: 0; border-radius: 14px; background: #fff; color: #10141b; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.fpo__b--q { background: rgba(255, 255, 255, .12); color: #fff; }
.fpo__b .icon { width: 18px; height: 18px; }
.fpo__b:disabled { opacity: .6; }
.fp-over.fp3 { background: radial-gradient(120% 70% at 50% 46%, #0a1430 0%, #040714 58%, #010208 100%); overflow: hidden; }
.fp3__cv { position: absolute; inset: 0; width: 100%; height: 100%; outline: 0; }
.fp3 > :not(.fp3__cv):not(.fp3-label) { position: relative; z-index: 2; }
.fp3__top { pointer-events: none; } .fp3__top > button { pointer-events: auto; }
.fp3__hb { display: inline-flex; align-items: center; gap: 5px; height: 32px; margin-right: 10px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fp3__hb .icon { width: 15px; height: 15px; }
.fp3__hero { padding: 2px 22px 0; pointer-events: none; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.fp3__hero > small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #ffcf7a; }
.fp3__hero > b { display: block; font-size: 46px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fp3__hero > b > i { font-style: normal; font-size: 17px; font-weight: 700; margin-left: 6px; letter-spacing: 0; opacity: .9; }
.fp3__hero > span { font-size: 13px; color: #b9c6e0; }
.fp3__ask { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: calc(100% - 32px); margin: 12px 16px 0; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(14, 22, 46, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(12px); font-size: 12.5px; color: #dfe7f7; }
.fp3__ask[hidden] { display: none; }
.fp3__ask > button { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: linear-gradient(140deg, #ffd98a, #ff9d2e); color: #1a1206; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.fp-over.fp3 > .fp3__pop { position: absolute; left: 14px; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 0; border-radius: 18px; background: rgba(14, 22, 46, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px -18px #000; backdrop-filter: blur(14px); color: #fff; font: inherit; text-align: left; cursor: pointer; animation: fp3pop .32s cubic-bezier(.2, .9, .3, 1.2); }
.fp-over.fp3 > .fp3__pop[hidden] { display: none; }
@keyframes fp3pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.fp3__pop > .fpc-art { flex: none; width: 60px; border-radius: 13px; }
.fp3__pt { flex: 1; min-width: 0; font-size: 12px; color: #b9c6e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp3__pt > b { display: block; font-size: 16px; color: #fff; }
.fp3__pop > em { flex: none; display: inline-flex; align-items: center; font-style: normal; font-size: 12.5px; font-weight: 700; color: #ffd08a; }
.fp3__pop > em .icon { width: 14px; height: 14px; }
.fp-over.fp3 > .fp3__tl { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; padding-left: 16px; }
.fp3__play { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(140deg, #ffd98a, #ff9d2e); display: grid; place-items: center; box-shadow: 0 6px 22px rgba(255, 160, 50, .45); cursor: pointer; }
.fp3__play > i { border-left: 13px solid #1a1206; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.fp3__play.is-on > i { border: 0; width: 13px; height: 14px; margin: 0; background: linear-gradient(90deg, #1a1206 0 4px, transparent 4px 9px, #1a1206 9px); }
.fp3__tls { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-right: 28px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.fp3__tls::-webkit-scrollbar { display: none; }
.fp3__tls > button { flex: none; max-width: 150px; padding: 6px 12px 7px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); backdrop-filter: blur(8px); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.fp3__tls small { display: block; font-size: 10px; color: #9fb0d2; font-variant-numeric: tabular-nums; }
.fp3__tls b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp3__tls > button.is-on { background: rgba(255, 190, 90, .2); box-shadow: inset 0 0 0 1.5px #ffc566; }
.fp3__tls > button.is-on small { color: #ffd995; }
.fp-over.fp3 > .fp3__cred { position: absolute; right: 12px; top: calc(60px + env(safe-area-inset-top, 0px)); margin: 0; font-size: 10px; color: rgba(255, 255, 255, .34); pointer-events: none; }
.fp3-label { position: absolute; z-index: 3; transform: translate(-50%, -100%); max-width: 70vw; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .96); color: #10141b; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.fp3-label[hidden] { display: none; }
@media (min-width: 861px) {
  .fp3__hero { padding: 10px 40px 0; } .fp3__hero > b { font-size: 60px; }
  .fp3__ask { margin-left: 40px; }
  .fp-over.fp3 > .fp3__pop { left: 40px; right: auto; width: 340px; bottom: 96px; }
  .fp-over.fp3 > .fp3__tl { padding-left: 40px; bottom: 26px; }
  .fp-over.fp3 > .fp3__cred { right: 24px; top: auto; bottom: 8px; }
}
.app-sheet-backdrop:has(.fp-sheet--home), .app-sheet-backdrop.fp-sheet--home { z-index: 1310; }
.fp-hlist { max-height: min(46vh, 380px); overflow-y: auto; }
.fp-hlist .ui-row[aria-current="true"] .ui-row__main > b { color: var(--brand-fg); }
@media (min-width: 861px) {
  #content.xp:not(.xp--course) { max-width: 960px; }
  .av-wrap[data-view="saved"], .av-wrap[data-view="footprint"] { max-width: 960px; }
}
@media (min-width: 641px) {
  body:has(#content.xp) > .container { display: flex; flex-direction: column; min-height: calc(100vh - 69px); min-height: calc(100dvh - 69px); box-sizing: border-box; }
  body:has(#content.xp) > .container > .app-footer { margin-top: auto; }
  body:has(#content.xp) > .container > #content { width: 100%; margin-bottom: 40px; }
  body:has(#content.xp--course) > .container > #content { margin-bottom: 0; }
}
@media (min-width: 861px) { html:has(#mytrips), html:has(#content.xp) { scrollbar-gutter: stable; } }
@media (max-width: 640px) {
  .fp-over.fpo { position: fixed; }
  .fp-over.fpo > .fp-over__top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
  .fp-over.fpo > .fp-over__top .fp-over__x { background: rgba(0, 0, 0, .35); border-radius: 50%; }
  .fpo__in { max-width: none; display: flex; flex-direction: column; padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
  .fpo__in > .fpc-art { position: relative; flex: none; aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }
  .fpo__in > .fpc-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(rgba(6, 11, 26, 0), #060b1a); }
  .fpo__in > h2 { position: relative; z-index: 1; margin: -34px 22px 2px; font-size: 30px; }
  .fpo__s, .fpo__st { padding: 0 22px; }
  .fpo__s { font-size: 14px; }
  .fpo__st b { font-size: 19px; }
  .fpo__bt { display: flex; gap: 8px; margin-top: auto; padding: 0 16px; }
  .fpo__bt > .fpo__b { flex: 1; margin: 0; height: 50px; font-size: 14.5px; }
}
@media (max-width: 640px) {
  .fpo__in { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
  .fpo__in > .fpc-art { width: 88%; align-self: center; margin-top: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 9%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 9%); mask-composite: intersect; }
  .fpo__in > .fpc-art::after { height: 22%; }
  .fpo__in > h2 { margin: 14px 22px 4px; }
  .fpo__st { margin-bottom: 8px; }
}