:root {
  --red: #E50023;
  --red-deep: #A40016;
  --ink: #191216;
  --muted: #5E565A;
  --line: #D9D4D6;
  --soft: #F5F1F2;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #ECE9EA;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

/* Unlabelled vials, no branding — vials.svg */
.scene {
  position: fixed;
  inset: 0;
  background: #ECE9EA url("vials.svg?v=1") center / cover no-repeat;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(25, 18, 22, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gate.is-open { opacity: 1; }

.gate__panel {
  width: min(680px, 100%);
  max-height: 94vh;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.45);
  transform: translateY(10px);
  transition: transform 0.3s ease;
}
.gate.is-open .gate__panel { transform: none; }

.gate__head { background: var(--red); padding: 1.5rem 2rem; }
.gate__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: calc(94vh - 80px);
  overflow-y: auto;
  padding: 2rem;
}
.gate__intro { margin: 0; font-size: 1rem; line-height: 1.55; color: #444; }

.gate__check {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #333;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gate__check:hover { border-color: #b0b0b0; }
.gate__check:has(input:checked) { border-color: var(--red); background: rgba(229, 0, 35, 0.04); }
.gate__check input,
.gate__remember input {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  accent-color: var(--red);
  cursor: pointer;
}
.gate__check input { margin: 0.15rem 0 0; }
.gate__check a { color: var(--red); text-underline-offset: 2px; }

.gate__remember {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  padding: 0.25rem 0 0.5rem;
  font-size: 0.9375rem;
  color: #333;
  cursor: pointer;
}

.gate__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #ececec;
}
.gate__exit,
.gate__enter {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.gate__exit { color: var(--ink); text-decoration: none; background: transparent; }
.gate__exit:hover { background: var(--soft); }
.gate__enter { background: #ccc; color: #fff; cursor: not-allowed; }
.gate__enter:not(:disabled) { background: var(--red); cursor: pointer; }
.gate__enter:not(:disabled):hover { background: var(--red-deep); }
.gate__enter:focus-visible,
.gate__exit:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.gate__noscript {
  position: fixed;
  inset: auto 0 0;
  z-index: 3;
  margin: 0;
  padding: 1rem;
  background: #fff;
  text-align: center;
}

@media (max-width: 540px) {
  .gate__head { padding: 1.125rem 1.5rem; }
  .gate__title { font-size: 1.0625rem; }
  .gate__form { padding: 1.5rem 1.25rem; gap: 1rem; }
  .gate__intro { font-size: 0.9375rem; }
  .gate__check { padding: 0.875rem 1rem; font-size: 0.875rem; }
  .gate__actions { flex-direction: column-reverse; align-items: stretch; gap: 0.5rem; }
  .gate__exit, .gate__enter { width: 100%; padding: 0.875rem; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gate, .gate__panel { transition: none; }
}