/*
 * The hound quiz (web/quiz.html, web/js/hound-quiz.js, web/js/hound-quiz-art.js). Loaded last, after lh.css, and written on the
 * same tokens (--lh-*): near-black ground, one hero accent (green), Barlow Condensed for display and Instrument Sans for text,
 * the 4/8 space ladder, three radii. FOUR STEPS (owner ruling 2026-10-21): flat surfaces, no glow, no gradient, one accent, one primary button per
 * screen. Mobile first: two columns of pins on a phone, three or four from 720px, 16px gutters, a sticky Back / Next bar that sits above the phone tab bar, nothing scrolls sideways.
 *
 * THE GRID IS A WALL OF PINS. A pin is a tappable card: a tinted art tile on top (a stroke illustration, or a dog drawn by the
 * character rig), a title, a one-line pitch, and a check that springs in when it is picked. Colour here is decoration and
 * identity only; what a card says always comes with words, and a picked card says so with aria-pressed and a filled check, not
 * with colour alone.
 *
 * MOTION: a step slides in from the side you are moving toward, pins pop when picked, the progress fill eases. All of it is inside
 * prefers-reduced-motion: no-preference; reduced motion gets the finished screen and nothing that moves.
 */

.qz {
  --qz-ink: var(--lh-ink, #F2F4F8); --qz-ink2: var(--lh-ink2, #C9D0DB); --qz-mute: var(--lh-mute, #8D96A6);
  --qz-line: var(--lh-line, rgba(255, 255, 255, .07)); --qz-line2: var(--lh-line-2, rgba(255, 255, 255, .13));
  --qz-soft: var(--lh-soft, rgba(255, 255, 255, .05)); --qz-accent: var(--lh-accent, #2FD07A); --qz-accent-ink: var(--lh-accent-ink, #04140B);
  --qz-display: var(--lh-font-display, 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif);
  max-width: 1040px; margin: 0 auto; padding: 16px 16px 40px; min-height: 70vh;
}
.qz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qz [hidden] { display: none !important; }

/* tones: two colours each, used for art tiles and the pin glow */
[data-tone="mint"] { --qz-a: #1F7A57; --qz-b: #0E3B2D; --qz-g: #3DDBA4; }
[data-tone="lime"] { --qz-a: #5E7F1C; --qz-b: #2A3A0B; --qz-g: #A3D84F; }
[data-tone="sky"] { --qz-a: #1F5F94; --qz-b: #0D2C47; --qz-g: #4FB4FF; }
[data-tone="violet"] { --qz-a: #5A3FA0; --qz-b: #261A47; --qz-g: #A78BFA; }
[data-tone="gold"] { --qz-a: #9A6B12; --qz-b: #402C07; --qz-g: #F2B84B; }
[data-tone="rose"] { --qz-a: #9A3A66; --qz-b: #40152B; --qz-g: #F472B6; }
[data-tone="ember"] { --qz-a: #A8461F; --qz-b: #43190A; --qz-g: #FF7A45; }
[data-tone="slate"] { --qz-a: #3A4658; --qz-b: #1A212C; --qz-g: #8FB8FF; }

/* ---- progress and chrome ---------------------------------------------------------------------------------------- */
.qz-top { margin: 0 0 28px; }
.qz-progress { position: relative; height: 4px; border-radius: 999px; background: var(--qz-soft); overflow: hidden; }
.qz-progress__fill {
  position: absolute; inset: 0 auto 0 0; width: max(var(--p, 0%), 4px); border-radius: 999px;
  background: var(--qz-accent);
}
.qz-progress__ticks {
  position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), var(--lh-bg, #0B0D10) calc(25% - 3px) 25%);
}
.qz-top__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; min-height: 24px; }
.qz-stepno { margin: 0; font-size: 13px; color: var(--qz-mute); }
.qz-skiplink { font-size: 13px; color: var(--qz-mute); text-decoration: underline; text-underline-offset: 3px; min-height: 24px; display: inline-flex; align-items: center; }
.qz-skiplink:hover { color: var(--qz-ink); }

.qz-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--qz-accent); }
.qz .qz-q { margin: 0 0 8px; font-family: var(--qz-display); font-weight: 700; font-size: clamp(32px, 7.4vw, 52px); line-height: 1; letter-spacing: -.012em; color: var(--qz-ink); text-transform: none; font-style: normal; }
.qz .qz-q:focus { outline: none; }
.qz .qz-q--hero { font-size: clamp(40px, 9vw, 72px); }
.qz-sub { margin: 0 0 20px; max-width: 60ch; font-size: 17px; line-height: 1.45; color: var(--qz-ink2); }
.qz .qz-h2 { margin: 0 0 6px; font-family: var(--qz-display); font-weight: 700; font-size: 28px; line-height: 1.05; color: var(--qz-ink); letter-spacing: -.01em; }
.qz .qz-h3 { margin: 22px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--qz-mute); }
.qz-fine { margin: 6px 0; font-size: 13px; line-height: 1.4; color: var(--qz-mute); }
.qz-fine--bad { color: var(--lh-loss, #FF8A96); }
.qz-notice { margin-top: 28px; }
.qz-welcome { margin: 18px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--lh-accent-soft, rgba(47, 208, 122, .14)); color: var(--qz-ink); font-size: 14px; }

/* ---- buttons ----------------------------------------------------------------------------------------------------- */
.qz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 600 16px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif); cursor: pointer; text-decoration: none; color: var(--qz-ink); background: none;
  transition: background-color .15s, transform .12s, box-shadow .2s, color .15s;
}
.qz-btn--primary { background: var(--qz-accent); color: var(--qz-accent-ink); }
.qz-btn--primary:hover { background: var(--lh-accent-hi, #4BE08F); }
.qz-btn--ghost { background: var(--qz-soft); border-color: var(--qz-line2); }
.qz-btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.qz-btn--text { color: var(--qz-ink2); padding: 0 14px; }
.qz-btn--text:hover { color: var(--qz-ink); }
.qz-btn--lg { min-height: 54px; padding: 0 28px; font-size: 17px; }
.qz-btn:active { transform: scale(.97); }
.qz-btn[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }
.qz-btn:focus-visible, .qz-pin:focus-visible, .qz-chip:focus-visible, .qz-swatch:focus-visible {
  outline: 2px solid var(--qz-accent); outline-offset: 2px;
}
.qz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }

.qz-bar {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 8px; margin: 28px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--lh-bg, #0B0D10); box-shadow: 0 -1px 0 var(--qz-line);
}
.qz-bar .qz-btn--primary { margin-left: auto; }
.qz-bar .qz-btn--primary { min-width: 132px; }
/* On a phone the shared tab bar is HIDDEN for the whole quiz (checker, 2026-10-21): with it up, the Back / Next row and "Show me others"
   were under it at some scroll positions (the sticky bar cannot leave its section, so near the end of the page it sat in the bar's strip).
   The quiz is a short focused flow with its own Back / Next; the top bar still carries the brand and Sign in. */
@media (max-width: 760px) {
  body.qz-page .lh-tabbar { display: none; }
  body.qz-page:not(.member-app) { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .qz-bar { bottom: 0; }
}

/* ---- the wall of pins ------------------------------------------------------------------------------------------------ */
.qz-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .qz-grid--3, .qz-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qz-grid { gap: 16px; } }
@media (min-width: 900px) { .qz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 719px) { .qz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.qz-pin {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left; cursor: pointer; overflow: hidden;
  color: var(--qz-ink); background: var(--qz-soft); border: 1px solid var(--qz-line); border-radius: 18px; font: inherit;
  transition: border-color .15s, background-color .15s;
}
.qz-pin:hover { border-color: var(--qz-line2); background: rgba(255, 255, 255, .075); }
.qz-pin[aria-pressed="true"] {
  border-color: var(--qz-accent); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px var(--qz-accent);
}
.qz-pin__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.qz-pin__title { font-family: var(--qz-display); font-weight: 700; font-size: 22px; line-height: 1.05; letter-spacing: -.005em; }
.qz-pin--small .qz-pin__title { font-size: 19px; }
.qz-pin__pitch { font-size: 13.5px; line-height: 1.4; color: var(--qz-ink2); }
.qz-pin--small .qz-pin__pitch { font-size: 13px; }
.qz-pin__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.qz-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--qz-ink2); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.qz-pin__check {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--qz-accent); color: #06130C; transform: scale(0); opacity: 0;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .15s;
}
.qz-pin[aria-pressed="true"] .qz-pin__check { transform: scale(1); opacity: 1; }

.qz-art { position: relative; display: block; aspect-ratio: 5 / 3; overflow: hidden; background: #1B222D; }
.qz-pin--small .qz-art { aspect-ratio: 16 / 7; }
.qz-art__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.qz-art__blob--a { fill: rgba(255, 255, 255, .09); }
.qz-art__blob--b { fill: rgba(0, 0, 0, .18); }
.qz-art__line { stroke: rgba(255, 255, 255, .18); stroke-width: 2; }
.qz-art__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .95); }
.qz-art__glyph .qz-icon { width: clamp(36px, 34%, 76px); height: auto; aspect-ratio: 1; }
.qz-pin--small .qz-art__glyph .qz-icon { width: auto; height: 62%; }
.qz-grid--2 .qz-art { aspect-ratio: 2 / 1; }
.qz-art--dog { display: grid; place-items: center; aspect-ratio: 5 / 4; background: #1B222D; }
.qz-pin--small .qz-art--dog { aspect-ratio: 16 / 9; }
.qz-dog { display: inline-block; line-height: 0; }
.qz-dog--pin .dk-badge { width: min(66%, 150px); height: auto; aspect-ratio: 1; border-radius: 24px; }
.qz-art--dog .qz-dog { display: grid; place-items: center; width: 100%; }
.qz-pin--small .qz-dog--pin .dk-badge { width: auto; height: 82%; }
.qz-grid--dogs .qz-pin__title { font-size: 24px; }
/* Question 3 on a phone: one page of four personalities at a time, and "Show me others" turns the page (like question 6's moves).
   A wide screen shows every card and has no use for the button. */
.qz-actions--personality { margin-top: 18px; }
.qz-actions--personality .qz-fine { margin: 0; }
@media (max-width: 719px) {
  .qz-grid--dogs[data-page="0"] > [data-page]:not([data-page="0"]),
  .qz-grid--dogs[data-page="1"] > [data-page]:not([data-page="1"]),
  .qz-grid--dogs[data-page="2"] > [data-page]:not([data-page="2"]) { display: none; }
}
@media (min-width: 720px) { .qz-actions--personality { display: none; } }

/* risk */
.qz-field { margin: 0 0 4px; }
.qz-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-seg__btn {
  min-width: 52px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qz-line2); background: var(--qz-soft); color: var(--qz-ink);
  font: 600 17px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif); cursor: pointer; transition: background-color .15s, color .15s, transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.qz-seg__btn:hover { background: rgba(255, 255, 255, .1); }
.qz-seg__btn[aria-pressed="true"] { background: var(--qz-ink); color: #0B0D10; border-color: var(--qz-ink); transform: scale(1.05); }

/* the sport question: a grid of chips, the popular sports and Any sport first, the rest behind More */
.qz-chipgrid { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.qz-chipgrid--more { padding-top: 2px; }
.qz-chip--sport { min-height: 48px; padding: 0 22px; font-size: 16px; font-weight: 600; color: var(--qz-ink); }
.qz-chip--more { border-style: dashed; color: var(--qz-ink2); }
.qz .qz-chip--sport[aria-pressed="true"] { background: var(--qz-accent); border-color: var(--qz-accent); color: var(--qz-accent-ink); }
.qz-pin:disabled { opacity: .42; cursor: not-allowed; }
.qz-pin:disabled:hover { border-color: var(--qz-line); background: var(--qz-soft); }

/* the library */
.qz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.qz-chip {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--qz-line2); background: var(--qz-soft); color: var(--qz-ink2);
  font: 500 14px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif); cursor: pointer; transition: background-color .15s, color .15s;
}
.qz-chip:hover { background: rgba(255, 255, 255, .1); color: var(--qz-ink); }
.qz-chip[aria-pressed="true"] { background: var(--qz-ink); color: #0B0D10; border-color: var(--qz-ink); font-weight: 600; }
/* look */
.qz-look { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .qz-look { grid-template-columns: 260px minmax(0, 1fr); } .qz-look__preview { position: sticky; top: 80px; } }
.qz-look__preview { display: grid; place-items: center; padding: 20px; border-radius: 22px; background: #1B222D; }
.qz-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.qz-swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; background: var(--c, #C9A06B); cursor: pointer; box-shadow: 0 0 0 1px var(--qz-line2) inset; }
.qz-swatch[aria-pressed="true"] { border-color: var(--qz-ink); box-shadow: 0 0 0 3px #0B0D10 inset; }
.qz-swatch[data-coat="tan"] { --c: #C9A06B; } .qz-swatch[data-coat="black"] { --c: #2B2F36; } .qz-swatch[data-coat="white"] { --c: #E9ECF1; }
.qz-swatch[data-coat="grey"] { --c: #8C95A4; } .qz-swatch[data-coat="brown"] { --c: #7A5638; } .qz-swatch[data-coat="golden"] { --c: #E0B24A; }
.qz-swatch[data-coat="red"] { --c: #B4533C; } .qz-swatch[data-coat="merle"] { --c: #7E93B2; }

/* the reveal */
.qz-rv { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .qz-rv { grid-template-columns: 340px minmax(0, 1fr); gap: 44px; } .qz-rv__hero { position: sticky; top: 76px; align-self: start; } }
.qz-rv__hero { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 24px; background: var(--qz-soft); }
.qz-rv__dog { display: grid; place-items: center; margin-bottom: 4px; }
.qz-rv__hero label { display: block; margin: 8px 0 4px; font-size: 13px; font-weight: 600; color: var(--qz-ink2); }
.qz-rv__hero input { width: 100%; min-height: 48px; padding: 0 14px; font: 600 18px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif); box-sizing: border-box; }
.qz-chips { margin: 8px 0 0; }
.qz-block { margin: 0 0 32px; }
.qz-state { margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; background: var(--qz-soft); color: var(--qz-ink2); }
.qz-rules { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.qz-rule { padding: 14px 16px; border-radius: 16px; background: var(--qz-soft); border: 1px solid var(--qz-line); border-left: 4px solid var(--qz-accent); }
.qz-rule[data-source="archetype"] { border-left-color: #F2B84B; }
.qz-rule[data-source="english"] { border-left-color: #8FB8FF; }
.qz-rule[data-source="markets"] { border-left-color: #B9C0CC; }
.qz-rule__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.qz-rule__label { font-family: var(--qz-display); font-size: 22px; font-weight: 700; color: var(--qz-ink); }
.qz-rule__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--qz-ink2); }
.qz-globals { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--qz-mute); }
.qz-warnings { margin-top: 14px; }
.qz-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--qz-ink2); }
.qz-list--warn li { border-left: 3px solid var(--lh-pending, #F2B84B); padding-left: 10px; }
.qz-list strong { color: var(--qz-ink); font-weight: 600; }
.qz-textarea { width: 100%; min-height: 96px; padding: 12px 14px; font: 400 17px/1.4 var(--font-body, 'Instrument Sans', system-ui, sans-serif); resize: vertical; box-sizing: border-box; }
.qz-readback { margin-top: 12px; padding-top: 4px; }
.qz-checks { display: grid; gap: 14px; }
@media (min-width: 720px) { .qz-checks { grid-template-columns: 1fr 1fr; } .qz-checks .qz-h2 { grid-column: 1 / -1; } }
.qz-check { padding: 16px; border-radius: 18px; background: var(--qz-soft); border: 1px solid var(--qz-line); }
.qz .qz-check .qz-h3 { margin-top: 0; }
.qz-bignum { margin: 6px 0; font-family: var(--qz-display); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--qz-ink); }
.qz-picks { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--qz-ink2); }
.qz-drill { margin-top: 10px; }
.qz-drill__label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lh-pending, #F2B84B); }
.qz-signin { margin: 0 0 16px; padding: 16px; border-radius: 16px; background: var(--lh-accent-soft, rgba(47, 208, 122, .14)); border: 1px solid rgba(47, 208, 122, .4); }
.qz-signin p { margin: 0 0 8px; color: var(--qz-ink); }
.qz-msg { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; font-size: 15px; }
.qz-msg--bad { background: rgba(255, 107, 122, .12); color: var(--lh-loss, #FF8A96); }
.qz-msg--ok { background: var(--lh-accent-soft, rgba(47, 208, 122, .14)); color: var(--qz-ink); }
.qz-saved { padding: 18px; border-radius: 18px; background: var(--lh-accent-soft, rgba(47, 208, 122, .14)); border: 1px solid rgba(47, 208, 122, .4); margin-bottom: 12px; }
.qz-actions--final { margin-top: 4px; }

/* ---- motion ---------------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .qz-progress__fill { transition: width .5s cubic-bezier(.2, .7, .2, 1); }
  .qz-stage[data-dir="fwd"] .qz-step { animation: qz-in-fwd .42s cubic-bezier(.2, .7, .2, 1) both; }
  .qz-stage[data-dir="back"] .qz-step { animation: qz-in-back .42s cubic-bezier(.2, .7, .2, 1) both; }
  .qz-pin:active { transform: scale(.97); }
  .qz-rv { animation: qz-in-fwd .5s cubic-bezier(.2, .7, .2, 1) both; }
  .qz-rule { animation: qz-in-up .5s cubic-bezier(.2, .7, .2, 1) both; }
  .qz-rules > :nth-child(2) { animation-delay: 80ms; } .qz-rules > :nth-child(3) { animation-delay: 160ms; } .qz-rules > :nth-child(4) { animation-delay: 240ms; }
}
@keyframes qz-in-fwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes qz-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes qz-in-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes qz-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes qz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.qz-preview .qz-count { font-variant-numeric: tabular-nums; }
.qz-pick { padding: 2px 0; }
.qz-pick__face { display: inline-block; }
.qz-rv__reading { display: none; margin: 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--qz-mute, #8D96A6); }

/* ---- R2 and R4: the reveal choreography (web/js/reveal-fx.js). Content is in the page from the first frame; these only move it. ---
   R2, Meet {Name}, 2.4 s end to end: 0-0.7 the silhouette, 0.7-1.0 the hound resolves, 1.0-1.7 the name types in, 1.7-2.25 the rules slide in
   150 ms apart. R4, the ticket flip: the count is up by 0.5 s and each ticket flips 120 ms after the last (done by 1.4 s). A tap sets
   data-reveal="done" and every animation below stops where it is: the finished page. Reduced motion never gets "play": 150 ms fade. */
@media (prefers-reduced-motion: no-preference) {
  .qz-rv[data-reveal="play"] .qz-rv__reading { display: block; animation: qz-reading .7s ease both; }
  .qz-rv[data-reveal="play"] .qz-dog--hero { animation: qz-silhouette 1s cubic-bezier(.2, .7, .2, 1) both; }
  .qz-rv[data-reveal="play"] .qz-meet { animation: qz-type .7s steps(var(--len, 12), end) 1s both; }
  .qz-rv[data-reveal="play"] .qz-rv__hero .qz-field { animation: qz-fade .5s ease 1s both; }
  .qz-rv[data-reveal="play"] .qz-rule { animation: qz-rule-in .25s cubic-bezier(.2, .7, .2, 1) calc(1.7s + var(--i, 0) * 150ms) both; }
  .qz-rv[data-reveal="done"] .qz-rule { animation: none; }
  .qz-preview[data-reveal="play"] .qz-bignum { animation: qz-fade .3s ease both; }
  .qz-preview[data-reveal="play"] .qz-pick { transform-origin: 50% 0; animation: qz-flip .45s cubic-bezier(.2, .7, .2, 1) calc(.5s + var(--i, 0) * 120ms) both; }
  .qz-preview[data-reveal="done"] .qz-pick { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qz-rv, .qz-rule, .qz-preview .qz-bignum, .qz-pick { animation: qz-fade .15s ease both; }
}
@keyframes qz-reading { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes qz-silhouette {
  0% { filter: brightness(0) opacity(.4); transform: scale(.94) rotate(0); }
  25% { filter: brightness(0) opacity(.4); transform: scale(.94) rotate(-1.4deg); }
  45% { filter: brightness(0) opacity(.4); transform: scale(.94) rotate(1.4deg); }
  70% { filter: brightness(0) opacity(.4); transform: scale(.94) rotate(0); }
  100% { filter: none; transform: none; }
}
@keyframes qz-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes qz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qz-rule-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes qz-flip { from { opacity: 0; transform: perspective(600px) rotateX(-90deg); } to { opacity: 1; transform: none; } }

/* the reveal's "add anything in your own words" is one quiet line until it is opened (kennel-first rebuild: rules, would have bet today, then keep) */
.qz-own { margin: 0 0 var(--lh-s5, 24px); }
.qz-own__sum { position: relative; box-sizing: border-box; min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--qz-ink2); font-size: 15px; font-weight: 600; list-style: none; }
.qz-own__sum::-webkit-details-marker { display: none; }
.qz-own__sum:hover { color: var(--qz-ink); }
/* the open summary and the textarea never share pixels: the summary keeps its own 44px row, the textarea is a block that starts below it
   (tests/test_quiz_reveal_textarea.py opens the details at 390 and checks the heading's bottom is above the textarea's top) */
.qz-own[open] .qz-own__sum { margin-bottom: 8px; }
.qz-own > .qz-textarea { display: block; position: relative; z-index: 0; margin-top: 0; }
.qz-own__sum::marker { content: ""; }
.qz-own__sum::before { content: "+"; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--qz-line2); font-weight: 600; }
.qz-own[open] .qz-own__sum::before { content: "\2212"; }

/* ---- 2026-10-21: four steps. The top row, the risk cards, the last step. ----------------------------------------------- */
.qz-top__row { margin: 0 0 10px; }
.qz-top__links { display: inline-flex; align-items: center; gap: 16px; }
.qz-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--qz-mute); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.qz-linkbtn:hover { color: var(--qz-ink); }
.qz-stepno { font-size: 14px; font-weight: 600; color: var(--qz-ink2); }
.qz-grid--risk { grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .qz-grid--risk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qz-grid--risk .qz-pin__body { padding: 20px 18px; gap: 8px; }
.qz-grid--risk .qz-pin__title { font-size: 30px; }
.qz-grid--risk .qz-pin__pitch { font-size: 15px; }
.qz-risk .qz-fine { margin-top: 12px; }
.qz-finish { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 820px) { .qz-finish { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; } }
.qz-finish .qz-look__preview { padding: 16px; }
.qz-finish .qz-field input { width: 100%; min-height: 52px; padding: 0 16px; font: 600 18px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif); box-sizing: border-box; }
.qz-finish .qz-field label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--qz-ink2); }
.qz-finish .qz-chips { gap: 8px; }
.qz-finish .qz-chip { min-height: 40px; }
.qz-chip[aria-pressed="true"] { background: var(--qz-accent); border-color: var(--qz-accent); color: var(--qz-accent-ink); }
.qz-dog--big .dk-badge, .qz-dog--hero .dk-badge { max-width: 100%; height: auto; }
.qz-pin__check { display: none; }
.qz-pin[aria-pressed="true"] .qz-pin__check { display: grid; }

/* The two-door entry (quiz.html): "Take the quiz" and "Describe it first". Plain buttons that take the page's own text colour. */
.qz-entry__door { display: block; width: 100%; margin: 0 0 .75rem; padding: 1rem 1.1rem; text-align: left; color: inherit;
  background: transparent; border: 1px solid currentColor; border-radius: 12px; cursor: pointer; }
.qz-entry__door:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.qz-entry__title { display: block; font-weight: 700; font-size: 1.1rem; }
.qz-entry__pitch { display: block; margin-top: .25rem; opacity: .8; font-size: .92rem; }