/* Fonts: kept on this site (fonts/README.txt); no third-party requests. */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(fonts/noto-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Noto Sans Myanmar";src:url(fonts/noto-sans-myanmar.woff2) format("woff2");font-weight:400 700;font-display:swap}
/* Layout: the hero is a living network: your phone in the middle, your trusted people around it, light travelling
   between them when you tap. Each section below is something to touch: drag a journey, pan a map, type a PIN. */
:root{
  --ink:#16303F; --muted:#4F6575; --page:#F0F4F8; --paper:#FFFFFF; --line:#D6E0E8;
  --inle:#0D5C8A; --inle-soft:#E2EEF6; --sun:#F2B705;
  --ok:#1E8A57; --help:#C62828; --quiet:#B07A00;
  --band:#0B3A57; --band-ink:#E6F1F8; --band-soft:#134A6B;
  --display:"Bricolage Grotesque","Noto Sans Myanmar",system-ui,sans-serif;
  --body:"Noto Sans","Noto Sans Myanmar",system-ui,sans-serif;
  /* the older pages' names for the same colours */
  --bg:var(--page);--fg:var(--ink);--accent:var(--inle);--card:var(--paper);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#E3EEF5;--muted:#A3B6C4;--page:#0E141A;--paper:#17212B;--line:#27384A;--inle:#7CC3EC;--inle-soft:#16303F;
  --sun:#FFD54A;--ok:#7FE0AA;--help:#FF8A80;--quiet:#F2C14E;--band:#0A2638;--band-ink:#E3EEF5;--band-soft:#12344B;color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#E3EEF5;--muted:#A3B6C4;--page:#0E141A;--paper:#17212B;--line:#27384A;--inle:#7CC3EC;--inle-soft:#16303F;
  --sun:#FFD54A;--ok:#7FE0AA;--help:#FF8A80;--quiet:#F2C14E;--band:#0A2638;--band-ink:#E3EEF5;--band-soft:#12344B;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--page);color:var(--ink);font:16.5px/1.65 var(--body);-webkit-tap-highlight-color:transparent}
/* Scripts with tall letters or stacked marks (Burmese, Thai, Lao, Khmer, Hindi, Arabic) need more room between lines,
   and no script but Latin and Cyrillic may be spaced out letter by letter or put in capitals: it breaks the letters. */
:is(html[lang="my"],html[lang="th"],html[lang="lo"],html[lang="km"],html[lang="hi"],html[lang="ar"]) body{line-height:1.9}
a{color:var(--inle)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--inle);outline-offset:3px;border-radius:8px}
.wrap{max-width:70rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);text-wrap:balance;letter-spacing:-.01em}
.home h1,.home h2,.home h3,header h1,footer h3{margin:0}
h1{font-size:clamp(2.1rem,5.4vw,3.7rem);line-height:1.06;font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem);line-height:1.14;font-weight:800}
h3{font-size:1.15rem;line-height:1.3;font-weight:700}
:is(html[lang="my"],html[lang="th"],html[lang="lo"],html[lang="km"],html[lang="hi"],html[lang="ar"]) h1{font-size:clamp(1.7rem,4.2vw,2.75rem);line-height:1.45}
:is(html[lang="my"],html[lang="th"],html[lang="lo"],html[lang="km"],html[lang="hi"],html[lang="ar"]) h2{font-size:clamp(1.35rem,2.8vw,1.9rem);line-height:1.5}
:is(html[lang="my"],html[lang="th"],html[lang="lo"],html[lang="km"],html[lang="hi"],html[lang="ar"],html[lang="zh-Hans"],html[lang="zh-Hant"],html[lang="ja"],html[lang="ko"]) :is(h1,h2,h3,.m-label){letter-spacing:0}
:is(html[lang="zh-Hans"],html[lang="zh-Hant"],html[lang="ja"],html[lang="ko"]) h1{line-height:1.25}
.home p,header p,footer p{margin:0}
.eyebrow{font:700 .78rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--inle)}
:is(html[lang="my"],html[lang="th"],html[lang="lo"],html[lang="km"],html[lang="hi"],html[lang="ar"],html[lang="zh-Hans"],html[lang="zh-Hant"],html[lang="ja"],html[lang="ko"]) .eyebrow{letter-spacing:0;text-transform:none;font-size:.9rem;line-height:1.6}
.hint{font-size:.85rem;color:var(--muted)}
.hint::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--inle);margin-right:.45rem;vertical-align:.12em;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--page) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.55rem;font:800 1.15rem var(--display);color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .logo{width:32px;height:32px;flex:none;border-radius:8px;box-shadow:0 2px 6px rgb(13 92 138 / .25)}
nav.main{display:flex;gap:1.1rem;margin-left:auto;flex-wrap:wrap}
nav.main a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem;position:relative}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--inle);transform:scaleX(0);transition:transform .2s}
nav.main a:hover{color:var(--ink)}nav.main a:hover::after{transform:scaleX(1)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--inle);width:0}
.globe{position:relative}
.globe>button{display:flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:.35rem .7rem;font-size:.9rem;cursor:pointer}
.globe svg{width:18px;height:18px}
.langs{position:absolute;right:0;top:calc(100% + 6px);background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.35rem;min-width:11rem;box-shadow:0 12px 30px rgb(0 0 0 / .14);
  /* 22 languages: two columns, scrolling inside the menu if the screen is short */
  display:grid;grid-template-columns:repeat(2,minmax(9.5rem,1fr));gap:.1rem;max-height:min(72vh,32rem);overflow:auto;overscroll-behavior:contain;z-index:30}
