:root {
  color-scheme: dark;
  --accent: #c92727;
  --accent-soft: #581010;
  --paper: #f2dec3;
  --background: #000;
  --display-font: "Songti TC", "Noto Serif TC", "STSong", serif;
  --shell-width: 440px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--background);
  color: #fff;
}
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
}
button:disabled {
  cursor: default;
  opacity: 0.4;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
button:active {
  transform: scale(0.985);
}
a {
  color: inherit;
}
#app {
  max-width: var(--shell-width);
  margin: auto;
  min-height: 100dvh;
  background: var(--background);
}
h1,
h2,
h3,
p {
  margin: 0;
}
button {
  background: transparent;
}
img {
  max-width: 100%;
  display: block;
}
video {
  display: block;
  background: #080503;
}
input,
textarea {
  color: #fff;
  min-width: 0;
}
input:focus,
textarea:focus {
  outline: none;
}
input::placeholder,
textarea::placeholder {
  color: #ffffff55;
}
.screen {
  position: relative;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
}
.screen > video,
.video-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.video-layer.blurred {
  filter: blur(8px);
  transform: scale(1.05);
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    180deg,
    #0005,
    transparent 30%,
    transparent 60%,
    #0005
  );
}
.page-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30;
  background: linear-gradient(#0008, transparent);
}
.page-header button {
  min-height: 36px;
  min-width: 36px;
}
.back {
  font-size: 25px;
  text-align: left;
}
.brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display-font);
  font-size: 17px;
  letter-spacing: 3px;
  font-weight: 900;
}
.page-header .brand:active {
  transform: translateX(-50%);
}
.sound-toggle {
  font-size: 18px;
  opacity: 0.8;
}
.sound-prompt {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  background: transparent;
  animation: fade-in 0.5s;
}
.sound-prompt .hand {
  position: relative;
  width: 70px;
  height: 70px;
}
.sound-prompt .hand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sound-prompt p {
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  text-shadow: 0 2px 8px #000;
}
.onboarding-footer {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  z-index: 20;
  animation: rise-in 0.6s 0.3s both;
}
.floating-message {
  display: flex;
  gap: 5px;
  align-items: center;
  border-radius: 50px;
  border: 1px solid #ffffff1a;
  background: #0005;
  backdrop-filter: blur(7.5px);
  padding: 9px 16px;
  font-size: 13px;
  white-space: nowrap;
}
.ritual-cta {
  width: min(336px, calc(100vw - 32px));
  height: 90px;
  background: var(--cta-background) center/100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display-font);
  font-size: 25px;
  letter-spacing: -0.25px;
  color: white;
  text-shadow:
    0 0 20px #000,
    0 0 20px #000,
    0 0 20px #000;
  filter: drop-shadow(0 0 15px #82000044);
}
body[data-theme="jade"] .ritual-cta {
  filter: hue-rotate(140deg);
}
body[data-theme="violet"] .ritual-cta {
  filter: hue-rotate(285deg);
}
.story-choices {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
  animation: rise-in 0.3s;
}
.glass-choice {
  width: 100%;
  min-height: 58px;
  border: 1px solid #fff9;
  border-radius: 16px;
  background: #ffffff29;
  backdrop-filter: blur(5px);
  padding: 12px 10px;
  font-size: 18px;
  letter-spacing: -0.09px;
}
.skip-story {
  padding: 7px;
  font-size: 15px;
  align-self: center;
}
.media-status {
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  background: #0009;
  font-size: 13px;
  z-index: 24;
}
.media-status button {
  text-decoration: underline;
  margin-left: 10px;
}
.input-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% -19%, #1888ff66, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.question-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100% - 75px);
  overflow-y: auto;
  padding: 30px 16px 50px;
  animation: rise-in 0.3s;
}
.question-wrap.late {
  padding-bottom: 30px;
  padding-top: 50px;
  background: linear-gradient(transparent, #000c 60%);
}
.question-title {
  font-size: 28px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.28px;
  margin-bottom: 15px;
}
.kicker {
  font-size: 16px;
  color: #ddd;
  margin-bottom: 16px;
}
.question-subtitle {
  font-size: 15px;
  line-height: 1.5;
  color: #fff8;
  margin-bottom: 18px;
}
.radio-list {
  display: flex;
  flex-direction: column;
}
.radio-option {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: #fffc;
}
.radio-option::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1.6px solid #fff8;
  border-radius: 50%;
  flex-shrink: 0;
}
.radio-option[aria-pressed="true"]::before {
  background: #000;
  border: 5px solid #fff;
}
.pills {
  display: flex;
  gap: 10px;
}
.pill {
  border-radius: 60px;
  padding: 14px;
  flex: 1;
  background: #ffffff1a;
  color: #fffb;
  font-size: 18px;
}
.pill[aria-pressed="true"] {
  background: #fff;
  color: #0f172a;
}
.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
}
.field-row input {
  flex: 1;
  width: 100%;
  background: transparent;
  border: 0;
  font-size: 20px;
  font-weight: 600;
  height: 48px;
  letter-spacing: -0.4px;
}
.confirm {
  padding: 11px 15px;
  border-radius: 60px;
  background: #fff;
  color: #0f172a;
  white-space: nowrap;
  font-weight: 500;
}
.calendar-options {
  display: flex;
  gap: 4px;
}
.calendar-options button {
  padding: 9px 12px;
  border-radius: 50px;
  background: #ffffff4d;
  font-size: 14px;
  white-space: nowrap;
}
.calendar-options .selected {
  background: #fff;
  color: #0f172a;
}
.wide-button {
  width: 100%;
  padding: 13px 18px;
  border-radius: 60px;
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  font-size: 16px;
  margin-top: 20px;
}
.muted-button {
  background: #ffffff1a;
  color: #fffd;
}
.unknown-time {
  padding: 15px 10px;
  color: #fffc;
  font-size: 15px;
  text-decoration: underline;
}
.question-wrap textarea {
  display: block;
  resize: vertical;
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid #ffffff26;
  border-radius: 12px;
  background: #ffffff0a;
}
.error {
  color: #ff9090;
  font-size: 14px;
  min-height: 20px;
  margin: 8px 10px 0;
}
.field-helper {
  font-size: 12px;
  color: #ffffff70;
  margin-top: 14px;
}
.bubble {
  position: absolute;
  border-radius: 50%;
  border: 3px solid #0008;
  background: #ffffffb3;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: pre-line;
  font-family: var(--display-font);
  font-size: 25px;
  line-height: 1.4;
  width: 128px;
  height: 187px;
  animation: pop-in 0.5s;
}
.bubble.name {
  left: 16px;
  top: 38%;
}
.bubble.destiny {
  right: 16px;
  top: 55%;
}
.loading-caption {
  position: absolute;
  bottom: 30px;
  left: 20px;
  right: 20px;
  text-align: center;
  font-size: 12px;
  color: #fff9;
}
.demo-label {
  display: inline-block;
  font-family: -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 500;
  padding: 5px 9px;
  border: 1px solid #ffffff30;
  border-radius: 30px;
  color: #fffb;
  background: #0008;
}
.sales-page {
  overflow: hidden;
  padding-bottom: 175px;
  font-family: var(--display-font);
}
.sales-page .sales-video {
  width: 100%;
  object-fit: cover;
}
.sales-header {
  position: relative;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.sales-header .back {
  position: absolute;
  left: 18px;
}
.sales-page section {
  position: relative;
  isolation: isolate;
}
.sales-intro {
  height: 480px;
  text-align: center;
  overflow: hidden;
  padding-top: 32px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.sales-intro > img {
  position: absolute;
  width: 150%;
  max-width: none;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.sales-intro:after,
.portrait-section:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#000 0%, transparent 18%, transparent 82%, #000);
  pointer-events: none;
  z-index: -1;
}
.sales-intro h1 {
  font-size: 35px;
  line-height: 1.4;
  font-weight: 500;
}
.gradient-text {
  background: linear-gradient(#fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.portrait-section {
  height: 820px;
  overflow: hidden;
}
.portrait-section > img {
  position: absolute;
  height: 740px;
  max-width: none;
  width: 558px;
  object-fit: cover;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
}
.portrait-section > .bubble {
  left: 40px;
  top: 23px;
}
.portrait-section .name-title {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 50px;
}
.incense-note {
  position: absolute;
  right: 0;
  top: 436px;
  width: 240px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.incense-note img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
  z-index: -1;
}
.incense-note p {
  font-size: 25px;
  writing-mode: vertical-rl;
  text-shadow: 0 1px 8px #000;
}
.story-panel {
  min-height: 600px;
  text-align: center;
  padding: 45px 20px 40px;
}
.story-panel .panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.story-panel .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(#000, transparent 24%, #000b 70%, #000);
  z-index: -1;
}
.story-panel .eyebrow {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--paper);
}
.story-panel h2 {
  font-size: 34px;
  line-height: 1.5;
  font-weight: 500;
  white-space: pre-line;
}
.story-panel p {
  font-size: 20px;
  line-height: 1.8;
  white-space: pre-line;
  margin: 20px 0;
}
.story-panel .character {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  margin: 20px auto;
}
.story-panel .prop {
  width: 90%;
  margin: 30px auto;
}
.vertical-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0 40px;
}
.vertical-title img {
  width: 58px;
  height: 80px;
  object-fit: contain;
}
.vertical-title span {
  writing-mode: vertical-rl;
  font-size: 35px;
  letter-spacing: 10px;
  color: var(--paper);
}
.paper-card {
  position: relative;
  color: #392d20;
  background: var(--paper);
  padding: 32px 22px;
  margin: 30px 0;
  box-shadow: inset 0 0 60px #60402130;
  border: 1px solid #775b37;
  font-family: var(--display-font);
}
.paper-card h3 {
  font-size: 25px;
  margin-bottom: 20px;
}
.paper-card p {
  font-size: 17px;
  line-height: 1.7;
}
.sample-mark {
  font:
    12px -apple-system,
    sans-serif;
  opacity: 0.6;
  display: block;
  margin-bottom: 12px;
}
.saju-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 20px 0;
}
.saju-table span {
  padding: 14px 4px;
  border: 1px solid #775b3750;
  font-size: 25px;
  background: #ffffff30;
}
.destiny-card {
  min-height: 550px;
  padding-top: 50px;
}
.destiny-card .profile {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 50%;
  margin: 20px auto;
  border: 1px solid var(--paper);
}
.price-panel {
  padding: 60px 25px 20px;
  text-align: center;
}
.price-panel > img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}
.price-box {
  padding: 30px;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  background: linear-gradient(transparent, var(--accent-soft), transparent);
}
.price-box h2 {
  font-size: 30px;
  margin-bottom: 20px;
}
.price-box p {
  font-size: 17px;
  line-height: 1.8;
}
.price-box strong {
  font-size: 25px;
  color: var(--paper);
  display: block;
  margin-top: 18px;
}
.chapter-card {
  padding: 40px 24px;
  margin: 35px 16px;
  border: 1px solid #a68d6555;
  text-align: center;
  background: linear-gradient(#ffffff03, #a881340c);
}
.chapter-card .chapter-number {
  font-size: 19px;
  letter-spacing: 5px;
  color: var(--paper);
}
.chapter-card h3 {
  font-size: 27px;
  line-height: 1.5;
  margin: 24px 0;
}
.chapter-card img {
  max-height: 340px;
  width: 100%;
  object-fit: contain;
}
.chapter-card ul {
  text-align: left;
  font-family: -apple-system, sans-serif;
  padding: 20px 0 0 20px;
  color: #fffd;
  font-size: 15px;
  line-height: 1.9;
}
.trust-section {
  padding: 50px 20px;
  text-align: center;
}
.trust-section h2 {
  font-size: 28px;
  margin-bottom: 30px;
}
.trust-section img {
  width: 100%;
  margin: 18px auto;
}
.trust-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-row img {
  width: calc(50% - 6px);
}
.faq {
  font-family: -apple-system, sans-serif;
  padding: 50px 20px;
}
.faq h2 {
  font-family: var(--display-font);
  font-size: 28px;
  margin-bottom: 30px;
}
.faq details {
  border-bottom: 1px solid #ffffff22;
  padding: 20px 0;
}
.faq summary {
  cursor: pointer;
  font-size: 16px;
}
.faq p {
  font-size: 14px;
  line-height: 1.7;
  color: #aaa;
  padding-top: 12px;
}
.sales-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 440px);
  background: linear-gradient(transparent, #000 44%);
  padding: 50px 0 24px;
  display: flex;
  justify-content: center;
  z-index: 35;
}
.sales-cta .ritual-cta {
  box-shadow:
    0 0 40px #8b000077,
    0 0 80px #8b000033;
}
.sales-footer {
  padding: 30px 24px;
  text-align: center;
  font:
    12px/1.8 -apple-system,
    sans-serif;
  color: #777;
}
.sales-footer a {
  display: inline-block;
  margin: 8px;
  text-decoration: underline;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000a;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  backdrop-filter: blur(8px);
}
.modal {
  width: min(100%, 440px);
  padding: 30px 24px max(30px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #181716;
  border: 1px solid #ffffff1a;
  max-height: 90dvh;
  overflow: auto;
  animation: rise-in 0.3s;
}
.modal:before {
  content: "";
  display: block;
  width: 50px;
  height: 4px;
  background: #ffffff40;
  border-radius: 10px;
  margin: -15px auto 25px;
}
.modal h2 {
  font-family: var(--display-font);
  font-size: 28px;
  line-height: 1.4;
  margin-bottom: 15px;
}
.modal p {
  font-size: 14px;
  line-height: 1.8;
  color: #bbb;
}
.modal label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: #aaa;
  margin-top: 20px;
  line-height: 1.6;
}
.modal label input {
  margin-top: 5px;
  accent-color: var(--accent);
}
.modal .close {
  display: block;
  padding: 15px;
  width: 100%;
  text-align: center;
  color: #aaa;
  margin-top: 5px;
}
.modal .coupon-character {
  height: 200px;
  margin: -15px auto 10px;
  object-fit: contain;
}
.report {
  min-height: 100dvh;
  padding-bottom: 50px;
  font-family: var(--display-font);
}
.report-cover {
  position: relative;
  min-height: 620px;
  text-align: center;
  padding: 90px 24px 50px;
  isolation: isolate;
}
.report-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.report-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#0008, transparent, #000);
  z-index: -1;
}
.report-cover h1 {
  font-size: 38px;
  margin: 40px 0 20px;
  line-height: 1.6;
}
.report-cover p {
  font-size: 18px;
  line-height: 1.8;
}
.report-cover .report-cover-stats {
  display: inline-block;
  margin: 14px auto 0;
  padding: 8px 18px;
  border: 1px solid #ffffff38;
  border-radius: 999px;
  background: #0006;
  font: 13px/1.6 -apple-system, sans-serif;
  letter-spacing: 0.04em;
  color: #f4ecdd;
}
.report .report-notice {
  margin: 24px;
  padding: 20px;
  background: #ffffff09;
  border: 1px solid #ffffff22;
  font:
    14px/1.8 -apple-system,
    sans-serif;
}
.report .chapter-card {
  text-align: left;
}
.report .chapter-card p {
  font-size: 17px;
  line-height: 1.9;
  white-space: pre-line;
}
.report-actions {
  padding: 0 24px;
}
.fade-out {
  opacity: 0;
  transition: opacity 0.5s;
}
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: #fff;
  color: #111;
  border-radius: 30px;
  font-size: 14px;
  padding: 12px 22px;
  box-shadow: 0 3px 30px #0004;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s,
    transform 0.7s;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (max-width: 359px) {
  .floating-message {
    font-size: 11px;
    padding: 9px 12px;
  }
  .question-title {
    font-size: 26px;
  }
  .sales-intro h1 {
    font-size: 30px;
  }
  .glass-choice {
    font-size: 16px;
  }
}
@media (min-width: 700px) {
  body {
    background: #101010;
  }
  #app {
    box-shadow: 0 0 80px #0008;
  }
  .screen {
    min-height: 600px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}
