/* Akasha design tokens. Dark-first, OKLCH.
 *
 * Generated intent, hand-maintained: keep in step with src/palette.ts and
 * src/grahas.ts. The TypeScript is the source for anything computed; this file
 * is the source for anything a stylesheet needs without a build step.
 */

:root {
  /* Ground. Never pure black -- it kills depth and shows OLED smearing. */
  --void-0: oklch(0.13 0.030 275);
  --void-1: oklch(0.18 0.045 272);
  --void-2: oklch(0.24 0.055 268);
  --void-3: oklch(0.31 0.060 265);

  --nebula-violet: oklch(0.58 0.180 300);
  --nebula-indigo: oklch(0.50 0.160 265);
  --aurora-teal: oklch(0.78 0.130 180);
  --star-white: oklch(0.97 0.010 250);

  /* Gold is a hairline and a highlight, never a fill. */
  --gold-hi: oklch(0.86 0.120 88);
  --gold: oklch(0.78 0.135 85);
  --gold-dim: oklch(0.62 0.100 80);
  --bronze: oklch(0.48 0.075 70);

  --text-hi: oklch(0.96 0.008 260);
  --text: oklch(0.84 0.012 260);
  --text-dim: oklch(0.66 0.015 260);

  /* Gold means the user's own data; cool white means reference or transit. */
  --natal: var(--gold);
  --transit: var(--star-white);

  /* The nine grahas, separated by 0.08 in lightness so the palette survives
     colour-vision deficiency and greyscale. */
  --graha-saturn: oklch(0.32 0.090 265);
  --graha-rahu: oklch(0.40 0.080 300);
  --graha-ketu: oklch(0.48 0.070 40);
  --graha-mars: oklch(0.56 0.170 25);
  --graha-mercury: oklch(0.64 0.140 150);
  --graha-sun: oklch(0.72 0.150 60);
  --graha-jupiter: oklch(0.80 0.140 88);
  --graha-venus: oklch(0.88 0.070 350);
  --graha-moon: oklch(0.96 0.020 250);

  /* Devanagari needs more leading than Latin and is set slightly larger. */
  --leading-deva: 1.8;
  --deva-scale: 1.1;

  --motion-chart-construction: 900ms;
  --motion-glyph-stagger: 40ms;
}

/* Grain. Non-negotiable: 8-bit dark gradients band visibly on cheap Android
   panels. Not animated -- a fullscreen repaint every frame is not affordable
   on the target device. */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Devanagari. Never letterspace, never justify, always declare an explicit
   family -- a fallback that lacks the conjuncts renders broken text rather
   than different text. */
:lang(hi),
:lang(sa),
.deva {
  font-family: 'Tiro Devanagari Sanskrit', 'Mukta', 'Noto Sans Devanagari', serif;
  line-height: var(--leading-deva);
  letter-spacing: normal;
  text-align: start;
  font-size: calc(1em * var(--deva-scale));
}

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


/* --- type ----------------------------------------------------------------
   Loaded with `unicode-range` so Latin and Devanagari come down independently:
   BUILD-PROMPT 6.5 note 8 warns that a Devanagari subset is 200 KB+ per static
   weight, so an English reader must never pay for one. These are the variable
   files for the same reason.

   `font-display: swap` rather than `optional`. The brand faces are a nicety;
   the text is not, and on a slow connection a reader should get system-font
   text immediately and the brand face when it arrives. `optional` would mean
   most Indian 3G readers never see the face at all, which is a worse outcome
   than a swap they barely notice on a page this static.

   CLAUDE.md requires an explicit Devanagari family in every stack. The chart
   SVG already declares one; until now the page body did not, which left every
   Devanagari glyph outside the chart to browser fallback — and on Android that
   is the failure the invariant exists to prevent. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tiro Devanagari Sanskrit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tirodevanagarisanskrit/v7/MCoAzBbr09vVUgVBM8FWu_yZdZkhkg-I0nUlb59ZFIsrstM.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--void-0);
  color: var(--text);
  font-family: 'Geist Sans', ui-sans-serif, system-ui,
    'Tiro Devanagari Sanskrit', 'Noto Sans Devanagari', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}


/* The grain. `body` already carries `class="grain"`; until now the class did
   nothing, which left the radial gradients above to band on exactly the cheap
   panels this product targets. An inline feTurbulence costs no request and
   about 300 bytes, and it is what the gradient comment above was relying on. */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Anyone who has asked for less motion has usually also asked for less visual
   noise. The grain is decoration; drop it rather than defend it. */
@media (prefers-reduced-motion: reduce) {
  .grain::after { display: none; }
}

/* The cosmic ground. Radial and conic, never a full-bleed linear, and low
   chroma over a long distance -- a linear gradient across a dark field bands
   on exactly the panels this ships to, and grain is what rescues the rest. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80ch 60ch at 18% -10%, oklch(0.24 0.055 268 / 0.55), transparent 70%),
    radial-gradient(70ch 50ch at 92% 8%, oklch(0.22 0.060 300 / 0.40), transparent 72%),
    radial-gradient(90ch 70ch at 50% 115%, oklch(0.20 0.050 250 / 0.45), transparent 75%);
}

h1, h2, h3 {
  font-family: 'Instrument Serif', ui-serif, Georgia,
    'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif;
  font-weight: 400;
}

/* Devanagari needs more room between lines than Latin and reads small at the
   same nominal size. CLAUDE.md: 1.75-1.9 unitless, 5-15% larger, never
   letterspaced and never justified. */
:lang(hi) {
  line-height: 1.85;
  font-size: 1.08em;
  letter-spacing: normal;
  text-align: left;
}
h1 { font-size: clamp(28px, 6vw, 42px); line-height: 1.15; margin: 0 0 8px; color: var(--text-hi); }
h2 { font-size: 20px; margin: 40px 0 12px; color: var(--text-hi); }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.wrap { max-width: 68ch; margin: 0 auto; padding: 40px 20px 80px; }
.lede { color: var(--text-dim); max-width: 58ch; margin: 0 0 32px; }

fieldset { border: 0; padding: 0; margin: 0 0 28px; }
legend { padding: 0; font-weight: 500; color: var(--text-hi); margin-bottom: 4px; }
.hint { color: var(--text-dim); font-size: 14px; margin: 0 0 10px; }

/* GOV.UK three-field date. Never a calendar picker: on the highest-drop-off
   screen in the category, a picker asks the user to navigate four hundred
   months back to a date they already know. */
.date-parts { display: flex; gap: 12px; }
.date-part { display: flex; flex-direction: column; gap: 4px; }
.date-part label { font-size: 14px; color: var(--text-dim); }
.date-part input { width: 4.5ch; }
.date-part.year input { width: 7ch; }

input, select {
  background: var(--void-1);
  color: var(--text-hi);
  border: 1px solid var(--void-3);
  border-radius: 4px;
  padding: 10px 12px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  min-height: 44px;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
select, input[type='text'] { width: 100%; max-width: 42ch; }

.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.choice input { min-height: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); }
.choice span { display: block; }
.choice .note { color: var(--text-dim); font-size: 14px; }

button {
  background: var(--void-2);
  color: var(--text-hi);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 12px 22px;
  font: inherit;
  min-height: 44px;
  cursor: pointer;
}
button:hover { border-color: var(--gold); }

.panel {
  background: var(--void-1);
  border: 1px solid var(--void-3);
  border-left: 2px solid var(--gold-dim);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 20px 0;
}
.panel h3 { margin: 0 0 6px; font-size: 15px; font-family: inherit; font-weight: 500; color: var(--text-hi); }
.panel p { margin: 0 0 8px; font-size: 14px; color: var(--text-dim); }
.panel p:last-child { margin-bottom: 0; }
.panel.warn { border-left-color: var(--nebula-violet); }
.panel h2 { margin: 0 0 8px; font-size: 17px; }

/* The crisis panel. Loud on purpose and never collapsed: a helpline the reader
   has to expand is a helpline they will not call. */
.panel-urgent {
  border-left-color: oklch(0.72 0.14 25);
  border-left-width: 3px;
}
.panel-urgent ul { margin: 10px 0; padding-left: 18px; }
.panel-urgent li { font-size: 14px; color: var(--text-hi); margin-bottom: 4px; }

textarea {
  width: 100%;
  max-width: 60ch;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  background: var(--void-1);
  color: var(--text-hi);
  border: 1px solid var(--void-3);
  border-radius: 4px;
  padding: 8px 10px;
  resize: vertical;
}
textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.resolved { font-variant-numeric: tabular-nums; color: var(--text-hi); }

.error { color: oklch(0.72 0.14 25); font-size: 14px; margin: 8px 0 0; }

.figures { display: flex; flex-wrap: wrap; gap: 32px; margin: 24px 0; }
figure { margin: 0; }
figcaption { margin-top: 8px; font-size: 13px; color: var(--text-dim); }

/* The chart's own table is the accessible fallback. Keep it reachable by
   keyboard rather than hidden outright. */
.ak-table {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  /* A table ignores width: 1px and lays out at its full width, so hidden this
     way it still ran 400px past the right edge of a phone and the whole page
     scrolled sideways. Anchored on the right it extends into negative space
     instead, which no page can scroll to. */
  right: 0;
}
.ak-table:focus-within {
  position: static; width: auto; height: auto; clip-path: none;
  border-collapse: collapse; margin-top: 16px; font-size: 14px;
}

table.data { border-collapse: collapse; width: 100%; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--void-2); }
table.data th { color: var(--text-dim); font-weight: 500; }
table.data td { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--void-2); padding: 8px 12px; z-index: 100; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* --- the reference layer -------------------------------------------------
   Collapsed by default. <details> is native HTML, so this costs no script
   and works in a browser too old for one. */
details {
  border-top: 1px solid var(--void-3);
  padding: 12px 0;
}
details > summary {
  cursor: pointer;
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: 16px;
  color: var(--text-hi);
  list-style: none;
  padding-left: 20px;
  position: relative;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--gold);
}
details[open] > summary::before { content: '−'; }
details > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
details > *:not(summary) { margin-top: 12px; }

/* Wide tables scroll inside their own box. The page body must never scroll
   sideways — on a phone that makes the whole layout feel broken. */
.scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll table { min-width: 100%; }

.entry {
  border-left: 2px solid var(--void-3);
  padding-left: 14px;
  margin: 16px 0;
}
.entry h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--text-hi);
  font-weight: 500;
}
.entry p { margin: 0 0 6px; font-size: 14px; color: var(--text-dim); }


/* --- the page reveal -----------------------------------------------------
   The chart page is streamed: everything computed is flushed at once, then
   the connection stays open while the reading is written. So the reveal has
   to be pure CSS with no coordinating script, and it has to look right when
   the second half arrives seconds later rather than assuming one paint.

   `animation` on arrival rather than a transition from a hidden state. A
   transition needs something to flip the initial value, which is a script;
   an entry animation runs the moment the element is parsed, which is exactly
   when a streamed chunk appears. That property is what makes this work with
   chunked transfer at all. */
