/* The existing interactive quiz, framed by the approved DNA footage. */
body.home-art-direction #try { position: relative; isolation: isolate; background: #100d22; }
.home-art-direction #try .quiz-scene__art {
  position: absolute; inset: 0 0 auto; height: clamp(780px, 60vw, 980px);
  pointer-events: none; z-index: -1;
  mask-image: linear-gradient(#000 84%, transparent);
  -webkit-mask-image: linear-gradient(#000 84%, transparent);
}
.quiz-scene__art :is(img, video) {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: right center;
}
.quiz-scene__art video { visibility: hidden; }
.quiz-scene__art.has-frame video { visibility: visible; }
.home-art-direction #try .hs-try-copy { grid-template-columns: 1fr; gap: 22px; margin-bottom: 40px; }
.home-art-direction #try .hs-try-copy :is(.ds-h2, .ds-lead) { max-width: 54%; }
/* Alpha is applied to the surface, never to its text or controls. The solid
   default also covers browsers without backdrop-filter support. */
.home-art-direction #try .hs-quiz {
  width: 76%; max-width: 960px;
  background: #181526;
  border: 1px solid #ffffff38; border-radius: 18px;
  box-shadow: 0 1px 0 #ffffff12 inset, 0 24px 64px -32px #00000080;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  --ds-ink-2: #d5cede; --ds-ink-3: #cdc5d9;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home-art-direction #try .hs-quiz {
    background: linear-gradient(125deg, #141121d1, #1c172ec2);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
}
.home-art-direction #try .quiz-scene__steps {
  gap: 8px; margin: 0; padding: 12px;
  border: 0; border-bottom: 1px solid #ffffff1f; background: transparent;
}
.home-art-direction #try .quiz-scene__steps li {
  gap: 8px; padding: 12px 10px; border: 0; border-radius: 8px;
  font: 500 15px/1.5 var(--ds-font-text); color: #d2c9df;
}
.home-art-direction #try .quiz-scene__steps li::before { display: none; }
.home-art-direction #try .quiz-scene__steps li>span {
  display: grid; place-items: center; width: 26px; height: 26px;
  flex: none; opacity: 1; border: 1px solid #ffffff45; border-radius: 50%;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.home-art-direction #try .quiz-scene__steps li.is-now { color: #fff; background: #e3d7ff1f; font-weight: 650; }