@media print {
  .sales-cta,
  .page-header,
  .report-actions {
    display: none;
  }
  .report {
    background: white;
    color: black;
  }
  .report .chapter-card,
  .report-notice {
    break-inside: avoid;
    border-color: #999;
  }
  .report-cover {
    min-height: 350px;
  }
}

/* Generated style packs: still frames until their videos are produced. */
.flow-still{display:block;object-fit:cover}.screen>.flow-still{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.sales-page>.flow-still.sales-video{position:relative;width:100%;height:auto;max-height:800px;object-fit:contain;background:var(--background)}body[data-pack^="0"] .screen{background-image:linear-gradient(#0004,#0009),var(--pack-scene);background-size:cover;background-position:center}body[data-pack^="0"] .screen.onboarding{background-image:none}body[data-pack^="0"] .input-glow{background:linear-gradient(#0002,#0009)}body[data-pack^="0"] .ritual-cta{filter:none;box-shadow:none;font-size:23px}body[data-pack^="0"] .sales-intro:after,body[data-pack^="0"] .portrait-section:after{background:linear-gradient(var(--background),transparent 18%,transparent 82%,var(--background))}body[data-pack^="0"] .sales-header{background:var(--background)}body[data-pack^="0"] .sales-cta{background:linear-gradient(transparent,var(--background) 44%)}body[data-pack^="0"] .portrait-section>img{object-fit:contain}body[data-pack^="0"] .story-panel .shade{background:linear-gradient(var(--background),transparent 24%,#000b 70%,var(--background))}body[data-pack^="0"] .report-cover img{object-fit:cover}body[data-pack^="0"] .glass-choice{border-color:var(--accent);background:#0008}

.ai-disclosure{position:absolute;top:72px;left:0;width:100%;text-align:center;font-size:11px;letter-spacing:.08em;color:#e6dccb;opacity:.8;z-index:4;pointer-events:none}
/* Existing report layout extended for saved, progressively generated content. */
.report-directory {display:flex;flex-direction:column;gap:12px;padding:24px;color:var(--accent);}
.report-directory a {color:inherit;line-height:1.6;text-decoration:underline;text-underline-offset:4px;}
.report-notice progress {display:block;width:100%;margin:18px 0;accent-color:var(--accent);}
.report-error {margin:20px;padding:18px;border:1px solid var(--accent);line-height:1.7;white-space:pre-wrap;}
.generated-chapter {text-align:left;overflow-wrap:anywhere;}
.generated-chapter h2 {font-size:26px;line-height:1.6;}
.generated-chapter h3 {font-size:21px;margin:36px 0 18px;line-height:1.6;}
.generated-chapter p {white-space:pre-wrap;line-height:1.95;margin:0 0 22px;}
.generated-chapter img {display:block;max-height:480px;object-fit:contain;margin:20px auto;}
.report-consent {display:flex;gap:12px;text-align:left;line-height:1.7;margin:20px 0;align-items:flex-start;}
.report-consent input {flex:0 0 auto;width:20px;height:20px;margin:5px 0;}
.modal {max-height:88dvh;overflow-y:auto;}
.wide-button:disabled {opacity:.45;cursor:not-allowed;}
#confirmed-profile,#checkout-status {line-height:1.8;overflow-wrap:anywhere;white-space:pre-wrap;margin:16px 0;}
.leap-option {font-size:13px;display:flex;align-items:center;gap:6px;}
.leap-option input {width:18px;height:18px;}
.calendar-options {flex-wrap:wrap;}
.scroll-dialogue {font-family:var(--display-font);font-size:20px!important;line-height:1.7!important;color:var(--paper);margin:24px auto!important;max-width:90%;}
.scroll-caption {font-size:13px!important;opacity:.7;line-height:1.7!important;}
.relationship-fields {display:grid;grid-template-columns:70px 1fr;gap:12px;text-align:left;line-height:1.7;}
.relationship-fields dt {opacity:.65;}.relationship-fields dd {margin:0;}
.report-directory button {border:0;background:transparent;color:var(--accent);text-align:left;font:inherit;line-height:1.6;padding:4px 0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;}

/* Language switcher */
.page-header .language-toggle{margin-left:auto;padding:7px 11px;border:1px solid #ffffff44;border-radius:999px;background:#0004;color:#f3ead9;font:12px/1 -apple-system,sans-serif;letter-spacing:.08em;opacity:.9}
.page-header .language-toggle:active{background:#0008}
.language-list{display:grid;gap:10px;margin-top:18px}
.language-option{width:100%;padding:14px 16px;border:1px solid #ffffff2e;border-radius:12px;background:#ffffff08;color:var(--paper);text-align:left;font:16px/1.4 var(--display-font);cursor:pointer}
.language-option.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.language-option small{display:block;margin-top:4px;opacity:.6;font:11px/1.4 -apple-system,sans-serif;letter-spacing:.06em}

/* End-of-report margin notes, themed per character */
.report-community{margin:40px 18px 30px}
.report-community .margin-frame{--margin-accent:#c29a56;--margin-soft:#39402b;--margin-paper:#efe1c4;--margin-ink:#211d14;position:relative;overflow:hidden;padding:34px 24px 28px;border:1px solid color-mix(in srgb,var(--margin-accent) 55%,transparent);background:linear-gradient(155deg,color-mix(in srgb,var(--margin-paper) 96%,white),color-mix(in srgb,var(--margin-paper) 82%,var(--margin-soft)));color:var(--margin-ink);box-shadow:0 20px 60px #0006}
.report-community[data-community-pack="01-orange-cat"] .margin-frame{--margin-accent:#c29a56;--margin-soft:#39402b;--margin-paper:#efe1c4}
.report-community[data-community-pack="02-blue-wizard"] .margin-frame{--margin-accent:#c6a557;--margin-soft:#263b55;--margin-paper:#eddfbd;--margin-ink:#14202c}
.report-community[data-community-pack="06-witch-in-portrait"] .margin-frame{--margin-accent:#b39867;--margin-soft:#454149;--margin-paper:#ded0b9;--margin-ink:#241f1a}
.report-community[data-community-pack="07-oracle-in-ink"] .margin-frame{--margin-accent:#b9a17a;--margin-soft:#3b493e;--margin-paper:#e8ddbf;--margin-ink:#1e251d}
.margin-art{position:absolute;inset:0;pointer-events:none;z-index:0}
.margin-art .margin-paper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;mix-blend-mode:multiply}
.margin-art .margin-miniature{position:absolute;right:-14px;bottom:-18px;width:148px;max-height:180px;object-fit:contain;opacity:.5;filter:sepia(.15) contrast(.95)}
.margin-head,.margin-counts,.margin-anonymous,.margin-notes,.margin-empty,.margin-load-state,.margin-more,.margin-form,.margin-only{position:relative;z-index:1}
.margin-head{padding-bottom:18px;border-bottom:1px solid color-mix(in srgb,var(--margin-accent) 45%,transparent)}
.margin-kicker{display:block;font:10px/1.4 -apple-system,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--margin-ink) 58%,transparent)}
.margin-head h2{margin:8px 0 6px;font:26px/1.5 var(--display-font);color:var(--margin-ink)}
.margin-subtitle{margin:0;font-size:14px;line-height:1.8;opacity:.78}
.margin-counts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 8px}
.margin-counts div{padding:14px 16px;border:1px solid color-mix(in srgb,var(--margin-accent) 38%,transparent);background:#ffffff38}
.margin-counts dt{font:11px/1.4 -apple-system,sans-serif;letter-spacing:.1em;opacity:.62}
.margin-counts dd{margin:6px 0 0;font:30px/1 var(--display-font);color:color-mix(in srgb,var(--margin-ink) 88%,var(--margin-accent))}
.margin-anonymous{margin:0 0 18px;font:11px/1.6 -apple-system,sans-serif;opacity:.55}
.margin-notes{display:grid;gap:14px}
.margin-note{position:relative;padding:14px 16px 14px 20px;border-left:2px solid var(--margin-accent);background:#ffffff42}
.margin-note-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px}
.margin-note-head strong{font:14px/1.5 var(--display-font)}
.margin-note-head time{font:10px/1.4 -apple-system,sans-serif;opacity:.5;white-space:nowrap}
.margin-note p{margin:0;font-size:15px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
.margin-delete{margin-top:10px;padding:0;border:0;background:transparent;color:color-mix(in srgb,var(--margin-ink) 55%,transparent);font:11px/1.5 -apple-system,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.margin-empty{margin:18px 0;padding:18px;border:1px dashed color-mix(in srgb,var(--margin-accent) 48%,transparent);text-align:center;font-size:14px;opacity:.7}
.margin-load-state{display:flex;gap:12px;align-items:center;margin:14px 0;font:12px/1.5 -apple-system,sans-serif;opacity:.7;min-height:18px}
.margin-link{padding:0;border:0;background:transparent;color:var(--margin-accent);font:inherit;text-decoration:underline;cursor:pointer}
.margin-more{margin:16px 0 0!important;border-color:color-mix(in srgb,var(--margin-accent) 55%,transparent)!important;color:var(--margin-ink)!important;background:#ffffff38!important}
.margin-form{margin-top:24px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--margin-accent) 42%,transparent)}
.margin-label{display:block;margin-bottom:14px;font:12px/1.6 -apple-system,sans-serif;letter-spacing:.04em;opacity:.78}
.margin-label input,.margin-label textarea{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--margin-ink) 25%,transparent);border-radius:0;background:#fffdf6aa;color:var(--margin-ink);font:15px/1.7 var(--display-font);resize:vertical}
.margin-label textarea{min-height:104px}
.margin-label input:focus,.margin-label textarea:focus{outline:2px solid var(--margin-accent);outline-offset:1px}
.margin-form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.margin-form-foot .wide-button{flex:1;margin:0!important;color:var(--margin-ink)!important;background:color-mix(in srgb,var(--margin-accent) 58%,transparent)!important;border:1px solid var(--margin-accent)!important}
.margin-counter{font:11px/1.5 -apple-system,sans-serif;opacity:.55;white-space:nowrap}
.margin-privacy{margin:12px 0 0;font:10px/1.7 -apple-system,sans-serif;opacity:.5}
.margin-only{margin:20px 0 0;font-size:13px;opacity:.65}
.report-language-note{opacity:.7;font-size:13px}
@media (max-width:480px){
 .report-community{margin:30px 10px 24px}
 .report-community .margin-frame{padding:26px 16px 22px}
 .margin-head h2{font-size:22px}
 .margin-counts dd{font-size:26px}
 .margin-art .margin-miniature{width:108px;opacity:.38}
}
@media print{.report-community,.language-toggle{display:none}}

/* Community review cards: dark horizontal carousel, themed per character. */
.report-community .margin-frame{--margin-accent:#e0b368;--margin-glow:#4a3518;--margin-ink:#f4ecdf;padding:28px 22px 24px;border:1px solid color-mix(in srgb,var(--margin-accent) 38%,transparent);border-radius:24px;background:radial-gradient(120% 80% at 88% 0%,color-mix(in srgb,var(--margin-glow) 72%,transparent),transparent 62%),linear-gradient(160deg,#191715,#0b0b0b);color:var(--margin-ink);box-shadow:0 24px 70px #0007}
.report-community[data-community-pack="01-orange-cat"] .margin-frame{--margin-accent:#e0b368;--margin-glow:#5a421c}
.report-community[data-community-pack="02-blue-wizard"] .margin-frame{--margin-accent:#93bde3;--margin-glow:#1f3b57}
.report-community[data-community-pack="06-witch-in-portrait"] .margin-frame{--margin-accent:#dda079;--margin-glow:#4d2c1c}
.report-community[data-community-pack="07-oracle-in-ink"] .margin-frame{--margin-accent:#a8c0a0;--margin-glow:#2b3f2c}
.report-community .margin-art .margin-paper{opacity:.07;mix-blend-mode:screen}
.report-community .margin-art .margin-miniature{right:-18px;bottom:-22px;width:140px;max-height:170px;opacity:.2;filter:sepia(.1) contrast(.95)}
.report-community .margin-head{padding-bottom:16px;border-bottom:1px solid #ffffff12}
.margin-head-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.report-community .margin-kicker{color:var(--margin-accent);opacity:.85}
.report-community .margin-head h2{margin:12px 0 10px;font:clamp(26px,7vw,34px)/1.35 var(--display-font);color:#fff}
.margin-head h2 span,.margin-head h2 em{display:block}
.margin-head h2 em{font-style:normal;color:var(--margin-accent);letter-spacing:.01em}
.margin-more-link{padding:0;border:0;background:transparent;color:var(--margin-ink);font:12px/1.6 -apple-system,sans-serif;letter-spacing:.04em;opacity:.75;cursor:pointer}
.margin-more-link:hover{opacity:1}
.report-community .margin-subtitle{color:#d9d0c2;opacity:.75}
.margin-summary{margin:10px 0 0;font:12px/1.7 -apple-system,sans-serif;color:var(--margin-accent);opacity:.9}
.report-community .margin-notes{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:18px -22px 0;padding:4px 22px 14px;scrollbar-width:thin;scrollbar-color:var(--margin-accent) transparent}
.margin-notes::-webkit-scrollbar{height:4px}
.margin-notes::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--margin-accent) 55%,transparent);border-radius:2px}
.report-community .margin-note{flex:0 0 min(84%,330px);scroll-snap-align:start;padding:18px 18px 14px;border:1px solid #ffffff14;border-left:1px solid #ffffff14;border-radius:20px;background:linear-gradient(165deg,#232120,#161514);box-shadow:0 12px 30px #0005}
.report-community .margin-note-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.margin-avatar{flex:0 0 46px;width:46px;height:46px;overflow:hidden;border-radius:50%;border:1px solid #ffffff1f;background:radial-gradient(circle at 50% 35%,#3a3733,#1a1918);display:grid;place-items:center}
.margin-avatar-img{width:100%;height:100%;object-fit:cover;object-position:center 24%;transform:scale(1.12)}
.margin-note-who{flex:1;min-width:0}
.report-community .margin-note-head strong{display:block;font:15px/1.4 var(--display-font);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.margin-reader-badge{display:block;margin-top:2px;font:10px/1.4 -apple-system,sans-serif;letter-spacing:.06em;color:var(--margin-accent);opacity:.85}
.report-community .margin-note-head time{flex:0 0 auto;font:10px/1.4 -apple-system,sans-serif;color:#aaa;letter-spacing:.04em;white-space:nowrap}
.report-community .margin-note p{font-size:15px;line-height:1.9;color:#efe7da}
.report-community .margin-delete{color:#b9b0a4}
.report-community .margin-empty{margin:18px 0 0;padding:22px 18px;border:1px dashed #ffffff26;border-radius:16px;color:#d9d0c2;opacity:.7}
.report-community .margin-load-state{margin:12px 0 0;color:#c8c0b4;opacity:.7}
.report-community .margin-anonymous{margin:10px 0 0;color:#a49c91;opacity:.7}
.report-community .margin-form{margin-top:22px;padding-top:20px;border-top:1px solid #ffffff12}
.report-community .margin-label{color:#e7dfd2;opacity:.85}
.report-community .margin-label input,.report-community .margin-label textarea{border:1px solid #ffffff1f;border-radius:12px;background:#ffffff0b;color:var(--margin-ink)}
.report-community .margin-label input::placeholder,.report-community .margin-label textarea::placeholder{color:#9f978c}
.report-community .margin-form-foot .wide-button{color:#141210!important;background:var(--margin-accent)!important;border:1px solid var(--margin-accent)!important}
.report-community .margin-counter{color:#a49c91;opacity:.75}
.report-community .margin-privacy{color:#9d958a;opacity:.7}
.report-community .margin-only{color:#d9d0c2;opacity:.7}
@media (max-width:480px){
 .report-community .margin-frame{padding:24px 16px 20px;border-radius:20px}
 .report-community .margin-notes{margin:16px -16px 0;padding:4px 16px 12px}
 .report-community .margin-note{flex-basis:86%}
 .report-community .margin-art .margin-miniature{width:108px;opacity:.14}
}