@media (prefers-reduced-motion: no-preference) {
  .wrap > h1,
  .wrap > .lede,
  .wrap > .panel,
  .wrap > h2,
  .wrap > .figures,
  .wrap > table,
  .wrap > section,
  .wrap > details {
    animation: ak-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  /* A short stagger down the first few blocks, then nothing. Staggering the
     whole page would make the last section arrive a second and a half late
     for no gain, and on a long chart page most of it is below the fold
     anyway. */
  .wrap > *:nth-child(1) { animation-delay: 0ms; }
  .wrap > *:nth-child(2) { animation-delay: 60ms; }
  .wrap > *:nth-child(3) { animation-delay: 120ms; }
  .wrap > *:nth-child(4) { animation-delay: 180ms; }

  /* The crisis panel never waits and never moves. Someone who has just typed
     that they cannot go on should not watch a helpline animate in. */
  .wrap > .panel-urgent { animation: none !important; }

  details[open] > *:not(summary) {
    animation: ak-unfold 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes ak-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes ak-unfold {
  from { opacity: 0; transform: translate3d(0, -4px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Only opacity and transform are animated anywhere above. They are the two
   properties the compositor can handle without layout or paint, which is what
   keeps this inside the sustained 8 ms budget on the SoCs this ships to —
   those throttle within 60–120 s, so a 16 ms peak budget would be measuring
   the wrong thing. */


/* The AGPL source offer. Quiet but present on every page: §13 asks for it to
   be prominent, which means findable without being the loudest thing here. */
.ak-footer {
  max-width: 72ch;
  margin: 48px auto 32px;
  padding: 16px 20px 0;
  border-top: 1px solid var(--void-3);
}
.ak-footer p { margin: 0; font-size: 13px; color: var(--text-dim); }
.ak-footer a { color: var(--gold-dim); }


/* --- the sky ------------------------------------------------------------
   Real stars, in their real colours, as they were above the birth place at
   the birth moment. Server-rendered SVG rather than WebGL: it costs no
   JavaScript, renders on a phone that would never run a shader, and the thing
   that makes a starfield look real is colour rather than bloom.

   **A band at the top, not a layer behind everything.** Fixed behind the whole
   page it looked right in a screenshot and was unreadable in use: every line
   of prose sat on a shimmering field, and no amount of vignette fixed it
   without dimming the stars until they were pointless. As a hero band the
   composition does the work instead — you arrive inside the sky, and scrolling
   down carries you out of it into the reading. The "entering" moment is the
   arrival, and it is not asked to survive four screens of tables. */
.ak-sky-ground {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 108vh;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: ak-sky-in 2600ms cubic-bezier(0.22, 1, 0.36, 1) 150ms forwards;

  /* Faded out before it reaches the content, so nothing is read against it.
     The mask is what lets the stars stay bright where they are visible. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 96%);
}
.ak-sky-ground svg {
  width: 118%;
  height: 118%;
  margin: -9% 0 0 -9%;
  display: block;
}

/* The stars come up slowly: eyes adjusting to the dark. It also keeps the
   field from competing with the chart drawing itself at the same moment. */
@keyframes ak-sky-in { to { opacity: 0.9; } }

/* One slow turn, a full rotation per sidereal day. Nothing visibly moves, but
   over a minute of reading it has. Truthful, and the reason it never reads as
   a screensaver. */
@media (prefers-reduced-motion: no-preference) {
  .ak-sky-ground svg {
    transform-origin: 50% 50%;
    animation: ak-sky-turn 86164s linear infinite;
  }
}
@keyframes ak-sky-turn { to { transform: rotate(360deg); } }

/* A soft well behind the first screen, so the heading has somewhere to sit
   without the stars being dimmed everywhere. */
.has-sky .wrap > h1,
.has-sky .wrap > .lede {
  text-shadow: 0 2px 24px oklch(0.10 0.030 275 / 0.95),
               0 1px 4px oklch(0.10 0.030 275 / 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .ak-sky-ground { animation: none; opacity: 0.75; }
}


/* --- your numbers --------------------------------------------------------
   A table of numbers is a calculator result. The headline number gets real
   size because it is the one thing a reader takes away, and everything under
   it is written to them rather than about the number. */
.num-hero {
  display: flex;
  gap: 22px;
  align-items: center;
  margin: 20px 0 28px;
  padding: 22px 24px;
  border: 1px solid var(--void-3);
  border-left: 2px solid var(--gold);
  border-radius: 6px;
  background: var(--void-1);
}
.num-hero-figure {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: 76px;
  line-height: 0.8;
  color: var(--gold);
  min-width: 1.2em;
  text-align: center;
}
.num-kicker {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.num-hero-body h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--text-hi);
}
.num-essence { margin: 0; font-size: 16px; color: var(--text); line-height: 1.6; }

.num-detail { margin: 0 0 24px; }

.num-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  margin: 14px 0;
}
.num-card {
  border: 1px solid var(--void-3);
  border-radius: 6px;
  padding: 16px 18px;
  background: var(--void-1);
}
.num-figure {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: var(--gold-dim);
  margin-bottom: 6px;
}
.num-card h4 { margin: 0 0 2px; font-size: 15px; color: var(--text-hi); font-weight: 500; }
.num-card p { margin: 0 0 6px; font-size: 14px; color: var(--text-dim); }
.num-ruler { color: var(--gold-dim) !important; font-size: 13px !important; }

@media (max-width: 520px) {
  .num-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
  .num-hero-figure { font-size: 60px; text-align: left; }
}


/* Citation markers. Present and checkable, out of the way of the sentence.
   Raw `[F.DASHA.L1]` three times a paragraph is where a normal reader stops
   reading, and deleting them would throw away the audit trail that is the
   point of the whole architecture. */
sup.cite {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--gold-dim);
  opacity: 0.55;
  margin-left: 1px;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
sup.cite:hover { opacity: 1; }


/* --- where you are right now --------------------------------------------
   The section the product exists for, and the last one to be built. */
.now-hero {
  margin: 18px 0 24px;
  padding: 22px 24px;
  border: 1px solid var(--void-3);
  border-left: 2px solid var(--gold);
  border-radius: 6px;
  background: var(--void-1);
}
.now-hero h3 { margin: 0 0 10px; font-size: 24px; color: var(--text-hi); }

.now-bars { display: grid; gap: 14px; margin-top: 18px; }
.now-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-hi);
  margin-bottom: 5px;
}
.now-bar-label .hint { margin: 0; font-variant-numeric: tabular-nums; }

/* A bar, not a percentage in a table. How far through a period you are is
   the one fact here that a glance can carry. */
.now-bar-track {
  height: 4px;
  border-radius: 2px;
  background: var(--void-3);
  overflow: hidden;
}
.now-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold-dim), var(--gold));
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .now-bar-fill {
    animation: ak-bar 900ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 240ms;
  }
}
@keyframes ak-bar { from { transform: scaleX(0); transform-origin: left; } }
.now-bar .hint { margin: 4px 0 0; font-size: 12px; }

.lede-small { font-size: 14px; color: var(--text-dim); margin-top: -6px; }


/* --- small screens --------------------------------------------------------
   Measured at 375px, the chart page was 900px wide: the Dasha River SVGs carry
   a fixed width of 880 and the tables ran to 981px, so the whole page scrolled
   sideways on a phone, which is where a link sent to a friend is opened.
   SVGs with a viewBox scale cleanly once allowed to. Tables cannot shrink
   without becoming unreadable, so each one sits in a .scroll wrapper and
   scrolls inside itself instead of dragging the page with it. */
/* The last thing pushing a phone page sideways was a 64-character ephemeris
   hash with no break opportunity in it. break-word only splits a word that
   would otherwise overflow, so ordinary text, Devanagari included, is untouched,
   and tables still size to their content and scroll inside .scroll. */
.wrap { overflow-wrap: break-word; }
.wrap svg { max-width: 100%; height: auto; }
.wrap figure { max-width: 100%; }
.scroll { max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .figures { gap: 20px; }
}

/* --- the reading, being written ------------------------------------------
   The server appends one line per stage as it reaches it. The newest line is
   the live one; earlier lines stay, dimmed, as a record of what has already
   happened. No script: :last-child re-matches as each line arrives. */
.ak-stages { list-style: none; margin: 14px 0 0; padding: 0; }
.ak-stages li {
  display: flex; gap: 12px; align-items: baseline;
  margin: 0 0 6px; font-size: 14px; color: var(--text-dim); opacity: 0.55;
}
.ak-stages li:last-child { opacity: 1; color: var(--text-hi); }
.ak-stages li::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-dim); transform: translateY(-1px);
}
.ak-stages li:last-child::before { background: var(--gold); }
.ak-stage-t { flex: none; min-width: 3.2ch; color: var(--text-dim); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .ak-stages li:last-child::before { animation: ak-pulse 1.6s ease-in-out infinite; }
}
@keyframes ak-pulse { 50% { opacity: 0.3; transform: translateY(-1px) scale(0.7); } }

/* Faces from the Google Fonts CSS API: Latin for Cormorant Garamond and
   Manrope, Devanagari for Noto Sans Devanagari. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd58jD-htM8A_6pUKz9ugk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd58jD-iNM8A_6pUKz9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansdevanagari/v30/TuG7UUFzXI5FBtUq5a8bjKYTZjtRU6Sgv3NaV_SNmI0b8QQCQmHN5TV_5Kl4-GIB.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansdevanagari/v30/TuG7UUFzXI5FBtUq5a8bjKYTZjtRU6Sgv3NaV_SNmI0b8QQCQmHN5TV_5Kl4-GIB.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansdevanagari/v30/TuG7UUFzXI5FBtUq5a8bjKYTZjtRU6Sgv3NaV_SNmI0b8QQCQmHN5TV_5Kl4-GIB.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* === Akasha experience ===================================================
   The redesigned pages: home, the journey, the report. Scoped under body.ak so
   the older pages keep their own look until each is moved across. */

:root {
  --ak-nav-h: 82px;
  --ak-nav-total: calc(var(--ak-nav-h) + env(safe-area-inset-top, 0px));
  --ak-bg: #03040b;
  --ak-ink: #f5f0e6;
  --ak-ink-2: #cdc7d9;
  --ak-ink-3: #9a94b0;
  --ak-gold: #f2c86a;
  --ak-gold-2: #d9a441;
  --ak-gold-glow: rgba(242, 200, 106, 0.38);
  --ak-violet: #9b82ff;
  --ak-cyan: #7fe6ef;
  --ak-rose: #ff8db4;
  --ak-panel: rgba(9, 11, 28, 0.76);
  --ak-panel-solid: rgba(10, 12, 30, 0.92);
  --ak-line: rgba(255, 255, 255, 0.09);
  --ak-line-gold: rgba(242, 200, 106, 0.3);
  --ak-radius: 22px;
  --ak-serif: 'Cormorant Garamond', 'Tiro Devanagari Sanskrit', Georgia, serif;
  --ak-sans: 'Manrope', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ak-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ak-scroll: 0;
}

body.ak {
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-family: var(--ak-sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
body.ak::before { display: none; }
body.ak a { color: inherit; }
body.ak :lang(hi) { font-family: 'Noto Sans Devanagari', var(--ak-sans); }

.ak-space {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.8s var(--ak-ease);
}
.ak-gl .ak-space { opacity: 1; }
.ak-sky-fallback { position: fixed; inset: 0; z-index: 0; opacity: 0.8; }
.ak-sky-fallback svg { width: 100%; height: 100%; }

.ak-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(110% 80% at 0% 55%, rgba(3, 4, 11, 0.82) 0%, rgba(3, 4, 11, 0.45) 38%, rgba(3, 4, 11, 0) 64%),
    linear-gradient(180deg, rgba(3, 4, 11, calc(var(--ak-scroll) * 0.72)) 0%, rgba(3, 4, 11, calc(0.2 + var(--ak-scroll) * 0.62)) 100%);
}
.ak-nav, .ak-main, .ak-footer { position: relative; z-index: 2; }

/* --- navigation --------------------------------------------------------- */
.ak-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px clamp(20px, 4vw, 56px);
  transition: background 0.45s var(--ak-ease), border-color 0.45s var(--ak-ease);
  border-bottom: 1px solid transparent;
}
.ak-nav.is-scrolled {
  background: rgba(4, 5, 14, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--ak-line);
}
.ak-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--ak-serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ak-ink);
}
.ak-brand-mark svg { width: 32px; height: 32px; display: block; }
.ak-brand-sm { font-size: 22px; }
.ak-brand-sm .ak-brand-mark svg { width: 26px; height: 26px; }
.ak-nav-links { display: flex; gap: 30px; margin-left: auto; }
.ak-nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ak-ink-2);
  transition: color 0.3s;
}
@media (hover: hover) {
  .ak-nav-links a:hover { color: var(--ak-ink); }
}
@media (max-width: 760px) {
  .ak-nav-links { display: none; }
  .ak-nav .ak-btn { margin-left: auto; }
}

