:root {
  --bg: #f6f3ee;
  --surface: #fffdfc;
  --surface-muted: #eeeae4;
  --text: #191817;
  --text-muted: #706c67;
  --border: #ddd7cf;
  --accent: #635b9f;
  --accent-strong: #4f477f;
  --accent-soft: #e9e5f4;
  --positive: #527565;
  --positive-soft: #e2ece7;
  --caution: #a3645c;
  --caution-soft: #f3e4e1;
  --focus: #3f55b5;
  --fire: #b75d53;
  --earth: #6d7d4d;
  --air: #367f85;
  --water: #426eaa;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  --shadow: 0 12px 30px rgba(50, 43, 34, 0.06);
  --font-sans: Arial, Helvetica, sans-serif;
  --font-serif: Iowan Old Style, Literata, Georgia, serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { min-width: 320px; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text); line-height: 1.12; }
h1 { font-family: var(--font-serif); font-size: clamp(32px, 4vw, 52px); font-weight: 600; }
h2 { font-family: var(--font-serif); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; }
h3 { font-size: 18px; }
button, .button { border: 0; border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 3px; }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); min-height: 46px; padding: 10px 12px; }
input::placeholder, textarea::placeholder { color: #97908a; }
label { display: grid; gap: 7px; margin: 0; font-size: 14px; font-weight: 700; }

.skip-link { left: 16px; position: fixed; top: -60px; z-index: 20; background: var(--text); border-radius: 8px; color: white; padding: 8px 12px; }
.skip-link:focus { top: 16px; }
.app-shell { min-height: 100dvh; }
.app-rail { display: none; }
.app-main { min-width: 0; padding: 24px 18px 104px; }
.app-content { margin: 0 auto; max-width: 720px; }
.flash { margin: 0 auto 16px; max-width: 720px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 12px 14px; }
.flash.success { border-color: var(--positive); background: var(--positive-soft); }
.flash.error { border-color: var(--caution); background: var(--caution-soft); }

.bottom-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); backdrop-filter: blur(14px); }
.bottom-nav a, .rail-nav a { display: grid; align-items: center; justify-items: center; gap: 3px; min-height: 52px; border-radius: 10px; color: var(--text-muted); font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; }
.nav-icon { display: grid; width: 22px; height: 22px; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 500; }
.bottom-nav a.is-active, .rail-nav a.is-active { background: var(--accent-soft); color: var(--accent-strong); }

.eyebrow { margin: 0 0 8px; color: var(--accent-strong); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-header h1 { margin-bottom: 0; }
.page-intro, .muted { color: var(--text-muted); }
.panel, .card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.panel { margin: 0; padding: 20px; }
.card { padding: 16px; }
.stack { display: grid; gap: 16px; }
.section { margin-top: 32px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border-radius: var(--radius-sm); padding: 11px 16px; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); color: #fff; }
.btn-secondary { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn-text { min-height: auto; background: transparent; color: var(--accent-strong); padding: 4px 0; }
.button { background: var(--accent); color: #fff; padding: 11px 16px; }
.button:hover { background: var(--accent-strong); color: #fff; }
.button[disabled], button[disabled] { cursor: not-allowed; opacity: .55; }
.icon-button { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); }

.empty-state, .error-state { border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-muted); padding: 20px; text-align: center; }
.error-state { border-color: var(--caution); background: var(--caution-soft); }
.skeleton { overflow: hidden; border-radius: 8px; background: linear-gradient(90deg, var(--surface-muted), var(--surface), var(--surface-muted)); background-size: 200% 100%; animation: skeleton 1.3s ease infinite; }
@keyframes skeleton { to { background-position: -200% 0; } }

@media (min-width: 900px) {
  .app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); }
  .app-rail { position: sticky; top: 0; display: flex; height: 100dvh; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); padding: 28px 16px; }
  .brand { color: var(--text); font-family: var(--font-serif); font-size: 28px; font-weight: 600; text-decoration: none; }
  .brand span { color: var(--accent); }
  .brand-note { margin: 4px 0 36px; color: var(--text-muted); font-size: 13px; }
  .rail-nav { display: grid; gap: 6px; }
  .rail-nav a { grid-template-columns: 24px 1fr; justify-items: start; padding: 0 12px; font-size: 14px; text-align: left; }
  .rail-nav .nav-icon { font-size: 13px; }
  .rail-footer { margin-top: auto; color: var(--text-muted); font-size: 12px; }
  .bottom-nav { display: none; }
  .app-main { padding: 48px 48px 64px; }
  .app-content { max-width: 1180px; }
}

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

