:root {
  --ink: #161817;
  --ink-soft: #242724;
  --paper: #f2f0e9;
  --paper-deep: #e4e1d7;
  --coral: #f2664f;
  --coral-dark: #c94031;
  --mint: #a8d8c3;
  --gold: #d6b56f;
  --white: #fbfaf6;
  --muted: #a9aca7;
  --line: rgba(255, 255, 255, 0.16);
  --font-sans: "Noto Sans TC", system-ui, sans-serif;
  --font-serif: "Newsreader", "Noto Serif TC", serif;
}

* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--white);
  background: var(--ink);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}

.experience {
  position: relative;
  min-height: min(920px, 94vh);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(18, 20, 19, 0.98) 0%, rgba(18, 20, 19, 0.88) 45%, rgba(18, 20, 19, 0.16) 100%),
    url("assets/cosmic-map.png") center right / cover no-repeat;
}

.experience::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 12px solid rgba(255, 255, 255, 0.025);
}

.topbar,
.results-topbar {
  width: min(1360px, calc(100% - 64px));
  height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--ink);
  background: var(--coral);
  border-radius: 50%;
}

.privacy-note {
  color: #c7cac5;
  font-size: 12px;
}

.experience-inner {
  position: relative;
  z-index: 1;
  width: min(1360px, calc(100% - 64px));
  min-height: 710px;
  margin: 0 auto;
  padding: 76px 0 110px;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(500px, 1fr);
  gap: clamp(64px, 9vw, 150px);
  align-items: start;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro h1,
.result-summary h2,
.method-copy h2,
.detail-intro h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 0.98;
}

.intro h1 {
  max-width: 620px;
  font-size: clamp(52px, 4.8vw, 76px);
}

.intro-copy {
  max-width: 480px;
  margin: 26px 0 0;
  color: #d1d3ce;
  font-size: 16px;
  line-height: 1.8;
}

.time-promise {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 54px;
  color: #d5d7d1;
  font-size: 12px;
  line-height: 1.5;
}

.time-number {
  font-family: var(--font-serif);
  color: var(--mint);
  font-size: 60px;
  line-height: 1;
}

.discovery-form {
  max-width: 600px;
  padding: 32px 34px 36px;
  background: rgba(22, 24, 23, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.form-heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.form-heading > span {
  color: var(--coral);
  font-family: var(--font-serif);
  font-size: 18px;
}

.form-heading h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}

.form-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 26px;
}

.field {
  display: grid;
  gap: 8px;
}

.field > span,
.time-fieldset legend {
  color: #c9ccc6;
  font-size: 12px;
}

.field input,
.field select {
  width: 100%;
  height: 50px;
  padding: 0 2px;
  color: var(--white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  outline: none;
  transition: border-color 160ms ease;
}

.field input:focus,
.field select:focus {
  border-color: var(--mint);
}

.field-error {
  margin: 9px 0 0;
  color: #ff9a86;
  font-size: 11px;
  line-height: 1.5;
}

.mbti-trigger[aria-invalid="true"] {
  border-color: #ff9a86;
}

.field input::placeholder {
  color: #767a75;
}

.field input[type="date"] {
  color-scheme: dark;
}

.field select {
  color-scheme: dark;
}

.field select:invalid {
  color: #858984;
}

.field select option,
.field select optgroup {
  color: var(--white);
  background: var(--ink);
}

.field select optgroup {
  color: var(--mint);
  font-weight: 700;
}

.time-fieldset {
  margin: 28px 0 0;
  padding: 0;
  border: 0;
}

.time-fieldset legend,
.persona-fieldset legend {
  margin-bottom: 11px;
}

.persona-fieldset {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.persona-segmented {
  grid-template-columns: repeat(2, 1fr);
}

.field-note {
  margin: 10px 0 0;
  color: #838782;
  font-size: 11px;
  line-height: 1.55;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.segmented label {
  min-width: 0;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 8px 10px;
  color: #bec1bc;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  transition: 160ms ease;
}

.segmented input:checked + span {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--mint);
  font-weight: 700;
  box-shadow:
    0 0 0 1px rgba(168, 216, 195, 0.2),
    0 0 22px rgba(168, 216, 195, 0.24);
}

.conditional-time {
  margin-top: 16px;
}

.mbti-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  margin-top: 28px;
}

.mbti-field {
  position: relative;
}

.mbti-picker {
  --mbti-accent: var(--mint);
  --mbti-glow: rgba(168, 216, 195, 0.34);
  position: relative;
  min-width: 0;
}

.mbti-picker[data-temperament="nt"] {
  --mbti-accent: #b8a8ff;
  --mbti-glow: rgba(184, 168, 255, 0.38);
}

.mbti-picker[data-temperament="nf"] {
  --mbti-accent: #f49a8b;
  --mbti-glow: rgba(244, 154, 139, 0.38);
}

.mbti-picker[data-temperament="sj"] {
  --mbti-accent: #a8d8c3;
  --mbti-glow: rgba(168, 216, 195, 0.38);
}

.mbti-picker[data-temperament="sp"] {
  --mbti-accent: #e3bd70;
  --mbti-glow: rgba(227, 189, 112, 0.38);
}

.mbti-trigger {
  width: 100%;
  height: 50px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.mbti-picker.is-open .mbti-trigger {
  border-color: var(--mbti-accent);
  box-shadow: 0 10px 28px -20px var(--mbti-glow);
}

.mbti-trigger-value {
  display: inline-block;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  transform-origin: left center;
}

.mbti-picker.selection-flash .mbti-trigger {
  animation: mbti-choice-confirm 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.mbti-picker.selection-flash .mbti-trigger-value {
  color: var(--mbti-accent);
  text-shadow: 0 0 18px var(--mbti-glow);
}

.mbti-trigger-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #8f938e;
  font-size: 9px;
}

.mbti-trigger-meta b {
  color: var(--mbti-accent);
  font-size: 15px;
  font-weight: 400;
  transition: transform 160ms ease;
}

.mbti-picker.is-open .mbti-trigger-meta b {
  transform: rotate(180deg);
}

.mbti-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  max-height: 360px;
  padding: 18px 20px;
  overflow-y: auto;
  color: var(--white);
  background: rgba(12, 14, 13, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.58),
    0 0 34px var(--mbti-glow);
  backdrop-filter: blur(20px);
  animation: mbti-panel-enter 180ms ease-out both;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.mbti-group {
  --group-accent: var(--mint);
  --group-glow: rgba(168, 216, 195, 0.22);
}

.mbti-group-nt {
  --group-accent: #b8a8ff;
  --group-glow: rgba(184, 168, 255, 0.24);
}

.mbti-group-nf {
  --group-accent: #f49a8b;
  --group-glow: rgba(244, 154, 139, 0.24);
}

.mbti-group-sj {
  --group-accent: #a8d8c3;
  --group-glow: rgba(168, 216, 195, 0.24);
}

.mbti-group-sp {
  --group-accent: #e3bd70;
  --group-glow: rgba(227, 189, 112, 0.24);
}

.mbti-group + .mbti-group {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mbti-group > span {
  display: block;
  margin-bottom: 8px;
  color: var(--group-accent);
  font-size: 10px;
  font-weight: 700;
}

.mbti-group > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.mbti-group button {
  position: relative;
  min-height: 34px;
  padding: 0 2px;
  color: #c9ccc7;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.mbti-group button:hover,
.mbti-group button:focus-visible {
  color: var(--group-accent);
  background: transparent;
  border-color: var(--group-accent);
  outline: none;
  transform: translateX(2px);
}

.mbti-group button.selected {
  color: var(--group-accent);
  background: transparent;
  border-color: var(--group-accent);
  text-shadow: 0 0 16px var(--group-glow);
}

.mbti-group button.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 4px;
  height: 4px;
  background: var(--group-accent);
  border-radius: 50%;
  box-shadow: 0 0 9px var(--group-accent);
  transform: translateY(-50%);
}

@keyframes mbti-panel-enter {
  from { opacity: 0; transform: translateY(-7px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mbti-choice-confirm {
  0% { transform: translateX(0) scale(1); }
  32% { transform: translateX(-1px) scale(1.018); }
  52% { transform: translateX(1px) scale(1.012); }
  72% { transform: translateX(-0.5px) scale(1.008); }
  100% { transform: translateX(0) scale(1); }
}

.text-button,
.sample-button {
  padding: 0;
  color: var(--mint);
  background: transparent;
  border: 0;
  font-size: 12px;
  text-align: left;
}

.text-button {
  height: 50px;
}

.quick-mbti {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.quick-mbti > p {
  margin: 0 0 12px;
  color: #c6c9c3;
  font-size: 12px;
}

.binary-questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.binary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.binary button {
  min-height: 42px;
  padding: 8px;
  color: #bfc2bd;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
}

.binary button.selected {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 20px rgba(214, 181, 111, 0.22);
  transform: translateY(-1px);
}

.quick-mbti .microcopy {
  margin-top: 9px;
  color: #7f837e;
  font-size: 10px;
}

.quick-result {
  margin-top: 14px;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(168, 216, 195, 0.28);
  border-bottom: 1px solid rgba(168, 216, 195, 0.28);
}

.quick-result > div {
  min-width: 0;
}

.quick-result span {
  display: block;
  color: #858984;
  font-size: 9px;
}

.quick-result strong {
  display: inline-block;
  margin-top: 4px;
  color: var(--mint);
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 500;
}

.quick-result p {
  margin: 3px 0 0;
  color: #aeb2ac;
  font-size: 10px;
  line-height: 1.55;
}

.quick-result button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  color: var(--ink);
  background: var(--mint);
  border: 0;
  font-size: 10px;
  font-weight: 700;
}

.quick-result button:disabled {
  color: #8c918b;
  background: rgba(255, 255, 255, 0.09);
  cursor: default;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.primary-button {
  width: min(100%, 320px);
  min-height: 56px;
  padding: 0 20px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
  background: var(--coral);
  border: 0;
  font-size: 14px;
  font-weight: 700;
  transition: background 160ms ease, transform 160ms ease;
}

.primary-button:hover {
  background: var(--coral-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(242, 102, 79, 0.22);
}

.primary-button:active {
  transform: translateY(0) scale(0.99);
}

.discovery-form.is-launching {
  pointer-events: none;
}

.discovery-form.is-launching .primary-button {
  background: var(--coral-dark);
  box-shadow: 0 0 34px rgba(242, 102, 79, 0.3);
}

.sample-button {
  color: #b5b8b2;
  border-bottom: 1px solid #686c67;
}

.next-hint {
  position: absolute;
  z-index: 2;
  right: 32px;
  bottom: 26px;
  display: flex;
  gap: 20px;
  align-items: center;
  color: #bbbeb9;
  text-decoration: none;
  font-size: 11px;
}

.method {
  min-height: 520px;
  padding: 94px max(32px, calc((100vw - 1360px) / 2));
  display: grid;
  grid-template-columns: 0.6fr 1fr 1.35fr;
  gap: 60px;
  color: var(--ink);
  background: var(--paper);
}

.section-label {
  font-size: 12px;
  font-weight: 700;
}

.method-copy h2 {
  font-size: clamp(44px, 5vw, 66px);
}

.method-copy p {
  max-width: 470px;
  margin: 24px 0 0;
  color: #585b57;
  font-size: 14px;
  line-height: 1.9;
}

.method-steps {
  display: grid;
}

.method-steps article {
  display: grid;
  grid-template-columns: 42px 1fr 1.5fr;
  align-items: center;
  gap: 18px;
  padding: 23px 0;
  border-top: 1px solid #c8c6bd;
}

.method-steps article:last-child {
  border-bottom: 1px solid #c8c6bd;
}

.method-steps span {
  color: var(--coral-dark);
  font-family: var(--font-serif);
}

.method-steps h3 {
  margin: 0;
  font-size: 16px;
}

.method-steps p {
  margin: 0;
  color: #6b6e69;
  font-size: 12px;
  line-height: 1.65;
}

.results {
  min-height: 100vh;
  color: var(--white);
  background: var(--ink);
}

.results.is-revealing .result-summary {
  animation: result-rise 900ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.results.is-revealing .chart-visual {
  animation: chart-arrive 1100ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.results-topbar {
  width: min(1240px, calc(100% - 64px));
}

.outline-button {
  height: 38px;
  padding: 0 16px;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 12px;
}

.result-hero {
  width: min(1240px, calc(100% - 64px));
  min-height: 610px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 60px;
  border-bottom: 1px solid var(--line);
}

.report-index {
  position: sticky;
  z-index: 2;
  top: 0;
  width: min(1240px, calc(100% - 64px));
  min-height: 82px;
  margin: -1px auto 0;
  display: grid;
  grid-template-columns: 1.15fr repeat(5, 1fr);
  background: rgba(22, 24, 23, 0.72);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.report-index.has-natal-chart {
  grid-template-columns: 1.15fr repeat(6, 1fr);
}

.report-index-title,
.report-index a {
  min-width: 0;
  padding: 18px 20px;
  display: flex;
  align-items: center;
}

.report-index-title {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.report-index-title span {
  font-size: 13px;
  font-weight: 600;
}

.report-index-title small {
  margin-top: 4px;
  color: #797d78;
  font-size: 9px;
}

.report-index a {
  gap: 11px;
  color: #afb2ad;
  border-left: 1px solid var(--line);
  text-decoration: none;
  font-size: 10px;
  transition: color 160ms ease, background 160ms ease;
}

.report-index a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.035);
}

.report-index a[aria-current="page"] {
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(168, 216, 195, 0.12), transparent),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 -2px var(--mint);
}

.report-index a b {
  color: var(--coral);
  font-family: var(--font-serif);
  font-weight: 500;
}

.report-stage {
  position: relative;
  min-height: clamp(640px, 72vh, 1040px);
}

.chapter-gateway {
  width: min(1440px, calc(100% - clamp(64px, 7vw, 160px)));
  min-height: clamp(520px, 62vh, 820px);
  margin: 0 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 80px 0;
  text-align: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(168, 216, 195, 0.1), transparent 25%);
}

.chapter-gateway-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 28px;
  color: var(--ink);
  background: var(--mint);
  border-radius: 50%;
  box-shadow:
    0 0 30px rgba(168, 216, 195, 0.4),
    0 0 90px rgba(168, 216, 195, 0.12);
}

.chapter-gateway h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--report-section-title);
  font-weight: 500;
  line-height: 1.02;
}

.chapter-gateway > p:last-child {
  max-width: 560px;
  margin: 24px 0 0;
  color: #9da19b;
  font-size: var(--report-body);
  line-height: 1.8;
}

.report-chapter {
  scroll-margin-top: 104px;
  transform-origin: 50% 0;
}

.report-chapter.is-entering {
  animation: chapter-content-reveal 720ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.report-chapter.is-exiting {
  animation: chapter-content-exit 240ms ease-in both;
}

.report-index a.is-launching {
  color: var(--mint);
  box-shadow:
    inset 0 -2px var(--mint),
    0 0 24px rgba(168, 216, 195, 0.12);
}

.report-chapter.is-entering .spectrum-fill {
  animation: spectrum-grow 820ms 180ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.report-chapter.is-entering .life-card,
.report-chapter.is-entering .growth-action,
.report-chapter.is-entering .compat-panel,
.report-chapter.is-entering .insight-card,
.report-chapter.is-entering .detail-section {
  animation: chapter-item-rise 560ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.report-chapter.is-entering .life-card:nth-child(2),
.report-chapter.is-entering .growth-action:nth-child(2) {
  animation-delay: 70ms;
}

.report-chapter.is-entering .life-card:nth-child(3),
.report-chapter.is-entering .growth-action:nth-child(3) {
  animation-delay: 140ms;
}

.report-chapter.is-entering .life-card:nth-child(4) {
  animation-delay: 210ms;
}

.report-chapter.is-entering .life-card:nth-child(5) {
  animation-delay: 280ms;
}

.report-chapter.is-entering .life-card:nth-child(6) {
  animation-delay: 350ms;
}

.result-summary h2 {
  max-width: 580px;
  font-size: clamp(54px, 6vw, 82px);
}

.result-lead {
  max-width: 570px;
  margin: 28px 0 0;
  color: #c9ccc6;
  font-size: 16px;
  line-height: 1.9;
}

.identity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.identity-tags span {
  padding: 8px 11px;
  color: #d9dcd6;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 11px;
}

.identity-tags span:first-child {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--mint);
  font-weight: 700;
}

.confidence-note {
  margin: 16px 0 0;
  color: #858984;
  font-size: 10px;
}

.chart-visual {
  position: relative;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  justify-self: end;
  background:
    radial-gradient(circle at 50% 50%, rgba(242, 102, 79, 0.14), transparent 42%),
    url("assets/cosmic-map.png") center / cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  overflow: hidden;
}

.chart-visual::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(255, 255, 255, 0.23);
  border-radius: 50%;
}

.result-character {
  position: absolute;
  z-index: 4;
  inset: 4%;
  pointer-events: none;
}

.result-character #resultMbtiAvatar {
  position: absolute;
  left: 5%;
  bottom: 1%;
  width: 82%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
  animation: character-float 4.8s ease-in-out infinite;
}

.result-character #resultZodiacCompanion {
  position: absolute;
  z-index: 2;
  top: 8%;
  right: 2%;
  width: 31%;
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.3))
    drop-shadow(0 0 24px rgba(214, 181, 111, 0.28));
  animation: companion-orbit 5.6s ease-in-out infinite;
}

.chart-orbit {
  position: absolute;
  inset: 19%;
  border: 1px solid rgba(168, 216, 195, 0.45);
  border-radius: 50%;
}

.orbit-two {
  inset: 34%;
  border-color: rgba(214, 181, 111, 0.52);
}

.chart-core {
  position: absolute;
  z-index: 5;
  inset: auto auto 10% 12%;
  width: 78px;
  height: 78px;
  display: grid;
  place-content: center;
  color: var(--ink);
  background: var(--coral);
  border-radius: 50%;
  transform: none;
  text-align: center;
}

.chart-core span {
  font-size: 31px;
  line-height: 1;
}

.chart-core small {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
}

.planet {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink);
  background: var(--mint);
  border-radius: 50%;
  font-size: 18px;
}

.planet-one {
  top: 16%;
  left: 47%;
}

.planet-two {
  right: 11%;
  bottom: 28%;
  background: var(--gold);
}

.planet-three {
  left: 15%;
  bottom: 20%;
  color: var(--white);
  background: var(--ink-soft);
  border: 1px solid var(--mint);
}

@keyframes character-float {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-7px) rotate(0.4deg); }
}

