/* Correctness only. Palette, type and spacing come from the site.
   Every interactive element here takes its height from the box rather than from
   inline padding: padding on a short nav link makes it paint past its <nav>,
   measured on the live site. */
.skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 20;
  padding: .65rem .9rem;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  width: min(100% - 2rem, 88rem);
  min-block-size: 5.5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

/* 44px minimum, from the box. WCAG 2.5.8 exempts an inline anchor inside a <p>
   or <li> and nothing else. */
.site-header nav a, .site-header .brand, footer a, footer .brand {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

footer {
  width: min(100% - 2rem, 88rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
}
.footer-links { display: flex; flex-wrap: wrap; align-items: start; gap: 1.4rem; }
.copyright { grid-column: 1 / -1; }

@media (max-width: 38rem) {
  .site-header { min-block-size: 4.5rem; }
  footer { grid-template-columns: 1fr; }
}

/* The art is sized against its own grid column, never the viewport. `47vw` is
   unrelated to the track it sits in; at 834px and 1280px it grew past the column
   and the hero's overflow clipped it. Firefox reported it, the other two engines
   hid it behind the same clip. */
.hero {
  width: min(100% - 2rem, 88rem);
  min-block-size: min(49rem, calc(100vh - 5.5rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
  align-items: center;
  gap: 2rem;
  overflow: hidden;
}
.hero-art { width: min(100%, 38rem); justify-self: center; }
.hero-art svg { overflow: visible; }

@media (max-width: 60rem) {
  .hero {
    grid-template-columns: 1fr;
    min-block-size: 0;
    padding-block-end: 2rem;
    text-align: start;
  }
  /* Copy first, art after. Caught by looking at the frame: with the art in row
     one it took the whole first screen of an iPhone and pushed the headline,
     the lead and the call to action below the fold -- the exact anti-pattern
     this block exists to prevent, in the block itself. It is decoration; it
     goes last and it shrinks first. */
  .hero-art { grid-row: 2; width: min(70vw, 26rem); justify-self: start; }
}
@media (max-width: 38rem) {
  /* Measured: a 3rem headline wrapped to three lines at 390px and pushed the
     whole page down with it. */
  .hero h1 { font-size: 2.5rem; }
  .hero-art { width: min(56vw, 15rem); }
}

/* The form is the layout. `form-heading` spans every column so the title reads
   as the form's own header rather than a separate section above it. */
.tool-section {
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 10vw, 9rem) max(1rem, calc((100vw - 88rem) / 2));
  overflow: hidden;
}
.tool-form {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.4rem;
}
.form-heading { grid-column: 1 / -1; max-width: 49rem; margin-block-end: 2.1rem; }
.form-action { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; margin-block-start: 1.2rem; }
/* Reserve the message line so showing it never moves the button. */
.form-error { min-block-size: 1.5rem; }

fieldset { min-inline-size: 0; }

@media (max-width: 52rem) {
  .tool-form { grid-template-columns: 1fr; }
}

/* The card grid uses six tracks so five cards break 3 + 2 rather than leaving a
   hole in the second row. The border rules assume exactly five; adding or
   removing a card means revisiting them. */
.result { overflow: hidden; }
.result-intro { padding: clamp(1.5rem, 5vw, 3.5rem); }
.result-subject { margin-block: 1.4rem 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.score-wrap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2rem; }

.result-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.result-grid article { grid-column: span 2; min-block-size: 15rem; padding: 2rem; }
.result-grid article:nth-child(4), .result-grid article:nth-child(5) { grid-column: span 3; }

.result-actions { padding: 1.2rem 2rem; display: flex; justify-content: space-between; gap: 1rem; }

@media (max-width: 48rem) {
  /* Stacked, the 3 + 2 spans stop meaning anything, and `span 2` against a
     single track would invent columns. Undo both at the same specificity. */
  .result-grid { grid-template-columns: 1fr; }
  .result-grid article,
  .result-grid article:nth-child(4),
  .result-grid article:nth-child(5) { grid-column: auto; min-block-size: auto; }
  .score-wrap { grid-template-columns: 1fr; }
  /* Long subjects wrap: two long names plus a mark between them do not fit a
     phone, and the type is already at its floor. */
  .result-subject { flex-direction: column; align-items: stretch; gap: .5rem; }
  .result-actions { flex-direction: column; }
}

/* The zero minimum is structural. Without it, a long token in an answer gives
   the grid item an intrinsic minimum wider than its column and the page grows
   beyond a phone viewport. */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-card, 1.25rem);
}
.faq-item { min-inline-size: 0; }
.faq-item p { overflow-wrap: anywhere; }

@media (max-width: 44rem) {
  .faq-list { grid-template-columns: minmax(0, 1fr); }
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-list li { display: inline-flex; min-inline-size: 0; align-items: center; }
.breadcrumb-list li + li::before { content: "/"; margin-inline-end: .45rem; }
.breadcrumb-list a { display: inline-flex; min-block-size: 44px; align-items: center; }
.breadcrumb-list span { overflow-wrap: anywhere; }

.sitemap-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-section, 2rem);
}
.sitemap-group { min-inline-size: 0; }
.sitemap-group ul { margin: 0; padding: 0; list-style: none; }
.sitemap-group li { min-inline-size: 0; }
.sitemap-group a {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  overflow-wrap: anywhere;
}
.sitemap-group p { overflow-wrap: anywhere; }

