:root {
  color-scheme: light;
  interpolate-size: allow-keywords;
  --jade: #0E8F72; --jade-ink: #0A7A60; --jade-soft: #D3F2E8; --jade-full: #2CC29C;
  --pink: #F4589C; --pink-ink: #B8195F; --pink-soft: #FDDDEB; --pink-full: #F4589C;
  --sun: #FFD02E; --sun-ink: #6E5300; --sun-soft: #FFF1B8; --sun-full: #FFD02E;
  --sky: #3FB4EA; --sky-ink: #0A6A9C; --sky-soft: #D5EFFB; --sky-full: #3FB4EA;
  --bg: #F3F8F6; --card: #FFFFFF; --ink: #12302A; --ink-2: #47635B; --line: #DCE8E3;
  --dark-ink: #12302A;
  --shadow: 0 1px 2px rgb(18 48 42 / .05), 0 10px 24px -8px rgb(18 48 42 / .14);
  --lift: 0 2px 4px rgb(18 48 42 / .08), 0 18px 34px -10px rgb(18 48 42 / .26);
  --r: 22px; --ease: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
  --dock: calc(84px + env(safe-area-inset-bottom));
}
:root[data-mode="dark"] {
  color-scheme: dark;
  --jade: #2CC29C; --jade-ink: #5FDCBC; --jade-soft: #123A31;
  --pink: #FF7BB3; --pink-ink: #FF9CC6; --pink-soft: #43182D;
  --sun: #FFD84F; --sun-ink: #FFE07A; --sun-soft: #3A3010;
  --sky: #63C6F2; --sky-ink: #8AD6F7; --sky-soft: #123446;
  --bg: #0C1513; --card: #15211E; --ink: #E8F2EE; --ink-2: #A5BAB3; --line: #26362F;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 24px -10px rgb(0 0 0 / .5);
  --lift: 0 2px 4px rgb(0 0 0 / .3), 0 18px 34px -10px rgb(0 0 0 / .6);
}