@keyframes companion-orbit {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  50% { transform: translateY(-9px) rotate(3deg) scale(1.035); }
}

.insight-grid {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.insight-card {
  min-height: 390px;
  padding: 48px 46px;
}

.insight-card:first-child {
  border-right: 1px solid var(--line);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #aeb1ac;
  font-size: 11px;
}

.accuracy {
  padding: 5px 8px;
  color: var(--ink);
  font-weight: 700;
}

.accuracy-high {
  background: var(--mint);
}

.accuracy-medium {
  background: var(--gold);
}

.insight-card h3 {
  max-width: 460px;
  margin: 52px 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.15;
}

.insight-card > p {
  max-width: 500px;
  margin: 0;
  color: #bfc2bc;
  font-size: 14px;
  line-height: 1.85;
}

.feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 36px;
}

.feedback span {
  margin-right: 8px;
  color: #747873;
  font-size: 10px;
}

.feedback button {
  min-height: 30px;
  padding: 0 10px;
  color: #b8bbb5;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 10px;
}

.feedback button.active {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--mint);
}

.insight-card.calibrated-strong,
.insight-card.calibrated-partial,
.insight-card.calibrated-low {
  position: relative;
  isolation: isolate;
}

.insight-card.calibrated-strong::after,
.insight-card.calibrated-partial::after,
.insight-card.calibrated-low::after {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: 26px;
  opacity: 0.6;
  pointer-events: none;
}

.insight-card.calibrated-strong::after {
  border-color: rgba(168, 216, 195, 0.38);
  box-shadow: 0 0 52px rgba(168, 216, 195, 0.14);
}

.insight-card.calibrated-partial::after {
  border-color: rgba(214, 181, 111, 0.36);
  box-shadow: 0 0 48px rgba(214, 181, 111, 0.13);
}

.insight-card.calibrated-low::after {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 36px rgba(255, 255, 255, 0.035);
}

.calibration-panel {
  max-width: 540px;
  margin-top: 20px;
  padding: 17px 18px 18px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  color: rgba(251, 250, 246, 0.82);
  background:
    radial-gradient(circle at 18% 18%, rgba(168, 216, 195, 0.16), transparent 36%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.16);
  animation: calibration-rise 480ms ease both;
}

.calibration-stars {
  position: relative;
  min-height: 70px;
}

.calibration-stars i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(168, 216, 195, 0.78);
}

.calibration-stars i:nth-child(1) {
  top: 2px;
  left: 4px;
}

.calibration-stars i:nth-child(2) {
  top: 28px;
  left: 14px;
  width: 5px;
  height: 5px;
  background: var(--gold);
}

.calibration-stars i:nth-child(3) {
  top: 54px;
  left: 2px;
  width: 4px;
  height: 4px;
  background: var(--coral);
}

.calibration-panel span {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
}

.calibration-panel strong {
  display: block;
  color: var(--white);
  font-size: 15px;
  line-height: 1.5;
}

.calibration-panel p {
  margin: 8px 0 0;
  color: #bfc2bc;
  font-size: 13px;
  line-height: 1.8;
}

.calibration-options {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calibration-option {
  min-height: 32px;
  padding: 0 12px;
  color: #d9ddd7;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 12px;
}

.calibration-option.active {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: 0 0 24px rgba(168, 216, 195, 0.18);
}

.calibration-response {
  padding-top: 10px;
}

@keyframes calibration-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.detail-section {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  padding: 100px 0;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 80px;
}

.detail-intro h2 {
  max-width: 430px;
  font-size: clamp(46px, 5vw, 68px);
}

.detail-list details {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.detail-list details:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.detail-list summary {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
}

.detail-list summary::-webkit-details-marker {
  display: none;
}

.detail-list summary b {
  margin-right: 28px;
  color: var(--coral);
  font-family: var(--font-serif);
  font-weight: 500;
}

.summary-icon {
  color: var(--mint);
  font-size: 20px;
  transition: transform 180ms ease;
}

details[open] .summary-icon {
  transform: rotate(45deg);
}

.detail-content {
  padding: 0 58px 30px 50px;
  color: #b9bcb6;
  font-size: 13px;
  line-height: 1.9;
}

.detail-content p {
  margin: 0;
}

.detail-content strong {
  color: var(--white);
}

.reflection {
  color: var(--mint);
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.45;
}

.gender-zodiac-card {
  display: grid;
  gap: 18px;
}

.gender-zodiac-card > span {
  color: var(--coral);
  font-size: var(--report-caption);
  font-weight: 700;
}

.gender-zodiac-card h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: clamp(26px, 2vw, 38px);
  font-weight: 500;
  line-height: 1.18;
}

.gender-zodiac-card > div {
  display: grid;
  gap: 14px;
}

.gender-zodiac-card p {
  margin: 0;
}

.gender-zodiac-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--mint);
  font-size: var(--report-caption);
}

