:root {
  --bg: #090b0e;
  --panel: #101419;
  --panel-2: #151a20;
  --line: rgba(255,255,255,.09);
  --text: #f2f0e9;
  --muted: #8e969f;
  --gold: #c7a56a;
  --gold-soft: rgba(199,165,106,.14);
  --blue: #7da7c7;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
main { min-height: 100vh; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }

/* Atmospheric weather layer: restrained so the itinerary remains primary. */
.weather-page { position: relative; isolation: isolate; overflow: clip; background: #090b0e; }
.weather-content { position: relative; z-index: 2; }
.weather-scene { position: fixed; z-index: 0; inset: 0; left: 50%; width: min(760px, 100%); translate: -50% 0; overflow: hidden; pointer-events: none; transition: background 1s ease; }
.weather-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,9,.05), rgba(7,9,12,.58) 46%, rgba(9,11,14,.92) 100%); }

.sun-orb { position: absolute; top: -90px; right: -88px; width: 330px; aspect-ratio: 1; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(255,247,207,.98) 0 8%, rgba(238,196,111,.68) 17%, rgba(199,165,106,.22) 42%, transparent 70%); filter: blur(1px); transform: scale(.82); transition: opacity .8s ease, transform 1.2s ease; }
.sun-orb::after { content: ""; position: absolute; inset: -45%; border-radius: 50%; background: repeating-conic-gradient(from 8deg, rgba(236,203,139,.1) 0deg 3deg, transparent 4deg 18deg); filter: blur(12px); animation: sun-turn 42s linear infinite; }
.sun-haze { position: absolute; border-radius: 50%; opacity: 0; filter: blur(30px); transition: opacity 1s ease; animation: haze-drift 13s ease-in-out infinite alternate; }
.sun-haze-one { top: 180px; right: 8%; width: 180px; height: 100px; background: rgba(207,170,104,.16); }
.sun-haze-two { top: 43vh; left: -40px; width: 230px; height: 150px; background: rgba(151,126,82,.09); animation-delay: -6s; }
.weather-sun .sun-orb { opacity: 1; transform: scale(1); }
.weather-sun .sun-haze { opacity: 1; }
.weather-sun .weather-scene { background: radial-gradient(circle at 84% 4%, rgba(174,137,72,.2), transparent 35%), linear-gradient(180deg, #14120e 0%, #0e0f0f 38%, #090b0e 100%); }

.rain-still, .rain-animation { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(.3px) brightness(.88) saturate(.86); transform: scale(1.025); transition: opacity .8s ease; }

.rain-mist, .rain-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.rain-mist { background: radial-gradient(ellipse at 25% 8%, rgba(128,169,168,.3), transparent 38%), radial-gradient(ellipse at 78% 24%, rgba(71,111,119,.28), transparent 42%), linear-gradient(180deg, rgba(38,74,76,.9), rgba(18,42,46,.7) 48%, rgba(8,17,21,.35)); filter: blur(3px) saturate(.82); transform: scale(1.04); }
.rain-layer { background-repeat: repeat; will-change: background-position, transform; }

/* Out-of-focus drops behind the pane: soft trails that creep downward. */
.rain-far {
  inset: -18% -8%;
  background-image:
    radial-gradient(ellipse at 50% 18%, rgba(181,215,214,.16) 0 1px, transparent 3px),
    linear-gradient(180deg, transparent 0 34%, rgba(173,206,207,.13) 38% 68%, transparent 73%);
  background-size: 31px 96px, 79px 210px;
  filter: blur(5.5px) saturate(.72);
  animation: glass-rivulets 13s linear infinite;
}

/* Fine beads on the glass, with a bright shoulder and a dark lower rim. */
.rain-mid {
  background-image:
    radial-gradient(ellipse at 34% 25%, rgba(235,247,245,.55) 0 1px, transparent 2px),
    radial-gradient(ellipse at 52% 55%, rgba(15,34,37,.58) 0 3px, rgba(137,174,175,.23) 4px, transparent 6px),
    radial-gradient(ellipse at 38% 28%, rgba(229,244,242,.38) 0 1px, transparent 2px),
    radial-gradient(ellipse at 52% 58%, rgba(11,27,31,.5) 0 2px, rgba(140,176,177,.2) 3px, transparent 5px);
  background-size: 43px 61px, 43px 61px, 79px 103px, 79px 103px;
  background-position: 3px 7px, 3px 7px, 29px 47px, 29px 47px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.48));
}