.home-art-direction #try .quiz-scene__steps li.is-now>span { background: #e1d5fb; border-color: #e1d5fb; color: #292038; }
.home-art-direction #try .quiz-scene__steps li.is-right>span { border-color: #78d1a4; }
.home-art-direction #try .quiz-scene__steps li.is-wrong>span { border-color: #eba49a; }
.home-art-direction #try .hs-quiz-progress {
  min-height: 56px; padding: 14px 36px; border-bottom: 0; gap: 16px;
}
.home-art-direction #try :is(.hs-quiz-label, .hs-quiz-count, .hs-quiz-num, .hs-quiz-key) { font-family: var(--ds-font-text); }
.home-art-direction #try .hs-quiz-label { color: #ded6e9; font-weight: 500; }
.home-art-direction #try .hs-quiz-count { color: #ded6e9; font-variant-numeric: tabular-nums; }
.home-art-direction #try .hs-quiz-bar { height: 3px; max-width: 120px; background: #ffffff26; }
.home-art-direction #try .hs-quiz-card { padding: 16px 36px 32px; background: transparent; }
.home-art-direction #try .hs-quiz-q { column-gap: 28px; }
.home-art-direction #try .hs-quiz-meta { gap: 12px; }
.home-art-direction #try .hs-quiz-subject { background: #e0d2fb1c; color: #eae1fb; padding: 5px 10px; border-radius: 5px; }
.home-art-direction #try .hs-quiz-stem {
  margin-top: 22px; font: 550 clamp(24px, 2.2vw, 30px)/1.42 var(--ds-font-text);
  letter-spacing: -.015em; text-wrap: pretty;
}
.home-art-direction #try .hs-quiz-opts { gap: 12px; }
.home-art-direction #try .hs-quiz-opt {
  padding: 16px 18px; min-height: 66px; gap: 16px; border-radius: 8px;
}
.home-art-direction #try .hs-quiz-opt:not(.is-correct):not(.is-wrong) { background: #100d208f; border-color: #ffffff38; }
.home-art-direction #try .hs-quiz:not(.is-answered) .hs-quiz-opt:hover { background: #ece1ff1c; border-color: #d4c3f1; }
.home-art-direction #try .hs-quiz-key { width: 30px; height: 30px; border: 0; border-radius: 5px; background: #2b263b; }
.home-art-direction #try .hs-quiz-foot { margin-top: 28px; padding-top: 22px; border-top: 1px solid #ffffff26; }
.home-art-direction #try .hs-quiz-hint { color: #d2c9df; }
.home-art-direction #try .hs-quiz-next {
  min-height: 48px; padding: 12px 22px; border-radius: 7px;
  background: #e5d9fb; color: #241b34; font-weight: 650;
}
.home-art-direction #try .hs-quiz-next:hover { background: #f4edff; }
.home-art-direction #try .hs-quiz-why { border-radius: 8px; }
.home-art-direction #try .hs-dbr-stamp { color: #f2d9a7; }
.home-art-direction #try .hs-dbr-stamp:is([data-tier="flawless"], [data-tier="sharp"]) { color: #c4eed2; }
.home-art-direction #try .hs-dbr-stamp[data-tier="shaky"] { color: #ffd4cb; }
.home-art-direction #try :is(.hs-quiz-opt,.hs-quiz-next,#hsQuizRestart):focus-visible { outline: 3px solid #e6d9ff; outline-offset: 4px; }
.quiz-scene__motion {
  position: absolute; right: max(24px, calc((100vw - 1240px) / 2)); top: 24px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid #ffffff52; border-radius: 7px; background: #171125e6;
  color: #f5f0ff; font: 500 14px/1.5 var(--ds-font-text); cursor: pointer;
}
.quiz-scene__motion[hidden] { display: none; }
.quiz-scene__motion:hover { background: #30243c; }
.quiz-scene__motion:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media (max-width: 860px) {
  body.home-art-direction #try { padding-top: 300px; }
  .home-art-direction #try .quiz-scene__art {
    height: 380px;
    mask-image: linear-gradient(#000 60%, transparent 95%);
    -webkit-mask-image: linear-gradient(#000 60%, transparent 95%);
  }
  .home-art-direction #try .hs-try-copy :is(.ds-h2, .ds-lead) { max-width: none; }
  .quiz-scene__motion { top: 20px; right: 20px; }
  .home-art-direction #try .hs-quiz { width: 100%; max-width: none; border-radius: 14px; }
  .home-art-direction #try .hs-quiz-progress { padding-inline: 24px; }
  .home-art-direction #try .hs-quiz-card { padding: 12px 24px 28px; }
  .home-art-direction #try .hs-quiz-stem { font-size: 25px; }
  .home-art-direction #try .hs-quiz-opt { padding: 15px 16px; }
}
@media (max-width: 620px) {
  .home-art-direction #try .quiz-scene__steps { gap: 4px; padding: 10px; }
  .home-art-direction #try .quiz-scene__steps li { gap: 8px; padding: 10px; font-size: 14px; }
  .home-art-direction #try .hs-quiz-progress { padding-inline: 20px; gap: 12px; }
  .home-art-direction #try .hs-quiz-card { padding-inline: 20px; }
  .home-art-direction #try .hs-quiz-stem { font-size: 23px; }
  .home-art-direction #try .hs-quiz-next { width: 100%; margin: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .home-art-direction #try .hs-quiz { background: #181526; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .home-art-direction #try .hs-quiz { background: Canvas; border-color: CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-scene__art.has-frame video { visibility: hidden; }
}