:root {
  color-scheme: light;
  --sky-h: clamp(110px, calc(100svh - 560px), 300px);
  --bg: #ffffff; --soft: #f7f8f5; --card: #ffffff; --text: #1e2a1a; --muted: #6b7466; --line: #e4e8e0;
  --accent: #2e7d1e; --on-accent: #ffffff; --art: #a9b3a4; --icon: #7e8a79; --lantern: #fff6e4;
}

* { box-sizing: border-box; }
body.one { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body.one .hero { flex: 1; display: flex; flex-direction: column; }
body.one .skyline-wrap { margin-top: auto; padding-top: 14px; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 17px/1.75 "Noto Sans Myanmar", "Noto Sans Thai", system-ui, sans-serif; }
a { color: var(--accent); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

header { padding: 16px 0; position: relative; z-index: 2; }
header .wrap { display: flex; align-items: center; gap: 12px; }
header img { width: 38px; height: 38px; border-radius: 10px; }
header .name { font-weight: 700; font-size: 1.15rem; flex: 1; }
.langs { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 3px; }
.langs button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .85rem;
                padding: 2px 10px; border-radius: 16px; cursor: pointer; }
.langs button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }

/* Line-art hero: Myanmar on the left, Thailand on the right. */
.art { fill: var(--bg); stroke: var(--art); }
.art.sun { fill: none; }
.art.lantern { fill: var(--lantern); stroke: #e0a84a; }
.hero { position: relative; overflow: hidden; text-align: center; padding-top: 36px; }
.hero-text { position: relative; z-index: 1; }
.hello { color: var(--accent); font-size: .8rem; letter-spacing: 2px; }
.hero h1 { font-size: 3.2rem; line-height: 1.2; margin: 6px 0 2px; letter-spacing: -.5px; }
.hero .sub { font-size: 1.15rem; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.hero p { color: var(--muted); margin: 0 auto 22px; max-width: 620px; text-wrap: balance; }
.hero p br.m { display: none; }
.cta { display: inline-flex; align-items: stretch; border-radius: 12px; overflow: hidden; text-decoration: none;
       color: #fff; font-weight: 700; font-size: 1.05rem; box-shadow: 0 8px 20px rgba(46,125,30,.25);
       transition: transform .15s, box-shadow .15s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(46,125,30,.32); }
.cta-ic { background: #256a17; display: grid; place-items: center; padding: 0 14px; }
.cta-ic svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cta-tx { background: var(--accent); padding: 13px 24px; }
.cta:hover .cta-ic svg { animation: nudge .6s ease; }
@keyframes nudge { 50% { transform: translateY(3px); } }
.note { font-size: .82rem; color: var(--muted); margin-top: 10px; }
.skyline-wrap { margin-top: 18px; display: flex; justify-content: center; }
.skyline { height: var(--sky-h); width: auto; flex: none; display: block; position: relative; overflow: visible; }
.skyline-wrap { position: relative; }
/* Ground line runs the full width and fades out at both ends. */
.skyline-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--sky-h) * 20 / 270); height: 1.4px;
  background: linear-gradient(90deg, transparent, var(--art) 12%, var(--art) 88%, transparent); }
/* A small phone standing on the ground in the middle of the skyline. */
.mini-phone { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--sky-h) * 20 / 270); transform: translateX(-50%);
  width: calc(var(--sky-h) * .54); height: calc(var(--sky-h) * .8); overflow: hidden;
  filter: drop-shadow(0 -4px 14px rgba(30,42,26,.12)); }
.mini-phone img { width: 100%; display: block; }
@media (min-width: 721px) and (max-height: 760px) { .mini-phone { display: none; } }
/* Hidden gem: clocks on a Yangon tower and a Bangkok tower show the real time.
   The time appears only on hover or tap (Thailand is 30 minutes ahead). */
.clock { --d: calc(var(--sky-h) * 22 / 270); position: absolute; z-index: 1; width: var(--d); height: var(--d);
         left: calc(50% + (var(--x) - 600) * var(--sky-h) / 270 - var(--d) / 2);
         bottom: calc((270 - var(--y)) * var(--sky-h) / 270 - var(--d) / 2); outline: none; cursor: default; }
