.direction-reader {
  --dr-paper: #efe1c1;
  --dr-paper-soft: #f8efd9;
  --dr-ink: #303242;
  --dr-muted: #786b5e;
  --dr-wood: #69482e;
  --dr-lamp: #eebf69;
  --dr-sage: #7d9676;
  position: relative;
  isolation: isolate;
  width: min(100%, 1180px);
  margin: 0 auto;
  color: var(--dr-ink);
  font-family: var(--font-body, "Microsoft YaHei", sans-serif);
}

.dr-orbit {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 10%;
  height: 72%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 20%, rgba(238, 191, 105, 0.22), transparent 16rem),
    radial-gradient(circle at 80% 30%, rgba(125, 150, 118, 0.2), transparent 18rem);
  filter: blur(10px);
}

.dr-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(89, 66, 43, 0.18);
  border-radius: 30px 24px 34px 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.42), transparent 15rem),
    linear-gradient(135deg, var(--dr-paper-soft), var(--dr-paper));
  box-shadow: 0 30px 70px rgba(7, 10, 16, 0.24), inset 0 -5px rgba(109, 76, 48, 0.05);
}

.dr-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(90deg, rgba(91, 68, 44, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(91, 68, 44, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mix-blend-mode: multiply;
}

.dr-kicker {
  color: #8a603d;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dr-intro,
.dr-quiz,
.dr-result {
  padding: clamp(26px, 5vw, 56px);
}

.dr-intro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
  gap: clamp(24px, 5vw, 62px);
  align-items: center;
}

.dr-intro h2,
.dr-quiz h3,
.dr-loading h3,
.dr-result h3 {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  color: var(--dr-ink);
}

.dr-intro h2 {
  margin-top: 10px;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.94;
}

.dr-subtitle {
  margin: 16px 0 26px;
  color: #6a5949;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.7;
}

.dr-copy {
  margin: 0 0 16px;
  color: #3d332b;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  line-height: 1.35;
}

.dr-muted,
.dr-terminal p,
.dr-result-block p,
.dr-note,
.dr-ai-advice p {
  color: var(--dr-muted);
  line-height: 1.9;
}

.dr-primary,
.dr-secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(91, 68, 44, 0.22);
  border-radius: 999px 999px 999px 18px;
  padding: 0 20px;
  cursor: pointer;
  font-weight: 900;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.dr-primary {
  color: #fff4d8;
  background: #6e4b31;
  box-shadow: 0 14px 26px rgba(73, 45, 26, 0.22);
}

.dr-secondary {
  color: #503925;
  background: rgba(255, 250, 238, 0.56);
}

.dr-primary:hover,
.dr-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px rgba(73, 45, 26, 0.26);
}

.dr-terminal {
  position: relative;
  min-height: 340px;
  padding: 28px;
  border-radius: 28px 20px 30px 20px;
  background:
    radial-gradient(circle at 90% 12%, rgba(238, 191, 105, 0.28), transparent 12rem),
    #d8c5a5;
  box-shadow: inset 0 0 0 1px rgba(93, 69, 45, 0.12);
}

.dr-terminal::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 22px;
  width: 120px;
  height: 120px;
  border-radius: 42% 48% 45% 54%;
  background: rgba(238, 191, 105, 0.22);
  filter: blur(2px);
}

.dr-terminal span {
  display: inline-block;
  color: #8a603d;
  font-family: var(--font-display, Georgia, serif);
}

.dr-terminal strong {
  display: block;
  margin: 16px 0 10px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.8rem;
}

.dr-terminal-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.dr-terminal-grid em,
.dr-pill-list span,
.dr-score-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #4d3a2a;
  background: rgba(255, 249, 233, 0.64);
  border: 1px solid rgba(91, 68, 44, 0.12);
  font-style: normal;
}

.dr-quiz {
  transform: rotate(-0.2deg);
}

.dr-quiz-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(180px, 360px);
  gap: 24px;
  align-items: end;
  margin-bottom: 30px;
}

.dr-progress-count {
  display: block;
  margin-top: 8px;
  color: #74614f;
  font-family: var(--font-display, Georgia, serif);
  font-size: 2rem;
}

.dr-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(91, 68, 44, 0.14);
}

.dr-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9caf89, #e6bd68);
  transition: width 0.35s ease;
}

.dr-quiz h3 {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-bottom: 28px;
  font-size: clamp(2rem, 4.4vw, 4.4rem);
  line-height: 1.2;
}

.dr-options {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dr-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  align-items: center;
  min-height: 86px;
  padding: 18px;
  border: 1px solid rgba(91, 68, 44, 0.14);
  border-radius: 20px 16px 22px 14px;
  color: var(--dr-ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.5), transparent 8rem),
    #f5e8cd;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(75, 51, 32, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.dr-option:nth-child(2n) {
  transform: rotate(0.35deg);
}

.dr-option:nth-child(3n) {
  transform: rotate(-0.35deg);
}

.dr-option:hover,
.dr-option.is-selected {
  transform: translateY(-4px) rotate(0deg);
  filter: brightness(1.03);
  box-shadow: 0 18px 34px rgba(75, 51, 32, 0.16);
}

.dr-option span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff4d8;
  background: #7b5739;
  font-weight: 900;
}

.dr-option strong {
  font-size: 1.02rem;
  line-height: 1.6;
}

.dr-loading {
  display: grid;
  min-height: 420px;
  place-items: center;
  padding: 60px;
  text-align: center;
}

.dr-pulse {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  border-radius: 44% 48% 45% 54%;
  background: var(--dr-lamp);
  box-shadow: 0 0 70px rgba(238, 191, 105, 0.5);
  animation: lamp-breathe 2.4s ease-in-out infinite alternate;
}

@keyframes lamp-breathe {
  from { transform: scale(0.94); opacity: 0.7; }
  to { transform: scale(1.04); opacity: 1; }
}

.dr-result-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.4fr);
  gap: 24px;
  margin-bottom: 18px;
}

.dr-result-hero h3 {
  margin-top: 10px;
  font-size: clamp(2.4rem, 6vw, 5.6rem);
  line-height: 1;
}

.dr-result-hero p {
  max-width: 760px;
  color: #5f4e40;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.4rem;
  line-height: 1.6;
}

.dr-result-hero aside,
.dr-result-block,
.dr-ai-advice,
.dr-note {
  border: 1px solid rgba(91, 68, 44, 0.13);
  border-radius: 22px 18px 24px 16px;
  background: rgba(255, 249, 233, 0.58);
}

.dr-result-hero aside {
  padding: 22px;
}

.dr-result-hero aside span,
.dr-result-hero aside em {
  display: block;
  color: var(--dr-muted);
  font-style: normal;
  line-height: 1.8;
}

.dr-result-hero aside strong {
  display: block;
  margin: 10px 0;
  color: #5d3d27;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.35rem;
}

.dr-score-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.dr-score-strip span.is-primary {
  background: #e9c77e;
}

.dr-score-strip b {
  margin-left: 8px;
  color: #714c30;
}

.dr-result-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dr-result-block {
  padding: 20px;
}

.dr-result-block h4,
.dr-ai-advice h4 {
  margin: 0 0 10px;
  color: #7b5739;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
}

.dr-result-block p {
  margin: 0;
}

.dr-result-block ol {
  margin: 0;
  padding-left: 22px;
  color: var(--dr-muted);
  line-height: 1.9;
}

.dr-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dr-ai-advice {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-top: 16px;
  padding: 24px;
}

.dr-ai-advice p {
  margin: 0;
  white-space: pre-wrap;
}

.dr-ai-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 14px;
}

.dr-ai-key-row input {
  min-height: 46px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid rgba(91, 68, 44, 0.16);
  border-radius: 999px;
  color: var(--dr-ink);
  background: rgba(255, 249, 233, 0.7);
  outline: none;
}

.dr-note {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  padding: 18px;
}

.dr-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 860px) {
  .dr-intro-grid,
  .dr-quiz-head,
  .dr-options,
  .dr-result-hero,
  .dr-result-grid,
  .dr-ai-advice {
    grid-template-columns: 1fr;
  }

  .dr-intro,
  .dr-quiz,
  .dr-result {
    padding: 22px;
  }

  .dr-quiz h3 {
    font-size: clamp(1.8rem, 10vw, 3rem);
  }
}

@media (max-width: 560px) {
  .dr-ai-key-row,
  .dr-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .dr-primary,
  .dr-secondary {
    width: 100%;
  }
}

/* Archive room redesign: the reader should feel like an old desk, not a quiz app. */
.archive-body {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 198, 104, 0.1), transparent 24rem),
    radial-gradient(circle at 18% 40%, rgba(116, 149, 255, 0.055), transparent 26rem),
    linear-gradient(180deg, #0d1421 0%, #111827 48%, #0b111d 100%);
}

.archive-body::before {
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 244, 214, 0.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 68%, rgba(217, 183, 106, 0.028) 0 1px, transparent 1.6px);
  background-size: 96px 96px, 148px 148px;
}

.archive-body .floating-lights span {
  background: #f5d38a;
  box-shadow: 0 0 16px rgba(245, 211, 138, 0.42);
  opacity: 0.22;
}

.archive-body .floating-lights span:nth-child(n + 4) {
  display: none;
}

.archive-room-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  color: #f7ecd2;
  background:
    radial-gradient(circle at 74% 22%, rgba(255, 198, 104, 0.13), transparent 22rem),
    radial-gradient(circle at 58% 72%, rgba(255, 220, 150, 0.1), transparent 26rem),
    radial-gradient(circle at 16% 36%, rgba(92, 120, 185, 0.1), transparent 30rem),
    linear-gradient(180deg, #0c1320 0%, #101827 48%, #0a101b 100%);
}

.archive-room-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(circle at 50% 118%, rgba(255, 205, 120, 0.12), transparent 34rem),
    radial-gradient(circle at 82% 18%, rgba(255, 232, 173, 0.08), transparent 24rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    120px 120px,
    120px 120px;
}

.archive-room-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 52%, transparent 0%, rgba(3, 7, 14, 0.16) 72%, rgba(3, 7, 14, 0.48) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 30%, rgba(0, 0, 0, 0.16));
}

.archive-room-page .floating-lights span {
  width: 3px;
  height: 3px;
  background: rgba(255, 232, 173, 0.36);
  box-shadow: 0 0 10px rgba(255, 220, 150, 0.18);
  opacity: 0.38;
}

.archive-room-page .floating-lights span:nth-child(1) {
  left: 14%;
  top: 32%;
}

.archive-room-page .floating-lights span:nth-child(2) {
  left: 43%;
  top: 78%;
}

.archive-room-page .floating-lights span:nth-child(3) {
  right: 19%;
  top: 26%;
}

.archive-page-shell {
  width: min(1220px, calc(100% - 44px));
  padding-top: 10px;
}

.archive-room-intro {
  min-height: clamp(520px, 58vh, 620px);
  margin: 10px 0 clamp(22px, 3vw, 34px);
}

.archive-room-intro .eyebrow {
  color: #d9c38a;
  font-family: Georgia, serif;
  letter-spacing: 0.14em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.34);
}

.archive-room-intro h1 {
  color: #fff2cf;
  font-size: clamp(4.75rem, 8vw, 8rem);
  line-height: 1;
  text-shadow:
    0 5px 24px rgba(0, 0, 0, 0.52),
    0 0 28px rgba(255, 214, 138, 0.16);
}

.archive-room-intro p {
  max-width: 680px;
  color: rgba(245, 236, 218, 0.78);
  line-height: 1.9;
}

.archive-room-intro .title-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.archive-room-intro .tag {
  border: 1px solid rgba(217, 183, 106, 0.36);
  color: rgba(255, 244, 214, 0.82);
  background: rgba(13, 22, 35, 0.58);
  box-shadow: inset 0 0 12px rgba(255, 226, 166, 0.05);
}

.archive-hero {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.75fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

.archive-hero::before {
  content: "";
  position: absolute;
  inset: -10% -4% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 44%, rgba(255, 198, 104, 0.1), transparent 24rem),
    radial-gradient(circle at 20% 42%, rgba(112, 144, 220, 0.08), transparent 28rem);
}

.archive-hero-copy {
  min-width: 0;
  max-width: 760px;
}

.archive-hero-visual {
  position: relative;
  justify-self: end;
  width: min(100%, 540px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 8%, rgba(255, 218, 128, 0.12), transparent 14rem),
    rgba(9, 16, 28, 0.62);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.34),
    0 0 54px rgba(236, 184, 94, 0.1),
    inset 0 0 0 1px rgba(255, 244, 214, 0.05);
}

.archive-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.06), transparent 28%),
    radial-gradient(circle at 20% 18%, rgba(255, 218, 128, 0.14), transparent 18rem);
}

.archive-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 215, 0.06);
}

.archive-hero-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: inherit;
  object-fit: cover;
}

.archive-hero .archive-desk,
.archive-hero .desk-lamp,
.archive-hero .archive-window,
.archive-hero .archive-folder,
.archive-hero .archive-envelope,
.archive-hero .archive-compass,
.archive-hero .paper {
  display: none;
}

.archive-desk {
  min-height: 360px;
  border: 1px solid rgba(255, 232, 173, 0.18);
  border-radius: 38px 28px 44px 30px;
  background:
    linear-gradient(180deg, rgba(7, 12, 20, 0.08), rgba(7, 12, 20, 0.38)),
    url("../images/archive-room-generated.png") center / cover no-repeat,
    radial-gradient(circle at 26% 18%, rgba(255, 213, 122, 0.42), transparent 9rem),
    rgba(13, 22, 35, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 214, 0.06),
    0 28px 68px rgba(0, 0, 0, 0.34);
}

.archive-desk::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 222, 148, 0.22), transparent 18rem),
    linear-gradient(90deg, rgba(9, 16, 28, 0.42), rgba(9, 16, 28, 0.05) 68%);
  pointer-events: none;
}

.archive-desk::after {
  left: 10%;
  right: 10%;
  bottom: 32px;
  height: 118px;
  background: rgba(46, 29, 18, 0.42);
  filter: blur(10px);
}

.desk-lamp {
  z-index: 3;
  left: 48px;
  top: 58px;
  width: 86px;
  height: 72px;
  border-radius: 54% 46% 42% 58%;
  background: linear-gradient(180deg, #ffe8a6, #d9b76a);
  box-shadow:
    0 0 60px rgba(255, 218, 128, 0.62),
    0 0 120px rgba(217, 183, 106, 0.22);
}

.desk-lamp::before {
  left: 38px;
  top: 58px;
  height: 150px;
  background: #3a281c;
}

.archive-window {
  position: absolute;
  right: 36px;
  top: 34px;
  z-index: 1;
  width: 112px;
  height: 82px;
  border: 1px solid rgba(205, 183, 255, 0.34);
  border-radius: 24px 18px 26px 20px;
  background:
    radial-gradient(circle at 70% 24%, rgba(255, 244, 214, 0.62), transparent 1.3rem),
    linear-gradient(180deg, rgba(20, 39, 66, 0.8), rgba(9, 15, 26, 0.86));
  box-shadow: inset 0 0 18px rgba(205, 183, 255, 0.08);
}

.archive-window::before,
.archive-window::after {
  content: "";
  position: absolute;
  background: rgba(205, 183, 255, 0.2);
}

.archive-window::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.archive-window::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.archive-folder,
.archive-envelope,
.archive-compass,
.archive-desk .paper {
  z-index: 4;
}

.archive-folder {
  position: absolute;
  right: 80px;
  bottom: 62px;
  width: 154px;
  height: 96px;
  border-radius: 10px 18px 16px 14px;
  background: linear-gradient(180deg, #c7a35e, #8e6b37);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
  transform: rotate(-6deg);
}

.archive-folder::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -14px;
  width: 68px;
  height: 26px;
  border-radius: 10px 10px 0 0;
  background: #d9b76a;
}

.archive-envelope {
  position: absolute;
  left: 138px;
  bottom: 64px;
  width: 142px;
  height: 88px;
  border: 1px solid rgba(122, 88, 35, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff3cf, #ead9a8);
  transform: rotate(7deg);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
}

.archive-envelope::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  background: rgba(122, 88, 35, 0.08);
}

.archive-compass {
  position: absolute;
  left: 42%;
  bottom: 78px;
  width: 62px;
  height: 62px;
  border: 2px solid rgba(217, 183, 106, 0.7);
  border-radius: 50%;
  background: rgba(13, 22, 35, 0.72);
  box-shadow: 0 0 22px rgba(217, 183, 106, 0.22);
}

.archive-compass::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 9px;
  width: 8px;
  height: 42px;
  clip-path: polygon(50% 0, 100% 54%, 50% 100%, 0 54%);
  background: linear-gradient(180deg, #ffe8a6, #9d6f36);
  transform: rotate(32deg);
}

.archive-desk .paper {
  border: 1px solid rgba(122, 88, 35, 0.18);
  background:
    radial-gradient(circle at 28% 22%, rgba(122, 88, 35, 0.08) 0 1px, transparent 1px),
    linear-gradient(180deg, #fff3cf, #ead9a8);
  background-size: 18px 18px, auto;
}

.archive-desk .p1 {
  right: 176px;
  top: 92px;
  transform: rotate(5deg);
  animation: paper-drift 7s ease-in-out infinite;
}

.archive-desk .p2 {
  right: 118px;
  bottom: 128px;
  transform: rotate(-8deg);
}

.archive-desk .p3 {
  left: 116px;
  bottom: 112px;
  transform: rotate(4deg);
}

@keyframes paper-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.direction-reader {
  --museum-bg: #0b1320;
  --museum-panel: rgba(13, 22, 35, 0.78);
  --museum-panel-soft: rgba(255, 244, 214, 0.08);
  --paper: #f7eed2;
  --paper-muted: #e7d8b0;
  --gold: #d9b76a;
  --gold-soft: rgba(217, 183, 106, 0.42);
  --lavender: #cdb7ff;
  --ink: #25283a;
  --cream: #fff4d6;
  color: var(--cream);
}

.dr-orbit {
  top: -16%;
  height: 120%;
  background:
    radial-gradient(circle at 78% 10%, rgba(255, 219, 141, 0.22), transparent 18rem),
    radial-gradient(circle at 16% 48%, rgba(205, 183, 255, 0.12), transparent 20rem);
  filter: blur(16px);
}

.direction-reader {
  position: relative;
}

.direction-reader::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -110px;
  width: min(760px, 70vw);
  height: 260px;
  z-index: 0;
  pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 213, 135, 0.16), rgba(255, 213, 135, 0.06) 34%, transparent 72%);
  filter: blur(18px);
}

.direction-reader > *:not(.dr-orbit) {
  position: relative;
  z-index: 1;
}

.dr-shell {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 232, 173, 0.18);
  border-radius: 34px;
  color: var(--cream);
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 220, 150, 0.12), transparent 24rem),
    radial-gradient(circle at 20% 80%, rgba(110, 92, 170, 0.1), transparent 24rem),
    linear-gradient(135deg, rgba(13, 21, 34, 0.88), rgba(8, 14, 24, 0.78));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dr-shell::before {
  opacity: 0.18;
  background-image:
    linear-gradient(90deg, rgba(255, 244, 214, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 244, 214, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
}

.dr-shell::after {
  content: "ARCHIVE-CHOICE-01";
  position: absolute;
  right: clamp(18px, 4vw, 44px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 0;
  color: rgba(217, 183, 106, 0.18);
  font-family: Georgia, serif;
  font-size: clamp(1.4rem, 4vw, 4rem);
  letter-spacing: 0.1em;
  pointer-events: none;
}

.dr-kicker {
  color: var(--lavender);
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.dr-shell.dr-intro {
  padding: clamp(42px, 5vw, 72px);
}

.dr-intro-grid {
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.dr-intro h2,
.dr-quiz h3,
.dr-loading h3,
.dr-result h3 {
  color: var(--cream);
}

.dr-intro h2 {
  max-width: 520px;
  font-size: clamp(3.35rem, 6vw, 6rem);
  line-height: 1.08;
  white-space: nowrap;
  word-break: keep-all;
}

.dr-subtitle {
  color: var(--lavender);
  font-family: Georgia, serif;
  letter-spacing: 0.08em;
}

.dr-copy {
  color: #fff7e8;
}

.dr-muted,
.dr-terminal p,
.dr-result-block p,
.dr-note,
.dr-ai-advice p {
  color: rgba(255, 244, 214, 0.72);
}

.dr-primary,
.dr-secondary {
  min-height: 46px;
  border-radius: 999px;
  padding: 0 20px;
  font-weight: 800;
}

.dr-primary {
  color: #1a1e2b;
  border: 1px solid rgba(255, 244, 214, 0.8);
  background: linear-gradient(180deg, #ffe8a6 0%, #d9b76a 100%);
  box-shadow:
    0 0 18px rgba(217, 183, 106, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.dr-secondary {
  color: var(--cream);
  border: 1px solid rgba(217, 183, 106, 0.45);
  background: rgba(13, 22, 35, 0.72);
}

.dr-primary:hover,
.dr-secondary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 24px rgba(255, 218, 128, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dr-terminal,
.dr-quiz-paper,
.dr-result-block,
.dr-result-hero aside,
.dr-ai-advice,
.dr-note {
  color: var(--ink);
  border: 1px solid rgba(217, 183, 106, 0.38);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.5), transparent 12rem),
    linear-gradient(145deg, var(--paper), var(--paper-muted));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.dr-terminal {
  min-height: 330px;
  align-self: start;
  margin-top: 6px;
  border-radius: 26px;
}

.dr-terminal::before,
.dr-quiz-paper::before {
  content: "✦";
  position: absolute;
  right: 24px;
  top: 18px;
  color: rgba(142, 113, 63, 0.42);
  font-size: 1.4rem;
}

.dr-terminal span,
.dr-terminal strong,
.dr-terminal p,
.dr-result-hero aside span,
.dr-result-hero aside em,
.dr-result-hero aside strong,
.dr-result-block h4,
.dr-ai-advice h4,
.dr-result-block p,
.dr-result-block ol,
.dr-note,
.dr-pill-list span,
.dr-score-strip span {
  color: var(--ink);
}

.dr-terminal strong,
.dr-result-block h4,
.dr-ai-advice h4 {
  color: #6e5128;
}

.dr-terminal-grid em,
.dr-pill-list span,
.dr-score-strip span {
  border-color: rgba(142, 113, 63, 0.28);
  background: rgba(255, 244, 214, 0.72);
}

.dr-quiz {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
  transform: none;
}

.dr-archive-index {
  position: relative;
  z-index: 1;
  min-height: 260px;
  padding: 22px;
  border: 1px solid rgba(217, 183, 106, 0.36);
  border-radius: 24px 18px 28px 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(217, 183, 106, 0.16), transparent 10rem),
    rgba(13, 22, 35, 0.7);
  box-shadow: inset 0 0 18px rgba(255, 226, 166, 0.05);
}

.dr-archive-index::before {
  content: "☾";
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 28px;
  place-items: center;
  border: 1px solid rgba(217, 183, 106, 0.45);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(255, 244, 214, 0.07);
}

.dr-archive-index span,
.dr-archive-index em {
  display: block;
  color: rgba(255, 244, 214, 0.66);
  font-style: normal;
  line-height: 1.7;
}

.dr-archive-index strong {
  display: block;
  margin: 8px 0 14px;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: 2rem;
}

.dr-quiz-paper {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 4vw, 42px);
  border-radius: 28px 20px 32px 22px;
}

.dr-quiz-head {
  display: block;
  margin-bottom: 22px;
}

.dr-progress-count {
  color: #8e713f;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.dr-progress {
  height: 9px;
  margin-top: 22px;
  background: rgba(255, 244, 214, 0.12);
}

.dr-progress i {
  background: linear-gradient(90deg, var(--lavender), var(--gold));
}

.dr-quiz h3 {
  color: var(--ink);
  font-size: clamp(1.8rem, 3.8vw, 3.6rem);
  line-height: 1.24;
}

.dr-options {
  gap: 16px;
}

.dr-option {
  min-height: 82px;
  border: 1px solid rgba(142, 113, 63, 0.32);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255, 244, 214, 0.88);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.dr-option:hover,
.dr-option.is-selected {
  border-color: var(--gold);
  background: #fff1bf;
  box-shadow:
    0 0 0 1px rgba(217, 183, 106, 0.35),
    0 0 22px rgba(217, 183, 106, 0.25);
}

.dr-option span {
  color: #1a1e2b;
  background: linear-gradient(180deg, #ffe8a6, #d9b76a);
}

.dr-loading {
  color: var(--cream);
}

.dr-pulse {
  background: var(--gold);
  box-shadow: 0 0 70px rgba(217, 183, 106, 0.5);
}

.dr-result-hero h3,
.dr-result-hero p {
  color: var(--cream);
}

.dr-score-strip span.is-primary {
  background: #fff1bf;
  border-color: var(--gold);
}

.dr-ai-key-row input {
  border-color: rgba(142, 113, 63, 0.32);
  color: var(--ink);
  background: rgba(255, 244, 214, 0.72);
}

@media (max-width: 860px) {
  .archive-page-shell {
    width: min(100% - 28px, 760px);
    padding-top: 12px;
  }

  .archive-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    margin: 10px 0 24px;
    gap: 24px;
  }

  .archive-room-intro h1 {
    font-size: clamp(3.8rem, 16vw, 6.5rem);
  }

  .archive-hero-visual {
    max-width: 680px;
    width: 100%;
    justify-self: center;
  }

  .dr-quiz {
    grid-template-columns: 1fr;
  }

  .dr-shell.dr-intro {
    padding: 26px;
  }

  .dr-intro-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dr-intro h2 {
    white-space: normal;
    font-size: clamp(2.6rem, 13vw, 4.5rem);
  }

  .dr-terminal {
    min-height: auto;
    margin-top: 0;
  }

  .dr-archive-index {
    min-height: auto;
  }

  .dr-archive-index::before {
    margin-bottom: 14px;
  }
}

/* Unified archive room stage: one scene instead of separated hero/card blocks. */
.archive-room-page .archive-page-shell {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 clamp(72px, 9vh, 112px);
}

.archive-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.78fr);
  grid-template-areas:
    "copy visual"
    "copy note";
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: 1280px;
  min-height: min(720px, calc(100vh - 118px));
  margin: clamp(40px, 7vh, 78px) auto clamp(44px, 7vh, 88px);
  padding: clamp(44px, 5vw, 76px);
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.18);
  border-radius: 38px;
  background:
    radial-gradient(circle at 74% 24%, rgba(255, 214, 138, 0.16), transparent 28rem),
    radial-gradient(circle at 28% 80%, rgba(108, 92, 170, 0.12), transparent 26rem),
    linear-gradient(135deg, rgba(12, 19, 31, 0.92), rgba(8, 14, 24, 0.78));
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.archive-stage::before {
  content: "";
  position: absolute;
  inset: auto 8% -120px 8%;
  height: 260px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 213, 135, 0.18), transparent 70%);
  filter: blur(20px);
}

.archive-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 244, 214, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 244, 214, 0.012) 1px, transparent 1px),
    radial-gradient(circle at 82% 20%, rgba(255, 232, 173, 0.08), transparent 18rem);
  background-size: 86px 86px, 86px 86px, auto;
  opacity: 0.76;
}

.archive-stage-copy {
  position: relative;
  z-index: 2;
  grid-area: copy;
  max-width: 660px;
}

.archive-room-label {
  margin: 0;
  color: #d9c38a;
  font-family: Georgia, serif;
  font-size: clamp(0.84rem, 1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.archive-stage-copy h1 {
  margin: 16px 0 24px;
  color: #fff2cf;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(4.75rem, 8vw, 8.25rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow:
    0 6px 24px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(255, 220, 150, 0.12);
}

.archive-lead {
  max-width: 620px;
  margin: 0;
  color: rgba(245, 236, 218, 0.82);
  font-size: clamp(1.06rem, 1.2vw, 1.32rem);
  line-height: 1.9;
}

.archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.archive-tags span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(217, 183, 106, 0.34);
  border-radius: 999px;
  padding: 6px 13px;
  color: rgba(255, 244, 214, 0.82);
  background: rgba(13, 22, 35, 0.56);
  box-shadow: inset 0 0 12px rgba(255, 226, 166, 0.05);
  font-size: 0.92rem;
}

.archive-start-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  border: 1px solid rgba(255, 244, 214, 0.74);
  border-radius: 999px;
  padding: 0 24px;
  color: #1a1e2b;
  background: linear-gradient(180deg, #ffe8a6 0%, #d9b76a 100%);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.26),
    0 0 22px rgba(217, 183, 106, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.archive-start-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(255, 218, 128, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.archive-stage-visual {
  position: relative;
  z-index: 2;
  grid-area: visual;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.18);
  border-radius: 28px;
  background: rgba(9, 16, 28, 0.5);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.34),
    0 0 48px rgba(236, 184, 94, 0.12);
}

.archive-stage-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 215, 0.06);
}

.archive-stage-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.archive-entry-note {
  position: relative;
  z-index: 2;
  grid-area: note;
  align-self: start;
  border: 1px solid rgba(122, 88, 35, 0.18);
  border-radius: 26px;
  padding: clamp(24px, 3vw, 36px);
  color: #4a3820;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.34), transparent 12rem),
    linear-gradient(180deg, rgba(255, 244, 211, 0.98), rgba(232, 211, 160, 0.96));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.archive-entry-note span {
  display: block;
  color: #8e713f;
  font-family: Georgia, serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.archive-entry-note strong {
  display: block;
  margin: 12px 0 10px;
  color: #5f461f;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.archive-entry-note p {
  margin: 0;
  color: #4a3820;
  line-height: 1.85;
}

.reader-app {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  scroll-margin-top: 96px;
}

.reader-app .direction-reader {
  width: 100%;
}

.reader-app .dr-orbit {
  opacity: 0.72;
}

.reader-app .dr-shell.dr-intro {
  border-radius: 32px;
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 220, 150, 0.1), transparent 20rem),
    linear-gradient(135deg, rgba(10, 16, 27, 0.72), rgba(8, 13, 22, 0.58));
  border-color: rgba(255, 232, 173, 0.14);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.reader-app .dr-shell.dr-intro::after {
  content: "";
}

.reader-app .dr-intro-grid {
  display: block;
}

.reader-app .dr-intro .dr-kicker,
.reader-app .dr-intro h2,
.reader-app .dr-subtitle,
.reader-app .dr-copy,
.reader-app .dr-terminal {
  display: none;
}

.reader-app .dr-muted {
  max-width: 680px;
  margin: 0 0 22px;
  color: rgba(255, 244, 214, 0.76);
}

@media (max-width: 920px) {
  .archive-room-page .archive-page-shell {
    width: min(100% - 28px, 760px);
  }

  .archive-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "note";
    min-height: auto;
    margin: 26px auto 38px;
    padding: clamp(26px, 7vw, 44px);
    border-radius: 30px;
  }

  .archive-stage-copy h1 {
    font-size: clamp(3.8rem, 16vw, 6.5rem);
  }
}