.gender-zodiac-card small {
  color: #787c77;
  font-size: var(--report-caption);
  line-height: 1.6;
}

.continue-report {
  width: min(1240px, calc(100% - 64px));
  min-height: 156px;
  margin: 0 auto 100px;
  padding: 30px 38px;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  gap: 24px;
  align-items: center;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(242, 102, 79, 0.12), rgba(168, 216, 195, 0.06)),
    rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(168, 216, 195, 0.26);
  text-decoration: none;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.continue-report:hover {
  background:
    linear-gradient(90deg, rgba(242, 102, 79, 0.18), rgba(168, 216, 195, 0.1)),
    rgba(255, 255, 255, 0.035);
  border-color: rgba(168, 216, 195, 0.52);
  transform: translateY(-2px);
}

.continue-report.is-launching {
  border-color: rgba(168, 216, 195, 0.82);
  box-shadow:
    0 0 0 1px rgba(168, 216, 195, 0.18),
    0 0 54px rgba(168, 216, 195, 0.2);
  transform: translateY(-2px) scale(0.995);
}

.continue-number {
  color: var(--coral);
  font-family: var(--font-serif);
  font-size: 23px;
}

.continue-copy {
  display: grid;
}

.continue-copy small {
  margin-bottom: 7px;
  color: #898d88;
  font-size: 9px;
}

.continue-copy strong {
  font-family: var(--font-serif);
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 500;
}

.continue-copy em {
  margin-top: 9px;
  color: #aeb1ac;
  font-size: 10px;
  font-style: normal;
}

.continue-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--ink);
  background: var(--mint);
  border-radius: 50%;
  font-size: 17px;
  box-shadow: 0 0 28px rgba(168, 216, 195, 0.18);
}

.profile-section,
.life-section,
.compatibility-section,
.growth-section,
.visual-lab-section {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
}

.profile-section {
  padding: 100px 0;
  border-top: 1px solid var(--line);
}

.profile-heading {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 0.7fr);
  gap: 80px;
  align-items: end;
  margin-bottom: 66px;
}

.profile-heading h2,
.life-heading h2,
.growth-copy h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 500;
  line-height: 1;
}

.profile-heading h2:focus,
.life-heading h2:focus,
.compatibility-heading h2:focus,
.growth-copy h2:focus,
.detail-intro h2:focus,
.result-summary h2:focus {
  outline: none;
}

.profile-heading > p {
  max-width: 460px;
  margin: 0;
  color: #929690;
  font-size: 11px;
  line-height: 1.8;
}

.spectrum-list {
  display: grid;
  gap: 24px;
}

.spectrum-row {
  display: grid;
  grid-template-columns: 126px 1fr 104px;
  gap: 24px;
  align-items: center;
}

.spectrum-name {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  padding-top: 4px;
  color: #d6d8d3;
  font-size: 12px;
}

.spectrum-summary {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 3px;
  color: #c4c7c1;
  font-size: 10px;
  line-height: 1.7;
}

.spectrum-summary span {
  margin-right: 9px;
  color: var(--coral);
  font-size: 8px;
  font-weight: 700;
}

.spectrum-track {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  height: 18px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.2) 0 1px,
      transparent 1px 10%
    );
}

.spectrum-track::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.spectrum-fill {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 0;
  height: 2px;
  width: calc(var(--score) * 1%);
  background: linear-gradient(90deg, var(--coral), var(--mint));
  box-shadow: 0 0 16px rgba(168, 216, 195, 0.28);
  transform-origin: left;
}

.spectrum-marker {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: calc(var(--score) * 1%);
  width: 12px;
  height: 12px;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(168, 216, 195, 0.72);
  transform: translateX(-50%);
}

.spectrum-scale {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -14px;
  color: #666a65;
  font-size: 8px;
}

.spectrum-poles {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  justify-content: space-between;
  margin-top: -13px;
  color: #8c908b;
  font-size: 9px;
}

.results.is-revealing .spectrum-fill {
  animation: spectrum-grow 900ms 350ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.spectrum-value {
  grid-column: 3;
  grid-row: 1 / span 4;
  align-self: center;
  color: var(--mint);
  font-size: 9px;
  text-align: right;
}

.spectrum-value strong {
  display: block;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
}

.spectrum-value small {
  color: #70746f;
  font-size: 8px;
}

.life-section {
  padding: 100px 0;
  border-top: 1px solid var(--line);
}

.life-heading {
  max-width: 680px;
  margin-bottom: 64px;
}

.life-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.life-card {
  min-width: 0;
  padding: 44px 38px 46px;
}

.life-card + .life-card {
  border-left: 1px solid var(--line);
}

.life-card:nth-child(3n + 1) {
  border-left: 0;
}

.life-card:nth-child(n + 4) {
  border-top: 1px solid var(--line);
}

.life-card-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 46px;
  color: var(--ink);
  background: var(--mint);
  border-radius: 50%;
  font-size: 13px;
}

.life-card:nth-child(2) .life-card-icon {
  color: var(--white);
  background: transparent;
  border: 1px solid var(--gold);
}

.life-card:nth-child(3) .life-card-icon {
  background: var(--gold);
}

.life-card:nth-child(4) .life-card-icon {
  color: var(--white);
  background: transparent;
  border: 1px solid var(--coral);
}

.life-card:nth-child(5) .life-card-icon {
  background: var(--coral);
}

.life-card:nth-child(6) .life-card-icon {
  color: var(--white);
  background: transparent;
  border: 1px solid var(--mint);
}

.life-label {
  margin: 0 0 14px;
  color: #858984;
  font-size: 10px;
}

.life-card h3 {
  min-height: 72px;
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(25px, 2.5vw, 34px);
  font-weight: 500;
  line-height: 1.15;
}

.life-card > p:not(.life-label) {
  min-height: 132px;
  margin: 0;
  color: #b8bbb5;
  font-size: 12px;
  line-height: 1.85;
}

.keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
}

.keyword-list span {
  padding: 6px 8px;
  color: #c9ccc6;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 9px;
}

.signal-box {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.signal-box span {
  color: var(--coral);
  font-size: 9px;
}

.signal-box p {
  margin: 7px 0 0;
  color: #d8dad5;
  font-size: 11px;
  line-height: 1.7;
}

.compatibility-section {
  padding: 108px 0;
  border-top: 1px solid var(--line);
}

.compatibility-heading {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 0.65fr);
  gap: 80px;
  align-items: end;
  margin-bottom: 58px;
}

.compatibility-heading h2 {
  max-width: 720px;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 500;
  line-height: 1;
}

.compatibility-heading > p {
  margin: 0;
  color: #929690;
  font-size: 11px;
  line-height: 1.8;
}

.compat-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 540px;
  margin-bottom: 28px;
}

.compat-tab {
  min-height: 42px;
  color: #aeb1ac;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  font-size: 11px;
}

.compat-tab.active {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--mint);
  font-weight: 700;
  box-shadow: 0 0 24px rgba(168, 216, 195, 0.18);
}

.compat-panel {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  min-height: 450px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.compat-main {
  padding: 48px 48px 48px 0;
}

.compat-context {
  margin: 0 0 42px;
  color: var(--coral);
  font-size: 10px;
}

.compat-main h3 {
  max-width: 520px;
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-size: clamp(31px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.15;
}

.compat-main > p:not(.compat-context) {
  max-width: 540px;
  margin: 0;
  color: #b8bbb5;
  font-size: 12px;
  line-height: 1.9;
}

.compat-warning {
  max-width: 540px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.compat-warning span,
.compat-reference > span {
  color: var(--coral);
  font-size: 9px;
}

.compat-warning p {
  margin: 8px 0 0;
  color: #d1d3ce;
  font-size: 11px;
  line-height: 1.75;
}

.compat-references {
  display: grid;
  border-left: 1px solid var(--line);
}

.compat-reference {
  padding: 30px 38px;
}

.compat-reference + .compat-reference {
  border-top: 1px solid var(--line);
}

.compat-reference > p {
  max-width: 580px;
  margin: 10px 0 0;
  color: #d1d3ce;
  font-size: 12px;
  line-height: 1.75;
}

.compat-chips,
.chart-match-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.compat-chips span,
.chart-match-list span {
  padding: 7px 9px;
  color: #d8dad5;
  border: 1px solid rgba(255, 255, 255, 0.17);
  font-size: 10px;
}

.compat-chips span {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
}

.chart-match-list span::before {
  content: "✦";
  margin-right: 7px;
  color: var(--mint);
}

.compat-disclaimer {
  max-width: 780px;
  margin: 22px 0 0;
  color: #737772;
  font-size: 9px;
  line-height: 1.75;
}

.growth-section {
  padding: 108px 0;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
  border-top: 1px solid var(--line);
}

.growth-copy > p:last-child {
  max-width: 440px;
  margin: 28px 0 0;
  color: #aeb1ac;
  font-size: 12px;
  line-height: 1.9;
}

.visual-calibration-note {
  max-width: 520px;
  margin-top: 20px;
  padding: 14px 16px;
  color: #d8ddd5;
  background:
    linear-gradient(135deg, rgba(168, 216, 195, 0.12), rgba(242, 102, 79, 0.06)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 216, 195, 0.2);
  border-radius: 16px;
  font-size: 11px;
  line-height: 1.75;
}

.growth-action-stack {
  display: grid;
  gap: 34px;
}

.growth-calibration-block {
  padding: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(168, 216, 195, 0.14), transparent 44%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(168, 216, 195, 0.18);
  border-radius: 20px;
  box-shadow: 0 20px 62px rgba(0, 0, 0, 0.14);
}

.growth-calibration-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
  margin-bottom: 18px;
}

.growth-calibration-heading span {
  color: var(--coral);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.growth-calibration-heading h3 {
  margin: 0;
  color: var(--white);
  font-size: 16px;
}

.growth-calibration-actions {
  display: grid;
  gap: 14px;
}

.growth-actions {
  display: grid;
}

.growth-action {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 22px;
  padding: 25px 0;
  border-top: 1px solid var(--line);
}

.growth-action:last-child {
  border-bottom: 1px solid var(--line);
}

.calibration-growth-action {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 22px;
  padding: 18px 0;
}

.calibration-growth-action + .calibration-growth-action {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.calibration-growth-action .growth-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--mint);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
}

.calibration-growth-action h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 650;
}

.calibration-growth-action p {
  margin: 0;
  color: #d4d8d1;
  font-size: 12px;
  line-height: 1.8;
}

.calibration-growth-action small {
  display: block;
  margin-top: 12px;
  color: #8f948d;
  font-size: 9px;
  line-height: 1.7;
}

.growth-number {
  color: var(--coral);
  font-family: var(--font-serif);
  font-size: 17px;
}

.growth-action h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.growth-area {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--coral);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.growth-action p {
  margin: 0;
  color: #aeb1ac;
  font-size: 11px;
  line-height: 1.8;
}

.growth-action small {
  display: block;
  max-width: 620px;
  margin-top: 12px;
  color: #747873;
  font-size: 9px;
  line-height: 1.7;
}

.natal-chart-section {
  padding: 108px 0;
}

.natal-chart-heading {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 0.72fr);
  gap: 72px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}

.natal-chart-heading h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--report-section-title);
  font-weight: 500;
  line-height: 1.04;
}