/* Today: the control slice for the product system. */
.today-page { display: grid; gap: 24px; max-width: 720px; }
.today-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 14px; }
.today-top p { margin: 0; }
.today-top time { color: var(--text); font-weight: 700; }
.today-top-actions { display: flex; align-items: center; gap: 10px; }.today-top-actions form { margin: 0; }.today-top-actions .icon-button { width: 36px; height: 36px; font-size: 18px; }
.forecast-hero { padding: 4px 0 0; }
.forecast-hero h1 { max-width: 660px; margin: 0 0 16px; }
.forecast-summary { max-width: 640px; margin: 0; color: var(--text-muted); font-size: 19px; line-height: 1.55; }
.today-actions { display: grid; gap: 12px; }
.action-pair { display: grid; gap: 12px; }
.action-card { min-height: 128px; padding: 18px; }
.action-card--do { border-color: color-mix(in srgb, var(--positive) 35%, var(--border)); background: var(--positive-soft); }
.action-card--avoid { background: var(--surface-muted); }
.action-card span, .daily-card-copy .eyebrow { display: block; margin: 0 0 8px; color: var(--text-muted); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.action-card--do span { color: var(--positive); }
.action-card--avoid span { color: var(--caution); }
.action-card strong { display: block; font-size: 18px; line-height: 1.4; }
.today-primary-cta { width: 100%; font-size: 16px; }
.why-disclosure { overflow: hidden; padding: 0; }
.why-disclosure summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; font-weight: 800; list-style: none; padding: 0 18px; }
.why-disclosure summary::-webkit-details-marker { display: none; }
.why-disclosure summary::after { content: "+"; color: var(--accent-strong); font-size: 22px; font-weight: 400; }
.why-disclosure[open] summary { border-bottom: 1px solid var(--border); }
.why-disclosure[open] summary::after { content: "−"; }
.why-content { padding: 18px; }
.why-content > p { margin-bottom: 18px; color: var(--text-muted); }
.why-content > .why-lead { color: var(--text); font-family: var(--font-serif); font-size: 20px; font-weight: 600; line-height: 1.4; }
.why-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.why-meta div { border-top: 1px solid var(--border); padding-top: 8px; }
.why-meta dt { color: var(--text-muted); font-size: 13px; }
.why-meta dd { margin: 3px 0 0; font-weight: 700; }
.lunar-strip { display: grid; gap: 12px; border-color: color-mix(in srgb, var(--air) 28%, var(--border)); background: color-mix(in srgb, var(--air) 7%, var(--surface)); }
.lunar-strip strong { display: block; margin-top: 3px; font-size: 18px; }
.lunar-strip p { margin: 0; color: var(--text-muted); }
.daily-card-preview { display: grid; grid-template-columns: 94px minmax(0, 1fr); align-items: center; gap: 16px; }
.tarot-mini { min-height: 138px; border-radius: 12px; background: var(--accent-strong); }
.tarot-mini--reversed { background: #554c89; }
.daily-card-copy h2 { margin: 0 0 8px; font-size: 24px; }.daily-card-copy p { margin: 0; color: var(--text-muted); font-size: 15px; }
.checkin-card { display: grid; gap: 16px; }.checkin-card h2 { margin: 0; font-size: 28px; }.checkin-question { margin: 0; color: var(--text-muted); }
.checkin-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.checkin-options button { min-height: 52px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 8px; }.checkin-options button:hover, .checkin-options button:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.checkin-options button.is-selected { border-color: var(--positive); background: var(--positive-soft); color: #254d3e; }
.checkin-note { border-top: 1px solid var(--border); padding-top: 16px; }.checkin-note textarea { min-height: 88px; resize: vertical; }
.checkin-feedback { min-height: 20px; margin: 0; color: var(--positive); font-size: 14px; font-weight: 700; }
.today-footer-link { font-size: 14px; text-align: center; }

/* Public share card deliberately has no account navigation. */
.share-page { display: grid; min-height: 100dvh; align-content: center; gap: 24px; max-width: 680px; margin: 0 auto; padding: 28px 18px; }.share-brand { color: var(--text); font-family: var(--font-serif); font-size: 28px; font-weight: 600; text-decoration: none; }.share-brand span { color: var(--accent); }.share-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); padding: 28px; }.share-card h1 { margin-bottom: 18px; }.share-advice { margin: 0; color: var(--text); font-family: var(--font-serif); font-size: clamp(23px, 5vw, 34px); line-height: 1.3; }.share-note { margin: 28px 0 0; color: var(--text-muted); font-size: 14px; }.share-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 20px; }.share-link-row input { min-width: 0; font-size: 14px; }

