:root {
  --bg: #050505; --bg-raised: #0c0c0c; --ink: #fafafa; --ink-dim: #a6a6a6;
  --ink-faint: #4a4a4a; --rule: #1f1f1f; --red: #fb2c36; --red-deep: #8f1820;
  --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace;
  --serif: 'Fraunces', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow: hidden; }

#field { position: fixed; inset: 0; z-index: 0; display: block; }

nav {
  padding: 20px 32px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  background: rgba(5,5,5,0.6); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
nav .brand { color: var(--ink); font-weight: 500; }
nav .brand em { color: var(--red); font-style: normal; font-weight: 500; }
nav .breadcrumb { color: var(--ink-faint); }
nav .breadcrumb span { margin: 0 8px; }
nav a { color: var(--ink-dim); text-decoration: none; }
nav a:hover { color: var(--red); }

.opening {
  max-width: 520px; margin: 0; padding: 100px 32px 32px;
  position: relative; z-index: 5; pointer-events: none;
}
.opening * { pointer-events: auto; }
.chapter {
  font-family: var(--mono); font-size: 10px; color: var(--red);
  letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 16px;
}
h1 {
  font-weight: 300; font-size: clamp(36px, 5vw, 56px);
  line-height: 1; letter-spacing: -0.03em; margin-bottom: 16px;
}
h1 em { font-family: var(--serif); font-style: italic; color: var(--red); font-weight: 300; }
.opening p {
  font-size: 14px; color: var(--ink-dim); line-height: 1.65;
  background: rgba(5,5,5,0.75); padding: 10px 14px; border-radius: 6px;
  border: 1px solid var(--rule); backdrop-filter: blur(4px);
}
.opening code { font-family: var(--mono); font-size: 12px; color: var(--ink); background: #141414; padding: 1px 5px; border-radius: 3px; }

.controls {
  position: fixed; bottom: 24px; left: 24px; right: 24px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 14px 18px; background: rgba(12,12,12,0.85); backdrop-filter: blur(10px);
  border: 1px solid var(--rule); border-radius: 10px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  letter-spacing: 0.12em; text-transform: uppercase;
  z-index: 10; max-width: 860px; margin: 0 auto;
}
.controls label {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 140px;
}
.controls input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 2px; background: var(--rule); border-radius: 2px; outline: none;
}
.controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; background: var(--red); border-radius: 50%; cursor: pointer;
}
.controls input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; background: var(--red); border-radius: 50%; cursor: pointer; border: none;
}
.controls label span { color: var(--ink); min-width: 28px; text-align: right; }
.controls button {
  background: transparent; border: 1px solid var(--rule); color: var(--ink-dim);
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}
.controls button:hover { border-color: var(--red-deep); color: var(--red); }

footer {
  position: fixed; top: 70px; right: 32px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  letter-spacing: 0.08em; text-transform: uppercase; z-index: 10;
}
footer span { display: none; }
footer a { color: var(--ink-faint); text-decoration: none; background: rgba(5,5,5,0.7); padding: 6px 10px; border-radius: 4px; border: 1px solid var(--rule); }
footer a:hover { color: var(--red); border-color: var(--red-deep); }

@media (max-width: 640px) {
  .controls { flex-direction: column; align-items: stretch; }
  .opening { max-width: 100%; padding: 80px 20px 16px; }
  footer { top: 60px; right: 16px; }
}