:root {
  --bg: #111113;
  --surface: #1b1b1f;
  --surface-hover: #242429;
  --line: #2c2c32;
  --text: #ececef;
  --muted: #9a9aa3;
  --focus: #ececef;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Lucide icons drawn as masks so they take the text colour in both states. */
.icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.tiles {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-height: 144px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: background-color 150ms ease-out;
}
.tile:hover { background: var(--surface-hover); }
.tile .icon { width: 36px; height: 36px; }
.tile-label { font-size: 18px; font-weight: 600; }

@media (min-width: 560px) {
  .tiles { grid-template-columns: 1fr 1fr; }
}

/* Home sits in the top corner, clear of the notch and the rounded screen edge. */
.home {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 10;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.home:hover { background: var(--surface-hover); }

.a2hs {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  background: var(--bg);
}
.a2hs-panel { width: 100%; max-width: 420px; }
.a2hs-title { margin: 0 0 16px; font-size: 24px; font-weight: 600; }
.a2hs-steps { margin: 0 0 32px; padding-left: 20px; color: var(--muted); }
.a2hs-steps li + li { margin-top: 8px; }
.a2hs-dismiss {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection { background: #3a3a44; color: var(--text); }