/* --- buttons ------------------------------------------------------------ */
body.ak .ak-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  font: 700 16px/1 var(--ak-sans);
  letter-spacing: 0.01em;
  color: #1c1405;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #fff0c2 0%, #f2c86a 42%, #d49b37 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, 0.6),
    0 12px 40px -10px rgba(242, 200, 106, 0.6),
    0 0 90px -20px rgba(242, 200, 106, 0.5);
  transition: transform 0.4s var(--ak-ease), box-shadow 0.4s var(--ak-ease);
}
body.ak .ak-btn svg { width: 20px; height: 20px; transition: transform 0.4s var(--ak-ease); }
body.ak .ak-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.65) 48%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 1s var(--ak-ease);
}
@media (hover: hover) {
  body.ak .ak-btn:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 1px rgba(255, 240, 200, 0.8),
      0 18px 60px -10px rgba(242, 200, 106, 0.75),
      0 0 120px -18px rgba(242, 200, 106, 0.6);
  }
}
@media (hover: hover) {
  body.ak .ak-btn:hover::after { transform: translateX(130%); }
}
@media (hover: hover) {
  body.ak .ak-btn:hover svg { transform: translateX(4px); }
}
body.ak .ak-btn:focus-visible { outline: 2px solid #fff3cf; outline-offset: 4px; }
body.ak .ak-btn-ghost {
  color: var(--ak-ink);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
body.ak .ak-btn-ghost::after { display: none; }
@media (hover: hover) {
  body.ak .ak-btn-ghost:hover { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.5); }
}
body.ak .ak-btn-sm { min-height: 42px; padding: 0 22px; font-size: 14px; }

/* --- type --------------------------------------------------------------- */
.ak-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: 700 12px/1.2 var(--ak-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ak-gold);
}
.ak-eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ak-gold));
}

/* --- hero --------------------------------------------------------------- */
.ak-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 130px clamp(22px, 6vw, 104px) 110px;
}
.ak-hero-inner { max-width: 680px; }
body.ak .ak-hero h1 {
  margin: 26px 0 26px;
  font-family: var(--ak-serif);
  font-weight: 500;
  font-size: clamp(52px, 7.2vw, 116px);
  line-height: 0.94;
  letter-spacing: -0.018em;
  color: var(--ak-ink);
  text-shadow: 0 6px 50px rgba(0, 0, 0, 0.65);
}
.ak-hero h1 em {
  font-style: italic;
  padding-right: 0.08em;
  background: linear-gradient(100deg, #fff4d4 0%, #f2c86a 45%, #c9a0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.ak-lede {
  max-width: 54ch;
  margin: 0 0 38px;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.72;
  color: var(--ak-ink-2);
}
.ak-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ak-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 28px 0 0;
  font-size: 13.5px;
  color: var(--ak-ink-3);
}
.ak-meta span::before { content: '✦'; margin-right: 8px; font-size: 10px; color: var(--ak-gold); }
.ak-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 26px;
  height: 44px;
  margin-left: -13px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.ak-scroll-cue span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ak-gold);
  animation: ak-cue 2.2s var(--ak-ease) infinite;
}
@keyframes ak-cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

@media (max-width: 899px) {
  .ak-hero { align-items: end; padding-top: 44vh; padding-bottom: 96px; }
  body.ak .ak-hero h1 { font-size: clamp(44px, 12vw, 64px); }
  .ak-veil {
    background:
      linear-gradient(180deg, rgba(3, 4, 11, 0) 25%, rgba(3, 4, 11, 0.7) 58%, rgba(3, 4, 11, 0.86) 100%),
      linear-gradient(180deg, rgba(3, 4, 11, calc(var(--ak-scroll) * 0.6)) 0%, rgba(3, 4, 11, calc(var(--ak-scroll) * 0.6)) 100%);
  }
  .ak-scroll-cue { display: none; }
}

/* --- entrances ---------------------------------------------------------- */
.ak-enter, .ak-reveal {
  --i: 0;
}
.ak-js .ak-enter { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(8px); }
.ak-ready .ak-enter {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 1.3s var(--ak-ease), transform 1.3s var(--ak-ease), filter 1.3s var(--ak-ease);
  transition-delay: calc(var(--i) * 130ms + 350ms);
}
.ak-js .ak-reveal { opacity: 0; transform: translate3d(0, 44px, 0); }
.ak-js .ak-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--ak-ease), transform 1.1s var(--ak-ease);
  transition-delay: calc(var(--i) * 110ms);
}
.ak-leaving .ak-main, .ak-leaving .ak-nav, .ak-leaving .ak-footer {
  opacity: 0;
  transform: scale(0.97);
  filter: blur(6px);
  transition: opacity 0.9s var(--ak-ease), transform 1.2s var(--ak-ease), filter 0.9s;
}

/* --- sections ----------------------------------------------------------- */
.ak-section { position: relative; padding: clamp(84px, 11vw, 150px) clamp(22px, 6vw, 104px); }
.ak-section-tight { padding-top: 20px; }
.ak-section-head { max-width: 780px; margin: 0 auto 60px; text-align: center; }
body.ak .ak-section h2 {
  margin: 20px 0 20px;
  font-family: var(--ak-serif);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ak-ink);
}
.ak-section-head p { max-width: 60ch; margin: 0 auto; font-size: 18px; color: var(--ak-ink-2); }
.ak-section-head .ak-eyebrow { justify-content: center; }

.ak-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1260px;
  margin: 0 auto;
}
@media (max-width: 1040px) { .ak-cards { grid-template-columns: 1fr; max-width: 640px; } }
.ak-card {
  position: relative;
  padding: 36px 32px 30px;
  border-radius: var(--ak-radius);
  background: linear-gradient(180deg, rgba(22, 24, 58, 0.78), rgba(8, 9, 24, 0.9));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.6s var(--ak-ease), box-shadow 0.6s var(--ak-ease);
}
.ak-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(242, 200, 106, 0.55), rgba(155, 130, 255, 0.18) 42%, rgba(255, 255, 255, 0.06) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@media (hover: hover) {
  .ak-card:hover { transform: translateY(-6px); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95), 0 0 60px -30px var(--ak-gold-glow); }
}
.ak-card-icon { width: 66px; height: 66px; margin-bottom: 24px; }
.ak-card-icon svg { width: 100%; height: 100%; display: block; }
body.ak .ak-card h3 { margin: 0 0 8px; font-family: var(--ak-serif); font-size: 36px; font-weight: 600; line-height: 1.05; color: var(--ak-ink); }
.ak-card-sub { margin: 0 0 22px; font-size: 16px; color: var(--ak-ink-2); }
.ak-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ak-list li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: var(--ak-ink); }
.ak-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.5em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--ak-gold);
  box-shadow: 0 0 14px var(--ak-gold-glow);
}
.ak-card-foot {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ak-line);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ak-ink-3);
}

.ak-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1180px;
  margin: 0 auto;
}
.ak-steps::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 17%;
  right: 17%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 200, 106, 0.55), transparent);
}
.ak-step { text-align: center; padding: 0 10px; }
.ak-step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 24px;
  border-radius: 50%;
  font-family: var(--ak-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ak-gold);
  background: radial-gradient(circle, rgba(242, 200, 106, 0.2), rgba(8, 9, 24, 0.95) 68%);
  box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.45), 0 0 46px -8px var(--ak-gold-glow);
}
body.ak .ak-step h3 { margin: 0 0 10px; font-family: var(--ak-serif); font-size: 30px; font-weight: 600; color: var(--ak-ink); }
.ak-step p { max-width: 34ch; margin: 0 auto; color: var(--ak-ink-2); }
@media (max-width: 860px) {
  .ak-steps { grid-template-columns: 1fr; gap: 44px; }
  .ak-steps::before { display: none; }
}

.ak-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1120px;
  margin: 0 auto;
  border-radius: var(--ak-radius);
  background: var(--ak-panel);
  box-shadow: inset 0 0 0 1px var(--ak-line);
}
.ak-stat { padding: 36px 22px; text-align: center; }
.ak-stat + .ak-stat { box-shadow: inset 1px 0 0 var(--ak-line); }
.ak-stat strong {
  display: block;
  font-family: var(--ak-serif);
  font-size: clamp(44px, 5vw, 66px);
  font-weight: 500;
  line-height: 1;
  color: var(--ak-gold);
}
.ak-stat span { display: block; margin-top: 12px; font-size: 14px; color: var(--ak-ink-2); }
.ak-stats-note { margin: 22px auto 0; text-align: center; font-size: 14px; color: var(--ak-ink-3); }
@media (max-width: 760px) {
  .ak-stats { grid-template-columns: 1fr 1fr; }
  .ak-stat:nth-child(3) { box-shadow: inset 0 1px 0 var(--ak-line); }
  .ak-stat:nth-child(4) { box-shadow: inset 1px 0 0 var(--ak-line), inset 0 1px 0 var(--ak-line); }
}

