:root { color-scheme: light dark; --bg:#faf9f7; --fg:#1c1b1a; --line:rgba(128,128,128,.3); }
@media (prefers-color-scheme: dark) { :root { --bg:#16171c; --fg:#f0eeeb; } }
* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 40px 24px 80px; max-width: 44rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7; background: var(--bg); color: var(--fg);
}
body { position: relative; }
.langpick { position: absolute; top: 8px; right: 16px; z-index: 10; font-size: .85rem; }
.langpick summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; line-height: 1.3;
  border: 1px solid var(--line);
}
.langpick summary::-webkit-details-marker { display: none; }
.langpick ul {
  position: absolute; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  min-width: 190px; max-height: 70vh; overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.langpick li a, .langpick li span {
  display: block; padding: 6px 12px; border-radius: 8px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.langpick li a:hover, .langpick li a:focus-visible { background: var(--line); }
.langpick [aria-current] { font-weight: 700; }
@media (max-width: 719px) { main { padding-top: 16px; } }
.foot-langs { margin-top: 12px; line-height: 1.9; }
.foot-langs [aria-current] { font-weight: 700; }
h1 { font-size: 1.8rem; }
.lead { font-size: 1.05rem; }
.stores { margin: 32px 0; }
footer { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .85rem; opacity: .7; }

.stage { position: relative; }
#app { height: 100%; }

@media (max-width: 820px) and (orientation: portrait) {
  body { margin: 0; padding: 0; max-width: none; overflow: hidden; }
  main > h1, main > .lead, main > .stores, .langpick, footer { display: none; }
  main { margin: 0; padding: 0; }
  .stage { position: fixed; inset: 0; }
}

@media not all and (max-width: 820px) and (orientation: portrait) {
  body {
    margin: 0; padding: 0; max-width: none;
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background:
      radial-gradient(1200px 700px at 50% -10%, rgba(45,212,191,.22), transparent 60%),
      linear-gradient(180deg, #0b2b3a 0%, #071a25 100%);
    color: #e9f4f7;
  }
  main { margin: 0; padding: 0; }
  main > h1, main > .lead, main > .stores { display: none; }
  .stage {
    height: min(86dvh, 860px);
    width: auto; aspect-ratio: 9 / 17.5; max-width: 94vw;
    border-radius: 26px; overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12);
  }
  footer {
    position: fixed; left: 0; right: 0; bottom: 10px;
    margin: 0; padding: 0; border: 0;
    text-align: center; font-size: .78rem; opacity: .45;
  }
  footer a { color: inherit; }
  .langpick { top: 12px; right: 16px; }
  .langpick summary { border-color: rgba(255,255,255,.28); }
}