.langs[hidden]{display:none}
@media (max-width:26rem){.langs{grid-template-columns:1fr;min-width:13rem}}
.langs button{display:block;width:100%;text-align:start;border:0;background:none;padding:.5rem .7rem;border-radius:9px;font-size:.95rem;cursor:pointer}
.langs button[aria-checked="true"]{background:var(--inle-soft);font-weight:700}
.langs small{grid-column:1/-1;display:block;color:var(--muted);padding:.4rem .7rem .3rem;font-size:.78rem;line-height:1.4}
@media (max-width:52rem){nav.main{display:none}.globe{margin-left:auto}}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;padding-block:3rem 2.5rem}
.hero .copy{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.lead{font-size:1.12rem;color:var(--muted);max-width:36rem}
.ctas{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:.4rem}
.play{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--page);border-radius:14px;padding:.6rem 1.1rem .6rem .9rem;text-decoration:none;transition:transform .15s}
.play:hover{transform:translateY(-2px)}
.play svg{width:26px;height:26px}
.play span{display:flex;flex-direction:column;line-height:1.15}
.play small{font-size:.72rem;opacity:.8}.play b{font-size:1.02rem}
.ghost{color:var(--inle);font-weight:700;text-decoration:none;padding:.6rem .4rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:.3rem 0 0}
.chips li{font-size:.85rem;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:.2rem .7rem;background:var(--paper)}

.scene{position:relative;min-height:680px;display:grid;place-items:center;touch-action:pan-y;perspective:1100px}
#net{position:absolute;inset:0;width:100%;height:100%}
.person{position:absolute;display:flex;align-items:center;gap:.45rem;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:.3rem .75rem .3rem .3rem;font-size:.85rem;box-shadow:0 8px 20px -10px rgb(0 0 0 / .3);transition:border-color .3s,background .3s;z-index:2;max-width:46%}
.person .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 .8rem var(--display);color:#fff;background:var(--inle);flex:none;transition:background .3s}
.person b{display:block;line-height:1.2}
.person small{display:block;color:var(--muted);font-size:.74rem;line-height:1.25}
.person.ok{border-color:var(--ok)}.person.ok .av{background:var(--ok)}
.person.alert{border-color:var(--help)}.person.alert .av{background:var(--help)}
.p1{top:0;left:2%}.p2{top:0;right:2%}.p3{bottom:2.6rem;left:50%;transform:translateX(-50%)}