@media (min-width: 720px) {
  .today-page { max-width: none; grid-template-columns: minmax(0, 720px) minmax(260px, 1fr); column-gap: 48px; align-items: start; }
  .today-page > .today-top, .today-page > .forecast-hero, .today-page > .today-actions, .today-page > .why-disclosure, .today-page > .checkin-card, .today-page > .today-footer-link { grid-column: 1; }
  .today-page > .lunar-strip { grid-column: 2; grid-row: 2; }.today-page > .daily-card-preview { grid-column: 2; grid-row: 3 / span 2; }
  .action-pair { grid-template-columns: 1fr 1fr; }.today-primary-cta { width: auto; min-width: 240px; }
}
@media (max-width: 520px) { .why-meta, .checkin-options { grid-template-columns: 1fr; }.forecast-summary { font-size: 18px; } }
@media (max-width: 440px) { .share-card { padding: 22px; }.share-link-row { grid-template-columns: 1fr; }.share-link-row .btn { width: 100%; } }

/* Landing and onboarding */
.landing-body { background: var(--bg); }
.landing-page { background: var(--bg); color: var(--text); }
.landing-hero { position: relative; isolation: isolate; display: grid; min-height: calc(100svh - 86px); overflow: hidden; background: var(--bg); padding: 20px 20px 28px; }
.landing-hero-art { position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }
.landing-hero-wash { position: absolute; z-index: -1; inset: 0; background: rgba(246, 243, 238, .72); }
.landing-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.landing-brand { color: var(--text); font-family: var(--font-serif); font-size: 28px; font-weight: 600; line-height: 1; text-decoration: none; }.landing-brand span { color: var(--accent); }
.landing-login { border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 253, 252, .86); color: var(--accent-strong); font-size: 14px; font-weight: 700; padding: 8px 12px; text-decoration: none; }.landing-login:hover { border-color: var(--accent); color: var(--accent); }
.landing-copy { align-self: end; max-width: 560px; margin-top: 90px; padding-bottom: 52px; }.landing-kicker { margin: 0 0 12px; color: var(--accent-strong); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.landing-copy h1 { margin: 0 0 14px; color: var(--text); font-size: clamp(56px, 12vw, 100px); line-height: .9; }.landing-lede { max-width: 460px; margin: 0; color: #383531; font-family: var(--font-serif); font-size: 23px; line-height: 1.32; }.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }.landing-primary { min-height: 52px; background: var(--accent); color: #fff; padding-right: 21px; padding-left: 21px; }.landing-primary:hover { background: var(--accent-strong); color: #fff; }.landing-footer { align-self: end; max-width: 520px; }.landing-legal, .landing-note { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }.landing-legal { margin-bottom: 8px; }.landing-legal a { color: var(--accent-strong); font-weight: 700; }.landing-legal a:hover { color: var(--accent); }.landing-followup { display: grid; min-height: 86px; place-items: center; border-top: 1px solid var(--border); background: var(--surface-muted); color: var(--text); padding: 20px; text-align: center; }.landing-followup p { margin: 0; font-family: var(--font-serif); font-size: 18px; }

.onboarding-shell { max-width: 620px; margin: 0 auto; }.onboarding-card { display: grid; gap: 22px; padding: 24px; }.onboarding-header { display: grid; gap: 8px; }.onboarding-card h1, .onboarding-section h2 { margin: 0; }.onboarding-header .eyebrow { margin: 0; }.onboarding-copy { margin: 0; color: var(--text-muted); }.onboarding-section { display: grid; gap: 14px; border-top: 1px solid var(--border); padding-top: 20px; }.onboarding-section h2 { font-size: 22px; }.onboarding-fields { display: grid; gap: 14px; }.birth-date-input { font-variant-numeric: tabular-nums; }.onboarding-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.onboarding-legal { display: grid; gap: 12px; border-top: 1px solid var(--border); padding-top: 20px; }.onboarding-documents { display: flex; flex-wrap: wrap; gap: 8px 16px; }.onboarding-documents a { color: var(--accent-strong); font-size: 14px; font-weight: 700; }.onboarding-legal label { grid-template-columns: 20px 1fr; align-items: start; font-weight: 500; }.onboarding-legal input { width: 18px; min-height: 18px; margin-top: 3px; }.onboarding-submit { justify-self: start; min-height: 50px; }.city-search-wrap { position: relative; }.city-results { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; left: 0; }.city-options { display: grid; max-height: 256px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }.city-option { display: grid; grid-template-columns: 1fr auto; gap: 12px; border-radius: 8px; background: transparent; color: var(--text); padding: 10px; text-align: left; }.city-option:hover, .city-option:focus-visible { background: var(--accent-soft); }.city-option small { color: var(--text-muted); }.city-status { min-height: 20px; color: var(--positive); font-size: 14px; font-weight: 700; }.field-hint { margin: 0; color: var(--text-muted); font-size: 14px; }

/* Tarot */
.tarot-card-large, .tarot-mini, .reading-mini-card { overflow: hidden; position: relative; }
.tarot-art-trigger { position: absolute; z-index: 2; inset: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; padding: 0; }
.tarot-card-art, .tarot-mini-art, .reading-mini-art { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.tarot-card-large--reversed .tarot-card-art, .tarot-mini--reversed .tarot-mini-art, .reading-mini-card--reversed .reading-mini-art { transform: rotate(180deg); }
.tarot-art-trigger:focus-visible { outline-color: #fff; outline-offset: -5px; }
.deck-header { max-width: 620px; }.deck-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.deck-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }.deck-card .tarot-art-trigger--deck { position: relative; display: block; width: 100%; border-radius: 0; }.deck-card img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }.deck-card div { display: grid; gap: 3px; padding: 10px 11px 12px; }.deck-card span { color: var(--accent-strong); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.deck-card strong { font-family: var(--font-serif); font-size: 18px; line-height: 1.15; }
.tarot-lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: rgba(25, 24, 23, .7); padding: 16px; }
.tarot-lightbox__dialog { position: relative; display: grid; max-width: min(100%, 560px); max-height: calc(100dvh - 32px); justify-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--surface) 70%, transparent); border-radius: var(--radius); background: var(--surface); box-shadow: 0 24px 60px rgba(25, 24, 23, .28); padding: 12px 12px 10px; }
.tarot-lightbox__image { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - 104px); border-radius: 10px; object-fit: contain; }
.tarot-lightbox__image--reversed { transform: rotate(180deg); }
.tarot-lightbox__dialog p { margin: 0; color: var(--text-muted); font-size: 14px; font-weight: 700; text-align: center; }
.tarot-lightbox__close { position: absolute; z-index: 1; top: 20px; right: 20px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 24px; font-weight: 400; line-height: 1; }
.tarot-page, .reading-page, .profile-page, .week-page { display: grid; gap: 28px; }.tarot-header p, .reading-header p { color: var(--text-muted); }.tarot-feature { display: grid; gap: 24px; align-items: center; }.tarot-card-large { aspect-ratio: 2 / 3; max-width: 300px; min-height: 390px; border-radius: var(--radius); background: var(--accent); box-shadow: var(--shadow); }.tarot-card-large--reversed { background: #554c89; }.tarot-copy { max-width: 600px; }.tarot-copy h1 { margin-bottom: 12px; }.tarot-copy > p { color: var(--text-muted); font-size: 18px; line-height: 1.55; }.tarot-copy-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }.spread-grid { display: grid; gap: 12px; }.spread-card { display: grid; min-height: 192px; align-content: space-between; gap: 18px; padding: 20px; }.spread-card > div > span { color: var(--accent-strong); font-size: 13px; font-weight: 800; }.spread-card strong { display: block; margin-top: 8px; font-family: var(--font-serif); font-size: 26px; }.spread-card p { margin: 8px 0 0; color: var(--text-muted); }.reading-grid { display: grid; gap: 14px; }.reading-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: start; gap: 18px; padding: 16px; }.reading-mini-card { min-height: 156px; border-radius: 10px; background: var(--accent); }.reading-mini-card--reversed { background: #554c89; }.reading-position { color: var(--accent-strong); font-size: 13px; font-weight: 800; }.reading-card h2 { margin: 5px 0 8px; font-size: 26px; }.reading-card p { margin: 0; color: var(--text-muted); }

/* Profile and history */
.profile-overview { display: grid; gap: 12px; }.profile-link-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text); text-decoration: none; }.profile-link-card:hover { border-color: var(--accent); color: var(--text); }.profile-link-card strong, .profile-link-card span { display: block; }.profile-link-card span { color: var(--text-muted); font-size: 14px; }.history-list { display: grid; gap: 10px; }.history-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }.history-item time, .history-item small { color: var(--text-muted); font-size: 13px; }.history-item h3 { margin: 3px 0 4px; }.history-item p { margin: 0; color: var(--text-muted); font-size: 14px; }.week-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.week-metric strong { display: block; margin-top: 8px; font-family: var(--font-serif); font-size: 34px; }.week-metric span { color: var(--text-muted); font-size: 13px; }.metric-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; border-top: 1px solid var(--border); padding: 11px 0; }.settings-list { display: grid; }.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); padding: 14px 0; }.settings-row:first-child { border-top: 0; }.settings-row dt { color: var(--text-muted); font-size: 13px; }.settings-row dd { margin: 3px 0 0; font-weight: 700; }.danger-zone { border-color: color-mix(in srgb, var(--caution) 50%, var(--border)); }.danger-zone h2 { color: var(--caution); }.notification-form { display: grid; gap: 14px; }.notification-form fieldset { display: grid; gap: 12px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }.notification-form legend { color: var(--accent-strong); font-weight: 800; padding: 0 6px; }.toggle { display: flex; align-items: center; gap: 9px; }.toggle input { width: 18px; min-height: 18px; }

