:root {
  --red: #d7191f;
  --ink: #f2f2f2;
  --muted: #9aa3ab;
  --bg: #1d2226;
  --chip: rgba(255, 255, 255, .08);
  --chip-hover: rgba(255, 255, 255, .16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: max(14px, env(safe-area-inset-top)) 16px 0;
  pointer-events: none;
}
.top a { pointer-events: auto; }
.back { color: var(--muted); text-decoration: none; font-size: .85rem; font-weight: 600; }
.back:hover { color: var(--ink); }
h1 {
  font-family: "Archivo Black", Inter, sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.05;
  margin: .2em 0 .15em;
}
h1 span { color: var(--red); }
.hint { margin: 0; color: var(--muted); font-size: .85rem; }

.loading {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  transition: opacity .4s;
}
.loading.done { opacity: 0; pointer-events: none; }
.bar { width: 200px; height: 4px; border-radius: 4px; background: var(--chip); overflow: hidden; margin: 0 auto; }
.bar span { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s; }

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 0 16px max(30px, calc(env(safe-area-inset-bottom) + 22px));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}
.group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.dock button {
  font: 600 .85rem Inter, sans-serif;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .15s, border-color .15s;
}
.dock button:hover { background: var(--chip-hover); }
.dock button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.dock button.on, .dock button[aria-pressed="true"] { background: var(--red); border-color: var(--red); }

.credit {
  position: fixed;
  right: 16px; bottom: max(6px, env(safe-area-inset-bottom));
  margin: 0;
  font-size: 10px;
  color: var(--muted);
  opacity: .7;
}
.credit a { color: inherit; }

@media (max-width: 640px) {
  .dock { gap: 6px; }
  .group { width: 100%; }
  .dock button { padding: 7px 11px; font-size: .8rem; }
  .credit { left: 16px; right: auto; }
}