:root {
  color-scheme: dark;
  --bg: #0e1015;
  --fg: #eceef4;
  --dim: #949db0;
  --line: #2a3140;
  --card: #161b24;
  --blue: #6b9cff;
  --gold: #c9a227;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", system-ui, sans-serif;
}

a { color: var(--blue); }

body.index {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.crumb {
  color: var(--dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 2.2rem;
  margin: 0.6rem 0 0.4rem;
}

.lede {
  color: var(--dim);
  line-height: 1.5;
  margin: 0 0 1.75rem;
}

.sims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.sims a {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
}

.sims a:hover { border-color: var(--blue); }

.sims strong { display: block; font-size: 1.05rem; }

.sims span {
  display: block;
  margin-top: 0.25rem;
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.4;
}

body.sim { overflow: hidden; height: 100%; }

body.sim canvas {
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  display: block;
}

.sim-chrome {
  position: fixed;
  z-index: 2;
  top: 0.6rem;
  left: 0.7rem;
  right: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  pointer-events: none;
}

.sim-chrome a,
#gpu-status {
  pointer-events: auto;
  background: rgba(14, 16, 21, 0.82);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  text-decoration: none;
}

#gpu-status:empty { display: none; }

#gpu-status {
  color: var(--gold);
  border-radius: 12px;
  max-width: 36rem;
}

.sim-controls {
  display: none;
}

@media (max-width: 820px) {
  body.sim canvas {
    /* A canvas is a replaced element, so width/height auto stays at its bitmap size (1px until wgpu resizes it) instead of stretching between the insets. */
    top: env(safe-area-inset-top, 0px);
    left: env(safe-area-inset-left, 0px);
    right: auto;
    bottom: auto;
    width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 3.4rem - env(safe-area-inset-bottom, 0px)) !important;
  }

  .sim-chrome {
    top: max(0.4rem, env(safe-area-inset-top));
    right: max(0.5rem, env(safe-area-inset-right));
    left: auto;
    align-items: flex-end;
  }

  .sim-controls {
    display: flex;
    position: fixed;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0.3rem;
    margin: 0;
    padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    background: rgba(14, 16, 21, 0.94);
    border-top: 1px solid var(--line);
    overflow-x: auto;
  }

  .sim-controls button {
    flex: 1 1 0;
    min-height: 2.35rem;
    padding: 0 0.35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--fg);
    font: inherit;
    font-size: 0.75rem;
  }
}