/* Font come zeroproject.it — self-hosted (funzionano anche offline) */
@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; font-weight: 600; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; font-weight: 400; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; font-weight: 500; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; font-weight: 400; font-style: italic; font-display: swap; }

/* Caratteri estesi (polacco ecc.): scaricati solo se servono */
@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-ext-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-latin-ext-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-latin-ext-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Cirillico (russo): solo Playfair; il testo usa il carattere di sistema */
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-cyrillic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-cyrillic-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-cyrillic-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
/* ============================================================
   PALETTE — da allineare a zeroproject.it (sostituire gli HEX)
   ============================================================ */
:root {
  /* Palette zeroproject.it */
  --brand: #1F3A34;        /* verde ZeroProject */
  --brand-dark: #142822;   /* verde scuro sezioni */
  --brand-soft: #EAE2D2;   /* beige fascia */
  --accent: #C56B2E;       /* terracotta (etichette, puntini) */
  --gold: #E8B27A;         /* oro su fondo verde */
  --bg: #F2EDE4;           /* beige sfondo */
  --surface: #FBF7F0;      /* card chiare */
  --text: #14171C;
  --muted: #6E6A62;
  --line: #E1D8C8;
  --ok: #2F8F5B;
  --c-electric: #2F8F5B;
  --c-ac: #2E6FB7;
  --c-boiler: #D9822B;
  --c-net: #7A5FA0;        /* guida modem */
  --radius: 16px;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Playfair Display", Georgia, "Songti SC", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.5; -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; }
a { color: inherit; }

/* Hero */
.hero { text-align: center; padding: calc(56px + env(safe-area-inset-top)) 20px 8px; position: relative; color: var(--brand); }
.hero .kicker { font-family: var(--serif); font-style: italic; font-size: 20px; }
.hero h1 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 38px; letter-spacing: -0.03em; margin: 0 0 8px; line-height: 1.05; }
.hero .place { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.hero .place::before { content: "● "; font-size: 8px; vertical-align: 2px; }
.hero .dates { margin-top: 16px; display: inline-block; background: var(--surface); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; font-size: 13px; }
.lang-btn {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px;
  background: var(--surface); color: var(--brand); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font: 500 13px var(--font); cursor: pointer;
}

/* Menu */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 16px 0; }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; color: var(--brand);
  padding: 16px 14px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; transition: transform .1s;
}
.tile:active { transform: scale(.97); }
.ico { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; margin-bottom: 10px; color: var(--brand); flex: none; }
.ico svg { width: 22px; height: 22px; }
.tile .lbl { font-weight: 500; font-size: 16px; }
.tile .sub, .feature .sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.stack { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 0; }
.feature { display: flex; text-decoration: none; border-radius: 20px; padding: 18px; }
.feature.light { align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--brand); }
.feature.light .ico { margin: 0; }
.feature.light .lbl { display: block; font-weight: 500; font-size: 16px; }
.feature.light .arrow { margin-left: auto; font-size: 20px; }
.feature.light.pulse { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,107,46,.15); }
.feature.dark { flex-direction: column; gap: 6px; background: var(--brand-dark); color: #FBF7F0; padding: 22px 20px; }
.feature.dark .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.feature.dark .ftitle { font-family: var(--serif); font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; }
.feature.dark .ftitle em { color: var(--gold); }
.feature.dark .sub { color: #C9CCC4; }
.feature.dark .cta { margin-top: 10px; font-weight: 500; font-size: 14px; }

.help-card { background: var(--surface); border: 2px solid var(--brand); border-radius: 20px; padding: 18px; color: var(--brand); }
.hc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hc-head .ico { margin: 0; background: var(--brand); color: #fff; }
.hc-head .lbl { display: block; font-weight: 600; font-size: 17px; }
.hc-head .sub { font-size: 13.5px; color: var(--muted); }
.hc-btns { display: grid; grid-template-columns: 1fr; }
.hc-btns .btn { padding: 13px 10px; font-size: 15px; }
.tour-mini { display: flex; align-items: center; gap: 14px; background: var(--brand-dark); color: #FBF7F0; border-radius: 20px; padding: 10px 16px 10px 10px; text-decoration: none; }
.tour-mini img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: none; }
.tour-mini .eyebrow { color: var(--gold); margin: 0 0 2px; font-size: 10px; }
.tour-mini .tm-title { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.15; }
.tour-mini em { color: var(--gold); }
.tour-mini .arrow { margin-left: auto; font-size: 20px; color: var(--gold); }
.wa-bar {
  position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); margin: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand); color: #fff; text-decoration: none; padding: 14px; border-radius: 999px; font-weight: 500;
  box-shadow: 0 8px 20px rgba(20,40,34,.25);
}
.wa-bar svg { width: 20px; height: 20px; }

/* Page */
.bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: calc(10px + env(safe-area-inset-top)) 12px 12px; border-bottom: 1px solid var(--line);
}
.bar button { position: absolute; left: 10px; background: var(--surface); border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--brand); cursor: pointer; }
.bar h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; color: var(--brand); margin: 0; }
.page { padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 14px; color: var(--brand); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
.card h3 { margin: 0 0 8px; font-size: 16px; }
.eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }

/* Arrivo */
.video-wrap { border-radius: 20px; overflow: hidden; background: var(--brand-dark); aspect-ratio: 9 / 16; max-height: 62vh; margin: 0 auto; width: 100%; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-ph { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #C9CCC4; font-size: 14px; }
.video-ph .play { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(232,178,122,.15); color: var(--gold); font-size: 26px; padding-left: 4px; }
.voice-toggle { align-self: center; background: var(--surface); border: 1px solid var(--line); color: var(--brand); border-radius: 999px; padding: 8px 16px; font: 500 14px var(--font); cursor: pointer; }
.voice-toggle.on { border-color: var(--brand); }
.chapters { list-style: none; padding: 0; margin: 0; }
.chapters li + li { margin-top: 0; border-top: 1px solid var(--line); }
.chapters button { width: 100%; display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 12px 0; text-align: left; color: var(--brand); font: inherit; cursor: pointer; }
.chapters .num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 16px; }
.chapters b { display: block; font-weight: 500; }
.chapters .sub { font-size: 13px; color: var(--muted); }
.chapters .time { margin-left: auto; font-size: 13px; color: var(--muted); }
.addr { margin: 0 0 14px; font-size: 16px; }
.info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.info .eyebrow { margin-bottom: 4px; }
.info b { font-family: var(--serif); font-size: 26px; font-weight: 400; }

.btn { font-family: var(--font); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px 16px; border-radius: 12px; border: 0; font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; background: var(--brand); color: #fff;
}
.btn.accent { background: var(--brand); }
.btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.btns { display: flex; flex-direction: column; gap: 10px; }

.wifi { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ico.big { width: 64px; height: 64px; margin-bottom: 14px; }
.ico.big svg { width: 30px; height: 30px; }
.wv { font-size: 22px; color: var(--brand); word-break: break-all; }
.wv.serif { font-family: var(--serif); font-style: italic; font-size: 28px; }
.wv.pw { font-weight: 600; letter-spacing: .06em; margin-bottom: 16px; }
.sep { width: 100%; height: 1px; background: var(--line); margin: 16px 0; }
.qr-alt { display: flex; align-items: center; gap: 14px; }
.qr-alt .ico { margin: 0; }
.qr-alt .eyebrow { margin-bottom: 4px; }
.intro { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.35; margin: 0 0 8px; }
.rules { list-style: none; padding: 0; margin: 0; }
.rules li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 0; }
.rules li + li { border-top: 1px solid var(--line); }
.ri { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; }
.ri svg { width: 18px; height: 18px; }
.acc details { border-top: 1px solid var(--line); }
.acc details:first-child { border-top: 0; }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 500; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc .chev { font-family: var(--serif); font-size: 22px; color: var(--accent); transition: transform .2s; }
.acc details[open] .chev { transform: rotate(45deg); }
.mini { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--brand-dark); margin-bottom: 12px; object-fit: cover; }
.mini.ph { display: flex; align-items: center; justify-content: center; gap: 10px; color: #C9CCC4; font-size: 13px; }
.mini.ph .play { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(232,178,122,.15); color: var(--gold); font-size: 15px; padding-left: 3px; }
.acc p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; }
.steps { margin: 0; padding-left: 20px; }
.steps li::marker { font-family: var(--serif); font-style: italic; color: var(--accent); }
.tip { text-align: center; font-size: 13px; color: var(--muted); margin: 0 12px; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; }
.kv + .kv { border-top: 1px solid var(--line); }
.kv b { font-family: ui-monospace, Menlo, monospace; font-size: 17px; word-break: break-all; }
.copy { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 14px; cursor: pointer; }