/* Legal pages are long prose; the only rule that keeps them correct is measure.
   Anything past ~70 characters a line becomes unreadable, and these are the
   pages a reviewer actually reads. */
.legal-page { max-inline-size: 44rem; }
.legal-page h2 { margin-block-start: 2.5rem; }
.legal-page p + p { margin-block-start: 1rem; }

/* Atmosphere, and the one place a phone gets hurt.
   CSS gradients on a pseudo-element, never a canvas or WebGL: this sits behind
   the section a tool-site converts on, and a canvas there costs battery, adds a
   paint layer that behaves differently in every engine, and runs into Safari's
   memory ceiling on a phone. Layered radial gradients composite on the GPU and
   render identically in Chromium, WebKit and Firefox -- verified.

   Pick ONE variant per site; the palette comes from palette-set. */
.bg-host { position: relative; isolation: isolate; overflow: hidden; }
.bg-host::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
}

/* aurora -- esoteric, atmospheric */
.bg-aurora::before {
  background:
    radial-gradient(38rem 26rem at 22% 28%, var(--bg-a), transparent 62%),
    radial-gradient(34rem 30rem at 78% 24%, var(--bg-b), transparent 62%),
    radial-gradient(30rem 24rem at 62% 82%, var(--bg-c), transparent 60%);
  filter: blur(28px);
  animation: bg-drift 42s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bg-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.02); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* grid -- utilitarian, converters and calculators */