@media (min-width: 720px) { .landing-hero, .tarot-feature { grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr); }.spread-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.deck-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .deck-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 560px) { .onboarding-card { padding: 20px; }.onboarding-submit { width: 100%; }.reading-card { grid-template-columns: 82px minmax(0, 1fr); }.reading-mini-card { min-height: 122px; }.week-grid { grid-template-columns: 1fr; }.history-item { grid-template-columns: 1fr; } }

@media (min-width: 720px) { .landing-hero { grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - 96px); padding: 30px clamp(32px, 7vw, 120px) 34px; }.landing-hero-art { width: min(66vw, 900px); object-fit: contain; object-position: right center; }.landing-hero-wash { background: rgba(246, 243, 238, .24); }.landing-copy { margin-top: 110px; padding-bottom: 68px; }.landing-copy h1 { font-size: clamp(76px, 9vw, 126px); }.landing-lede { font-size: 26px; }.landing-followup { min-height: 96px; } }
@media (max-width: 440px) { .landing-hero { padding-right: 18px; padding-left: 18px; }.landing-copy { padding-bottom: 26px; }.landing-lede { font-size: 21px; }.landing-footer { border: 1px solid rgba(215, 207, 197, .9); background: rgba(255, 253, 252, .9); padding: 11px 12px; } }

/* Natal chart keeps one SVG coordinate system; only its presentation lives here. */
.natal-page { display: grid; gap: 24px; }.natal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.natal-actions form { margin: 0; }.natal-recalculate { width: 46px; height: 46px; color: var(--accent-strong); font-size: 23px; }.natal-recalculate:hover { border-color: var(--accent); background: var(--accent-soft); }.natal-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid color-mix(in srgb, var(--air) 32%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--air) 7%, var(--surface)); padding: 14px 16px; }.natal-notice strong, .natal-notice span { display: block; }.natal-notice span { color: var(--text-muted); font-size: 14px; }.natal-big-three { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }.natal-big-three-card { display: flex; align-items: center; gap: 10px; min-height: 82px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px; }.natal-big-three-card--muted { opacity: .68; }.natal-big-three-card p { margin: 0 0 3px; color: var(--text-muted); font-size: 13px; }.natal-big-three-card strong { font-size: 15px; }.natal-badge { display: inline-grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent-strong); font-size: 10px; font-weight: 800; }.natal-layout { display: grid; align-items: start; gap: 18px; }.natal-wheel-frame { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px; }.natal-wheel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; color: var(--text-muted); font-size: 13px; }.natal-wheel { display: block; width: 100%; height: auto; }.wheel-rim { fill: #fffdfc; stroke: #c8c2bc; stroke-width: 2.2; }.wheel-zodiac { fill: #f8f6f1; stroke: #d8d1ca; stroke-width: 1.4; }.wheel-center { fill: #fffdfc; stroke: #ded8d1; stroke-width: 1.3; }.wheel-sign-divider { stroke: #ded8d1; stroke-width: 1.1; }.wheel-sign { dominant-baseline: middle; font-family: "Segoe UI Symbol", sans-serif; font-size: 18px; text-anchor: middle; }.wheel-house { stroke: #bfbab3; stroke-dasharray: 4 5; stroke-width: 1.1; }.wheel-house-number { dominant-baseline: middle; fill: #706c67; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; text-anchor: middle; }.wheel-axis { stroke: #635b9f; stroke-width: 2.1; }.wheel-axis-label { dominant-baseline: middle; fill: #4f477f; font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; text-anchor: middle; }.wheel-aspect { fill: none; pointer-events: none; stroke-linecap: round; stroke-opacity: 1; stroke-width: 3.4; vector-effect: non-scaling-stroke; }.wheel-planet { cursor: pointer; outline: none; }.wheel-planet-halo { fill: none; stroke: #635b9f; stroke-opacity: 0; stroke-width: 2.5; }.wheel-planet-dot { fill: #fffdfc; stroke: #191817; stroke-width: 1.6; }.wheel-planet-glyph { dominant-baseline: middle; fill: #191817; font-family: "Segoe UI Symbol", sans-serif; font-size: 15px; pointer-events: none; text-anchor: middle; }.wheel-planet:focus .wheel-planet-halo, .wheel-planet--selected .wheel-planet-halo { stroke-opacity: 1; }.wheel-planet--muted { opacity: .34; }.natal-detail { min-height: 220px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 20px; }.natal-detail h2 { margin: 0 0 10px; }.natal-detail p { color: var(--text-muted); }.natal-position { font-weight: 700; }.natal-section h2, .natal-reading h2 { margin: 0; }.natal-position-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.natal-position-card { display: flex; align-items: center; gap: 10px; min-height: 64px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 10px; text-align: left; }.natal-position-card:hover, .natal-position-card--selected { border-color: var(--accent); background: var(--accent-soft); }.natal-position-card strong, .natal-position-card small { display: block; }.natal-position-card small { color: var(--text-muted); font-size: 13px; }.natal-reading { border-top: 1px solid var(--border); padding-top: 28px; }.natal-reading-intro { max-width: 720px; margin-top: 10px; color: var(--text-muted); font-size: 17px; line-height: 1.55; }.natal-reading-grid { display: grid; gap: 12px; margin-top: 18px; }.natal-reading-card h3 { margin: 0 0 8px; }.natal-reading-card p:last-child { margin: 0; color: var(--text-muted); }.natal-connections { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 18px; }.natal-connections article { display: flex; gap: 10px; border-top: 1px solid var(--border); padding: 14px 0; }.natal-connections article:last-child { padding-bottom: 0; }.natal-connections i { display: block; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; margin-top: 6px; }.natal-connections h3 { margin: 0 0 5px; font-size: 16px; }.natal-connections p { margin: 0; color: var(--text-muted); }
@media (min-width: 860px) { .natal-layout { grid-template-columns: minmax(0, 660px) minmax(290px, 1fr); }.natal-reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .natal-head { gap: 10px; }.natal-notice { align-items: flex-start; flex-direction: column; }.natal-big-three, .natal-position-grid { grid-template-columns: 1fr; }.natal-wheel-toolbar { align-items: flex-start; flex-direction: column; }.wheel-house-number { font-size: 10px; } }
[x-cloak] { display: none !important; }

/* Email login uses the same compact panel language as the profile. */
.account-access { display: grid; gap: 14px; border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface)); }
.account-access h2 { margin: 0; font-size: 27px; }
.account-access .eyebrow { margin-bottom: 6px; }
.account-access__copy { max-width: 650px; margin: 0; color: var(--text-muted); }
.account-access__actions { display: flex; flex-wrap: wrap; gap: 10px; }.account-access__actions form { margin: 0; }
.email-inline-form { display: grid; gap: 10px; max-width: 520px; }
.email-auth-page { display: grid; gap: 16px; max-width: 540px; margin: 32px auto; }
.email-auth-page h1, .email-auth-page .page-intro { margin: 0; }
.email-auth-form { display: grid; gap: 14px; }
.email-auth-form .btn { width: 100%; }

