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

.container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  --c: #f7f7f2;
  background-color: #272933;
  background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px, 300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px, 300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px, 300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px, 300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px, 300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px, 300px 210px, 300px 210px, 300px 210px;
  animation: hi 150s linear infinite;
}

.container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(ellipse 1.5px 2px at 1.5px 50%, #0000 0, #0000 90%, #272933 100%);
  background-size: 25px 8px;
  pointer-events: none;
}

.top-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 0;
}

.page-title {
  margin: 0;
  color: #f7f7f2;
  font-size: clamp(1.6rem, 3vw, 3rem);
  text-align: center;
  flex: 1;
}

.back-btn,
.discussion-btn {
  padding: 10px 16px;
  border: 2px solid #f7f7f2;
  border-radius: 14px;
  background: rgba(247, 247, 242, 0.08);
  color: #f7f7f2;
  cursor: pointer;
  white-space: nowrap;
}

.scroll-box {
  position: absolute;
  inset: 12vh 5vw 5vh;
  z-index: 2;
  background: #272933;
  border: 6px solid #f7f7f2;
  border-radius: 28px;
  overflow: auto;
  box-sizing: border-box;
  box-shadow: 0 0 12px rgba(247, 247, 242, 0.55), 0 0 28px rgba(247, 247, 242, 0.35), 0 0 48px rgba(247, 247, 242, 0.18);
}

.scroll-content {
  min-height: 100%;
  padding: 24px;
  color: #f7f7f2;
  font-family: Arial, sans-serif;
}

.subtitle {
  margin: 10px 0 24px;
  opacity: 0.7;
  font-size: 1rem;
}

.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chapter-btn {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #f7f7f2;
  border-radius: 16px;
  background: rgba(39, 41, 51, 0.92);
  color: #f7f7f2;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.chapter-btn:hover {
  background: rgba(247, 247, 242, 0.12);
}

@keyframes hi {
  from { background-position: 0 220px; }
  to { background-position: 0 6800px; }
}