/* Colours: #7705bc #8c52ff #ec008c #ffffff #000000 */
@font-face {
  font-family: "High Tide Geometric";
  src: local("High Tide Geometric"), url("../fonts/HighTideGeometric.woff2") format("woff2");
  font-display: swap;
}
:root {
  --purple: #7705bc; --violet: #8c52ff; --pink: #ec008c;
  --font: "High Tide Geometric", "Century Gothic", "Avenir Next", "Poppins", "Montserrat", "Segoe UI", system-ui, "Noto Sans",
    "Noto Sans Arabic", "Segoe UI Historic", "Segoe UI Symbol", "Tahoma", "Arial", "Nirmala UI", "Leelawadee UI", "Gill Sans Nova", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Yu Gothic UI", "Meiryo UI", "Malgun Gothic", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Noto Sans Devanagari", "Noto Sans Ethiopic", "Ebrima", "Sylfaen", "Myanmar Text", "Khmer UI", "Lao UI", "Iskoola Pota", "Gadugi", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --bg: #ffffff; --text: #000000; --muted: #4a3a58; --accent: var(--purple);
  --chip: #f3ebfa; --chip-on: var(--purple); --chip-on-text: #fff; --logo-filter: none;
}
:root[data-theme="dark"] {
  --bg: #170d22; --text: #ffffff; --muted: #cdbfe0; --accent: var(--violet);
  --chip: #2a1b3d; --chip-on: var(--violet); --chip-on-text: #000; --logo-filter: brightness(1.35) saturate(1.05);
}
:root[data-theme="black"] {
  --bg: #000000; --text: #ffffff; --muted: #cfc4dc; --accent: var(--pink);
  --chip: #14091d; --chip-on: var(--pink); --chip-on-text: #000; --logo-filter: brightness(1.25);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #170d22; --text: #ffffff; --muted: #cdbfe0; --accent: var(--violet);
    --chip: #2a1b3d; --chip-on: var(--violet); --chip-on-text: #000; --logo-filter: brightness(1.35) saturate(1.05);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--bg); color: var(--text); font-family: var(--font);
  transition: background .25s, color .25s;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bar { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; }
.pick { position: relative; }
.langbtn, .opt, .themebtn {
  font: inherit; font-size: .9rem; color: var(--text); background: var(--chip);
  border: 1px solid transparent; border-radius: 999px; padding: .5rem .9rem; cursor: pointer; min-height: 2.5rem;
}
.langbtn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; letter-spacing: .04em; }
.flag { width: 1.5rem; height: 1.125rem; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(128,128,128,.35); flex: none; }
.langlist { position: absolute; z-index: 10; inset-block-start: calc(100% + .4rem); inset-inline-start: 0; width: min(24rem, calc(100vw - 2.5rem)); max-height: min(60vh, 26rem); overflow-y: auto; padding: .5rem; border-radius: 1rem; background: var(--bg); border: 1px solid var(--chip-on); box-shadow: 0 .5rem 2rem rgba(0,0,0,.35); display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .35rem; }
.langlist[hidden] { display: none; }
.opt { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .6rem; min-height: 2.25rem; font-size: .85rem; }
.opt[aria-selected="true"] { background: var(--chip-on); color: var(--chip-on-text); }
.themebtn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; padding: 0; background: var(--chip-on); color: var(--chip-on-text); }
.themebtn .ico { width: 1.3rem; height: 1.3rem; display: none; }
:root[data-cur="light"] .ico-light, :root[data-cur="dark"] .ico-dark, :root[data-cur="black"] .ico-black { display: block; }
.langbtn:focus-visible, .opt:focus-visible, .themebtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
main { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem 1.5rem 2rem; }
.logo { width: min(34rem, 100%); height: auto; filter: var(--logo-filter); }
.soon { margin: .5rem 0 0; font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
/* Spaced letters break up joined scripts. */
.soon:is(:lang(ar),:lang(fa),:lang(ur),:lang(ckb),:lang(ps),:lang(sd),:lang(ug),:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(gu),:lang(pa),:lang(ta),:lang(te),:lang(kn),:lang(ml),:lang(si),:lang(th),:lang(lo),:lang(km),:lang(my)) { letter-spacing: 0; }
.rule { width: 7rem; height: 4px; border-radius: 4px; margin: 1.25rem 0; background: linear-gradient(90deg, var(--purple), var(--violet), var(--pink)); }
.line { margin: 0; max-width: 28rem; font-size: clamp(1rem, 3.5vw, 1.2rem); line-height: 1.5; color: var(--muted); text-wrap: balance; }
footer { padding: 1rem; text-align: center; font-size: .85rem; color: var(--muted); }
@media (max-width: 30rem) { .bar { justify-content: center; position: relative; } .pick { position: static; } .langlist { inset-inline: 1.25rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }