/* GENERATED by build-plugin.py: the afterglow tokens (system/dist/afterglow.css) on the shadow host, then quiz.css. */
:host {
--ag-color-bg: #0c0c0f;
  --ag-color-surface: #1a1a1e;
  --ag-color-cream: #FFFFF3;
  --ag-color-black: #000000;
  --ag-color-scrim: rgba(12,12,15,0.62);
  --ag-color-scrim-strong: rgba(12,12,15,0.86);
  --ag-text-primary: rgba(255,255,243,0.85);
  --ag-text-secondary: rgba(255,255,243,0.60);
  --ag-text-muted: rgba(255,255,243,0.30);
  --ag-text-faint: rgba(255,255,243,0.08);
  --ag-border-default: rgba(255,255,255,0.07);
  --ag-border-hover: rgba(255,255,255,0.12);
  --ag-brand-orange: #FF4C00;
  --ag-brand-magenta: #FF02CB;
  --ag-brand-violet: #9C4DE0;
  --ag-brand-indigo: #3A2E8C;
  --ag-aura-authenticity-color: #FF7A1A;
  --ag-aura-authenticity-glow: rgba(255,122,26,0.5);
  --ag-aura-authenticity-low: #B23A00;
  --ag-aura-authenticity-high: #FFB24D;
  --ag-aura-presence-color: #FF2FB0;
  --ag-aura-presence-glow: rgba(255,47,176,0.5);
  --ag-aura-presence-low: #FFB3D9;
  --ag-aura-presence-high: #E5008F;
  --ag-aura-connection-color: #8E5CE6;
  --ag-aura-connection-glow: rgba(142,92,230,0.5);
  --ag-aura-connection-low: #CDB4F5;
  --ag-aura-connection-high: #6E2FCF;
  --ag-aura-communication-color: #4FA3FF;
  --ag-aura-communication-glow: rgba(79,163,255,0.5);
  --ag-aura-communication-low: #35357A;
  --ag-aura-communication-high: #A9C7F5;
  --ag-gradient-master: linear-gradient(90deg, #FF8A2B 0%, #FF4C00 22%, #FF1E8E 48%, #B14DE0 72%, #4A3AA7 100%);
  --ag-gradient-aura-authenticity: linear-gradient(135deg, #B23A00 0%, #FF7A1A 55%, #FFB24D 100%);
  --ag-gradient-aura-presence: linear-gradient(135deg, #FFB3D9 0%, #FF2FB0 55%, #E5008F 100%);
  --ag-gradient-aura-connection: linear-gradient(135deg, #CDB4F5 0%, #8E5CE6 55%, #6E2FCF 100%);
  --ag-gradient-aura-communication: linear-gradient(135deg, #35357A 0%, #4FA3FF 55%, #A9C7F5 100%);
  --ag-gradient-spectrum-authenticity: linear-gradient(90deg, #B7BFE1 0%, #669BD2 50%, #B967A3 100%);
  --ag-gradient-spectrum-presence: linear-gradient(90deg, #EEBED9 0%, #F68F51 50%, #EE3343 100%);
  --ag-gradient-spectrum-connection: linear-gradient(90deg, #EDB7D5 0%, #ED2C7E 50%, #ED2246 100%);
  --ag-gradient-spectrum-communication: linear-gradient(90deg, #F498BC 0%, #977DB9 50%, #D34899 100%);
  --ag-gradient-preset-sunset: radial-gradient(120% 140% at 30% 120%, #FFB24D 0%, #FF6A1A 22%, #FF2E6E 46%, #B4318F 66%, #3A2E8C 100%);
  --ag-gradient-preset-dusk: linear-gradient(180deg, #2A2C6E 0%, #6E2FCF 40%, #B4318F 70%, #FF6A1A 100%);
  --ag-gradient-preset-night: radial-gradient(120% 140% at 30% 120%, #4A3AA7 0%, #2A2C6E 40%, #0E1030 100%);
  --ag-shader-sunset-stops-0: #3A2E8C;
  --ag-shader-sunset-stops-1: #B4318F;
  --ag-shader-sunset-stops-2: #FF2E7E;
  --ag-shader-sunset-stops-3: #FF6A1A;
  --ag-shader-sunset-stops-4: #FFB24D;
  --ag-shader-sunset-grain: 0.05;
  --ag-shader-sunset-warp: 1.7;
  --ag-shader-night-stops-0: #0E1030;
  --ag-shader-night-stops-1: #2A2C6E;
  --ag-shader-night-stops-2: #4A3AA7;
  --ag-shader-night-stops-3: #B4318F;
  --ag-shader-night-stops-4: #FF5A2A;
  --ag-shader-night-grain: 0.05;
  --ag-shader-night-warp: 1.9;
  --ag-shader-filmic-stops-0: #2A2C6E;
  --ag-shader-filmic-stops-1: #6E2FCF;
  --ag-shader-filmic-stops-2: #B4318F;
  --ag-shader-filmic-stops-3: #FF3D6E;
  --ag-shader-filmic-stops-4: #FF7A1A;
  --ag-shader-filmic-grain: 0.16;
  --ag-shader-filmic-warp: 1.5;
  --ag-avatar-palette-0: #FF4C00;
  --ag-avatar-palette-1: #FF02CB;
  --ag-avatar-palette-2: #9C4DE0;
  --ag-avatar-palette-3: #3A2E8C;
  --ag-avatar-pattern: mesh;
  --ag-font-display: "Domaine Display Narrow", Georgia, 'Times New Roman', serif;
  --ag-font-ui: Poppins, system-ui, -apple-system, Segoe UI, sans-serif;
  --ag-font-accent: Lacquer, system-ui, cursive;
  --ag-size-display: 72px;
  --ag-size-hero: 56px;
  --ag-size-section: 44px;
  --ag-size-title: 36px;
  --ag-size-subhead: 28px;
  --ag-size-card: 18px;
  --ag-size-body: 17px;
  --ag-size-small: 14px;
  --ag-size-caption: 13px;
  --ag-size-meta: 11px;
  --ag-weight-regular: 400;
  --ag-weight-medium: 500;
  --ag-weight-semibold: 600;
  --ag-leading-tight: 1.1;
  --ag-leading-snug: 1.15;
  --ag-leading-card: 1.3;
  --ag-leading-normal: 1.5;
  --ag-leading-body: 1.6;
  --ag-tracking-meta: 0.12em;
  --ag-tracking-button: 0.02em;
  --ag-space-xs: 8px;
  --ag-space-sm: 16px;
  --ag-space-md: 24px;
  --ag-space-lg: 32px;
  --ag-space-xl: 48px;
  --ag-space-2xl: 64px;
  --ag-space-3xl: 80px;
  --ag-space-4xl: 120px;
  --ag-space-section: 160px;
  --ag-radius-sm: 8px;
  --ag-radius-md: 12px;
  --ag-radius-lg: 20px;
  --ag-radius-pill: 999px;
  --ag-video-scale: 3;
}
/* The /your-aura/ quiz, inside the shadow root of <ag-aura-quiz>: the theme's rules cannot reach it, so no !important.
   Tokens only (linted by build-plugin.py). One orange button per screen: Start, then the film's join button. */
:host { display: block; background: var(--ag-color-bg); color: var(--ag-text-primary); font-family: var(--ag-font-ui); font-size: var(--ag-size-body); line-height: var(--ag-leading-body);
  -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-family: var(--ag-font-display); font-weight: var(--ag-weight-regular); color: var(--ag-color-cream); text-wrap: balance; }
a { color: var(--ag-color-cream); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ag-color-cream); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

.qz { display: grid; gap: var(--ag-space-2xl); max-width: 80rem; margin: 0 auto; padding: var(--ag-space-lg) var(--ag-space-lg) var(--ag-space-3xl); }   /* the /about/ column */

/* buttons: a pill for everything you press, orange fill once per screen */
.qz-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ag-space-xs); min-height: var(--ag-space-xl); padding: 0 var(--ag-space-md);
  border-radius: var(--ag-radius-pill); border: 1px solid var(--ag-border-hover); background: transparent; color: var(--ag-color-cream);
  font-size: var(--ag-size-small); font-weight: var(--ag-weight-medium); letter-spacing: var(--ag-tracking-button); line-height: var(--ag-leading-tight);
  text-decoration: none; text-align: center; cursor: pointer; transition: transform .2s, background-color .2s, border-color .2s; }
.qz-btn:hover { background: var(--ag-text-faint); border-color: var(--ag-color-cream); }
.qz-btn:active { transform: scale(.98); }
.qz-btn--fill { background: var(--ag-brand-orange); border-color: var(--ag-brand-orange); }
.qz-btn--fill:hover { background: var(--ag-brand-orange); border-color: var(--ag-brand-orange); transform: translateY(-1px); }
.qz-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.qz-link { padding: 0; border: 0; background: none; color: var(--ag-color-cream); font-size: var(--ag-size-small); text-decoration: underline;
  text-underline-offset: .25em; cursor: pointer; }
.qz-link:hover { color: var(--ag-text-primary); }
.qz-meta { font-size: var(--ag-size-small); line-height: var(--ag-leading-normal); color: var(--ag-text-secondary); font-variant-numeric: tabular-nums; }
.qz-muted { font-size: var(--ag-size-small); color: var(--ag-text-secondary); }

/* the stage: the copy on the page's own dark, and beside it one big stadium of the light. Nothing sits on the light,
   so it needs no veil. */
.qz-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--ag-space-3xl); align-items: center;
  padding: var(--ag-space-lg) 0; }
.qz-stage > .qz-screen { grid-column: 1; grid-row: 1; }
.qz-shape { grid-column: 2; grid-row: 1; aspect-ratio: 1.8; border-radius: var(--ag-radius-pill); background: var(--ag-color-surface) var(--light) center / cover no-repeat; }

.qz-screen { display: grid; gap: var(--ag-space-md); justify-items: start; max-width: calc(var(--ag-space-3xl) * 8); animation: qz-in .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes qz-in { from { opacity: .001; transform: translateY(var(--ag-space-xs)); } to { opacity: 1; transform: none; } }

.qz-title { font-size: var(--ag-size-hero); line-height: var(--ag-leading-tight); }
.qz-lede { font-size: var(--ag-size-card); line-height: var(--ag-leading-normal); max-width: 34em; }
.qz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ag-space-sm); }

/* a question */
.qz-progress { width: 100%; height: 2px; border-radius: var(--ag-radius-pill); background: var(--ag-border-default); overflow: hidden; }
.qz-progress span { display: block; height: 100%; background: var(--ag-color-cream); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.qz-prompt { font-size: var(--ag-size-section); line-height: var(--ag-leading-snug); }
.qz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ag-space-sm); width: 100%; }
.qz-choice { min-height: calc(var(--ag-space-xl) * 2); padding: var(--ag-space-sm) var(--ag-space-lg); border-radius: var(--ag-radius-pill); border: 1px solid var(--ag-border-hover);
  background: transparent; color: var(--ag-color-cream); font-size: var(--ag-size-card); line-height: var(--ag-leading-normal); text-align: left;
  cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s; }
.qz-choice:hover { border-color: var(--ag-color-cream); background: var(--ag-text-faint); }
.qz-choice:active { transform: scale(.99); }
.qz-choice[aria-pressed="true"] { border-color: var(--ag-brand-orange); }
.qz-qfoot { display: flex; justify-content: space-between; gap: var(--ag-space-md); width: 100%; }

/* the result, in the stage: who she is, in three lines, and the two things to do with it */
.qz-arch { font-size: var(--ag-size-display); line-height: var(--ag-leading-tight); font-style: italic; padding-bottom: var(--ag-space-xs); }
.qz-tag { font-size: var(--ag-size-subhead); font-family: var(--ag-font-display); line-height: var(--ag-leading-snug); color: var(--ag-color-cream); max-width: 22em; text-wrap: balance; }
.qz-read { max-width: 34em; color: var(--ag-text-primary); }
.qz-screen[data-screen="result"] .qz-actions { margin-top: var(--ag-space-xs); }

/* after the result: the four words, the film, keeping it */
.qz-after { display: grid; gap: var(--ag-space-3xl); }
.qz-head { display: grid; gap: var(--ag-space-xs); max-width: 40em; }
.qz-head h2, .qz-keep h2 { font-size: var(--ag-size-title); line-height: var(--ag-leading-tight); }

/* the four words: each with what it means for her */
.qz-four { display: grid; gap: var(--ag-space-xl); }
.qz-words { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ag-space-xl) var(--ag-space-lg); }
.qz-words li { display: grid; gap: var(--ag-space-xs); align-content: start; }
.qz-words b { font-family: var(--ag-font-display); font-weight: var(--ag-weight-regular); font-size: var(--ag-size-section); line-height: var(--ag-leading-tight); }
.qz-words p { color: var(--ag-text-secondary); max-width: 22em; }
.qz-w-authenticity b { color: var(--ag-aura-authenticity-high); }
.qz-w-presence b { color: var(--ag-aura-presence-low); }
.qz-w-connection b { color: var(--ag-aura-connection-low); }
.qz-w-communication b { color: var(--ag-aura-communication-high); }

/* asking back, in one line under the words it asks about */
.qz-fit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ag-space-sm) var(--ag-space-md); }
.qz-fit h3 { font-family: var(--ag-font-ui); font-size: var(--ag-size-body); font-weight: var(--ag-weight-medium); }
.qz-scale { display: flex; flex-wrap: wrap; gap: var(--ag-space-xs); }
.qz-scale .qz-btn { min-height: var(--ag-space-lg); padding: 0 var(--ag-space-sm); }
.qz-scale .qz-btn[aria-pressed="true"] { border-color: var(--ag-color-cream); background: var(--ag-text-faint); }
.qz-research { display: grid; gap: var(--ag-space-sm); max-width: 40em; }
.qz-research strong { font-weight: var(--ag-weight-medium); color: var(--ag-color-cream); }

/* the film: its frame in a stadium beside a thinner stadium of her light (the homepage's film picture); the trailer
   plays in a plain 16:9 frame, and without a clean frame the copy stands alone */
.qz-film { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 5fr); gap: var(--ag-space-sm); align-items: end; }
.qz-film__copy { margin-left: var(--ag-space-xl); align-self: center; }
.qz-film__light { display: block; height: 82%; border-radius: var(--ag-radius-pill); background: var(--ag-color-surface) var(--light) center / cover no-repeat; }
.qz-film--plain { grid-template-columns: minmax(0, 1fr); }
.qz-film--plain .qz-film__light { display: none; }
.qz-film--plain .qz-film__copy { max-width: 40em; margin-left: 0; }
.qz-poster { position: relative; aspect-ratio: 1 / 1.35; border-radius: var(--ag-radius-pill); overflow: hidden; background: var(--ag-color-surface) 50% 35% / cover no-repeat; }
.qz-film.is-playing { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.qz-film.is-playing .qz-film__light { display: none; }
.qz-film.is-playing .qz-poster { aspect-ratio: 16 / 9; border-radius: var(--ag-radius-lg); }
.qz-film.is-playing .qz-film__copy { margin-left: var(--ag-space-md); }
.qz-poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.qz-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: var(--ag-space-xl) var(--ag-space-md); border: 0; background: none;
  cursor: pointer; }
.qz-play span { display: inline-flex; align-items: center; gap: var(--ag-space-xs); min-height: var(--ag-space-xl); padding: 0 var(--ag-space-md);
  border-radius: var(--ag-radius-pill); background: var(--ag-color-scrim-strong); border: 1px solid var(--ag-border-hover); font-size: var(--ag-size-small);
  font-weight: var(--ag-weight-medium); letter-spacing: var(--ag-tracking-button); color: var(--ag-color-cream); transition: border-color .2s; }
.qz-play:hover span { border-color: var(--ag-color-cream); }
.qz-play svg, .qz-btn svg { width: var(--ag-space-sm); height: var(--ag-space-sm); }
.qz-film__copy { display: grid; gap: var(--ag-space-sm); justify-items: start; }
.qz-film__copy h2 { font-size: var(--ag-size-title); line-height: var(--ag-leading-tight); }
.qz-film__lines { display: grid; gap: var(--ag-space-xs); color: var(--ag-text-secondary); }
.qz-film__copy .qz-actions { margin-top: var(--ag-space-xs); }

/* keeping it: the one ask */
.qz-keep { display: grid; gap: var(--ag-space-sm); justify-items: start; max-width: 36em; }
.qz-form { display: grid; gap: var(--ag-space-sm); width: 100%; margin-top: var(--ag-space-xs); }
.qz-row { display: flex; gap: var(--ag-space-xs); }
.qz-input { flex: 1; min-width: 0; min-height: var(--ag-space-xl); padding: 0 var(--ag-space-md); border-radius: var(--ag-radius-pill); border: 1px solid var(--ag-border-hover);
  background: var(--ag-color-surface); color: var(--ag-color-cream); font: inherit; font-size: var(--ag-size-body); }
.qz-input::placeholder { color: var(--ag-text-secondary); }
.qz-input[aria-invalid="true"] { border-color: var(--ag-brand-orange); }
.qz-check { display: flex; gap: var(--ag-space-xs); align-items: flex-start; font-size: var(--ag-size-small); line-height: var(--ag-leading-normal); color: var(--ag-text-secondary); cursor: pointer; }
.qz-check input { flex: none; width: var(--ag-space-sm); height: var(--ag-space-sm); margin: 2px 0 0; accent-color: var(--ag-brand-orange); }
.qz-error { font-size: var(--ag-size-small); color: var(--ag-color-cream); }
.qz-fine { font-size: var(--ag-size-caption); color: var(--ag-text-secondary); }
.qz-fine a { color: var(--ag-text-secondary); }

/* the nine, as the map they come from: real to fantasy down, gentle to intense across */
.qz-nine { display: grid; gap: var(--ag-space-xl); }
.qz-map { display: grid; grid-template-columns: max-content repeat(3, minmax(0, 1fr)); gap: var(--ag-space-lg) var(--ag-space-md); align-items: start; }
.qz-map__cols { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ag-space-md); }
.qz-map__cols, .qz-map__row { font-size: var(--ag-size-small); color: var(--ag-text-secondary); }
.qz-map__row { padding-top: var(--ag-space-sm); }
.qz-cell { display: grid; grid-template-columns: var(--ag-space-2xl) minmax(0, 1fr); gap: var(--ag-space-sm); align-items: start; color: inherit; text-decoration: none; }
.qz-light { display: block; aspect-ratio: 2 / 3; border-radius: var(--ag-radius-pill); border: 2px solid transparent; background: var(--ag-color-surface) center / cover no-repeat;
  transition: border-color .2s; }
.qz-cell:hover .qz-light { border-color: var(--ag-border-hover); }
.qz-cell__text { display: grid; gap: var(--ag-space-xs); min-width: 0; }
.qz-cell strong { font-family: var(--ag-font-display); font-weight: var(--ag-weight-regular); font-size: var(--ag-size-card); line-height: var(--ag-leading-card); color: var(--ag-color-cream); }
.qz-cell em { font-style: normal; font-size: var(--ag-size-small); line-height: var(--ag-leading-normal); color: var(--ag-text-secondary); }
.qz-cell__where { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the headings say it on a wide screen */
.qz-you { display: none; margin-left: var(--ag-space-xs); font-family: var(--ag-font-ui); font-size: var(--ag-size-meta); letter-spacing: var(--ag-tracking-meta);
  text-transform: uppercase; color: var(--ag-brand-orange); vertical-align: middle; }
.qz-cell.is-you .qz-light { border-color: var(--ag-color-cream); }
.qz-cell.is-you .qz-you { display: inline; }

/* how it works, and the quiet tools */
.qz-how { display: grid; gap: var(--ag-space-sm); max-width: 40em; }
.qz-how h2 { font-size: var(--ag-size-subhead); line-height: var(--ag-leading-tight); }
.qz-how p { color: var(--ag-text-secondary); }
.qz-tools { display: flex; flex-wrap: wrap; gap: var(--ag-space-xs) var(--ag-space-lg); align-items: center; margin-top: var(--ag-space-xs); }
.qz-tools a, .qz-tools .qz-link { font-size: var(--ag-size-small); }

@media (prefers-reduced-motion: reduce) {
  .qz-screen { animation: none; }
  .qz-btn, .qz-choice, .qz-light, .qz-progress span { transition: none; }
}

@media (max-width: 1024px) {
  .qz-stage { grid-template-columns: minmax(0, 1fr); row-gap: var(--ag-space-xl); min-height: 0; padding-top: var(--ag-space-sm); }
  .qz-stage > .qz-screen { grid-row: 2; }
  .qz-shape { grid-column: 1; aspect-ratio: 2.2; }
  .qz-arch { font-size: var(--ag-size-hero); }
  .qz-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qz-film, .qz-film.is-playing { grid-template-columns: minmax(0, 1fr); gap: var(--ag-space-sm); }
  .qz-poster { aspect-ratio: 2; }
  .qz-film__light { height: var(--ag-space-xl); width: 64%; justify-self: end; }
  .qz-film__copy, .qz-film.is-playing .qz-film__copy { margin: var(--ag-space-sm) 0 0; }
}

@media (max-width: 767px) {
  .qz { gap: var(--ag-space-2xl); }
  .qz-after { gap: var(--ag-space-2xl); }
  .qz { padding: var(--ag-space-sm) var(--ag-space-sm) var(--ag-space-2xl); }
  .qz-stage { row-gap: var(--ag-space-lg); padding-bottom: 0; }
  .qz-title { font-size: var(--ag-size-section); }
  .qz-lede { font-size: var(--ag-size-body); }
  .qz-tag { font-size: var(--ag-size-card); }
  .qz-prompt { font-size: var(--ag-size-subhead); }
  .qz-choices { grid-template-columns: 1fr; }
  .qz-choice { min-height: var(--ag-space-2xl); font-size: var(--ag-size-body); }
  .qz-arch { font-size: var(--ag-size-section); }
  .qz-head h2, .qz-keep h2, .qz-film__copy h2 { font-size: var(--ag-size-subhead); }
  .qz-words { grid-template-columns: minmax(0, 1fr); gap: var(--ag-space-lg); }
  .qz-words b { font-size: var(--ag-size-title); }
  .qz-row { flex-direction: column; }
  /* the map becomes a list: each archetype says where it sits, since the headings are gone */
  .qz-map { grid-template-columns: minmax(0, 1fr); gap: var(--ag-space-md); }
  .qz-map__cols, .qz-map__row { display: none; }
  .qz-cell__where { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; order: -1;
    font-size: var(--ag-size-caption); color: var(--ag-text-secondary); }
}