.bg-grid::before {
  inset: 0;
  background:
    linear-gradient(var(--bg-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-line) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

/* paper -- documents, invoices */
.bg-paper::before {
  inset: 0;
  background: radial-gradient(60rem 40rem at 50% 0%, var(--bg-a), transparent 70%);
}

/* Motion is decoration; a still backdrop is the same design. */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora::before { animation: none; }
}

/* Per-vertical schemes. Divergence is the product: a fleet that shares one look
   reads as spam, to people and to reviewers. Pick one set, then let the site
   diverge further.

   Every set defines the same names, so blocks never learn a site's colours. */

/* esoteric -- atmospheric, dark, warm accent against violet */
.palette-esoteric {
  --ink: #f8f0e7; --ink-muted: #bcb1c5;
  --surface: #17131f; --surface-deep: #0e0b14; --panel: #211a2b;
  --line: rgba(248, 240, 231, .14);
  --accent: #ff806a; --accent-bright: #ff9b86; --highlight: #f2d89c;
  --bg-a: rgba(255,128,106,.17); --bg-b: rgba(155,134,255,.16); --bg-c: rgba(242,216,156,.11);
  --bg-line: rgba(255,255,255,.025);
}
/* utilitarian -- converters, upscalers: light, fast, no atmosphere */
.palette-utility {
  --ink: #101418; --ink-muted: #5b6673;
  --surface: #ffffff; --surface-deep: #f4f6f8; --panel: #ffffff;
  --line: rgba(16, 20, 24, .12);
  --accent: #1f6feb; --accent-bright: #3b82f6; --highlight: #0ea5e9;
  --bg-a: rgba(31,111,235,.06); --bg-b: rgba(14,165,233,.05); --bg-c: transparent;
  --bg-line: rgba(16,20,24,.035);
}
/* data-dense -- finance: high contrast, restrained, numbers first */
.palette-data {
  --ink: #0b0f14; --ink-muted: #59636e;
  --surface: #f7f9fb; --surface-deep: #eef2f6; --panel: #ffffff;
  --line: rgba(11, 15, 20, .14);
  --accent: #0f766e; --accent-bright: #14b8a6; --highlight: #b45309;
  --bg-a: rgba(15,118,110,.05); --bg-b: transparent; --bg-c: transparent;
  --bg-line: rgba(11,15,20,.04);
}
/* documents -- invoices, quotes: clean, printable, trustworthy */
.palette-document {
  --ink: #1a1a1a; --ink-muted: #6b6b6b;
  --surface: #fbfaf7; --surface-deep: #f3f1ec; --panel: #ffffff;
  --line: rgba(26, 26, 26, .13);
  --accent: #1d4ed8; --accent-bright: #2563eb; --highlight: #92400e;
  --bg-a: rgba(29,78,216,.04); --bg-b: transparent; --bg-c: transparent;
  --bg-line: rgba(26,26,26,.03);
}

/* Font pairings that survive 320px and need no web font to look deliberate.
   System stacks on purpose: a webfont on a tool page costs the first paint the
   visitor came for, and every one of these renders on iOS and Android already.

   Pick one set. `--display` carries the personality, `--ui` carries the work. */

/* editorial -- esoteric, psychometrics: an old-style serif against a neutral UI */
.type-editorial {
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-tracking: -.04em;
}
/* technical -- converters, upscalers: one family, tight, no ornament */
.type-technical {
  --display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display-tracking: -.02em;
}
/* ledger -- finance, documents: figures must align, so the numeric face matters */
.type-ledger {
  --display: ui-serif, Georgia, "Times New Roman", serif;
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --numeric: ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-tracking: -.01em;
}
/* Figures in tables and results must not dance as they change. */
.type-ledger .figure, .figure { font-variant-numeric: tabular-nums; }

/* 44px is the documented minimum. Inline anchors inside a <p> or <li> are
   exempt (WCAG 2.5.8) because padding them wrecks the surrounding line height. */
.text-button, nav a, footer a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

/* Reserve the message line so showing it never moves the button. */
.form-error { min-block-size: 1.5rem; }

/* Without this, iOS and Android substitute the colour-emoji form and paint a
   tile in the middle of running text. Pairs with the U+FE0E selector appended
   at render time; neither alone covers every browser. */
.text-glyph { font-variant-emoji: text; }

/* Reserved height per breakpoint, before anything loads.
   A slot with no unit wired yet renders nothing at all rather than an empty
   frame -- an ad-shaped hole reads as a broken page. */
.sf-adslot { display: block; margin-block: 2.5rem; }
.sf-adslot[data-ad-unit=""] { display: none; }
.sf-adslot ins { display: block; inline-size: 100%; }

:root {
  color-scheme: dark;
  --ink: #f7f0e4;
  --ink-soft: #cbc4d8;
  --night: #05050d;
  --night-raised: #0d0c1c;
  --night-soft: #17142c;
  --line: rgba(232, 200, 120, 0.23);
  --violet: #b98cff;
  --violet-deep: #6e35d3;
  --blue: #599bff;
  --gold: #e8c878;
  --focus: #caa8ff;
  --danger: #ffb0a1;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--night);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--night); color: var(--ink); line-height: 1.65; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 18%, transparent 0 14rem, rgba(232,200,120,.08) 14.08rem 14.16rem, transparent 14.24rem 20rem, rgba(185,140,255,.075) 20.08rem 20.16rem, transparent 20.24rem),
    conic-gradient(from 18deg at 50% 18%, transparent 0 7%, rgba(89,155,255,.035) 7% 7.3%, transparent 7.3% 24%, rgba(232,200,120,.035) 24% 24.3%, transparent 24.3% 57%, rgba(185,140,255,.045) 57% 57.3%, transparent 57.3%),
    radial-gradient(ellipse at 13% 10%, rgba(110, 53, 211, 0.34), transparent 31rem),
    radial-gradient(ellipse at 88% 24%, rgba(36, 83, 186, 0.24), transparent 28rem),
    radial-gradient(ellipse at 52% 82%, rgba(85, 32, 150, 0.18), transparent 36rem),
    linear-gradient(165deg, #05050d 0%, #090b22 52%, #04040a 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.27;
  background-image:
    radial-gradient(circle, rgba(255,240,189,.95) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(185,140,255,.8) 0 .8px, transparent 1.2px),
    linear-gradient(116deg, transparent 49.8%, rgba(232,200,120,.08) 50%, transparent 50.2%);
  background-position: 0 0, 31px 18px, center;
  background-size: 67px 67px, 97px 89px, 100% 100%;
  mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.7) 62%, transparent 96%);
}
a { color: inherit; }
img, svg { max-width: 100%; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip-link { position: fixed; inset: .5rem auto auto .5rem; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; z-index: 100; background: var(--ink); color: var(--night); padding: 0; }
.skip-link:focus-visible { clip: auto; clip-path: none; width: auto; height: auto; overflow: visible; padding: .7rem 1rem; }
.site-header, footer, main { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font-weight: 760; letter-spacing: 0.02em; }
.brand-mark { display: grid; place-items: center; width: 2.15rem; aspect-ratio: 1; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-family: Georgia, serif; }
nav { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
nav a, .footer-links a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 0.7rem; text-decoration: none; color: var(--ink-soft); }
nav a:hover, .footer-links a:hover { color: var(--ink); }
main { padding-block: 2.25rem 5rem; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 7vw, 6.2rem); margin: 0; letter-spacing: -0.045em; max-width: 12ch; }
.hero h1 { font-size: clamp(3.2rem, 5.2vw, 5.4rem); max-width: 13ch; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1rem; }
h3 { font-size: 1.35rem; }
p { max-width: 70ch; }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; font-weight: 800; }
.hero { min-height: min(640px, 76vh); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); padding-block: 3rem 5rem; }
.hero-lead { color: var(--ink-soft); font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 52ch; }
.privacy-note { color: var(--ink-soft); font-size: 0.88rem; }
.button { min-height: 48px; border: 1px solid transparent; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.72rem 1.2rem; cursor: pointer; font-weight: 760; text-decoration: none; }
.button-primary { color: #100b19; background: linear-gradient(120deg, var(--gold), #fff0bd); box-shadow: 0 12px 28px rgba(240, 207, 130, 0.17); }
.button-secondary { color: var(--ink); background: transparent; border-color: var(--line); }
.button:disabled { opacity: 0.56; cursor: wait; }
.hero-art { min-width: 0; width: min(100%, 520px); display: grid; place-items: center; justify-self: center; }
.hero-oracle { width: min(100%, 500px); min-height: 520px; position: relative; display: grid; grid-template-rows: 1fr auto auto; place-items: center; isolation: isolate; touch-action: pan-y; }
.celestial-field { position: absolute; inset: 1%; overflow: hidden; border-radius: 48% 52% 46% 54%; background: radial-gradient(circle at 50% 46%, rgba(117,65,219,.2), transparent 48%), conic-gradient(from 210deg, rgba(89,155,255,.08), transparent 18%, rgba(232,200,120,.06) 36%, transparent 55%, rgba(185,140,255,.1) 76%, transparent); border: 1px solid rgba(232,200,120,.08); box-shadow: inset 0 0 70px rgba(5,5,13,.75), 0 0 90px rgba(110,53,211,.2); }
.celestial-field::before, .celestial-field::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px solid rgba(232,200,120,.11); }
.celestial-field::before { background-image: radial-gradient(circle, rgba(255,240,189,.8) 0 1px, transparent 1.5px); background-size: 43px 47px; opacity: .44; transform: rotate(9deg); }
.celestial-field::after { inset: 20%; border-style: dashed; transform: rotate(-18deg); opacity: .7; }
.oracle-halo, .oracle-orbit { position: absolute; left: 50%; top: 45%; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.oracle-halo { width: 74%; aspect-ratio: 1; background: radial-gradient(circle, rgba(185,140,255,.34), rgba(89,155,255,.11) 42%, transparent 70%); filter: blur(2px); box-shadow: 0 0 90px rgba(110,53,211,.36); animation: oracle-breathe 5s ease-in-out infinite; }
.oracle-orbit { width: 86%; aspect-ratio: 1; border: 1px solid rgba(232,200,120,.27); transform: rotate(-13deg) scaleY(.5); animation: oracle-turn 18s linear infinite; }
.oracle-orbit::before, .oracle-orbit::after { content: ""; position: absolute; width: .42rem; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px var(--violet); }
.oracle-orbit::before { left: 12%; top: 19%; }
.oracle-orbit::after { right: 12%; bottom: 19%; }
.zodiac-ring { position: absolute; inset: 8%; display: grid; place-items: start center; padding-top: .6rem; border-radius: 50%; color: rgba(240,207,130,.62); font: 600 .78rem/1 Georgia, serif; letter-spacing: .32em; transform: rotate(5deg); }
.hero-deck-stage { --deck-shift: clamp(5.8rem, 10vw, 8rem); --deck-shift-far: clamp(8rem, 14vw, 10rem); position: relative; width: 100%; height: 420px; align-self: end; perspective: 1300px; transform-style: preserve-3d; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; transition: transform 360ms cubic-bezier(.16,.8,.22,1); }
.hero-deck-stage[data-dragging="true"] { cursor: grabbing; transition: none; }
.hero-deck-card { appearance: none; position: absolute; left: 50%; top: 47%; width: clamp(148px, 38%, 192px); aspect-ratio: 2 / 3; padding: 0; border: 0; border-radius: 5.5% / 3.8%; background: transparent; cursor: pointer; transform-style: preserve-3d; transition: transform 680ms cubic-bezier(.16,.8,.22,1), opacity 420ms ease, filter 420ms ease; }
.hero-deck-card[data-position="0"] { z-index: 5; opacity: 1; filter: saturate(1.08); transform: translate3d(-50%, -50%, 70px) rotateY(0deg) scale(1); }
.hero-deck-card[data-position="-1"] { z-index: 4; opacity: .82; filter: saturate(.8) brightness(.72); transform: translate3d(calc(-50% - var(--deck-shift)), -48%, 0) rotateY(27deg) rotateZ(-7deg) scale(.82); }
.hero-deck-card[data-position="1"] { z-index: 4; opacity: .82; filter: saturate(.8) brightness(.72); transform: translate3d(calc(-50% + var(--deck-shift)), -48%, 0) rotateY(-27deg) rotateZ(7deg) scale(.82); }
.hero-deck-card[data-position="-2"] { z-index: 2; opacity: .25; filter: saturate(.55) brightness(.5); transform: translate3d(calc(-50% - var(--deck-shift-far)), -45%, -70px) rotateY(39deg) rotateZ(-12deg) scale(.66); }
.hero-deck-card[data-position="2"] { z-index: 2; opacity: .25; filter: saturate(.55) brightness(.5); transform: translate3d(calc(-50% + var(--deck-shift-far)), -45%, -70px) rotateY(-39deg) rotateZ(12deg) scale(.66); }
.hero-card-inner { display: block; width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 720ms cubic-bezier(.18,.78,.2,1); }
.hero-deck-card[data-flipped="true"] .hero-card-inner { transform: rotateY(180deg); }
.hero-card-side { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(240,207,130,.48); border-radius: inherit; background: #070714; box-shadow: 0 28px 58px rgba(0,0,0,.62), 0 0 34px rgba(110,53,211,.24); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hero-card-side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.18) 43%, transparent 58%); translate: -130% 0; transition: translate 900ms cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.hero-deck-card[data-position="0"]:hover .hero-card-side::after { translate: 130% 0; }
.hero-card-front { transform: rotateY(180deg); }
.hero-card-side img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-deck-card[data-position="0"]:hover { transform: translate3d(-50%, -52%, 84px) rotateY(0) scale(1.025); }
.hero-deck-controls { position: relative; z-index: 8; width: min(100%, 310px); min-height: 48px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: .5rem; margin-top: -1.1rem; padding: .25rem; border: 1px solid rgba(232,200,120,.2); border-radius: 999px; background: rgba(8,7,18,.76); box-shadow: 0 14px 35px rgba(0,0,0,.36); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero-deck-controls p { margin: 0; text-align: center; color: var(--gold); font-family: Georgia, serif; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-control { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; color: var(--ink); background: rgba(185,140,255,.12); cursor: pointer; font-size: 1.15rem; }
.deck-control:hover { background: rgba(185,140,255,.24); }
.hero-deck-hint { position: relative; z-index: 8; margin: .6rem 0 0; color: var(--ink-soft); font-size: .76rem; text-align: center; }
@keyframes oracle-breathe { 0%, 100% { opacity: .72; scale: .94; } 50% { opacity: 1; scale: 1.04; } }
@keyframes oracle-turn { to { transform: rotate(347deg) scaleY(.5); } }
.tool-section { scroll-margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 0 5rem; }
.tool-form, .result, .content-card, .legal-page, .method-page, .support-block, .faq, .html-sitemap { background: rgba(20,17,34,.84); border: 1px solid var(--line); border-radius: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow); }
.tool-form { position: static; display: block; width: min(100%, 42rem); margin-inline: auto; }
.field-label { display: block; font-weight: 720; margin-block: 1.35rem .45rem; }
textarea { appearance: none; width: 100%; min-height: 126px; resize: vertical; border: 1px solid var(--line); border-radius: .85rem; padding: .9rem; color: var(--ink); background: var(--night-soft); }
.field-hint, .engine-note { color: var(--ink-soft); font-size: .88rem; }
.ritual-prompt { color: var(--violet); font-family: Georgia, serif; font-size: 1.06rem; font-style: italic; }
.form-action { margin-top: 1.2rem; }
.form-error { min-height: 1.7em; color: var(--danger); }
.reading-status { min-height: 1.7em; color: var(--ink-soft); }
.result { min-height: 410px; scroll-margin-top: 1rem; position: relative; overflow: clip; }
.result::before { content: ""; position: absolute; width: 28rem; aspect-ratio: 1; left: 50%; top: 7rem; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(110,53,211,.17), transparent 68%); pointer-events: none; }
.result[hidden] { display: none; }
.score-wrap { display: block; }
.score-figure { display: inline-flex; margin-block: .3rem .8rem; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; }
.result-label { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 3vw, 2.25rem); line-height: 1.12; max-width: 28ch; }
.result-grid { position: relative; display: block; margin-top: 1.4rem; }
.reading-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.65rem, 2vw, 1rem); min-width: 0; max-width: 100%; }
.result-carousel-controls { display: none; }
.reading-cards > .tarot-card { min-width: 0; min-block-size: 0; grid-column: auto; padding: 0; opacity: 0; transform: translateY(2.5rem) scale(.94); transition: opacity 360ms ease, transform 520ms cubic-bezier(.2,.75,.25,1); }
.tarot-card[data-dealt="true"] { opacity: 1; transform: none; }
.tarot-card-frame { width: min(100%, 250px); margin-inline: auto; aspect-ratio: 2 / 3; perspective: 1200px; }
.tarot-card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 520ms cubic-bezier(.2,.75,.25,1); }
.tarot-card[data-reveal="revealed"] .tarot-card-inner { transform: rotateY(180deg); }
.card-side { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(232,200,120,.38); border-radius: 5.5% / 3.8%; box-shadow: 0 20px 42px rgba(0,0,0,.48), 0 0 30px rgba(110,53,211,.12); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #070714; }
.card-front { transform: rotateY(180deg); }
.card-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-art.is-reversed { transform: rotate(180deg); }
.card-sigil { position: absolute; right: .65rem; bottom: .55rem; width: 2rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: rgba(5,5,13,.8); border: 1px solid rgba(232,200,120,.45); }
.card-copy { padding: .85rem .2rem 0; opacity: 0; transform: translateY(.5rem); transition: opacity 300ms ease 180ms, transform 300ms ease 180ms; }
.tarot-card[data-reveal="revealed"] .card-copy { opacity: 1; transform: none; }
.card-copy h3 { margin-block: .25rem .55rem; }
.card-copy > p:not(.card-position):not(.card-family):not(.card-orientation):not(.card-prompt) { color: var(--ink-soft); font-size: .94rem; }
.card-position, .card-family, .card-orientation { color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.card-prompt { padding-top: .8rem; border-top: 1px solid var(--line); color: var(--gold); font-style: italic; }
.result-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.score-figure { color: var(--gold); font-variant-numeric: tabular-nums; }
.result-label { font-weight: 760; }
.related-reading { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; margin-top: 1rem; padding: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid rgba(232,200,120,.25); border-radius: 1.25rem; background: linear-gradient(125deg, rgba(23,20,44,.92), rgba(15,25,55,.82)); box-shadow: var(--shadow); }
.related-reading::after { content: "☽  ·  ✦  ·  ♀"; position: absolute; right: 1.2rem; top: .4rem; color: rgba(240,207,130,.12); font: 700 clamp(3rem, 8vw, 6rem)/1 Georgia, serif; letter-spacing: .1em; pointer-events: none; }
.related-reading > * { position: relative; z-index: 1; }
.related-reading h2 { max-width: 19ch; font-size: clamp(1.65rem, 3.5vw, 2.7rem); }
.content-stack { display: grid; gap: 1rem; }
.content-card, .method-page, .legal-page, .support-block, .faq, .html-sitemap { margin-block: 1rem; }
.content-card h1, .legal-page h1, .html-sitemap h1 { font-size: clamp(2.3rem, 5vw, 4rem); max-width: 16ch; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.faq-item { border-top: 1px solid var(--line); }
.legal-page section { border-top: 1px solid var(--line); padding-top: 1rem; }
.sitemap-groups ul { list-style: none; padding: 0; }
.sitemap-groups li { border-top: 1px solid var(--line); padding-block: 1rem; }
footer { border-top: 1px solid var(--line); padding-block: 2rem 3rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; color: var(--ink-soft); }
.copyright { grid-column: 1 / -1; font-size: .82rem; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 2rem; }
  .hero-art { order: initial; grid-area: auto; width: min(100%, 480px); }
  .hero-oracle { min-height: 470px; }
  .hero-deck-stage { height: 370px; --deck-shift: clamp(5rem, 21vw, 7.2rem); --deck-shift-far: clamp(5.5rem, 25vw, 9.5rem); }
  .tool-section { grid-template-columns: 1fr; }
  .tool-form { position: static; }
  .result-grid { grid-template-columns: 1fr; }
  .result, .result-grid, .tool-section > * { min-width: 0; }
  .reading-cards { display: flex; gap: .9rem; width: 100%; margin-inline: 0; padding: .25rem .1rem 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: .1rem; scrollbar-width: none; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
  .reading-cards::-webkit-scrollbar { display: none; }
  .reading-cards > .tarot-card { flex: 0 0 min(86%, 22rem); scroll-snap-align: center; scroll-snap-stop: always; }
  .tarot-card-frame { width: min(100%, 280px); }
  .result-carousel-controls { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: .6rem; width: min(100%, 22rem); margin: .35rem auto 0; }
  .result-carousel-controls p { margin: 0; color: var(--gold); text-align: center; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .result-carousel-controls .deck-control:disabled { opacity: .35; cursor: default; }
  .related-reading { grid-template-columns: 1fr; }
}

@media (max-width: 38rem) {
  .site-header { align-items: center; flex-wrap: wrap; padding-block: .7rem; }
  nav { width: 100%; max-width: none; justify-content: space-between; border-top: 1px solid var(--line); }
  nav a { padding-inline: .45rem; }
  main { padding-top: 1rem; }
  .hero { gap: 1.25rem; padding-bottom: 2.5rem; }
  .hero-oracle { min-height: 430px; }
  .hero-deck-stage { height: 335px; --deck-shift: clamp(4.2rem, 20vw, 5.8rem); --deck-shift-far: clamp(5rem, 24vw, 7rem); }
  .hero-deck-card { width: clamp(132px, 42%, 160px); }
  .hero-deck-controls { margin-top: -.45rem; }
  .faq-list { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tarot-card { opacity: 1; transform: none; }
  .oracle-halo, .oracle-orbit { animation: none; }
}