:root{box-sizing:border-box;color-scheme:light;
--font:"Figtree","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
--sea:#e6eee8;--land:#fcfdfb;--hover:#edf3ee;--sel:#1f2a24;--line:#cfdad1;--grat:#d9e3db;--ink:#1f2a24;--on-ink:#fff;--accent:#2f6b55;--panel:#fffffff5;--rule:#e1e9e3;--edge:#1f2a2459;--has:#a9cdb6;--has-h:#98c3a7;--pin:#1f4d3b;--pin-edge:#10281f;--pin-dot:#e6f3ec}
html,body{height:100%;margin:0}
body{background:var(--sea);color:var(--ink);font:14px/1.45 var(--font);overflow:hidden;position:relative}
#map{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;display:block}
#map.drag{cursor:grabbing}
.sphere{fill:var(--sea)} .grat{fill:none;stroke:var(--grat);stroke-width:.6;vector-effect:non-scaling-stroke}
.c{fill:var(--land);stroke:var(--line);stroke-width:.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.c:hover{fill:var(--hover)}
.c.has{fill:var(--has)}
.c.has:hover{fill:var(--has-h)}
.c.sel{stroke:var(--sel);stroke-width:1.8} .c.sel:not(.has){fill:var(--hover)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

#tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--on-ink);padding:4px 9px;border-radius:3px;font-size:12px;opacity:0;white-space:nowrap}
#ui{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px}
#ui button{width:36px;height:36px;border:1px solid var(--rule);border-radius:50%;background:var(--panel);color:var(--ink);font:400 19px/1 var(--font);cursor:pointer}
#info{position:absolute;left:12px;bottom:12px;background:var(--panel);border:1px solid var(--rule);padding:7px 12px;border-radius:3px;max-width:calc(100% - 24px);font-size:12px}
#name{font-weight:600}

/* side panel */
#panel{position:absolute;left:12px;top:12px;width:min(300px,calc(100% - 76px));max-height:calc(100% - 100px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.over #panel{outline:2px dashed var(--ink)}
#phead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--rule)}
.ttl{display:flex;flex-direction:column;min-width:0}
.wm{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
#stat{font-size:12px;opacity:.65;white-space:nowrap}
#pbody{padding:12px;overflow:auto}
.hb{display:flex;gap:6px;align-items:center}
.txt{border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--on-ink);font:600 13px var(--font);padding:7px 14px;cursor:pointer;white-space:nowrap}
.txt.sm{padding:5px 10px}
.txt.ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.txt:disabled{opacity:.35;cursor:default}
.link{border:0;background:none;color:var(--ink);font:12px var(--font);cursor:pointer;padding:0 0 10px;opacity:.7}
.link:hover{opacity:1;text-decoration:underline}
h2{font-size:22px;margin:0 0 12px;font-weight:500;letter-spacing:-.015em}
.n{font:400 12px var(--font);opacity:.6;margin-left:8px;letter-spacing:0}
.muted{opacity:.7;margin:0;font-size:13px}
.list{list-style:none;margin:0;padding:0}
.row{display:flex;justify-content:space-between;width:100%;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--ink);font:inherit;padding:9px 2px;cursor:pointer;text-align:left}
.list li:last-child .row{border-bottom:0}
.row:hover{background:var(--hover)}
.row .n{font-weight:600;opacity:.8}
.th{padding:0;border:0;border-radius:2px;overflow:hidden;aspect-ratio:1;cursor:pointer;background:var(--grat)}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.post{padding:12px 0;border-top:1px solid var(--rule)}
.post:first-of-type{border-top:0;padding-top:0}
.cap{margin:0 0 8px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.pf{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:12px;opacity:.65}
.link2{border:0;background:none;color:var(--ink);font:12px var(--font);text-decoration:underline;cursor:pointer;padding:2px}
#panel.folded #pbody{display:none}
#panel.folded #phead{border-bottom:0}

/* photo pins */
#pins{pointer-events:none}
.pin{pointer-events:auto;cursor:pointer}
.pin .pp{filter:drop-shadow(0 1px 2px #0007)}
.pin .drop{fill:var(--pin);stroke:var(--pin-edge);stroke-width:1.2}
.pin .dot{fill:var(--pin-dot)}
.pin .bg{fill:var(--ink);stroke:var(--panel);stroke-width:1.5}
.pin .tot{font:700 10px var(--font);text-anchor:middle;fill:var(--on-ink)}

/* new post dialog */
.modal{position:fixed;inset:0;z-index:9;background:#0007;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.sheet{width:min(460px,100%);max-height:100%;overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:18px;box-sizing:border-box}
.sheet h2{margin:0 0 14px}
.f{display:block;margin-bottom:14px;font:600 12px var(--font)}
.opt{font-weight:400;opacity:.6}
.lab{display:flex;justify-content:space-between;margin-bottom:6px}
.f input,.f textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;border:1px solid var(--edge);border-radius:3px;padding:9px 10px;background:var(--land);color:var(--ink);font:14px var(--font)}
.f textarea{resize:vertical}
.f input.bad{border-color:#d0453a}
.cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:8px}
.cgrid:empty{display:none}
.cph{position:relative;aspect-ratio:1;border-radius:2px;overflow:hidden;background:var(--grat)}
.cph img{width:100%;height:100%;object-fit:cover;display:block}
.cph button{position:absolute;top:3px;right:3px;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:#000b;color:#fff;font:600 13px/1 var(--font);cursor:pointer}
.err{min-height:18px;margin:0 0 8px;color:#c0392b;font-size:12px}
.bar2{display:flex;justify-content:flex-end;gap:8px}

/* photo viewer */

#toast{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);max-width:min(560px,calc(100% - 24px));background:var(--ink);color:var(--on-ink);padding:9px 14px;border-radius:3px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.show{opacity:1}
#hint{margin-left:10px;opacity:.6}
#mode{font-size:11px;opacity:.55;white-space:nowrap}
.conf{font-size:12px}
.txt:disabled{opacity:.45;cursor:default}
@media (max-width:520px){#panel{width:calc(100% - 68px)}}

#out{margin-left:10px;font:inherit;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--edge);border-radius:3px;padding:2px 9px;cursor:pointer}
#out:hover{background:var(--hover)}
#out[hidden]{display:none}

/* welcome sheet (shown until the first post) */
#welcome{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);width:min(640px,calc(100% - 24px));max-height:calc(100% - 140px);overflow:auto;box-sizing:border-box;padding:28px 32px 22px;background:var(--panel);border:1px solid var(--rule);border-radius:22px;box-shadow:0 20px 50px #1f3c2d29;display:flex;flex-direction:column;gap:16px}
#welcome[hidden]{display:none}
#welcome h2{margin:0;font-size:28px;font-weight:700;letter-spacing:-.015em}
#welcome p{margin:-8px 0 0;font-size:15px;line-height:1.5;opacity:.75}
.ws{display:flex;align-items:center;gap:10px;height:50px;box-sizing:border-box;padding:0 16px;border:1.5px solid var(--edge);border-radius:25px;background:var(--hover)}
.ws input{flex:1;min-width:0;border:0;background:transparent;font:16px var(--font);color:var(--ink);outline:none}
.wchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.wchips span{opacity:.7}
.wchips button{min-height:44px;padding:0 16px;border:1.5px solid var(--edge);border-radius:22px;background:var(--panel);color:var(--ink);font:600 14px var(--font);cursor:pointer}
.wchips button:hover{background:var(--hover)}
.wfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding-top:14px;font-size:13px;opacity:1}
.wfoot span{opacity:.7}
.wfoot .txt{min-height:44px;padding:0 24px;font-size:15px}

/* ---- calm journal look: soft, rounded, roomy ---- */
.c.sel{stroke:var(--accent);stroke-width:2}
#tip{border-radius:10px;padding:6px 12px;font-size:13px}
#ui{right:16px;top:16px;gap:8px}
#ui button{width:44px;height:44px;border:0;box-shadow:0 2px 8px #1f3c2d2e}
#ui button:hover{background:var(--hover)}
#info{left:16px;bottom:16px;border:0;border-radius:24px;padding:10px 18px;font-size:13px;box-shadow:0 2px 8px #1f3c2d2e;display:flex;align-items:center;flex-wrap:wrap;gap:2px 0}
#out{min-height:36px;border-radius:18px;padding:0 14px;border-color:var(--accent);color:var(--accent)}
#out:hover{background:var(--accent);color:var(--on-ink)}
#panel{left:16px;top:16px;width:min(320px,calc(100% - 92px));max-height:calc(100% - 104px);border:0;border-radius:24px;box-shadow:0 12px 34px #1f3c2d29,0 2px 6px #1f3c2d14}
#phead{padding:16px 18px;border-bottom-color:var(--rule)}
.wm{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700;color:var(--accent)}
.wm svg{flex:none}
#stat{margin-top:2px;font-size:13px}
#pbody{padding:14px 18px 18px}
.txt{min-height:40px;padding:0 18px;font-size:14px}
.txt.sm{min-height:40px;min-width:40px;padding:0 12px}
.txt.ghost{border-color:var(--edge);color:var(--ink)}
.link{font-size:13px;min-height:36px;padding:0 0 6px;color:var(--accent);opacity:1;font-weight:600}
h2{font-weight:700;font-size:24px}
.row{min-height:48px;align-items:center;font-size:15px;border-radius:10px;padding:0 6px}
.row .n{font-weight:700}
.post{padding:16px 0}
.pgrid{gap:4px}
.th{border-radius:10px}
.cap{font-size:15px}
.pf{font-size:13px}
.link2{min-height:32px;font-size:13px}
.sheet{border:0;border-radius:24px;padding:28px 28px 22px;box-shadow:0 24px 60px #0004}
.sheet h2{margin-bottom:18px}
.f{font-size:13px;margin-bottom:18px}
.f input,.f textarea{border:1.5px solid var(--edge);border-radius:14px;padding:12px 14px;font-size:16px;background:var(--hover)}
.f input{min-height:48px}
.cph{border-radius:10px}
.bar2{gap:10px}
#toast{border-radius:24px;padding:12px 20px;box-shadow:0 8px 24px #0003}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:var(--accent)}
.pin .tot{font-family:var(--font)}
#welcome{bottom:64px}
@media (max-width:520px){#panel{width:calc(100% - 92px)}#info{max-width:calc(100% - 32px)}#hint{display:none}}

/* ---- dark mode: opt-in with the moon button (light is the default) ---- */
body.dark{color-scheme:dark;--sea:#0f1613;--land:#1b2520;--hover:#24312a;--sel:#e8f0ea;--line:#2c3a33;--grat:#16201b;--ink:#e8f0ea;--on-ink:#0f1a14;--accent:#7fd1a8;--panel:#151d19f5;--rule:#26332c;--edge:#e8f0ea52;--has:#3f7d62;--has-h:#4a8c6f;--pin:#ff9f7a;--pin-edge:#ffd0bd;--pin-dot:#2a1710}
body.dark #ui button,body.dark #info,body.dark #panel,body.dark #welcome{box-shadow:0 2px 12px #0008}
body.dark .err{color:#ff8a7d}
#theme{font-size:18px}

/* first-visit landing (option C): just the wordmark and the welcome card until the first post */
#brand{display:none;position:absolute;left:24px;top:24px;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--accent);z-index:1}
body.landing #brand{display:flex}
body.landing #panel{display:none}
#wmode{margin:-6px 0 0;font-size:13px;color:var(--ink);opacity:.8}
#wmode[hidden]{display:none}

/* New post: a round + at the bottom right that expands to a label on hover or keyboard focus */
#add{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;align-items:center;height:56px;min-width:56px;padding:0;border:0;border-radius:28px;background:var(--accent);color:var(--on-ink);font:700 15px var(--font);cursor:pointer;overflow:hidden;box-shadow:0 6px 18px #1f3c2d47}
#add .pl{flex:none;width:56px;height:56px;display:grid;place-items:center;font-size:30px;font-weight:400;line-height:1}
#add .lb{max-width:0;opacity:0;white-space:nowrap;padding-right:0;transition:max-width .25s ease,opacity .2s ease,padding .25s ease}
#add:hover .lb,#add:focus-visible .lb{max-width:120px;opacity:1;padding-right:22px}
#add:disabled{opacity:.45;cursor:default}
body.landing #add{display:none}
body.dark #add{box-shadow:0 6px 18px #000a}

/* popup cards for the selected country */
#posts{position:absolute;left:16px;right:88px;bottom:76px;z-index:3;pointer-events:none}
#posts[hidden]{display:none}
#posts>*{pointer-events:auto}
.ph{display:inline-block;margin:0 0 8px 4px;padding:6px 14px;border-radius:18px;background:var(--panel);box-shadow:0 2px 8px #1f3c2d2e;font-size:13px}
.prow{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.pcard{flex:none;width:210px;scroll-snap-align:start;display:flex;flex-direction:column;text-align:left;padding:0;border:0;border-radius:18px;background:var(--panel);color:var(--ink);font:inherit;box-shadow:0 8px 24px #1f3c2d38;overflow:hidden;cursor:pointer}
.pcard:hover{transform:translateY(-2px)}
.pimg{position:relative;display:block;height:132px;background:var(--grat)}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pcount{position:absolute;right:8px;top:8px;min-width:22px;height:22px;padding:0 7px;box-sizing:border-box;border-radius:11px;background:#0009;color:#fff;font:700 12px/22px var(--font);text-align:center}
.pcap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:10px 14px 0;font-size:14px;font-weight:600;line-height:1.3;min-height:2.6em;box-sizing:content-box;overflow-wrap:anywhere}
.pdate{padding:4px 14px 12px;font-size:12px;opacity:.6}
.pcard.empty{cursor:default;padding:18px;gap:12px;align-items:flex-start}
.pcard.empty:hover{transform:none}
.pcard.empty p{margin:0;font-size:14px}
#posts.enter .ph,#posts.enter .pcard{animation:pop .34s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:var(--d,0ms)}
@keyframes pop{from{opacity:0;transform:translateY(28px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#posts.enter .ph,#posts.enter .pcard{animation:none}}
@media (max-width:520px){.pcard{width:170px}.pimg{height:110px}#posts{left:8px;right:8px;bottom:84px}}

/* post viewer: blurred backdrop, scroll or swipe through the photos */
#box{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;background:#101a1566;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .22s ease}
#box.on{opacity:1}
#box[hidden]{display:none}
.vwrap{width:min(900px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--panel);color:var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px #0006;transform:scale(.97);transition:transform .22s ease}
#box.on .vwrap{transform:none}
.vframe{position:relative;background:#0f1613}
#vscroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;height:min(64vh,620px)}
#vscroll::-webkit-scrollbar{display:none}
.slide{flex:none;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.slide img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.vnav,#bclose{position:absolute;width:44px;height:44px;border:0;border-radius:22px;background:#fffffff0;color:#1f2a24;font:400 28px/1 var(--font);cursor:pointer;box-shadow:0 2px 10px #0004;display:grid;place-items:center;padding:0}
.vnav[hidden]{display:none}
.vnav.l{left:12px;top:50%;margin-top:-22px}.vnav.r{right:12px;top:50%;margin-top:-22px}
#bclose{right:12px;top:12px;font-size:26px}
#bcount{position:absolute;left:12px;top:12px;padding:0 12px;height:28px;border-radius:14px;background:#0009;color:#fff;font:600 13px/28px var(--font)}
#bcount:empty{display:none}
.vinfo{padding:16px 22px 18px;display:flex;flex-direction:column;gap:10px}
#bcap{margin:0;font-size:16px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;max-height:20vh;overflow:auto}
#bcap[hidden],#vdots[hidden]{display:none}
#vdots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
#vdots span{width:7px;height:7px;border-radius:50%;background:var(--edge);transition:background .15s,transform .15s}
#vdots span.on{background:var(--accent);transform:scale(1.25)}
.vrow{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
#bmeta{opacity:.65}
@media (max-width:520px){#box{padding:8px}#vscroll{height:min(58vh,520px)}}
#toast{z-index:6}

#mode[hidden]{display:none}
#stat{font-size:13px;opacity:.8}

/* per-photo captions */
.cgrid{display:flex;flex-direction:column;gap:10px}
.cph{display:flex;align-items:center;gap:12px;aspect-ratio:auto;overflow:visible;background:none;border-radius:0}
.cph img{flex:none;width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--grat)}
.cph .pcapin{flex:1;min-width:0;margin:0;min-height:44px;font-size:15px}
.cph button{position:static;flex:none;width:32px;height:32px;font-size:18px;background:var(--hover);color:var(--ink)}
#bphoto{margin:0;font-size:17px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
#bphoto[hidden]{display:none}
#bphoto+#bcap{font-size:14px;opacity:.8}

/* sign-in (standalone site) */
#auth{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--sea)}
#auth[hidden]{display:none}
#aform{width:min(440px,100%);box-sizing:border-box;padding:32px;background:var(--panel);border-radius:24px;box-shadow:0 20px 50px #1f3c2d29;display:flex;flex-direction:column;gap:14px}
#aform h2{margin:0;font-size:28px}
#aform p{margin:0;font-size:15px;line-height:1.5;opacity:.8}
#aform .txt{min-height:48px;font-size:16px}
#acoderow{display:flex;flex-direction:column;gap:10px}
#acoderow[hidden]{display:none}
#amsg{min-height:1.4em;font-size:14px}
#amsg.bad{color:#c0392b;opacity:1}
body.signin #panel,body.signin #ui,body.signin #info,body.signin #add,body.signin #welcome,body.signin #brand{display:none}
#pfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 18px 12px;border-top:1px solid var(--rule);font-size:12px}
#pfoot:has(.signout[hidden]){display:none}
#panel.folded #pfoot{display:none}
.who{opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct{margin:-4px 0 0;font-size:13px;display:flex;gap:8px;align-items:center}
.acct:has(.signout[hidden]){display:none}
.signout[hidden]{display:none}
body.dark #amsg.bad{color:#ff8a7d}