.ak-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}
.ak-split h2 { text-align: left; }
.ak-split-text { max-width: 52ch; font-size: 18px; color: var(--ak-ink-2); }
@media (max-width: 860px) { .ak-split { grid-template-columns: 1fr; } }
.ak-orbit { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; margin: 0 auto; }
.ak-orbit-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.22); }
.ak-orbit-ring.r2 { inset: 16%; box-shadow: inset 0 0 0 1px rgba(155, 130, 255, 0.28); }
.ak-orbit-ring.r3 { inset: 32%; box-shadow: inset 0 0 0 1px rgba(127, 230, 239, 0.25); }
.ak-orbit-core {
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6da, #f2c86a 45%, #7a5516 100%);
  box-shadow: 0 0 60px rgba(242, 200, 106, 0.55), 0 0 140px rgba(242, 200, 106, 0.25);
}
.ak-orbit-dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; }
.ak-orbit-dot.d1 { background: #b9a6ff; box-shadow: 0 0 16px #b9a6ff; animation: ak-orbit-a 18s linear infinite; }
.ak-orbit-dot.d2 { background: #8fe6ee; box-shadow: 0 0 16px #8fe6ee; animation: ak-orbit-b 12s linear infinite; }
.ak-orbit-dot.d3 { background: #ffd98a; box-shadow: 0 0 16px #ffd98a; animation: ak-orbit-c 8s linear infinite; }
@keyframes ak-orbit-a { from { transform: rotate(0deg) translateX(210px); } to { transform: rotate(360deg) translateX(210px); } }
@keyframes ak-orbit-b { from { transform: rotate(120deg) translateX(143px); } to { transform: rotate(480deg) translateX(143px); } }
@keyframes ak-orbit-c { from { transform: rotate(240deg) translateX(76px); } to { transform: rotate(600deg) translateX(76px); } }
@media (max-width: 480px) {
  @keyframes ak-orbit-a { from { transform: rotate(0deg) translateX(46vw); } to { transform: rotate(360deg) translateX(46vw); } }
}

.ak-final .ak-section-head { margin-bottom: 0; }
.ak-final .ak-btn { margin-top: 36px; }

/* --- footer ------------------------------------------------------------- */
.ak-footer {
  padding: 50px clamp(22px, 6vw, 104px) 44px;
  background: linear-gradient(180deg, rgba(3, 4, 11, 0), rgba(3, 4, 11, 0.94) 40%);
  box-shadow: inset 0 1px 0 var(--ak-line);
  color: var(--ak-ink-3);
  font-size: 13px;
  line-height: 1.7;
}
.ak-footer-inner { max-width: 1160px; margin: 0 auto; }
.ak-footer p { max-width: 90ch; margin: 14px 0 0; }
.ak-footer a { color: var(--ak-ink-2); }


/* --- the journey -------------------------------------------------------- */
[hidden] { display: none !important; }
.ak-journey { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 104px 18px 56px; }
.ak-console {
  position: relative;
  width: min(660px, 100%);
  padding: clamp(26px, 5vw, 50px);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(20, 22, 54, 0.8), rgba(7, 8, 22, 0.9));
  box-shadow: 0 70px 140px -50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}
.ak-console::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(242, 200, 106, 0.6), rgba(155, 130, 255, 0.2) 45%, rgba(255, 255, 255, 0.05) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.ak-js .ak-console { animation: ak-console-in 1.3s var(--ak-ease) 0.15s both; }
@keyframes ak-console-in {
  from { opacity: 0; transform: translate3d(0, 50px, 0) scale(0.95); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: none; }
}

.ak-stepper {
  --progress: 0;
  position: relative;
  display: none;
  justify-content: space-between;
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}
.ak-js .ak-stepper { display: flex; }
.ak-stepper::before, .ak-stepper::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 12%;
  height: 1px;
}
.ak-stepper::before { right: 12%; background: rgba(255, 255, 255, 0.12); }
.ak-stepper::after {
  width: calc(var(--progress) * 76%);
  background: linear-gradient(90deg, rgba(242, 200, 106, 0.3), #f2c86a);
  box-shadow: 0 0 12px var(--ak-gold-glow);
  transition: width 0.8s var(--ak-ease);
}
.ak-stepper li {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ak-ink-3);
  transition: color 0.5s;
}
.ak-stepper li::before {
  content: '';
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #0b0d22;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transition: background 0.5s, box-shadow 0.5s;
}
.ak-stepper li.is-done { color: var(--ak-ink-2); }
.ak-stepper li.is-done::before { background: #f2c86a; box-shadow: 0 0 14px var(--ak-gold-glow); }
.ak-stepper li.is-current { color: var(--ak-gold); }
.ak-stepper li.is-current::before {
  background: radial-gradient(circle, #fff6da 0%, #f2c86a 65%);
  box-shadow: 0 0 0 6px rgba(242, 200, 106, 0.16), 0 0 26px var(--ak-gold-glow);
}

.ak-wizard { margin: 0; }
.ak-step-panel { min-width: 0; margin: 0; padding: 0; border: 0; }
.ak-step-panel + .ak-step-panel { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--ak-line); }
.ak-js .ak-step-panel { display: none; margin: 0; padding: 0; border: 0; }
.ak-js .ak-step-panel.is-active { display: block; }
.ak-js .ak-step-panel.from-right { animation: ak-step-right 0.75s var(--ak-ease) both; }
.ak-js .ak-step-panel.from-left { animation: ak-step-left 0.75s var(--ak-ease) both; }
.ak-step-panel.shake { animation: ak-shake 0.45s ease both; }
@keyframes ak-step-right { from { opacity: 0; transform: translate3d(48px, 0, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ak-step-left { from { opacity: 0; transform: translate3d(-48px, 0, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ak-shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

body.ak .ak-step-panel h1, body.ak .ak-step-panel h2 {
  margin: 14px 0 10px;
  font-family: var(--ak-serif);
  font-weight: 500;
  font-size: clamp(36px, 5.4vw, 54px);
  line-height: 1.02;
  color: var(--ak-ink);
}
.ak-hint { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--ak-ink-2); }
.ak-label { margin: 8px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--ak-ink-2); }
.ak-note { margin: 4px 0 0; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; color: var(--ak-ink-2); background: rgba(155, 130, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(155, 130, 255, 0.25); }

.ak-field { display: grid; gap: 8px; margin: 0 0 18px; }
.ak-field > span { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--ak-ink-2); }
.ak-field em { margin-left: 6px; font-style: normal; font-weight: 500; letter-spacing: 0; color: var(--ak-ink-3); }
body.ak .ak-input {
  width: 100%;
  max-width: none;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  background: rgba(3, 4, 14, 0.58);
  color: var(--ak-ink);
  font: 500 17px/1.2 var(--ak-sans);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  color-scheme: dark;
}
body.ak .ak-input::placeholder { color: rgba(205, 199, 217, 0.42); }
body.ak .ak-input:focus { outline: none; border-color: rgba(242, 200, 106, 0.75); box-shadow: 0 0 0 4px rgba(242, 200, 106, 0.16); background: rgba(3, 4, 14, 0.8); }
body.ak textarea.ak-input { min-height: 118px; padding: 16px 18px; line-height: 1.6; resize: vertical; }
body.ak select.ak-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23f2c86a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}
.ak-date { display: grid; grid-template-columns: 0.9fr 1.7fr 1.2fr; gap: 12px; }
@media (max-width: 480px) { .ak-date { grid-template-columns: 1fr 1fr; } .ak-date .ak-field:nth-child(2) { grid-column: span 2; order: -1; } }

.ak-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.ak-chip { position: relative; display: inline-flex; }
body.ak .ak-chip input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.ak-chip > span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 19px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ak-ink-2);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s var(--ak-ease);
}
@media (hover: hover) {
  .ak-chip:hover > span { box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.45); color: var(--ak-ink); }
}
.ak-chip input:checked + span {
  color: #1c1405;
  background: linear-gradient(135deg, #fff0c2, #f2c86a);
  box-shadow: 0 8px 26px -10px var(--ak-gold-glow);
}
.ak-chip input:focus-visible + span { outline: 2px solid #fff3cf; outline-offset: 3px; }

.ak-when-part, .ak-unknown-note { display: none; }
.ak-wizard:has(input[name='confidence'][value='part_of_day']:checked) .ak-when-part { display: grid; }
.ak-wizard:has(input[name='confidence'][value='part_of_day']:checked) .ak-when-time,
.ak-wizard:has(input[name='confidence'][value='unknown']:checked) .ak-when-time { display: none; }
.ak-wizard:has(input[name='confidence'][value='unknown']:checked) .ak-unknown-note { display: block; }

.ak-place { position: relative; }
.ak-place-list {
  position: absolute;
  z-index: 6;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  max-height: 310px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  border-radius: 16px;
  background: rgba(10, 12, 32, 0.98);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.ak-place-list li { display: grid; gap: 3px; padding: 12px 14px; border-radius: 11px; cursor: pointer; }
.ak-place-list li[aria-selected='true'], .ak-place-list li:hover { background: rgba(242, 200, 106, 0.12); }
.ak-place-name { font-weight: 600; color: var(--ak-ink); }
.ak-place-rest { font-size: 13px; color: var(--ak-ink-3); }
.ak-place-chosen {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 15px;
  font-size: 13.5px;
  color: var(--ak-ink-3);
  background: rgba(242, 200, 106, 0.07);
  box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.28);
}
.ak-place-chosen svg { flex: none; width: 22px; height: 22px; color: var(--ak-gold); }
.ak-place-chosen strong { display: block; font-size: 15px; color: var(--ak-ink); }

.ak-step-error, .ak-form-error {
  display: none;
  margin: 14px 0 0;
  padding: 12px 15px;
  border-radius: 13px;
  font-size: 14.5px;
  color: #ffd0d0;
  background: rgba(255, 100, 100, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 120, 0.35);
}
.ak-form-error { margin: 0 0 22px; }
.ak-step-error.is-on, .ak-form-error.is-on { display: block; }

.ak-privacy-note { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; font-size: 13.5px; color: var(--ak-ink-3); }
.ak-privacy-note svg { flex: none; width: 18px; height: 18px; color: var(--ak-gold); }

.ak-wizard-nav { display: flex; gap: 12px; align-items: center; margin-top: 32px; }
.ak-wizard-nav [data-next], .ak-wizard-nav [data-submit] { margin-left: auto; }
.ak-wizard-nav [data-back], .ak-wizard-nav [data-next] { display: none; }
.ak-js .ak-wizard-nav [data-back], .ak-js .ak-wizard-nav [data-next] { display: inline-flex; }

/* --- arrival ------------------------------------------------------------ */
.ak-analysing .ak-journey, .ak-analysing .ak-nav, .ak-analysing .ak-footer {
  opacity: 0;
  transform: scale(0.95);
  filter: blur(10px);
  pointer-events: none;
  transition: opacity 0.9s var(--ak-ease), transform 1.1s var(--ak-ease), filter 0.9s;
}
.ak-analysis { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.ak-analysis-stage { display: grid; justify-items: center; gap: 22px; width: min(760px, 94vw); text-align: center; }
.ak-wheel { width: min(380px, 70vw); height: auto; overflow: visible; opacity: 0; transform: scale(0.8); transition: opacity 1s var(--ak-ease), transform 1.4s var(--ak-ease); }
.ak-wheel-on .ak-wheel { opacity: 1; transform: none; }
.ak-wheel .w-line { fill: none; stroke: rgba(242, 200, 106, 0.6); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ak-draw 1.6s var(--ak-ease) forwards; }
.ak-wheel .w-soft { stroke: rgba(245, 240, 230, 0.22); }
.ak-wheel .w-spoke { stroke: rgba(245, 240, 230, 0.18); }
.ak-wheel .w-asc { stroke: #f2c86a; stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(242, 200, 106, 0.8)); }
.ak-wheel .w-sign { font-size: 20px; text-anchor: middle; dominant-baseline: central; fill: rgba(245, 240, 230, 0.8); opacity: 0; animation: ak-fade 0.8s ease forwards; }
.ak-wheel .w-sign.is-lagna { fill: #f2c86a; }
.ak-wheel .w-graha { opacity: 0; animation: ak-pop 0.8s var(--ak-ease) forwards; }
.ak-wheel .w-graha circle { fill: rgba(6, 7, 20, 0.9); stroke: var(--c); stroke-width: 1.4; filter: drop-shadow(0 0 6px var(--c)); }
.ak-wheel .w-graha text { font-size: 13px; text-anchor: middle; dominant-baseline: central; fill: var(--c); }
.ak-wheel .w-centre { font-family: var(--ak-serif); font-size: 26px; text-anchor: middle; fill: var(--ak-ink); opacity: 0; animation: ak-fade 1s ease 1.6s forwards; }
.ak-wheel .w-graha, .ak-wheel .w-sign {
  --c: #fff;
}
@keyframes ak-draw { to { stroke-dashoffset: 0; } }
@keyframes ak-fade { to { opacity: 1; } }
@keyframes ak-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
.ak-wheel .w-graha { transform-box: fill-box; transform-origin: center; }

.ak-analysis-date { min-height: 1.2em; margin: 0; font: 700 15px/1.2 var(--ak-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ak-gold); font-variant-numeric: tabular-nums; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9); }
.ak-analysis-title { margin: 8px 0 0; font-family: var(--ak-serif); font-weight: 500; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; color: var(--ak-ink); text-shadow: 0 4px 40px rgba(0, 0, 0, 0.9); }
.ak-analysis-title.is-in { animation: ak-title-in 0.9s var(--ak-ease) both; }
@keyframes ak-title-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.ak-analysis-steps { display: grid; gap: 10px; justify-items: center; margin: 14px 0 0; padding: 0; list-style: none; }
.ak-analysis-steps li { display: inline-flex; gap: 11px; align-items: center; font-size: 15px; color: var(--ak-ink-2); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95); animation: ak-title-in 0.7s var(--ak-ease) both; }
.ak-analysis-steps li::before { content: ''; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(242, 200, 106, 0.25); border-top-color: #f2c86a; animation: ak-spin 0.9s linear infinite; }
.ak-analysis-steps li.is-done { color: var(--ak-ink); }
.ak-analysis-steps li.is-done::before {
  border: 0;
  animation: none;
  background: #f2c86a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%231c1405' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  box-shadow: 0 0 14px var(--ak-gold-glow);
}
.ak-analysis-steps strong { font-weight: 700; color: var(--ak-gold); }
@keyframes ak-spin { to { transform: rotate(360deg); } }
.ak-skip { position: fixed; right: 22px; bottom: 22px; pointer-events: auto; }
.ak-labels { position: fixed; inset: 0; pointer-events: none; }
.ak-label {
  --c: #fff;
  position: absolute;
  left: 0;
  top: 0;
  margin: -34px 0 0 0;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ak-ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transition: opacity 0.9s var(--ak-ease);
}
.ak-label.is-on { opacity: 1; }
.ak-label b { margin-right: 6px; font-size: 15px; font-weight: 400; color: var(--c); }


/* --- fixes -------------------------------------------------------------- */
.ak-js .ak-step-panel.is-active { position: relative; z-index: 3; }

/* --- report ------------------------------------------------------------- */
.ak-report-hero { position: relative; max-width: 1240px; margin: 0 auto; padding: 150px clamp(22px, 5vw, 64px) 36px; }
body.ak .ak-report-hero h1 {
  max-width: 15ch;
  margin: 18px 0 14px;
  font-family: var(--ak-serif);
  font-weight: 500;
  font-size: clamp(46px, 6.4vw, 98px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ak-ink);
  text-shadow: 0 6px 50px rgba(0, 0, 0, 0.7);
}
.ak-report-meta { margin: 0 0 34px; font-size: 17px; color: var(--ak-ink-2); }
.ak-signature { display: flex; flex-wrap: wrap; gap: 12px; }
.ak-sig { display: grid; gap: 6px; min-width: 130px; padding: 14px 18px; border-radius: 16px; background: rgba(10, 12, 30, 0.76); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ak-sig-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ak-ink-3); }
.ak-sig-value { font-family: var(--ak-serif); font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ak-ink); }
.ak-sig-value i { margin-right: 8px; font-family: var(--ak-sans); font-size: 18px; font-style: normal; color: var(--ak-gold); }

.ak-crisis-top { position: relative; max-width: 1240px; margin: 0 auto; padding: 118px clamp(22px, 5vw, 64px) 0; }
.ak-crisis-top + .ak-report-hero { padding-top: 36px; }
body.ak .ak-crisis-top .panel, body.ak .ak-crisis .panel {
  max-width: none;
  padding: 26px 28px;
  border: 1px solid rgba(255, 150, 150, 0.45);
  border-left: 4px solid #ff8f8f;
  border-radius: 20px;
  background: rgba(46, 12, 24, 0.9);
  font-size: 17px;
  color: var(--ak-ink);
}
body.ak .ak-crisis-top .panel h2, body.ak .ak-crisis .panel h2 { margin: 0 0 10px; font-family: var(--ak-serif); font-size: 32px; font-weight: 600; color: #fff; }
body.ak .ak-crisis-top .panel p, body.ak .ak-crisis .panel p, body.ak .panel-urgent li { font-size: 16.5px; line-height: 1.7; color: var(--ak-ink); }

.ak-tabs-wrap { position: sticky; top: 70px; z-index: 20; max-width: 1240px; margin: 0 auto; padding: 10px clamp(22px, 5vw, 64px); }
.ak-tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(8, 9, 24, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.ak .ak-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ak-ink-2);
  transition: color 0.4s;
}
@media (hover: hover) {
  body.ak .ak-tab:hover { color: var(--ak-ink); }
}
body.ak.ak-tabs-on .ak-tab[aria-selected='true'], .ak-tabs-on body.ak .ak-tab[aria-selected='true'] { color: #1c1405; }
.ak-tabs-ink {
  position: absolute;
  z-index: 0;
  top: 6px;
  left: 0;
  display: none;
  width: 0;
  height: calc(100% - 12px);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff0c2, #f2c86a 60%, #d9a441);
  box-shadow: 0 8px 30px -8px var(--ak-gold-glow);
  transition: transform 0.6s var(--ak-ease), width 0.6s var(--ak-ease);
}
.ak-tabs-on .ak-tabs-ink { display: block; }
.ak-tab-state { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ak-tab-state:empty { display: none; }
.ak-tab-state.is-pending { color: var(--ak-gold); background: rgba(242, 200, 106, 0.14); animation: ak-breathe 1.8s ease-in-out infinite; }
.ak-tab-state.is-ready { color: #0f2b17; background: #86e8aa; }
.ak-tab-state.is-unavailable { color: var(--ak-ink-2); background: rgba(255, 255, 255, 0.1); }
.ak-tab[aria-selected='true'] .ak-tab-state.is-pending { color: #3b2a07; background: rgba(28, 20, 5, 0.12); }
@keyframes ak-breathe { 50% { opacity: 0.45; } }
.ak-tab.has-news::after { content: ''; position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #86e8aa; box-shadow: 0 0 10px #86e8aa; animation: ak-breathe 1.4s infinite; }
@media (max-width: 680px) {
  .ak-tabs-wrap { top: 60px; padding: 8px 12px; }
  .ak-tabs { display: flex; width: 100%; }
  body.ak .ak-tab { flex: 1; justify-content: center; padding: 0 8px; font-size: 14px; }
  .ak-tab-state { display: none; }
}

.ak-panels { position: relative; max-width: 1240px; margin: 0 auto; padding: 26px clamp(22px, 5vw, 64px) 30px; }
.ak-tabpanel + .ak-tabpanel { margin-top: 90px; }
.ak-tabs-on .ak-tabpanel + .ak-tabpanel { margin-top: 0; }
/* A link to a tab, and the browser's own jump to it, land with the panel just
   below the stuck bar: stuck at 70px and 82px tall (60px and 78px on phones),
   then the panels' 26px padding. Declared after the tab bar's phone rules, so
   the phone value has to follow the base one here. */
.ak-tabpanel { scroll-margin-top: 178px; }
@media (max-width: 680px) { .ak-tabpanel { scroll-margin-top: 164px; } }
.ak-tabpanel.is-entering { animation: ak-panel-in 0.8s var(--ak-ease) both; }
@keyframes ak-panel-in { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }

.ak-block { margin: 0 0 clamp(72px, 9vw, 124px); }
.ak-block-head { max-width: 780px; margin: 0 0 34px; }
body.ak .ak-block-head h2, body.ak .ak-feature h2, body.ak .ak-chartcard h2 {
  margin: 14px 0 12px;
  font-family: var(--ak-serif);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04;
  color: var(--ak-ink);
}
.ak-block-head p { max-width: 62ch; margin: 0; font-size: 17px; line-height: 1.7; color: var(--ak-ink-2); }
.ak-lead { font-size: 17px; line-height: 1.75; color: var(--ak-ink-2); }
.ak-muted { color: var(--ak-ink-3); }
.ak-basis { font-size: 13.5px; line-height: 1.6; color: var(--ak-ink-3); }
.ak-plain { font-size: 15.5px; line-height: 1.7; color: var(--ak-ink-2); }
.ak-panel { padding: 26px; border-radius: 20px; background: var(--ak-panel-solid); box-shadow: inset 0 0 0 1px var(--ak-line); }
body.ak .ak-panel h3 { margin: 0 0 8px; font-family: var(--ak-serif); font-size: 26px; font-weight: 600; }
.ak-center { justify-content: center; margin-top: 32px; }

.ak-chartcard {
  display: grid;
  grid-template-columns: minmax(0, 430px) 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(18, 20, 50, 0.86), rgba(7, 8, 22, 0.94));
  box-shadow: inset 0 0 0 1px var(--ak-line), 0 50px 100px -50px rgba(0, 0, 0, 0.9);
}
@media (max-width: 920px) { .ak-chartcard { grid-template-columns: 1fr; } }
.ak-chartcard-art { display: grid; justify-items: center; gap: 14px; margin: 0; }
.ak-chartcard-art svg { width: 100%; max-width: 430px; height: auto; filter: drop-shadow(0 0 34px rgba(242, 200, 106, 0.14)); }
.ak-chartcard-art figcaption { font-size: 13px; text-align: center; color: var(--ak-ink-3); }
.ak-bigs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 0; }
@media (max-width: 560px) { .ak-bigs { grid-template-columns: 1fr; } }
.ak-big { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.ak-big dt { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ak-gold); }
.ak-big dd { margin: 6px 0; font-family: var(--ak-serif); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--ak-ink); }
.ak-big dd span { margin-left: 6px; font-family: var(--ak-sans); font-size: 13px; font-weight: 500; color: var(--ak-ink-3); }
.ak-big p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ak-ink-2); }

.ak-planets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); gap: 18px; }
.ak-planet {
  --c: #f2c86a;
  position: relative;
  overflow: hidden;
  padding: 24px 24px 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(20, 22, 52, 0.9), rgba(8, 9, 24, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
.ak-planet::before {
  content: '';
  position: absolute;
  top: -90px;
  right: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--c) 28%, transparent), transparent 70%);
  pointer-events: none;
}
.ak-planet.is-now { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 60%, transparent), 0 0 70px -24px color-mix(in oklab, var(--c) 70%, transparent); }
.ak-planet-head { position: relative; display: flex; gap: 14px; align-items: center; }
.ak-planet-orb {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 26px;
  color: #0b0c1c;
  background: radial-gradient(circle at 35% 30%, #fff, var(--c) 55%, color-mix(in oklab, var(--c) 45%, #000) 100%);
  box-shadow: 0 0 32px -4px var(--c);
}
.ak-planet-title { flex: 1; min-width: 0; }
body.ak .ak-planet-title h3 { margin: 0; font-family: var(--ak-serif); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--ak-ink); }
.ak-planet-title h3 span { margin-left: 6px; font-family: var(--ak-sans); font-size: 13px; font-weight: 600; color: var(--ak-ink-3); }
.ak-planet-title p { margin: 4px 0 0; font-size: 13.5px; color: var(--ak-ink-2); }
.ak-dignity { flex: none; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ak-ink); background: rgba(255, 255, 255, 0.09); }
.ak-dignity.is-exalted, .ak-dignity.is-moolatrikona, .ak-dignity.is-own { color: #0f2b17; background: #8fe7ae; }
.ak-dignity.is-friendly { color: #10233a; background: #9ec9ff; }
.ak-dignity.is-enemy { color: #3a1d06; background: #ffc27a; }
.ak-dignity.is-debilitated { color: #3a0d12; background: #ff9f9f; }
.ak-now-chip { display: inline-block; margin: 16px 0 0; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in oklab, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 45%, transparent); }
.ak-meter { height: 6px; margin: 18px 0 6px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.ak-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklab, var(--c) 45%, transparent), var(--c)); box-shadow: 0 0 12px var(--c); }
.ak-meter-label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: capitalize; color: var(--ak-ink-3); }
.ak-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.ak-flag { padding: 4px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: var(--ak-ink-2); background: rgba(255, 255, 255, 0.06); }
.ak-governs { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ak-ink-2); }
.ak-governs b { display: block; margin-bottom: 3px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.ak-duo { display: grid; gap: 10px; margin: 16px 0 0; }
.ak-duo > div { padding: 14px 16px; border-radius: 14px; }
.ak-duo .is-good, .ak-pair .is-good, .ak-arrows li.is-good { background: rgba(127, 227, 165, 0.07); box-shadow: inset 3px 0 0 #7fe3a5; }
.ak-duo .is-care, .ak-pair .is-care, .ak-arrows li.is-care { background: rgba(255, 170, 120, 0.07); box-shadow: inset 3px 0 0 #ffae78; }
body.ak .ak-duo h4 { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ak-duo .is-good h4, .ak-pair .is-good dt { color: #8fe7ae; }
.ak-duo .is-care h4, .ak-pair .is-care dt { color: #ffc08f; }
.ak-duo p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ak-ink); }
.ak-house-theme { margin: 14px 0 0; font-size: 13.5px; color: var(--ak-ink-3); }
.ak-house-theme b { margin-right: 4px; font-weight: 600; color: var(--ak-ink-2); }

.ak-period {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: 20px;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(18, 20, 50, 0.88), rgba(7, 8, 22, 0.94));
  box-shadow: inset 0 0 0 1px var(--ak-line);
}
@media (max-width: 920px) { .ak-period { grid-template-columns: 1fr; } }
body.ak .ak-period h3 { margin: 6px 0 12px; font-family: var(--ak-serif); font-size: 38px; font-weight: 500; line-height: 1.08; color: var(--ak-ink); }
.ak-period-copy > p { font-size: 16px; line-height: 1.72; color: var(--ak-ink-2); }
.ak-bars { display: grid; align-content: center; gap: 22px; }
.ak-bar-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; color: var(--ak-ink-2); }
.ak-bar-top b { margin-right: 4px; font-weight: 400; }
.ak-bar-top em { margin-left: 6px; font-size: 12.5px; font-style: normal; color: var(--ak-ink-3); }
.ak-bar-track { height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.ak-bar-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d9a441, #fff0c2); box-shadow: 0 0 14px var(--ak-gold-glow); }
.ak-num-kicker { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ak-gold); }
.ak-energies { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
@media (max-width: 860px) { .ak-energies { grid-template-columns: 1fr; } }
.ak-energy-col, .ak-pattern-col, .ak-lucky-cell, .ak-friends > div, .ak-card-lite, .ak-karmic > div {
  padding: 26px;
  border-radius: 24px;
  background: var(--ak-panel-solid);
  box-shadow: inset 0 0 0 1px var(--ak-line);
}
body.ak .ak-energy-col h3, body.ak .ak-pattern-col h3 { margin: 0 0 18px; font-family: var(--ak-serif); font-size: 28px; font-weight: 600; }
.ak-energy-col.is-good h3, .ak-pattern-col.is-good h3 { color: #a3f0c0; }
.ak-energy-col.is-care h3, .ak-pattern-col.is-care h3 { color: #ffca9f; }
.ak-energy-col ul, .ak-pattern-col ul { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.ak-energy-col li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; }
.ak-energy-glyph {
  --c: #f2c86a;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--c);
  background: color-mix(in oklab, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 40%, transparent);
}
body.ak .ak-energy-col h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--ak-ink); }
.ak-energy-col p, .ak-pattern-col p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ak-ink-2); }
.ak-energy-col .ak-basis, .ak-pattern-col .ak-basis { margin-top: 6px; font-size: 12.5px; color: var(--ak-ink-3); }
.ak-transits { margin-top: 20px; padding: 22px 26px; border-radius: 22px; background: var(--ak-panel); box-shadow: inset 0 0 0 1px var(--ak-line); }
body.ak .ak-transits h3 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ak-ink-3); }
.ak-transits ul { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 10px; padding: 0; list-style: none; }
.ak-transits li { font-size: 15px; color: var(--ak-ink); }
.ak-transits em { margin-left: 4px; font-style: normal; color: var(--ak-ink-3); }