@media (max-width: 560px) {
  .archive-room-page .archive-page-shell {
    width: min(100% - 22px, 520px);
    padding-bottom: 64px;
  }

  .archive-stage {
    margin-top: 18px;
    gap: 22px;
  }

  .archive-stage-copy h1 {
    margin-bottom: 18px;
  }

  .archive-lead {
    font-size: 1rem;
  }

  .archive-start-btn {
    width: 100%;
  }
}

/* Archive sorting ritual shown between the final answer and the result report. */
.reader-ritual {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 213, 135, 0.12), transparent 26rem),
    rgba(7, 13, 25, 0.82);
  backdrop-filter: blur(12px);
}

.ritual-stage {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  min-height: min(680px, calc(100vh - 48px));
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.2);
  border-radius: 36px;
  padding: clamp(30px, 5vw, 58px);
  color: #fff2cf;
  text-align: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 213, 135, 0.17), transparent 18rem),
    radial-gradient(circle at 22% 82%, rgba(205, 183, 255, 0.08), transparent 18rem),
    linear-gradient(145deg, rgba(13, 21, 34, 0.94), rgba(8, 14, 24, 0.86));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: ritual-stage-pulse 4.3s ease-in-out forwards;
}

.ritual-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 232, 173, 0.09);
  border-radius: 28px;
  pointer-events: none;
}

.ritual-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 28%, rgba(255, 244, 214, 0.06) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 64%, rgba(255, 232, 173, 0.05) 0 1px, transparent 1.4px);
  background-size: 92px 92px, 138px 138px;
  opacity: 0.64;
}

.ritual-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(520px, 78vw);
  height: min(520px, 78vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 213, 135, 0.28), rgba(255, 213, 135, 0.08) 36%, transparent 70%);
  filter: blur(16px);
  animation: ritual-glow 4.3s ease-in-out forwards;
}

.ritual-hat {
  position: relative;
  z-index: 4;
  width: clamp(132px, 22vw, 190px);
  height: clamp(120px, 20vw, 170px);
  margin-top: 32px;
  animation: ritual-hat-float 2.6s ease-in-out infinite, ritual-hat-think 3.7s ease-in-out infinite;
}

.hat-tip {
  position: absolute;
  left: 42%;
  top: 5px;
  width: 42%;
  height: 52%;
  border-radius: 66% 34% 48% 52%;
  background:
    linear-gradient(145deg, rgba(145, 99, 57, 0.98), rgba(70, 47, 35, 0.98));
  transform: rotate(-17deg) skewX(-4deg);
  box-shadow: inset 12px -8px 18px rgba(21, 14, 10, 0.28);
}

.hat-face {
  position: absolute;
  left: 19%;
  top: 35%;
  width: 62%;
  height: 44%;
  border-radius: 52% 48% 42% 58%;
  background:
    radial-gradient(circle at 38% 38%, rgba(255, 221, 150, 0.18), transparent 18px),
    linear-gradient(160deg, rgba(128, 86, 50, 0.98), rgba(53, 38, 31, 0.98));
  box-shadow:
    inset 18px -14px 24px rgba(20, 12, 8, 0.32),
    0 14px 28px rgba(0, 0, 0, 0.28);
}

.hat-face::before,
.hat-face::after {
  content: "";
  position: absolute;
  top: 42%;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: rgba(31, 21, 16, 0.58);
}

.hat-face::before {
  left: 27%;
  transform: rotate(12deg);
}

.hat-face::after {
  right: 25%;
  transform: rotate(-12deg);
}

.hat-brim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  height: 36%;
  border-radius: 52% 48% 50% 50%;
  background:
    linear-gradient(180deg, rgba(149, 104, 62, 0.98), rgba(60, 42, 33, 0.98));
  box-shadow:
    inset 0 8px 16px rgba(255, 226, 166, 0.08),
    0 18px 28px rgba(0, 0, 0, 0.3);
}

.hat-brim::after {
  content: "";
  position: absolute;
  left: 37%;
  top: 44%;
  width: 28%;
  height: 4px;
  border-radius: 999px;
  background: rgba(27, 18, 13, 0.52);
}

.archive-book {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 58%;
  width: clamp(180px, 34vw, 280px);
  height: 92px;
  transform: translateX(-50%) perspective(340px) rotateX(50deg);
  border-radius: 14px 14px 22px 22px;
  background: linear-gradient(180deg, #fff1bf, #d6b66f);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.archive-book span {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: calc(50% - 3px);
  background:
    linear-gradient(90deg, rgba(116, 80, 40, 0.13) 1px, transparent 1px),
    rgba(255, 244, 211, 0.38);
  background-size: 18px 100%;
}

.archive-book span:first-child {
  left: 8px;
  border-radius: 10px 4px 6px 14px;
  transform-origin: right center;
  animation: ritual-page-left 1.6s ease-in-out infinite;
}

.archive-book span:last-child {
  right: 8px;
  border-radius: 4px 10px 14px 6px;
  transform-origin: left center;
  animation: ritual-page-right 1.8s ease-in-out infinite;
}

.floating-pages span {
  position: absolute;
  z-index: 2;
  width: 58px;
  height: 78px;
  border: 1px solid rgba(122, 88, 35, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(120, 87, 43, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 244, 211, 0.96), rgba(232, 211, 160, 0.88));
  background-size: 16px 100%, auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  opacity: 0;
  animation: ritual-page-float 4.2s ease-in-out infinite;
}

.floating-pages span:nth-child(1) { left: 16%; bottom: 22%; animation-delay: 0s; }
.floating-pages span:nth-child(2) { right: 18%; bottom: 24%; animation-delay: 0.55s; }
.floating-pages span:nth-child(3) { left: 25%; bottom: 12%; animation-delay: 1.1s; }
.floating-pages span:nth-child(4) { right: 28%; bottom: 12%; animation-delay: 1.6s; }

.orbit-tags {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 44%;
  width: min(560px, 82vw);
  height: min(330px, 52vw);
  transform: translate(-50%, -50%);
  animation: ritual-tags-orbit 18s linear infinite;
}

.orbit-tags span {
  position: absolute;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid rgba(255, 232, 173, 0.26);
  border-radius: 999px;
  padding: 5px 12px;
  color: rgba(255, 242, 207, 0.76);
  background: rgba(255, 242, 207, 0.1);
  box-shadow: 0 0 20px rgba(255, 213, 135, 0.08);
  font-size: 0.88rem;
}

.orbit-tags span:nth-child(1) { left: 8%; top: 24%; }
.orbit-tags span:nth-child(2) { right: 5%; top: 22%; }
.orbit-tags span:nth-child(3) { left: 14%; bottom: 14%; }
.orbit-tags span:nth-child(4) { right: 10%; bottom: 16%; }

.ritual-kicker,
.ritual-title,
.ritual-text,
.ritual-skip,
.archive-seal {
  position: relative;
  z-index: 5;
}

.ritual-kicker {
  align-self: end;
  margin: 0 0 16px;
  color: #d9c38a;
  font-family: Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ritual-title {
  align-self: start;
  margin: 190px 0 10px;
  color: #fff2cf;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.08;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.42);
}

.ritual-text {
  min-height: 3.8em;
  max-width: 560px;
  margin: 0 auto;
  color: rgba(245, 236, 218, 0.78);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.8;
}

.ritual-text.is-changing {
  animation: ritual-text-in 0.48s ease both;
}

.ritual-skip {
  align-self: end;
  justify-self: center;
  min-height: 42px;
  border: 1px solid rgba(255, 232, 173, 0.34);
  border-radius: 999px;
  padding: 0 18px;
  color: #fff2cf;
  background: rgba(255, 242, 207, 0.1);
  cursor: pointer;
  font-weight: 800;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ritual-skip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 232, 173, 0.65);
  background: rgba(255, 242, 207, 0.16);
}

.archive-seal {
  position: absolute;
  right: 20%;
  bottom: 24%;
  border: 2px solid rgba(151, 67, 48, 0.72);
  border-radius: 8px;
  padding: 8px 14px;
  color: rgba(151, 67, 48, 0.82);
  font-weight: 900;
  letter-spacing: 0.12em;
  transform: rotate(-10deg) scale(0.86);
  opacity: 0;
  animation: ritual-seal 4.3s ease forwards;
}

@keyframes ritual-hat-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

@keyframes ritual-hat-think {
  0%, 64%, 100% { rotate: 0deg; }
  68% { rotate: -3deg; }
  73% { rotate: 2deg; }
  78% { rotate: -1deg; }
}

@keyframes ritual-page-float {
  0% { opacity: 0; transform: translate3d(0, 70px, 0) rotate(-8deg); }
  24% { opacity: 0.84; }
  72% { opacity: 0.72; }
  100% { opacity: 0; transform: translate3d(0, -120px, 0) rotate(12deg); }
}

@keyframes ritual-tags-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ritual-glow {
  0%, 70% { opacity: 0.82; scale: 0.96; }
  88% { opacity: 1; scale: 1.08; }
  100% { opacity: 0.86; scale: 1; }
}

@keyframes ritual-stage-pulse {
  0%, 72% { box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  88% { box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), 0 0 48px rgba(255, 213, 135, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  100% { box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
}

@keyframes ritual-page-left {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(-12deg); }
}

@keyframes ritual-page-right {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(12deg); }
}

@keyframes ritual-text-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ritual-seal {
  0%, 74% { opacity: 0; transform: rotate(-10deg) scale(1.3); }
  82% { opacity: 0.96; transform: rotate(-10deg) scale(0.92); }
  100% { opacity: 0.86; transform: rotate(-10deg) scale(0.96); }
}

@media (max-width: 680px) {
  .reader-ritual {
    padding: 12px;
  }

  .ritual-stage {
    min-height: min(620px, calc(100vh - 24px));
    padding: 24px 18px;
    border-radius: 28px;
  }

  .orbit-tags {
    display: none;
  }

  .floating-pages span {
    width: 42px;
    height: 58px;
  }

  .ritual-title {
    margin-top: 160px;
  }

  .archive-seal {
    right: 12%;
    bottom: 23%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reader-ritual *,
  .reader-ritual *::before,
  .reader-ritual *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Image-led archive ritual: the high-quality illustration replaces CSS-built props. */
.reader-ritual {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 32px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 213, 135, 0.12), transparent 30rem),
    rgba(6, 11, 22, 0.86);
  backdrop-filter: blur(10px);
}

.reader-ritual[hidden] {
  display: none;
}

.ritual-stage {
  position: relative;
  display: block;
  width: min(920px, 92vw);
  min-height: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.18);
  border-radius: 36px;
  padding: clamp(28px, 4vw, 48px);
  color: #fff2cf;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 214, 138, 0.14), transparent 24rem),
    linear-gradient(180deg, rgba(12, 19, 31, 0.94), rgba(7, 12, 22, 0.9));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: ritual-stage-pulse 4.2s ease-in-out forwards;
}

.ritual-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 232, 173, 0.08);
  border-radius: 28px;
  pointer-events: none;
}

.ritual-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 28%, rgba(255, 244, 214, 0.04) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 64%, rgba(255, 232, 173, 0.035) 0 1px, transparent 1.4px);
  background-size: 108px 108px, 152px 152px;
  opacity: 0.45;
}

.ritual-aura {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(620px, 86vw);
  height: min(480px, 64vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 138, 0.24), rgba(255, 214, 138, 0.08) 36%, transparent 72%);
  filter: blur(22px);
  animation: ritualPulse 2.8s ease-in-out infinite;
}

.ritual-image-wrap {
  position: relative;
  z-index: 2;
  width: min(680px, 82vw);
  margin: 0 auto 28px;
  animation: ritualFloat 3.6s ease-in-out infinite;
}

.ritual-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 232, 173, 0.14);
  border-radius: 28px;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.36),
    0 0 54px rgba(255, 213, 135, 0.14);
}

.ritual-kicker {
  position: relative;
  z-index: 3;
  margin: 0 0 10px;
  color: #d9c38a;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ritual-title {
  position: relative;
  z-index: 3;
  margin: 0 0 14px;
  color: #fff2cf;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 1.1;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.48);
}

.ritual-text {
  position: relative;
  z-index: 3;
  min-height: 2em;
  max-width: 680px;
  margin: 0 auto;
  color: rgba(245, 236, 218, 0.82);
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.8;
}

.ritual-skip {
  position: relative;
  z-index: 3;
  margin-top: 22px;
  border: 1px solid rgba(255, 232, 173, 0.32);
  border-radius: 999px;
  padding: 12px 24px;
  color: #fff2cf;
  background: rgba(255, 242, 207, 0.12);
  cursor: pointer;
  font-weight: 800;
  user-select: none;
  -webkit-user-select: none;
}

.ritual-skip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 232, 173, 0.62);
  background: rgba(255, 242, 207, 0.17);
}

.ritual-hat,
.hat-tip,
.hat-face,
.hat-brim,
.orbit-tags,
.floating-pages,
.archive-book,
.archive-seal,
.ritual-glow {
  display: none !important;
}

@keyframes ritualFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.012);
  }
}

