:root{--ink:#f1f4e9;--ink2:#c1d0ce;--dim:#acc1bf;--line:#ffffff20;--card:#173b46;--gold:#f8ce8e;--h:28}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:#103d50;color:var(--ink);font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;line-height:1.5;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}a{color:inherit}button:disabled{opacity:.45;cursor:default}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
[hidden]{display:none!important}
#map{position:fixed;inset:0;touch-action:none;cursor:grab;outline-offset:-4px}
#map:active{cursor:grabbing}
#map{opacity:0;transition:opacity .5s}
#map.world-ready{opacity:1}
#map canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.world-shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#103642ed 0%,#1036429e 20%,transparent 46%),linear-gradient(0deg,#103642d9,transparent 23%)}
.bar{position:fixed;inset:0 0 auto;z-index:5;display:flex;align-items:center;gap:16px;padding:22px 32px;pointer-events:none;background:linear-gradient(#103642ab,transparent)}
.bar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:19px;font-weight:750;letter-spacing:-.5px}
.brand i{display:block;width:28px;height:32px;background:#f6c886;clip-path:polygon(48% 0,82% 33%,98% 67%,85% 90%,57% 100%,22% 89%,5% 61%,27% 35%,31% 62%,49% 70%,57% 51%)}
.nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav a{font-size:14px;text-decoration:none;padding:10px 16px;border-radius:30px;color:var(--ink2);transition:background .18s,color .18s}
.nav a:hover,.nav a[aria-current]{background:#ffffff0f;color:var(--ink)}
.nav a.cta,.go{color:#173b46;background:#f4ce96;font-weight:750}
.nav a.cta{margin-left:12px;padding:12px 20px;box-shadow:0 3px 0 #102e3833}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:#173b46ed;margin-left:auto}
.welcome{position:fixed;top:122px;left:40px;width:290px;z-index:3;pointer-events:none}
.welcome>*{pointer-events:auto}
.live-note{display:flex;align-items:center;gap:8px;color:#d6e5d9;font-size:12px;font-weight:600}
.live-note i{width:6px;height:6px;border-radius:50%;background:#b5e5bd;box-shadow:0 0 0 4px #b5e5bd15}
.welcome h1{font-size:clamp(38px,3.9vw,58px);font-weight:650;letter-spacing:-2.7px;line-height:1.05;margin:22px 0 18px;text-wrap:balance}
.welcome p{font-size:15px;line-height:1.65;max-width:260px;color:var(--ink2);margin:0 0 24px;text-wrap:pretty}
.explore{display:inline-flex;gap:14px;align-items:center;min-height:48px;padding:0 19px;color:#173b46;background:#f4ce96;border:0;border-radius:28px;font-weight:750;font-size:14px;transition:background .2s}
.explore:hover{background:#ffe1b3}.explore svg{width:18px;height:18px}
.mini-note{margin-top:16px;font-size:12px;color:var(--dim)}
.hud{position:fixed;left:40px;bottom:110px;display:flex;gap:23px;z-index:4;max-width:340px;flex-wrap:wrap}
.st{font-size:12px;color:var(--ink2);line-height:1.4;max-width:150px}.st b{display:block;color:var(--ink);font-size:24px;font-weight:550;line-height:1.3;letter-spacing:-.5px}
.st.weather{width:100%;font-size:12px}.st.weather b{font-size:12px;display:inline;color:var(--ink2);letter-spacing:0;font-weight:500}
.st.msg{max-width:280px;font-size:14px}.st.bad{color:#ffcfb5}
.again{display:block;margin-top:8px;min-height:44px;border:1px solid var(--line);background:#173b46;color:var(--ink);padding:8px 12px;border-radius:12px}
.side{position:fixed;right:24px;bottom:108px;z-index:5;display:flex;flex-direction:column;gap:9px}
.ico{display:grid;place-items:center;width:44px;height:44px;background:#153943e8;border:1px solid #d4ebe229;border-radius:50%;color:#e0e8dd;font-size:23px;backdrop-filter:blur(16px);transition:background .2s,transform .2s;padding:0}
.ico:hover{background:#2b5760}.ico:active{transform:scale(.94)}.ico[aria-pressed=true]{color:var(--gold);border-color:#f8ce8e77}
.ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dock{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;z-index:5;padding:6px;border-radius:34px;background:#153a45ed;border:1px solid #d4ebe229;backdrop-filter:blur(20px);box-shadow:0 12px 32px #0a253133}
.dock button{display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;min-height:46px;border:0;background:none;color:#b8cecb;border-radius:28px;padding:0 18px;font-size:13px;font-weight:650;transition:background .2s,color .2s}
.dock button[aria-pressed=true]{background:#e3e9d8;color:#244850}.dock button:hover{color:#fff}.dock button[aria-pressed=true]:hover{color:#244850}
.dock svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hint{position:fixed;bottom:32px;left:40px;max-width:230px;color:var(--dim);font-size:11px;line-height:1.6;margin:0;pointer-events:none;z-index:3}
.journal-toggle{position:fixed;right:26px;top:102px;z-index:5;display:flex;align-items:center;gap:10px;min-height:44px;background:#153a45e8;color:#d2dfd7;border:1px solid var(--line);border-radius:24px;padding:8px 16px;font-size:12px;backdrop-filter:blur(16px)}
.journal-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.feed{position:fixed;top:155px;right:26px;width:280px;max-height:50vh;overflow:auto;z-index:5;border:1px solid var(--line);border-radius:20px;padding:18px;background:#153a45f5;backdrop-filter:blur(18px);box-shadow:0 16px 40px #08232c40}
.feed h5{margin:0 0 12px;font-size:15px;font-weight:600}.feed div{font-size:13px;color:var(--ink2);padding:10px 0;border-bottom:1px solid var(--line)}.feed div:last-child{border:0}.feed b{display:block;font-size:11px;font-weight:500;color:var(--dim);margin-top:4px}
.story{position:fixed;left:40px;top:140px;z-index:4;width:286px}
.story .back{background:none;color:var(--ink2);border:0;padding:0;min-height:44px;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.story h2{font-size:36px;letter-spacing:-1.3px;font-weight:600;line-height:1.12;margin:20px 0 16px;text-wrap:balance}
.story p{font-size:15px;line-height:1.7;color:var(--ink2);margin:0 0 24px}
.story footer{display:flex;align-items:center;gap:20px}.story-count{font-size:12px;color:var(--dim)}
body.exploring .welcome{display:none}
.veil{position:fixed;inset:0;background:#082b3b88;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:8}
.veil.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;max-height:82dvh;overflow:auto;margin:auto;padding:28px 28px calc(32px + env(safe-area-inset-bottom));background:#173b46;color:var(--ink);border:1px solid var(--line);border-radius:26px 26px 0 0;z-index:9;transform:translateY(106%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
.sheet.on{transform:translateY(0);visibility:visible;transition:transform .3s}
.sheet .x{position:absolute;right:10px;top:8px;border:0;border-radius:50%;width:44px;height:44px;font-size:26px;background:none;color:var(--ink2)}
.sheet h4{font-size:26px;font-weight:600;letter-spacing:-.6px;margin:7px 0}.sheet .sub{font-size:13px;color:#efd0a1}.sheet p{font-size:15px;color:var(--ink2);line-height:1.7;margin:8px 0}
.row{display:flex;gap:18px;align-items:center}.cre{width:80px;height:80px;object-fit:contain}.about{display:grid;gap:18px;margin-top:22px}.about b{display:block;font-size:15px;margin-bottom:5px}.about span{font-size:14px;color:var(--ink2)}
.go{display:block;text-align:center;text-decoration:none;margin-top:24px;padding:14px;border-radius:26px;font-size:15px}
.intro{display:none}
body.embed .bar,body.embed .hud,body.embed .side,body.embed .hint,body.embed .welcome,body.embed .story,body.embed .dock,body.embed .journal-toggle,body.embed .feed,body.embed .sheet,body.embed .veil,body.embed .world-shade{display:none!important}
body.embed #map{pointer-events:none}
@media(min-width:1600px){.welcome,.story{left:64px;top:160px;width:340px}.welcome p{max-width:290px}.hud,.hint{left:64px}}
@media(max-width:1000px){.welcome{left:24px;width:230px;top:110px}.welcome h1{font-size:42px;letter-spacing:-2px}.welcome p{font-size:14px;max-width:215px}.hud,.hint{left:24px}.hud{gap:16px}.hint{max-width:170px}.dock button{padding:0 13px}.story{left:24px;width:238px}.journal-toggle{font-size:0;width:44px;justify-content:center;padding:0}.journal-toggle svg{width:18px;height:18px}}
@media(max-width:900px){
 .bar{padding:14px 18px}.brand{font-size:17px}.brand i{width:24px;height:28px}.burger{display:flex}
 .nav{display:none;position:fixed;right:18px;top:68px;background:#153a45f5;border:1px solid var(--line);padding:10px;min-width:210px;border-radius:20px;box-shadow:0 15px 35px #08232c40;flex-direction:column;align-items:stretch}.nav.on{display:flex}.nav a{min-height:44px}.nav a.cta{margin:4px 0 0}
 .world-shade{background:linear-gradient(#103642de,transparent 40%),linear-gradient(0deg,#103642de,transparent 30%)}
 .welcome{top:89px;left:22px;right:22px;width:auto;pointer-events:none}.welcome>*{pointer-events:auto}.welcome h1{font-size:35px;letter-spacing:-1.6px;margin:12px 0 9px;max-width:290px}.welcome p{font-size:13px;line-height:1.55;max-width:280px;margin-bottom:14px}.welcome .explore{min-height:44px;font-size:12px;padding:0 16px}.live-note{font-size:11px}.mini-note{display:none}
 .dock{bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100vw - 28px);padding:5px;gap:1px}.dock button{padding:0 13px;min-height:47px;font-size:11px;gap:5px;flex-direction:column;line-height:1.1}.dock svg{width:17px;height:17px}
 .side{right:16px;bottom:calc(99px + env(safe-area-inset-bottom));gap:8px}.side .ico{width:44px;height:44px}.side #what{display:none}
 .journal-toggle{right:18px;top:82px}.feed{right:18px;top:137px;max-width:calc(100vw - 36px)}
 .hud{left:22px;bottom:calc(105px + env(safe-area-inset-bottom));gap:18px;max-width:calc(100vw - 90px)}.st{font-size:11px}.st b{font-size:23px}.st.weather{display:none}.st.msg{font-size:12px;max-width:240px}
 .hint{display:none}.story{top:85px;left:22px;width:calc(100vw - 88px);max-width:360px}.story .back{min-height:32px}.story h2{font-size:28px;margin:10px 0}.story p{font-size:13px;line-height:1.5;margin-bottom:12px}.story .explore{min-height:40px;font-size:12px}.story footer{gap:14px}
 .sheet{padding:26px 22px calc(28px + env(safe-area-inset-bottom))}
}
@media(max-height:600px) and (min-width:901px){.welcome{top:90px}.welcome h1{font-size:38px;margin:12px 0}.welcome p{font-size:13px;margin-bottom:14px}.mini-note{display:none}.hud{bottom:100px}.story{top:86px}.story h2{font-size:28px;margin:8px 0}.story p{font-size:13px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}