.ak-river { margin: 0 0 18px; padding: 20px; overflow-x: auto; border-radius: 22px; background: var(--ak-panel-solid); box-shadow: inset 0 0 0 1px var(--ak-line); }
body.ak .ak-river svg { display: block; width: 100%; min-width: 560px; max-width: none; height: auto; }
.ak-river figcaption { margin-top: 10px; font-size: 13px; color: var(--ak-ink-3); }

.ak-patterns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .ak-patterns { grid-template-columns: 1fr; } }
.ak-pattern-col li { padding-bottom: 16px; border-bottom: 1px solid var(--ak-line); }
.ak-pattern-col li:last-child { padding-bottom: 0; border-bottom: 0; }
body.ak .ak-pattern-col h4 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 6px; font-size: 16px; font-weight: 700; text-transform: capitalize; color: var(--ak-ink); }
.ak-severity { padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ak-ink-2); background: rgba(255, 255, 255, 0.08); }
.ak-severity.is-none, .ak-severity.is-cancelled, .ak-severity.is-low, .ak-severity.is-mild { color: #a3f0c0; background: rgba(127, 227, 165, 0.16); }
.ak-severity.is-moderate, .ak-severity.is-medium { color: #ffca9f; background: rgba(255, 190, 120, 0.16); }
.ak-severity.is-high, .ak-severity.is-severe { color: #ffb3b3; background: rgba(255, 120, 120, 0.16); }

.ak-legacy { padding: 8px clamp(18px, 3vw, 32px); border-radius: 24px; background: var(--ak-panel-solid); box-shadow: inset 0 0 0 1px var(--ak-line); }
body.ak .ak-legacy h2 { margin: 26px 0 10px; font-family: var(--ak-serif); font-size: 28px; font-weight: 600; color: var(--ak-ink); }
body.ak .ak-legacy details { padding: 18px 0; border-top-color: var(--ak-line); }
body.ak .ak-legacy details:first-of-type { border-top: 0; }
body.ak .ak-legacy details > summary { padding-left: 30px; font-family: var(--ak-serif); font-size: 22px; font-weight: 600; color: var(--ak-ink); }
body.ak .ak-legacy details > summary::before { font-family: var(--ak-sans); color: var(--ak-gold); }
body.ak .ak-legacy table.data { font-size: 14px; }
body.ak .ak-legacy table.data th, body.ak .ak-legacy table.data td { padding: 9px 10px; border-bottom-color: var(--ak-line); }
body.ak .ak-legacy .hint, body.ak .ak-legacy .lede { color: var(--ak-ink-3); }
body.ak .ak-legacy .entry { border-left-color: rgba(242, 200, 106, 0.35); }
body.ak .ak-legacy .entry h3 { font-size: 16px; color: var(--ak-ink); }
body.ak .ak-legacy .entry p, body.ak .ak-legacy p { font-size: 15px; color: var(--ak-ink-2); }
body.ak .ak-legacy .panel { max-width: none; border-color: var(--ak-line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }

.ak-num-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1020px) { .ak-num-grid { grid-template-columns: 1fr; max-width: 660px; } }
.ak-num {
  --c: #f2c86a;
  position: relative;
  overflow: hidden;
  padding: 30px 28px 26px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(20, 22, 52, 0.9), rgba(8, 9, 24, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.ak-num-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin: 8px 0 24px 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.96), var(--c) 40%, color-mix(in oklab, var(--c) 35%, #05060f) 100%);
  box-shadow: 0 0 60px -6px color-mix(in oklab, var(--c) 70%, transparent), inset 0 -10px 30px rgba(0, 0, 0, 0.35);
}
.ak-num-orb::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--c) 35%, transparent);
  border-top-color: var(--c);
  animation: ak-spin 9s linear infinite;
}
.ak-num-orb span { font-family: var(--ak-serif); font-size: 66px; font-weight: 600; line-height: 1; color: #0b0c1c; }
body.ak .ak-num h3 { margin: 8px 0 8px; font-family: var(--ak-serif); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--ak-ink); }
.ak-num-ruler { margin: 0 0 12px; font-size: 14px; color: var(--ak-ink-3); }
.ak-num-ruler b { color: var(--c); }
.ak-num-essence { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ak-ink); }
.ak-pair { display: grid; gap: 10px; margin: 16px 0 0; }
.ak-pair > div { padding: 12px 14px; border-radius: 12px; }
.ak-pair dt { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ak-pair dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ak-ink-2); }
.ak-num-how { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--ak-line); font-size: 13px; color: var(--ak-ink-3); }