.natal-chart-heading > p {
  margin: 0;
  color: #9ea29c;
  font-size: var(--report-support);
  line-height: 1.8;
}

.natal-synthesis {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 72px;
  padding: 58px 0;
  border-bottom: 1px solid var(--line);
}

.natal-synthesis > div:first-child > span,
.planetary-section-heading > span,
.cross-analysis > span,
.aspect-analysis > span,
.natal-direct-actions > span {
  color: var(--coral);
  font-size: var(--report-caption);
  font-weight: 700;
}

.natal-synthesis h3 {
  max-width: 680px;
  margin: 16px 0 20px;
  font-family: var(--font-serif);
  font-size: var(--report-card-title);
  font-weight: 500;
  line-height: 1.15;
}

.natal-synthesis p {
  max-width: 700px;
  margin: 0;
  color: #b8bbb5;
  font-size: var(--report-body);
  line-height: 1.9;
}

.element-balance {
  display: grid;
  align-content: center;
  gap: 18px;
}

.element-balance > div {
  display: grid;
  grid-template-columns: 48px 1fr 42px;
  gap: 14px;
  align-items: center;
  color: #8f938d;
  font-size: var(--report-caption);
}

.element-balance > div.dominant {
  color: var(--white);
}

.element-balance i {
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.element-balance i b {
  display: block;
  width: var(--element-score);
  height: 100%;
  background: var(--mint);
  box-shadow: 0 0 14px rgba(168, 216, 195, 0.45);
}

.element-balance strong {
  text-align: right;
  font-size: inherit;
}

.angle-section {
  padding: 58px 0 64px;
  border-bottom: 1px solid var(--line);
}

.angle-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 26px;
}

.angle-section-heading > span,
.house-cusp-section > span {
  color: var(--coral);
  font-size: var(--report-caption);
  font-weight: 700;
}

.angle-section-heading p {
  max-width: 560px;
  margin: 0;
  color: #858984;
  font-size: var(--report-caption);
  line-height: 1.8;
}

.angle-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.angle-card {
  min-height: 220px;
  padding: 28px 24px;
}

.angle-card + .angle-card {
  border-left: 1px solid var(--line);
}

.angle-card > span {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--ink);
  background: var(--mint);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}

.angle-card p {
  margin: 22px 0 8px;
  color: var(--coral);
  font-size: var(--report-caption);
}

.angle-card h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 1.5vw, 30px);
}

.angle-card h3 small {
  color: #7d817c;
  font-size: 0.48em;
  font-weight: 500;
}

.angle-card em {
  display: block;
  color: #afb2ad;
  font-size: var(--report-support);
  font-style: normal;
  line-height: 1.75;
}

.house-cusp-section {
  padding-top: 34px;
}

.house-cusp-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 16px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.house-cusp-list article {
  min-height: 204px;
  padding: 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.house-cusp-list b {
  display: block;
  color: var(--coral);
  font-family: var(--font-serif);
  font-weight: 500;
}

.house-cusp-list span {
  display: block;
  margin-top: 14px;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

.house-cusp-list small {
  color: #777b75;
  font-size: 0.82em;
}

.house-cusp-list p {
  margin: 8px 0 0;
  color: #92968f;
  font-size: var(--report-caption);
  line-height: 1.6;
}

.house-cusp-list em {
  display: block;
  margin-top: 14px;
  color: #bdc4bd;
  font-size: var(--report-support);
  font-style: normal;
  line-height: 1.75;
}

.planetary-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}

.planetary-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 26px;
}

.planetary-section-heading p {
  margin: 0;
  color: #858984;
  font-size: var(--report-caption);
}

.planetary-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}

.planetary-row {
  position: relative;
  min-height: 150px;
  padding: 28px 34px 28px 0;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 18px;
  align-items: start;
  border-bottom: 1px solid var(--line);
}

.planetary-row:nth-child(even) {
  padding-right: 0;
  padding-left: 34px;
  border-left: 1px solid var(--line);
}

.planetary-symbol {
  color: var(--mint);
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1;
}

.planetary-row p {
  margin: 0 0 8px;
  color: var(--coral);
  font-size: var(--report-caption);
}

.planetary-row h3 {
  margin: 0 0 10px;
  font-size: clamp(20px, 1.25vw, 27px);
  font-weight: 600;
}

.planetary-row h3 small {
  color: #7d817c;
  font-size: 0.48em;
  font-weight: 500;
}

.planetary-row div > span {
  display: block;
  color: #afb2ad;
  font-size: var(--report-support);
  line-height: 1.75;
}

.planetary-row > em {
  padding: 5px 7px;
  color: var(--gold);
  border: 1px solid rgba(214, 181, 111, 0.35);
  font-size: 9px;
  font-style: normal;
}

.natal-analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.cross-analysis,
.aspect-analysis {
  padding: 64px 48px 64px 0;
}

.aspect-analysis {
  padding-right: 0;
  padding-left: 48px;
  border-left: 1px solid var(--line);
}

.cross-analysis h3,
.aspect-analysis h3 {
  margin: 12px 0 30px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 2vw, 38px);
  font-weight: 500;
}

.cross-analysis article,
.aspect-analysis article {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.cross-analysis article:last-child,
.aspect-analysis article:last-child {
  border-bottom: 1px solid var(--line);
}

.cross-analysis article > span,
.aspect-analysis article > span {
  color: var(--white);
  font-size: var(--report-support);
  font-weight: 600;
}

.cross-analysis article p,
.aspect-analysis article p,
.aspect-analysis > div > p {
  margin: 8px 0 0;
  color: #9fa39d;
  font-size: var(--report-support);
  line-height: 1.8;
}

.natal-direct-actions {
  padding: 64px 0 36px;
}

.natal-direct-actions > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.natal-direct-actions article {
  min-height: 180px;
  padding: 28px;
}

.natal-direct-actions article + article {
  border-left: 1px solid var(--line);
}

.natal-direct-actions b {
  color: var(--coral);
  font-family: var(--font-serif);
  font-weight: 500;
}

.natal-direct-actions p {
  margin: 22px 0 0;
  color: #c1c4be;
  font-size: var(--report-body);
  line-height: 1.8;
}

.natal-limit-note {
  max-width: 840px;
  margin: 0;
  color: #737772;
  font-size: var(--report-caption);
  line-height: 1.75;
}

.visual-lab-section {
  padding: 108px 0;
  border-top: 1px solid var(--line);
}

.visual-lab-heading {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 0.68fr);
  gap: 72px;
  align-items: end;
  margin-bottom: 48px;
}

.visual-lab-heading h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(42px, 5vw, 66px);
  font-weight: 500;
  line-height: 1;
}

.visual-lab-heading h2:focus {
  outline: none;
}

.visual-lab-heading > p,
.visual-lab-copy > p:first-child {
  margin: 0;
  color: #969a95;
  font-size: var(--report-support);
  line-height: 1.8;
}

.visual-lab-copy {
  display: grid;
  gap: 16px;
}

.visual-lab-copy > .visual-calibration-note {
  margin: 0;
  color: #d8ddd5;
  font-size: 11px;
  line-height: 1.75;
}

.visual-generator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.visual-generator {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  background: rgba(251, 250, 246, 0.025);
}

.visual-generator-wide {
  grid-column: 1 / -1;
}

.visual-generator-copy span {
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
}

.visual-generator-copy h3 {
  margin: 12px 0 8px;
  font-size: 18px;
}

.visual-generator-copy p {
  max-width: 560px;
  margin: 0;
  color: #aeb1ac;
  font-size: var(--report-support);
  line-height: 1.8;
}

.visual-generate-button {
  justify-self: start;
  min-height: 42px;
  padding: 0 18px;
  color: var(--ink);
  background: var(--mint);
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(168, 216, 195, 0.14);
}

.visual-generate-button:disabled {
  cursor: wait;
  opacity: 0.66;
}

.visual-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(251, 250, 246, 0.12);
  background:
    radial-gradient(circle at 50% 28%, rgba(168, 216, 195, 0.14), transparent 30%),
    rgba(10, 12, 12, 0.55);
}

.visual-preview-card {
  aspect-ratio: 3 / 4;
}

.visual-preview-comic {
  aspect-ratio: 16 / 9;
  min-height: 440px;
}

.visual-preview p {
  margin: 0;
  color: #787c77;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.visual-preview.is-loading p {
  color: var(--mint);
  animation: transition-copy 1.2s ease-in-out infinite alternate;
}

.visual-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual-preview a {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 9px 13px;
  color: var(--ink);
  background: rgba(168, 216, 195, 0.92);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.prototype-note {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  padding: 28px 0 54px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  color: #787c77;
  border-top: 1px solid var(--line);
  font-size: 10px;
  line-height: 1.7;
}

.prototype-note strong {
  color: #aeb1ac;
}

.prototype-note p {
  margin: 0;
}

.cosmic-transition {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 46%, rgba(214, 181, 111, 0.12), transparent 22%),
    radial-gradient(circle at 48% 50%, rgba(168, 216, 195, 0.14), transparent 30%),
    radial-gradient(circle at 58% 56%, rgba(242, 102, 79, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(8, 10, 10, 0.98), rgba(11, 15, 14, 0.96));
  opacity: 0;
  pointer-events: none;
}

.cosmic-transition::before,
.cosmic-transition::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.cosmic-transition::before {
  inset: 9%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from -8deg,
      rgba(251, 250, 246, 0.38) 0deg 0.6deg,
      transparent 0.6deg 8deg
    ),
    conic-gradient(
      from 126deg,
      transparent 0deg 38deg,
      rgba(168, 216, 195, 0.18) 58deg,
      transparent 78deg 148deg,
      rgba(214, 181, 111, 0.18) 172deg,
      transparent 196deg 268deg,
      rgba(242, 102, 79, 0.14) 292deg,
      transparent 328deg
    );
  -webkit-mask: radial-gradient(circle, transparent 47%, #000 48% 49%, transparent 50% 59%, #000 60% 61%, transparent 62%);
  mask: radial-gradient(circle, transparent 47%, #000 48% 49%, transparent 50% 59%, #000 60% 61%, transparent 62%);
  opacity: 0.44;
  animation: orbit-wait-spin 26s linear infinite;
}

.cosmic-transition::after {
  inset: 0;
  background:
    linear-gradient(32deg, transparent 49.4%, rgba(168, 216, 195, 0.1) 49.8%, transparent 50.2%),
    linear-gradient(148deg, transparent 49.4%, rgba(214, 181, 111, 0.1) 49.8%, transparent 50.2%),
    radial-gradient(circle at 31% 32%, rgba(168, 216, 195, 0.58) 0 2px, transparent 3px),
    radial-gradient(circle at 69% 30%, rgba(214, 181, 111, 0.58) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 68%, rgba(251, 250, 246, 0.5) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 68% 72%, rgba(242, 102, 79, 0.44) 0 2px, transparent 3px);
  opacity: 0.32;
  animation: cosmic-constellation-drift 6.8s ease-in-out infinite alternate;
}

.report-transition {
  position: fixed;
  z-index: 110;
  inset: 0;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 50%, rgba(168, 216, 195, 0.16), transparent 21%),
    rgba(8, 10, 10, 0.92);
  opacity: 0;
  pointer-events: none;
}

.report-transition.is-active {
  opacity: 1;
  animation: report-veil-in 220ms ease-out both;
}

.report-transition.is-releasing {
  animation: report-veil-out 480ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.report-transition > p {
  position: absolute;
  z-index: 4;
  top: calc(50% + 92px);
  left: 50%;
  margin: 0;
  color: rgba(251, 250, 246, 0.75);
  font-size: 10px;
  letter-spacing: 0.14em;
  transform: translateX(-50%);
  white-space: nowrap;
  animation: report-copy-arrive 700ms 100ms ease-out both;
}

.daily-fortune-overlay {
  position: fixed;
  z-index: 95;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 50%, rgba(168, 216, 195, 0.12), transparent 25%),
    rgba(10, 12, 12, 0.94);
  overflow: auto;
}

.daily-fortune-overlay[hidden] {
  display: none !important;
}

.daily-fortune-shell {
  width: min(1040px, 100%);
}

.daily-fortune-prompt {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 34px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(251, 250, 246, 0.96), rgba(242, 240, 233, 0.9)),
    radial-gradient(circle at 20% 0%, rgba(168, 216, 195, 0.22), transparent 34%);
  border: 1px solid rgba(251, 250, 246, 0.44);
  border-radius: 24px;
  box-shadow: 0 32px 120px rgba(0, 0, 0, 0.36);
  animation: daily-prompt-enter 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.daily-fortune-prompt .eyebrow {
  margin-bottom: 10px;
  color: var(--coral-dark);
}

.daily-fortune-prompt h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
}