.clock .face { display: block; width: 100%; height: 100%; overflow: visible; }
.clock .hh, .clock .mh { transform-box: view-box; transform-origin: 20px 20px; transition: transform .6s ease; }
.clock .cap { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap;
              font-size: .74rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 8px;
              padding: 2px 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.clock:hover, .clock:focus { z-index: 4; }
.clock:hover .cap, .clock:focus .cap { opacity: 1; transform: translate(-50%, 0); }
/* The Yangon clock sits next to the phone, so its label opens to the left. */
.c-mm .cap { left: auto; right: 0; transform: translateY(4px); }
.c-mm:hover .cap, .c-mm:focus .cap { transform: none; }
.clock b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* An invisible hover area over a drawn landmark (the BTS train) that shows its name. */
.spot { position: absolute; z-index: 1; outline: none; left: calc(50% + (var(--x) - 600) * var(--sky-h) / 270);
        bottom: calc((270 - var(--y2)) * var(--sky-h) / 270); width: calc(var(--w) * var(--sky-h) / 270); height: calc(var(--h) * var(--sky-h) / 270); }
.spot:hover, .spot:focus { z-index: 4; }
.spot .cap, .bus .cap, .tuk .cap, .cart .cap, .boat .cap { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap;
            font-size: .74rem; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 8px;
            padding: 2px 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.spot:hover .cap, .spot:focus .cap, .tuk:hover .cap, .tuk:focus .cap, .cart:hover .cap, .cart:focus .cap, .boat:hover .cap, .boat:focus .cap { opacity: 1; transform: translate(-50%, 0); }
.tuk:hover, .tuk:focus, .cart:hover, .cart:focus, .boat:hover, .boat:focus { z-index: 4; outline: none; }
.tuk, .cart { outline: none; }
.bridgehit { position: absolute; right: 0; width: max(0px, calc(50% - 600 * var(--sky-h) / 270)); bottom: calc(var(--sky-h) * 66 / 270);
             height: calc(var(--sky-h) * 150 / 270); }
/* Floating name over the drawing (set by the script in index.html). */
.tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap; pointer-events: none;
       font-size: .74rem; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 8px;
       padding: 2px 8px; opacity: 0; transition: opacity .15s; }
.tip.on { opacity: 1; }
/* The hills run past the left edge of the drawing on wide screens; this catches the pointer there. */
.hillhit { position: absolute; left: 0; width: max(0px, calc(50% - 600 * var(--sky-h) / 270)); bottom: calc(var(--sky-h) * 36 / 270);
           height: calc(var(--sky-h) * 90 / 270); }
/* A Yangon YBS bus parked at a stop; its line shows on hover or tap. */
.bus { position: absolute; z-index: 1; width: calc(var(--sky-h) * 78 / 270); left: calc(50% + (var(--x) - 600) * var(--sky-h) / 270);
       bottom: calc(var(--sky-h) * 16 / 270); outline: none; }
.bus svg { display: block; width: 100%; height: auto; overflow: visible; }
.bus .route { font: 700 5.6px "Noto Sans Myanmar", "Myanmar Text", "Myanmar Sangam MN", sans-serif; fill: #7e8a79; stroke: none; }
.bus:hover, .bus:focus { z-index: 4; }
.bus:hover .cap, .bus:focus .cap { opacity: 1; transform: translate(-50%, 0); }
/* A long-tail boat crossing the Chao Phraya under the Thai side. */
.boat { position: absolute; z-index: 1; left: calc(50% + 300 * var(--sky-h) / 270); bottom: calc(var(--sky-h) * 2 / 270);
        width: calc(var(--sky-h) * 68 / 270); outline: none; animation: boatgo 50s linear infinite -8s; }
.boat svg { display: block; width: 100%; height: auto; overflow: visible; animation: turn 50s step-end infinite -8s; }
.boat svg > * { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-1px); } }
/* The boat stays on the visible Thai stretch of the river (svg x 765-1140), clear of the phone, and turns at the ends. */
@keyframes boatgo {
  0%, 100% { left: calc(50% + var(--a) * var(--sky-h) / 270); }
  50%      { left: calc(50% + var(--b) * var(--sky-h) / 270); } }
.boat { --a: 165; --b: 472; }
/* The tuk-tuk drives along the ground, behind the phone. */
.tuk { position: absolute; z-index: 1; left: calc(50% + 300 * var(--sky-h) / 270); bottom: calc(var(--sky-h) * 18 / 270);
       width: calc(var(--sky-h) * 62 / 270); animation: tukgo 26s linear infinite; }