.ak-feature { display: grid; grid-template-columns: 320px 1fr; gap: clamp(24px, 5vw, 60px); align-items: center; padding: clamp(26px, 4vw, 46px); border-radius: 30px; background: linear-gradient(135deg, rgba(26, 22, 62, 0.92), rgba(8, 9, 24, 0.95)); box-shadow: inset 0 0 0 1px var(--ak-line); }
@media (max-width: 840px) { .ak-feature { grid-template-columns: 1fr; } }
.ak-feature-art { display: flex; align-items: center; justify-content: center; }
.ak-pairnum { --c: #f2c86a; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; font-family: var(--ak-serif); font-size: 52px; font-weight: 600; color: #0b0c1c; background: radial-gradient(circle at 35% 30%, #fff, var(--c) 45%, color-mix(in oklab, var(--c) 40%, #05060f)); box-shadow: 0 0 44px -6px var(--c); }
.ak-pairlink { width: 90px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.2)); }
.ak-pairlink.mitra { background: linear-gradient(90deg, #7fe3a5, #fff0c2, #7fe3a5); box-shadow: 0 0 14px rgba(127, 227, 165, 0.6); }
.ak-pairlink.shatru { background: repeating-linear-gradient(90deg, #ffae78 0 8px, transparent 8px 14px); }
.ak-feature p { font-size: 17px; line-height: 1.75; color: var(--ak-ink-2); }

.ak-lucky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ak-friends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
@media (max-width: 920px) { .ak-lucky, .ak-friends { grid-template-columns: 1fr; } }
body.ak .ak-lucky h3, body.ak .ak-friends h3, body.ak .ak-loshu-notes h3 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ak-ink-3); }
.ak-numchips, .ak-daychips, .ak-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.ak-numchip { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px; border-radius: 14px; font-family: var(--ak-serif); font-size: 26px; font-weight: 600; color: #1c1405; background: linear-gradient(135deg, #fff0c2, #f2c86a); box-shadow: 0 6px 20px -8px var(--ak-gold-glow); }
.ak-numchip.is-care, .ak-numchips.is-care .ak-numchip { color: #ffd9bb; background: rgba(255, 170, 120, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 170, 120, 0.45); }
.ak-numchips.is-neutral .ak-numchip { color: var(--ak-ink); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.ak-numchip.is-big { min-width: 58px; height: 58px; font-size: 32px; }
.ak-daychips span { padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--ak-ink); background: rgba(155, 130, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(155, 130, 255, 0.36); }
.ak-swatch { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ak-ink); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ak-swatch i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 16px rgba(255, 255, 255, 0.1); }

.ak-loshu { display: grid; grid-template-columns: minmax(0, 430px) 1fr; gap: clamp(26px, 5vw, 64px); align-items: start; padding: clamp(24px, 4vw, 44px); border-radius: 30px; background: linear-gradient(180deg, rgba(18, 20, 50, 0.9), rgba(7, 8, 22, 0.95)); box-shadow: inset 0 0 0 1px var(--ak-line); }
@media (max-width: 920px) { .ak-loshu { grid-template-columns: 1fr; } }
.ak-loshu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; aspect-ratio: 1; }
.ak-loshu-cell { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ak-loshu-cell.is-on { background: radial-gradient(circle at 50% 40%, rgba(242, 200, 106, 0.24), rgba(242, 200, 106, 0.05) 70%); box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.5), 0 0 30px -10px var(--ak-gold-glow); }
.ak-loshu-digits { font-family: var(--ak-serif); font-size: clamp(28px, 5vw, 46px); font-weight: 600; letter-spacing: 0.04em; color: rgba(245, 240, 230, 0.2); }
.ak-loshu-cell.is-on .ak-loshu-digits { color: #fff0c2; text-shadow: 0 0 20px rgba(242, 200, 106, 0.6); }
.ak-loshu-missing { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 174, 120, 0.75); }
.ak-loshu.is-in .ak-loshu-cell { animation: ak-pop 0.7s var(--ak-ease) both; animation-delay: calc(var(--i) * 70ms); }
.ak-loshu-cell { --i: 0; }
.ak-loshu-notes h3 + .ak-notes, .ak-loshu-notes h3 + .ak-arrows { margin-bottom: 24px; }
.ak-notes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ak-notes li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.ak-notes p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ak-ink-2); }
.ak-arrows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ak-arrows li { padding: 12px 14px; border-radius: 12px; }
.ak-arrows b { font-size: 15px; color: var(--ak-ink); }
.ak-arrows span { margin-left: 6px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ak-ink-3); }
.ak-arrows p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ak-ink-2); }