/* Larger foreground droplets move very slowly, like water gathering on a window. */
.rain-near {
  inset: -8% -4%;
  background-image:
    radial-gradient(ellipse at 39% 27%, rgba(247,252,249,.7) 0 1.2px, transparent 2.4px),
    radial-gradient(ellipse at 52% 58%, rgba(7,22,25,.72) 0 5px, rgba(157,193,192,.3) 6px, transparent 9px),
    radial-gradient(ellipse at 35% 23%, rgba(239,249,246,.55) 0 1px, transparent 2px),
    radial-gradient(ellipse at 52% 59%, rgba(8,24,27,.65) 0 3.5px, rgba(152,188,187,.28) 4.5px, transparent 7px);
  background-size: 109px 127px, 109px 127px, 157px 181px, 157px 181px;
  background-position: 21px 15px, 21px 15px, 71px 83px, 71px 83px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
  animation: heavy-drops 22s cubic-bezier(.45,0,.55,1) infinite;
}

/* A sparse quicker layer breaks the shared rhythm of the slower trails. */
.rain-fast {
  inset: -14% -3%;
  background-image:
    radial-gradient(ellipse at 42% 26%, rgba(239,249,247,.42) 0 1px, transparent 2px),
    radial-gradient(ellipse at 52% 53%, rgba(8,25,29,.58) 0 2px, rgba(149,187,186,.2) 3px, transparent 5px),
    linear-gradient(180deg, transparent 0 28%, rgba(170,203,202,.12) 35% 71%, transparent 76%);
  background-size: 137px 193px, 137px 193px, 223px 347px;
  background-position: 91px -27px, 91px -27px, 37px -103px;
  filter: blur(2.2px) saturate(.8) drop-shadow(0 1px 2px rgba(0,0,0,.38));
  animation: quick-drops 7.4s cubic-bezier(.38,.04,.62,.98) infinite;
}

/* Sparse broken rain beyond the glass, angled by wind rather than forming a curtain. */
.rain-streaks {
  inset: -22% -18%;
  background-image:
    linear-gradient(166deg, transparent 0 43%, rgba(220,237,236,.26) 44% 45.5%, transparent 47% 100%),
    linear-gradient(166deg, transparent 0 61%, rgba(205,228,227,.18) 62% 63%, transparent 64.5% 100%);
  background-size: 127px 263px, 211px 379px;
  background-position: 17px -119px, 103px -287px;
  filter: blur(.8px);
  transform: rotate(-4deg);
  animation: slant-rain 2.8s linear infinite;
}