@keyframes ritualPulse {
  0%, 100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (max-width: 680px) {
  .reader-ritual {
    align-items: center;
    padding: 14px;
  }

  .ritual-stage {
    width: 94vw;
    border-radius: 28px;
    padding: 22px 16px;
  }

  .ritual-image-wrap {
    width: 86vw;
    margin-bottom: 22px;
  }

  .ritual-title {
    font-size: clamp(30px, 10vw, 44px);
  }

  .ritual-text {
    min-height: 3.6em;
  }
}

/* Definitive result report skin: quiet gray-blue archive, no parchment panels. */
.archive-room-page .reader-app .dr-shell.dr-result {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(32px, 4.6vw, 58px);
  border: 1px solid rgba(151, 172, 198, 0.24);
  border-radius: 34px;
  color: #dbe6f0;
  background:
    radial-gradient(circle at 18% 0%, rgba(176, 196, 222, 0.16), transparent 18rem),
    radial-gradient(circle at 86% 16%, rgba(204, 219, 235, 0.10), transparent 18rem),
    linear-gradient(145deg, rgba(18, 30, 45, 0.88), rgba(7, 12, 21, 0.78));
  box-shadow:
    0 34px 98px rgba(0, 0, 0, 0.48),
    0 0 42px rgba(126, 151, 181, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.archive-room-page .reader-app .dr-shell.dr-result::before {
  opacity: 0.12;
  background-image:
    linear-gradient(90deg, rgba(183, 202, 224, 0.10) 1px, transparent 1px),
    linear-gradient(rgba(183, 202, 224, 0.07) 1px, transparent 1px);
  background-size: 88px 88px;
}

.archive-room-page .reader-app .dr-shell.dr-result::after {
  color: rgba(181, 201, 224, 0.035);
}

.archive-room-page .reader-app .dr-result .dr-kicker {
  color: rgba(198, 214, 232, 0.74);
  letter-spacing: 0.18em;
}

.archive-room-page .reader-app .dr-result-hero {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.34fr);
  gap: clamp(22px, 3vw, 36px);
  margin-bottom: 24px;
}

.archive-room-page .reader-app .dr-result-hero > div:first-child {
  padding-top: clamp(12px, 3.2vw, 32px); /* Responsive top padding to align with right card on desktop while keeping mobile layout clean */
}

.archive-room-page .reader-app .dr-result-hero h3 {
  max-width: 760px;
  margin: 26px 0 18px !important;
  color: #f0703c !important; /* Premium warm orange */
  font-size: clamp(2.2rem, 4.6vw, 4.1rem) !important; /* Adjusted to be slightly larger but still fit in a single line */
  line-height: 1.2 !important;
  text-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(240, 112, 60, 0.25) !important;
}

.archive-room-page .reader-app .dr-result-hero p {
  max-width: 760px;
  color: #57c0f8 !important; /* Elegant premium sky blue color */
  font-size: clamp(0.76rem, 0.95vw, 0.88rem) !important; /* Made even smaller to fit in a single line */
  line-height: 1.8;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-room-page .reader-app .dr-result-hero aside,
.archive-room-page .reader-app .dr-result-block,
.archive-room-page .reader-app .dr-ai-advice,
.archive-room-page .reader-app .dr-note {
  border: 1px solid rgba(158, 181, 209, 0.22);
  color: rgba(230, 238, 247, 0.84);
  background:
    radial-gradient(circle at 12% 0%, rgba(183, 202, 224, 0.12), transparent 9rem),
    linear-gradient(145deg, rgba(31, 46, 64, 0.74), rgba(13, 22, 35, 0.66));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(7px);
}

.archive-room-page .reader-app .dr-result-hero aside {
  align-self: start;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(190, 160, 140, 0.45) !important; /* Soft warm flesh-toned border */
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.65), transparent 9rem),
    linear-gradient(145deg, #f6ded0, #ecd2c0) !important; /* Cozy premium warm flesh background */
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.archive-room-page .reader-app .dr-result-hero aside span {
  color: #7d593e !important; /* Deep warm brown label */
  font-weight: 800;
  letter-spacing: 0.08em;
}

.archive-room-page .reader-app .dr-result-hero aside em {
  color: #6e5441 !important; /* High-readability warm brown explanation text */
  font-weight: 500;
}

.archive-room-page .reader-app .dr-result-hero aside strong {
  color: #382415 !important; /* Dark solid brown for secondary title contrast */
  text-shadow: none !important;
  font-size: clamp(1.08rem, 1.45vw, 1.3rem);
  line-height: 1.52;
}

.archive-room-page .reader-app .dr-score-strip {
  gap: 10px;
  margin-bottom: 24px;
}

.archive-room-page .reader-app .dr-score-strip span,
.archive-room-page .reader-app .dr-pill-list span {
  border: 1px solid rgba(158, 181, 209, 0.24);
  color: rgba(229, 237, 246, 0.86);
  background: rgba(28, 42, 60, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.16);
}

.archive-room-page .reader-app .dr-score-strip span.is-primary {
  border-color: rgba(198, 216, 236, 0.62);
  color: #f2f7fc;
  background:
    linear-gradient(180deg, rgba(101, 124, 153, 0.88), rgba(55, 73, 96, 0.82));
  box-shadow:
    0 0 22px rgba(151, 176, 207, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.archive-room-page .reader-app .dr-score-strip b {
  color: #d8e6f5;
}

.archive-room-page .reader-app .dr-result-grid {
  gap: 16px;
}

.archive-room-page .reader-app .dr-result-block {
  min-height: 146px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 24px;
}

.archive-room-page .reader-app .dr-result-block h4 {
  margin-bottom: 12px;
  color: #bfd0e4;
  font-size: 1.06rem;
  letter-spacing: 0.04em;
}

.archive-room-page .reader-app .dr-ai-advice h4 {
  margin-bottom: 12px;
  color: #cab8ff; /* Premium light lavender purple */
  font-size: 1.24rem; /* Enlarged by one font size */
  letter-spacing: 0.06em;
  text-shadow: 0 0 12px rgba(202, 184, 255, 0.15);
}

.archive-room-page .reader-app .dr-result-block p,
.archive-room-page .reader-app .dr-result-block ol,
.archive-room-page .reader-app .dr-ai-advice p,
.archive-room-page .reader-app .dr-note {
  color: rgba(226, 235, 245, 0.78);
}

.archive-room-page .reader-app .dr-result-block ol {
  padding-left: 22px;
}

.archive-room-page .reader-app .dr-ai-advice {
  border-color: rgba(158, 181, 209, 0.24);
  background:
    radial-gradient(circle at 86% 18%, rgba(177, 198, 222, 0.12), transparent 12rem),
    linear-gradient(145deg, rgba(30, 48, 67, 0.76), rgba(13, 21, 34, 0.68));
}

.archive-room-page .reader-app .dr-ai-key-row input {
  border-color: rgba(158, 181, 209, 0.24);
  color: #e7eff8;
  background: rgba(8, 14, 24, 0.54);
}

.archive-room-page .reader-app .dr-ai-key-row input::placeholder {
  color: rgba(216, 228, 241, 0.52);
}

.archive-room-page .reader-app .dr-note {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(28, 42, 60, 0.70), rgba(12, 20, 33, 0.62));
}

.archive-room-page .reader-app .dr-result .dr-primary {
  color: #192332;
  border-color: rgba(220, 232, 246, 0.64);
  background: linear-gradient(180deg, #d8e4f1, #91a9c3);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(169, 193, 220, 0.16);
}

.archive-room-page .reader-app .dr-result .dr-secondary {
  color: rgba(232, 240, 249, 0.92);
  border-color: rgba(158, 181, 209, 0.28);
  background: rgba(20, 32, 49, 0.72);
}

.archive-room-page .reader-app .dr-result .dr-primary:hover,
.archive-room-page .reader-app .dr-result .dr-secondary:hover {
  border-color: rgba(208, 223, 240, 0.52);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(174, 191, 214, 0.18);
}

@media (max-width: 860px) {
  .archive-room-page .reader-app .dr-shell.dr-result {
    padding: clamp(24px, 7vw, 36px);
  }

  .archive-room-page .reader-app .dr-result-hero,
  .archive-room-page .reader-app .dr-result-grid,
  .archive-room-page .reader-app .dr-ai-advice {
    grid-template-columns: 1fr;
  }

  .archive-room-page .reader-app .dr-result-block {
    min-height: auto;
  }
}

/* Final quiz palette pass: night archive box instead of cream board. */
.reader-quiz {
  width: min(920px, calc(100vw - 112px));
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 20px;
}

.quiz-sidebar {
  border-color: rgba(255, 232, 173, 0.16);
  color: rgba(255, 238, 202, 0.82);
  background:
    radial-gradient(circle at 35% 0%, rgba(255, 213, 135, 0.14), transparent 6rem),
    linear-gradient(180deg, rgba(45, 40, 32, 0.72), rgba(17, 23, 34, 0.64));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
}

.quiz-sidebar .page-label,
.quiz-sidebar .page-meta {
  color: rgba(255, 232, 173, 0.58);
}

.quiz-sidebar .page-count {
  color: #fff2cf;
}

.progress-track {
  background: rgba(255, 232, 173, 0.12);
}

.progress-bar {
  background: linear-gradient(90deg, #d7b762, #f0d48a);
}

.quiz-sheet {
  max-width: 760px;
  border-color: rgba(255, 232, 173, 0.16);
  color: #fff2cf;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 213, 135, 0.12), transparent 11rem),
    radial-gradient(circle at 16% 78%, rgba(84, 104, 142, 0.16), transparent 14rem),
    linear-gradient(180deg, rgba(18, 25, 37, 0.74), rgba(31, 24, 18, 0.62));
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(255, 213, 135, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
}

.quiz-sheet::before {
  opacity: 0.3;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 232, 173, 0.05) 0 1px, transparent 1px),
    radial-gradient(circle at 74% 62%, rgba(255, 232, 173, 0.035) 0 1px, transparent 1px);
  background-size: 34px 34px, 48px 48px;
}

.quiz-sheet::after {
  background: rgba(255, 213, 135, 0.08);
}

.quiz-kicker {
  color: rgba(217, 195, 138, 0.76);
}

.quiz-kicker span {
  color: rgba(217, 195, 138, 0.54);
}

.quiz-question {
  color: #fff2cf;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}

.quiz-option {
  border-color: rgba(255, 232, 173, 0.16);
  color: rgba(255, 242, 207, 0.9);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 232, 173, 0.08), transparent 7rem),
    linear-gradient(180deg, rgba(255, 242, 207, 0.16), rgba(255, 213, 135, 0.09));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.quiz-option:hover {
  border-color: rgba(255, 232, 173, 0.34);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 232, 173, 0.14), transparent 7rem),
    linear-gradient(180deg, rgba(255, 242, 207, 0.22), rgba(255, 213, 135, 0.14));
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(255, 213, 135, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.quiz-option.is-selected {
  border-color: rgba(255, 232, 173, 0.5);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 232, 173, 0.22), transparent 7rem),
    linear-gradient(180deg, rgba(255, 232, 173, 0.28), rgba(217, 183, 106, 0.18));
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 232, 173, 0.14),
    0 0 28px rgba(255, 213, 135, 0.16);
}

.option-letter {
  color: #1f2432;
  background: linear-gradient(180deg, #f3d98a, #c8a04f);
}

.option-text {
  color: rgba(255, 242, 207, 0.92);
}

@media (max-width: 760px) {
  .reader-quiz {
    width: min(100% - 28px, 640px);
    grid-template-columns: 1fr;
  }
}

/* Result report pass: gray-blue moonlit archive instead of parchment certificate. */
.reader-app .dr-shell.dr-result {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(34px, 4.4vw, 58px);
  border: 1px solid rgba(174, 191, 214, 0.18);
  border-radius: 34px;
  color: #dbe4ee;
  background:
    radial-gradient(circle at 82% 10%, rgba(178, 197, 222, 0.14), transparent 18rem),
    radial-gradient(circle at 12% 84%, rgba(92, 116, 148, 0.18), transparent 20rem),
    linear-gradient(145deg, rgba(19, 30, 45, 0.82), rgba(8, 13, 22, 0.72));
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.46),
    0 0 46px rgba(150, 170, 200, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.reader-app .dr-shell.dr-result::before {
  opacity: 0.16;
  background-image:
    linear-gradient(90deg, rgba(199, 214, 232, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(199, 214, 232, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
}

.reader-app .dr-shell.dr-result::after {
  color: rgba(197, 211, 228, 0.06);
}

.reader-app .dr-result-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  gap: clamp(22px, 3vw, 38px);
  margin-bottom: 26px;
}

.reader-app .dr-result-hero .dr-kicker {
  color: rgba(201, 214, 230, 0.72);
  letter-spacing: 0.18em;
}

.reader-app .dr-result-hero h3 {
  max-width: 820px;
  margin: 12px 0 18px;
  color: #aebdd0;
  font-size: clamp(2.45rem, 5.4vw, 5.2rem);
  line-height: 1.04;
  text-shadow:
    0 7px 24px rgba(0, 0, 0, 0.48),
    0 0 26px rgba(145, 169, 200, 0.18);
}

.reader-app .dr-result-hero p {
  max-width: 780px;
  color: rgba(220, 230, 241, 0.74);
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.8;
}

.reader-app .dr-result-hero aside,
.reader-app .dr-result-block,
.reader-app .dr-ai-advice,
.reader-app .dr-note {
  border: 1px solid rgba(174, 191, 214, 0.18);
  color: rgba(225, 233, 243, 0.84);
  background:
    radial-gradient(circle at 12% 0%, rgba(195, 211, 230, 0.12), transparent 10rem),
    linear-gradient(145deg, rgba(32, 45, 62, 0.62), rgba(13, 21, 34, 0.54));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(7px);
}

.reader-app .dr-result-hero aside {
  align-self: start;
  padding: 24px;
  border-radius: 24px;
}

.reader-app .dr-result-hero aside span,
.reader-app .dr-result-hero aside em {
  color: rgba(212, 224, 238, 0.68);
}

.reader-app .dr-result-hero aside strong {
  color: #e3ecf6;
  font-size: clamp(1.12rem, 1.5vw, 1.36rem);
  line-height: 1.5;
}

.reader-app .dr-score-strip {
  gap: 10px;
  margin-bottom: 24px;
}

.reader-app .dr-score-strip span,
.reader-app .dr-pill-list span {
  border: 1px solid rgba(174, 191, 214, 0.2);
  color: rgba(226, 235, 244, 0.82);
  background: rgba(31, 45, 63, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.reader-app .dr-score-strip span.is-primary {
  border-color: rgba(222, 200, 145, 0.54);
  color: #fff0c8;
  background:
    linear-gradient(180deg, rgba(117, 128, 143, 0.78), rgba(64, 77, 96, 0.72));
  box-shadow:
    0 0 22px rgba(210, 190, 142, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.reader-app .dr-score-strip b {
  color: #f2d99c;
}

.reader-app .dr-result-grid {
  gap: 16px;
}

.reader-app .dr-result-block {
  min-height: 150px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 24px;
}

.reader-app .dr-result-block h4,
.reader-app .dr-ai-advice h4 {
  color: #c9d7e8;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
}

.reader-app .dr-result-block p,
.reader-app .dr-result-block ol,
.reader-app .dr-ai-advice p,
.reader-app .dr-note {
  color: rgba(224, 233, 243, 0.76);
}

.reader-app .dr-ai-advice {
  border-color: rgba(174, 191, 214, 0.2);
  background:
    radial-gradient(circle at 88% 20%, rgba(213, 192, 136, 0.1), transparent 12rem),
    linear-gradient(145deg, rgba(30, 48, 67, 0.68), rgba(13, 21, 34, 0.6));
}

.reader-app .dr-ai-key-row input {
  border-color: rgba(174, 191, 214, 0.22);
  color: #e4edf7;
  background: rgba(9, 15, 25, 0.44);
}

.reader-app .dr-ai-key-row input::placeholder {
  color: rgba(212, 224, 238, 0.5);
}

.reader-app .dr-note {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 20px;
  background: rgba(19, 30, 45, 0.54);
}

.reader-app .dr-result .dr-primary {
  color: #1f2937;
  border-color: rgba(218, 231, 245, 0.54);
  background: linear-gradient(180deg, #c9d7e8, #7f95ad);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(174, 191, 214, 0.16);
}

.reader-app .dr-result .dr-secondary {
  color: rgba(232, 239, 248, 0.9);
  border-color: rgba(174, 191, 214, 0.26);
  background: rgba(21, 32, 48, 0.62);
}

.reader-app .dr-result .dr-primary:hover,
.reader-app .dr-result .dr-secondary:hover {
  border-color: rgba(208, 223, 240, 0.45);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(174, 191, 214, 0.18);
}

@media (max-width: 860px) {
  .reader-app .dr-shell.dr-result {
    padding: clamp(24px, 7vw, 36px);
  }

  .reader-app .dr-result-hero,
  .reader-app .dr-result-grid,
  .reader-app .dr-ai-advice {
    grid-template-columns: 1fr;
  }

  .reader-app .dr-result-block {
    min-height: auto;
  }
}

/* Background-image based archive room layout. This intentionally overrides the older stage/card treatment. */
body.archive-room-page {
  min-height: 100vh;
  overflow-x: hidden;
  color: #f7ecd2;
  background-image:
    linear-gradient(
      90deg,
      rgba(7, 12, 22, 0.72) 0%,
      rgba(7, 12, 22, 0.5) 34%,
      rgba(7, 12, 22, 0.24) 58%,
      rgba(7, 12, 22, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 12, 22, 0.18) 0%,
      rgba(7, 12, 22, 0.1) 45%,
      rgba(7, 12, 22, 0.56) 100%
    ),
    url("../images/direction-reader-bg.png");
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

body.archive-room-page::before,
body.archive-room-page::after {
  opacity: 0.28;
}

.archive-room-page .storybook-grain {
  opacity: 0.16;
}

.archive-room-page .floating-lights span {
  width: 2px;
  height: 2px;
  opacity: 0.16;
}

.archive-room-page .storybook-nav,
.archive-room-page .navbar {
  border-bottom: 1px solid rgba(255, 232, 173, 0.12);
  background: rgba(6, 11, 20, 0.68);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.archive-room-page .nav-links a {
  border: 1px solid rgba(255, 232, 173, 0.16);
  color: rgba(255, 242, 207, 0.84);
  background: rgba(10, 18, 32, 0.34);
}

.archive-room-page .nav-links a:hover {
  border-color: rgba(255, 232, 173, 0.38);
  background: rgba(255, 232, 173, 0.1);
  box-shadow: 0 0 18px rgba(255, 213, 135, 0.12);
}

.archive-room-page .archive-page-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 clamp(80px, 11vh, 140px);
}

.archive-landing {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.65fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  max-width: 1280px;
  min-height: calc(100vh - 88px);
  margin: 0 auto;
  padding: clamp(72px, 10vh, 118px) clamp(32px, 6vw, 80px);
}

.archive-landing-copy {
  max-width: 760px;
}

.archive-room-label {
  margin: 0 0 18px;
  color: #d9c38a;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
}

.archive-title {
  margin: 0 0 24px;
  color: #beb7db;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(82px, 8.6vw, 138px);
  line-height: 1.02;
  word-break: keep-all;
  text-shadow:
    0 8px 28px rgba(0, 0, 0, 0.54),
    0 0 26px rgba(188, 179, 239, 0.14);
}

.archive-lead {
  max-width: 680px;
  margin: 0;
  color: #a0b4cc;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.9;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
}

.archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.archive-tags span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(255, 232, 173, 0.24);
  border-radius: 999px;
  padding: 6px 13px;
  color: rgba(255, 242, 207, 0.86);
  background: rgba(8, 15, 28, 0.34);
  box-shadow: inset 0 0 12px rgba(255, 226, 166, 0.04);
  font-size: 0.92rem;
  backdrop-filter: blur(6px);
}

.archive-start-btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
  border: 1px solid rgba(255, 244, 214, 0.74);
  border-radius: 999px;
  padding: 0 26px;
  color: #2d2415;
  background: linear-gradient(180deg, #ffe6a8, #efc873);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(255, 213, 135, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.archive-start-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(255, 213, 135, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.archive-side {
  display: flex;
  min-height: clamp(420px, 58vh, 620px);
  align-self: stretch;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 clamp(6px, 2vw, 28px) clamp(44px, 9vh, 112px) 0;
}

.archive-hero-visual {
  display: none;
  justify-self: end;
  width: min(100%, 500px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.2);
  border-radius: 26px;
  background: rgba(9, 16, 28, 0.28);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.38),
    0 0 48px rgba(255, 213, 135, 0.1);
  transform: rotate(0.4deg);
}

.archive-hero-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.archive-entry-note {
  width: min(100%, 400px);
  margin: 0;
  border: 1px solid rgba(122, 88, 35, 0.18);
  border-radius: 24px;
  padding: 26px 30px;
  color: #4a3820;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.34), transparent 12rem),
    linear-gradient(180deg, rgba(255, 244, 211, 0.96), rgba(232, 211, 160, 0.94));
  box-shadow:
    0 26px 54px rgba(0, 0, 0, 0.3),
    0 0 32px rgba(255, 213, 135, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: rotate(-2.2deg) translateY(22px);
}

.archive-entry-note span {
  display: block;
  color: #8e713f;
  font-family: Georgia, serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.archive-entry-note strong {
  display: block;
  margin: 12px 0 10px;
  color: #5f461f;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.archive-entry-note p {
  margin: 0;
  color: #4a3820;
  line-height: 1.85;
}

.reader-app {
  max-width: 1060px;
  margin: 0 auto clamp(80px, 12vh, 140px);
  padding: 0 clamp(18px, 4vw, 32px);
  scroll-margin-top: 96px;
}

.reader-app .direction-reader {
  width: 100%;
}

.reader-app .dr-shell.dr-intro {
  display: none;
}

.reader-app .dr-shell {
  border: 1px solid rgba(122, 88, 35, 0.2);
  border-radius: 32px;
  color: #3d2c18;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.4), transparent 14rem),
    linear-gradient(180deg, rgba(255, 244, 211, 0.95), rgba(232, 211, 160, 0.92));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.reader-app .dr-shell::before {
  opacity: 0.18;
  background-image:
    linear-gradient(90deg, rgba(84, 58, 30, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(84, 58, 30, 0.04) 1px, transparent 1px);
}

.reader-app .dr-shell::after {
  color: rgba(122, 88, 35, 0.12);
}

.reader-app .dr-quiz {
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
}

.reader-app .dr-archive-index {
  border-color: rgba(122, 88, 35, 0.2);
  background: rgba(83, 58, 31, 0.08);
}

.reader-app .dr-archive-index span,
.reader-app .dr-archive-index em {
  color: rgba(61, 44, 24, 0.7);
}

.reader-app .dr-archive-index strong,
.reader-app .dr-quiz h3,
.reader-app .dr-kicker,
.reader-app .dr-progress-count {
  color: #3d2c18;
}

.reader-app .dr-quiz-paper,
.reader-app .dr-result-block,
.reader-app .dr-result-hero aside,
.reader-app .dr-ai-advice,
.reader-app .dr-note {
  border-color: rgba(122, 88, 35, 0.16);
  color: #3d2c18;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.48), transparent 12rem),
    linear-gradient(145deg, rgba(255, 246, 220, 0.92), rgba(226, 204, 153, 0.78));
}

.reader-app .dr-result-hero h3,
.reader-app .dr-result-hero p {
  color: #fff2cf;
}

@media (max-width: 960px) {
  body.archive-room-page {
    background-attachment: scroll;
    background-position: 65% top;
  }

  .archive-landing {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: clamp(58px, 9vh, 88px) clamp(24px, 6vw, 52px) clamp(44px, 7vh, 68px);
  }

  .archive-side {
    min-height: auto;
    display: grid;
    justify-items: center;
    padding: 0;
  }

  .archive-hero-visual,
  .archive-entry-note {
    justify-self: center;
    transform: rotate(-0.8deg);
  }
}

@media (max-width: 640px) {
  .archive-landing {
    padding: 34px 20px 44px;
  }

  .archive-landing-copy {
    border: 1px solid rgba(255, 232, 173, 0.12);
    border-radius: 24px;
    padding: 24px 20px;
    background: rgba(8, 14, 26, 0.34);
    backdrop-filter: blur(6px);
  }

  .archive-title {
    font-size: clamp(54px, 18vw, 82px);
  }

  .archive-lead {
    font-size: 1rem;
  }

  .archive-start-btn {
    width: 100%;
  }

  .archive-entry-note {
    padding: 22px;
  }

  .reader-app {
    padding: 0 14px;
  }

  .reader-app .dr-quiz {
    grid-template-columns: 1fr;
  }
}

/* Final visual tuning: make the note read as a paper lying on the archive desk. */
body.archive-room-page {
  background-image:
    linear-gradient(
      90deg,
      rgba(7, 12, 22, 0.78) 0%,
      rgba(7, 12, 22, 0.58) 30%,
      rgba(7, 12, 22, 0.26) 50%,
      rgba(7, 12, 22, 0.08) 72%,
      rgba(7, 12, 22, 0.02) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 12, 22, 0.1) 0%,
      rgba(7, 12, 22, 0.06) 48%,
      rgba(7, 12, 22, 0.42) 100%
    ),
    url("../images/direction-reader-bg.png");
}

.archive-landing {
  position: relative;
}

.archive-title {
  font-size: clamp(74px, 7.6vw, 122px);
  line-height: 1.04;
  word-break: keep-all;
}

.archive-start-btn {
  border: 1px solid rgba(255, 232, 173, 0.66);
  color: #2d2415;
  background: linear-gradient(180deg, #ffe8ad, #e7bd68);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(255, 213, 135, 0.16);
}

.archive-start-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(255, 213, 135, 0.24);
}

.archive-side {
  min-height: 0;
  padding: 0;
}

.archive-entry-note {
  position: absolute;
  right: clamp(72px, 9vw, 150px);
  top: clamp(330px, 43vh, 430px);
  z-index: 3;
  width: clamp(320px, 28vw, 430px);
  overflow: hidden;
  border: 1px solid rgba(122, 88, 35, 0.18);
  border-radius: 22px;
  padding: clamp(22px, 2.2vw, 32px);
  color: #4a3820;
  background:
    radial-gradient(circle at 78% 82%, rgba(208, 172, 88, 0.12), transparent 7rem),
    linear-gradient(180deg, rgba(255, 242, 204, 0.92), rgba(226, 203, 151, 0.9));
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.36),
    0 0 36px rgba(255, 213, 135, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
  transform: rotate(-1.2deg);
  transform-origin: center;
}

.archive-entry-note::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.45;
  background:
    radial-gradient(circle at 20% 18%, rgba(122, 88, 35, 0.05) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 64%, rgba(122, 88, 35, 0.04) 0 1px, transparent 1px);
  background-size: 28px 28px, 36px 36px;
}

.archive-entry-note span {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(74, 56, 32, 0.72);
}

.archive-entry-note strong {
  margin: 10px 0 14px;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.35;
}

.archive-entry-note p {
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.8;
}

@media (max-width: 960px) {
  .archive-entry-note {
    position: static;
    width: min(100%, 430px);
    margin: 0 auto;
    transform: rotate(-0.8deg);
  }
}

@media (max-width: 640px) {
  .archive-title {
    font-size: clamp(50px, 16vw, 76px);
  }

  .archive-entry-note {
    padding: 22px;
  }
}

/* Quiz stage as an opened archive sheet on the old desk, not a full-page panel. */
body.archive-room-page {
  background-image:
    linear-gradient(
      90deg,
      rgba(7, 12, 22, 0.74) 0%,
      rgba(7, 12, 22, 0.52) 34%,
      rgba(7, 12, 22, 0.24) 58%,
      rgba(7, 12, 22, 0.1) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 12, 22, 0.08) 0%,
      rgba(7, 12, 22, 0.12) 52%,
      rgba(7, 12, 22, 0.52) 100%
    ),
    url("../images/direction-reader-bg.png");
}

.reader-quiz {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
  width: min(1120px, calc(100vw - 64px));
  margin: clamp(92px, 12vh, 130px) auto clamp(72px, 10vh, 120px);
}

.quiz-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  border: 1px solid rgba(122, 88, 35, 0.2);
  border-radius: 22px;
  padding: 22px 18px;
  color: #4a3820;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.24), transparent 7rem),
    linear-gradient(180deg, rgba(255, 236, 184, 0.86), rgba(197, 168, 101, 0.72));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  transform: rotate(-0.8deg);
}

.quiz-sidebar .page-label {
  display: block;
  color: rgba(74, 56, 32, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quiz-sidebar .page-count {
  display: block;
  margin: 14px 0 8px;
  color: #4a3820;
  font-family: Georgia, serif;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.05;
}

.quiz-sidebar .page-meta {
  display: block;
  color: rgba(74, 56, 32, 0.75);
  font-size: 14px;
  font-style: normal;
  line-height: 1.6;
}

.progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  margin-top: 18px;
  background: rgba(74, 56, 32, 0.14);
}

.progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d7b762, #8e8176);
}

.quiz-sheet {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(122, 88, 35, 0.18);
  border-radius: 30px;
  padding: clamp(34px, 4vw, 56px);
  color: #3d2c18;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.36), transparent 9rem),
    linear-gradient(180deg, rgba(255, 242, 204, 0.94), rgba(229, 207, 158, 0.9));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.quiz-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(circle at 18% 22%, rgba(122, 88, 35, 0.045) 0 1px, transparent 1px),
    radial-gradient(circle at 74% 62%, rgba(122, 88, 35, 0.035) 0 1px, transparent 1px);
  background-size: 30px 30px, 42px 42px;
}

.quiz-sheet::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  height: 12px;
  border-radius: 999px;
  background: rgba(74, 56, 32, 0.08);
  filter: blur(10px);
  pointer-events: none;
}

.quiz-kicker,
.quiz-question,
.quiz-options {
  position: relative;
  z-index: 1;
}

.quiz-kicker {
  margin-bottom: 16px;
  color: rgba(74, 56, 32, 0.7);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quiz-kicker span {
  margin-left: 10px;
  color: rgba(74, 56, 32, 0.52);
  font-family: Georgia, serif;
  letter-spacing: 0.08em;
}

.quiz-question {
  max-width: 780px;
  margin: 0 0 clamp(28px, 4vw, 44px);
  color: #3a2816;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.28;
  text-wrap: balance;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.quiz-option {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 78px;
  border: 1px solid rgba(122, 88, 35, 0.16);
  border-radius: 20px;
  padding: 16px 18px;
  color: #2f2b3a;
  background:
    linear-gradient(180deg, rgba(255, 249, 229, 0.92), rgba(241, 222, 177, 0.86));
  box-shadow:
    0 12px 28px rgba(74, 56, 32, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.quiz-option:hover {
  transform: translateY(-3px) rotate(-0.2deg);
  border-color: rgba(122, 88, 35, 0.3);
  box-shadow:
    0 18px 36px rgba(74, 56, 32, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.quiz-option.is-selected {
  transform: translateY(-2px) rotate(-0.2deg);
  border-color: rgba(122, 88, 35, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 241, 191, 0.98), rgba(226, 196, 118, 0.9));
  box-shadow:
    0 18px 36px rgba(74, 56, 32, 0.18),
    0 0 0 1px rgba(122, 88, 35, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.option-letter {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  color: #1f2432;
  background: linear-gradient(180deg, #f4d98b, #caa24f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  font-weight: 900;
}

.option-text {
  color: #2f2b3a;
  font-size: clamp(16px, 1.1vw, 19px);
  font-weight: 800;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .reader-quiz {
    width: min(100% - 28px, 640px);
    grid-template-columns: 1fr;
    margin-top: 88px;
  }

  .quiz-sidebar {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    transform: none;
  }

  .quiz-sidebar .page-count {
    margin: 0;
    font-size: clamp(26px, 8vw, 38px);
  }

  .quiz-sidebar .page-meta {
    display: none;
  }

  .progress-track {
    width: min(140px, 32vw);
    margin-top: 0;
  }

  .quiz-sheet {
    padding: 26px 20px;
    border-radius: 26px;
  }

  .quiz-question {
    font-size: clamp(30px, 9vw, 42px);
  }

  .quiz-options {
    grid-template-columns: 1fr;
  }
}

/* Quiz correction: keep the archive room visible instead of covering it with a giant cream board. */
.reader-app {
  max-width: none;
  margin: 0 auto clamp(80px, 12vh, 140px);
  padding: 0;
}

.reader-quiz {
  width: min(960px, calc(100vw - 96px));
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: clamp(76px, 10vh, 112px) auto clamp(72px, 10vh, 110px);
}

.quiz-sidebar {
  top: 96px;
  padding: 16px 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 25% 0%, rgba(255, 255, 255, 0.18), transparent 6rem),
    linear-gradient(180deg, rgba(255, 232, 170, 0.72), rgba(166, 137, 78, 0.58));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
}

.quiz-sidebar .page-label {
  font-size: 10px;
}

.quiz-sidebar .page-count {
  font-size: clamp(26px, 2.4vw, 34px);
}

.quiz-sidebar .page-meta {
  font-size: 12px;
}

.quiz-sheet {
  max-width: 780px;
  padding: clamp(26px, 3.2vw, 40px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.24), transparent 8rem),
    linear-gradient(180deg, rgba(255, 239, 194, 0.82), rgba(217, 191, 136, 0.74));
  box-shadow:
    0 26px 72px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(255, 213, 135, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(2px);
}

.quiz-kicker {
  margin-bottom: 12px;
  font-size: 12px;
}

.quiz-question {
  max-width: 680px;
  margin-bottom: clamp(20px, 3vw, 30px);
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.28;
}

.quiz-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.quiz-option {
  grid-template-columns: 34px 1fr;
  gap: 12px;
  min-height: 58px;
  border-radius: 16px;
  padding: 11px 13px;
  background:
    linear-gradient(180deg, rgba(255, 248, 225, 0.82), rgba(234, 210, 160, 0.74));
  box-shadow:
    0 10px 22px rgba(74, 56, 32, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.option-letter {
  width: 30px;
  height: 30px;
  font-size: 0.9rem;
}

.option-text {
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .reader-quiz {
    width: min(100% - 28px, 640px);
    grid-template-columns: 1fr;
  }

  .quiz-sheet {
    max-width: none;
  }

  .quiz-options {
    grid-template-columns: 1fr;
  }
}

/* Direction Reader quiz final pass: archive-page layout tuned to the reference palette. */
.archive-room-page .reader-app {
  max-width: none;
  margin: 0 auto clamp(72px, 9vh, 112px);
  padding: 0;
}

.archive-room-page .reader-app .direction-reader {
  width: 100%;
}

.archive-room-page .reader-app .dr-orbit {
  display: none;
}

.archive-room-page .reader-quiz {
  width: min(1260px, calc(100vw - 88px));
  display: grid;
  grid-template-columns: clamp(138px, 11vw, 176px) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 44px);
  align-items: start;
  margin: clamp(58px, 8vh, 92px) auto clamp(64px, 8vh, 104px);
}

.archive-room-page .quiz-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
  min-height: 214px;
  padding: clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 24px);
  border: 1px solid rgba(115, 96, 59, 0.28);
  border-radius: 22px;
  color: #48381f;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.22), transparent 6rem),
    linear-gradient(180deg, rgba(242, 225, 174, 0.84), rgba(175, 151, 91, 0.70));
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transform: rotate(-0.7deg);
}

.archive-room-page .quiz-sidebar .page-label {
  display: block;
  color: rgba(72, 56, 31, 0.74);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.68rem, 0.85vw, 0.88rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.archive-room-page .quiz-sidebar .page-count {
  display: block;
  margin: clamp(22px, 2.4vw, 32px) 0 12px;
  color: #3e2d17;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.45rem, 4vw, 4.25rem);
  font-weight: 800;
  line-height: 0.98;
}

.archive-room-page .quiz-sidebar .page-meta {
  display: block;
  color: rgba(72, 56, 31, 0.68);
  font-size: clamp(0.9rem, 1.05vw, 1.06rem);
  font-style: normal;
  line-height: 1.62;
}

.archive-room-page .quiz-sidebar .progress-track {
  height: 7px;
  margin-top: 24px;
  border-radius: 999px;
  background: rgba(74, 56, 32, 0.14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
}

.archive-room-page .quiz-sidebar .progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8ca0bc, #d6b963);
}

.archive-room-page .quiz-sheet {
  width: 100%;
  max-width: none;
  min-height: min(720px, calc(100vh - 190px));
  padding: clamp(44px, 5vw, 74px) clamp(52px, 6vw, 96px);
  border: 1px solid rgba(128, 105, 60, 0.24);
  border-radius: 30px;
  color: #302314;
  background:
    radial-gradient(circle at 91% 13%, rgba(255, 255, 255, 0.36), transparent 9rem),
    radial-gradient(circle at 78% 76%, rgba(211, 176, 90, 0.17), transparent 18rem),
    linear-gradient(180deg, rgba(255, 242, 203, 0.90), rgba(221, 198, 144, 0.80));
  box-shadow:
    0 34px 92px rgba(0, 0, 0, 0.40),
    0 0 48px rgba(255, 213, 135, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(2px);
}

.archive-room-page .quiz-sheet::before {
  opacity: 0.42;
  background:
    radial-gradient(circle at 18% 22%, rgba(92, 70, 38, 0.055) 0 1px, transparent 1.2px),
    radial-gradient(circle at 74% 62%, rgba(92, 70, 38, 0.035) 0 1px, transparent 1.2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 32%, rgba(114, 89, 48, 0.05) 100%);
  background-size: 30px 30px, 44px 44px, auto;
}

.archive-room-page .quiz-sheet::after {
  display: none;
}

.archive-room-page .quiz-kicker {
  margin: 0 0 clamp(18px, 2vw, 26px);
  color: rgba(69, 52, 28, 0.62);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.84rem, 1vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.13em;
}

.archive-room-page .quiz-kicker span {
  margin-left: 18px;
  color: rgba(80, 63, 37, 0.48);
}

.archive-room-page .quiz-question {
  max-width: 980px;
  margin: 0 0 clamp(36px, 4.2vw, 58px);
  color: #2f2113;
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-size: clamp(3rem, 5.15vw, 5.7rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(255, 248, 220, 0.32);
}

.archive-room-page .quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.1vw, 28px) clamp(22px, 2.7vw, 34px);
}

.archive-room-page .quiz-option {
  display: grid;
  grid-template-columns: clamp(42px, 4vw, 58px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 1.8vw, 24px);
  min-height: clamp(76px, 8vh, 94px);
  padding: clamp(16px, 1.7vw, 22px) clamp(20px, 2vw, 28px);
  border: 1px solid rgba(126, 99, 52, 0.16);
  border-radius: 20px;
  color: #27283a;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.36), transparent 6rem),
    linear-gradient(180deg, rgba(255, 249, 226, 0.92), rgba(237, 215, 166, 0.84));
  box-shadow:
    0 16px 34px rgba(75, 58, 30, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.archive-room-page .quiz-option:hover {
  transform: translateY(-4px) rotate(-0.15deg);
  border-color: rgba(126, 99, 52, 0.34);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.46), transparent 6rem),
    linear-gradient(180deg, rgba(255, 252, 236, 0.96), rgba(241, 219, 172, 0.90));
  box-shadow:
    0 22px 44px rgba(75, 58, 30, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.archive-room-page .quiz-option.is-selected {
  transform: translateY(-3px) rotate(-0.15deg);
  border-color: rgba(94, 120, 153, 0.48);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.46), transparent 6rem),
    linear-gradient(180deg, rgba(236, 242, 249, 0.95), rgba(197, 211, 228, 0.88));
  box-shadow:
    0 0 0 1px rgba(94, 120, 153, 0.20),
    0 20px 44px rgba(42, 56, 76, 0.22);
}

.archive-room-page .option-letter {
  width: clamp(38px, 3.5vw, 52px);
  height: clamp(38px, 3.5vw, 52px);
  border-radius: 999px;
  color: #25283a;
  background: linear-gradient(180deg, #f2d980, #c8a84d);
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px rgba(100, 74, 24, 0.16);
}

.archive-room-page .quiz-option.is-selected .option-letter {
  background: linear-gradient(180deg, #d9e6f4, #8ea7c1);
}

.archive-room-page .option-text {
  color: #27283a;
  font-size: clamp(1rem, 1.55vw, 1.42rem);
  font-weight: 850;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .archive-room-page .reader-quiz {
    width: min(100% - 40px, 920px);
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .archive-room-page .quiz-sheet {
    padding: clamp(34px, 5vw, 52px);
  }

  .archive-room-page .quiz-question {
    font-size: clamp(2.5rem, 6vw, 4.4rem);
  }
}

@media (max-width: 760px) {
  .archive-room-page .reader-quiz {
    width: min(100% - 28px, 640px);
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 78px;
  }

  .archive-room-page .quiz-sidebar {
    position: static;
    min-height: 0;
    transform: none;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 18px;
    align-items: center;
  }

  .archive-room-page .quiz-sidebar .page-count {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin: 0;
    font-size: clamp(2rem, 10vw, 3.1rem);
  }

  .archive-room-page .quiz-sidebar .page-meta {
    font-size: 0.9rem;
  }

  .archive-room-page .quiz-sidebar .progress-track {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .archive-room-page .quiz-sheet {
    min-height: auto;
    padding: 28px 20px;
    border-radius: 24px;
  }

  .archive-room-page .quiz-kicker span {
    display: block;
    margin: 6px 0 0;
  }

  .archive-room-page .quiz-question {
    font-size: clamp(2rem, 10vw, 3.1rem);
    margin-bottom: 24px;
  }

  .archive-room-page .quiz-options {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .archive-room-page .quiz-option {
    min-height: 70px;
  }
}

/* Rich archive developing ritual driven by choice_book.png. */
.reader-ritual {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 32px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 213, 135, 0.12), transparent 30rem),
    rgba(5, 10, 20, 0.88);
  backdrop-filter: blur(12px);
}

.reader-ritual[hidden] {
  display: none;
}

.ritual-stage {
  position: relative;
  display: flex;
  width: min(960px, 92vw);
  min-height: min(720px, 88vh);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid rgba(255, 213, 135, 0.32); /* Gilded outer border */
  border-radius: 38px;
  padding: clamp(32px, 5vw, 56px);
  color: #fff2cf;
  text-align: center;
  background:
    /* Cool blue moonlight glow on top-left */
    radial-gradient(circle at 10% 12%, rgba(132, 172, 255, 0.08), transparent 26rem),
    /* Warm candle glow on bottom-right */
    radial-gradient(circle at 90% 88%, rgba(255, 198, 108, 0.07), transparent 26rem),
    /* Central gold magic glow behind the book */
    radial-gradient(circle at 50% 36%, rgba(255, 214, 138, 0.14), transparent 28rem),
    /* Deep midnight base */
    linear-gradient(150deg, #090f1d, #040810);
  box-shadow:
    0 40px 110px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ritual-stage::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 3px double rgba(255, 213, 135, 0.38); /* Gilded double-ruled gold border */
  border-radius: 30px;
  pointer-events: none;
}

.ritual-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 244, 214, 0.045) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 62%, rgba(255, 232, 173, 0.035) 0 1px, transparent 1.5px);
  background-size: 96px 96px, 150px 150px;
  opacity: 0.5;
}

.ritual-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255, 213, 135, 0.11), transparent 48%),
    radial-gradient(circle at 84% 18%, rgba(205, 183, 255, 0.07), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 34%, rgba(0, 0, 0, 0.22));
}

.ritual-light {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(26px);
}

.ritual-light-main {
  left: 50%;
  top: 42%;
  width: min(680px, 86vw);
  height: min(520px, 68vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 214, 138, 0.22), rgba(255, 214, 138, 0.08) 38%, transparent 72%);
  animation: ritualGlowPulse 2.8s ease-in-out infinite;
}

.ritual-light-desk {
  left: 50%;
  bottom: 9%;
  width: min(760px, 88vw);
  height: 230px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 202, 112, 0.14), rgba(255, 202, 112, 0.06) 42%, transparent 76%);
  filter: blur(20px);
}

.ritual-book-wrap {
  position: relative;
  z-index: 4;
  width: min(580px, 74vw);
  margin: 0 auto 28px;
  padding: 8px;
  border: 2px solid rgba(255, 213, 135, 0.42); /* Thicker gold border for the magic frame */
  border-radius: 32px;
  background: rgba(10, 15, 28, 0.65);
  box-shadow: 
    0 24px 72px rgba(0, 0, 0, 0.55),
    inset 0 0 24px rgba(255, 213, 135, 0.04);
  animation: ritualBookFloat 3.8s ease-in-out infinite;
}

.ritual-book-wrap::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255, 220, 150, 0.35), rgba(255, 220, 150, 0.08) 38%, transparent 70%);
  filter: blur(20px);
  animation: ritualGlowPulse 2.8s ease-in-out infinite;
}

.ritual-book-wrap::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  bottom: 8px;
  pointer-events: none;
  border-radius: 24px;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 245, 210, 0.22) 48%,
    transparent 58%,
    transparent 100%
  );
  mix-blend-mode: screen;
  transform: translateX(-130%);
  animation: ritualShine 4s ease-in-out infinite;
}

.ritual-book-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.ritual-particles span {
  position: absolute;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #ffa726; /* Warm orange amber embers */
  box-shadow: 0 0 12px #ffb74d, 0 0 20px rgba(255, 167, 38, 0.4);
  opacity: 0;
  animation: ritualParticleRise 4.4s ease-in-out infinite;
}

.ritual-particles span:nth-child(1) { left: 38%; bottom: 32%; animation-delay: 0s; }
.ritual-particles span:nth-child(2) { left: 46%; bottom: 28%; animation-delay: 0.35s; }
.ritual-particles span:nth-child(3) { left: 52%; bottom: 31%; animation-delay: 0.72s; }
.ritual-particles span:nth-child(4) { left: 60%; bottom: 27%; animation-delay: 1.05s; }
.ritual-particles span:nth-child(5) { left: 42%; bottom: 38%; animation-delay: 1.38s; }
.ritual-particles span:nth-child(6) { left: 56%; bottom: 38%; animation-delay: 1.7s; }
.ritual-particles span:nth-child(7) { left: 35%; bottom: 25%; animation-delay: 2.08s; }
.ritual-particles span:nth-child(8) { left: 65%; bottom: 25%; animation-delay: 2.45s; }

.ritual-paper-drift span {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 66px;
  border: 1px solid rgba(255, 232, 173, 0.45);
  border-radius: 6px;
  background:
    /* Fake writing lines */
    linear-gradient(rgba(122, 88, 35, 0.22) 1px, transparent 1px) 0 8px / 100% 12px,
    /* Parchment base */
    linear-gradient(180deg, rgba(255, 246, 225, 0.88), rgba(240, 220, 185, 0.78));
  box-shadow: 
    0 10px 24px rgba(0, 0, 0, 0.3),
    0 0 14px rgba(255, 213, 135, 0.3);
  animation: ritualPaperDrift 6s ease-in-out infinite;
}

.ritual-paper-drift span:nth-child(1) { left: 13%; top: 28%; animation-delay: 0s; }
.ritual-paper-drift span:nth-child(2) { right: 14%; top: 25%; animation-delay: 1.1s; }
.ritual-paper-drift span:nth-child(3) { left: 18%; bottom: 18%; animation-delay: 2.2s; }
.ritual-paper-drift span:nth-child(4) { right: 20%; bottom: 20%; animation-delay: 3.2s; }

.ritual-seal {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 6;
  border: 2px solid rgba(255, 232, 173, 0.48);
  border-radius: 12px;
  padding: 10px 22px;
  color: rgba(255, 232, 173, 0.62);
  font-family: Georgia, serif;
  font-weight: 800;
  letter-spacing: 0.18em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-10deg) scale(0.82);
}

.reader-ritual.is-sealing .ritual-seal {
  animation: ritualSeal 0.72s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

.reader-ritual.is-sealing .ritual-stage {
  box-shadow:
    0 36px 96px rgba(0, 0, 0, 0.48),
    0 0 58px rgba(255, 213, 135, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.ritual-copy {
  position: relative;
  z-index: 7;
  text-align: center;
}

.ritual-kicker {
  margin: 0 0 10px;
  color: #d9c38a;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ritual-title {
  margin: 0 0 14px;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 1.1;
  font-family: var(--font-display, Georgia, serif);
  background: linear-gradient(135deg, #fff2cf 20%, #e2c08d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 213, 135, 0.15));
}

.ritual-text {
  min-height: 2em;
  max-width: 680px;
  margin: 0 auto;
  color: #dfd3ba;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.ritual-skip {
  margin-top: 22px;
  border: 1px solid rgba(255, 232, 173, 0.32);
  border-radius: 999px;
  padding: 12px 24px;
  color: #fff2cf;
  background: rgba(255, 242, 207, 0.12);
  cursor: pointer;
  font-weight: 800;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ritual-skip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 232, 173, 0.5);
}

.ritual-skip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 232, 173, 0.62);
  background: rgba(255, 242, 207, 0.17);
}

.ritual-skip.is-finished {
  border-color: #fff2cf;
  color: #0d1623;
  background: #fff2cf;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 242, 207, 0.4);
  animation: ritual-button-pulse 2s infinite alternate;
}

.ritual-skip.is-finished:hover {
  background: #ffffff;
  color: #050a14;
  border-color: #ffffff;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

@keyframes ritual-button-pulse {
  from {
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.3),
      0 0 12px rgba(255, 242, 207, 0.3);
  }
  to {
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.3),
      0 0 24px rgba(255, 242, 207, 0.65);
  }
}

.ritual-hat,
.hat-tip,
.hat-face,
.hat-brim,
.orbit-tags,
.floating-pages,
.archive-book,
.ritual-image-wrap,
.ritual-image,
.ritual-aura,
.ritual-glow {
  display: none !important;
}

@keyframes ritualBookFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.012); }
}

@keyframes ritualGlowPulse {
  0%, 100% {
    opacity: 0.52;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes ritualShine {
  0%, 42% {
    transform: translateX(-130%);
    opacity: 0;
  }
  52% { opacity: 1; }
  68%, 100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@keyframes ritualParticleRise {
  0% {
    transform: translateY(80px) scale(0.6);
    opacity: 0;
  }
  20% { opacity: 0.8; }
  100% {
    transform: translateY(-160px) scale(1.1);
    opacity: 0;
  }
}

@keyframes ritualPaperDrift {
  0%, 100% {
    transform: translate3d(0, 24px, 0) rotate(-8deg);
    opacity: 0.55;
  }
  50% {
    transform: translate3d(14px, -24px, 0) rotate(8deg);
    opacity: 0.85;
  }
}

@keyframes ritualSeal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-18deg) scale(1.8);
    filter: blur(4px);
  }
  55% {
    opacity: 0.88;
    transform: translate(-50%, -50%) rotate(-10deg) scale(0.92);
    filter: blur(0);
  }
  100% {
    opacity: 0.52;
    transform: translate(-50%, -50%) rotate(-10deg) scale(1);
  }
}

@media (max-width: 680px) {
  .reader-ritual {
    align-items: center;
    padding: 14px;
  }

  .ritual-stage {
    width: 94vw;
    min-height: min(650px, 88vh);
    border-radius: 28px;
    padding: 22px 16px;
  }

  .ritual-book-wrap {
    width: 88vw;
    margin-bottom: 22px;
  }

  .ritual-paper-drift span:nth-child(n + 3) {
    display: none;
  }

  .ritual-title {
    font-size: clamp(30px, 10vw, 44px);
  }

  .ritual-text {
    min-height: 3.6em;
  }
}

/* Custom AI Configurator and Ghibli Card Styles */

.dr-ai-config-collapsed {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.dr-config-status-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 232, 173, 0.16);
  letter-spacing: 0.04em;
}

