#bt-quiz-root{max-width:720px;margin:40px auto;min-height:60vh}
.btq-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:36px;animation:btq-in .35s ease}
@keyframes btq-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.btq-card{animation:none}}
.btq-kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bt-teal)}
.btq-prompt{font-size:26px;font-weight:800;margin:10px 0 24px;line-height:1.25}
.btq-opt{display:block;width:100%;text-align:left;background:rgba(255,255,255,.05);color:var(--bt-ink);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 18px;margin:10px 0;font-size:16px;cursor:pointer;transition:border-color .15s,background .15s}
.btq-opt:hover{border-color:var(--bt-violet);background:rgba(124,92,255,.12)}
.btq-opt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0}
@media (max-width:700px){.btq-opt-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.btq-opt-grid{grid-template-columns:repeat(2,1fr)}}
.btq-progress{position:relative;height:20px;background:rgba(255,255,255,.09);border-radius:10px;margin-bottom:26px;overflow:hidden}
.btq-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--bt-violet),var(--bt-teal));border-radius:10px;transition:width .25s}
.btq-progress-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.btq-btn{background:var(--bt-violet);color:#fff;border:0;border-radius:999px;padding:14px 30px;font-size:16px;font-weight:700;cursor:pointer}
.btq-btn.alt{background:transparent;border:1px solid rgba(255,255,255,.25)}
.btq-result-name{font-size:44px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;background:linear-gradient(90deg,var(--bt-violet),var(--bt-coral));-webkit-background-clip:text;background-clip:text;color:transparent;margin:8px 0}
.btq-bars{display:flex;gap:8px;align-items:flex-end;height:70px;margin:18px 0}
.btq-bars div{flex:1;background:var(--bt-teal);border-radius:4px 4px 0 0;opacity:.85;position:relative;transform-origin:bottom}
.btq-bars span{position:absolute;bottom:-22px;width:100%;text-align:center;font-size:12px;opacity:.7}
.btq-note{font-size:14px;opacity:.75}
ul.btq-willnot{list-style:none;padding:0;margin:12px 0}
ul.btq-willnot li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
label.btq-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;line-height:1.4}
label.btq-check input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--bt-coral)}
.btq-validate{margin-top:16px;padding:16px 18px;background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.35);border-radius:12px}
.btq-validate p{margin:0 0 10px}
.btq-validate p:last-child{margin-bottom:0}
.btq-btn.alt{margin-right:8px}
a.btq-btn{display:inline-block;text-decoration:none;color:#fff}

/* ---- motion polish (Phase 3 B3) — all gated behind no-preference so reduced-motion renders instantly ---- */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Staggered option/card entrance: fade + 8px rise, 40ms per-item stagger, ~250ms each. */
  @keyframes btq-opt-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
  .btq-opt { animation: btq-opt-in .25s ease both }
  .btq-opt:nth-of-type(1) { animation-delay: 0ms }
  .btq-opt:nth-of-type(2) { animation-delay: 40ms }
  .btq-opt:nth-of-type(3) { animation-delay: 80ms }
  .btq-opt:nth-of-type(4) { animation-delay: 120ms }
  .btq-opt:nth-of-type(5) { animation-delay: 160ms }
  .btq-opt:nth-of-type(6) { animation-delay: 200ms }

  /* 2. Animated tally bars: grow from 0 to full height over 500ms ease-out, triggered by JS class-add. */
  .btq-bars div { transform: scaleY(0); transition: transform .5s ease-out }
  .btq-bars.btq-grown div { transform: scaleY(1) }

  /* 3. Result reveal cinematic: fade+scale from .96 over 600ms; type name gets a 150ms-delayed second entrance. */
  @keyframes btq-result-in { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }
  .btq-card.btq-result { animation: btq-result-in .6s ease both }
  @keyframes btq-name-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
  .btq-card.btq-result .btq-result-name { animation: btq-name-in .5s .15s ease both }
}

