/* EmTalk interface evolution. Presentation only; source content and controllers remain intact. */
:root {
  --emt-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --emt-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --emt-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  --emt-icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");
  --emt-icon-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
  --emt-icon-logo: url("../media/be3c9bbf364b96573039-699f41e3d7567d6efbb47cda_Large-Icon-Background.svg");
  --emt-ink: #261238;
  --emt-action: #5e3a7d;
  --emt-action-hover: #4b2b66;
  --emt-action-pressed: #39204f;
  --emt-surface: #fffefa;
  --emt-line: #d9c9ea;
  --emt-control-radius: 14px;
  --emt-card-radius: 20px;
  --emt-focus: #59317c;
}

/* Keep native semantics and give every interactive element a visible keyboard state. */
html :is(a, button, summary, [role="button"], [role="radio"], [role="checkbox"], [role="slider"]):focus-visible {
  outline: 3px solid var(--emt-focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px var(--emt-surface);
}

:is(.header-clean__cta, .header-clean__mobile-cta, .header-clean__menu-button, .global-button-primary, .button-primary-3, .test-retry-button, .tests-card-button-v2, .link-block-8) {
  box-sizing: border-box;
  color: #fff;
  background: var(--emt-action);
  border: 1px solid var(--emt-action);
  border-radius: var(--emt-control-radius);
  box-shadow: none;
  min-height: 48px;
  height: auto;
  padding: 12px 22px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
  text-decoration: none;
  overflow: visible;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* Homepage hero actions have stable destinations and retain their existing widths. */
html[data-route-id="/"] :is(.link-block-9, .link-block-7) {
  box-sizing: border-box;
  background-image: none;
  border-radius: var(--emt-control-radius);
  box-shadow: none;
  min-height: 56px;
  width: min(300px, 100%);
  height: auto;
  padding: 16px 24px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease, border-color 160ms ease;
}
html[data-route-id="/"] .link-block-9 { background: var(--emt-action); color: #fff; border: 1px solid var(--emt-action); }
html[data-route-id="/"] .link-block-7 { background: var(--emt-surface); color: var(--emt-ink); border: 1px solid var(--emt-action); }
html[data-route-id="/"] :is(.link-block-9, .link-block-7) > div {
  color: inherit;
  font: inherit;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html[data-route-id="/"] :is(.link-block-9, .link-block-7) > div > div { color: inherit; font: inherit; }

.header-clean__nav {
  justify-self: center;
  width: max-content;
  max-width: 100%;
  color: var(--emt-ink);
  background: var(--emt-surface);
  border: 1px solid var(--emt-line);
  border-radius: 16px;
  padding: 0 12px;
  gap: 16px;
  text-shadow: none;
}
.header-clean__link {
  box-sizing: border-box;
  color: var(--emt-ink);
  min-width: 44px;
  min-height: 48px;
  padding: 12px 4px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}
.header-clean__link.w--current, .header-clean__mobile-link.w--current {
  color: var(--emt-action);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.header-clean__mobile-link {
  color: var(--emt-ink);
  min-height: 48px;
  border-radius: 12px;
  font-family: Manrope, Arial, sans-serif;
  line-height: 24px;
}
.header-clean__mobile-panel { background: var(--emt-surface); border-radius: var(--emt-card-radius); box-shadow: 0 12px 36px #2612381a; }
html :is(.header-clean__mobile-panel, .header-clean__mobile-link) { text-shadow: none; }
.header-clean__menu-button { padding: 12px 16px; border-color: var(--emt-surface); box-shadow: 0 0 0 1px var(--emt-action); }
.header-clean__menu-icon { position: relative; flex: 0 0 22px; width: 22px; height: 20px; font-size: 0; }
.header-clean__menu-icon::before {
  content: "";
  position: absolute;
  inset: 2px 0;
  background: linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat, linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat, linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;
  pointer-events: none;
}
.header-clean__mobile[open] .header-clean__menu-icon::before {
  inset: 0;
  background: linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

.tests-card-v2 {
  border: 1px solid var(--emt-line);
  border-radius: var(--emt-card-radius);
  background: var(--emt-surface);
  box-shadow: 0 4px 16px #26123808;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tests-card-meta-v2 { color: var(--emt-action); }

.card-problem { border-radius: var(--emt-card-radius); }
/* Keep the DM illustration geometry while containing its decorative overhang. */
html[data-route-id="/dm"] .hero-dm { overflow-x: clip; }

.answer-option {
  position: relative;
  box-sizing: border-box;
  color: var(--emt-ink);
  background: var(--emt-surface);
  border: 1px solid var(--emt-line);
  border-radius: var(--emt-control-radius);
  min-height: 48px;
  padding: 12px 48px 12px 16px;
}
.answer-option.is-selected { border-color: var(--emt-action); background: #efe5f7; }
.answer-option.is-selected::after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  right: 16px;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--emt-icon-check) center / contain no-repeat;
  mask: var(--emt-icon-check) center / contain no-repeat;
  pointer-events: none;
}
.answer-option .text-answer { color: var(--emt-ink); font-family: Manrope, Arial, sans-serif; font-size: 20px; line-height: 1.4; }
:is(.nav-prev, .nav-next) { position: relative; background: var(--emt-surface); border: 1px solid var(--emt-action); box-sizing: border-box; border-radius: var(--emt-control-radius); min-width: 48px; min-height: 48px; }
.nav-next { background: var(--emt-action); color: #fff; }
.nav-prev { color: var(--emt-action); }
:is(.nav-prev, .nav-next) img { opacity: 0; }
:is(.nav-prev, .nav-next)::after {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--emt-icon-arrow) center / contain no-repeat;
  mask: var(--emt-icon-arrow) center / contain no-repeat;
  pointer-events: none;
}
.nav-prev::after { transform: rotate(180deg); }
:is(button, a, [role="button"])[aria-disabled="true"], button:disabled { cursor: not-allowed; }

html[data-route-id] .emtalk-audio-player { background: var(--emt-surface); border: 1px solid var(--emt-line); border-radius: var(--emt-card-radius); box-shadow: 0 4px 16px #26123808; }
html[data-route-id] :is(.emtalk-audio-player, .sp-track-wrapper .audio-player)[hidden] { display: none; }
/* The interface owns the player skin. Specificity keeps it independent of
   the source stylesheet order; base rules continue to own its grid geometry. */
html[data-route-id] .emtalk-player-ui__controls { background: #342044; border-radius: 16px; }
html[data-route-id] .emtalk-player-ui__play { background: var(--emt-surface); color: #342044; border: 1px solid var(--emt-surface); }
html[data-route-id] .emtalk-player-ui__play-icon {
  border: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--emt-icon-play) center / contain no-repeat;
  mask: var(--emt-icon-play) center / contain no-repeat;
}
.emtalk-player-ui__play[data-player-action="pause"] .emtalk-player-ui__play-icon { -webkit-mask-image: var(--emt-icon-pause); mask-image: var(--emt-icon-pause); }
.emtalk-player-ui__play[data-player-action="cancel"] .emtalk-player-ui__play-icon { -webkit-mask-image: var(--emt-icon-cancel); mask-image: var(--emt-icon-cancel); }
html[data-route-id] .emtalk-player-ui__progress { position: relative; height: 28px; background: transparent; overflow: visible; }
html[data-route-id] .emtalk-player-ui__progress::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 6px; background: #9675bc; border-radius: 999px; pointer-events: none; }
html[data-route-id] .emtalk-player-ui__progress-fill { position: absolute; top: 11px; height: 6px; background: var(--emt-surface); border-radius: 999px; pointer-events: none; }
html :is(.emtalk-player-ui__play, .emtalk-player-ui__progress):focus-visible { outline: 3px solid var(--emt-surface); outline-offset: 4px; box-shadow: none; }
html[data-route-id] .emtalk-player-status { color: var(--emt-ink); }

@media (hover: hover) {
  :is(.header-clean__cta, .header-clean__mobile-cta, .header-clean__menu-button, .global-button-primary, .button-primary-3, .test-retry-button, .link-block-8):hover { color: #fff; background: var(--emt-action-hover); border-color: var(--emt-action-hover); }
  html[data-route-id="/"] .link-block-9:hover { background: var(--emt-action-hover); }
  html[data-route-id="/"] .link-block-7:hover, .header-clean__mobile-link:hover { background: #efe5f7; color: var(--emt-ink); }
  .tests-card-v2:hover { border-color: var(--emt-action); box-shadow: 0 8px 24px #26123812; }
  .tests-card-v2:hover .tests-card-button-v2 { background: var(--emt-action-hover); }
  .answer-option:hover { border-color: var(--emt-action); }
  .nav-prev:hover { background: #efe5f7; }
  .nav-next:hover { background: var(--emt-action-hover); }
  html[data-route-id] .emtalk-player-ui__play:hover { background: #efe5f7; }
  .header-clean__menu-button:hover { border-color: var(--emt-surface); }
}
:is(.header-clean__cta, .header-clean__mobile-cta, .header-clean__menu-button, .global-button-primary, .button-primary-3, .test-retry-button, .tests-card-button-v2, .link-block-8):active {
  color: #fff;
  background: var(--emt-action-pressed);
  border-color: var(--emt-action-pressed);
}
.header-clean__menu-button:active { border-color: var(--emt-surface); }
.nav-prev:active { background: #e6d7f0; }
.nav-next:active { background: var(--emt-action-pressed); }
.tests-card-v2:active .tests-card-button-v2 { background: var(--emt-action-pressed); border-color: var(--emt-action-pressed); }
html[data-route-id="/"] .link-block-9:active { background: var(--emt-action-pressed); border-color: var(--emt-action-pressed); }
html[data-route-id="/"] .link-block-7:active { background: #e6d7f0; border-color: var(--emt-action-pressed); }

@media (max-width: 479px) {

  :is(.header-clean__cta, .header-clean__mobile-cta, .global-button-primary, .button-primary-3, .test-retry-button, .link-block-8) { max-width: 100%; padding: 12px 18px; }
  .tests-card-v2 { padding: 24px; }
  .answer-option { padding: 12px 44px 12px 12px; }
  .answer-option .text-answer { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-route-id] :is(.header-clean__cta, .header-clean__mobile-cta, .header-clean__menu-button, .global-button-primary, .button-primary-3, .test-retry-button, .tests-card-button-v2, .link-block-8, .link-block-9, .link-block-7, .tests-card-v2, .link-block-2, .nav-prev, .nav-next, .emtalk-player-ui__play, .emtalk-player-ui__progress) { transition: none; }
}

@media (forced-colors: active) {
  :is(.header-clean__menu-button, .header-clean__menu-button:hover, .header-clean__menu-button:active) { forced-color-adjust: none; color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  .header-clean__menu-icon { forced-color-adjust: none; color: CanvasText; }
  .header-clean__mobile-panel { box-shadow: none; }
  .header-clean__logo { position: relative; }
  .header-clean__logo-image { opacity: 0; }
  .header-clean__logo::after { content: ""; position: absolute; inset: 0; pointer-events: none; forced-color-adjust: none; background: CanvasText; -webkit-mask: var(--emt-icon-logo) center / contain no-repeat; mask: var(--emt-icon-logo) center / contain no-repeat; }
  html :is(a, button, summary, [role="button"], [role="radio"], [role="checkbox"], [role="slider"]):focus-visible { outline-color: CanvasText; box-shadow: none; }
  .answer-option.is-selected { border: 3px solid CanvasText; }
  .answer-option.is-selected::after { forced-color-adjust: none; background: CanvasText; }
  html[data-route-id] .emtalk-player-ui__controls { background: Canvas; color: CanvasText; }
  html[data-route-id] .emtalk-player-ui__controls * { color: CanvasText; }
  html :is(.emtalk-player-ui__play, .emtalk-player-ui__progress):focus-visible { outline-color: CanvasText; }
  html[data-route-id] :is(.nav-prev, .nav-next, .emtalk-player-ui__play, .emtalk-player-ui__play:hover, .emtalk-player-ui__play:active) { forced-color-adjust: none; color: CanvasText; background: Canvas; border-color: CanvasText; }
  html[data-route-id] .emtalk-player-ui__progress::before { background: Canvas; border: 1px solid CanvasText; box-sizing: border-box; }
  html[data-route-id] .emtalk-player-ui__progress-fill { background: CanvasText; }
}