.dr-config-status-tag.is-saved {
  color: #a3c293;
  background: rgba(43, 67, 48, 0.38);
}

.dr-config-status-tag.is-pending {
  color: #eebf69;
  background: rgba(69, 56, 30, 0.38);
}

.dr-ai-config-panel {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid rgba(158, 181, 209, 0.28);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(20, 32, 48, 0.84), rgba(9, 15, 25, 0.84));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dr-ai-config-title {
  color: #bfd0e4;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: 0.06em;
}

.dr-ai-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.dr-ai-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dr-ai-field label {
  color: rgba(226, 235, 245, 0.72);
  font-size: 0.84rem;
  font-weight: 800;
}

.dr-ai-field input {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(158, 181, 209, 0.22);
  border-radius: 10px;
  color: #fff;
  background: rgba(7, 12, 22, 0.62);
  font-size: 0.94rem;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dr-ai-field input:focus {
  border-color: #eebf69;
  box-shadow: 0 0 12px rgba(238, 191, 105, 0.24);
}

.dr-ai-config-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.dr-btn-sm {
  min-height: 38px !important;
  font-size: 0.84rem !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
}

.dr-config-tip {
  margin: 10px 0 0;
  color: rgba(226, 235, 245, 0.44) !important;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Parsed AI Cards */
.dr-ai-parsed-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 24px;
}

.dr-ai-card {
  position: relative;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dr-ai-card:hover {
  transform: translateY(-2px) rotate(0.5deg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.dr-ai-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.94rem;
  font-weight: 800;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 6px;
}

.dr-ai-card p {
  margin: 0;
  line-height: 1.8;
  font-size: 0.98rem;
}

/* Card 1: Typewriter */
.dr-ai-typewriter {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.08), transparent 8rem),
    linear-gradient(135deg, #f2ead2, #e5d8b8);
  color: #2b2b2b;
  border: 1px solid rgba(100, 80, 50, 0.16);
  font-family: "Courier New", Courier, monospace, "Microsoft YaHei";
  box-shadow: 0 14px 28px rgba(35, 28, 18, 0.24);
  transform: rotate(-0.5deg);
}

.dr-ai-typewriter .dr-ai-card-badge {
  background: rgba(140, 110, 80, 0.16);
  color: #5c4327;
}

.dr-ai-typewriter p {
  color: #1e1e1e !important;
  letter-spacing: -0.01em;
}

/* Card 2: Handwritten */
.dr-ai-handwritten {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.06), transparent 10rem),
    linear-gradient(135deg, #fbf7ee, #efe3cd);
  color: #223;
  border: 1px solid rgba(120, 100, 80, 0.18);
  box-shadow: 0 16px 32px rgba(30, 25, 20, 0.26);
  transform: rotate(0.8deg);
  font-style: italic;
}

.dr-ai-handwritten .dr-ai-card-badge {
  background: rgba(100, 120, 150, 0.12);
  color: #3b4e6d;
  font-style: normal;
}

.dr-ai-handwritten p {
  color: #2d3b50 !important;
}

/* Card 3: Experiments */
.dr-ai-experiments {
  background:
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.06), transparent 12rem),
    linear-gradient(135deg, #ede2c5, #e0d0aa);
  color: #302b20;
  border: 1px solid rgba(130, 110, 80, 0.2);
  box-shadow: 0 14px 30px rgba(35, 30, 20, 0.28);
  transform: rotate(-0.4deg);
}