.tuk svg { display: block; width: 100%; height: auto; overflow: visible; }
.tuk svg > :not(.wh) { animation: bump .5s ease-in-out infinite; }
.cart { position: absolute; z-index: 1; left: calc(50% - 420 * var(--sky-h) / 270); bottom: calc(var(--sky-h) * 18 / 270);
        width: calc(var(--sky-h) * 108 / 270); animation: cartgo 45s linear infinite -10s; }
.cart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cart .body { animation: bump 1.2s ease-in-out infinite; }
/* One wheel turn (88 units round) matches how far the cart moves: about 5s. */
.cart .spin { transform-box: fill-box; transform-origin: center; animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(-360deg); } }
/* The ox walks: diagonal legs swing together from the hip. */
.cart .lg { fill: none; transform-box: fill-box; transform-origin: 50% 0; animation: step 1.2s ease-in-out infinite alternate; }
.cart .lg.b { animation-delay: -1.2s; }
@keyframes step { from { transform: rotate(16deg); } to { transform: rotate(-16deg); } }
/* Each vehicle stays on its own side and turns round at the ends:
   the tuk-tuk in Thailand (svg x 690-1180), the ox cart in Myanmar (svg x 10-420). */
/* Turning points are variables, so phones change them without restarting the animation
   (a restart would put the drive and the turn out of step and the vehicle would go backwards). */
@keyframes tukgo {
  0%, 100% { left: calc(50% + var(--a) * var(--sky-h) / 270); }
  50%      { left: calc(50% + var(--b) * var(--sky-h) / 270); } }
@keyframes cartgo {
  0%, 100% { left: calc(50% + var(--a) * var(--sky-h) / 270); }
  50%      { left: calc(50% + var(--b) * var(--sky-h) / 270); } }
.tuk  { --a: 90;   --b: 520; }
.cart { --a: -190; --b: -590; }
/* Only the drawing turns round at the ends, so the name label is never mirrored. */
@keyframes turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
.tuk > svg { animation: turn 26s step-end infinite; }
.cart > svg { animation: turn 45s step-end infinite -10s; }
@keyframes bump { 50% { transform: translateY(-.8px); } }
@media (prefers-reduced-motion: reduce) { .tuk, .tuk svg > *, .cart, .cart .body, .cart .spin, .cart .lg, .boat, .boat svg, .boat svg > *, .tuk > svg, .cart > svg { animation: none; }  }

.sky > div { position: absolute; }
.sky .c1 { left: 22%; top: 60px; width: 46px; animation: drift 9s ease-in-out infinite; }
.sky .c2 { right: 18%; top: 80px; width: 52px; animation: drift 11s ease-in-out infinite reverse; }
.sky .sunw { right: 28%; top: 54px; width: 40px; opacity: .8; }
.sky .fly { left: 0; top: 70px; width: 54px; animation: fly 18s linear infinite; }
.sky .l1 { right: 14%; top: 300px; width: 16px; animation: rise 8s ease-in infinite; }
.sky .l2 { right: 10%; top: 330px; width: 14px; animation: rise 8s ease-in infinite -3s; }
.sky .l3 { left: 12%; top: 300px; width: 15px; animation: rise 8s ease-in infinite -5.5s; }
.sky svg { display: block; width: 100%; height: auto; }
@keyframes fly { from { transform: translate(-80px, 40px) rotate(-8deg); } to { transform: translate(110vw, -50px) rotate(-8deg); } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(24px); } }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-180px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sky > div { animation: none !important; } .sky .fly { transform: translate(14vw, 20px) rotate(-8deg); } }

.strip { background: var(--accent); color: var(--on-accent); font-size: .92rem; }
.strip .wrap { display: flex; justify-content: space-around; gap: 12px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.strip .wrap > div { display: flex; align-items: center; gap: 10px; }
.ico { width: 22px; height: 22px; flex: none; }
.ictext { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; line-height: 1; }
.ictext small { font-size: .65rem; }

.sec { text-align: center; font-size: 1.05rem; margin: 48px 0 34px; }
.sec::after { content: ""; display: block; width: 40px; height: 2px; background: var(--accent); opacity: .6; margin: 10px auto 0; }
.features { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); padding-bottom: 56px; }
.feature { display: flex; gap: 14px; align-items: center; background: var(--soft); border: 1px solid var(--line);
           border-radius: 18px; padding: 18px; transition: transform .15s, box-shadow .15s; }