.reading-synthesis { display: grid; gap: 14px; border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface)); }
.reading-synthesis h2 { margin: 0; font-size: 28px; }
.reading-synthesis__intro { max-width: 760px; margin: 0; color: var(--text-muted); font-size: 17px; }
.reading-details { border-top: 1px solid var(--border); padding-top: 4px; }.reading-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; color: var(--text); cursor: pointer; font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.15; list-style: none; }.reading-details summary::-webkit-details-marker { display: none; }.reading-details summary::after { width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent-strong); content: "+"; font-family: Arial, sans-serif; font-size: 21px; font-weight: 400; line-height: 25px; text-align: center; }.reading-details[open] summary::after { content: "-"; }.reading-details[open] summary { border-bottom: 1px solid var(--border); color: var(--accent-strong); }.reading-synthesis__sections { display: grid; gap: 0; }
.reading-synthesis__sections article { border-top: 1px solid var(--border); padding: 14px 0; }
.reading-synthesis__sections article:last-child { padding-bottom: 0; }
.reading-synthesis__sections h3 { margin: 0 0 6px; font-size: 16px; }
.reading-synthesis__sections p { max-width: 800px; margin: 0; color: var(--text-muted); }
.reading-practice { border-top: 1px solid var(--border); padding-top: 16px; }.reading-practice h3 { margin: 0 0 6px; font-size: 18px; }.reading-practice > p { max-width: 780px; margin: 0; color: var(--text-muted); }.reading-practice ol { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: practice; }.reading-practice li { display: grid; gap: 4px; position: relative; min-height: 78px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 13px 14px 13px 52px; counter-increment: practice; }.reading-practice li::before { position: absolute; left: 14px; top: 14px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); content: counter(practice); font-size: 13px; font-weight: 800; }.reading-practice li strong, .reading-practice li span { display: block; }.reading-practice li span { color: var(--text-muted); font-size: 14px; }
.history-reading-link { display: block; color: inherit; text-decoration: none; }.history-reading-link:hover h3 { color: var(--accent-strong); }.history-reading-link h3::after { content: " →"; color: var(--accent-strong); }