.dr-ai-experiments .dr-ai-card-badge {
  background: rgba(120, 140, 110, 0.16);
  color: #4b5840;
}

/* Copper Checklist */
.dr-ai-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.dr-ai-todo-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(130, 110, 80, 0.1);
  transition: background-color 0.2s ease;
}

.dr-ai-todo-item:hover {
  background: rgba(255, 255, 255, 0.32);
}

.dr-ai-todo-item input {
  display: none;
}

.dr-todo-box {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 5px;
  border: 2px solid #a38c6d;
  background: #fbf8f0;
  transition: background-color 0.25s, border-color 0.25s, transform 0.25s;
}

.dr-ai-todo-item:hover .dr-todo-box {
  transform: scale(1.08);
  border-color: #8c7352;
}

.dr-ai-todo-item input:checked + .dr-todo-box {
  background: #a38c6d;
  border-color: #8c7352;
}

.dr-ai-todo-item input:checked + .dr-todo-box::after {
  content: "✓";
  color: #fbf8f0;
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 1;
}

.dr-todo-text {
  font-size: 0.94rem;
  color: #3b3528;
  line-height: 1.5;
  transition: color 0.25s, text-decoration 0.25s;
}

.dr-ai-todo-item input:checked ~ .dr-todo-text {
  color: rgba(59, 53, 40, 0.44);
  text-decoration: line-through;
}