.ak-lite-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1020px) { .ak-lite-grid { grid-template-columns: 1fr; } }
.ak-card-lite-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
body.ak .ak-card-lite h3, body.ak .ak-karmic h3 { margin: 0; font-family: var(--ak-serif); font-size: 24px; font-weight: 600; color: var(--ak-ink); }
.ak-card-lite-head p { margin: 2px 0 0; font-size: 13px; }
.ak-card-lite > p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ak-ink-2); }
.ak-karmic { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.ak-karmic .ak-muted { margin: 6px 0 14px; font-size: 14px; }
@media (max-width: 860px) { .ak-karmic { grid-template-columns: 1fr; } }

.ak-cycle { display: grid; grid-template-columns: 1fr 260px; gap: 18px; }
@media (max-width: 860px) { .ak-cycle { grid-template-columns: 1fr; } }
.ak-cycle-main { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 30px; border-radius: 28px; background: linear-gradient(135deg, rgba(42, 32, 84, 0.88), rgba(8, 9, 24, 0.96)); box-shadow: inset 0 0 0 1px rgba(155, 130, 255, 0.28); }
@media (max-width: 560px) { .ak-cycle-main { grid-template-columns: 1fr; } }
.ak-cycle-num { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; font-family: var(--ak-serif); font-size: 62px; font-weight: 600; color: #1a1033; background: radial-gradient(circle at 35% 30%, #fff, #b9a6ff 50%, #4b3a8a); box-shadow: 0 0 50px -8px rgba(155, 130, 255, 0.8); }
body.ak .ak-cycle-main h3 { margin: 6px 0 8px; font-family: var(--ak-serif); font-size: 32px; font-weight: 600; color: var(--ak-ink); }
.ak-cycle-main p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ak-ink-2); }
.ak-cycle-side { display: grid; gap: 18px; }
.ak-cycle-side div { display: flex; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 22px; background: var(--ak-panel-solid); box-shadow: inset 0 0 0 1px var(--ak-line); }
.ak-cycle-side span { font-family: var(--ak-serif); font-size: 42px; font-weight: 600; color: #cdbfff; }
.ak-cycle-side p { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ak-ink-3); }
.ak-years { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
@media (max-width: 1020px) { .ak-years { grid-template-columns: 1fr; } }
.ak-years li { padding: 18px; border-radius: 18px; background: var(--ak-panel); box-shadow: inset 0 0 0 1px var(--ak-line); }
.ak-years li.is-now { box-shadow: inset 0 0 0 1px rgba(155, 130, 255, 0.6), 0 0 40px -18px rgba(155, 130, 255, 0.85); }
.ak-years-year { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--ak-ink-3); }
.ak-years-num { display: block; margin: 6px 0 4px; font-family: var(--ak-serif); font-size: 42px; font-weight: 600; line-height: 1; color: #cdbfff; }
.ak-years b { display: block; font-size: 14.5px; color: var(--ak-ink); }
.ak-years p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ak-ink-3); }
.ak-provenance { max-width: 82ch; font-size: 13px; line-height: 1.6; color: var(--ak-ink-3); }

.ak-live { display: grid; grid-template-columns: 150px 1fr; gap: 36px; align-items: center; padding: clamp(26px, 4vw, 46px); border-radius: 30px; background: linear-gradient(135deg, rgba(26, 22, 62, 0.92), rgba(8, 9, 24, 0.96)); box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.22); }
@media (max-width: 640px) { .ak-live { grid-template-columns: 1fr; } }
.ak-live-orb { position: relative; width: 150px; height: 150px; }
.ak-live-orb span { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.35); animation: ak-spin 6s linear infinite; }
.ak-live-orb span::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #f2c86a; box-shadow: 0 0 14px #f2c86a; }
.ak-live-orb span:nth-child(2) { inset: 24px; box-shadow: inset 0 0 0 1px rgba(155, 130, 255, 0.4); animation-duration: 4s; animation-direction: reverse; }
.ak-live-orb span:nth-child(2)::after { background: #b9a6ff; box-shadow: 0 0 14px #b9a6ff; }
.ak-live-orb span:nth-child(3) { inset: 54px; background: radial-gradient(circle, rgba(255, 240, 194, 0.95), rgba(242, 200, 106, 0.25) 60%, transparent 72%); box-shadow: none; animation: ak-breathe 2.2s ease-in-out infinite; }
.ak-live-orb span:nth-child(3)::after { display: none; }
body.ak .ak-live h3 { margin: 0 0 10px; font-family: var(--ak-serif); font-size: 36px; font-weight: 500; color: var(--ak-ink); }
.ak-live p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ak-ink-2); }
.ak-live-steps { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ak-live-steps li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--ak-ink); animation: ak-title-in 0.6s var(--ak-ease) both; }
.ak-live-steps li::before { content: ''; flex: none; width: 14px; height: 14px; border: 1.5px solid rgba(242, 200, 106, 0.25); border-top-color: #f2c86a; border-radius: 50%; animation: ak-spin 0.9s linear infinite; }
.ak-live-steps li.is-done { color: var(--ak-ink-3); }
.ak-live-steps li.is-done::before { border: 0; background: #86e8aa; animation: none; }
.ak-sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 920px) { .ak-sumgrid { grid-template-columns: 1fr; } }
.ak-sumcard { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: linear-gradient(180deg, rgba(20, 22, 52, 0.92), rgba(8, 9, 24, 0.96)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ak-sumcard:first-child { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(42, 34, 76, 0.94), rgba(8, 9, 24, 0.96)); box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.3); }
.ak-sumcard header { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.ak-sumcard-icon { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; color: var(--ak-gold); background: rgba(242, 200, 106, 0.1); box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.38); }
body.ak .ak-sumcard h3 { margin: 0; font-family: var(--ak-serif); font-size: 32px; font-weight: 600; line-height: 1.1; color: var(--ak-ink); }
.ak-sumcard p, .ak-sumcard li { font-size: 16.5px; line-height: 1.8; color: var(--ak-ink); }
.ak-sumcard p { margin: 0 0 12px; }
.ak-sumcard p:last-child { margin-bottom: 0; }
.ak-sumcard:lang(hi) p, .ak-sumcard:lang(hi) li { font-size: 17.5px; line-height: 1.9; }
.ak-cite { margin-left: 2px; font-size: 8px; color: rgba(242, 200, 106, 0.55); cursor: help; }
.ak-summary > .ak-note { margin-bottom: 16px; }
.ak-summary > .ak-basis { margin-top: 20px; }

.ak-planet-head { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 10px; }
.ak-planet-head .ak-dignity { grid-column: 2; justify-self: start; }

@media (max-width: 520px) {
  .ak-eyebrow { gap: 10px; letter-spacing: 0.2em; font-size: 11px; }
  .ak-eyebrow::before { width: 22px; }
  .ak-hero .ak-eyebrow { max-width: 100%; }
}

/* --- a look inside ------------------------------------------------------ */
.ak-peek { display: grid; grid-template-columns: 1.15fr 0.85fr 1fr; gap: 20px; max-width: 1240px; margin: 0 auto; perspective: 1600px; }
@media (max-width: 1040px) { .ak-peek { grid-template-columns: 1fr; max-width: 560px; } }
.ak-peek-card {
  position: relative;
  padding: 26px 26px 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(22, 24, 58, 0.9), rgba(8, 9, 24, 0.95));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 90px -45px rgba(0, 0, 0, 0.95);
  transform-style: preserve-3d;
  animation: ak-float 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -3s);
}
@keyframes ak-float { 50% { transform: translateY(-10px) rotateX(1.5deg); } }
.ak-peek-tag { margin: 0 0 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ak-ink-3); }
.ak-peek-planet { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; }
.ak-peek-orb { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font-size: 24px; color: #1c1405; background: radial-gradient(circle at 35% 30%, #fff, #ffd46b 55%, #7a5516); box-shadow: 0 0 30px -4px #ffd46b; }
body.ak .ak-peek-planet h3 { margin: 0; font-family: var(--ak-serif); font-size: 26px; font-weight: 600; color: var(--ak-ink); }
.ak-peek-planet h3 span { margin-left: 4px; font-family: var(--ak-sans); font-size: 12px; font-weight: 600; color: var(--ak-ink-3); }
.ak-peek-planet p { margin: 2px 0 0; font-size: 13px; color: var(--ak-ink-2); }
.ak-peek-badge { padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #0f2b17; background: #8fe7ae; }
.ak-peek-duo { display: grid; gap: 10px; margin-top: 16px; }
.ak-peek-duo > div { padding: 12px 14px; border-radius: 12px; }
.ak-peek-duo .is-good { background: rgba(127, 227, 165, 0.07); box-shadow: inset 3px 0 0 #7fe3a5; }
.ak-peek-duo .is-care { background: rgba(255, 170, 120, 0.07); box-shadow: inset 3px 0 0 #ffae78; }
body.ak .ak-peek-duo h4 { margin: 0 0 3px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ak-peek-duo .is-good h4 { color: #8fe7ae; }
.ak-peek-duo .is-care h4 { color: #ffc08f; }
.ak-peek-duo p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ak-ink); }
.ak-peek-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; aspect-ratio: 1; max-width: 230px; margin: 0 auto 16px; }
.ak-peek-grid span { display: grid; place-items: center; border-radius: 14px; font-family: var(--ak-serif); font-size: 28px; font-weight: 600; color: rgba(245, 240, 230, 0.18); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ak-peek-grid span.on { color: #fff0c2; background: radial-gradient(circle, rgba(242, 200, 106, 0.24), rgba(242, 200, 106, 0.05) 70%); box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.5); text-shadow: 0 0 16px rgba(242, 200, 106, 0.6); }
.ak-peek-note { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ak-ink-2); }
.ak-peek-note b { color: var(--ak-gold); }
body.ak .ak-peek-h { margin: 0 0 10px; font-family: var(--ak-serif); font-size: 28px; font-weight: 600; color: var(--ak-ink); }
.ak-peek-text { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--ak-ink); }
.ak-peek-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--ak-line); font-size: 12.5px; color: var(--ak-ink-3); }
.ak-peek-card { --i: 0; }

/* The sticky tab bar carries its own fade across the full width, so text
   scrolling beneath it disappears instead of showing beside the pill. */
.ak-tabs-wrap { isolation: isolate; }
.ak-tabs-wrap::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -70px;
  bottom: -18px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: linear-gradient(180deg, rgba(3, 4, 11, 0.985) 0%, rgba(3, 4, 11, 0.96) 66%, rgba(3, 4, 11, 0) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ak-ease);
}
/* Only once the bar has stuck. Shown before that, the fade reaches up over
   the end of the hero, where it hid the second row of badges. */
.ak-tabs-wrap.is-stuck::before { opacity: 1; }

/* --- journey: focus chips, the reveal button, the place's sky ----------- */
.ak-chip-icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-right: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.45s var(--ak-ease);
}
@media (hover: hover) {
  .ak-chip:hover .ak-chip-icon { opacity: 1; }
}
.ak-chips-topics .ak-chip input:checked + span .ak-chip-icon { opacity: 1; animation: ak-chip-pop 0.5s var(--ak-ease) both; }
@keyframes ak-chip-pop { 0% { transform: scale(0.6) rotate(-12deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: none; } }

.ak-focus-echo { display: flex; gap: 10px; align-items: center; margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--ak-gold); animation: ak-title-in 0.5s var(--ak-ease) both; }
.ak-focus-echo[hidden] { display: none; }
.ak-focus-echo::before { content: ''; flex: none; width: 7px; height: 7px; transform: rotate(45deg); background: var(--ak-gold); box-shadow: 0 0 12px var(--ak-gold-glow); }