/* Stationary beads use mismatched tile sizes, so their distribution feels organic. */
.rain-static {
  background-image:
    radial-gradient(ellipse at 35% 20%, rgba(255,255,252,.86) 0 1.8px, transparent 3.5px),
    radial-gradient(ellipse at 53% 60%, rgba(3,17,20,.8) 0 9px, rgba(177,212,207,.34) 10px, transparent 14px),
    radial-gradient(ellipse at 34% 22%, rgba(255,255,250,.82) 0 1px, transparent 2px),
    radial-gradient(ellipse at 52% 57%, rgba(5,20,23,.78) 0 4px, rgba(172,205,201,.32) 5px, transparent 7px),
    radial-gradient(ellipse at 31% 24%, rgba(250,255,251,.68) 0 1px, transparent 2px),
    radial-gradient(ellipse at 52% 58%, rgba(6,21,24,.68) 0 2px, rgba(174,208,203,.3) 3px, transparent 5px),
    radial-gradient(ellipse at 38% 26%, rgba(248,255,252,.58) 0 .5px, transparent 1.2px),
    radial-gradient(ellipse at 53% 60%, rgba(8,24,27,.6) 0 .9px, rgba(161,198,195,.25) 1.7px, transparent 2.7px);
  background-size: 293px 347px, 293px 347px, 173px 211px, 173px 211px, 97px 139px, 97px 139px, 53px 83px, 53px 83px;
  background-position: 137px 79px, 137px 79px, 23px 41px, 23px 41px, 71px 19px, 71px 19px, 11px 67px, 11px 67px;
  filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.65));
}
.weather-rain .rain-still, .weather-rain .rain-animation { opacity: .9; }
.weather-rain .rain-mist { opacity: .16; }
.weather-rain .rain-far,
.weather-rain .rain-mid,
.weather-rain .rain-near,
.weather-rain .rain-fast,
.weather-rain .rain-streaks,
.weather-rain .rain-static { opacity: 0; }
.weather-rain .weather-scene { background: linear-gradient(180deg, #315b5b 0%, #173b40 43%, #09151a 100%); }
.weather-rain .weather-scene::after { background: linear-gradient(180deg, rgba(2,13,16,.04), rgba(5,14,18,.36) 48%, rgba(9,11,14,.91) 100%); box-shadow: inset 0 0 90px rgba(0,0,0,.28); }

@keyframes sun-turn { to { transform: rotate(360deg); } }
@keyframes haze-drift { to { transform: translate3d(28px, 18px, 0) scale(1.12); } }
@keyframes glass-rivulets { from { background-position: 0 -210px, 17px -420px; } to { background-position: 0 210px, 17px 420px; } }
@keyframes heavy-drops { 0%, 18% { transform: translateY(-8px); } 48%, 72% { transform: translateY(8px); } 100% { transform: translateY(26px); } }
@keyframes quick-drops { 0%, 9% { transform: translateY(-18px); } 66% { transform: translateY(32px); } 100% { transform: translateY(62px); } }
@keyframes slant-rain { from { background-position: 17px -263px, 103px -379px; } to { background-position: -37px 263px, 49px 379px; } }

.hero { position: relative; overflow: hidden; padding: max(42px, env(safe-area-inset-top)) 20px 22px; border-bottom: 1px solid var(--line); }
.hero-glow { position: absolute; width: 310px; height: 310px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(199,165,106,.23), transparent 68%); pointer-events: none; }
.eyebrow, .section-kicker { color: var(--gold); font-size: 11px; letter-spacing: .22em; font-weight: 700; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
h1 { margin: 14px 0 2px; font-family: "Songti SC", "STSong", serif; font-size: clamp(44px, 13vw, 72px); line-height: 1; letter-spacing: .08em; font-weight: 500; }
.hero-copy { margin: 10px 0 24px; color: var(--muted); letter-spacing: .12em; font-size: 13px; }
.status-card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 15px 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(130deg, rgba(255,255,255,.06), rgba(255,255,255,.018)); backdrop-filter: blur(12px); }
.status-card .muted { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.status-card strong { font-size: 14px; }
.status-card button { border: 0; color: var(--gold); background: transparent; padding: 8px 0 8px 12px; cursor: pointer; font-size: 12px; }
.progress-track { grid-column: 1 / -1; height: 2px; overflow: hidden; background: rgba(255,255,255,.09); border-radius: 9px; }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg, #9b7a45, #e0c28b); transition: width .4s ease; }

.mode-wrap { position: sticky; top: 0; z-index: 20; display: flex; gap: 9px; padding: 11px 16px; background: rgba(9,11,14,.76); backdrop-filter: blur(18px) saturate(125%); border-bottom: 1px solid var(--line); }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; flex: 1; padding: 3px; border: 1px solid var(--line); border-radius: 13px; background: #0c0f13; }
.mode-switch button { border: 0; border-radius: 10px; padding: 9px 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; }
.mode-switch button span { margin-right: 5px; }
.mode-switch button.active { color: #17120b; background: var(--gold); font-weight: 700; }
.mode-switch button.active.rain { color: #08131b; background: var(--blue); }
.booking-button { border: 1px solid var(--line); border-radius: 13px; padding: 0 12px; color: var(--text); background: var(--panel); cursor: pointer; font-size: 11px; white-space: nowrap; }
.booking-button b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; color: #17120b; background: var(--gold); font-size: 10px; }

.booking-panel { margin: 12px 16px; padding: 20px; border: 1px solid rgba(199,165,106,.27); border-radius: 18px; background: linear-gradient(145deg, var(--gold-soft), rgba(255,255,255,.02)); }
.booking-panel h2 { margin: 6px 0 15px; font-family: "Songti SC", serif; font-size: 24px; font-weight: 500; }
.booking-list { display: grid; gap: 10px; }
.booking-list article { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.booking-list time { color: var(--gold); font-size: 11px; }
.booking-list strong { font-size: 13px; }
.booking-list p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.day-tabs { display: flex; gap: 8px; padding: 15px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.day-tabs::-webkit-scrollbar { display: none; }
.day-tabs button { flex: 0 0 62px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--panel); cursor: pointer; }
.day-tabs button span, .day-tabs button small { display: block; }
.day-tabs button span { color: var(--text); font-size: 13px; }
.day-tabs button small { margin-top: 3px; font-size: 10px; }
.day-tabs button.active { border-color: var(--gold); background: var(--gold-soft); }
.day-tabs button.active span { color: var(--gold); }

.itinerary { padding: 12px 16px 18px; }
.day-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 3px 16px; }
.day-heading h2 { margin: 5px 0 3px; font-family: "Songti SC", serif; font-weight: 500; font-size: 27px; }
.day-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.today-badge { padding: 5px 9px; color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(199,165,106,.28); border-radius: 99px; font-size: 10px; }
.hotel-line { margin-bottom: 14px; padding: 12px 14px; color: #bdc3c8; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 11px; }
.hotel-line span { margin-right: 10px; color: var(--gold); font-weight: 700; }
.timeline { position: relative; }
.stop { background: transparent; }
.stop summary { display: grid; grid-template-columns: 51px 28px minmax(0,1fr) 20px; gap: 8px; min-height: 88px; list-style: none; cursor: pointer; }
.stop summary::-webkit-details-marker { display: none; }
.time { padding-top: 13px; text-align: right; }
.time strong { display: block; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 13px; }
.time span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 10px; }
.rail { position: relative; display: flex; justify-content: center; }
.rail::after { content: ""; position: absolute; top: 31px; bottom: -9px; left: 50%; width: 1px; background: var(--line); }
.stop:last-child .rail::after { display: none; }
.rail i { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 10px; border: 1px solid #48505a; border-radius: 50%; color: var(--muted); background: var(--bg); font-size: 9px; font-style: normal; }
.stop-main { padding: 11px 0 15px; border-bottom: 1px solid var(--line); min-width: 0; }
.stop-main h3 { margin: 5px 0 3px; font-size: 16px; font-weight: 650; }
.stop-main p { margin: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.stop-topline { display: flex; align-items: center; gap: 7px; }
.kind { padding: 2px 6px; border-radius: 4px; color: var(--gold); background: var(--gold-soft); font-size: 9px; font-weight: 700; }
.kind.food { color: #63d6b3; background: rgba(99,214,179,.14); }
.kind.travel, .kind.flight { color: #9abbd3; background: rgba(125,167,199,.12); }
.kind.hotel { color: #aab7ad; background: rgba(150,175,157,.12); }
.now-label { color: #111; background: var(--gold); border-radius: 4px; padding: 2px 6px; font-size: 9px; font-weight: 700; }
.chevron { align-self: center; color: #666f78; font-size: 18px; transition: transform .25s ease; }
.stop[open] .chevron { transform: rotate(45deg); }
.stop-detail { margin: -3px 0 12px 87px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.stop-detail > p { margin: 0 0 10px; color: #c7ccd0; font-size: 12px; line-height: 1.75; }
.stop-detail a { display: inline-block; margin-top: 11px; color: var(--gold); font-size: 11px; text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips span { color: var(--muted); font-size: 10px; }
.chips em { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: #c5c9cc; font-size: 10px; font-style: normal; }
.booking-note { margin-top: 10px; padding: 9px 10px; color: #d7c7a9; background: var(--gold-soft); border-left: 2px solid var(--gold); font-size: 11px; line-height: 1.6; }
.booking-note b { margin-right: 8px; color: var(--gold); }
.stop.done { opacity: .48; }
.stop.done .rail i { border-color: #4e6657; color: #94b29f; }
.stop.now .rail i { color: #17120b; border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px rgba(199,165,106,.1); }
.stop.now .stop-main h3 { color: var(--gold); }

footer { margin: 8px 16px 0; padding: 22px 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.7; }
footer span { color: #c3c7ca; letter-spacing: .12em; }

@media (min-width: 760px) {
  main { width: min(760px, 100%); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .hero { padding-left: 36px; padding-right: 36px; }
  .mode-wrap, .day-tabs, .itinerary { padding-left: 28px; padding-right: 28px; }
  .booking-panel { margin-left: 28px; margin-right: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .sun-orb::after, .sun-haze, .rain-layer { animation: none !important; }
  .weather-rain .rain-animation { display: none; }
}