.phone{position:relative;z-index:1;width:min(240px,60vw);aspect-ratio:9/18.5;border-radius:40px;background:var(--paper);border:9px solid #0B1620;
  box-shadow:0 30px 60px -20px rgb(13 92 138 / .5);display:flex;flex-direction:column;padding:1rem .9rem;gap:.7rem;overflow:hidden;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.ticket{border-radius:16px;background:var(--inle-soft);padding:.65rem .8rem;display:grid;gap:.1rem;font-size:.78rem;transition:background .3s}
.ticket b{font:800 .95rem var(--display)}
.ticket .st{display:flex;gap:.4rem;align-items:center;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;transition:background .3s}
.phone.emergency .ticket{background:color-mix(in srgb,var(--help) 14%,var(--paper))}
.phone.emergency .dot{background:var(--help)}
.phone.emergency #status{color:var(--help);font-weight:700}
.stage{flex:1;display:grid;place-items:center;position:relative}
.imhere{position:relative;width:80%;aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 35% 30%,#2E86BF,#0D5C8A 62%,#094466);font:800 1.3rem var(--display);letter-spacing:.02em;
  box-shadow:0 14px 30px -8px rgb(13 92 138 / .6),inset 0 -6px 14px rgb(0 0 0 / .18);transition:transform .15s,background .4s}
.imhere:active{transform:scale(.95)}
.imhere .tick{display:none;width:42%;margin:auto}
.imhere.done{background:radial-gradient(circle at 35% 30%,#3FB57C,#1E8A57 62%,#14633E)}
.imhere.done .word{display:none}.imhere.done .tick{display:block}
.ring{position:absolute;inset:10%;border-radius:50%;border:3px solid var(--ok);opacity:0;pointer-events:none}
.go .ring{animation:ring 1.4s ease-out forwards}.go .ring+.ring{animation-delay:.25s}
@keyframes ring{from{transform:scale(.9);opacity:.7}to{transform:scale(1.38);opacity:0}}
.told{min-height:3.1rem;font-size:.78rem;text-align:center;color:var(--muted);line-height:1.45}
.told b{color:var(--ok)}.phone.emergency .told b{color:var(--help)}
.sos{position:relative;overflow:hidden;border:2px solid var(--help);color:var(--help);background:none;border-radius:99px;padding:.45rem;text-align:center;font:800 .76rem var(--body);letter-spacing:.05em;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.sos i{position:absolute;inset:0;background:var(--help);transform-origin:left;transform:scaleX(var(--hold,0));opacity:.22}
.sos span{position:relative}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:24px 24px 0 0;padding:1rem .9rem 1.1rem;box-shadow:0 -14px 30px rgb(0 0 0 / .2);display:flex;flex-direction:column;gap:.55rem;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:3}
.sheet.open{transform:none}
.sheet h4{margin:0;font:800 1.05rem var(--display)}
.sheet p{font-size:.78rem;color:var(--muted);line-height:1.4}
.sheet .b{border:0;border-radius:12px;padding:.6rem;font-weight:700;font-size:.85rem;cursor:pointer}
.sheet .yes{background:var(--inle);color:var(--page)}.sheet .no{background:var(--inle-soft);color:var(--ink)}
.pins{display:flex;justify-content:center;gap:.5rem;padding:.4rem 0}
.pins i{width:12px;height:12px;border-radius:50%;border:2px solid var(--inle)}
.pins i.on{background:var(--inle)}
.scenehint{position:absolute;bottom:-.4rem;left:0;right:0;text-align:center;z-index:2}

/* sections */
.home section{padding-block:4.2rem}
.home section.flush{padding-top:0}
.head{display:flex;flex-direction:column;gap:.7rem;max-width:46rem;margin-bottom:2.2rem}
.head p{color:var(--muted);font-size:1.05rem}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{display:flex;flex-direction:column;gap:.5rem;border-top:2px solid var(--line);padding-top:1rem;counter-increment:s;min-width:0;transition:border-color .3s}
.steps li::before{content:counter(s);font:800 1.6rem var(--display);color:var(--inle)}
html[lang="my"] .steps li::before{content:counter(s,myanmar)}
.steps li:hover{border-color:var(--inle)}
.steps p{color:var(--muted);font-size:.95rem}

/* outdoor scrubber */
.outdoor{margin-top:3rem;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:1.6rem;display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem;align-items:center}
.outdoor .t{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.outdoor .t p{color:var(--muted)}
.journey{display:flex;flex-direction:column;gap:1rem;min-width:0}
.clock{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.clock b{font:800 2.3rem var(--display);font-variant-numeric:tabular-nums;line-height:1}
.clock span{color:var(--muted)}
.scrub{position:relative;height:44px;touch-action:none;cursor:pointer}
.scrub .rail{position:absolute;left:0;right:0;top:19px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--ok) 0 75%,var(--sun) 75% 83.3%,var(--quiet) 83.3% 99%,var(--help) 99%)}
.scrub .knob{position:absolute;top:8px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--paper);border:4px solid var(--inle);box-shadow:0 4px 12px rgb(0 0 0 / .25);transition:transform .15s}
.scrub:active .knob{transform:scale(1.15)}
.marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;position:relative;height:1.2rem}
.marks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.marks .m0{left:0;transform:none}.marks .m1{left:75%}.marks .m2{left:83.3%}.marks .m3{left:100%;transform:translateX(-100%)}
.state{display:flex;align-items:center;gap:.9rem;border-radius:16px;padding:.8rem 1rem;background:var(--inle-soft);min-height:4.2rem;transition:background .3s}
.state p{flex:1;min-width:0;font-weight:500}
.state[data-p="2"]{background:color-mix(in srgb,var(--sun) 22%,var(--paper))}
.state[data-p="3"]{background:color-mix(in srgb,var(--quiet) 18%,var(--paper))}
.state[data-p="4"]{background:color-mix(in srgb,var(--help) 16%,var(--paper))}
.tapbtn{border:0;border-radius:99px;padding:.55rem 1.1rem;font-weight:800;background:var(--ok);color:#fff;cursor:pointer;flex:none}
.tapbtn:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.rowbtns{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:.35rem .9rem;font-size:.85rem;cursor:pointer}

/* features + map */
.halo{fill:var(--help);opacity:.22}
.pulse{fill:none;stroke:var(--help);stroke-width:3;opacity:0}
@keyframes pulse{from{r:16;opacity:.55}to{r:34;opacity:0}}
.chip{border-radius:99px;padding:0 .55rem;font-size:.72rem;font-weight:800}
.why{font-size:.82rem;font-weight:700}
.ic{grid-row:span 2;width:44px;height:44px;border-radius:13px;background:var(--inle-soft);color:var(--inle);display:grid;place-items:center;transition:transform .2s}
.ic svg{width:24px;height:24px}

/* safety band */
.band{background:var(--band);color:var(--band-ink)}
.band .head p,.band .muted{color:color-mix(in srgb,var(--band-ink) 72%,transparent)}
.band .eyebrow{color:var(--sun)}
.band .hint{color:color-mix(in srgb,var(--band-ink) 72%,transparent)}.band .hint::before{background:var(--sun)}
@keyframes pop{50%{transform:scale(1.18)}}
.more2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 3rem;margin-top:2.2rem}
.more2 div{display:flex;flex-direction:column;gap:.35rem;padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--band-ink) 18%,transparent);min-width:0}

/* stats */
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:1.6rem;display:flex;flex-direction:column;gap:.8rem;min-width:0}
.panel p{color:var(--muted)}
.panel a.more{font-weight:700;text-decoration:none;margin-top:auto}
.tag{align-self:flex-start;font-size:.75rem;border:1px dashed var(--line);border-radius:99px;padding:.1rem .6rem;color:var(--muted)}