body.ak .ak-btn-reveal svg { width: 18px; height: 18px; transition: transform 0.6s var(--ak-ease); }
@media (hover: hover) {
  body.ak .ak-btn-reveal:hover svg { transform: rotate(90deg) scale(1.15); }
}
body.ak .ak-btn-reveal:not([hidden]) { animation: ak-reveal-glow 2.8s ease-in-out infinite; }
body.ak .ak-btn-reveal:disabled { animation: none; }
@media (hover: hover) {
  body.ak .ak-btn-reveal:hover { animation: none; }
}
@keyframes ak-reveal-glow {
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 240, 200, 0.85),
      0 16px 56px -8px rgba(242, 200, 106, 0.8),
      0 0 130px -10px rgba(242, 200, 106, 0.65);
  }
}

.ak-place-chosen em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; letter-spacing: 0.02em; color: var(--ak-gold); animation: ak-title-in 0.8s var(--ak-ease) 0.3s both; }

/* --- summary: the planned sections light up as they are written ---------- */
.ak-sumgrid-ghost { margin-top: 18px; }
.ak-sumcard-ghost { position: relative; overflow: hidden; animation: ak-title-in 0.7s var(--ak-ease) both; animation-delay: calc(var(--i) * 90ms); }
body.ak .ak-sumcard-ghost h3 { font-size: 26px; opacity: 0.5; transition: opacity 0.6s; }
.ak-sumcard-ghost .ak-sumcard-icon { opacity: 0.55; transition: opacity 0.6s; }
.ak-ghost-lines { display: grid; gap: 10px; margin-top: 4px; }
.ak-ghost-lines i { display: block; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); transition: background 0.6s; }
.ak-ghost-lines i:nth-child(2) { width: 88%; }
.ak-ghost-lines i:nth-child(3) { width: 58%; }
.ak-ghost-state { margin: 14px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ak-ink-3); }
.ak-sumcard-ghost.is-writing { box-shadow: inset 0 0 0 1px rgba(242, 200, 106, 0.55), 0 0 70px -28px var(--ak-gold-glow); }
body.ak .ak-sumcard-ghost.is-writing h3, body.ak .ak-sumcard-ghost.is-written h3,
.ak-sumcard-ghost.is-writing .ak-sumcard-icon, .ak-sumcard-ghost.is-written .ak-sumcard-icon { opacity: 1; }
.ak-sumcard-ghost.is-writing .ak-ghost-lines i {
  background: linear-gradient(90deg, rgba(242, 200, 106, 0.08), rgba(242, 200, 106, 0.42), rgba(242, 200, 106, 0.08));
  background-size: 200% 100%;
  animation: ak-shimmer 1.3s linear infinite;
}
.ak-sumcard-ghost.is-writing .ak-ghost-state { color: var(--ak-gold); }
.ak-sumcard-ghost.is-written .ak-ghost-lines i { background: rgba(242, 200, 106, 0.18); }
.ak-sumcard-ghost.is-written .ak-ghost-state { color: #86e8aa; }
.ak-sumgrid-ghost.is-checking .ak-sumcard-ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(134, 232, 170, 0.14) 50%, transparent 100%);
  transform: translateY(-100%);
  animation: ak-scan 2s var(--ak-ease) infinite;
  animation-delay: calc(var(--i) * 140ms);
  pointer-events: none;
}
@keyframes ak-shimmer { to { background-position: -200% 0; } }
@keyframes ak-scan { to { transform: translateY(100%); } }

/* --- cards lean toward the pointer (client/ui/tilt.ts) -------------------- */
.ak-tilt-on {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
}
.ak-tilt-on .ak-sumcard, .ak-tilt-on .ak-peek-card { position: relative; }
html.ak-tilt-on.ak-js .is-tilting {
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.18s ease-out, box-shadow 0.6s var(--ak-ease);
  transition-delay: 0s;
}
html.ak-tilt-on.ak-js .ak-card.is-tilting { transform: perspective(1100px) translateY(-6px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
.ak-tilt-on .is-tilting::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(520px circle at var(--glow-x) var(--glow-y), rgba(255, 240, 200, 0.09), transparent 55%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ak-chips-topics .ak-chip input:checked + span .ak-chip-icon,
  body.ak .ak-btn-reveal:not([hidden]),
  .ak-focus-echo,
  .ak-place-chosen em,
  .ak-sumcard-ghost,
  .ak-sumcard-ghost.is-writing .ak-ghost-lines i,
  .ak-sumgrid-ghost.is-checking .ak-sumcard-ghost::after { animation: none; }
}

/* --- report hero: the birth wheel -------------------------------------- */
.ak-report-hero-wheel { position: relative; display: grid; place-items: center; width: min(440px, 88vw); margin: 44px auto 0; }
.ak-report-hero-wheel::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 200, 106, 0.12), rgba(155, 130, 255, 0.06) 48%, transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}
@media (min-width: 1100px) {
  .ak-report-hero.has-wheel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); column-gap: 40px; align-items: center; }
  .ak-report-hero-wheel { justify-self: end; margin: 0; }
}
.ak-wheel.ak-hero-wheel { position: relative; width: 100%; opacity: 1; transform: none; }
.ak-hero-wheel .w-halo { fill: none; stroke: rgba(242, 200, 106, 0.24); stroke-width: 1; stroke-dasharray: 2 7; animation: ak-spin 140s linear infinite; }
.ak-hero-wheel .w-graha.is-uncertain circle { stroke-dasharray: 3 3; }
.ak-hero-wheel .w-graha.is-uncertain text { fill-opacity: 0.7; }
.ak-hero-wheel .w-centre.is-long { font-size: 20px; }
@media (prefers-reduced-motion: reduce) {
  .ak-hero-wheel .w-halo { animation: none; }
}

/* === Phones and touch ======================================================
   What a phone needs, in one place: a shorter bar with what sticks beneath it
   sitting exactly under it, content that starts where the eye already is, a
   press instead of a hover that sticks after a tap, room for the notch and
   the home indicator, and less for the graphics chip to redraw. */

.ak-nav {
  height: var(--ak-nav-total);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: 0;
  padding-left: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right, 0px));
}
.ak-tabs-wrap { top: calc(var(--ak-nav-total) - 10px); }
.ak-tabpanel { scroll-margin-top: calc(var(--ak-nav-total) + 98px); }

body.ak a, body.ak button, body.ak label, body.ak select, body.ak input, body.ak textarea { -webkit-tap-highlight-color: transparent; }
body.ak .ak-btn, body.ak .ak-tab, .ak-chip, .ak-place-list li { touch-action: manipulation; }
body.ak .ak-btn:active { transform: scale(0.97); transition-duration: 0.12s; }
.ak-chip:active > span { transform: scale(0.96); }

/* Long headings and labels break into even lines, not one word left over. */
body.ak h1, body.ak h2, body.ak h3, .ak-eyebrow { text-wrap: balance; }
.ak-eyebrow { align-items: flex-start; }
.ak-eyebrow::before { flex: none; margin-top: 0.55em; }

.ak-footer { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
.ak-skip { right: max(22px, env(safe-area-inset-right, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); }

@media (max-width: 680px) {
  :root { --ak-nav-h: 64px; }
  .ak-brand { gap: 8px; font-size: 23px; }
  .ak-brand-mark svg { width: 26px; height: 26px; }
  body.ak .ak-nav .ak-btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
  .ak-tabs-wrap { top: calc(var(--ak-nav-total) - 8px); }
  .ak-tabpanel { scroll-margin-top: calc(var(--ak-nav-total) + 96px); }

  /* Home: the sky keeps the top third, and both buttons fit the first screen. */
  body.ak .ak-hero { min-height: 0; padding: 34svh 22px 64px; align-items: start; }
  body.ak .ak-hero h1 { margin: 16px 0; }
  body.ak .ak-hero .ak-lede { margin-bottom: 26px; font-size: 16.5px; line-height: 1.62; }
  .ak-hero .ak-cta-row { gap: 10px; }
  .ak-card { padding: 28px 22px 24px; }
  body.ak .ak-card h3 { font-size: 31px; }
  .ak-peek-card { padding: 22px 20px; }

  /* The report opens on the person, then gets to the tabs sooner. */
  .ak-report-hero { padding: calc(var(--ak-nav-total) + 34px) 18px 24px; }
  .ak-crisis-top { padding-top: calc(var(--ak-nav-total) + 24px); }
  .ak-report-meta { margin-bottom: 22px; font-size: 15.5px; }
  .ak-signature { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ak-sig { min-width: 0; padding: 11px 13px; border-radius: 14px; }
  .ak-sig:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ak-sig-label { font-size: 10px; letter-spacing: 0.12em; }
  .ak-sig-value { font-size: 19px; }
  .ak-sig-value i { margin-right: 6px; font-size: 15px; }
  .ak-report-hero-wheel { width: min(300px, 80vw); margin-top: 30px; }
  .ak-hero-wheel .w-halo { animation: none; }
  .ak-hero-wheel .w-graha circle, .ak-hero-wheel .w-asc { filter: none; }

  /* Cards inside cards: less padding, so the words get the width. */
  .ak-block { margin-bottom: 64px; }
  .ak-block-head { margin-bottom: 24px; }
  .ak-block-head p { font-size: 16px; }
  .ak-chartcard { padding: 18px; }
  .ak-planet { padding: 20px 18px 18px; }
  .ak-period { padding: 20px 18px; }
  body.ak .ak-period h3 { font-size: 32px; }
  .ak-energy-col, .ak-pattern-col, .ak-lucky-cell, .ak-friends > div, .ak-card-lite, .ak-karmic > div { padding: 20px 18px; }
  .ak-sumcard { padding: 22px 18px; }
  body.ak .ak-sumcard h3 { font-size: 28px; }
  body.ak .ak-sumcard-ghost h3 { font-size: 23px; }
  .ak-live { gap: 16px; padding: 22px 18px; }
  .ak-live-orb { width: 96px; height: 96px; }
  .ak-live-orb span:nth-child(2) { inset: 16px; }
  .ak-live-orb span:nth-child(3) { inset: 34px; }

  /* The life-period rivers keep a readable size and scroll sideways. */
  .ak-river { padding: 12px; overscroll-behavior-x: contain; }
  body.ak .ak-river svg { min-width: 980px; }
  .ak-river figcaption { position: sticky; left: 0; width: max-content; }

  /* The Summary tab's state, as a dot where the words do not fit. */
  body.ak .ak-tab { gap: 6px; }
  .ak-tab-state { display: inline-block; width: 7px; height: 7px; padding: 0; overflow: hidden; font-size: 0; line-height: 0; }
  .ak-tab-state:empty { display: none; }
  .ak-tab-state.is-pending { background: var(--ak-gold); }
  .ak-tab[aria-selected='true'] .ak-tab-state.is-pending { background: #3b2a07; }

  /* The journey starts at the top and keeps each step steady beneath it. */
  .ak-journey { align-items: start; padding: calc(var(--ak-nav-total) + 14px) 12px calc(36px + env(safe-area-inset-bottom, 0px)); }
  .ak-console { padding: 22px 18px 20px; border-radius: 24px; }
  .ak-stepper { margin-bottom: 24px; }
  .ak-chips { gap: 8px; }
  .ak-chip > span { min-height: 44px; padding: 0 15px; font-size: 14px; }
  .ak-wizard-nav { margin-top: 22px; }
  .ak-wizard-nav [data-next], .ak-wizard-nav [data-submit] { flex: 1; }
  .ak-place-list { max-height: min(310px, 46svh); overscroll-behavior: contain; }

  .ak-analysis-title { font-size: 30px; }
  .ak-analysis-steps li { font-size: 14px; }
}

/* The river renderer wraps its chart in its own .ak-river panel, inside the
   figure's. On a phone the second panel only takes width from the chart. */
@media (max-width: 680px) {
  .ak-river .ak-river { margin: 0; padding: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
}

/* While the birthplace field has focus on a phone, the page gets room below
   the form, so the field can be lifted clear of the keyboard and its
   suggestions open where they can be seen. A short step cannot scroll at all
   without it. */
@media (max-width: 680px) {
  .ak-journey:has(.ak-place input:focus) { padding-bottom: 70svh; }
}