:root{
  /* FUTR editorial palette — light */
  --bg:#F0F2F5; --surface:#FFFFFF; --surface-2:#F5F7FA; --raise:#FFFFFF; --deep:#E2E5EA;
  --ink:#12151E; --muted:#3E4250; --faint:#848A97; --i4:#B2B8C6;
  --line:rgba(14,16,26,.09); --l2:rgba(14,16,26,.16);
  --sea:#22BBAC; --sea-2:#1E8C81; --ac-soft:rgba(34,187,172,.10); --ab:#58CAE8;
  --ochre:#B8862E; --ochre-ink:#7A5A1E;
  --bound-bg:rgba(30,98,132,.10); --bound-fg:#1E6284;
  --res-bg:rgba(184,134,46,.12); --res-fg:#7A5A1E;
  --green:#1E8C81; --amber:#B8862E; --red:#C24A38; --red-bg:rgba(194,74,56,.08);
  --shadow:0 8px 24px rgba(20,30,50,.10); --shadow-sm:0 1px 2px rgba(20,30,50,.06);
  --rad:14px; --rad-sm:8px;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-serif:'Fraunces',Georgia,"Times New Roman",serif;
  --font-mono:'JetBrains Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
html[data-theme="dark"]{
  /* FUTR editorial palette — dark */
  --bg:#1E202F; --surface:#262A39; --surface-2:#34394A; --raise:#262A39; --deep:#1A1C29;
  --ink:#E4E2DB; --muted:#A8A5A0; --faint:#6B6862; --i4:#4A4742;
  --line:rgba(228,226,219,.08); --l2:rgba(228,226,219,.14);
  --sea:#22BBAC; --sea-2:#58CAE8; --ac-soft:rgba(34,187,172,.12); --ab:#58CAE8;
  --ochre:#E8B44E; --ochre-ink:#E8B44E;
  --bound-bg:rgba(88,202,232,.10); --bound-fg:#58CAE8;
  --res-bg:rgba(232,180,78,.10); --res-fg:#E8B44E;
  --green:#22BBAC; --amber:#E8B44E; --red:#E8634E; --red-bg:rgba(232,99,78,.12);
  --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; padding-bottom:calc(72px + var(--safe-b));
  transition:background .35s var(--ease),color .35s var(--ease);
}
a{color:var(--sea-2)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}

/* ---------- Editorial typography (FUTR) ---------- */
/* Fraunces display for headings — weight 400–600, tight tracking, never harsh-bold */
.mast .wm, .card .cbody h3, .ttl h3, .dbody h2, .phrase .en,
.sos-head .sos-title, .empty{
  font-family:var(--font-serif); font-weight:500; letter-spacing:-.015em;
  font-optical-sizing:auto;
}
.mast .wm, .sos-head .sos-title{font-weight:600}
/* JetBrains Mono micro-labels — the "terminal eyebrow" idiom */
.mast .sub, .rowlabel, .groupttl, .sec h2, .sec .n, .tag, .cost, .grate,
.chip .ct, .count, .callout .lbl, .hcount, .kv .k, .card .meta .drive,
.eh, .ecall .lab{
  font-family:var(--font-mono);
}
.tag{text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.kv .k{text-transform:uppercase; letter-spacing:.06em; font-size:11px; font-weight:600}
.sec h2{letter-spacing:.1em}

/* ---------- Motion utilities (FUTR) ---------- */
.press{transition:transform .12s var(--ease)}
.press:active{transform:scale(.97)}
.lift{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media(hover:hover){.lift:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.10)}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  padding:calc(var(--safe-t) + 10px) calc(14px + var(--safe-r)) 0 calc(14px + var(--safe-l));
}
.bar{display:flex;align-items:center;gap:10px}
.logo{flex:0 0 auto;width:42px;height:42px}
.mast{display:flex;flex-direction:column;line-height:1;min-width:0}
.mast .wm{font-size:24px;letter-spacing:-.01em}
.mast .wm b{color:var(--sea);font-weight:600}
.mast .sub{font-size:9.5px;color:var(--faint);letter-spacing:.16em;text-transform:uppercase;margin-top:5px;font-weight:600}
.hbtns{margin-left:auto;display:flex;gap:8px}
.icon-btn{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-size:18px;
  transition:transform .15s ease;
}
.icon-btn:active{transform:scale(.92)}
.search{position:relative;margin:10px 0 8px}
.search input{
  width:100%;height:46px;border-radius:13px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);padding:0 40px 0 38px;font-size:16px;
}
.search input::placeholder{color:var(--faint)}
.search .mag{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
.search .clr{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:9px;display:none;place-items:center;color:var(--muted)}
.search .clr.show{display:grid}

/* ---------- Chip rows ---------- */
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chiprow::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:all .15s ease;
}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--sea);border-color:var(--sea);color:#fff}
.chip .ct{font-size:11px;opacity:.7;font-weight:700}
.rowlabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:2px 2px 6px}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:8px;padding:2px 0 10px;flex-wrap:wrap}
.count{font-size:13px;color:var(--muted);font-weight:600;margin-right:auto}
.count b{color:var(--ink)}
.tbtn{
  height:34px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
}
.tbtn:active{transform:scale(.95)}
.tbtn.on{background:var(--ochre);border-color:var(--ochre);color:#fff}

main{padding:6px calc(14px + var(--safe-r)) 24px calc(14px + var(--safe-l));max-width:820px;margin:0 auto}

/* ---------- Section ---------- */
.sec{margin:18px 0 4px;display:flex;align-items:center;gap:9px}
.sec .mk{width:9px;height:9px;border-radius:50%;background:var(--ochre);box-shadow:0 0 0 4px color-mix(in srgb,var(--ochre) 18%,transparent)}
.sec h2{font-size:14px;font-weight:800;letter-spacing:.04em;margin:0;text-transform:uppercase}
.sec .n{font-size:12px;color:var(--faint);font-weight:700;margin-left:auto}

/* ---------- Cards ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:12px;margin:10px 0}
@media(min-width:620px){.grid{grid-template-columns:1fr 1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);
  box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .12s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;text-align:left;width:100%;
}
.card:active{transform:scale(.985)}
.card .thumb{position:relative;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb .ph{width:100%;height:100%;display:grid;place-items:center;color:var(--faint);font-size:30px;background:linear-gradient(135deg,var(--surface-2),var(--bound-bg))}
.card .star{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px;color:#fff;background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.card .star.on{color:var(--ochre)}
.card .cbody{padding:11px 13px 13px}
.card .cbody h3{margin:0 0 3px;font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.25}
.card .cbody p{margin:0;font-size:13px;color:var(--muted);line-height:1.35}
.card .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center}
.tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;line-height:1;display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.tag.kid{background:var(--res-bg);color:var(--res-fg);border:none}
.tag.drive{background:var(--bound-bg);color:var(--bound-fg);border:none}
.cost{font-size:12px;font-weight:700;color:var(--ochre);letter-spacing:1px}
.kidstars{font-size:12px;color:var(--ochre);letter-spacing:1px}
.grate{font-size:12px;font-weight:800;color:#fff;background:var(--green);padding:2px 7px;border-radius:7px;line-height:1}

/* ---------- Detail sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,20,24,.5);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s ease}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  max-height:92vh;max-height:92dvh; /* dvh so the top clears the browser chrome on phones */
  background:var(--surface);border-radius:20px 20px 0 0;box-shadow:var(--shadow);
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;padding-bottom:var(--safe-b);
}
.sheet.show{transform:translateY(0)}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 0;flex:0 0 auto}
.sheet .sclose{position:absolute;top:calc(12px + var(--safe-t));right:calc(12px + var(--safe-r));width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:16px;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet .scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
.hero{position:relative;aspect-ratio:16/10;background:var(--surface-2)}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .ph{width:100%;height:100%;display:grid;place-items:center;color:var(--faint);font-size:44px;background:linear-gradient(135deg,var(--surface-2),var(--bound-bg))}
.hero .credit{position:absolute;bottom:6px;left:8px;font-size:10px;color:#fff;background:rgba(0,0,0,.4);padding:2px 6px;border-radius:6px}
.hero .hcount{position:absolute;top:10px;left:10px;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:3px 10px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2}
.hero .harrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;font-size:28px;line-height:0;display:grid;place-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2;padding-bottom:4px}
.hero .harrow:active{transform:translateY(-50%) scale(.88);background:rgba(0,0,0,.6)}
.hero .harrow.left{left:10px}
.hero .harrow.right{right:10px}
.hero .dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.hero .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.45);transition:width .15s,height .15s}
.hero .dots i.on{background:#fff;width:9px;height:9px}
.dbody{padding:14px 16px 26px}
.dbody h2{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1.15}
.dbody .dsub{color:var(--muted);font-size:14.5px;margin:0 0 12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.abtn{flex:1 1 auto;min-width:120px;height:46px;border-radius:12px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--sea);color:#fff}
.abtn.alt{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.abtn.ghost{background:var(--surface-2);color:var(--sea-2);border:1px solid var(--line)}
.maplinks{display:flex;gap:8px;width:100%}
.maplinks .abtn{min-width:0}
.block{margin:16px 0}
.block h4{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.desc{font-size:15.5px;line-height:1.6}
.kv{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.kv:last-child{border-bottom:none}
.kv .k{flex:0 0 96px;color:var(--muted);font-weight:600}
.kv .v{flex:1;min-width:0}
ul.list{margin:0;padding:0;list-style:none}
ul.list li{position:relative;padding:6px 0 6px 22px;font-size:14.5px;line-height:1.45;border-bottom:1px solid var(--line)}
ul.list li:last-child{border-bottom:none}
ul.list.dos li::before{content:"✓";position:absolute;left:0;top:6px;color:var(--green);font-weight:800}
ul.list.donts li::before{content:"✕";position:absolute;left:0;top:6px;color:var(--red);font-weight:800}
ul.list.bring li::before{content:"•";position:absolute;left:4px;top:5px;color:var(--sea-2);font-weight:800}
.callout{background:var(--bound-bg);color:var(--bound-fg);border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.5}
.callout.tip{background:var(--res-bg);color:var(--res-fg)}
.callout .lbl{font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.06em;display:block;margin-bottom:3px}
.chips-inline{display:flex;flex-wrap:wrap;gap:6px}
.tag.amen{background:var(--bound-bg);color:var(--bound-fg);border:none}
.review{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.review .rvhead{font-size:12.5px;font-weight:700;color:var(--ochre-ink);margin-bottom:5px}
.review .rvtext{font-size:14.5px;line-height:1.5;color:var(--ink)}

/* ---------- Emergency ---------- */
.emerg-hero{background:var(--red-bg);border:1px solid color-mix(in srgb,var(--red) 30%,var(--line));border-radius:var(--rad);padding:14px;margin:12px 0}
.emerg-hero .eh{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.emerg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ecall{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left}
.ecall .num{font-size:26px;font-weight:800;color:var(--red)}
.ecall .lab{font-size:13px;font-weight:700}
.ecall .nt{font-size:11.5px;color:var(--muted)}
.contact{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:8px 0;text-align:left;width:100%}
.contact .ci{flex:1;min-width:0}
.contact .ci .cn{font-weight:700;font-size:14.5px}
.contact .ci .cs{font-size:12.5px;color:var(--muted)}
.contact .cact{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--sea);color:#fff;display:grid;place-items:center;font-size:17px}
.contact .cact.web{background:var(--surface-2);color:var(--sea-2);border:1px solid var(--line)}
.note{font-size:12.5px;color:var(--muted);line-height:1.5;background:var(--surface-2);border-radius:10px;padding:10px 12px;margin:8px 0}

/* ---------- Culture ---------- */
.acc{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:8px 0;overflow:hidden}
.acc summary{padding:13px 14px;font-weight:700;font-size:15px;list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"⌄";margin-left:auto;color:var(--faint);font-size:18px;transition:transform .2s}
.acc[open] summary::after{transform:rotate(180deg)}
.acc .ab{padding:0 14px 14px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.subtabs{display:flex;gap:8px;margin:12px 0}
.subtab{flex:1;height:40px;border-radius:11px;font-weight:700;font-size:14px;background:var(--surface-2);border:1px solid var(--line)}
.subtab.on{background:var(--sea);color:#fff;border-color:var(--sea)}
.phrase{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:8px 0;display:flex;align-items:center;gap:10px}
.phrase .pi{flex:1;min-width:0}
.phrase .en{font-size:16px;font-weight:700;color:var(--ink);line-height:1.25}
.phrase .grline{margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.phrase .gr{font-size:14.5px;color:var(--muted)}
.phrase .trn{font-size:13px;color:var(--sea-2);font-weight:700}
.phrase .say{flex:0 0 auto;width:44px;height:44px;border-radius:11px;background:var(--sea);border:none;color:#fff;display:grid;place-items:center;font-size:19px;transition:transform .12s}
.phrase .say:active{transform:scale(.9)}
.cintro{font-size:14.5px;line-height:1.55;color:var(--muted);margin:8px 2px 4px}
.acc summary .aci{display:inline-flex;align-items:center;color:var(--sea);flex:0 0 auto}
.acc summary .aci .ico{width:19px;height:19px}
.acc summary .ah{font-weight:700}
.acc.pron{background:var(--bound-bg);border-color:color-mix(in srgb,var(--sea) 25%,var(--line))}
.pron-row{padding:5px 0;font-size:14px;line-height:1.45;border-top:1px solid color-mix(in srgb,var(--sea) 12%,transparent)}
.pron-row b{color:var(--sea-2);font-family:ui-monospace,Menlo,monospace}
.phraselist{margin-top:4px}

/* ---------- Empty / misc ---------- */
.empty{text-align:center;color:var(--muted);padding:50px 20px;font-size:15px}
.groupttl{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:18px 2px 4px}

/* ---------- Bottom tab bar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  display:flex;padding:6px calc(6px + var(--safe-r)) calc(6px + var(--safe-b)) calc(6px + var(--safe-l));
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:12px;color:var(--faint);font-size:10.5px;font-weight:700}
.tab .ti{font-size:20px;line-height:1}
.tab.on{color:var(--sea-2)}
.tab.on.emerg{color:var(--red)}
.tab.sos{color:var(--red)}
.tab.sos .ti{transform:scale(1.05)}
.tab.sos.on{color:var(--red)}
.sos-head{padding:14px 2px 2px}
.sos-head .sos-title{font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--red)}
.sos-head .sos-sub{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.note.sos-link{background:var(--red-bg);color:var(--red);font-weight:600;cursor:pointer;border:1px solid color-mix(in srgb,var(--red) 25%,transparent)}

/* ---------- Install hint ---------- */
.installhint{position:fixed;left:12px;right:12px;bottom:calc(78px + var(--safe-b));z-index:55;background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);display:none;align-items:center;gap:10px;font-size:13.5px}
.installhint.show{display:flex}
.installhint b{color:var(--ochre)}
.installhint .x{margin-left:auto;font-size:18px;opacity:.7}
.view{display:none}
.view.on{display:block}

/* ---------- line icons ---------- */
.ico{flex:0 0 auto;display:inline-block;vertical-align:middle}
.tab .ti{display:grid;place-items:center;height:22px;font-size:0}
.tab .ti .ico{width:22px;height:22px}
.subtab{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tbtn .ico,.subtab .ico{opacity:.95}
.eh{display:flex;align-items:center;gap:7px}
.star .ico,.say .ico{pointer-events:none}
.mag .ico,.clr .ico{display:block}
.icon-btn .ico{width:19px;height:19px}