/* result page v2 */
.btq-result-head{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.btq-hero{width:220px;max-width:38%;border-radius:14px;flex:0 0 auto}
.btq-result-headtext{flex:1;min-width:240px}
.btq-sec{margin-top:26px}
.btq-profile{font-size:16px;line-height:1.6}
ul.btq-keys{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
ul.btq-keys li{background:rgba(0,224,198,.08);border:1px solid rgba(0,224,198,.3);border-radius:10px;padding:10px 14px;font-size:14px}
.btq-guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.btq-guides a{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;color:var(--bt-ink);text-decoration:none;transition:border-color .15s}
.btq-guides a:hover{border-color:var(--bt-violet)}
.btq-guides strong{display:block;font-size:15px}
.btq-guides span{font-size:12px;opacity:.65}

/* close-up v2.1: full-bleed image cards, flush caption bar, zero letterboxing.
   Images keep their intrinsic ratio (uniform per question), so every image in a
   row renders the same height; the caption bar flexes to absorb the remainder,
   so the card is always fully painted — never a dark gap above or below. */
#bt-quiz-root:has(.btq-opt-grid){max-width:960px}
.btq-opt-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:stretch}
.btq-opt-card{padding:0;overflow:hidden;border-radius:12px;display:flex;flex-direction:column;background:#0d0a11;text-align:center}
.btq-opt-card img{width:100%;height:auto;display:block;border-radius:0}
.btq-opt-card .btq-opt-cap{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 12px;
  background:rgba(10,8,12,.92);color:#fff;font-size:13px;font-weight:600;line-height:1.4;text-align:center;
  transition:background .15s}
.btq-opt-card:hover .btq-opt-cap{background:rgba(124,92,255,.28)}
.btq-opt:focus-visible{outline:2px solid var(--bt-teal);outline-offset:2px}
.btq-opt:active{transform:scale(.985)}
/* full-body lineups (very tall cards): fixed narrow columns on a shared baseline;
   on small screens the row swipes horizontally instead of wrapping */
.btq-opt-grid.btq-grid-tall{grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:minmax(122px,150px);width:fit-content;max-width:100%;
  margin-inline:auto;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}
.btq-grid-tall .btq-opt-card{scroll-snap-align:center}

/* ---- mobile: comparison-friendly 2-col image grid (was 1 giant image per
   row, forcing ~4 screens of scroll per question and killing side-by-side
   comparison). Card padding trimmed to make room; full-body q3 keeps its
   horizontal swipe row via :not(.btq-grid-tall). ---- */
@media (max-width:560px){
  .btq-card{padding:20px 14px}
  .btq-prompt{font-size:22px;margin:8px 0 18px}
  .btq-opt-grid:not(.btq-grid-tall){grid-template-columns:repeat(2,1fr);gap:8px}
  .btq-opt-card .btq-opt-cap{padding:8px 7px;font-size:12px;line-height:1.3}
}

/* result: Yang<->Yin spectrum meter (replaces the raw a-e histogram) */
.btq-meter{position:relative;height:13px;border-radius:999px;margin:10px 0 4px;
  background:linear-gradient(90deg,var(--bt-violet),var(--bt-teal) 50%,var(--bt-coral));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.btq-meter.lg{height:17px}
.btq-meter.sm{height:9px;margin:0}
.btq-meter-pin{position:absolute;top:50%;width:3px;height:190%;border-radius:3px;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(10,8,12,.6),0 2px 6px rgba(0,0,0,.45)}
@media (prefers-reduced-motion: no-preference){
  .btq-meter-pin{transition:left .75s cubic-bezier(.22,1,.36,1)}
}
.btq-meter-scale{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.6;margin:3px 2px 0}
.btq-cat-rows{margin:8px 0 4px;display:grid;gap:12px}
.btq-cat-row{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:12px}
.btq-cat-label{font-size:13px;opacity:.85}
@media(max-width:480px){
  .btq-cat-row{grid-template-columns:92px 1fr;gap:9px}
  .btq-cat-label{font-size:12px}
  .btq-meter-scale{font-size:10px}
}

/* result: "Your style formula" — numbered principle + concrete cue, + copy */
.btq-formula{display:grid;gap:10px;margin:4px 0 14px}
.btq-fkey{display:grid;grid-template-columns:28px 1fr;gap:13px;align-items:start;
  background:rgba(0,224,198,.06);border:1px solid rgba(0,224,198,.22);border-radius:12px;padding:13px 15px}
.btq-fnum{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bt-violet),var(--bt-teal));color:#fff;font-weight:800;font-size:13px;flex:0 0 auto}
.btq-ftext strong{display:block;font-size:15px;line-height:1.32;margin-bottom:3px}
.btq-fhint{display:block;font-size:13.5px;line-height:1.5;opacity:.82}
.btq-copy{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--bt-ink);border-radius:999px;
  padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.btq-copy:hover{border-color:var(--bt-teal);background:rgba(0,224,198,.1)}
.btq-copy.is-copied{border-color:var(--bt-teal);color:var(--bt-teal);background:rgba(0,224,198,.12)}
@media(max-width:480px){.btq-fkey{padding:11px 13px;gap:11px}.btq-ftext strong{font-size:14px}.btq-fhint{font-size:13px}}

/* style formula cards as deep-links into the wardrobe guide sections */
.btq-fkey.is-link{text-decoration:none;color:var(--bt-ink);grid-template-columns:28px 1fr auto;
  transition:border-color .15s,background .15s,transform .08s}
.btq-fkey.is-link:hover{border-color:var(--bt-teal);background:rgba(0,224,198,.11)}
.btq-fkey.is-link:active{transform:scale(.995)}
.btq-fkey.is-link:focus-visible{outline:2px solid var(--bt-teal);outline-offset:2px}
.btq-farrow{align-self:center;color:var(--bt-teal);font-size:19px;opacity:.55;transition:transform .15s,opacity .15s}
.btq-fkey.is-link:hover .btq-farrow{opacity:1;transform:translateX(3px)}

/* live yin-yang pin during questions */
.btq-live{margin:0 0 14px}
.btq-live .btq-meter{margin:0 0 5px}
.btq-live-cap{font-size:12px;opacity:.62;letter-spacing:.02em}
.btq-live-cap strong{color:var(--bt-teal);font-weight:700}

/* staged result reveal */
.btq-veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,8,12,.92);border-radius:18px;z-index:5;font-size:18px;letter-spacing:.06em;
  color:var(--bt-teal);animation:btq-veil-pulse 1s ease infinite alternate}
@keyframes btq-veil-pulse{from{opacity:.75}to{opacity:1}}
.btq-card.btq-result{position:relative}
.btq-staging>*:not(.btq-veil){opacity:0}
.btq-staged>*{opacity:1;transition:opacity .4s ease}
.btq-celebs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.btq-celeb{background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.4);
  border-radius:999px;padding:7px 14px;font-size:13.5px}
.btq-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 4px}
@media (prefers-reduced-motion: reduce){.btq-veil{display:none}}

/* verdict audio button + equalizer */
.btq-audio .btq-eq{display:none;margin-left:8px}
.btq-audio.is-playing .btq-eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.btq-eq i{width:3px;background:var(--bt-teal);border-radius:2px;animation:btq-eq .7s ease infinite alternate}
.btq-eq i:nth-child(2){animation-delay:.2s}.btq-eq i:nth-child(3){animation-delay:.4s}
@keyframes btq-eq{from{height:4px}to{height:12px}}
@media (prefers-reduced-motion: reduce){.btq-eq i{animation:none;height:8px}}

/* per-question self-assessment help */
.btq-help-toggle{background:none;border:0;color:var(--bt-teal);font-size:14px;font-weight:600;
  cursor:pointer;padding:0 0 2px;margin:-8px 0 14px;border-bottom:1px dashed rgba(0,224,198,.5)}
.btq-help-toggle.is-open{opacity:.75}
.btq-help{background:rgba(0,224,198,.05);border:1px solid rgba(0,224,198,.2);border-radius:12px;
  padding:14px 16px;margin:0 0 16px}
.btq-help ul{margin:0;padding-left:18px}
.btq-help li{font-size:14px;line-height:1.55;margin:6px 0;opacity:.92}
.btq-help-mistake{font-size:13.5px;line-height:1.5;margin:10px 0 0;opacity:.85;color:var(--bt-coral)}
.btq-help-mistake strong{color:inherit}