/* Card 4: Pitfalls */
.dr-ai-pitfalls {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), transparent 10rem),
    linear-gradient(135deg, #ebd6cb, #dfc0b2);
  color: #4a2818;
  border: 1px solid rgba(160, 90, 80, 0.2);
  border-left: 5px solid #a05a50;
  box-shadow: 0 16px 34px rgba(45, 30, 25, 0.24);
  transform: rotate(0.4deg);
}

.dr-ai-pitfalls .dr-ai-card-badge {
  background: rgba(160, 90, 80, 0.12);
  color: #803c30;
}

.dr-ai-pitfalls p {
  color: #5c3523 !important;
}

/* Ink Loading Animation */
.dr-ai-loading-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 20px;
  text-align: center;
}

.dr-ai-ink-droplet {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50% 0 50% 50%;
  background: #bfd0e4;
  transform: rotate(-45deg);
  margin-bottom: 22px;
  animation: ink-drip 1.8s infinite cubic-bezier(0.5, 0, 0.5, 1);
  box-shadow: 0 0 12px rgba(191, 208, 228, 0.4);
}

.dr-ai-ink-droplet::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

@keyframes ink-drip {
  0% {
    transform: rotate(-45deg) scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: rotate(-45deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) scale(0.9);
    opacity: 0.6;
  }
}

.dr-ai-loading-stage p {
  color: rgba(226, 235, 245, 0.72) !important;
  font-size: 0.94rem;
  letter-spacing: 0.04em;
}

.dr-ai-error-stage {
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(220, 100, 100, 0.24);
  background: rgba(44, 22, 22, 0.68);
  color: #ff9e9e;
  font-size: 0.94rem;
  line-height: 1.6;
  margin-top: 14px;
}

.dr-ai-idle-stage {
  padding: 18px;
  text-align: center;
}

.dr-ai-idle-stage p {
  color: rgba(226, 235, 245, 0.56) !important;
  font-size: 0.94rem;
  line-height: 1.7;
  margin: 0;
}

.dr-ai-actions-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.dr-ai-advice-header {
  margin-bottom: 20px;
}

.dr-ai-advice-subtitle {
  margin: 4px 0 0;
  color: rgba(226, 235, 245, 0.52) !important;
  font-size: 0.84rem;
}