.daily-fortune-prompt p:not(.eyebrow) {
  margin: 14px 0 0;
  color: #5b615d;
  line-height: 1.7;
}

.daily-fortune-choice-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.daily-fortune-choice-actions button,
.daily-fortune-result-actions button {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(22, 24, 23, 0.12);
  font-weight: 800;
  letter-spacing: 0;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.daily-fortune-choice-actions button:hover,
.daily-fortune-result-actions button:hover {
  transform: translateY(-1px);
}

.daily-fortune-yes,
.daily-continue-button {
  color: var(--ink);
  background: var(--mint);
  box-shadow: 0 12px 34px rgba(168, 216, 195, 0.22);
}

.daily-fortune-no,
.daily-save-button {
  color: var(--white);
  background: var(--ink);
  border-color: rgba(255, 255, 255, 0.16);
}

.daily-fortune-reading {
  display: grid;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.daily-fortune-reading[hidden] {
  display: none !important;
}

.daily-fortune-stage {
  --daily-ready-orbit-x: 24%;
  position: relative;
  min-height: 640px;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(251, 250, 246, 0.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 48%, rgba(168, 216, 195, 0.14), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(214, 181, 111, 0.08), transparent 48%),
    linear-gradient(150deg, #060808, #111817 58%, #070909);
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.32);
  perspective: 1200px;
  isolation: isolate;
}

.daily-fortune-stage::before,
.daily-fortune-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.daily-fortune-stage::before {
  z-index: 0;
  inset: clamp(42px, 8vw, 86px);
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from -16deg,
      rgba(251, 250, 246, 0.36) 0deg 0.7deg,
      transparent 0.7deg 7deg
    ),
    conic-gradient(
      from 128deg,
      transparent 0deg 28deg,
      rgba(168, 216, 195, 0.18) 48deg,
      transparent 70deg 138deg,
      rgba(214, 181, 111, 0.2) 164deg,
      transparent 190deg 262deg,
      rgba(242, 102, 79, 0.16) 286deg,
      transparent 320deg
    );
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57% 58%, transparent 59% 63%, #000 64% 65%, transparent 66%);
  mask: radial-gradient(circle, transparent 56%, #000 57% 58%, transparent 59% 63%, #000 64% 65%, transparent 66%);
  opacity: 0.52;
  animation: daily-slow-rotate 42s linear infinite;
}

.daily-fortune-stage::after {
  z-index: 1;
  inset: 18%;
  background:
    linear-gradient(28deg, transparent 48%, rgba(168, 216, 195, 0.14) 49%, transparent 50%),
    linear-gradient(142deg, transparent 48%, rgba(214, 181, 111, 0.12) 49%, transparent 50%),
    radial-gradient(circle at 32% 34%, rgba(168, 216, 195, 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 28%, rgba(214, 181, 111, 0.58) 0 2px, transparent 3px),
    radial-gradient(circle at 36% 68%, rgba(251, 250, 246, 0.5) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 66% 76%, rgba(214, 181, 111, 0.5) 0 2px, transparent 3px);
  opacity: 0.34;
  filter: drop-shadow(0 0 14px rgba(168, 216, 195, 0.28));
  animation: daily-constellation-float 7.4s ease-in-out infinite alternate;
}

.daily-fortune-reading.is-ready .daily-fortune-stage {
  min-height: clamp(540px, 62vh, 680px);
  grid-template-columns: minmax(260px, 0.88fr) minmax(360px, 1.12fr);
  column-gap: clamp(26px, 4.2vw, 58px);
  align-items: center;
  justify-items: center;
  padding: clamp(28px, 4vw, 50px);
}

.daily-fortune-reading.is-ready .daily-fortune-stage::before,
.daily-fortune-reading.is-ready .daily-fortune-stage::after {
  opacity: 0.22;
}

.daily-fortune-reading.is-ready .daily-aura {
  left: var(--daily-ready-orbit-x);
  top: 50%;
  width: min(46vw, 480px);
  translate: -50% -50%;
}

.daily-fortune-reading.is-ready .daily-glyph-system {
  left: var(--daily-ready-orbit-x);
  top: 50%;
  width: min(42vw, 430px);
  translate: -50% -50%;
}

.daily-deep-stars,
.daily-near-stars,
.daily-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.daily-deep-stars {
  inset: -18%;
  opacity: 0.58;
  background-image:
    radial-gradient(circle, rgba(251, 250, 246, 0.82) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(168, 216, 195, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(214, 181, 111, 0.64) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(242, 102, 79, 0.38) 0 1px, transparent 1.5px);
  background-size: 96px 114px, 146px 168px, 220px 244px, 284px 318px;
  animation: daily-starfield-drift 12s linear infinite;
}

.daily-near-stars {
  inset: 10%;
  filter: drop-shadow(0 0 8px rgba(251, 250, 246, 0.72));
  animation: daily-near-field-rotate 28s linear infinite;
}

.daily-near-stars i,
.daily-sparkles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(251, 250, 246, 0.9);
  box-shadow:
    0 0 10px rgba(251, 250, 246, 0.72),
    0 0 22px rgba(168, 216, 195, 0.42);
  opacity: var(--o);
  animation: daily-twinkle var(--d) ease-in-out infinite;
  animation-delay: var(--delay);
}

.daily-sparkles {
  z-index: 5;
}

.daily-sparkles i {
  background: var(--gold);
  box-shadow:
    0 0 10px rgba(214, 181, 111, 0.82),
    0 0 26px rgba(214, 181, 111, 0.34);
}

.daily-meteor {
  position: absolute;
  z-index: 2;
  left: -28%;
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 250, 246, 0.95));
  filter: drop-shadow(0 0 9px rgba(168, 216, 195, 0.88));
  transform: rotate(-18deg);
  opacity: 0;
  animation: daily-meteor-pass 5.4s cubic-bezier(0.18, 0.72, 0.22, 1) infinite;
}

.daily-meteor-one {
  top: 24%;
  animation-delay: 0.2s;
}

.daily-meteor-two {
  top: 70%;
  width: 160px;
  animation-delay: 2.7s;
  animation-duration: 6.1s;
}

.daily-aura {
  position: absolute;
  z-index: 1;
  width: min(78vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 250, 246, 0.1), transparent 18%),
    radial-gradient(circle, rgba(168, 216, 195, 0.18), transparent 38%),
    conic-gradient(from 0deg, transparent, rgba(168, 216, 195, 0.28), transparent 18%, rgba(214, 181, 111, 0.3), transparent 42%, rgba(242, 102, 79, 0.22), transparent 70%, rgba(168, 216, 195, 0.24), transparent);
  filter: blur(14px);
  opacity: 0.9;
  animation: daily-aura-breathe 3.2s ease-in-out infinite alternate, daily-slow-rotate 13s linear infinite;
}

.daily-glyph-system {
  position: absolute;
  z-index: 2;
  width: min(72vw, 460px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.daily-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.daily-ring-outer {
  inset: 0;
  border: 1px solid rgba(214, 181, 111, 0.42);
  box-shadow:
    0 0 60px rgba(214, 181, 111, 0.16),
    inset 0 0 38px rgba(214, 181, 111, 0.1);
  animation: daily-slow-rotate 18s linear infinite;
}

.daily-ring-outer::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(251, 250, 246, 0.66) 0deg 0.8deg,
      transparent 0.8deg 8deg
    );
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67% 68%, transparent 69%);
  mask: radial-gradient(circle, transparent 66%, #000 67% 68%, transparent 69%);
  opacity: 0.44;
}

.daily-ring-outer::after {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  border: 1px solid rgba(251, 250, 246, 0.08);
  background:
    conic-gradient(
      from 90deg,
      transparent 0 18deg,
      rgba(168, 216, 195, 0.2) 20deg 24deg,
      transparent 26deg 86deg,
      rgba(214, 181, 111, 0.18) 90deg 94deg,
      transparent 96deg 176deg,
      rgba(242, 102, 79, 0.16) 180deg 184deg,
      transparent 186deg 266deg,
      rgba(168, 216, 195, 0.18) 270deg 274deg,
      transparent 276deg
    );
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65% 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 64%, #000 65% 66%, transparent 67%);
  opacity: 0.92;
}

.daily-ring-middle {
  inset: 48px;
  border: 1px dashed rgba(168, 216, 195, 0.38);
  animation: daily-counter-rotate 11s linear infinite;
}

.daily-ring-middle::before,
.daily-ring-middle::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(168, 216, 195, 0.86);
  border-right-color: rgba(214, 181, 111, 0.46);
  filter: drop-shadow(0 0 10px rgba(168, 216, 195, 0.46));
  animation: daily-slow-rotate 4.4s linear infinite;
}

.daily-ring-middle::after {
  inset: 16px;
  border-top-color: rgba(242, 102, 79, 0.62);
  border-right-color: rgba(251, 250, 246, 0.28);
  animation-duration: 5.8s;
  animation-direction: reverse;
}

.daily-ring-inner {
  inset: 102px;
  background:
    radial-gradient(circle, rgba(251, 250, 246, 0.18), rgba(168, 216, 195, 0.08) 44%, transparent 70%);
  border: 1px solid rgba(251, 250, 246, 0.16);
  box-shadow: inset 0 0 58px rgba(168, 216, 195, 0.14);
  animation: daily-inner-pulse 1.9s ease-in-out infinite;
}

.daily-glyphs {
  position: absolute;
  inset: 0;
  animation: daily-counter-rotate 24s linear infinite;
}

.daily-glyphs span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin: -17px;
  color: rgba(251, 250, 246, 0.84);
  background: rgba(251, 250, 246, 0.06);
  border: 1px solid rgba(251, 250, 246, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(168, 216, 195, 0.12);
  font-size: 10px;
  font-weight: 900;
  transform: rotate(var(--a)) translateY(-222px) rotate(calc(var(--a) * -1));
}

.daily-glyphs span:nth-child(1) { --a: 0deg; }
.daily-glyphs span:nth-child(2) { --a: 45deg; }
.daily-glyphs span:nth-child(3) { --a: 90deg; }
.daily-glyphs span:nth-child(4) { --a: 135deg; }
.daily-glyphs span:nth-child(5) { --a: 180deg; }
.daily-glyphs span:nth-child(6) { --a: 225deg; }
.daily-glyphs span:nth-child(7) { --a: 270deg; }
.daily-glyphs span:nth-child(8) { --a: 315deg; }