.feature:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30,42,26,.07); }
.ftile { flex: none; width: 52px; height: 52px; border-radius: 15px; background: #e6f2df; color: var(--accent);
         display: grid; place-items: center; }
.ftile svg { width: 26px; height: 26px; }
.ftext { display: flex; align-items: center; justify-content: center; font-size: 1.45rem; font-weight: 700; line-height: 1; }
.ftext small { font-size: .8rem; margin-left: 1px; }
.feature h3 { margin: 0; font-size: 1rem; line-height: 1.6; }
.feature p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.sample { display: block; font-size: 1.25rem; color: var(--text); }
.sound { display: block; color: var(--accent); }

footer { padding: 12px 0 14px; color: var(--muted); font-size: .8rem; }
footer .wrap { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }
footer .dot { opacity: .5; }

/* Privacy page */
.page-art { --sky-h: 120px; overflow: hidden; margin-top: 0; }
.pstrip { height: 8px; background: var(--accent); }
article { background: var(--card); max-width: 760px; margin: 28px auto 24px; }
article .note { margin-top: 4px; }
article h1 { font-size: 1.6rem; color: var(--accent); margin-bottom: 0; }
article h2 { font-size: 1.1rem; margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
article li { margin-bottom: 6px; }

[data-lang] { display: none; }
html[lang="my"] [data-lang="my"], html[lang="th"] [data-lang="th"], html[lang="en"] [data-lang="en"] { display: revert; }
/* All three languages share one spot, so the page keeps the height of the longest and does not jump. */
.ml { display: inline-grid; }
div.ml { display: grid; }
.ml > [data-lang] { display: block; grid-area: 1 / 1; visibility: hidden; }
html[lang="my"] .ml > [data-lang="my"], html[lang="th"] .ml > [data-lang="th"], html[lang="en"] .ml > [data-lang="en"] { visibility: visible; }

@media (max-width: 720px) {
  .hero { padding-top: 20px; }
  .hero h1 { font-size: 2.4rem; }
  .hero .sub { font-size: 1rem; }
  body.one .hero-text { margin: auto 0; }
  .hero p br.m { display: inline; }
  body.one .skyline-wrap { margin-top: 0; }
  .strip .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 16px 12px; font-size: .8rem; line-height: 1.45; }
  .strip .wrap > div { flex-direction: column; gap: 6px; text-align: center; }
  .strip .ml > [data-lang] { text-wrap: balance; }
  .strip .ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255,255,255,.14); box-sizing: border-box; }
  .strip .ictext { font-size: .85rem; }
  .strip .ictext small { font-size: .55rem; }
  :root { --sky-h: clamp(104px, 18svh, 140px); }
  /* On phones the app screenshot keeps a readable size and fills the space above the skyline. */
  .mini-phone { width: 116px; height: 156px; }
  /* Phones crop the drawing to about svg x 75-1125, so the vehicles turn round sooner. */
  .tuk { --b: 460; }
  .cart { --b: -520; }
  .boat { --b: 455; }
  footer { padding: 8px 0 10px; }
  .features { grid-template-columns: 1fr; gap: 12px; }
  .sky .c1 { left: 6%; } .sky .sunw { display: none; }
  .sky .l1, .sky .l2, .sky .l3 { display: none; }
  .page-art { --sky-h: 90px; }
}
@media (max-width: 440px) {
  .hero h1 { font-size: 2.1rem; }
  .hero p { margin-bottom: 16px; }
  :root { --sky-h: 100px; }
  .strip .wrap { gap: 10px 8px; padding: 12px 10px; }
  .strip .wrap > div { gap: 4px; }
  footer { font-size: .76rem; }
  footer .wrap { gap: 8px; }
}

/* Keyboard users still see where they are on the hidden-gem items. */
.clock:focus-visible, .bus:focus-visible, .tuk:focus-visible, .cart:focus-visible, .boat:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Short phones (Safari with its toolbars is often about 660px tall): tighter spacing to make room for the app screenshot,
   whose size the script in index.html fits to the space that is left. */
@media (max-width: 720px) and (max-height: 760px) {
  header { padding: 10px 0; }
  .hero { padding-top: 6px; }
  .hero h1 { font-size: 1.9rem; margin: 0; }
  .hero .sub { margin-bottom: 4px; }
  .hero p { margin-bottom: 12px; }
  .note { margin-top: 6px; }
}