.dr-ai-raw-text {
  color: rgba(226, 235, 245, 0.84);
  font-size: 0.96rem;
  line-height: 1.9;
  padding: 16px;
  border-radius: 12px;
  background: rgba(8, 14, 24, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Final quiz rebuild: hybrid archive UI, cooler and cleaner than the parchment-only draft. */
body.archive-room-page .reader-app {
  max-width: none;
  margin: 0 auto clamp(76px, 10vh, 128px);
  padding: 0;
}

body.archive-room-page .reader-app .dr-orbit {
  display: none;
}

body.archive-room-page .reader-quiz {
  width: min(1120px, calc(100vw - 72px));
  display: grid;
  grid-template-columns: clamp(132px, 12vw, 170px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
  align-items: start;
  margin: clamp(64px, 8vh, 96px) auto clamp(68px, 9vh, 112px);
}

body.archive-room-page .quiz-sidebar {
  position: sticky;
  top: 94px;
  align-self: start;
  min-height: 206px;
  padding: 22px 18px;
  border: 1px solid rgba(178, 195, 218, 0.24);
  border-radius: 24px;
  color: #d9e4ef;
  background:
    radial-gradient(circle at 24% 0%, rgba(232, 240, 248, 0.14), transparent 6rem),
    linear-gradient(180deg, rgba(31, 45, 63, 0.86), rgba(15, 24, 38, 0.76));
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: rotate(-0.45deg);
}

body.archive-room-page .quiz-sidebar .page-label {
  display: block;
  color: rgba(214, 225, 237, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.68rem, 0.82vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.archive-room-page .quiz-sidebar .page-count {
  display: block;
  margin: 22px 0 10px;
  color: #edf3f8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 3.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
}

body.archive-room-page .quiz-sidebar .page-meta {
  display: block;
  color: rgba(214, 225, 237, 0.58);
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.55;
}

body.archive-room-page .quiz-sidebar .progress-track {
  height: 6px;
  margin-top: 22px;
  border-radius: 999px;
  background: rgba(226, 235, 245, 0.12);
  overflow: hidden;
}

body.archive-room-page .quiz-sidebar .progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a9bdd4, #dac37a);
}

body.archive-room-page .quiz-sheet {
  width: 100%;
  max-width: none;
  min-height: auto;
  padding: clamp(34px, 4vw, 54px);
  border: 1px solid rgba(178, 195, 218, 0.22);
  border-radius: 28px;
  color: #e5edf6;
  background:
    radial-gradient(circle at 84% 12%, rgba(218, 195, 122, 0.14), transparent 13rem),
    radial-gradient(circle at 12% 100%, rgba(150, 170, 197, 0.11), transparent 18rem),
    linear-gradient(135deg, rgba(25, 38, 55, 0.90), rgba(9, 16, 28, 0.80));
  box-shadow:
    0 30px 82px rgba(0, 0, 0, 0.42),
    0 0 42px rgba(153, 175, 203, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(7px);
}

body.archive-room-page .quiz-sheet::before {
  opacity: 0.34;
  background:
    linear-gradient(90deg, rgba(218, 195, 122, 0.18) 1px, transparent 1px),
    linear-gradient(180deg, rgba(218, 195, 122, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(255, 244, 214, 0.035) 0 1px, transparent 1.2px);
  background-size: 96px 96px, 96px 96px, 36px 36px;
}

body.archive-room-page .quiz-sheet::after {
  content: "";
  position: absolute;
  left: clamp(24px, 3vw, 38px);
  top: clamp(30px, 4vw, 52px);
  bottom: clamp(30px, 4vw, 52px);
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(218, 195, 122, 0.55), rgba(142, 160, 188, 0.22));
}

body.archive-room-page .quiz-kicker,
body.archive-room-page .quiz-question,
body.archive-room-page .quiz-options {
  position: relative;
  z-index: 1;
}

body.archive-room-page .quiz-kicker {
  margin: 0 0 18px;
  padding-left: clamp(16px, 2vw, 26px);
  color: rgba(214, 225, 237, 0.70);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.78rem, 0.9vw, 0.94rem);
  font-weight: 800;
  letter-spacing: 0.13em;
}

body.archive-room-page .quiz-kicker span {
  margin-left: 16px;
  color: rgba(218, 195, 122, 0.64);
}

body.archive-room-page .quiz-question {
  max-width: 860px;
  margin: 0 0 clamp(28px, 3.4vw, 42px);
  padding-left: clamp(16px, 2vw, 26px);
  color: #fff2cf;
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-size: clamp(2.35rem, 4.2vw, 4.75rem);
  font-weight: 760;
  line-height: 1.16;
  letter-spacing: 0;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

body.archive-room-page .quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  padding-left: clamp(16px, 2vw, 26px);
}

body.archive-room-page .quiz-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 74px;
  padding: 15px 18px;
  border: 1px solid rgba(218, 195, 122, 0.18);
  border-radius: 18px;
  color: #273044;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.34), transparent 6rem),
    linear-gradient(180deg, rgba(246, 236, 204, 0.94), rgba(218, 198, 151, 0.86));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.archive-room-page .quiz-option:hover {
  transform: translateY(-3px);
  border-color: rgba(218, 195, 122, 0.42);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.42), transparent 6rem),
    linear-gradient(180deg, rgba(255, 244, 216, 0.98), rgba(228, 207, 160, 0.92));
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

body.archive-room-page .quiz-option.is-selected {
  transform: translateY(-2px);
  border-color: rgba(174, 196, 222, 0.58);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.34), transparent 6rem),
    linear-gradient(180deg, rgba(222, 232, 244, 0.96), rgba(154, 176, 203, 0.90));
  box-shadow:
    0 0 0 1px rgba(174, 196, 222, 0.18),
    0 18px 40px rgba(22, 34, 51, 0.28);
}

body.archive-room-page .option-letter {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #25283a;
  background: linear-gradient(180deg, #ebd381, #c6a64f);
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px rgba(92, 67, 23, 0.18);
}

body.archive-room-page .quiz-option.is-selected .option-letter {
  background: linear-gradient(180deg, #d9e6f3, #8fa8c2);
}

body.archive-room-page .option-text {
  color: #25283a;
  font-size: clamp(0.98rem, 1.08vw, 1.14rem);
  font-weight: 820;
  line-height: 1.42;
}

@media (max-width: 960px) {
  body.archive-room-page .reader-quiz {
    width: min(100% - 34px, 760px);
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 72px;
  }

  body.archive-room-page .quiz-sidebar {
    position: static;
    min-height: 0;
    transform: none;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    align-items: center;
  }

  body.archive-room-page .quiz-sidebar .page-count {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin: 0;
  }

  body.archive-room-page .quiz-sidebar .progress-track {
    grid-column: 1 / -1;
    margin-top: 6px;
  }
}

@media (max-width: 680px) {
  body.archive-room-page .reader-quiz {
    width: min(100% - 24px, 560px);
  }

  body.archive-room-page .quiz-sheet {
    padding: 26px 18px;
    border-radius: 22px;
  }

  body.archive-room-page .quiz-sheet::after {
    display: none;
  }

  body.archive-room-page .quiz-kicker,
  body.archive-room-page .quiz-question,
  body.archive-room-page .quiz-options {
    padding-left: 0;
  }

  body.archive-room-page .quiz-kicker span {
    display: block;
    margin: 6px 0 0;
  }

  body.archive-room-page .quiz-question {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  body.archive-room-page .quiz-options {
    grid-template-columns: 1fr;
  }
}

/* Timeline-inspired quiz UI: directly adapts the user's reference into archive choices. */
body.archive-room-page .reader-quiz {
  width: min(980px, calc(100vw - 72px));
  display: grid;
  grid-template-columns: clamp(118px, 10vw, 148px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
  margin: clamp(58px, 7.5vh, 86px) auto clamp(70px, 9vh, 110px);
}

body.archive-room-page .quiz-sidebar {
  position: sticky;
  top: 94px;
  min-height: 190px;
  padding: 18px 16px;
  border: 1px solid rgba(224, 168, 174, 0.28);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(192, 135, 143, 0.74), rgba(224, 192, 178, 0.62));
  color: #f6ede9;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: none;
}

body.archive-room-page .quiz-sidebar .page-label {
  color: rgba(255, 244, 238, 0.76);
  font-family: "Segoe UI", "Noto Sans SC", sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body.archive-room-page .quiz-sidebar .page-count {
  margin: 18px 0 8px;
  color: #fff4ee;
  font-family: "Segoe UI", "Noto Sans SC", sans-serif;
  font-size: clamp(2rem, 3vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
}

body.archive-room-page .quiz-sidebar .page-meta {
  color: rgba(255, 244, 238, 0.68);
  font-size: 0.84rem;
  line-height: 1.55;
}

body.archive-room-page .quiz-sidebar .progress-track {
  height: 5px;
  margin-top: 20px;
  background: rgba(96, 55, 61, 0.24);
}

body.archive-room-page .quiz-sidebar .progress-bar {
  background: linear-gradient(90deg, #f05a6b, #eab8b2);
}

body.archive-room-page .quiz-sheet {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(232, 189, 188, 0.22);
  border-radius: 8px;
  background: rgba(237, 205, 196, 0.84);
  color: #40313a;
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.36),
    0 0 44px rgba(232, 189, 188, 0.10);
  backdrop-filter: blur(4px);
}

body.archive-room-page .quiz-sheet::before {
  content: "";
  position: absolute;
  left: 42px;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(255, 230, 224, 0.72);
  box-shadow: 0 0 10px rgba(255, 230, 224, 0.18);
  opacity: 1;
}

body.archive-room-page .quiz-sheet::after {
  display: none;
}

body.archive-room-page .quiz-kicker {
  margin: 0;
  padding: 20px 28px 14px 76px;
  color: rgba(64, 49, 58, 0.66);
  font-family: "Segoe UI", "Noto Sans SC", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body.archive-room-page .quiz-kicker span {
  margin-left: 12px;
  color: rgba(64, 49, 58, 0.46);
}

body.archive-room-page .quiz-question {
  margin: 0;
  padding: 0 28px 24px 76px;
  max-width: 920px;
  color: #3d3038;
  font-family: "Segoe UI", "Noto Sans SC", sans-serif;
  font-size: clamp(1.8rem, 3vw, 3.35rem);
  font-weight: 850;
  line-height: 1.22;
  text-shadow: none;
}

body.archive-room-page .quiz-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

body.archive-room-page .quiz-option {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  min-height: 78px;
  padding: 18px 26px 18px 76px;
  border: 0;
  border-top: 1px solid rgba(255, 242, 236, 0.58);
  border-radius: 0;
  color: #3d3038;
  background: rgba(231, 183, 184, 0.66);
  box-shadow: none;
  transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

body.archive-room-page .quiz-option:nth-child(1),
body.archive-room-page .quiz-option:nth-child(2) {
  background: rgba(177, 121, 131, 0.78);
}

body.archive-room-page .quiz-option:nth-child(3),
body.archive-room-page .quiz-option:nth-child(4) {
  background: rgba(203, 137, 144, 0.72);
}

body.archive-room-page .quiz-option:nth-child(5),
body.archive-room-page .quiz-option:nth-child(6) {
  background: rgba(224, 154, 161, 0.66);
}

body.archive-room-page .quiz-option:nth-child(7),
body.archive-room-page .quiz-option:nth-child(8) {
  background: rgba(229, 177, 171, 0.66);
}

body.archive-room-page .quiz-option:nth-child(n + 9) {
  background: rgba(231, 198, 186, 0.66);
}

body.archive-room-page .quiz-option:hover {
  transform: translateX(4px);
  filter: saturate(1.06) brightness(1.04);
  background: rgba(239, 173, 178, 0.80);
  box-shadow: inset 6px 0 0 rgba(240, 90, 107, 0.20);
}

body.archive-room-page .quiz-option.is-selected {
  transform: translateX(4px) !important;
  filter: saturate(1.08) brightness(1.05) !important;
  background: rgba(238, 161, 168, 0.88) !important;
  box-shadow: inset 6px 0 0 rgba(240, 82, 102, 0.42) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 242, 236, 0.58) !important;
  border-color: transparent !important;
  outline: none !important;
}

body.archive-room-page .quiz-option.is-selected .option-letter {
  background: transparent !important;
  color: rgba(255, 244, 238, 0.92) !important;
  box-shadow: none !important;
}


body.archive-room-page .quiz-option::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 18px;
  z-index: 3;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f05266;
  box-shadow:
    0 0 0 3px rgba(240, 82, 102, 0.10),
    0 0 16px rgba(240, 82, 102, 0.22);
}

body.archive-room-page .option-letter {
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  color: rgba(255, 244, 238, 0.92);
  background: transparent;
  box-shadow: none;
  font-family: "Segoe UI", "Noto Sans SC", sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.4;
}

body.archive-room-page .option-letter::after {
  content: ":00";
  margin-left: 4px;
  font-weight: 500;
  opacity: 0.75;
}

body.archive-room-page .option-text {
  color: rgba(52, 43, 52, 0.92);
  font-family: "Segoe UI", "Noto Sans SC", sans-serif;
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  font-weight: 560;
  line-height: 1.55;
}

body.archive-room-page .quiz-option:nth-child(-n + 2) .option-text,
body.archive-room-page .quiz-option:nth-child(-n + 2) .option-letter {
  color: rgba(255, 246, 241, 0.90);
}

body.archive-room-page .quiz-option:nth-child(3) .option-text,
body.archive-room-page .quiz-option:nth-child(4) .option-text {
  color: rgba(255, 246, 241, 0.88);
}

@media (max-width: 760px) {
  body.archive-room-page .reader-quiz {
    width: min(100% - 28px, 560px);
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 72px;
  }

  body.archive-room-page .quiz-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 14px;
  }

  body.archive-room-page .quiz-sidebar .page-count {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin: 0;
  }

  body.archive-room-page .quiz-sidebar .progress-track {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  body.archive-room-page .quiz-kicker,
  body.archive-room-page .quiz-question {
    padding-left: 62px;
    padding-right: 18px;
  }

  body.archive-room-page .quiz-kicker span {
    display: block;
    margin: 6px 0 0;
  }

  body.archive-room-page .quiz-question {
    font-size: clamp(1.55rem, 8vw, 2.35rem);
  }

  body.archive-room-page .quiz-option {
    grid-template-columns: 66px minmax(0, 1fr);
    padding: 16px 18px 16px 62px;
  }

  body.archive-room-page .quiz-sheet::before {
    left: 34px;
  }

  body.archive-room-page .quiz-option::before {
    left: 28px;
  }
}

/* ==========================================================================
   Cozy Dusty Rose Timeline Layout for Result Blocks
   Inspired by the premium warm-palette schedule UI reference
   ========================================================================== */

/* Change result grid to a continuous vertical timeline container */
body.archive-room-page .reader-app .dr-result-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative;
  padding-left: clamp(24px, 4vw, 42px) !important;
  margin-bottom: 32px !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Vertical line running down the left side */
body.archive-room-page .reader-app .dr-result-grid::before {
  content: "";
  position: absolute;
  left: clamp(12px, 2vw, 21px);
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: rgba(255, 255, 255, 0.45);
  z-index: 2;
}

/* Individual blocks style */
body.archive-room-page .reader-app .dr-result-block {
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 24px 28px !important;
  min-height: auto !important; /* No min-height restrictions to maintain timeline layout density */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: filter 0.2s ease, transform 0.2s ease;
}

body.archive-room-page .reader-app .dr-result-block:hover {
  filter: brightness(1.04);
}

/* Dot indicators positioned perfectly on the left vertical line */
body.archive-room-page .reader-app .dr-result-block::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(24px, 4vw, 42px) + clamp(12px, 2vw, 21px) - 5px);
  top: 32px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e95d5d; /* Cozy vibrant rose-red dot */
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(233, 93, 93, 0.7);
  z-index: 3;
}

/* 1st Block: 方向说明 */
body.archive-room-page .reader-app .dr-result-block:nth-child(1) {
  background: #a27272 !important; /* Premium deep terracotta rose */
  color: #ffffff !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(1) h4 {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 800 !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(1) p {
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.85 !important;
}

/* 2nd Block: 可能误区 */
body.archive-room-page .reader-app .dr-result-block:nth-child(2) {
  background: #b87e7e !important; /* Cozy medium-deep warm rose */
  color: #ffffff !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(2) h4 {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 800 !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(2) p {
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.85 !important;
}

/* 3rd Block: 适合项目 */
body.archive-room-page .reader-app .dr-result-block:nth-child(3) {
  background: #d69494 !important; /* Beautiful warm rose */
  color: #ffffff !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(3) h4 {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 800 !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(3) .dr-pill-list span {
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(4px);
}

/* 4th Block: 推荐学习路径 */
body.archive-room-page .reader-app .dr-result-block:nth-child(4) {
  background: #e2abab !important; /* Soft warm pink-beige */
  color: #401b1b !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(4) h4 {
  color: #401b1b !important;
  font-weight: 800 !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(4) ol {
  color: #592525 !important;
  padding-left: 20px !important;
  margin: 10px 0 0 !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(4) li {
  color: #592525 !important;
  margin-bottom: 8px !important;
  padding-bottom: 4px !important;
  line-height: 1.6 !important;
  border-bottom: 1px dashed rgba(89, 37, 37, 0.15) !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(4) li::marker {
  color: #401b1b !important;
  font-weight: 700;
}

/* 5th Block: 推荐进入的心理展馆 */
body.archive-room-page .reader-app .dr-result-block:nth-child(5) {
  background: #ebd2d2 !important; /* Soft light peach-cream */
  color: #401b1b !important;
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  box-shadow: none !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(5) h4 {
  color: #401b1b !important;
  font-weight: 800 !important;
}
body.archive-room-page .reader-app .dr-result-block:nth-child(5) .dr-pill-list span {
  border: 1px solid rgba(89, 37, 37, 0.3) !important;
  color: #592525 !important;
  background: rgba(89, 37, 37, 0.06) !important;
  box-shadow: none !important;
}

/* ========================================================
   BLUE NEON SCANNING LINE & TIMELINE GLOW SWEEP ANIMATIONS
   ======================================================== */

/* Ensure the wrapper section handles overflow properly but keeps glow visible */
.reader-app {
  position: relative !important;
  overflow: visible !important;
}

/* Force relative positioning, hidden overflow, and remove default browser focus outline completely */
.dr-primary,
.dr-secondary,
.quiz-option,
.dr-option,
.dr-actions a,
[data-reader-start] {
  position: relative !important;
  overflow: hidden !important;
  outline: none !important;
}

.dr-primary:focus,
.dr-secondary:focus,
.quiz-option:focus,
.dr-option:focus,
.dr-actions a:focus,
[data-reader-start]:focus,
.dr-primary:active,
.dr-secondary:active,
.quiz-option:active,
.dr-option:active,
.dr-actions a:active,
[data-reader-start]:active {
  outline: none !important;
}

/* Thin blue horizontal laser line dynamically sweeping through the middle of the option/button */
.dr-option-sweep-line {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 2px !important;
  width: 180px !important;
  /* Asymmetric gradient: long tail on the left, bright white/cyan core leading on the right, transparent tip */
  background: linear-gradient(90deg, transparent, rgba(0, 176, 255, 0.04) 20%, rgba(0, 176, 255, 0.45) 60%, #00b0ff 85%, #ffffff 96%, transparent 100%) !important;
  box-shadow: 
    0 0 4px #ffffff,
    0 0 10px #00b0ff, 
    0 0 20px rgba(0, 176, 255, 0.5) !important;
  z-index: 99 !important;
  pointer-events: none !important;
  opacity: 0;
  animation: dr-option-sweep-anim 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

@keyframes dr-option-sweep-anim {
  0% {
    left: -180px;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Vertical timeline blue glowing line sweep */
.dr-timeline-glow-line {
  position: absolute;
  left: clamp(12px, 2vw, 21px);
  top: 24px;
  width: 2px;
  background: #57c0f8;
  box-shadow: 
    0 0 8px rgba(87, 192, 248, 0.95), 
    0 0 16px rgba(87, 192, 248, 0.65),
    0 0 26px rgba(87, 192, 248, 0.35);
  z-index: 4;
  pointer-events: none;
  height: 0;
  opacity: 0;
  animation: dr-vertical-timeline-sweep-anim 1.05s cubic-bezier(0.25, 1, 0.4, 1) forwards;
}

@keyframes dr-vertical-timeline-sweep-anim {
  0% {
    top: 24px;
    height: 0;
    opacity: 0.8;
  }
  50% {
    top: 24px;
    height: calc(100% - 48px);
    opacity: 1;
  }
  100% {
    top: calc(100% - 24px);
    height: 0;
    opacity: 0;
  }
}