/* support */
.support{display:grid;grid-template-columns:auto 1fr auto;gap:1.8rem;align-items:center;background:var(--inle-soft);border-radius:28px;padding:2rem}
.support .t{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.support .t p{color:var(--muted)}
/* The sun sits on the app icon's blue-teal tile: pale yellow on the pale blue card could hardly be seen (owner, 14 Oct). */
.sunbtn{width:112px;height:112px;border:0;border-radius:26px;padding:6px;cursor:pointer;position:relative;
  background:linear-gradient(135deg,#1673AA,#0E8C7E);box-shadow:0 10px 24px rgb(11 58 87 / .28)}
.sunbtn svg{width:100%;height:100%;overflow:visible}
.rays{transform-origin:50px 50px;transition:opacity .4s}
.sunbtn .rays{opacity:.35}
.sunbtn.shine .rays{opacity:1;animation:spin 6s linear infinite}
.glow{transition:opacity .5s,transform .5s;transform-origin:50px 50px;opacity:0}
.sunbtn.shine .glow{opacity:.55;transform:scale(1.6)}
@keyframes spin{to{transform:rotate(360deg)}}
.btns{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{background:var(--inle);color:var(--page);border-radius:12px;padding:.65rem 1.15rem;font-weight:700;text-decoration:none;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.alt{background:transparent;color:var(--inle);border:1.5px solid var(--inle)}

footer{border-top:1px solid var(--line);padding-block:2.4rem 3rem;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;flex-direction:column;gap:1rem}
.notice{color:var(--ink);font-weight:500}
footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
footer nav a{color:var(--muted)}

@media (max-width:62rem){
  .hero{grid-template-columns:1fr;gap:1rem;padding-block:2rem}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .outdoor,.two{grid-template-columns:1fr}
  .support{grid-template-columns:auto 1fr}.support .btns{grid-column:1/-1}
}
@media (max-width:36rem){
  .steps,.more2{grid-template-columns:1fr}
  .home section{padding-block:3rem}
  .home section.flush{padding-top:0}
  .scene{min-height:660px}
  .person{font-size:.78rem}
  .support{grid-template-columns:1fr;justify-items:start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.chip.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}
.chip.help{color:var(--help);background:color-mix(in srgb,var(--help) 15%,transparent)}
.chip.quiet{color:var(--quiet);background:color-mix(in srgb,var(--quiet) 15%,transparent)}
.why.ok{color:var(--ok)}.why.help{color:var(--help)}.why.quiet{color:var(--quiet)}
#relock{align-self:flex-start}

/* the other pages: one readable column */
main.page{max-width:48rem;margin:0 auto;padding-block:2.5rem 3.5rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.page h1{font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.12;margin:0 0 1rem}
.page h2{font-size:clamp(1.3rem,2.6vw,1.65rem);margin:2.2rem 0 .6rem}
.page h3{margin:1.6rem 0 .4rem}
.page li{margin:.25rem 0}
.page dt{font-weight:700;margin-top:.8rem}.page dd{margin:0 0 .4rem 0;color:var(--muted)}
.lead{font-size:1.15rem}
.note{border-left:4px solid var(--accent);padding:.6rem 1rem;background:var(--card);border-radius:0 12px 12px 0}
.small{color:var(--muted);font-size:.9rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1rem}.tile .n{font:800 1.8rem var(--display)}
.tile .l{color:var(--muted)}
.bar{display:grid;grid-template-columns:9rem 1fr minmax(6rem,13rem);gap:.5rem;align-items:center;margin:.2rem 0}
.bar .track{background:var(--line);height:.9rem;border-radius:5px}.bar .fill{background:var(--accent);height:100%;border-radius:5px}
.bar .hidden{color:var(--muted);font-style:italic}
@media (max-width:30rem){.bar{grid-template-columns:6rem 1fr 4rem}}
mark.missing{background:#fde68a;color:#3b2a00;padding:0 .2rem;border-radius:3px}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.75rem}
.way{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1rem;display:flex;flex-direction:column;gap:.4rem}
.way b{font-size:1.05rem}.way span{color:var(--muted)}
.give{align-self:flex-start;margin-top:.4rem;background:var(--accent);color:var(--bg);border-radius:10px;padding:.5rem 1.1rem;font-weight:700;text-decoration:none}
.uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.5rem 1.5rem;padding:0;list-style:none}
.uses li{border-top:1px solid var(--line);padding-top:.5rem}.uses b{display:block}
.qr{width:220px;max-width:100%;height:auto;background:#fff;padding:.5rem;border-radius:8px;border:1px solid var(--line)}

/* Reflective light (owner, 14 Oct 2026): light on water behind the page, a highlight that follows your finger, glass
   on the phone. Subtle on purpose; still for people who ask for less motion. */
.light{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;--mx:70vw;--my:30vh}
.light i{position:absolute;border-radius:50%;filter:blur(50px);opacity:.9}
.light .o1{width:60vmax;height:60vmax;left:-15vmax;top:-20vmax;background:radial-gradient(circle,color-mix(in srgb,var(--inle) 30%,transparent),transparent 65%);animation:drift1 38s ease-in-out infinite alternate}
.light .o2{width:55vmax;height:55vmax;right:-20vmax;top:20vh;background:radial-gradient(circle,color-mix(in srgb,#0E8C7E 28%,transparent),transparent 65%);animation:drift2 46s ease-in-out infinite alternate}
.light .o3{width:40vmax;height:40vmax;left:30vw;bottom:-25vmax;background:radial-gradient(circle,color-mix(in srgb,var(--sun) 26%,transparent),transparent 65%);animation:drift1 52s ease-in-out infinite alternate-reverse}
/* light on water: soft rippling rings, slowly turning */
.light .water{position:absolute;inset:-30%;opacity:.5;filter:blur(10px);
  background:repeating-radial-gradient(ellipse 40% 22% at 30% 40%,transparent 0 22px,rgb(13 92 138 / .10) 30px,transparent 42px),
             repeating-radial-gradient(ellipse 30% 18% at 70% 65%,transparent 0 26px,rgb(14 140 126 / .09) 34px,transparent 48px);
  animation:ripple 30s linear infinite}
/* the highlight that follows your finger or mouse */
.light .spot{position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx) var(--my),rgb(124 195 236 / .30),rgb(255 255 255 / .12) 35%,transparent 62%)}
@keyframes drift1{to{transform:translate(12vw,10vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(-14vw,-8vh) scale(.92)}}
@keyframes ripple{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.08)}to{transform:rotate(360deg) scale(1)}}

/* glass on the phone: a sheen that sweeps now and then and shifts as the phone tilts */
.phone::after{content:"";position:absolute;inset:-30% -60%;pointer-events:none;z-index:4;
  background:linear-gradient(115deg,transparent 42%,rgb(255 255 255 / .38) 48%,rgb(255 255 255 / .08) 52%,transparent 58%);
  transform:translateX(var(--sx,0px)) translateX(-60%);animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%,55%{translate:-10% 0}85%,100%{translate:120% 0}}
.imhere::before{content:"";position:absolute;left:16%;right:16%;top:7%;height:38%;border-radius:50%;
  background:linear-gradient(to bottom,rgb(255 255 255 / .42),rgb(255 255 255 / 0));pointer-events:none}
.imhere>*{position:relative}

/* the dark Safety band: light moving on dark water */
.band{position:relative;overflow:hidden}
.band>.wrap{position:relative}
.band::before{content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.9;
  background:radial-gradient(ellipse 30% 14% at 20% 30%,rgb(255 213 74 / .22),transparent 70%),
             radial-gradient(ellipse 26% 12% at 75% 60%,rgb(124 195 236 / .26),transparent 70%),
             radial-gradient(ellipse 22% 10% at 45% 85%,rgb(255 255 255 / .08),transparent 70%);
  animation:shimmer 18s ease-in-out infinite alternate}
@keyframes shimmer{to{transform:translate(6%,-4%) rotate(4deg) scale(1.06)}}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .light .spot{background:radial-gradient(420px circle at var(--mx) var(--my),rgb(124 195 236 / .2),transparent 60%);mix-blend-mode:screen}
  :root:not([data-theme="light"]) .light .water{opacity:.12}}
:root[data-theme="dark"] .light .spot{background:radial-gradient(420px circle at var(--mx) var(--my),rgb(124 195 236 / .2),transparent 60%);mix-blend-mode:screen}
:root[data-theme="dark"] .light .water{opacity:.12}
@media (prefers-reduced-motion:reduce){.light *,.phone::after,.band::before{animation:none!important}.phone::after{display:none}}

/* The sun comes alive (owner, 14 Oct 2026: "sun animation"): the logo's rays turn slowly and it blinks now and then;
   the big sun breathes, and a tap makes it shine like the app's welcome-page sun. Still for less motion. */
.lrays{transform-box:fill-box;transform-origin:center;animation:turn 26s linear infinite}
.eye{transform-box:fill-box;transform-origin:center;animation:wink 6s ease-in-out infinite}
.brand:hover .lrays{animation-duration:6s}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes wink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.sunbtn .rays{opacity:1;animation:turn 30s linear infinite;transform-origin:50px 50px}
.sunbtn .glow{opacity:.3;transform:scale(1.25);animation:breathe 4.5s ease-in-out infinite;transform-origin:50px 50px;
  fill:#FFE7A3;mix-blend-mode:screen}  /* light on the blue tile, not a muddy disc */
.sunbtn.shine .rays{opacity:1;animation-duration:5s}
.sunbtn.shine .glow{opacity:.6;transform:scale(1.7)}
@keyframes breathe{50%{opacity:.5;transform:scale(1.45)}}
.sunbtn .burst{fill:none;stroke:#FFC24B;stroke-width:3;opacity:0;transform-origin:50px 50px}
.sunbtn.pop .burst{animation:burst .9s ease-out}
.sunbtn.pop .burst+.burst{animation-delay:.18s}
@keyframes burst{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
.sunbtn.pop svg{animation:hop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{40%{transform:translateY(-8px) scale(1.06)}}
.sunbtn::after{content:"";position:absolute;inset:-60%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgb(255 194 75 / .45),rgb(255 194 75 / .12) 40%,transparent 70%)}
.sunbtn.shine::after{opacity:1}
@media (prefers-reduced-motion:reduce){.lrays,.eye,.sunbtn *{animation:none!important}}

/* ---------- Where are they: a spotlight section, the map in a phone (owner, 14 Oct 2026: "redesign the map") ---------- */
:root{--m-land:#EEF2EC;--m-block:#E2E7E1;--m-park:#CFE6C4;--m-water:#A9D3EE;--m-river:#9CCBEA;--m-road:#FFFFFF;--m-case:#D3DBD6;--m-minor:#FFFFFF;--m-label:#5A6B73}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--m-land:#18232B;--m-block:#1E2C36;--m-park:#1D3A2E;--m-water:#14415E;--m-river:#164A6B;--m-road:#2F4250;--m-case:#121A20;--m-minor:#26363F;--m-label:#9FB3C0}}
:root[data-theme="dark"]{--m-land:#18232B;--m-block:#1E2C36;--m-park:#1D3A2E;--m-water:#14415E;--m-river:#164A6B;--m-road:#2F4250;--m-case:#121A20;--m-minor:#26363F;--m-label:#9FB3C0}
.where-sec{padding-block:4.5rem}
.where{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.wcopy{display:flex;flex-direction:column;gap:1rem;min-width:0}
.wsub{color:var(--muted);font-size:1.08rem;max-width:34rem}
.bens{list-style:none;padding:0;margin:.4rem 0 0;display:flex;flex-direction:column;gap:1rem}
.bens li{display:grid;grid-template-columns:40px 1fr;gap:.9rem;align-items:start}
.bens h3{font-size:1.05rem}.bens p{color:var(--muted);font-size:.95rem;margin-top:.15rem}
.bface{width:40px;height:40px;display:block;overflow:visible}
.bface .fs{fill:none;stroke-width:2.4;stroke-linecap:round}
.bface.ok .fb,.bface.ok .fe{fill:var(--ok)}.bface.ok .fs{stroke:var(--ok)}
.bface.quiet .fb,.bface.quiet .fe{fill:var(--quiet)}.bface.quiet .fs{stroke:var(--quiet)}
.bface.help .fb,.bface.help .fe{fill:var(--help)}.bface.help .fs{stroke:var(--help)}
.bface.help{border-radius:50%;animation:bpulse 2.4s ease-out infinite}
.bface.faded{opacity:.45}
@keyframes bpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--help) 45%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}
.priv{display:flex;gap:.6rem;align-items:flex-start;background:var(--inle-soft);border-radius:16px;padding:.8rem 1rem;font-size:.92rem;margin-top:.3rem}
.priv svg{width:20px;height:20px;flex:none;color:var(--inle);margin-top:.15rem}
.wmore{font-weight:700;text-decoration:none;align-self:flex-start}

.wdev{display:flex;flex-direction:column;align-items:center;gap:.8rem;min-width:0}
.device{width:min(360px,100%);aspect-ratio:9/17.5;border-radius:44px;border:10px solid #0B1620;background:var(--paper);overflow:hidden;position:relative;
  box-shadow:0 40px 70px -30px rgb(13 92 138 / .55),0 0 0 1px rgb(255 255 255 / .06) inset;display:flex;flex-direction:column}
.dtop{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem .5rem;font:800 .95rem var(--display);background:var(--paper);z-index:2}
.dlive{display:flex;align-items:center;gap:.35rem;font:600 .72rem var(--body);color:var(--ok)}
.dlive i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:blink 1.8s infinite}
.wmap{position:relative;flex:1;overflow:hidden;background:var(--m-land);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.wmap:active{cursor:grabbing}
.wlayer{position:absolute;left:0;top:0;width:1000px;height:780px;transform-origin:0 0}
.wlayer.glide{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.wart{position:absolute;inset:0;width:100%;height:100%}
.m-land{fill:var(--m-land)}.m-block{fill:var(--m-block)}.m-park{fill:var(--m-park)}.m-water{fill:var(--m-water)}.m-river{fill:var(--m-river)}
.m-shine{fill:none;stroke:rgb(255 255 255 / .55);stroke-width:5;stroke-linecap:round;stroke-dasharray:18 46;animation:flow 6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-128}}
.m-casing path{fill:none;stroke:var(--m-case);stroke-width:20;stroke-linecap:round}
.m-road path{fill:none;stroke:var(--m-road);stroke-width:14;stroke-linecap:round}
.m-minor path{fill:none;stroke:var(--m-minor);stroke-width:6;opacity:.9}
.m-bridge{stroke:var(--m-road);stroke-width:16;stroke-linecap:round}
.m-poi circle{fill:var(--m-label);opacity:.55}
.m-label{font:600 15px var(--body);fill:var(--m-label);letter-spacing:.04em}
.m-riv{font-style:italic;fill:color-mix(in srgb,var(--inle) 70%,var(--m-label))}
.m-route{stroke:var(--inle);stroke-width:4;stroke-dasharray:2 10;stroke-linecap:round;opacity:.85}
.wacc{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--inle) 12%,transparent);border:1.5px solid color-mix(in srgb,var(--inle) 35%,transparent);transform:translate(-50%,-50%)}
.wacc.old{opacity:.5}
.wme{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%) scale(var(--inv,1))}
.wme i{position:absolute;inset:0;border-radius:50%;background:#2F6BD8;border:3px solid #fff;box-shadow:0 0 0 10px rgb(47 107 216 / .18),0 2px 6px rgb(0 0 0 / .3)}
.wme::before{content:"";position:absolute;left:50%;bottom:50%;width:44px;height:44px;margin-left:-22px;background:conic-gradient(from -30deg at 50% 100%,rgb(47 107 216 / .35) 0 60deg,transparent 60deg);border-radius:50% 50% 0 0;transform-origin:50% 100%;transform:rotate(25deg)}
.wpin{position:absolute;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translate(-50%,-100%) scale(var(--inv,1));transform-origin:50% 100%}
.wpin .lab{background:var(--paper);color:var(--ink);border-radius:8px;padding:.05rem .45rem;font:700 .75rem var(--body);box-shadow:0 2px 6px rgb(0 0 0 / .25);white-space:nowrap}
.wpin .lab.h{color:var(--help)}
.wpin svg{width:40px;height:50px;overflow:visible;filter:drop-shadow(0 3px 4px rgb(0 0 0 / .3));transition:transform .2s}
.wpin.faded svg{opacity:.5}
.wpin.sel svg{transform:scale(1.18);transform-origin:50% 100%}
.wpin .pulse{fill:none;stroke:var(--help);stroke-width:3;opacity:0;animation:pulse 2.4s ease-out infinite}
.wpin .halo{fill:var(--help);opacity:.2}
.wdist{position:absolute;transform:translate(-50%,-50%) scale(var(--inv,1));background:var(--ink);color:var(--page);border-radius:99px;padding:.15rem .6rem;font:700 .72rem var(--body);white-space:nowrap;box-shadow:0 4px 10px rgb(0 0 0 / .25);pointer-events:none}
.wctl{position:absolute;right:10px;bottom:30px;display:flex;flex-direction:column;gap:6px;z-index:1}
.wctl button{width:38px;height:38px;border-radius:12px;border:0;background:var(--paper);color:var(--ink);box-shadow:0 3px 10px rgb(0 0 0 / .2);font:700 1.2rem var(--display);cursor:pointer;display:grid;place-items:center}
.wctl svg{width:18px;height:18px}
.wsheet{background:var(--paper);border-radius:22px 22px 0 0;margin-top:-18px;position:relative;z-index:2;padding:.5rem .8rem .9rem;box-shadow:0 -10px 24px rgb(0 0 0 / .12);display:flex;flex-direction:column;gap:.35rem}
.wsheet::before{content:"";width:38px;height:4px;border-radius:4px;background:var(--line);align-self:center;margin-bottom:.2rem}
.wsheet .cnt{font:700 .78rem var(--body);color:var(--muted);padding:0 .2rem}
.wrow{display:grid;grid-template-columns:26px 1fr auto;gap:.6rem;align-items:center;border:0;background:none;text-align:left;padding:.45rem .5rem;border-radius:12px;cursor:pointer;font-size:.82rem}
.wrow[aria-pressed="true"]{background:var(--inle-soft)}
.wrow b{font:700 .88rem var(--body)}
.wrow .chip{margin-left:.35rem}
.wrow .why{display:block;font-size:.74rem;font-weight:600;line-height:1.35}
.wrow .d{font:700 .78rem var(--body);color:var(--inle);font-variant-numeric:tabular-nums}
.wrow .mf{width:26px;height:26px}
.wrow .old{display:block;font-size:.72rem;color:var(--muted)}
.wtodo{border:0;border-radius:10px;padding:.45rem .8rem;background:var(--help);color:#fff;font-weight:700;font-size:.8rem;margin:.1rem .5rem 0;cursor:pointer;align-self:flex-start}
.wtodo-note{font-size:.74rem;color:var(--muted);margin:0 .5rem}

/* ---------- feature cards ---------- */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.fcard{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;min-width:0;transition:transform .2s,box-shadow .2s}
.fcard:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgb(13 92 138 / .5)}
.fcard p{color:var(--muted);font-size:.93rem}
.ftop{display:flex;align-items:center;gap:.6rem}
.ftop .ic{width:40px;height:40px;border-radius:12px;background:var(--inle-soft);color:var(--inle);display:grid;place-items:center}
.ftop .ic svg{width:22px;height:22px}
.fname{font:700 .78rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--inle)}
:is(html[lang="my"],html[lang="th"],html[lang="lo"],html[lang="km"],html[lang="hi"],html[lang="ar"],html[lang="zh-Hans"],html[lang="zh-Hant"],html[lang="ja"],html[lang="ko"]) .fname{letter-spacing:0;text-transform:none;font-size:.88rem;line-height:1.5}
:is(html[lang="my"],html[lang="th"],html[lang="lo"],html[lang="km"],html[lang="hi"],html[lang="ar"],html[lang="zh-Hans"],html[lang="zh-Hant"],html[lang="ja"],html[lang="ko"]) .letter .lc{letter-spacing:0;text-transform:none}
.fcard h3{font-size:1.15rem}
.flink{font-weight:700;text-decoration:none;margin-top:auto;font-size:.92rem}
.odmini{display:flex;align-items:center;gap:.6rem;margin-top:.2rem}
.odmini .bar{flex:1;height:8px;border-radius:8px;background:var(--inle-soft);overflow:hidden}
.odmini .bar i{display:block;height:100%;width:84%;border-radius:8px;background:linear-gradient(90deg,var(--ok),var(--sun));animation:odfill 9s linear infinite}
.odmini .odt{font:800 .95rem var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
@keyframes odfill{from{width:8%}to{width:96%}}
.letter{margin-top:.3rem;border:1px dashed color-mix(in srgb,var(--inle) 45%,transparent);border-radius:16px;background:linear-gradient(180deg,var(--paper),var(--inle-soft));padding:.8rem .9rem;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:.15rem;min-height:6.4rem;transition:transform .15s}
.letter:active{transform:scale(.98)}
.letter .lc{font:700 .7rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.letter .lh{font:800 1.45rem/1.3 var(--display);color:var(--ink);transition:opacity .25s}
.letter .ln{font-size:.72rem;color:var(--muted);margin-top:auto}
.letter.swap .lh{opacity:0}
@media (max-width:62rem){.where{grid-template-columns:1fr}.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:36rem){.fgrid{grid-template-columns:1fr}.where-sec{padding-block:3rem}.device{aspect-ratio:9/18}}
@media (prefers-reduced-motion:reduce){.m-shine,.bface.help,.odmini .bar i,.wpin .pulse{animation:none!important}}

/* ---------- When something goes wrong (the three Home buttons) ---------- */
.em-sec{padding-block:4.2rem}
.emtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-bottom:1.4rem}
.emtab{display:flex;align-items:center;gap:.7rem;border:2px solid var(--line);background:var(--paper);border-radius:18px;padding:.9rem 1rem;font:800 .92rem/1.25 var(--display);letter-spacing:.02em;text-align:left;cursor:pointer;transition:transform .15s,border-color .2s,box-shadow .2s;min-width:0}
.emtab i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:1.1rem;flex:none;background:var(--inle-soft);color:var(--inle)}
.emtab.help i{background:var(--help);color:#fff}
.emtab[aria-selected="true"]{border-color:var(--inle);box-shadow:0 14px 30px -18px rgb(13 92 138 / .6);transform:translateY(-2px)}
.emtab.help[aria-selected="true"]{border-color:var(--help)}
html[lang="my"] .emtab{font:700 .95rem/1.5 var(--body);letter-spacing:0}
:is(html[lang="my"],html[lang="th"],html[lang="lo"],html[lang="km"],html[lang="hi"],html[lang="ar"],html[lang="zh-Hans"],html[lang="zh-Hant"],html[lang="ja"],html[lang="ko"]) :is(.emtab,.sos,.holdbtn){letter-spacing:0}
.empanel{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:1.8rem}
.emcopy{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.emcopy h3{font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.2}
.emsteps{margin:0;padding:0;list-style:none;counter-reset:e;display:flex;flex-direction:column;gap:.8rem}
.emsteps li{counter-increment:e;display:grid;grid-template-columns:2rem 1fr;gap:.6rem;color:var(--muted)}
.emsteps li::before{content:counter(e);width:2rem;height:2rem;border-radius:50%;background:var(--inle-soft);color:var(--inle);display:grid;place-items:center;font:800 .95rem var(--display)}
html[lang="my"] .emsteps li::before{content:counter(e,myanmar)}
.emnote{border-left:3px solid var(--sun);padding:.3rem .8rem;font-size:.92rem}
.emdemo{display:flex;flex-direction:column;align-items:center;gap:.6rem;min-width:0}
.mini2{width:min(270px,100%);border-radius:28px;border:7px solid #0B1620;background:var(--page);padding:1rem .9rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;min-height:300px;box-shadow:0 24px 40px -24px rgb(13 92 138 / .5)}
.mini2.small{width:min(190px,100%);min-height:250px;padding:.8rem .7rem}
.m2t{font:800 .82rem var(--display);color:var(--muted);align-self:stretch;text-align:center}
.m2r{font-size:.8rem;text-align:center;line-height:1.45;min-height:2.4rem}
.m2r b{color:var(--ok)}
.holdbtn{position:relative;width:150px;height:150px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#E5534B,#C62828 62%,#8E1C1C);color:#fff;font:800 .82rem/1.2 var(--display);letter-spacing:.04em;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 14px 26px -10px rgb(198 40 40 / .6)}
.holdbtn svg{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);transform:rotate(-90deg)}
.holdbtn span{position:relative;padding:0 1.4rem;display:block}
.hr0,.hr1{fill:none;stroke-width:6}
.hr0{stroke:color-mix(in srgb,var(--help) 18%,transparent)}
.hr1{stroke:var(--help);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327}
.holdbtn.sent{background:radial-gradient(circle at 35% 30%,#3FB57C,#1E8A57 62%,#14633E)}
.frq{align-self:stretch;display:flex;flex-direction:column;gap:.3rem;font-size:.74rem;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:.3rem}
.opts button{border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:.25rem .6rem;font-size:.74rem;cursor:pointer;color:var(--ink)}
.opts button[aria-pressed="true"]{background:var(--inle);border-color:var(--inle);color:var(--page)}
.send{border:0;border-radius:12px;padding:.55rem .9rem;font-weight:800;font-size:.82rem;background:var(--inle);color:var(--page);cursor:pointer;align-self:stretch}
.send.ok{background:var(--ok);color:#fff}
.send:disabled{opacity:.45;cursor:default}
.twophones{display:flex;gap:.8rem;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.ayo{display:flex;flex-direction:column;gap:.5rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.6rem;font-size:.76rem;animation:pop .35s}

/* ---------- Reports across Myanmar ---------- */
#numbers .wrap.two{grid-template-columns:1fr}
.mm{display:grid !important;grid-template-columns:1fr minmax(0,.9fr);gap:2rem;align-items:center}
.mmside{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.mmtabs{display:flex;flex-wrap:wrap;gap:.4rem}
.mmtabs button{border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:.4rem .9rem;font-size:.88rem;font-weight:600;cursor:pointer;color:var(--ink)}
.mmtabs button[aria-selected="true"]{background:var(--ink);color:var(--page);border-color:var(--ink)}
.mminfo{background:var(--inle-soft);border-radius:16px;padding:.8rem 1rem;min-height:4.6rem;display:flex;flex-direction:column;justify-content:center}
.mminfo b{font:800 1.05rem var(--display)}
.mminfo .big{font:800 1.9rem var(--display);font-variant-numeric:tabular-nums;color:var(--inle)}
.mminfo .hid{color:var(--muted);font-size:.9rem}
.mmleg{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.78rem;color:var(--muted)}
.mmleg span{display:inline-flex;align-items:center;gap:.35rem}
.mmleg i{width:14px;height:14px;border-radius:4px;display:inline-block}
.mmmeta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.upd{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--ok);font-weight:600}
.upd i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:blink 2s infinite}
.mmlinks{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.mmlinks a{font-weight:700;text-decoration:none}
.mmmap{display:flex;flex-direction:column;align-items:center;min-width:0}
#mmsvg{width:100%;max-width:330px;height:auto;max-height:620px;overflow:visible}
.mm-r{stroke:var(--paper);stroke-width:5;stroke-linejoin:round;cursor:pointer;transition:fill .5s,opacity .2s}
.mm-r:hover,.mm-r.sel{stroke:var(--ink);stroke-width:7}
.mm-r:focus{outline:none}.mm-r:focus-visible{stroke:var(--inle);stroke-width:9}  /* the ring follows the region's shape, not a box around it */
.mm-hbg{fill:var(--inle-soft)}.mm-hl{stroke:color-mix(in srgb,var(--inle) 35%,transparent);stroke-width:5}
.mm-npt{stroke:var(--paper);stroke-width:6;cursor:pointer}
.mm-lab{font:700 30px var(--body);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:7px;pointer-events:none}
.mmcredit{font-size:.7rem;color:var(--muted);margin-top:.3rem}
@media (max-width:62rem){.empanel,.mm{grid-template-columns:1fr !important}.emtabs{grid-template-columns:1fr}}

.mm-r.b0{fill:var(--line)}.mm-r.b1{fill:color-mix(in srgb,var(--inle) 30%,var(--paper))}.mm-r.b2{fill:color-mix(in srgb,var(--inle) 62%,var(--paper))}
.mm-r.b3{fill:var(--inle)}.mm-r.bh{fill:url(#mmhatch)}
.mmleg i.b0{background:var(--line)}.mmleg i.b1{background:color-mix(in srgb,var(--inle) 30%,var(--paper))}.mmleg i.b2{background:color-mix(in srgb,var(--inle) 62%,var(--paper))}
.mmleg i.b3{background:var(--inle)}.mmleg i.bh{background:repeating-linear-gradient(45deg,var(--inle-soft) 0 3px,color-mix(in srgb,var(--inle) 35%,transparent) 3px 5px)}