.daily-tarot-card {
  position: relative;
  z-index: 4;
  width: 178px;
  height: 266px;
  transform-style: preserve-3d;
  transition: transform 780ms cubic-bezier(0.16, 1, 0.3, 1), width 260ms ease, height 260ms ease;
  will-change: transform;
  animation: daily-card-wait 2.4s ease-in-out infinite;
}

.daily-fortune-reading.is-ready .daily-tarot-card {
  grid-column: 1;
  justify-self: center;
  width: 276px;
  height: 370px;
  transform: none;
  animation: daily-card-pop-to-left 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.daily-tarot-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(251, 250, 246, 0.26);
  border-radius: 20px;
  backface-visibility: hidden;
  transition:
    opacity 420ms ease,
    visibility 420ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(214, 181, 111, 0.08);
}

.daily-tarot-back {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg);
  color: rgba(251, 250, 246, 0.92);
  background:
    linear-gradient(180deg, rgba(251, 250, 246, 0.1), transparent 30%),
    radial-gradient(circle at 50% 42%, rgba(214, 181, 111, 0.22), transparent 28%),
    linear-gradient(158deg, #111514, #283128 55%, #151313);
}

.daily-fortune-reading.is-ready .daily-tarot-back {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: rotateY(92deg);
}

.daily-tarot-back::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(214, 181, 111, 0.42);
  border-radius: 14px;
}

.daily-tarot-back::after {
  content: "";
  position: absolute;
  inset: 25px;
  border: 1px solid rgba(168, 216, 195, 0.28);
  border-radius: 50%;
  box-shadow:
    0 0 34px rgba(168, 216, 195, 0.18),
    inset 0 0 30px rgba(214, 181, 111, 0.12);
}

.daily-tarot-back span {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  color: var(--gold);
  border: 1px solid rgba(214, 181, 111, 0.58);
  border-radius: 50%;
  font-size: 28px;
  box-shadow: 0 0 34px rgba(214, 181, 111, 0.22);
}

.daily-tarot-front {
  z-index: 1;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(251, 250, 246, 0.12), transparent 30%),
    radial-gradient(circle at 50% 28%, rgba(242, 102, 79, 0.4), transparent 28%),
    radial-gradient(circle at 46% 58%, rgba(168, 216, 195, 0.22), transparent 34%),
    linear-gradient(158deg, #151313, #3b2420 56%, #111514);
  transform: rotateY(-92deg);
}

.daily-fortune-reading.is-ready .daily-tarot-front {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg);
}

.daily-tarot-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.daily-tarot-front img[hidden] {
  display: none;
}

.daily-fortune-text-card {
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px 22px;
  text-align: center;
}

.daily-fortune-text-card[hidden] {
  display: none !important;
}

.daily-fortune-text-card p {
  margin: 0;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.daily-fortune-text-card h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: 0;
}

.daily-fortune-text-card span {
  color: rgba(251, 250, 246, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.daily-fortune-copy {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: min(calc(50% + 240px), calc(100% - 58px));
  bottom: auto;
  width: min(420px, calc(100% - 48px));
  text-align: center;
  transform: translateX(-50%);
  color: var(--white);
  pointer-events: none;
  animation: daily-loading-copy-enter 360ms 120ms ease-out both;
}

.daily-fortune-reading.is-ready .daily-fortune-copy {
  position: relative;
  grid-column: 2;
  left: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  max-width: 560px;
  text-align: left;
  opacity: 0;
  transform: translateX(-96px);
  pointer-events: none;
  animation: none;
}

.daily-fortune-reading.is-copy-ready .daily-fortune-copy {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  animation: daily-copy-slide-right 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.daily-fortune-reading:not(.is-copy-ready) .daily-fortune-copy .daily-fortune-reveal-copy {
  max-height: 0;
  margin-top: 0 !important;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(10px);
}

.daily-fortune-reading.is-copy-ready .daily-fortune-copy .daily-fortune-reveal-copy {
  max-height: 900px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 420ms ease;
}

.daily-fortune-status {
  margin: 0 0 10px;
  color: var(--mint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.daily-fortune-copy h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0;
}

.daily-fortune-copy > p:not(.daily-fortune-status):not(.daily-fortune-note) {
  margin: 14px 0 0;
  color: rgba(251, 250, 246, 0.76);
  font-size: 15px;
  line-height: 1.75;
}

.daily-fortune-details {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.daily-fortune-details[hidden] {
  display: none !important;
}

.daily-fortune-details article {
  padding: 14px 15px;
  background: rgba(251, 250, 246, 0.07);
  border: 1px solid rgba(251, 250, 246, 0.12);
  border-radius: 16px;
}

.daily-fortune-details span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.daily-fortune-details p {
  margin: 0;
  color: rgba(251, 250, 246, 0.76);
  line-height: 1.62;
  font-size: 13px;
}

.daily-fortune-note {
  margin: 14px 0 0;
  color: rgba(251, 250, 246, 0.52);
  font-size: 12px;
  line-height: 1.55;
}

.daily-fortune-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.daily-fortune-result-actions[hidden] {
  display: none !important;
}

@keyframes daily-prompt-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes daily-loading-copy-enter {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes daily-copy-slide-right {
  from { opacity: 0; transform: translateX(-96px); filter: blur(1px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes daily-constellation-float {
  from { transform: translate3d(-8px, 4px, 0) rotate(-1deg); }
  to { transform: translate3d(10px, -8px, 0) rotate(1.4deg); }
}

@keyframes daily-starfield-drift {
  to { transform: translate3d(80px, 76px, 0); }
}

@keyframes daily-near-field-rotate {
  to { transform: rotate(360deg); }
}

@keyframes daily-twinkle {
  0%, 100% { opacity: var(--o); transform: scale(1); }
  50% { opacity: 0.22; transform: scale(0.62); }
}

@keyframes daily-meteor-pass {
  0%, 58% { opacity: 0; transform: translateX(0) rotate(-18deg); }
  64% { opacity: 1; }
  100% { opacity: 0; transform: translateX(150vw) rotate(-18deg); }
}

@keyframes daily-aura-breathe {
  from { opacity: 0.54; transform: scale(0.94); }
  to { opacity: 0.92; transform: scale(1.05); }
}

@keyframes daily-slow-rotate {
  to { transform: rotate(360deg); }
}

@keyframes daily-counter-rotate {
  to { transform: rotate(-360deg); }
}

@keyframes daily-inner-pulse {
  50% { opacity: 0.56; transform: scale(1.14); }
}

@keyframes daily-card-wait {
  0%, 100% { transform: translateY(8px) rotateZ(-1deg); }
  50% { transform: translateY(-10px) rotateZ(1deg); }
}

@keyframes daily-card-pop-to-left {
  0% { opacity: 0.92; transform: translate3d(92%, 0, 0) scale(1.16) rotateZ(0deg); filter: blur(0.8px); }
  46% { opacity: 1; transform: translate3d(92%, -4px, 0) scale(1.24) rotateZ(0deg); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotateZ(0deg); filter: blur(0); }
}

.report-star-layer {
  position: absolute;
  inset: 0;
}

.report-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(2px * var(--scale));
  height: calc(2px * var(--scale));
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(168, 216, 195, 0.9);
  animation: report-star-flight var(--duration) var(--delay) cubic-bezier(0.16, 0.68, 0.28, 1) both;
}

.report-star::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: calc(48px * var(--scale));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78));
  transform: translateY(-50%);
}

.report-streak {
  position: absolute;
  z-index: 2;
  left: -30vw;
  width: 42vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff);
  filter: drop-shadow(0 0 9px rgba(168, 216, 195, 0.9));
  transform: rotate(-13deg);
}

.report-streak-one {
  top: 34%;
  animation: report-streak-cross 720ms 80ms ease-in both;
}

.report-streak-two {
  top: 65%;
  opacity: 0.62;
  animation: report-streak-cross 660ms 240ms ease-in both;
}

.report-portal {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--mint);
  border-radius: 50%;
  box-shadow:
    0 0 30px rgba(168, 216, 195, 0.68),
    0 0 100px rgba(168, 216, 195, 0.22);
  transform: translate(-50%, -50%);
  animation: report-portal-pulse 900ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.report-portal span {
  position: absolute;
  inset: -28px;
  border: 1px solid rgba(168, 216, 195, 0.42);
  border-radius: 50%;
  animation: report-ring-expand 850ms ease-out both;
}

.report-portal span:nth-child(2) {
  inset: -60px;
  border-color: rgba(214, 181, 111, 0.3);
  animation-delay: 100ms;
}

.report-portal i {
  font-size: 23px;
  font-style: normal;
}

@keyframes report-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes report-veil-out {
  0% { opacity: 1; filter: brightness(1); }
  45% { opacity: 1; filter: brightness(2.1); }
  100% { opacity: 0; filter: brightness(1.4); }
}

@keyframes report-star-flight {
  from { opacity: 0; transform: translate3d(-18vw, 10vh, 0) scale(0.4); }
  18% { opacity: 1; }
  to { opacity: 0; transform: translate3d(38vw, -22vh, 0) scale(1.1); }
}

@keyframes report-streak-cross {
  from { opacity: 0; transform: translateX(0) rotate(-13deg); }
  22% { opacity: 1; }
  to { opacity: 0; transform: translateX(155vw) rotate(-13deg); }
}

@keyframes report-portal-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.16); }
}

@keyframes report-ring-expand {
  from { opacity: 0; transform: scale(0.45); }
  45% { opacity: 1; }
  to { opacity: 0; transform: scale(1.7); }
}

@keyframes report-copy-arrive {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.cosmic-transition.is-active {
  opacity: 1;
  pointer-events: auto;
  animation: cosmic-enter 420ms ease-out both;
}

.cosmic-transition.is-releasing {
  animation: cosmic-release 720ms cubic-bezier(0.35, 0, 0.2, 1) both;
}

.cosmic-transition.is-awaiting-ai .transition-orbit-outer {
  opacity: 0.82;
  transform: scale(0.9);
  animation: orbit-wait-spin 8s linear infinite;
}

.cosmic-transition.is-awaiting-ai .transition-orbit-inner {
  opacity: 0.88;
  transform: scale(1.05);
  animation: orbit-wait-spin-reverse 6.6s linear infinite;
}

.cosmic-transition.is-awaiting-ai .transition-core {
  animation: core-wait-breathe 1.8s ease-in-out infinite;
}

.cosmic-transition.is-awaiting-ai .transition-comet {
  animation: comet-cross 2.8s cubic-bezier(0.15, 0.65, 0.3, 1) infinite;
}

.cosmic-transition > p {
  position: absolute;
  z-index: 6;
  top: calc(50% + 110px);
  margin: 0;
  color: rgba(251, 250, 246, 0.72);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  animation: transition-copy 1.2s ease-in-out infinite alternate;
}

.cosmic-music-toggle {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: calc(50% + 292px);
  transform: translateX(-50%);
  min-height: 34px;
  padding: 0 14px;
  color: rgba(251, 250, 246, 0.78);
  background: rgba(251, 250, 246, 0.06);
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.cosmic-music-toggle[aria-pressed="false"] {
  color: #787c77;
  border-color: rgba(251, 250, 246, 0.08);
}

.transition-stars {
  position: absolute;
  inset: -12%;
  opacity: 0.75;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(168, 216, 195, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(214, 181, 111, 0.72) 0 1px, transparent 1.5px);
  background-position: 0 0, 42px 58px, 95px 20px;
  background-size: 120px 130px, 170px 180px, 220px 210px;
  animation: stars-drift 5s linear infinite;
}

.transition-orbit {
  position: absolute;
  z-index: 2;
  width: min(72vw, 570px);
  aspect-ratio: 1;
  border: 1px solid rgba(168, 216, 195, 0.34);
  border-radius: 50%;
  box-shadow:
    0 0 80px rgba(168, 216, 195, 0.08),
    inset 0 0 56px rgba(214, 181, 111, 0.05);
}

.transition-orbit::before,
.transition-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(168, 216, 195, 0.9);
}

.transition-orbit::before {
  top: 11%;
  left: 21%;
}

.transition-orbit::after {
  right: 8%;
  bottom: 28%;
  background: var(--gold);
  box-shadow: 0 0 20px rgba(214, 181, 111, 0.9);
}

.transition-orbit-outer {
  animation: orbit-gather 1.65s cubic-bezier(0.25, 0.7, 0.2, 1) both;
}

.transition-orbit-inner {
  width: min(44vw, 348px);
  border-color: rgba(242, 102, 79, 0.42);
  animation: orbit-gather-reverse 1.65s cubic-bezier(0.25, 0.7, 0.2, 1) both;
}

.transition-chart-glyphs {
  position: absolute;
  z-index: 3;
  width: min(72vw, 570px);
  aspect-ratio: 1;
  border-radius: 50%;
  animation: orbit-wait-spin-reverse 18s linear infinite;
}

.transition-chart-glyphs span {
  --a: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 24px;
  display: grid;
  place-items: center;
  margin: -12px -23px;
  color: rgba(251, 250, 246, 0.76);
  background: rgba(251, 250, 246, 0.06);
  border: 1px solid rgba(251, 250, 246, 0.1);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 0 22px rgba(168, 216, 195, 0.12);
  transform: rotate(var(--a)) translateY(-286px) rotate(calc(var(--a) * -1));
}

.transition-chart-glyphs span:nth-child(1) { --a: 0deg; }
.transition-chart-glyphs span:nth-child(2) { --a: 60deg; }
.transition-chart-glyphs span:nth-child(3) { --a: 120deg; }
.transition-chart-glyphs span:nth-child(4) { --a: 180deg; }
.transition-chart-glyphs span:nth-child(5) { --a: 240deg; }
.transition-chart-glyphs span:nth-child(6) { --a: 300deg; }

.transition-core {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: var(--ink);
  background: var(--coral);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  box-shadow:
    0 0 34px rgba(242, 102, 79, 0.52),
    0 0 90px rgba(242, 102, 79, 0.2);
  animation: core-pulse 1.65s ease-in-out both;
}

.transition-core span {
  font-size: 24px;
}

.transition-comet {
  position: absolute;
  z-index: 4;
  top: 34%;
  left: -24%;
  width: 190px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9));
  filter: drop-shadow(0 0 7px rgba(168, 216, 195, 0.8));
  transform: rotate(-18deg);
  animation: comet-cross 1.2s 320ms cubic-bezier(0.15, 0.65, 0.3, 1) both;
}