.fix {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--brand);
  background: var(--surface); border: 1px solid var(--line); border-left: 6px solid; border-radius: 20px; padding: 16px;
}
.fix .fi { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.fix .fi svg { width: 22px; height: 22px; }
.fix .lbl { display: block; font-weight: 500; font-size: 16px; }
.fix .sub { font-size: 13px; color: var(--muted); }
.fix .arrow { margin-left: auto; font-size: 20px; }
.fix.electric { border-left-color: var(--c-electric); } .fix.electric .fi { background: var(--c-electric); }
.fix.ac { border-left-color: var(--c-ac); } .fix.ac .fi { background: var(--c-ac); }
.fix.boiler { border-left-color: var(--c-boiler); } .fix.boiler .fi { background: var(--c-boiler); }
.net { border-left: 6px solid var(--c-net); }
.net-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.net .fi { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-net); color: #fff; }
.net .fi svg { width: 22px; height: 22px; }
.net .lbl { font-weight: 500; font-size: 16px; }
.modem { display: block; width: 100%; border-radius: 14px; margin-bottom: 14px; }
.modem.ph { aspect-ratio: 16 / 9; background: var(--brand-soft); display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.net .steps li + li { margin-top: 8px; }
.central { display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; }
.central .fi { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.central .fi svg { width: 22px; height: 22px; }
.central .eyebrow { margin-bottom: 4px; }
.warn { background: #FBF0E4; color: #6B3A00; border-color: #EBCFAF; font-size: 14.5px; }

.tour-hero { position: relative; border-radius: 20px; overflow: hidden; background: var(--brand-dark); aspect-ratio: 4 / 3; }
.tour-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-ph { height: 100%; display: grid; place-items: center; color: #8E978F; font-size: 13px; padding-bottom: 60px; }
.tour-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(transparent, rgba(20,40,34,.92)); color: #FBF7F0; display: flex; flex-direction: column; gap: 4px; }
.tour-cap .eyebrow { color: var(--gold); margin: 0; }
.tour-cap .ftitle { font-family: var(--serif); font-size: 30px; letter-spacing: -0.02em; line-height: 1.05; }
.tour-cap em { color: var(--gold); }
.tour-img { display: block; width: 100%; border-radius: 20px; }
.info s.old { display: block; color: var(--muted); font-size: 15px; }
.val { color: var(--muted); margin: 0 4px; }
.incl { color: var(--accent); font-weight: 600; }
.deal { grid-column: 1 / -1; background: var(--brand); color: #FBF7F0; border-radius: 12px; padding: 10px 14px; text-align: center; font-weight: 500; font-size: 14.5px; }
.stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.stars svg { width: 30px; height: 30px; fill: var(--gold); }
.thanks .note { font-size: 14px; margin-top: 14px; }
.thanks .ico.big { margin: 0 auto 10px; }
.link { display: inline-block; margin-top: 6px; color: var(--brand); font-weight: 500; text-decoration: none; }
.bigtime { text-align: center; }
.bigtime .hh { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--brand); }
.thanks { text-align: center; }
.thanks p { margin: 0 0 14px; }
.places { list-style: none; padding: 0; margin: 0; }
.places li + li { margin: 0; border-top: 1px solid var(--line); }
.places a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--brand); }
.places .sub { display: block; font-size: 13px; color: var(--muted); }
.places .min { flex: none; font-family: var(--serif); font-style: italic; color: var(--accent); }
.bins { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.bins li { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.bin { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.waste { display: flex; flex-wrap: wrap; gap: 8px; }
.waste span { padding: 6px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; }

/* Language picker */
.picker {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(32px + env(safe-area-inset-top)) 20px 32px; background: var(--bg);
}
.picker .brand { text-align: center; margin: 0 auto 28px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.picker .welcome { font-family: var(--serif); font-style: italic; color: var(--brand); font-size: 22px; }
.picker .brand h1 { color: var(--brand); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 40px; letter-spacing: -0.03em; margin: 0 0 10px; line-height: 1.05; }
.picker .place { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); }
.picker .place::before { content: "● "; font-size: 9px; vertical-align: 2px; }
.picker .divider { width: 100%; height: 1px; background: var(--line); margin: 22px 0 16px; }
.picker .ask { font-size: 14px; color: var(--brand); opacity: .8; }
.picker .langs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.picker .langs button:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
.picker button {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font); background: var(--surface); color: var(--brand); border: 1px solid var(--line); border-radius: 20px; cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.picker button .flag {
  width: 62px; height: 62px; border-radius: 50%; display: block; overflow: hidden;
  background: var(--brand-soft); margin-bottom: 8px; box-shadow: inset 0 0 0 1px rgba(31,58,52,.12);
}
.picker button .flag svg, .lang-btn .mf svg { display: block; width: 100%; height: 100%; }
.lang-btn .mf { display: inline-block; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; vertical-align: -4px; margin-right: 6px; box-shadow: 0 0 0 1px rgba(31,58,52,.15); }
.picker button .name { font-size: 17px; font-weight: 500; color: var(--brand); }
.picker button .hi { font-size: 15px; color: var(--brand); font-family: var(--serif); font-style: italic; }
.picker button.sel { border: 2px solid var(--brand); box-shadow: 0 0 0 4px rgba(31,58,52,.08); }
.picker button:active { transform: scale(.96); border-color: var(--brand); }

.install { margin: 0 16px 24px; }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 14px;
}