/* The page takes the colour of the day on show */
.d-jade { --c: var(--jade-full); --c-ink: var(--jade-ink); --c-soft: var(--jade-soft); }
.d-pink { --c: var(--pink-full); --c-ink: var(--pink-ink); --c-soft: var(--pink-soft); }
.d-sun { --c: var(--sun-full); --c-ink: var(--sun-ink); --c-soft: var(--sun-soft); }
.d-sky { --c: var(--sky-full); --c-ink: var(--sky-ink); --c-soft: var(--sky-soft); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  --page: color-mix(in srgb, var(--c-soft) 62%, var(--bg));
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans Thai", "Thonburi", sans-serif;
  padding-bottom: calc(var(--dock) + 20px); overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .7s var(--ease);
}
::selection { background: var(--sun); color: #12302A; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 8px; }
main:focus { outline: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; font-family: var(--display); }
a { color: var(--c-ink); text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.s { width: 18px; height: 18px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }

/* The living city */
.top {
  --s: 0; --ink-h: #12302A;
  position: relative; overflow: hidden; max-width: 560px; margin: 0 auto;
  height: calc(min(80vw, 448px) + env(safe-area-inset-top));
  transition: height .6s var(--ease);
  isolation: isolate;
}
.top.compact { height: calc(min(44vw, 246px) + env(safe-area-inset-top)); }
.scene { position: absolute; inset: auto 0 -1px 0; width: 100%; height: auto; aspect-ratio: 5 / 4; display: block; z-index: -1; }
.scene * { transition: fill .9s var(--ease), stroke .9s var(--ease), opacity .9s var(--ease); }
.ly { transform: translateY(calc(var(--s) * var(--k) * 1px)); }
.scene.rest * { animation-play-state: paused !important; }

.scene { --s0: #8FD6F5; --s1: #AEE4F9; --s2: #CDEFFC; --far: #8FDCC8; --mid: #2CC29C; --tw: #0E8F72; --tw2: #16A684; --tmp: #F4589C; --tmp2: #FF9CC6; --band: #FFD02E; --via: #12302A; --bank: #0A7A60; --riv: #3FB4EA; --wv: #BFEAFB; --cloud: #FFFFFF; --disc: #FFD02E; --halo: #FFE98C; --win: #BDEDE0; --train: #FFD02E; --tstripe: #0E8F72; --twin: #12302A; --star: transparent; }
.scene[data-sky="dawn"] { --s0: #FFC2DC; --s1: #FFE3A3; --s2: #FFF1B8; --far: #FFB3D3; --disc: #F4589C; --halo: #FF9CC6; --riv: #FF9CC6; --wv: #FFE3F0; --cloud: #FFF7DB; }
.scene[data-sky="dusk"] { --s0: #F4589C; --s1: #FF8FBE; --s2: #FFD02E; --far: #C72A73; --mid: #8E1650; --tw: #5C0F36; --tw2: #7A1446; --tmp: #FFD02E; --tmp2: #FFE98C; --band: #B8195F; --bank: #5C0F36; --riv: #C72A73; --wv: #FF8FBE; --cloud: #FFC2DC; --disc: #FFF1B8; --halo: #FFE3A3; --win: #FFD02E; --tstripe: #F4589C; }
.scene[data-sky="night"] { --s0: #0B1E1A; --s1: #0F2E27; --s2: #134036; --far: #17493E; --mid: #0F3A31; --tw: #0B2A24; --tw2: #0E3129; --tmp: #B8195F; --tmp2: #7A1446; --band: #FFD02E; --via: #06100E; --bank: #0B2A24; --riv: #103A31; --wv: #2A6B5C; --cloud: #1C5245; --disc: #FFF1B8; --halo: #FFF1B8; --win: #FFD02E; --tstripe: #F4589C; --twin: #FFF1B8; --star: #FFF1B8; }

.s0 { fill: var(--s0); } .s1 { fill: var(--s1); } .s2 { fill: var(--s2); }
.far { fill: var(--far); } .mid { fill: var(--mid); } .tower { fill: var(--tw); } .tower2 { fill: var(--tw2); }
.tmp { fill: var(--tmp); } .tmp2 { fill: var(--tmp2); } .tband { fill: none; stroke: var(--band); stroke-width: 2.5; }
.win { fill: var(--win); } .winfill { opacity: .9; }
.via { fill: var(--via); } .bank { fill: var(--bank); } .river { fill: var(--riv); }
.disc { fill: var(--disc); } .halo { fill: var(--halo); } .h1 { opacity: .55; } .h2 { opacity: .3; } .bite { fill: var(--s0); }
.stars circle { fill: var(--star); animation: twinkle 3.5s ease-in-out infinite; }
.stars circle:nth-child(2n) { animation-delay: -1.4s; } .stars circle:nth-child(3n) { animation-delay: -2.3s; }
.orb { transition: transform 1.4s var(--ease); }
.sun { display: block; } .moon { display: none; }
.scene[data-sky="night"] .sun { display: none; } .scene[data-sky="night"] .moon { display: block; }
.sun .halo { transform-box: fill-box; transform-origin: center; animation: breathe 6s ease-in-out infinite; }
.sun .h2 { animation-delay: -3s; }
.cloud path { fill: var(--cloud); }
.c1 { animation: drift 46s linear infinite; animation-delay: -12s; --y: 26px; }
.c2 { animation: drift 68s linear infinite; animation-delay: -44s; --y: 78px; opacity: .8; }
.frond { fill: var(--mid); } .trunk { fill: none; stroke: var(--via); stroke-width: 3; stroke-linecap: round; }
.palm { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; }
.p2 { animation-delay: -2.5s; }
.train { animation: train 13s cubic-bezier(.45, 0, .55, 1) infinite; }
.tb { fill: var(--train); } .ts { stroke: var(--tstripe); stroke-width: 2.5; } .tw { fill: var(--twin); }
.taxi-car { animation: taxi 17s linear infinite; animation-delay: -5s; }
.taxi-car .body { fill: #F4589C; } .glass { fill: #CDEFFC; } .wheel { fill: #12302A; } .roof { fill: #FFD02E; }
.wv { fill: none; stroke: var(--wv); stroke-width: 2.5; stroke-linecap: round; opacity: .85; }
.w1 { animation: wave 7s linear infinite; } .w2 { animation: wave 5s linear infinite reverse; }
.boat { animation: boat 38s linear infinite; animation-delay: -9s; }
.rock { transform-box: fill-box; transform-origin: 50% 80%; animation: rock 3.6s ease-in-out infinite; }
.hull { fill: #F4589C; } .hband { stroke: #FFD02E; stroke-width: 2; fill: none; } .awn { fill: none; stroke: #12302A; stroke-width: 1.5; } .awn2 { stroke: #FFD02E; stroke-width: 4; stroke-linecap: round; } .pole { stroke: #12302A; stroke-width: 1.5; }
.edge { fill: var(--page); transition: fill .7s var(--ease) !important; animation: wave2 11s linear infinite; }

/* Each day brings its own character into the city */
.m { opacity: 0; pointer-events: none; }
.scene[data-motif="plane"] .m-plane, .scene[data-motif="giraffe"] .m-giraffe, .scene[data-motif="dino"] .m-dino, .scene[data-motif="fish"] .m-fish { opacity: 1; }
.m-giraffe, .m-dino { transform: translateY(90px); transition: transform .9s var(--spring), opacity .3s !important; }
.scene[data-motif="giraffe"] .m-giraffe, .scene[data-motif="dino"] .m-dino { transform: translateY(0); }
.bob { transform-box: fill-box; transform-origin: 30% 100%; animation: bob 4.5s ease-in-out infinite; }
.gz { fill: none; stroke: #FFD02E; stroke-width: 11; stroke-linecap: round; } .gh { fill: #FFD02E; } .gz2 { fill: none; stroke: #12302A; stroke-width: 2; stroke-linecap: round; } .gs { fill: #6E5300; }
.dz { fill: none; stroke: #0E8F72; stroke-width: 13; stroke-linecap: round; } .dh { fill: #0E8F72; }
.eye { fill: #12302A; }
.plane { fill: #FFFFFF; }
.scene[data-sky="night"] .plane { fill: #FFF1B8; }
.m-plane { animation: plane 15s linear infinite; }
.scene[data-motif="fish"] .m-fish { animation: leap 4.8s var(--ease) infinite; }
.fishb { fill: #F4589C; }

@keyframes twinkle { 50% { opacity: .25; } }
@keyframes breathe { 50% { transform: scale(1.1); } }
@keyframes drift { from { transform: translate(-80px, var(--y)); } to { transform: translate(420px, var(--y)); } }
@keyframes sway { 0%, 100% { transform: rotate(-1.8deg); } 50% { transform: rotate(2.2deg); } }
@keyframes train { from { transform: translateX(-170px); } 72%, to { transform: translateX(420px); } }
@keyframes taxi { from { transform: translateX(420px) scaleX(-1); } to { transform: translateX(-60px) scaleX(-1); } }
@keyframes wave { to { transform: translateX(-50px); } }
@keyframes wave2 { to { transform: translateX(-100px); } }
@keyframes boat { from { transform: translate(-90px, 272px); } to { transform: translate(420px, 272px); } }
@keyframes rock { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(1.5px); } }
@keyframes bob { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes plane { from { transform: translate(-70px, 96px) rotate(-5deg); } to { transform: translate(430px, 34px) rotate(-5deg); } }
@keyframes leap { 0%, 55% { transform: translate(70px, 300px) rotate(-30deg); opacity: 0; } 62% { opacity: 1; } 76% { transform: translate(104px, 262px) rotate(10deg); opacity: 1; } 92% { transform: translate(138px, 296px) rotate(50deg); opacity: 1; } 100% { transform: translate(142px, 306px) rotate(55deg); opacity: 0; } }

.top-in { position: relative; padding: calc(env(safe-area-inset-top) + 18px) 16px 0; color: var(--ink-h); transition: color .9s var(--ease); }
.scene[data-sky="night"] ~ .top-in { color: #F2FBF8; }
.top h1 { font-size: 50px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.top p { font-size: 16px; font-weight: 600; margin-top: 4px; }
.pill { display: inline-block; margin-top: 10px; background: #12302A; color: #FFF1B8; font-weight: 700; font-size: 14px; padding: 6px 13px; border-radius: 99px; white-space: nowrap; animation: pop .7s var(--spring) both .25s; }
.scene[data-sky="night"] ~ .top-in .pill { background: #FFD84F; color: #12302A; }
.top.compact h1 { font-size: 32px; }
.top.compact p { display: none; }
.top.compact .pill { display: none; }

main { max-width: 560px; margin: 0 auto; padding: 8px 16px 16px; }
.page.in-r { animation: in-r .55s var(--ease); }
.page.in-l { animation: in-l .55s var(--ease); }
@keyframes in-r { from { opacity: 0; transform: translateX(26px); } }
@keyframes in-l { from { opacity: 0; transform: translateX(-26px); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@keyframes up { from { opacity: 0; transform: translateY(16px); } }

.section { margin-top: 30px; scroll-margin-top: 16px; }
.section:first-child { margin-top: 0; }
.section > h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.lead { color: var(--ink-2); margin-bottom: 12px; }

.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; }
.card + .card { margin-top: 10px; }
.rise { animation: up .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }

.bg-jade { background: var(--jade-full); } .bg-pink { background: var(--pink-full); } .bg-sun { background: var(--sun-full); } .bg-sky { background: var(--sky-full); }
.t-jade { background: var(--jade-soft); --tk: var(--jade-ink); } .t-pink { background: var(--pink-soft); --tk: var(--pink-ink); } .t-sun { background: var(--sun-soft); --tk: var(--sun-ink); } .t-sky { background: var(--sky-soft); --tk: var(--sky-ink); }
.chip { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid !important; place-items: center; color: #12302A !important; font: 800 18px/1 var(--display); }
.chip .ic { color: #12302A !important; }

/* Next stop: the page's loudest moment */
.next { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 22px 20px; color: #12302A; box-shadow: var(--lift); animation: up .7s var(--ease) backwards .08s; }
.next::after, .total::after { content: ""; position: absolute; z-index: -1; width: 340px; aspect-ratio: 1; right: -130px; top: -130px; border-radius: 50%; background: repeating-conic-gradient(rgb(255 255 255 / .26) 0 11.25deg, transparent 11.25deg 22.5deg); animation: spin 70s linear infinite; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }
.next .mega { font: 800 84px/1 var(--display); letter-spacing: -.04em; }
.clock { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.next .clock .mega { font-size: 56px; }
.until { font: 750 16px/1.2 var(--display); background: #12302A; color: #FFF1B8; padding: 5px 11px; border-radius: 99px; align-self: center; }
.next h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 6px; }
.next .when { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.next p { font-size: 15.5px; }
.next .btn { margin-top: 16px; background: #12302A; color: #fff; }

.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: 15px; margin-bottom: 12px; background: var(--sun-soft); color: var(--ink); }
.notice.pink { background: var(--pink-soft); }
.notice.sky { background: var(--sky-soft); }
.notice .ic { color: var(--sun-ink); margin-top: 1px; }

/* Day picker */
.picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 18px; }
.picker button { min-height: 72px; border-radius: 20px; display: grid; place-content: center; text-align: center; line-height: 1.1; color: var(--tk); transition: transform .45s var(--spring), box-shadow .3s var(--ease); }
.picker button:active { transform: scale(.94); }
.picker small { font: 700 13px/1.2 var(--display); }
.picker b { font: 800 24px/1.1 var(--display); }
.picker button[aria-pressed="true"] { color: #12302A; transform: translateY(-3px) scale(1.04); box-shadow: var(--lift); }
.picker .today-dot { width: 6px; height: 6px; border-radius: 9px; background: currentColor; margin: 3px auto 0; }

.dayhead { margin-bottom: 16px; }
.dayhead h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.dayhead p { color: var(--ink-2); margin-top: 3px; }
.dayhead.big { display: flex; gap: 14px; align-items: center; animation: up .6s var(--ease) backwards; }
.daynum { font: 800 76px/.9 var(--display); letter-spacing: -.05em; color: var(--c-ink); flex: none; }

/* Timeline */
.tl { list-style: none; margin: 0; padding: 0; }
.stop { position: relative; padding-left: 56px; margin-bottom: 12px; animation: up .6s var(--ease) backwards; animation-delay: calc(var(--i) * 60ms + 80ms); }
.stop:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 34px; bottom: -46px; width: 3px; border-radius: 3px; background: var(--c-soft); }
.stop.done::before, .stop.now::before { background: var(--c); }
.stop.now::before { background: linear-gradient(var(--c) 30%, var(--c-soft) 70%); }
.stop .dot { position: absolute; z-index: 1; left: 0; top: 11px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); color: var(--c-ink); }
.stop.now .dot { background: var(--c); color: #12302A; }
.stop.now .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c); animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.stop.done .dot { background: var(--c-soft); color: var(--c-ink); }
.stop.done .dot use { stroke-dasharray: 26; animation: draw .6s var(--ease) backwards .3s; }
@keyframes draw { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
.stop.done .sum h3 { color: var(--ink-2); }
.stop details { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); transition: box-shadow .3s var(--ease), transform .4s var(--ease); }
.stop details[open] { box-shadow: var(--lift); }
.stop.now details { box-shadow: 0 0 0 2.5px var(--c), var(--lift); }
details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
details[open]::details-content { block-size: auto; }
.sum { list-style: none; min-height: 68px; padding: 12px 14px 12px 16px; display: flex; gap: 10px; align-items: center; cursor: pointer; border-radius: var(--r); }
.sum::-webkit-details-marker { display: none; }
.sum > div { flex: 1; min-width: 0; }
.sum time { font: 750 14.5px/1.2 var(--display); color: var(--c-ink); }
.sum h3 { font-size: 18px; font-weight: 750; letter-spacing: -.01em; margin-top: 2px; }
.sum .tag { font: 800 12.5px/1 var(--display); color: #12302A; background: var(--c); padding: 3px 8px; border-radius: 99px; margin-left: 7px; }
.sum .ic { color: var(--ink-2); transition: transform .35s var(--spring); }
details[open] > .sum .ic { transform: rotate(180deg); }
.body { padding: 0 16px 16px; }
.body > p { margin-bottom: 10px; }

.rows { margin: 0 0 12px; }
.rows h4 { margin: 14px 0 6px; font-size: 16px; font-weight: 800; }
.row { padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.row b { font-weight: 650; }
.row.warn { background: var(--pink-soft); border-radius: 12px; border: 0; padding: 9px 11px; margin: 6px 0; }
.flag { display: inline-block; font-size: 12.5px; font-weight: 700; line-height: 1.3; padding: 2px 7px; border-radius: 7px; background: var(--sun-soft); color: var(--sun-ink); white-space: nowrap; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 18px; text-align: center; border-radius: 16px; font: 750 16px/1.2 var(--display); text-decoration: none; width: 100%; transition: transform .35s var(--spring), box-shadow .3s var(--ease); }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--jade-ink); color: #fff; box-shadow: 0 8px 18px -8px rgb(10 122 96 / .8); }
:root[data-mode="dark"] .btn.primary { background: var(--jade); color: #0C1513; }
.btn.ghost { background: var(--c-soft); color: var(--c-ink); }
.btns { display: grid; gap: 8px; margin-top: 10px; }

/* Lists of tappable rows */
.taxi { display: flex; width: 100%; text-align: left; align-items: center; gap: 13px; min-height: 78px; transition: transform .35s var(--spring), box-shadow .3s var(--ease); }
.taxi:active { transform: scale(.975); }
.taxi > div { flex: 1; min-width: 0; }
.taxi b { display: block; font: 750 17px/1.25 var(--display); }
.taxi div span { color: var(--ink-2); font-size: 15px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taxi > .ic { color: var(--ink-2); transform: rotate(-90deg); }

/* Taxi card: opens from your finger like a door */
dialog#card { --ink-t: #12302A; border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; color: #12302A; overflow: auto; }
dialog#card.c-sun { background: var(--sun-full); } dialog#card.c-pink { background: var(--pink-full); } dialog#card.c-jade { background: var(--jade-full); } dialog#card.c-sky { background: var(--sky-full); }
dialog#card::backdrop { background: transparent; }
dialog#card[open] { animation: iris .6s var(--ease); }
@keyframes iris { from { clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); } to { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); } }
.tc { position: relative; min-height: calc(100% - 26px); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 16px); }
.roofsign { position: absolute; top: calc(env(safe-area-inset-top) + 21px); left: 16px; background: #12302A; color: #FFD02E; font: 800 18px/1 var(--display); letter-spacing: .14em; padding: 10px 16px 9px; border-radius: 10px 10px 4px 4px; }
.tc-x { align-self: flex-end; width: 52px; height: 52px; border-radius: 50%; background: #12302A; color: #fff; display: grid; place-items: center; transition: transform .35s var(--spring); }
.tc-x:active { transform: scale(.9); }
.tc-main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; animation: up .7s var(--ease) backwards .18s; }
.tc-th { font-size: clamp(30px, 9.5vw, 54px); font-weight: 750; line-height: 1.32; overflow-wrap: anywhere; }
.tc-en { font: 800 20px/1.2 var(--display); }
.tc-sub, .tc-src { font-size: 15px; }
.tc .btn { background: #12302A; color: #fff; }
.livery { height: 26px; background: linear-gradient(#12302A 0 8px, #fff 8px 17px, #12302A 17px); }

/* Budget */
.total { position: relative; overflow: hidden; isolation: isolate; background: var(--jade-ink); color: #fff; border-radius: 28px; padding: 22px 20px; box-shadow: var(--lift); animation: up .7s var(--ease) backwards .08s; }
.total::after { background: repeating-conic-gradient(rgb(255 255 255 / .1) 0 11.25deg, transparent 11.25deg 22.5deg); }
:root[data-mode="dark"] .total { background: #103A31; }
.total b { display: block; font: 800 50px/1.05 var(--display); letter-spacing: -.03em; }
.total span { font: 700 19px/1.3 var(--display); color: #FFE98C; }
.total p { font-size: 14px; margin-top: 8px; }
.bday { display: flex; align-items: center; gap: 12px; }
.bday h3 { flex: 1; min-width: 0; font-size: 17px; font-weight: 750; }
.bday .num:not(.chip) { font: 800 17px/1.2 var(--display); white-space: nowrap; text-align: right; }
.bday small { display: block; font: 500 13.5px/1.3 -apple-system, sans-serif; color: var(--ink-2); }
.bline { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 7px 0; border-top: 1px solid var(--line); }
.bline:first-of-type { margin-top: 10px; }
.bline em { font-style: normal; font-size: 12.5px; color: var(--sun-ink); font-weight: 700; margin-left: 4px; }

label.f { display: block; font-weight: 650; font-size: 15px; margin-top: 12px; }
label.f:first-child { margin-top: 0; }
input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; min-height: 52px; padding: 0 12px; width: 100%; margin-top: 4px; caret-color: var(--pink); max-width: 100%; transition: border-color .2s, box-shadow .3s var(--ease); }
input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-soft); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--bg); padding: 4px; border-radius: 16px; margin-top: 4px; }
.seg button { min-height: 44px; border-radius: 12px; font-size: 15px; font-weight: 650; transition: transform .35s var(--spring), background-color .25s; }
.seg button:active { transform: scale(.95); }
.seg button[aria-pressed="true"] { background: var(--c); box-shadow: var(--shadow); color: #12302A; }

/* More */
.toc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toc a { min-height: 56px; display: flex; align-items: center; padding: 0 16px; border-radius: 18px; text-decoration: none; color: var(--tk); font: 750 16px/1.2 var(--display); transition: transform .35s var(--spring); }
.toc a:active { transform: scale(.96); }
.toc a:last-child { grid-column: 1 / -1; }
ol.steps { margin: 0; padding-left: 20px; }
ol.steps li { margin-bottom: 8px; }
ol.steps li::marker { color: var(--c-ink); font-weight: 700; }
.ph { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ph:first-child { border: 0; padding-top: 0; }
.ph .th { font-size: 22px; font-weight: 650; text-align: right; grid-row: span 2; align-self: center; }
.ph .pr { color: var(--ink-2); font-size: 15px; }
.check { list-style: none; margin: 0; padding: 0; }
.check li { display: flex; gap: 10px; padding: 6px 0; }
.check .ic { color: var(--c-ink); margin-top: 1px; }
.srcs { list-style: none; padding: 0; margin: 0; }
.srcs li { padding: 6px 0; font-size: 15px; }
.legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }

/* Floating dock with a thumb that slides between tabs */
.tabs { --idx: 0; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 26px; background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 0 0 1px rgb(18 48 42 / .05), var(--lift); }
.tabs .thumb { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 20px; background: var(--c); transform: translateX(calc(var(--idx) * 100%)); transition: transform .55s var(--spring), background-color .6s var(--ease); }
.tabs button { position: relative; min-height: 56px; display: grid; place-items: center; align-content: center; gap: 1px; color: var(--ink-2); font: 680 12.5px/1.2 var(--display); transition: color .25s; }
.tabs button .ic { transition: transform .45s var(--spring); }
.tabs button:active .ic { transform: scale(.85); }
.tabs button[aria-current="page"] { color: #12302A; }
.tabs button[aria-current="page"] .ic { stroke-width: 2.25; transform: translateY(-1px) scale(1.08); }

@media (hover: hover) {
  .taxi:hover, .toc a:hover, .btn:hover { transform: translateY(-2px); }
  .taxi:hover { box-shadow: var(--lift); }
  .stop details:hover { transform: translateY(-1px); }
  .picker button:not([aria-pressed="true"]):hover { transform: translateY(-2px); }
}
@media (min-width: 700px) {
  body { background: color-mix(in srgb, var(--c-soft) 80%, var(--bg)); }
  .top { border-radius: 0 0 28px 28px; margin-top: 0; }
  .tabs { left: 50%; right: auto; width: 536px; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .train { transform: translateX(120px); } .boat { transform: translate(150px, 272px); } .taxi-car { transform: translateX(300px) scaleX(-1); }
  .c1 { transform: translate(40px, 26px); } .c2 { transform: translate(250px, 78px); } .m-plane { transform: translate(90px, 70px) rotate(-5deg); } .m-fish { transform: translate(104px, 262px) rotate(10deg); }
}
/* Browsers without the heavy rounded system weights still get a confident headline */
@supports not (font: -apple-system-body) {
  .top h1, .mega, .daynum, .total b { -webkit-text-stroke: .022em currentColor; }
  .next h2, .section > h2, .dayhead h2 { -webkit-text-stroke: .014em currentColor; }
  .sum h3, .taxi b, .btn, .picker b, .chip, .until, .tc-en, .toc a, .bday h3 { -webkit-text-stroke: .008em currentColor; }
}
@media print { .tabs, .scene { display: none; } }