.cosmic-oracle-panel {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: calc(50% + 150px);
  width: min(560px, calc(100% - 48px));
  padding: 14px 16px 15px;
  color: var(--white);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(10, 14, 14, 0.8), rgba(31, 37, 33, 0.6)),
    radial-gradient(circle at 18% 0%, rgba(168, 216, 195, 0.22), transparent 42%),
    radial-gradient(circle at 82% 100%, rgba(214, 181, 111, 0.18), transparent 48%);
  border: 1px solid rgba(214, 181, 111, 0.28);
  border-radius: 18px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.38),
    0 0 38px rgba(168, 216, 195, 0.12),
    inset 0 1px 0 rgba(251, 250, 246, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(-50%);
  animation: cosmic-panel-arrive 560ms 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cosmic-oracle-panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(251, 250, 246, 0.08);
  border-radius: 13px;
  pointer-events: none;
}

.cosmic-oracle-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--mint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.cosmic-oracle-panel strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: 0;
}

.cosmic-oracle-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.cosmic-oracle-chip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: rgba(251, 250, 246, 0.86);
  background: rgba(251, 250, 246, 0.06);
  border: 1px solid rgba(214, 181, 111, 0.28);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.cosmic-oracle-panel p {
  margin: 10px auto 0;
  max-width: 470px;
  color: rgba(251, 250, 246, 0.64);
  font-size: 11px;
  line-height: 1.55;
}

@keyframes cosmic-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cosmic-release {
  0% { opacity: 1; filter: brightness(1); }
  38% { opacity: 1; filter: brightness(2.2); }
  100% { opacity: 0; filter: brightness(1.4); }
}

@keyframes cosmic-panel-arrive {
  from { opacity: 0; transform: translate(-50%, 14px) scale(0.96); filter: blur(2px); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
}

@keyframes cosmic-constellation-drift {
  from { transform: translate3d(-10px, 5px, 0) rotate(-1deg); }
  to { transform: translate3d(10px, -8px, 0) rotate(1.3deg); }
}

@keyframes stars-drift {
  to { transform: translate3d(2%, -3%, 0) rotate(2deg); }
}

@keyframes orbit-gather {
  0% { opacity: 0; transform: scale(1.3) rotate(-28deg); }
  35% { opacity: 1; }
  100% { opacity: 0.8; transform: scale(0.88) rotate(145deg); }
}

@keyframes orbit-gather-reverse {
  0% { opacity: 0; transform: scale(0.65) rotate(30deg); }
  35% { opacity: 1; }
  100% { opacity: 0.88; transform: scale(1.12) rotate(-160deg); }
}

@keyframes core-pulse {
  0% { opacity: 0; transform: scale(0.55); }
  38% { opacity: 1; transform: scale(1); }
  76% { transform: scale(0.94); }
  100% { transform: scale(1.16); }
}

@keyframes orbit-wait-spin {
  from { transform: scale(0.9) rotate(0deg); }
  to { transform: scale(0.9) rotate(360deg); }
}

@keyframes orbit-wait-spin-reverse {
  from { transform: scale(1.05) rotate(0deg); }
  to { transform: scale(1.05) rotate(-360deg); }
}

@keyframes core-wait-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 34px rgba(242, 102, 79, 0.52),
      0 0 90px rgba(242, 102, 79, 0.2);
  }
  50% {
    transform: scale(1.12);
    box-shadow:
      0 0 48px rgba(242, 102, 79, 0.7),
      0 0 130px rgba(168, 216, 195, 0.22);
  }
}

@keyframes comet-cross {
  0% { opacity: 0; transform: translateX(0) rotate(-18deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(165vw) rotate(-18deg); }
}

@keyframes transition-copy {
  from { opacity: 0.45; }
  to { opacity: 0.9; }
}

@keyframes result-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chart-arrive {
  from { opacity: 0; transform: scale(0.86) rotate(-5deg); filter: brightness(1.8); }
  to { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1); }
}

@keyframes spectrum-grow {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes chapter-content-reveal {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(6px) brightness(1.35);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0) brightness(1);
  }
}

@keyframes chapter-content-exit {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.992); }
}

@keyframes chapter-item-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.results {
  --report-body: clamp(17px, 0.8vw, 20px);
  --report-support: clamp(15px, 0.7vw, 18px);
  --report-caption: clamp(12px, 0.56vw, 14px);
  --report-section-title: clamp(44px, 3.25vw, 66px);
  --report-card-title: clamp(27px, 2vw, 40px);
}

.results-topbar,
.result-hero,
.report-index,
.insight-grid,
.detail-section,
.continue-report,
.profile-section,
.life-section,
.compatibility-section,
.growth-section,
.natal-chart-section,
.prototype-note {
  width: min(1440px, calc(100% - clamp(64px, 7vw, 160px)));
}

.result-summary h2 {
  font-size: clamp(54px, 4.25vw, 82px);
}

.result-lead {
  font-size: clamp(18px, 0.86vw, 21px);
  line-height: 1.85;
}

.identity-tags span {
  font-size: 12px;
}

.confidence-note {
  font-size: clamp(12px, 0.54vw, 14px);
  line-height: 1.65;
}

.insight-card > p,
.detail-content,
.life-card > p:not(.life-label),
.compat-main > p:not(.compat-context),
.compat-reference > p,
.growth-copy > p:last-child,
.growth-action p {
  font-size: var(--report-body);
}

.profile-heading > p,
.compatibility-heading > p,
.signal-box p,
.compat-warning p,
.spectrum-name,
.detail-list summary {
  font-size: var(--report-support);
}

.card-meta,
.feedback span,
.feedback button,
.life-label,
.signal-box span,
.compat-context,
.compat-warning span,
.compat-reference > span,
.compat-disclaimer,
.spectrum-summary,
.spectrum-poles,
.spectrum-value,
.continue-copy small,
.continue-copy em {
  font-size: var(--report-caption);
}

.profile-heading h2,
.life-heading h2,
.compatibility-heading h2,
.growth-copy h2,
.detail-intro h2 {
  font-size: var(--report-section-title);
}

.insight-card h3,
.life-card h3,
.compat-main h3 {
  font-size: var(--report-card-title);
}

.intro-copy {
  font-size: 17px;
}

.form-heading p,
.field > span,
.time-fieldset legend,
.persona-fieldset legend,
.text-button,
.sample-button {
  font-size: 13px;
}

.mbti-group button,
.quick-mbti > p {
  font-size: 13px;
}

.method-copy p {
  font-size: 16px;
}

.method-steps p {
  font-size: 13px;
}

.report-index a {
  font-size: 11px;
}

.report-next-orb {
  position: fixed;
  z-index: 80;
  right: clamp(22px, 3vw, 52px);
  bottom: clamp(22px, 3vw, 46px);
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--mint);
  border: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 34px rgba(168, 216, 195, 0.42),
    0 0 90px rgba(168, 216, 195, 0.2);
  text-align: center;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.report-next-orb::before,
.report-next-orb::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(168, 216, 195, 0.48);
  border-radius: 50%;
  inset: -10px;
  animation: next-orb-pulse 2.7s ease-out infinite;
}

.report-next-orb::after {
  inset: -22px;
  border-color: rgba(214, 181, 111, 0.3);
  animation-delay: 420ms;
}

.report-next-orb span,
.report-next-orb b {
  position: relative;
  z-index: 1;
  display: block;
}

.report-next-orb span {
  font-size: 10px;
  font-weight: 700;
}

.report-next-orb b {
  margin-top: 3px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
}

.report-next-orb:hover {
  background: #c1ead8;
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.36),
    0 0 46px rgba(168, 216, 195, 0.58),
    0 0 120px rgba(168, 216, 195, 0.28);
}

.report-next-orb.is-launching {
  transform: scale(0.96);
}

@keyframes next-orb-pulse {
  from { opacity: 0.95; transform: scale(0.9); }
  to { opacity: 0; transform: scale(1.34); }
}

.cursor-character {
  position: fixed;
  z-index: 130;
  inset: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.cursor-character.is-away {
  opacity: 0;
}

.cursor-character.is-soft {
  opacity: 0.32;
}

.cursor-character-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 64px;
  height: 72px;
  transform-origin: center;
  will-change: transform;
}

.cursor-character-layer img {
  position: absolute;
  object-fit: contain;
}

.cursor-mbti-avatar {
  inset: 0;
  width: 58px;
  height: 68px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.26));
}

.cursor-zodiac-companion {
  top: -5px;
  right: -4px;
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 0 7px rgba(214, 181, 111, 0.58));
}

.cursor-character-layer-0 { z-index: 5; opacity: 0.96; }
.cursor-character-layer-1 { z-index: 4; opacity: 0.22; filter: blur(0.2px); }
.cursor-character-layer-2 { z-index: 3; opacity: 0.13; filter: blur(0.5px); }
.cursor-character-layer-3 { z-index: 2; opacity: 0.075; filter: blur(0.8px); }
.cursor-character-layer-4 { z-index: 1; opacity: 0.035; filter: blur(1.2px); }

.cursor-character-layer-1 img,
.cursor-character-layer-2 img,
.cursor-character-layer-3 img,
.cursor-character-layer-4 img {
  filter:
    saturate(0.8)
    brightness(1.3)
    drop-shadow(0 0 8px rgba(168, 216, 195, 0.5));
}

[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  .daily-fortune-overlay {
    padding: 18px;
  }

  .daily-fortune-reading {
    width: 100%;
  }

  .daily-fortune-stage {
    min-height: 560px;
  }

  .daily-fortune-reading.is-ready .daily-fortune-stage {
    --daily-ready-orbit-x: 24%;
    grid-template-columns: minmax(230px, 0.82fr) minmax(300px, 1.18fr);
    column-gap: 24px;
    padding: 30px;
  }

  .daily-fortune-copy h2 {
    font-size: 32px;
  }

  .experience {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(18, 20, 19, 0.86), rgba(18, 20, 19, 0.98) 53%),
      url("assets/cosmic-map.png") top center / auto 58% no-repeat;
  }

  .experience-inner {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .intro h1 {
    max-width: 720px;
  }

  .discovery-form {
    max-width: 720px;
  }

  .next-hint {
    display: none;
  }

  .method {
    grid-template-columns: 1fr 1fr;
  }

  .method-steps {
    grid-column: 1 / -1;
  }

  .result-hero {
    grid-template-columns: 1fr;
    padding: 80px 0;
  }

  .chart-visual {
    width: min(74vw, 520px);
    justify-self: center;
  }

  .detail-section {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .report-index {
    grid-template-columns: 1fr 1fr;
  }

  .report-index-title {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
  }

  .report-index a:nth-of-type(odd) {
    border-left: 0;
  }

  .growth-section {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .visual-lab-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .visual-generator-grid {
    grid-template-columns: 1fr;
  }

  .natal-chart-heading,
  .natal-synthesis {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .angle-section-heading {
    display: grid;
    gap: 14px;
  }

  .angle-list {
    grid-template-columns: 1fr 1fr;
  }

  .angle-card:nth-child(odd) {
    border-left: 0;
  }

  .angle-card:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .house-cusp-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .life-grid {
    grid-template-columns: 1fr 1fr;
  }

  .life-card:nth-child(n) {
    border-left: 0;
  }

  .life-card:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .life-card:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .life-card > p:not(.life-label) {
    min-height: 0;
  }

  .compatibility-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .compat-panel {
    grid-template-columns: 1fr;
  }

  .compat-main {
    padding-right: 0;
  }

  .compat-references {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .natal-analysis-grid {
    grid-template-columns: 1fr;
  }

  .cross-analysis,
  .aspect-analysis {
    padding: 54px 0;
  }

  .aspect-analysis {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 680px) {
  .daily-fortune-prompt {
    padding: 24px;
    border-radius: 20px;
  }

  .daily-fortune-prompt h2 {
    font-size: 28px;
  }

  .daily-fortune-choice-actions,
  .daily-fortune-result-actions {
    flex-direction: column;
  }

  .daily-fortune-choice-actions button,
  .daily-fortune-result-actions button {
    width: 100%;
  }

  .daily-fortune-stage {
    min-height: 520px;
    border-radius: 20px;
  }

  .daily-fortune-reading.is-ready .daily-fortune-stage {
    --daily-ready-orbit-x: 50%;
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 24px;
  }

  .daily-fortune-reading.is-ready .daily-aura,
  .daily-fortune-reading.is-ready .daily-glyph-system {
    top: 35%;
  }

  .daily-fortune-reading.is-ready .daily-fortune-copy {
    grid-column: 1;
    max-width: 100%;
  }

  .daily-glyph-system {
    width: min(92vw, 410px);
  }

  .daily-glyphs span {
    transform: rotate(var(--a)) translateY(-196px) rotate(calc(var(--a) * -1));
  }

  .daily-fortune-reading.is-ready .daily-tarot-card {
    grid-column: 1;
    width: 220px;
    height: 295px;
  }

  .daily-fortune-copy h2 {
    font-size: 28px;
  }

  .topbar,
  .results-topbar,
  .experience-inner,
  .result-hero,
  .report-index,
  .chapter-gateway,
  .insight-grid,
  .detail-section,
  .continue-report,
  .profile-section,
  .life-section,
  .compatibility-section,
  .growth-section,
  .natal-chart-section,
  .visual-lab-section,
  .prototype-note {
    width: calc(100% - 36px);
  }

  .topbar,
  .results-topbar {
    height: 68px;
  }

  .privacy-note {
    display: none;
  }

  .experience-inner {
    padding: 48px 0 76px;
    gap: 60px;
  }

  .discovery-form {
    padding: 28px 20px 30px;
  }

  .intro h1 {
    font-size: 50px;
  }

  .intro-copy {
    font-size: 16px;
  }

  .time-promise {
    margin-top: 36px;
  }

  .field-grid,
  .mbti-row {
    grid-template-columns: 1fr;
  }

  .mbti-row {
    gap: 4px;
  }

  .mbti-options {
    right: 0;
    left: 0;
    max-height: 360px;
  }

  .mbti-group > div {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .mbti-options {
    padding: 16px;
  }

  .quick-result {
    align-items: flex-start;
    flex-direction: column;
  }

  .text-button {
    height: 36px;
  }

  .binary-questions {
    grid-template-columns: 1fr;
  }

  .form-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .primary-button {
    width: 100%;
  }

  .method {
    padding: 70px 18px;
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .method-steps {
    grid-column: auto;
  }

  .method-steps article {
    grid-template-columns: 32px 1fr;
  }

  .method-steps p {
    grid-column: 2;
  }

  .result-hero {
    min-height: auto;
    padding: 70px 0 64px;
    gap: 54px;
  }

  .result-summary h2 {
    font-size: 52px;
  }

  .result-lead {
    font-size: 17px;
  }

  .chart-visual {
    width: min(90vw, 420px);
  }

  .result-character #resultMbtiAvatar {
    width: 84%;
  }

  .insight-grid {
    grid-template-columns: 1fr;
  }

  .insight-card {
    min-height: 360px;
    padding: 42px 8px;
  }

  .insight-card:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .detail-section {
    padding: 76px 0;
  }

  .detail-intro h2 {
    font-size: 50px;
  }

  .detail-content {
    padding: 0 10px 28px 32px;
  }

  .report-index {
    display: flex;
    min-height: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .report-index::-webkit-scrollbar {
    display: none;
  }

  .report-index-title,
  .report-index a {
    flex: 0 0 112px;
    min-height: 58px;
    padding: 13px 12px;
    border-left: 1px solid var(--line);
  }

  .report-index-title {
    flex-basis: 128px;
    min-height: 66px;
    border-left: 0;
    border-bottom: 0;
  }

  .continue-report {
    min-height: 0;
    margin-bottom: 76px;
    padding: 26px 20px;
    grid-template-columns: 34px 1fr;
    gap: 14px;
  }

  .continue-copy strong {
    font-size: 28px;
    line-height: 1.2;
  }

  .continue-copy em {
    line-height: 1.7;
  }

  .continue-arrow {
    grid-column: 2;
    width: 38px;
    height: 38px;
    margin-top: 8px;
  }

  .profile-section,
  .life-section,
  .compatibility-section,
  .growth-section,
  .natal-chart-section,
  .visual-lab-section {
    padding: 76px 0;
  }

  .profile-heading {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
  }

  .profile-heading h2,
  .life-heading h2,
  .compatibility-heading h2,
  .growth-copy h2,
  .natal-chart-heading h2,
  .visual-lab-heading h2 {
    font-size: 46px;
  }

  .spectrum-row {
    grid-template-columns: 82px 1fr 64px;
    gap: 14px;
  }

  .spectrum-value {
    grid-column: 3;
    grid-row: 1 / span 4;
  }

  .spectrum-value strong {
    font-size: 18px;
  }

  .spectrum-scale,
  .spectrum-poles {
    grid-column: 2;
  }

  .spectrum-summary {
    grid-column: 2 / 4;
    padding-right: 4px;
  }

  .life-heading {
    margin-bottom: 46px;
  }

  .life-card {
    padding: 42px 4px;
  }

  .life-grid {
    grid-template-columns: 1fr;
  }

  .life-card:nth-child(n) {
    border-left: 0;
  }

  .life-card:nth-child(n + 2) {
    border-top: 1px solid var(--line);
  }

  .life-card h3 {
    min-height: 0;
  }

  .growth-section {
    gap: 44px;
  }

  .visual-preview-comic {
    min-height: 260px;
  }

  .compatibility-section {
    padding: 76px 0;
  }

  .compatibility-heading h2 {
    font-size: 46px;
  }

  .compat-tabs {
    max-width: none;
  }

  .compat-tab {
    min-height: 46px;
    padding: 7px;
    font-size: 10px;
  }

  .compat-panel {
    min-height: 0;
  }

  .compat-main {
    padding: 40px 0;
  }

  .compat-context {
    margin-bottom: 28px;
  }

  .compat-reference {
    padding: 26px 0;
  }

  .planetary-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .angle-list,
  .house-cusp-list {
    grid-template-columns: 1fr;
  }

  .angle-card,
  .angle-card + .angle-card {
    min-height: 0;
    padding: 26px 0;
    border-left: 0;
  }

  .angle-card:nth-child(n + 2) {
    border-top: 1px solid var(--line);
  }

  .house-cusp-list {
    border-left: 0;
  }

  .house-cusp-list article {
    min-height: 0;
    padding: 18px 0;
    border-right: 0;
  }

  .planetary-list {
    grid-template-columns: 1fr;
  }

  .planetary-row,
  .planetary-row:nth-child(even) {
    min-height: 0;
    padding: 26px 0;
    border-left: 0;
  }

  .natal-direct-actions > div {
    grid-template-columns: 1fr;
  }

  .natal-direct-actions article {
    min-height: 0;
    padding: 26px 0;
  }

  .natal-direct-actions article + article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .prototype-note {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .transition-orbit {
    width: 82vw;
  }

  .transition-orbit-inner {
    width: 48vw;
  }

  .transition-chart-glyphs {
    width: 82vw;
  }

  .transition-chart-glyphs span {
    transform: rotate(var(--a)) translateY(-41vw) rotate(calc(var(--a) * -1));
  }

  .transition-core {
    width: 64px;
    height: 64px;
  }

  .cosmic-transition > p {
    top: calc(50% + 92px);
    width: calc(100% - 42px);
    text-align: center;
    white-space: normal;
  }

  .cosmic-oracle-panel {
    top: calc(50% + 132px);
    width: calc(100% - 34px);
    padding: 12px 12px 13px;
  }

  .cosmic-oracle-panel strong {
    font-size: 17px;
  }

  .cosmic-oracle-chip {
    min-height: 28px;
    font-size: 10px;
  }

  .cosmic-oracle-panel p {
    font-size: 10px;
  }

  .cosmic-music-toggle {
    top: calc(50% + 272px);
  }

  .report-next-orb {
    right: 18px;
    bottom: 18px;
    width: 74px;
    height: 74px;
  }

  .report-next-orb span {
    font-size: 9px;
  }

  .report-next-orb b {
    font-size: 17px;
  }
}

@media (pointer: coarse) {
  .cursor-character {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}