/* Consolidated from answer-page-figma-265-final.css during frontend cleanup 2026-07-08. */
/* Figma node 265:2 desktop answer page adaptation. */
.answer-page-back-button {
  display: none;
}

html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .workbench-resizer::before,
html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .workbench-resizer::after,
html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer::before,
html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active {
    --ans265-ink: #0d1320;
    --ans265-muted: rgba(69, 80, 96, 0.72);
    --ans265-soft: rgba(255, 255, 255, 0.56);
    --ans265-line: rgba(255, 255, 255, 0.78);
    --ans265-mint: #10a48a;
    --ans265-gold: #ffd21f;
    --ans265-blue: #1870df;
    --ans265-red: #ef5a62;
    --ans265-shadow: 0 28px 74px -54px rgba(42, 56, 69, 0.38);
    --ans265-recorder-height: 210px;
    --ans265-recorder-grid-rows: 30px 50px 80px;
    --ans265-recorder-gap: 12px;
    --ans265-recorder-padding: 14px 48px 18px;
    --ans265-recorder-saved-height: 196px;
    --ans265-recorder-saved-padding: 18px 30px;
    --ans265-record-button-size: 66px;
    --ans265-record-button-art-size: 112px;
    --ans265-record-button-art-y: -14px;
    background:
      radial-gradient(520px 420px at calc(50% - 500px) 120px, rgba(255, 222, 76, 0.48), transparent 72%),
      radial-gradient(620px 520px at calc(50% + 540px) 620px, rgba(255, 249, 219, 0.42), transparent 72%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 230px, #fff0aa 520px, #fff7c9 920px, #fff1b4 100%) !important;
    background-color: #fff1b4 !important;
    background-attachment: scroll !important;
    color: var(--ans265-ink) !important;
    overflow-x: hidden !important;
  }

  html body.view-practice.figma-answer-265-active .main,
  html body.view-practice.figma-answer-265-active .app-shell,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 {
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 {
    box-sizing: border-box !important;
    width: min(1224px, calc(100vw - 56px)) !important;
    max-width: min(1224px, calc(100vw - 56px)) !important;
    min-width: 0 !important;
    margin: 94px auto 34px !important;
    padding: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265::before,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265::after {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
    filter: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265::before {
    top: 82px !important;
    right: -76px !important;
    width: 420px !important;
    height: 760px !important;
    background: rgba(255, 248, 222, 0.23) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265::after {
    left: 34px !important;
    bottom: -120px !important;
    width: 560px !important;
    height: 430px !important;
    background: rgba(255, 247, 227, 0.2) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-top-grid,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-left-rail,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .estimated-score-card,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-hero > img,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-points,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .panel-heading {
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-hero {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    height: 96px !important;
    min-height: 96px !important;
    margin: 0 0 18px !important;
    padding: 22px 28px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 28px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.38)),
      rgba(255, 249, 229, 0.76) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(255, 226, 118, 0.12),
      0 18px 44px -34px rgba(163, 107, 5, 0.16) !important;
    backdrop-filter: blur(36px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.12) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-copy {
    display: grid !important;
    grid-template-columns: max-content max-content 1fr !important;
    align-items: center !important;
    gap: 0 24px !important;
    min-width: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-copy .eyebrow {
    grid-column: 1 / -1 !important;
    margin: 0 0 2px !important;
    color: rgba(39, 51, 67, 0.72) !important;
    font-size: 14px !important;
    font-weight: 720 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-copy h2 {
    margin: 0 !important;
    color: var(--ans265-ink) !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 42px !important;
    letter-spacing: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-copy > p:not(.eyebrow) {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: rgba(46, 59, 76, 0.78) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    font-size: 16px !important;
    font-weight: 760 !important;
    line-height: 20px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-dashboard-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 826px) 18px minmax(350px, 380px) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 960px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    align-items: start !important;
    background: transparent !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-panel {
    grid-column: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-workbench {
    display: grid !important;
    grid-template-columns: 226px 16px minmax(0, 584px) !important;
    gap: 0 !important;
    width: 826px !important;
    min-height: 960px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .workbench-resizer,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer {
    display: block !important;
    width: 16px !important;
    min-width: 16px !important;
    background: transparent !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .workbench-resizer::after,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer::after {
    width: 2px !important;
    opacity: 0.42 !important;
    background: linear-gradient(180deg, transparent, rgba(12, 166, 144, 0.32), transparent) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-browser,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .answer-stage,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel {
    border: 1px solid var(--ans265-line) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.34)),
      rgba(255, 255, 255, 0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(255, 232, 160, 0.12),
      var(--ans265-shadow) !important;
    backdrop-filter: blur(30px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.14) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-browser {
    position: sticky !important;
    top: 88px !important;
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 226px !important;
    height: 960px !important;
    max-height: calc(100dvh - 110px) !important;
    min-height: 680px !important;
    margin: 0 !important;
    padding: 20px 14px !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background:
      linear-gradient(180deg, rgba(255, 221, 48, 0.5), rgba(255, 239, 159, 0.34) 36%, rgba(255, 255, 255, 0.5) 74%),
      rgba(255, 255, 255, 0.42) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-browser-head {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-browser-head .eyebrow,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #backToTypesButton,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-list-tools {
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionListTitle {
    margin: 0 !important;
    color: var(--ans265-ink) !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 26px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-list-count {
    color: rgba(61, 74, 91, 0.72) !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    line-height: 16px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-finder {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field {
    position: relative !important;
    display: block !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow: inset 0 -1px 12px rgba(10, 143, 120, 0.05) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field > span {
    position: absolute !important;
    left: 15px !important;
    top: 11px !important;
    width: 18px !important;
    height: 18px !important;
    overflow: hidden !important;
    color: transparent !important;
    background: url("./assets/figma-answer-265/search-figma.svg") center / 18px 18px no-repeat !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field input {
    width: 100% !important;
    height: 100% !important;
    padding: 0 14px 0 45px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: rgba(20, 28, 40, 0.84) !important;
    font-size: 12px !important;
    font-weight: 680 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field input::-webkit-search-decoration,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field input::-webkit-search-cancel-button,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field input::-webkit-search-results-button,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field input::-webkit-search-results-decoration,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field > span::before {
    content: none !important;
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-filter-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 16px !important;
    color: rgba(55, 66, 84, 0.86) !important;
    background: rgba(255, 253, 244, 0.44) !important;
    font-size: 12px !important;
    font-weight: 820 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-filter-summary b {
    color: var(--ans265-mint) !important;
    font-size: 12px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionList {
    flex: 1 1 auto !important;
    width: var(--ans265-question-list-width, calc(100% - 28px)) !important;
    min-height: 0 !important;
    margin: 4px 0 0 !important;
    padding: 0 10px 96px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .virtual-question-list-window {
    display: grid !important;
    gap: 12px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 20px !important;
    grid-template-areas: "tag code arrow" "tag main arrow" !important;
    align-items: center !important;
    gap: 4px 10px !important;
    width: 198px !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 22px !important;
    color: var(--ans265-ink) !important;
    background: rgba(255, 255, 255, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row::after {
    content: "" !important;
    grid-area: arrow !important;
    width: 19px !important;
    height: 19px !important;
    background: url("./assets/figma-answer-265/chevron-right-figma.svg") center / 19px 19px no-repeat !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.64) !important;
    box-shadow: 0 16px 30px -24px rgba(14, 88, 74, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row.selected {
    border-color: rgba(18, 196, 166, 0.44) !important;
    background: rgba(238, 255, 250, 0.8) !important;
    box-shadow: 0 12px 28px -14px rgba(10, 166, 143, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row.selected .question-type-mini {
    border: 1px solid rgba(18, 196, 166, 0.18) !important;
    color: #067765 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 14px rgba(8, 125, 112, 0.08) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row.selected .question-row-status {
    border: 1px solid rgba(18, 196, 166, 0.16) !important;
    color: #067765 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 6px 12px rgba(8, 125, 112, 0.06) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row.selected .question-row-status.is-done {
    border-color: rgba(100, 116, 139, 0.18) !important;
    color: #415064 !important;
    background: rgba(255, 255, 255, 0.92) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row .question-code {
    grid-area: code !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: rgba(49, 62, 82, 0.78) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 860 !important;
    line-height: 16px !important;
    text-align: left !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row .question-code::before {
    content: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row .question-type-mini {
    grid-area: tag !important;
    display: grid !important;
    width: 40px !important;
    height: 28px !important;
    place-items: center !important;
    align-self: center !important;
    border-radius: 999px !important;
    color: var(--ans265-mint) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row-main {
    grid-area: main !important;
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row-main::before {
    content: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row-main strong {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--ans265-ink) !important;
    font-size: 13px !important;
    font-weight: 880 !important;
    line-height: 16px !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row-main small {
    justify-self: start !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    color: rgba(8, 132, 113, 0.88) !important;
    background: rgba(231, 252, 244, 0.72) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 12px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-list-progress {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 7px 10px !important;
    padding: 14px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-list-progress span {
    color: rgba(88, 101, 118, 0.7) !important;
    font-size: 12px !important;
    font-weight: 820 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-list-progress strong {
    color: var(--ans265-ink) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-list-progress i {
    grid-column: 1 / -1 !important;
    height: 4px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(83, 99, 107, 0.12) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-list-progress b {
    display: block !important;
    width: 32% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: var(--ans265-mint) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .answer-stage {
    grid-column: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 584px !important;
    min-height: 960px !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
    border-radius: 28px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator {
    display: grid !important;
    grid-template-columns: 36px 1fr auto 36px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-mobile-question-list-back] {
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step] {
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 999px !important;
    color: transparent !important;
    background: rgba(255, 255, 255, 0.58) !important;
    font-size: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step="prev"]::before,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step="next"]::before {
    content: "" !important;
    width: 20px !important;
    height: 20px !important;
    background: center / 20px 20px no-repeat !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step="prev"]::before {
    background-image: url("./assets/figma-answer-265/prev-figma.svg") !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step="next"]::before {
    background-image: url("./assets/figma-answer-265/next-figma.svg") !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator .current-question-pill {
    justify-self: start !important;
    min-width: 160px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 17px !important;
    color: rgba(20, 27, 38, 0.82) !important;
    background: rgba(255, 255, 255, 0.56) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-card.active-question {
    order: 1 !important;
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 246px !important;
    margin: 0 !important;
    padding: 22px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.44)),
      rgba(255, 255, 255, 0.46) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 22px 56px -46px rgba(30, 45, 58, 0.38) !important;
    backdrop-filter: blur(26px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.14) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 26px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-meta span,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .active-question-code,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .ra-mode-inline button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(14, 166, 143, 0.18) !important;
    border-radius: 999px !important;
    color: var(--ans265-mint) !important;
    background: rgba(236, 253, 245, 0.58) !important;
    font-size: 12px !important;
    font-weight: 860 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .ra-mode-control button,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .ra-mode-control button:hover,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .ra-mode-control button.active,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .ra-mode-control button.active:hover {
    border-color: rgba(66, 74, 88, 0.14) !important;
    color: #5d6674 !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .ra-mode-control button.active {
    border-color: rgba(176, 132, 25, 0.3) !important;
    color: #1f2937 !important;
    background: rgba(255, 239, 178, 0.86) !important;
    box-shadow: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .ra-mode-control button::before,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .ra-mode-control button::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-title-line {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #activeQuestionTitle {
    margin: 0 !important;
    color: var(--ans265-ink) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 30px !important;
    letter-spacing: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionText {
    position: relative !important;
    display: block !important;
    min-height: 96px !important;
    margin: 0 !important;
    padding: 22px 58px 22px 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 20px !important;
    color: rgba(19, 25, 35, 0.92) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    font-size: 18px !important;
    font-weight: 720 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionText::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    bottom: 18px !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(16, 164, 138, 0.22) !important;
    border-radius: 999px !important;
    background:
      url("./assets/figma-answer-265/speaker-figma.svg") center / 18px 18px no-repeat,
      rgba(235, 255, 247, 0.66) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-tools button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 19px !important;
    color: rgba(19, 25, 35, 0.72) !important;
    background: rgba(255, 255, 255, 0.54) !important;
    font-size: 12px !important;
    font-weight: 820 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-tools button::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    background: center / 18px 18px no-repeat !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #playRaDemoButton::before { background-image: url("./assets/figma-answer-265/tool-demo-figma.svg") !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #playRaDemoButton[hidden] { display: none !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #flowPracticeQuestionButton {
    border-color: rgba(255, 255, 255, 0.64) !important;
    color: #10a48a !important;
    background: transparent !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 14px 30px -28px rgba(30, 54, 66, 0.26) !important;
  }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #flowPracticeQuestionButton::before {
    content: "" !important;
    display: block !important;
    background-image: url("./assets/figma-answer-265/tool-flow-figma.svg") !important;
  }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #favoriteQuestionButton::before { background-image: url("./assets/figma-answer-265/tool-favorite-figma.svg") !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #backToQuestionListButton::before { background-image: url("./assets/figma-answer-265/tool-back-figma.svg") !important; }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel {
    order: 2 !important;
    display: grid !important;
    grid-template-rows: auto 68px auto !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 218px !important;
    margin: 0 !important;
    padding: 24px 34px 22px !important;
    overflow: visible !important;
    border-radius: 28px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .timer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 24px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: var(--ans265-mint) !important;
    background: rgba(255, 255, 255, 0.5) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #timerValue,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #timerLabel {
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 18px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .wave {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: min(288px, 100%) !important;
    height: 68px !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .wave span {
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(16, 164, 138, 0.28) !important;
    animation: figma265DotFloat 1.9s ease-in-out infinite !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .wave span:nth-child(2n) { animation-delay: 0.12s !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .wave span:nth-child(3n) { animation-delay: 0.24s !important; }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .recorder-actions {
    display: grid !important;
    grid-template-columns: 52px 88px minmax(140px, 1fr) 52px !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-height: 74px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .recorder-actions button {
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 18px 38px -28px rgba(38, 54, 68, 0.3) !important;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #prevQuestionButton,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #nextQuestionButton {
    display: grid !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    color: transparent !important;
    background: rgba(255, 255, 255, 0.58) !important;
    font-size: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #prevQuestionButton::before,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #nextQuestionButton::before {
    content: "" !important;
    width: 20px !important;
    height: 20px !important;
    background: center / 20px 20px no-repeat !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #prevQuestionButton::before { background-image: url("./assets/figma-answer-265/prev-figma.svg") !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #nextQuestionButton::before { background-image: url("./assets/figma-answer-265/next-figma.svg") !important; }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recordButton {
    display: grid !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: transparent !important;
    background:
      url("./assets/figma-answer-265/mic-figma.svg") center / 28px 28px no-repeat,
      radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.38), transparent 34%),
      #11c7a7 !important;
    box-shadow:
      0 18px 36px -18px rgba(17, 199, 167, 0.62),
      0 0 0 10px rgba(17, 199, 167, 0.1),
      0 0 0 22px rgba(17, 199, 167, 0.045) !important;
    font-size: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recordButton::after {
    content: "开始录音" !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: var(--ans265-mint) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #submitButton {
    display: inline-flex !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 38px !important;
    justify-content: center !important;
    border-radius: 999px !important;
    color: var(--ans265-mint) !important;
    background: rgba(237, 255, 249, 0.52) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #submitButton:disabled {
    color: rgba(49, 78, 72, 0.46) !important;
    background: rgba(255, 255, 255, 0.46) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-discussion {
    order: 3 !important;
    width: 100% !important;
    min-height: 296px !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow: var(--ans265-shadow) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.scoring,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.has-report,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.speech-result-ready,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel:not(.scoring):not(.has-report) {
    grid-column: 3 !important;
    position: sticky !important;
    top: 88px !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 380px !important;
    min-width: 0 !important;
    max-width: 380px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 108px) !important;
    margin: 0 !important;
    padding: 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 36px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel > .eyebrow,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .score-ring,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .ai-breakdown,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .solution-panel,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .action-plan-list,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .report-actions {
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel > h2 {
    margin: 0 0 4px !important;
    color: var(--ans265-ink) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 34px !important;
    letter-spacing: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel > h2::after {
    content: "提交后查看评分细节" !important;
    display: block !important;
    margin-top: 4px !important;
    color: rgba(85, 98, 114, 0.68) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-list {
    display: block !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .figma265-feedback,
  .figma265-report-ready {
    display: grid !important;
    gap: 18px !important;
  }

  .figma265-side-card,
  .figma265-dimension-card,
  .figma265-deep-card,
  .figma265-recording-card,
  .figma265-radar-card,
  .figma265-total-card,
  .figma265-score-processing {
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 28px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38)),
      rgba(255, 255, 255, 0.46) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 20px 52px -42px rgba(38, 54, 68, 0.34) !important;
    backdrop-filter: blur(24px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.14) !important;
  }

  .figma265-side-card {
    padding: 20px !important;
  }

  .figma265-card-head,
  .figma265-recording-head,
  .figma265-deep-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .figma265-side-card h3,
  .figma265-dimension-card h3,
  .figma265-deep-card h3,
  .figma265-recording-card h4 {
    margin: 0 !important;
    color: var(--ans265-ink) !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 26px !important;
  }

  .figma265-side-card p,
  .figma265-section-head p,
  .figma265-deep-card p {
    margin: 7px 0 0 !important;
    color: rgba(86, 99, 115, 0.72) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 18px !important;
  }

  .figma265-status,
  .figma265-recording-head span,
  .figma265-deep-head button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 24px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(115, 225, 203, 0.44) !important;
    border-radius: 999px !important;
    color: #008d7a !important;
    background: linear-gradient(90deg, rgba(235, 255, 249, 0.82), rgba(255, 255, 255, 0.62)) !important;
    box-shadow: 0 8px 18px rgba(16, 164, 138, 0.08) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  .figma265-status i {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: currentColor !important;
  }

  .figma265-pending-wave {
    position: relative !important;
    height: 96px !important;
    margin-top: 18px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.48) !important;
    overflow: hidden !important;
  }

  .figma265-pending-wave small {
    display: none !important;
  }

  .figma265-wave-line {
    position: absolute !important;
    inset: 8px 10px !important;
    display: block !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 16px) !important;
    overflow: visible !important;
    transform-origin: center !important;
  }

  .figma265-wave-line path {
    fill: none !important;
    vector-effect: non-scaling-stroke !important;
  }

  .figma265-wave-main,
  .figma265-wave-soft,
  .figma265-wave-glow {
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .figma265-wave-glow {
    stroke: rgba(18, 196, 166, 0.16) !important;
    stroke-width: 18 !important;
    filter: blur(0.4px) drop-shadow(0 6px 15px rgba(12, 148, 130, 0.16)) !important;
  }

  .figma265-wave-soft {
    stroke: rgba(92, 232, 210, 0.28) !important;
    stroke-width: 9 !important;
  }

  .figma265-wave-main {
    stroke: #12bca4 !important;
    stroke-width: 2.7;
    filter:
      drop-shadow(0 0 8px rgba(18, 196, 166, 0.14))
      drop-shadow(0 5px 10px rgba(4, 127, 113, 0.06));
  }

  .figma265-wave-line.is-active .figma265-wave-main {
    animation: figma265WaveDraw 3.4s ease-in-out infinite !important;
  }

  .figma265-wave-line i {
    display: none !important;
  }

  .figma265-flow-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 14px 28px 0 !important;
  }

  .figma265-flow-dots i {
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: rgba(222, 190, 74, 0.56) !important;
  }

  .figma265-check-card dl {
    display: grid !important;
    gap: 8px !important;
    margin: 16px 0 0 !important;
  }

  .figma265-check-card dl div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    align-items: center !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.5) !important;
  }

  .figma265-check-card dt,
  .figma265-check-card dd {
    margin: 0 !important;
    color: rgba(47, 57, 72, 0.72) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
  }

  .figma265-check-card dd {
    color: var(--ans265-ink) !important;
    font-weight: 900 !important;
  }

  .figma265-history-card h3 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .figma265-history-card h3 i,
  .figma265-deep-head h3 i {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 4px !important;
    background: var(--ans265-blue) !important;
    transform: rotate(45deg) !important;
  }

  .figma265-feedback-scoring { gap: 20px !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.scoring > h2::after { content: "AI 正在评分，请稍候" !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.scoring .figma265-feedback-status { width: 88px !important; height: 34px !important; color: #2f80ed !important; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.28)), linear-gradient(90deg, rgba(234,244,255,.72), rgba(234,244,255,.72)) !important; box-shadow: 0 8px 9px rgba(47,128,237,.08), inset 0 1px 9px rgba(255,255,255,.78) !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.scoring .figma265-feedback-status::before { background: #2f80ed !important; }
  .figma265-score-processing { position: relative !important; width: 286px !important; height: 262px !important; min-height: 262px !important; padding: 0 !important; overflow: hidden !important; text-align: center !important; background: linear-gradient(90deg, rgba(255,247,215,.12), rgba(255,247,215,.12)), linear-gradient(90deg, rgba(244,255,251,.1), rgba(244,255,251,.1)), linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.78)) !important; }
  .figma265-scoring-head { position: absolute; left: 24px; top: 18px; display: grid; grid-template-columns: 58px 102px 58px; align-items: center; gap: 10px; width: 238px; height: 26px; color: #1d2630; }
  .figma265-scoring-head i { display: block; height: 1px; border-radius: 1px; background: rgba(189,238,229,.65); }
  .figma265-scoring-head strong { font-size: 16px; font-weight: 900; line-height: 21px; }
  .figma265-scoring-copy { position: absolute; left: 24px; top: 52px; width: 236px; margin: 0; color: #6f7b86; font-size: 12px; font-weight: 650; line-height: 16px; }
  .figma265-processing-wave { position: absolute; left: 20px; top: 88px; width: 246px; height: 92px; margin: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: linear-gradient(90deg, rgba(236,251,244,.2), rgba(236,251,244,.2)), linear-gradient(90deg, rgba(255,255,255,.64), rgba(255,255,255,.64)); box-shadow: 0 10px 11px rgba(0,163,110,.08), inset 0 1px 11px rgba(255,255,255,.8); overflow: hidden; }
  .figma265-scoring-grid { position: absolute; inset: 7px 26px 9px 20px; background: repeating-linear-gradient(90deg, rgba(231,246,242,.55) 0 1px, transparent 1px 50px); }
  .figma265-scoring-scan { position: absolute; left: 93px; top: 7px; width: 42px; height: 76px; border-radius: 20px; background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.22)), linear-gradient(90deg, rgba(183,255,240,.26), rgba(183,255,240,.26)); box-shadow: 0 0 18px rgba(0,163,110,.12); animation: figma265ScoringScan 2.8s ease-in-out infinite; }
  .figma265-scoring-bars { position: absolute; left: 25px; top: 13px; display: flex; align-items: center; gap: 7.6px; width: 202px; height: 64px; }
  .figma265-scoring-bars span { width: 4px; height: var(--bar-h); border-radius: 3px; background: rgba(0,163,110,.7); animation: figma265ScoringBars 1.7s ease-in-out infinite; animation-delay: var(--bar-delay); }
  .figma265-scoring-bars span:nth-child(n+13) { background: rgba(184,196,201,.22); animation-duration: 2.6s; }
  .figma265-processing-chips { position: absolute; left: 27px; top: 202px; display: flex; gap: 7px; align-items: center; justify-content: flex-start; width: 226px; }
  .figma265-processing-chips span { display: grid; place-items: center; height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.66); border-radius: 15px; color: #00a36e; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.28)), linear-gradient(90deg, rgba(236,251,244,.72), rgba(236,251,244,.72)); box-shadow: 0 8px 9px rgba(0,163,110,.08), inset 0 1px 9px rgba(255,255,255,.78); font-size: 10px; font-weight: 900; line-height: 13px; }
  .figma265-processing-chips span[data-tone="blue"] { color: #2f80ed; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.28)), linear-gradient(90deg, rgba(234,244,255,.72), rgba(234,244,255,.72)); box-shadow: 0 8px 9px rgba(47,128,237,.08), inset 0 1px 9px rgba(255,255,255,.78); }
  .figma265-processing-chips span[data-tone="red"] { color: #d64545; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.28)), linear-gradient(90deg, rgba(255,240,240,.72), rgba(255,240,240,.72)); box-shadow: 0 8px 9px rgba(214,69,69,.08), inset 0 1px 9px rgba(255,255,255,.78); }
  .figma265-progress-card { width: 286px !important; min-height: 216px !important; padding: 16px 20px 14px !important; border-radius: 24px !important; background: linear-gradient(90deg, rgba(255,247,215,.12), rgba(255,247,215,.12)), linear-gradient(90deg, rgba(244,255,251,.1), rgba(244,255,251,.1)), linear-gradient(90deg, rgba(255,255,255,.76), rgba(255,255,255,.76)) !important; }
  .figma265-progress-card ol { display: grid; gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }
  .figma265-progress-card li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; min-height: 37px; }
  .figma265-progress-card li > i { position: relative; width: 18px; height: 18px; border-radius: 50%; background: rgba(207,216,222,.82); }
  .figma265-progress-card li.is-done > i { background: #dffbf4; box-shadow: inset 0 0 0 1px rgba(0,163,110,.34); }
  .figma265-progress-card li.is-active > i { background: #eaf4ff; box-shadow: inset 0 0 0 1px rgba(47,128,237,.34); animation: figma265ScoringDot 1.8s ease-in-out infinite; }
  .figma265-progress-card li.is-done > i::before { content: "✓"; position: absolute; inset: 0; color: #00a36e; font-size: 12px; line-height: 18px; text-align: center; }
  .figma265-progress-card li.is-active > i::before, .figma265-progress-card li:not(.is-done):not(.is-active) > i::before { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #2f80ed; }
  .figma265-progress-card li:not(.is-done):not(.is-active) > i::before { background: #a8b7c3; }
  .figma265-progress-card strong { display: block; color: #1e2933; font-size: 13px; font-weight: 900; line-height: 17px; }
  .figma265-progress-card small, .figma265-scoring-privacy { display: block; margin: 2px 0 0; color: #8a949d; font-size: 10px; font-weight: 500; line-height: 13px; }
  .figma265-scoring-privacy { margin-top: 4px; color: #7a8792; font-size: 11px; line-height: 15px; }
  .figma265-feedback-scoring .figma265-return-answer { width: 202px !important; height: 46px !important; margin: 2px auto 0 !important; border-radius: 23px !important; border-color: rgba(178,229,209,.72) !important; color: #006b47 !important; background: linear-gradient(90deg, rgba(236,251,244,.18), rgba(236,251,244,.18)), linear-gradient(90deg, rgba(255,255,255,.76), rgba(255,255,255,.76)) !important; box-shadow: 0 10px 9px rgba(0,163,110,.08), inset 0 1px 9px rgba(255,255,255,.78) !important; }

  .figma265-return-answer,
  .figma265-soft-action,
  .figma265-primary-action {
    height: 44px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: rgba(20, 28, 40, 0.78) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .figma265-primary-action {
    color: #fff !important;
    background: linear-gradient(135deg, #15c8a6, #10a48a) !important;
    box-shadow: 0 18px 34px -24px rgba(16, 164, 138, 0.68) !important;
  }

  .figma265-report-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  .figma265-dimension-card {
    display: grid !important;
    gap: 16px !important;
    padding: 20px !important;
    border-radius: 32px !important;
  }

  .figma265-section-head {
    display: flex !important;
    justify-content: space-between !important;
  }

  .figma265-total-card {
    display: grid !important;
    grid-template-columns: 1fr 78px !important;
    align-items: center !important;
    min-height: 92px !important;
    padding: 14px 14px 14px 18px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58)),
      rgba(255, 247, 216, 0.26) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
  }

  .figma265-total-card small,
  .figma265-total-card span {
    display: block !important;
    color: rgba(74, 87, 105, 0.78) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  .figma265-total-card span {
    margin-top: 8px !important;
    color: #8a6712 !important;
  }

  .figma265-total-card strong {
    display: block !important;
    margin-top: 2px !important;
    color: #05070b !important;
    font-size: 52px !important;
    font-weight: 950 !important;
    line-height: 54px !important;
  }

  .figma265-total-card em {
    margin-left: 6px !important;
    color: rgba(55, 66, 84, 0.82) !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 760 !important;
  }

  .figma265-total-card b {
    display: grid !important;
    width: 72px !important;
    height: 72px !important;
    place-items: center !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at center, rgba(239, 255, 250, 0.96) 0 35%, transparent 36%),
      conic-gradient(rgba(20, 194, 162, 0.72) 0 var(--score), rgba(210, 248, 238, 0.82) var(--score) 360deg) !important;
    box-shadow: 0 0 0 12px rgba(226, 255, 247, 0.52), 0 12px 28px rgba(20, 194, 162, 0.12) !important;
  }

  .figma265-total-card b i {
    color: #008d7a !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 900 !important;
  }

  .figma265-recording-card {
    display: grid !important;
    gap: 14px !important;
    padding: 18px !important;
    border-radius: 24px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .figma265-audio-fallback,
  .figma265-native-audio {
    width: 100% !important;
  }

  .figma265-audio-fallback {
    display: grid !important;
    grid-template-columns: 38px 1fr 42px !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .figma265-audio-fallback button {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(16, 164, 138, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(235, 255, 247, 0.58) !important;
  }

  .figma265-audio-fallback button::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 auto !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 9px solid var(--ans265-mint) !important;
  }

  .figma265-audio-fallback i {
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(120, 136, 154, 0.12) !important;
  }

  .figma265-audio-fallback b {
    display: block !important;
    width: 54% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: var(--ans265-mint) !important;
  }

  .figma265-sentence-legend {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .figma265-sentence-legend i {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
  }

  .figma265-sentence-legend i:nth-child(1) { background: var(--ans265-mint) !important; }
  .figma265-sentence-legend i:nth-child(2) { background: var(--ans265-gold) !important; }
  .figma265-sentence-legend i:nth-child(3) { background: var(--ans265-red) !important; }

  .figma265-sentence-legend span {
    color: rgba(76, 89, 107, 0.78) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 17px !important;
  }

  .figma265-sentence {
    display: block !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    color: var(--ans265-mint) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 22px !important;
  }

  .figma265-sentence span,
  .figma265-sentence span.good { color: var(--ans265-mint) !important; }
  .figma265-sentence span.warn { color: #f3b600 !important; }
  .figma265-sentence span.weak { color: #d94752 !important; }
  .figma265-radar-card {
    display: grid !important;
    place-items: center !important;
    height: 104px !important;
    border-radius: 28px !important;
  }

  .figma265-radar {
    width: 112px !important;
    height: 104px !important;
    overflow: visible !important;
  }

  .radar-grid,
  .radar-axis {
    fill: rgba(181, 238, 225, 0.26) !important;
    stroke: rgba(16, 164, 138, 0.3) !important;
    stroke-width: 1.4 !important;
  }

  .radar-axis {
    fill: none !important;
    stroke: rgba(255, 255, 255, 0.68) !important;
  }

  .radar-shape {
    fill: rgba(16, 164, 138, 0.22) !important;
    stroke: var(--ans265-mint) !important;
    stroke-width: 2 !important;
    animation: figma265RadarUnfold 2.8s ease-in-out infinite !important;
    transform-origin: 62px 58px !important;
  }

  .radar-dot {
    fill: var(--dot, #10a48a) !important;
    stroke: rgba(255, 255, 255, 0.72) !important;
    stroke-width: 1.5 !important;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--dot), transparent 55%)) !important;
    animation: figma265RadarGlow 2.5s ease-in-out infinite !important;
  }

  .radar-zero-core {
    fill: rgba(16, 164, 138, 0.82) !important;
    stroke: rgba(255, 255, 255, 0.88) !important;
    stroke-width: 2 !important;
    filter: drop-shadow(0 0 10px rgba(16, 164, 138, 0.2)) !important;
  }

  .figma265-metric-list {
    display: grid !important;
    gap: 10px !important;
  }

  .figma265-metric-list article {
    display: grid !important;
    grid-template-columns: 86px 72px 1fr 36px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.62) !important;
  }

  .figma265-metric-list span {
    color: rgba(61, 74, 91, 0.78) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  .figma265-metric-list strong {
    color: var(--ans265-ink) !important;
    font-size: 30px !important;
    font-weight: 950 !important;
  }

  .figma265-metric-list em {
    margin-left: 2px !important;
    color: rgba(61, 74, 91, 0.72) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 760 !important;
  }

  .figma265-metric-list i {
    height: 4px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(117, 132, 150, 0.12) !important;
  }

  .figma265-metric-list b {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: var(--metric) !important;
  }

  .figma265-metric-list small {
    color: var(--metric) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  .figma265-deep-card {
    display: grid !important;
    padding: 20px !important;
    border-radius: 28px !important;
  }

  .figma265-deep-cta-card {
    padding: 14px !important;
    overflow: visible !important;
  }

  .figma265-deep-correction-btn {
    position: relative !important;
    display: inline-grid !important;
    grid-template-columns: auto 20px !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    gap: 12px !important;
    width: auto !important;
    min-width: 166px !important;
    min-height: 58px !important;
    padding: 0 17px 0 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(32, 201, 151, 0.28) !important;
    border-radius: 23px !important;
    color: #006b57 !important;
    background:
      radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.96), transparent 38%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(233, 255, 248, 0.7)) !important;
    box-shadow:
      0 0 0 6px rgba(32, 201, 151, 0.045),
      0 14px 30px rgba(20, 151, 119, 0.16),
      0 0 26px rgba(32, 201, 151, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 16px 30px -24px rgba(16, 164, 138, 0) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    cursor: pointer !important;
    isolation: isolate !important;
  }

  .figma265-deep-correction-btn::before {
    content: "" !important;
    position: absolute !important;
    inset: -42% auto -42% -55% !important;
    width: 46% !important;
    z-index: -1 !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) !important;
    filter: blur(2px) !important;
    transform: rotate(13deg) !important;
    animation: deep-correction-button-sheen 3.2s ease-in-out infinite !important;
  }

  .figma265-deep-correction-btn::after {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    z-index: -2 !important;
    border-radius: 18px !important;
    background: radial-gradient(circle at 76% 50%, rgba(32, 201, 151, 0.16), transparent 58%) !important;
    opacity: 0.84 !important;
  }

  .figma265-deep-correction-btn .deep-correction-action-label {
    display: block !important;
    align-items: center !important;
    color: inherit !important;
    font-size: 17px !important;
    font-weight: 930 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.82),
      0 -1px 0 rgba(3, 88, 74, 0.12) !important;
    white-space: nowrap !important;
  }

  .figma265-deep-correction-btn i {
    display: none !important;
  }

  .figma265-deep-correction-btn .deep-correction-action-arrow {
    position: relative !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: rgba(32, 201, 151, 0.11) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  .figma265-deep-correction-btn .deep-correction-action-arrow::before {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 4px !important;
    width: 7px !important;
    height: 7px !important;
    border-top: 2px solid #07977d !important;
    border-right: 2px solid #07977d !important;
    transform: rotate(45deg) !important;
  }
}

/* v25 high-specificity Figma recheck: beat older :has() desktop rules. */
@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active {
    overflow-x: hidden !important;
    background:
      radial-gradient(520px 420px at calc(50% - 500px) 120px, rgba(255, 222, 76, 0.48), transparent 72%),
      radial-gradient(620px 520px at calc(50% + 540px) 620px, rgba(255, 249, 219, 0.42), transparent 72%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 230px, #fff0aa 520px, #fff7c9 920px, #fff1b4 100%) !important;
    background-attachment: scroll !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-top-title,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-top-subtitle,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-bookmark-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto 42px !important;
    align-items: center !important;
    gap: 10px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 24px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 252, 241, 0.42)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 16px 34px -28px rgba(94, 86, 58, 0.18) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .current-question-pill {
    justify-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #17212f !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title tabs"
      "compose compose"
      "list list"
      "sentinel sentinel" !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 22px 24px 24px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.62), transparent 46%),
      linear-gradient(180deg, rgba(255, 252, 244, 0.72), rgba(255, 247, 226, 0.58)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 22px 44px -34px rgba(93, 82, 48, 0.22) !important;
    backdrop-filter: blur(18px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.04) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion::before {
    grid-area: title !important;
    position: static !important;
    display: block !important;
    margin: 0 !important;
    color: #101820 !important;
    font-size: 22px !important;
    font-weight: 940 !important;
    line-height: 36px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-tabs {
    grid-area: tabs !important;
    position: static !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-tabs
    button {
    min-width: 92px !important;
    height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.52) !important;
    box-shadow: none !important;
    color: #65707d !important;
    font-size: 14px !important;
    font-weight: 840 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-tabs
    button.active {
    border-color: rgba(137, 232, 213, 0.72) !important;
    color: #087d70 !important;
    background: rgba(232, 255, 247, 0.66) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .figma265-discussion-compose {
    grid-area: compose !important;
    position: static !important;
    order: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 8px 0 18px !important;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-list {
    grid-area: list !important;
    position: static !important;
    order: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-load-sentinel {
    grid-area: sentinel !important;
  }
}

/* v28 EOF guard: keep RA prompt cards fully self-sizing after every desktop override. */
@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 22px 24px 20px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice:not(.fill-mode)
    .question-card.active-question
    .question-meta,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice:not(.fill-mode)
    .question-card.active-question
    .question-title-line,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    #activeQuestionTitle {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-overflow: clip !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-text-line,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .dict-word {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-text-line {
    display: block !important;
    width: 100% !important;
  }
}

/* v27 final guard: long RA prompts must expand in the page flow.
   This overrides older fixed Figma coordinates that clipped the prompt body. */
@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-workbench,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 20px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 22px 24px 20px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-meta,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-title-line,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-title-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: start !important;
    gap: 10px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    #activeQuestionTitle {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 20px 24px !important;
    overflow: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-overflow: clip !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-text-line,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .dict-word {
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-text-line {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText::after {
    content: none !important;
    display: none !important;
  }
}

/* v21 desktop action polish: remove the hard white action strip and restyle the passed button. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .figma-mobile-passed-button {
    position: static !important;
    display: inline-flex !important;
    align-self: center !important;
    width: auto !important;
    min-width: 166px !important;
    height: 40px !important;
    margin: 2px auto 0 !important;
    padding: 0 18px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 999px !important;
    color: rgba(8, 125, 112, 0.9) !important;
    background:
      radial-gradient(circle at 24% 10%, rgba(255, 255, 255, 0.92), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(232, 255, 249, 0.42)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 16px 34px -28px rgba(13, 150, 132, 0.44),
      0 0 0 1px rgba(30, 214, 186, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    font-size: 14px !important;
    font-weight: 860 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .figma-mobile-passed-button::before {
    content: "" !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(10, 168, 146, 0.92) 0 34%, transparent 36%),
      rgba(224, 255, 248, 0.9) !important;
    box-shadow: 0 0 0 5px rgba(18, 200, 172, 0.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools[hidden] {
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    button {
    width: auto !important;
    min-width: 112px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 14px 30px -28px rgba(30, 54, 66, 0.26) !important;
    backdrop-filter: blur(14px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.04) !important;
    font-size: 14px !important;
    font-weight: 840 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    #backToQuestionListButton {
    min-width: 104px !important;
  }

}

/* v15: center the pending sidebar cards and add a subtle ready-card motion. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .feedback-list {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-feedback-pending {
    width: min(100%, 540px) !important;
    margin-inline: auto !important;
    justify-items: center !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-feedback-pending
    .figma265-side-card {
    box-sizing: border-box !important;
    width: min(100%, 520px) !important;
    margin-inline: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card {
    position: relative !important;
    overflow: hidden !important;
    animation: figma265ReadyCardBreath 4.8s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      linear-gradient(110deg, transparent 0 24%, rgba(255, 255, 255, 0.38) 43%, transparent 62%),
      radial-gradient(circle at 18% 18%, rgba(22, 199, 171, 0.1), transparent 38%) !important;
    opacity: 0.56 !important;
    transform: translateX(-34%) !important;
    animation: figma265ReadySheen 5.4s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card
    .figma265-pending-wave {
    isolation: isolate !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card
    .figma265-wave-line {
    transform-origin: center !important;
    animation: figma265ReadyLineShell 5.4s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card
    .figma265-flow-dots {
    transform-origin: center !important;
    animation: figma265FlowDotsPulse 2.8s ease-in-out infinite !important;
  }
}

@keyframes figma265ReadyCardBreath {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 20px 52px -42px rgba(38, 54, 68, 0.34),
      0 0 0 rgba(18, 205, 177, 0) !important;
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 24px 60px -42px rgba(38, 54, 68, 0.38),
      0 0 34px rgba(18, 205, 177, 0.11) !important;
  }
}

@keyframes figma265ReadySheen {
  0%, 18% { transform: translateX(-42%); opacity: 0.18; }
  46% { transform: translateX(0); opacity: 0.58; }
  74%, 100% { transform: translateX(38%); opacity: 0.16; }
}

@keyframes figma265ReadyWaveDrift {
  0%, 100% { transform: translateY(1px); opacity: 0.9; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes figma265FlowDotsPulse {
  0%, 100% { filter: saturate(1) drop-shadow(0 0 0 rgba(18, 205, 177, 0)); opacity: 0.82; }
  50% { filter: saturate(1.12) drop-shadow(0 8px 18px rgba(18, 205, 177, 0.16)); opacity: 1; }
}

/* v14 final override: recording rail must not show a waveform; only the mic button contains the live wave. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    background: url("./assets/figma-answer-265/voice-rail-figma.svg") center / 472px 54px no-repeat !important;
    filter: none !important;
    animation: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::after {
    display: none !important;
    content: "" !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 62px !important;
    height: 28px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), #ffffff 48%, rgba(226, 255, 249, 0.94)) !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 62px 28px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 62px 28px no-repeat !important;
    opacity: var(--speech-wave-opacity, 0.72) !important;
    transform:
      translate(-50%, -50%)
      scaleX(var(--speech-wave-scale-x, 0.86))
      scaleY(var(--speech-wave-scale-y, 0.62)) !important;
    transform-origin: center !important;
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 12) * 0.7px) rgba(255, 255, 255, 0.5))
      drop-shadow(0 9px 16px rgba(5, 126, 112, 0.18)) !important;
    animation: none !important;
    transition: opacity 70ms linear, transform 58ms linear, filter 70ms linear !important;
  }
}

/* v15 final sidebar alignment: center the three pending cards and animate the ready card. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .feedback-list {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-feedback-pending {
    box-sizing: border-box !important;
    width: min(100%, 540px) !important;
    margin-inline: auto !important;
    justify-items: center !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-feedback-pending
    .figma265-side-card {
    box-sizing: border-box !important;
    width: min(100%, 520px) !important;
    margin-inline: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card {
    position: relative !important;
    overflow: hidden !important;
    animation: figma265ReadyCardBreathFinal 4.8s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      linear-gradient(110deg, transparent 0 24%, rgba(255, 255, 255, 0.38) 43%, transparent 62%),
      radial-gradient(circle at 18% 18%, rgba(22, 199, 171, 0.1), transparent 38%) !important;
    opacity: 0.5 !important;
    transform: translateX(-36%) !important;
    animation: figma265ReadySheenFinal 5.4s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card
    .figma265-wave-line {
    transform-origin: center !important;
    animation: figma265ReadyLineShell 5.4s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card
    .figma265-flow-dots {
    transform-origin: center !important;
    animation: figma265FlowDotsPulseFinal 2.8s ease-in-out infinite !important;
  }
}

@keyframes figma265ReadyCardBreathFinal {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 20px 52px -42px rgba(38, 54, 68, 0.34),
      0 0 0 rgba(18, 205, 177, 0);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 24px 60px -42px rgba(38, 54, 68, 0.38),
      0 0 34px rgba(18, 205, 177, 0.11);
  }
}

@keyframes figma265ReadySheenFinal {
  0%, 18% { transform: translateX(-42%); opacity: 0.16; }
  46% { transform: translateX(0); opacity: 0.56; }
  74%, 100% { transform: translateX(38%); opacity: 0.14; }
}

@keyframes figma265ReadyWaveDriftFinal {
  0%, 100% { transform: translateY(1px); opacity: 0.9; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes figma265FlowDotsPulseFinal {
  0%, 100% { filter: saturate(1) drop-shadow(0 0 0 rgba(18, 205, 177, 0)); opacity: 0.82; }
  50% { filter: saturate(1.12) drop-shadow(0 8px 18px rgba(18, 205, 177, 0.16)); opacity: 1; }
}

/* Answer page view isolation: prevent inactive app pages such as Profile/Learning Center from leaking below long RA content. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    .view[data-view-panel]:not(#practice) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.view[data-view-panel].active-view {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Figma 272:2 final parity layer: actual node parameters + exported SVG assets. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active {
    --ans265-ink: #0d1320;
    --ans265-text: #2a313b;
    --ans265-muted: #65707d;
    --ans265-mint: #10a48a;
    --ans265-mint-deep: #078c79;
    --ans265-blue: #1870df;
    --ans265-gold: #ffd21f;
    --ans265-card-effect:
      0 18px 44px -34px rgba(163, 107, 5, 0.1),
      inset 0 1px 10px -8px rgba(255, 255, 255, 0.36) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar {
    width: 1224px !important;
    height: 70px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 28px !important;
    background: rgba(250, 255, 252, 0.62) !important;
    box-shadow: var(--ans265-card-effect) !important;
    backdrop-filter: blur(36px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand {
    left: 12px !important;
    top: 10px !important;
    width: 478px !important;
    height: 50px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand::before {
    width: 50px !important;
    height: 50px !important;
    background-image: url("./assets/figma-answer-265/brand-logo-glass.svg") !important;
    background-size: 50px 50px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand-copy strong {
    left: 60px !important;
    top: 5px !important;
    width: 140px !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker {
    left: 258px !important;
    top: 2px !important;
    width: 220px !important;
    height: 46px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 12px 24px -20px rgba(92, 71, 15, 0.12) !important;
    transform: translateX(64px) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker::after {
    right: 26px !important;
    top: 12px !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("./assets/figma-answer-265/chevron-down-figma.svg") !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker select {
    padding-left: 28px !important;
    padding-right: 58px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-list {
    left: 525px !important;
    top: 10px !important;
    gap: 15px !important;
    width: 397px !important;
    height: 50px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link.admin-access-only.is-hidden {
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link {
    width: 88px !important;
    height: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 25px !important;
    background: rgba(255, 255, 255, 0.44) !important;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 12px 24px -22px rgba(23, 89, 219, 0.14) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link .icon {
    left: 15px !important;
    top: 14px !important;
    width: 20px !important;
    height: 20px !important;
    background-size: 20px 20px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link > span:last-child {
    left: 42px !important;
    top: 15px !important;
    width: 40px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link.active > span:last-child {
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card {
    left: auto !important;
    right: 26px !important;
    top: 10px !important;
    width: 222px !important;
    height: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 25px !important;
    background: rgba(255, 247, 232, 0.6) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card img {
    left: 8px !important;
    top: 7px !important;
    width: 36px !important;
    height: 36px !important;
    content: url("./assets/figma-answer-265/account-avatar.svg") !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card span {
    left: 55px !important;
    top: 9px !important;
    width: 98px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card small {
    margin-top: 3px !important;
    color: rgba(63, 77, 97, 0.96) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 13px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card b {
    right: 12px !important;
    top: 14px !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("./assets/figma-answer-265/chevron-down-figma.svg") !important;
    background-size: 22px 22px !important;
    transform: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-hero,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .answer-stage,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-card.active-question,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-discussion {
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    background: rgba(255, 249, 237, 0.79) !important;
    box-shadow: var(--ans265-card-effect) !important;
    backdrop-filter: blur(36px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.08) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-hero {
    padding: 22px 28px !important;
    background: rgba(255, 249, 235, 0.76) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-copy .eyebrow {
    color: #3f4d61 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-copy h2 {
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-copy > p:not(.eyebrow) {
    color: #3f4d61 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 21px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-hero::after {
    border-color: rgba(189, 235, 223, 0.9) !important;
    color: #0f766e !important;
    background: rgba(236, 253, 245, 0.58) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-browser {
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    background: linear-gradient(180deg, rgba(255, 229, 77, 0.66) 0%, rgba(255, 245, 173, 0.45) 38%, rgba(255, 255, 255, 0.5) 74%, rgba(255, 255, 255, 0.64) 100%) !important;
    box-shadow: 0 20px 46px -18px rgba(107, 122, 97, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-browser-head {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 34px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionListTitle {
    position: static !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 24px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-list-count {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-filter-head {
    position: static !important;
    display: grid !important;
    width: 60px !important;
    height: 34px !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 17px !important;
    color: #078c7d !important;
    background: rgba(255, 255, 255, 0.64) !important;
    box-shadow: 0 8px 18px -10px rgba(20, 138, 115, 0.08) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-finder {
    position: absolute !important;
    left: 16px !important;
    top: 66px !important;
    width: 194px !important;
    gap: 10px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field {
    width: 194px !important;
    height: 40px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.56) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field input {
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-filter-summary {
    width: 194px !important;
    height: 32px !important;
    border-radius: 16px !important;
    background: rgba(255, 253, 244, 0.44) !important;
    font-weight: 700 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .question-list {
    top: 164px !important;
    height: 680px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row {
    width: 198px !important;
    height: 76px !important;
    min-height: 76px !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.46) !important;
    border-color: rgba(255, 255, 255, 0.64) !important;
    box-shadow: 0 8px 18px -14px rgba(15, 122, 107, 0.06) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row.selected {
    background: rgba(238, 255, 250, 0.8) !important;
    border-color: rgba(18, 196, 166, 0.44) !important;
    box-shadow: 0 12px 24px -14px rgba(15, 122, 107, 0.16) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row .question-type-mini {
    width: 40px !important;
    height: 28px !important;
    color: #0ba68f !important;
    background: rgba(255, 255, 255, 0.82) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row .question-code {
    color: rgba(70, 85, 105, 0.95) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row-main strong {
    color: var(--ans265-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .answer-stage {
    background: rgba(255, 249, 237, 0.79) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.48) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .practice-navigator [data-nav-step],
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step] {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow: 0 8px 18px -10px rgba(20, 107, 97, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator .current-question-pill {
    color: var(--ans265-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .stage-practice .practice-navigator .figma265-navigator-mode {
    border-color: rgba(189, 235, 223, 0.8) !important;
    color: #0f766e !important;
    background: rgba(236, 253, 245, 0.76) !important;
    font-weight: 700 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-card.active-question {
    background: rgba(255, 255, 255, 0.56) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-card.active-question .question-meta span {
    color: #65707d !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-title-line .active-question-code {
    color: #0f766e !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-title-line #activeQuestionTitle {
    color: var(--ans265-ink) !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionText {
    border: 1px solid rgba(255, 255, 255, 0.96) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--ans265-text) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionText::after {
    right: 16px !important;
    bottom: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-color: rgba(167, 239, 224, 0.9) !important;
    background-image: url("./assets/figma-answer-265/speaker-figma.svg"), linear-gradient(rgba(236, 253, 245, 0.84), rgba(236, 253, 245, 0.84)) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-tools button {
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 19px !important;
    background: rgba(255, 255, 255, 0.56) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #playRaDemoButton { color: #10a48a !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #favoriteQuestionButton { color: #f0b400 !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #backToQuestionListButton { color: #65707d !important; }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: linear-gradient(0deg, rgba(255, 242, 185, 0.14), rgba(255, 248, 222, 0.08)), rgba(255, 255, 255, 0.62) !important;
    box-shadow: inset 0 1px 14px rgba(255, 255, 255, 0.76), 0 14px 34px rgba(121, 92, 30, 0.06) !important;
    backdrop-filter: blur(18px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .timer {
    color: #008d7a !important;
    font-weight: 700 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #timerValue {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #timerLabel {
    color: #6f7b86 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recordButton {
    background-image: url("./assets/figma-answer-265/mic-button-figma.svg") !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recordButton::before {
    background-image: url("./assets/figma-answer-265/mic-figma.svg") !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-discussion {
    position: relative !important;
    border-color: rgba(255, 255, 255, 0.86) !important;
    background: rgba(255, 247, 232, 0.86) !important;
    box-shadow: 0 18px 34px rgba(121, 92, 30, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-discussion::before {
    content: "热门讨论" !important;
    position: absolute !important;
    left: 22px !important;
    top: 18px !important;
    color: var(--ans265-ink) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 23px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .discussion-tabs {
    position: absolute !important;
    left: 118px !important;
    top: 14px !important;
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .discussion-tabs button {
    width: 82px !important;
    height: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 16px !important;
    color: #65707d !important;
    background: rgba(255, 255, 255, 0.48) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .discussion-tabs button.active {
    border-color: rgba(189, 235, 223, 0.8) !important;
    color: #0f766e !important;
    background: rgba(236, 253, 245, 0.8) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .discussion-list {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    top: 58px !important;
    bottom: 20px !important;
    overflow: hidden auto !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel.scoring,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel.has-report {
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background: linear-gradient(90deg, rgba(255, 253, 247, 0.82), rgba(243, 240, 232, 0.7)) !important;
    box-shadow: 0 18px 34px rgba(27, 45, 42, 0.1) !important;
    backdrop-filter: blur(24px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel::before,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel:not(.reading-report-mode)::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel::before {
    inset: 0 !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, rgba(255, 248, 216, 0.2), rgba(255, 255, 255, 0.02)) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel:not(.reading-report-mode)::after {
    right: 30px !important;
    top: 44px !important;
    width: 46px !important;
    height: 820px !important;
    border-radius: 23px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel > * {
    position: relative !important;
    z-index: 1 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel:not(.reading-report-mode) > h2 {
    margin: 0 0 4px !important;
    color: #111827 !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel:not(.reading-report-mode) > h2::after {
    margin-top: 2px !important;
    color: #6b7585 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 17px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-feedback-status {
    top: 28px !important;
    right: 40px !important;
    width: 82px !important;
    height: 36px !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 18px !important;
    color: #008d7a !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(245, 255, 249, 0.7)) !important;
    box-shadow: 0 8px 18px rgba(12, 143, 120, 0.1) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    font-weight: 700 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-ready-card {
    width: 286px !important;
    min-height: 194px !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(ellipse at 32% 18%, rgba(207, 255, 246, 0.28), transparent 48%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(244, 255, 252, 0.64)) !important;
    box-shadow: 0 16px 30px rgba(37, 48, 39, 0.09) !important;
    backdrop-filter: blur(28px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.08) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-check-card {
    min-height: 172px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(244, 255, 252, 0.58)) !important;
    box-shadow: 0 14px 26px rgba(37, 48, 39, 0.08) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-history-card {
    min-height: 126px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(244, 255, 252, 0.56)) !important;
    box-shadow: 0 13px 24px rgba(37, 48, 39, 0.07) !important;
  }
}

@keyframes figma265DotFloat {
  0%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  50% {
    opacity: 0.72;
    transform: translateY(-3px);
  }
}

@keyframes figma265WaveDraw {
  0%, 100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}

@keyframes figma265RadarUnfold {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes figma265RadarGlow {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .figma265-wave-line.is-active .figma265-wave-main,
  .figma265-wave-line.is-active .figma265-wave-highlight,
  .figma265-ready-waveform .figma265-wave-mist,
  .figma265-ready-waveform .figma265-wave-spark,
  .radar-shape,
  .radar-dot,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .wave span {
    animation: none !important;
  }
}

/* Figma 272:2 exacting desktop overlay: coordinates, exported assets, and motion timing. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active {
    background:
      radial-gradient(520px 420px at calc(50% - 500px) 120px, rgba(255, 222, 76, 0.48), transparent 72%),
      radial-gradient(620px 520px at calc(50% + 540px) 620px, rgba(255, 249, 219, 0.42), transparent 72%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 230px, #fff0aa 520px, #fff7c9 920px, #fff1b4 100%) !important;
    min-width: 1180px !important;
  }

  html body.view-practice.figma-answer-265-active .app-shell {
    display: block !important;
    min-height: 100dvh !important;
    background: transparent !important;
  }

  html body.view-practice.figma-answer-265-active .app-shell::before,
  html body.view-practice.figma-answer-265-active .app-shell::after,
  html body.view-practice.figma-answer-265-active .main::before {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
    background: none !important;
    background-image: none !important;
    animation: none !important;
    filter: none !important;
  }

  html body.view-practice.figma-answer-265-active .app-shell::before {
    left: calc(50% + 330px) !important;
    top: 72px !important;
    width: 420px !important;
    height: 760px !important;
    background-image:
      radial-gradient(ellipse at 50% 50%, rgba(255, 229, 82, 0.22), rgba(255, 248, 220, 0.12) 48%, transparent 72%) !important;
    animation: figma265BgDrift 22s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active .app-shell::after {
    left: calc(50% - 600px) !important;
    top: 820px !important;
    width: 560px !important;
    height: 430px !important;
    background-image: url("./assets/figma-answer-265/bg-pearl-reflection.svg") !important;
    animation: figma265BgDrift 34s ease-in-out infinite reverse !important;
  }

  html body.view-practice.figma-answer-265-active .main::before {
    left: calc(50% - 210px) !important;
    top: -190px !important;
    width: 660px !important;
    height: 450px !important;
    background-image: url("./assets/figma-answer-265/bg-warm-halo.svg") !important;
    animation: figma265BgDrift 30s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active .main {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body.view-practice.figma-answer-265-active .topbar {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar {
    position: fixed !important;
    z-index: 40 !important;
    top: 0 !important;
    left: 50% !important;
    display: block !important;
    width: min(1224px, calc(100vw - 32px)) !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 28px !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
    background: rgba(250, 255, 252, 0.62) !important;
    box-shadow: 0 18px 44px -34px rgba(163, 107, 5, 0.1), inset 0 1px 10px -8px rgba(255, 255, 255, 0.36) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand {
    position: absolute !important;
    left: 11px !important;
    top: 9px !important;
    display: block !important;
    width: 478px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0d1320 !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand::before {
    content: "猩" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: grid !important;
    width: 50px !important;
    height: 50px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: url("./assets/figma-answer-265/brand-logo-glass.svg") center / 50px 50px no-repeat !important;
    color: #0d1320 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 28px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand-icon {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand-copy {
    display: block !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand-copy strong {
    position: absolute !important;
    left: 60px !important;
    top: 5px !important;
    width: 140px !important;
    color: #0d1320 !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    line-height: 40px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker {
    position: absolute !important;
    left: 230px !important;
    top: 2px !important;
    display: block !important;
    width: 220px !important;
    height: 46px !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 12px 24px -20px rgba(92, 71, 15, 0.12) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker::after {
    content: "" !important;
    position: absolute !important;
    right: 27px !important;
    top: 11px !important;
    width: 22px !important;
    height: 22px !important;
    background: url("./assets/figma-answer-265/chevron-down-figma.svg") center / 22px 22px no-repeat !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker select {
    width: 100% !important;
    height: 100% !important;
    padding: 0 58px 0 27px !important;
    border: 0 !important;
    outline: 0 !important;
    appearance: none !important;
    background: transparent !important;
    color: #0d1320 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 22px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-list {
    position: absolute !important;
    left: 496px !important;
    top: 9px !important;
    display: flex !important;
    width: auto !important;
    height: 50px !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link {
    position: relative !important;
    display: block !important;
    width: 88px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 25px !important;
    background: rgba(255, 255, 255, 0.44) !important;
    color: #0d1320 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 12px 24px -22px rgba(23, 89, 219, 0.14) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.74) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link .icon {
    position: absolute !important;
    left: 14px !important;
    top: 13px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link .icon svg {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar [data-nav-icon="home"] { background-image: url("./assets/figma-answer-265/nav-home-figma.svg") !important; }
  html body.view-practice.figma-answer-265-active .sidebar [data-nav-icon="library"] { background-image: url("./assets/figma-answer-265/nav-bank-figma.svg") !important; }
  html body.view-practice.figma-answer-265-active .sidebar [data-nav-icon="mock"] { background-image: url("./assets/figma-answer-265/nav-mock-figma.svg") !important; }
  html body.view-practice.figma-answer-265-active .sidebar [data-nav-icon="teacher"] { background-image: url("./assets/figma-answer-265/nav-teacher-figma.svg") !important; }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link > span:last-child {
    position: absolute !important;
    left: 41px !important;
    top: 14px !important;
    width: 40px !important;
    color: #0d1320 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 18px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link.active > span:last-child {
    font-weight: 900 !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card {
    position: absolute !important;
    left: calc(100% - 249px) !important;
    top: 9px !important;
    display: block !important;
    width: 222px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 25px !important;
    background: rgba(255, 247, 232, 0.6) !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card img {
    position: absolute !important;
    left: 7px !important;
    top: 6px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    content: url("./assets/figma-answer-265/account-avatar.svg") !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card span {
    position: absolute !important;
    left: 54px !important;
    top: 7px !important;
    display: block !important;
    width: 98px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card strong {
    display: block !important;
    color: #0d1320 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 16px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card small {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(63, 77, 97, 0.96) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 13px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card b {
    position: absolute !important;
    right: 13px !important;
    top: 13px !important;
    width: 22px !important;
    height: 22px !important;
    overflow: hidden !important;
    color: transparent !important;
    background: url("./assets/figma-answer-265/chevron-down-figma.svg") center / 22px 22px no-repeat !important;
    transform: rotate(-90deg) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 {
    width: min(1224px, calc(100vw - 32px)) !important;
    max-width: min(1224px, calc(100vw - 32px)) !important;
    margin-top: 94px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-dashboard-layout {
    grid-template-columns: 872px 18px 334px !important;
    grid-template-rows: 96px 18px 960px !important;
    width: 1224px !important;
    max-width: 100% !important;
    min-height: 960px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-panel {
    display: contents !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-workbench {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: 226px 18px 628px !important;
    width: 872px !important;
    height: 960px !important;
    min-height: 960px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-hero {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 1224px !important;
    max-width: 100% !important;
    height: 96px !important;
    margin: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .workbench-resizer,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer {
    position: relative !important;
    width: 18px !important;
    min-width: 18px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .workbench-resizer::before,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer::before {
    content: "" !important;
    position: sticky !important;
    top: 650px !important;
    display: block !important;
    width: 16px !important;
    height: 42px !important;
    margin-left: 1px !important;
    background: url("./assets/figma-answer-265/resizer-handle-figma.svg") center / 16px 42px no-repeat !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .workbench-resizer::before,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .workbench-resizer::after,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer::before,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-browser {
    position: relative !important;
    top: auto !important;
    width: 226px !important;
    height: 960px !important;
    max-height: none !important;
    min-height: 960px !important;
    padding: 20px 14px !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, rgba(255, 229, 77, 0.66) 0%, rgba(255, 245, 173, 0.45) 38%, rgba(255, 255, 255, 0.5) 74%, rgba(255, 255, 255, 0.64) 100%) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .search-field > span {
    background-image: url("./assets/figma-answer-265/search-figma.svg") !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-filter-summary::after {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    background: url("./assets/figma-answer-265/fold-chevron-figma.svg") center / 14px 14px no-repeat !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row::after {
    background-image: url("./assets/figma-answer-265/chevron-right-figma.svg") !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row.compact-question-row > *,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row-main,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row-main strong,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-row-main small,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-code,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-type-mini {
    position: static !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .answer-stage {
    position: relative !important;
    top: auto !important;
    width: 628px !important;
    height: 960px !important;
    min-height: 960px !important;
    padding: 20px !important;
    gap: 16px !important;
    border-radius: 28px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator {
    height: 54px !important;
    min-height: 54px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step="prev"]::before {
    background-image: url("./assets/figma-answer-265/prev-figma.svg") !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step="next"]::before {
    background-image: url("./assets/figma-answer-265/next-figma.svg") !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-card.active-question {
    height: 350px !important;
    min-height: 246px !important;
    max-height: 350px !important;
    padding: 20px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionText {
    max-height: 142px !important;
    overflow: auto !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionText::after {
    background-image: url("./assets/figma-answer-265/speaker-figma.svg"), linear-gradient(rgba(235, 255, 247, 0.66), rgba(235, 255, 247, 0.66)) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #playRaDemoButton::before { background-image: url("./assets/figma-answer-265/tool-demo-figma.svg") !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #favoriteQuestionButton::before { background-image: url("./assets/figma-answer-265/tool-favorite-figma.svg") !important; }
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #backToQuestionListButton::before { background-image: url("./assets/figma-answer-265/tool-back-figma.svg") !important; }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel {
    grid-template-rows: 32px 54px 92px !important;
    gap: 16px !important;
    width: 588px !important;
    min-height: 236px !important;
    height: 236px !important;
    padding: 17px 57px 22px !important;
    border-radius: 28px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .timer {
    width: 176px !important;
    height: 32px !important;
    min-height: 32px !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 0 1px 8px rgba(255, 255, 255, 0.8) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .wave {
    width: 472px !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url("./assets/figma-answer-265/voice-rail-figma.svg") center / 472px 54px no-repeat !important;
    box-shadow: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel .wave span {
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .recorder-actions {
    position: relative !important;
    display: block !important;
    width: 420px !important;
    min-height: 92px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #prevQuestionButton,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #nextQuestionButton {
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recordButton {
    position: absolute !important;
    left: 176px !important;
    top: 0 !important;
    width: 72px !important;
    height: 72px !important;
    background: url("./assets/figma-answer-265/mic-button-figma.svg") center / 124px 124px no-repeat !important;
    box-shadow: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recordButton::before {
    content: "" !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    background: url("./assets/figma-answer-265/mic-figma.svg") center / 28px 28px no-repeat !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recordButton::after {
    top: 76px !important;
    color: #008d7a !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #submitButton:disabled {
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #submitButton:not(:disabled) {
    position: absolute !important;
    left: 272px !important;
    top: 9px !important;
    min-width: 130px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-discussion {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    padding: 20px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.scoring,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.has-report,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.speech-result-ready,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel:not(.scoring):not(.has-report) {
    width: 334px !important;
    max-width: 334px !important;
    grid-column: 3 !important;
    grid-row: 3 !important;
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 24px !important;
    border-radius: 30px !important;
    background: linear-gradient(90deg, rgba(255, 253, 247, 0.82), rgba(243, 240, 232, 0.7)) !important;
    box-shadow: 0 18px 17px rgba(27, 45, 42, 0.1), inset 0 1px 10px -8px rgba(255, 255, 255, 0.36) !important;
    backdrop-filter: blur(12px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel > h2 {
    margin: 0 0 4px !important;
    font-size: 25px !important;
    line-height: 32px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel > h2::after {
    font-size: 12px !important;
    line-height: 17px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-list {
    margin-top: 24px !important;
  }

  .figma265-feedback {
    gap: 28px !important;
  }

  .figma265-ready-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: var(--answer-workspace-columns, minmax(0, 1fr)) !important;
    grid-template-areas: var(--answer-workspace-areas, none) !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    gap: 13px !important;
    min-height: 228px !important;
    padding: 22px 20px 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 30px !important;
    background:
      radial-gradient(220px 190px at 45% 6%, rgba(197, 255, 244, 0.5), transparent 66%),
      radial-gradient(210px 180px at 92% 22%, rgba(255, 244, 184, 0.28), transparent 68%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(246, 255, 252, 0.58)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 24px 52px -38px rgba(29, 58, 55, 0.24) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  .figma265-ready-wash {
    position: absolute !important;
    left: 50% !important;
    top: -86px !important;
    width: 310px !important;
    height: 230px !important;
    opacity: 0.64 !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    animation: figma265AquaWash 5.8s ease-in-out infinite !important;
  }

  .figma265-ready-sheen {
    position: absolute !important;
    right: 14px !important;
    top: 18px !important;
    width: 86px !important;
    height: 170px !important;
    border-radius: 999px !important;
    background: linear-gradient(112deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)) !important;
    opacity: 0.44 !important;
    pointer-events: none !important;
    transform: rotate(10deg) !important;
  }

  .figma265-ready-card .figma265-card-head {
    align-items: center !important;
    gap: 14px !important;
  }

  .figma265-ready-card h3 {
    font-size: 23px !important;
    line-height: 30px !important;
  }

  .figma265-ready-card > p {
    position: relative !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: -7px !important;
    color: rgba(79, 92, 110, 0.74) !important;
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .figma265-status {
    min-height: 26px !important;
    padding: 0 10px !important;
    color: #008d7a !important;
    background: linear-gradient(90deg, rgba(235, 255, 249, 0.82), rgba(255, 255, 255, 0.62)) !important;
    border-color: rgba(115, 225, 203, 0.44) !important;
    box-shadow: 0 8px 18px rgba(16, 164, 138, 0.08) !important;
    font-size: 10px !important;
    line-height: 13px !important;
  }

  .figma265-status img {
    width: 7px !important;
    height: 7px !important;
    animation: figma265PendingDot 2.2s ease-in-out infinite !important;
  }

  .figma265-status i {
    display: none !important;
  }

  .figma265-pending-wave {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    align-items: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
    width: auto !important;
    max-width: 100% !important;
    height: 80px !important;
    margin: 0 auto !important;
    padding: 0 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 30px !important;
    background:
      radial-gradient(ellipse at 38% 50%, rgba(200, 255, 244, 0.38), transparent 68%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(246, 255, 252, 0.52)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(179, 223, 214, 0.18),
      0 18px 36px -30px rgba(20, 118, 105, 0.22) !important;
    backdrop-filter: blur(20px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
  }

  .figma265-pending-wave > i {
    display: none !important;
  }

  .figma265-wave-line {
    position: absolute !important;
    left: 17px !important;
    top: 6px !important;
    width: 176px !important;
    height: 48px !important;
    overflow: visible !important;
    opacity: 0.96 !important;
    transform-origin: center !important;
  }

  .figma265-wave-line.is-active {
    animation: figma265ReadyLineShell 5.4s ease-in-out infinite !important;
  }

  .figma265-ready-waveform .figma265-wave-line {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    z-index: 2 !important;
    width: min(228px, 100%) !important;
    height: 60px !important;
    opacity: 0.9 !important;
    overflow: visible !important;
    transform-origin: center !important;
    animation: figma265ReadyLineShell 5.4s ease-in-out infinite !important;
  }

  .figma265-ready-waveform .figma265-wave-mist {
    position: absolute !important;
    inset: 8px 10px 4px !important;
    z-index: 0 !important;
    border-radius: 999px !important;
    background:
      radial-gradient(ellipse at 44% 52%, rgba(24, 205, 176, 0.13), transparent 58%),
      radial-gradient(ellipse at 74% 40%, rgba(255, 246, 186, 0.12), transparent 62%) !important;
    filter: blur(12px) !important;
    opacity: 0.52;
    animation: figma265WaveMistFloat 6.6s ease-in-out infinite !important;
    pointer-events: none !important;
  }

  .figma265-ready-waveform .figma265-wave-base {
    stroke: rgba(141, 207, 196, 0.17) !important;
    stroke-width: 1.35 !important;
    opacity: 0.9 !important;
  }

  .figma265-ready-waveform .figma265-wave-glow {
    stroke: rgba(17, 200, 169, 0.08) !important;
    stroke-width: 11 !important;
    filter: blur(0.35px) drop-shadow(0 12px 24px rgba(18, 196, 166, 0.11)) !important;
  }

  .figma265-ready-waveform .figma265-wave-soft {
    stroke: rgba(109, 235, 216, 0.17) !important;
    stroke-width: 5.4 !important;
  }

  .figma265-ready-waveform .figma265-wave-main {
    stroke: rgba(18, 188, 164, 0.66) !important;
    stroke-width: 2.7;
    stroke-dasharray: 0.48 0.52;
    stroke-dashoffset: 0.18;
    transform-box: fill-box !important;
    transform-origin: center !important;
    animation: figma265ReadyLineStretch 5.6s cubic-bezier(0.42, 0, 0.18, 1) infinite !important;
  }

  .figma265-ready-waveform .figma265-wave-highlight {
    stroke: rgba(255, 255, 255, 0.64) !important;
    stroke-width: 1.8 !important;
    stroke-dasharray: 0.1 0.9;
    stroke-dashoffset: 0.92;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.34)) !important;
    animation: figma265WaveLightSweep 5.2s ease-in-out infinite !important;
  }

  .figma265-ready-waveform .figma265-wave-line.is-active .figma265-wave-main {
    animation: figma265ReadyLineStretch 5.6s cubic-bezier(0.42, 0, 0.18, 1) infinite !important;
  }

  .figma265-ready-waveform .figma265-wave-spark {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 3 !important;
    display: block !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(245, 255, 252, 0.78) !important;
    box-shadow:
      0 0 0 4px rgba(40, 218, 188, 0.055),
      0 0 12px rgba(35, 211, 184, 0.26) !important;
    pointer-events: none !important;
    opacity: 0;
    animation: figma265WaveSparkGlide 4.9s cubic-bezier(0.36, 0, 0.18, 1) infinite !important;
  }

  .figma265-ready-waveform .spark-a {
    --x0: 20px;
    --y0: 34px;
    --x1: 74px;
    --y1: 26px;
    --x2: 151px;
    --y2: 21px;
    --x3: 214px;
    --y3: 32px;
  }

  .figma265-ready-waveform .spark-b {
    --x0: 48px;
    --y0: 29px;
    --x1: 102px;
    --y1: 41px;
    --x2: 166px;
    --y2: 26px;
    --x3: 226px;
    --y3: 33px;
    animation-delay: 1.18s !important;
  }

  .figma265-ready-waveform .spark-c {
    --x0: 84px;
    --y0: 24px;
    --x1: 126px;
    --y1: 44px;
    --x2: 186px;
    --y2: 39px;
    --x3: 232px;
    --y3: 32px;
    animation-delay: 2.4s !important;
  }

  .figma265-pending-wave small {
    display: none !important;
  }

  .figma265-ready-visual {
    position: relative !important;
    display: grid !important;
    justify-items: center !important;
    gap: 12px !important;
    justify-self: stretch !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 2px auto 0 !important;
  }

  .figma265-ready-visual::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -26px !important;
    z-index: -1 !important;
    width: 236px !important;
    height: 142px !important;
    border-radius: 999px !important;
    background: radial-gradient(ellipse at center, rgba(25, 211, 181, 0.18), transparent 68%) !important;
    filter: blur(12px) !important;
    transform: translateX(-50%) !important;
  }

  .figma265-ready-waveform {
    position: relative !important;
    display: grid !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: min(220px, 100%) !important;
    min-width: 0 !important;
    height: 58px !important;
    overflow: visible !important;
  }

  .figma265-ready-waveform::before,
  .figma265-ready-waveform::after {
    content: none !important;
    display: none !important;
  }

  .figma265-ready-waveform::before {
    left: 0 !important;
    width: 2px !important;
    border-radius: 999px !important;
    background: rgba(20, 199, 165, 0.8) !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.76),
      0 0 18px rgba(20, 199, 165, 0.38),
      0 0 42px rgba(20, 199, 165, 0.16) !important;
    animation: figma265ReadyWaveScan 2.85s ease-in-out infinite !important;
  }

  .figma265-ready-waveform::after {
    left: -62px !important;
    width: 104px !important;
    background: linear-gradient(90deg, transparent, rgba(20, 199, 165, 0.18), transparent) !important;
    filter: blur(8px) !important;
    animation: figma265ReadyWaveGlow 2.85s ease-in-out infinite !important;
  }

  .figma265-ready-waveform i {
    display: none !important;
  }

  .figma265-ready-waveform i:nth-child(-n + 12) {
    background: rgba(24, 168, 143, 0.82) !important;
    box-shadow: 0 5px 10px rgba(24, 168, 143, 0.12) !important;
  }

  .figma265-ready-progress {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: min(218px, 72%) !important;
    height: 16px !important;
    margin: 0 auto !important;
  }

  .figma265-ready-progress::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    top: 7px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(24, 168, 143, 0.45), rgba(255, 199, 62, 0.46), rgba(181, 197, 205, 0.42)) !important;
  }

  .figma265-ready-progress span {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    border: 2px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 50% !important;
    background: #20c7ad !important;
    box-shadow: 0 5px 12px rgba(18, 164, 141, 0.18) !important;
  }

  .figma265-ready-progress span:nth-child(2) {
    width: 16px !important;
    height: 16px !important;
    background: #ffd45a !important;
    box-shadow: 0 6px 14px rgba(221, 160, 28, 0.18) !important;
  }

  .figma265-ready-progress span:nth-child(3) {
    background: #c8d3d8 !important;
    box-shadow: none !important;
  }

  .figma265-check-card,
  .figma265-history-card {
    width: 286px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(244, 255, 252, 0.56)) !important;
  }

  .figma265-check-card {
    min-height: 172px !important;
  }

  .figma265-history-card {
    min-height: 126px !important;
  }

  .figma265-score-processing {
    position: relative !important;
    width: 286px !important;
    height: 262px !important;
    min-height: 262px !important;
    overflow: hidden !important;
  }
}

@keyframes figma265BgDrift {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 10px, 0); }
}

@keyframes figma265AquaWash {
  0%,
  100% { opacity: 0.62; transform: translateX(-50%) translate3d(0, 0, 0) scale(1); }
  50% { opacity: 0.88; transform: translateX(-50%) translate3d(8px, 2px, 0) scale(1.04); }
}

@keyframes figma265PendingDot {
  0%,
  100% { opacity: 0.62; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes figma265ReadyWaveScan {
  0%,
  100% { left: 0; opacity: 0.28; }
  50% { left: calc(100% - 2px); opacity: 0.92; }
}

@keyframes figma265ReadyWaveGlow {
  0%,
  100% { left: -62px; opacity: 0.18; }
  50% { left: calc(100% - 42px); opacity: 0.82; }
}

@keyframes figma265ReadyBarBreath {
  0%,
  100% { opacity: 0.72; transform: scaleY(0.86); }
  50% { opacity: 1; transform: scaleY(1.06); }
}

@keyframes figma265ReadyLineBreath {
  0%,
  100% { opacity: 0.78; stroke-width: 2.6px; transform: scaleY(0.94) translateY(1px); }
  48% { opacity: 1; stroke-width: 3.4px; transform: scaleY(1.08) translateY(-1px); }
  68% { opacity: 0.9; stroke-width: 2.9px; transform: scaleY(0.98) translateY(0); }
}

@keyframes figma265ReadyLineShell {
  0%, 100% { opacity: 0.82; transform: scaleX(0.94); }
  42% { opacity: 0.94; transform: scaleX(1.035); }
  66% { opacity: 0.88; transform: scaleX(0.985); }
}

@keyframes figma265ReadyLineStretch {
  0%, 100% {
    opacity: 0.56;
    stroke-width: 2.35px;
    stroke-dasharray: 0.34 0.66;
    stroke-dashoffset: 0.24;
    transform: scaleY(0.98);
  }
  38% {
    opacity: 0.78;
    stroke-width: 2.85px;
    stroke-dasharray: 0.72 0.28;
    stroke-dashoffset: 0.05;
    transform: scaleY(1.03);
  }
  54% {
    opacity: 0.7;
    stroke-width: 2.55px;
    stroke-dasharray: 0.58 0.42;
    stroke-dashoffset: -0.02;
    transform: scaleY(0.96);
  }
  68% {
    opacity: 0.76;
    stroke-width: 2.8px;
    stroke-dasharray: 0.66 0.34;
    stroke-dashoffset: -0.08;
    transform: scaleY(1.06);
  }
}

@keyframes figma265WaveLightSweep {
  0% { opacity: 0; stroke-dashoffset: 0.95; }
  20% { opacity: 0.42; }
  58% { opacity: 0.28; stroke-dashoffset: 0.16; }
  76% { opacity: 0; stroke-dashoffset: -0.12; }
  100% { opacity: 0; stroke-dashoffset: -0.12; }
}

@keyframes figma265WaveMistFloat {
  0%, 100% { opacity: 0.42; transform: translate3d(-7px, 1px, 0) scaleX(0.97); }
  50% { opacity: 0.62; transform: translate3d(7px, -1px, 0) scaleX(1.03); }
}

@keyframes figma265WaveSparkGlide {
  0% { opacity: 0; transform: translate3d(var(--x0), var(--y0), 0) scale(0.42); }
  12% { opacity: 0.62; transform: translate3d(var(--x0), calc(var(--y0) - 5px), 0) scale(0.82); }
  18% { opacity: 0.5; transform: translate3d(var(--x0), var(--y0), 0) scale(0.68); }
  38% { opacity: 0.7; transform: translate3d(var(--x1), calc(var(--y1) - 6px), 0) scale(0.95); }
  48% { opacity: 0.55; transform: translate3d(var(--x1), var(--y1), 0) scale(0.7); }
  64% { opacity: 0.58; transform: translate3d(var(--x2), calc(var(--y2) - 4px), 0) scale(0.78); }
  82% { opacity: 0; transform: translate3d(var(--x3), var(--y3), 0) scale(0.48); }
  100% { opacity: 0; transform: translate3d(var(--x3), var(--y3), 0) scale(0.48); }
}

@keyframes figma265WaveScan {
  0%,
  100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(0); }
}

@keyframes figma265WaveBreathe {
  0%,
  100% { opacity: 0.86; transform: translateY(1px); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes figma265ScoringScan {
  0%, 100% { opacity: 0.52; transform: translateX(-18px); }
  50% { opacity: 0.9; transform: translateX(28px); }
}

@keyframes figma265ScoringBars {
  0%, 100% { opacity: 0.68; transform: scaleY(0.82); }
  50% { opacity: 1; transform: scaleY(1.06); }
}

@keyframes figma265ScoringDot {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(47,128,237,.34), 0 0 0 0 rgba(47,128,237,.12); }
  50% { box-shadow: inset 0 0 0 1px rgba(47,128,237,.34), 0 0 0 6px rgba(47,128,237,.1); }
}

/* Runtime conflict lock: older practice CSS uses stronger :has()+stage selectors. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265 {
    --practice-detail-panel-top-air: 0px !important;
    margin-top: 94px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-dashboard-layout {
    display: grid !important;
    grid-template-columns: 872px 18px 334px !important;
    grid-template-rows: 96px 18px 960px !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    width: 1224px !important;
    height: 1084px !important;
    min-height: 1084px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: start !important;
    align-content: start !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-hero {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 1224px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-workbench {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 226px 18px 628px !important;
    grid-template-rows: 960px !important;
    gap: 0 !important;
    width: 872px !important;
    min-width: 872px !important;
    max-width: 872px !important;
    height: 960px !important;
    min-height: 960px !important;
    max-height: 960px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: start !important;
    align-content: start !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-browser,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    align-self: start !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-browser {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 226px !important;
    min-width: 226px !important;
    max-width: 226px !important;
    height: 960px !important;
    min-height: 960px !important;
    max-height: 960px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .workbench-resizer {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 960px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 628px !important;
    min-width: 628px !important;
    max-width: 628px !important;
    height: 960px !important;
    min-height: 960px !important;
    max-height: 960px !important;
    padding: 20px !important;
    gap: 16px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel {
    flex: 0 0 236px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .mobile-report-summary {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    flex: 0 0 220px !important;
    margin-top: -13px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .feedback-resizer {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 960px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel {
    grid-column: 3 !important;
    grid-row: 3 !important;
    position: relative !important;
    top: auto !important;
    align-self: start !important;
    width: 334px !important;
    min-width: 334px !important;
    max-width: 334px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-hero {
    position: relative !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-hero::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-copy
    > p:not(.eyebrow) {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.38) !important;
    box-shadow: none !important;
    color: rgba(65, 77, 98, 0.92) !important;
    font-size: 16px !important;
    line-height: 21px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-list {
    position: absolute !important;
    left: 14px !important;
    top: 164px !important;
    width: 198px !important;
    height: 680px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .virtual-question-list-window {
    display: block !important;
    width: 198px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row {
    position: relative !important;
    display: block !important;
    width: 198px !important;
    height: 76px !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-type-mini {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-code {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    width: 66px !important;
    height: 16px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-main {
    display: block !important;
    min-width: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-main
    strong {
    position: absolute !important;
    left: 12px !important;
    top: 33px !important;
    display: -webkit-box !important;
    width: calc(100% - 24px) !important;
    height: 34px !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 17px !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-main
    small {
    position: absolute !important;
    left: auto !important;
    right: 12px !important;
    top: 12px !important;
    display: grid !important;
    width: var(--figma265-status-width, 36px) !important;
    height: 18px !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row.selected
    .question-type-mini,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row.selected
    .question-code,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row.selected
    .question-row-main
    strong {
    color: #0d1320 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row.selected
    .question-type-mini {
    border: 1px solid rgba(18, 196, 166, 0.18) !important;
    color: #067765 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 14px rgba(8, 125, 112, 0.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row.selected
    .question-row-status {
    border: 1px solid rgba(18, 196, 166, 0.16) !important;
    color: #067765 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 6px 12px rgba(8, 125, 112, 0.06) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row.selected
    .question-row-status.is-done {
    border-color: rgba(100, 116, 139, 0.18) !important;
    color: #415064 !important;
    background: rgba(255, 255, 255, 0.92) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator {
    position: relative !important;
    display: block !important;
    width: 588px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step] {
    position: absolute !important;
    top: 9px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step="-1"] {
    left: 14px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step="1"] {
    right: 14px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step="-1"]::before {
    background-image: url("./assets/figma-answer-265/prev-figma.svg") !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step="1"]::before {
    background-image: url("./assets/figma-answer-265/next-figma.svg") !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .current-question-pill {
    position: absolute !important;
    left: 64px !important;
    top: 10px !important;
    display: flex !important;
    align-items: center !important;
    width: 210px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0d1320 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 900 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .figma265-navigator-mode {
    position: absolute !important;
    left: 392px !important;
    top: 10px !important;
    display: grid !important;
    width: 86px !important;
    height: 34px !important;
    place-items: center !important;
    border: 1px solid rgba(16, 185, 159, 0.22) !important;
    border-radius: 17px !important;
    color: #088c79 !important;
    background: rgba(231, 255, 246, 0.62) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question {
    position: relative !important;
    display: block !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-meta {
    position: absolute !important;
    left: 24px !important;
    top: 22px !important;
    display: flex !important;
    gap: 6px !important;
    height: 17px !important;
    min-height: 17px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-meta
    span {
    min-height: 17px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(77, 88, 107, 0.86) !important;
    font-size: 13px !important;
    line-height: 17px !important;
    font-weight: 800 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #activeQuestionType::after {
    content: " ·" !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line {
    display: block !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    .active-question-code {
    position: absolute !important;
    right: 30px !important;
    top: 22px !important;
    min-height: 17px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #008d7a !important;
    font-size: 13px !important;
    line-height: 17px !important;
    font-weight: 900 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    #activeQuestionTitle {
    position: absolute !important;
    left: 24px !important;
    top: 52px !important;
    width: 510px !important;
    max-height: 60px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-mode-inline {
    position: static !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    width: 164px !important;
    height: 32px !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-mode-inline
    small {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText {
    position: absolute !important;
    left: 24px !important;
    top: 102px !important;
    width: 540px !important;
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
    font-size: 18px !important;
    line-height: 30px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265[data-active-question-type="RA"]
    .stage-practice
    .question-card.active-question
    #audioPrompt {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools[hidden] {
    position: absolute !important;
    left: 24px !important;
    top: 290px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    button {
    width: 118px !important;
    height: 38px !important;
    padding: 0 14px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    #backToQuestionListButton {
    width: 108px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel {
    position: relative !important;
    padding-top: 24px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel:not(.reading-report-mode)
    > h2 {
    margin: 10px 0 4px !important;
    font-size: 28px !important;
    line-height: 32px !important;
    font-weight: 900 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-feedback-status {
    position: absolute !important;
    right: 40px !important;
    top: 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 82px !important;
    height: 36px !important;
    justify-content: center !important;
    border-radius: 18px !important;
    color: #008d7a !important;
    background: rgba(231, 255, 246, 0.66) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-feedback-status::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #13b894 !important;
  }
}

/* Final Figma parity pass. Keep after every legacy lock so Figma node 272:2 wins. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active {
    --ans265-ink: #0d1320;
    --ans265-text: #2a313b;
    --ans265-muted: #65707d;
    --ans265-mint: #10a48a;
    --ans265-blue: #1870df;
    --ans265-gold: #ffd21f;
    --ans265-figma-shadow: 0 18px 44px -34px rgba(163, 107, 5, 0.1), inset 0 1px 10px -8px rgba(255, 255, 255, 0.36);
  }

  html body.view-practice.figma-answer-265-active .sidebar {
    width: 1224px !important;
    height: 70px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 28px !important;
    background: rgba(250, 255, 252, 0.62) !important;
    box-shadow: var(--ans265-figma-shadow) !important;
    backdrop-filter: blur(36px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand {
    left: 12px !important;
    top: 10px !important;
    width: 478px !important;
    height: 50px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand::before {
    background-image: url("./assets/figma-answer-265/brand-logo-glass.svg") !important;
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand-copy strong {
    left: 60px !important;
    top: 5px !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker {
    left: 258px !important;
    top: 2px !important;
    width: 220px !important;
    height: 46px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 12px 24px -20px rgba(92, 71, 15, 0.12) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker::after {
    right: 26px !important;
    top: 12px !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("./assets/figma-answer-265/chevron-down-figma.svg") !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker select {
    padding: 0 58px 0 28px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-list {
    left: 525px !important;
    top: 10px !important;
    gap: 15px !important;
    width: 397px !important;
    height: 50px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link.admin-access-only.is-hidden {
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link {
    width: 88px !important;
    height: 50px !important;
    border-color: rgba(255, 255, 255, 0.78) !important;
    border-radius: 25px !important;
    background: rgba(255, 255, 255, 0.44) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 12px 24px -22px rgba(23, 89, 219, 0.14) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link .icon {
    left: 15px !important;
    top: 14px !important;
    width: 20px !important;
    height: 20px !important;
    background-size: 20px 20px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link > span:last-child {
    left: 42px !important;
    top: 15px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link.active > span:last-child {
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card {
    left: auto !important;
    right: 26px !important;
    top: 10px !important;
    width: 222px !important;
    height: 50px !important;
    border-color: rgba(255, 255, 255, 0.82) !important;
    border-radius: 25px !important;
    background: rgba(255, 247, 232, 0.6) !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card img {
    left: 8px !important;
    top: 7px !important;
    width: 36px !important;
    height: 36px !important;
    content: url("./assets/figma-answer-265/account-avatar.svg") !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card span {
    left: 55px !important;
    top: 9px !important;
    width: 98px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card small {
    color: rgba(63, 77, 97, 0.96) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 13px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card b {
    right: 12px !important;
    top: 14px !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("./assets/figma-answer-265/chevron-down-figma.svg") !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-hero {
    border-color: rgba(255, 255, 255, 0.84) !important;
    background: rgba(255, 249, 235, 0.76) !important;
    box-shadow: var(--ans265-figma-shadow) !important;
    backdrop-filter: blur(36px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-copy .eyebrow {
    color: #3f4d61 !important;
    font-weight: 500 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-copy h2 {
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-copy > p:not(.eyebrow) {
    color: #3f4d61 !important;
    font-weight: 500 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-browser {
    border-color: rgba(255, 255, 255, 0.74) !important;
    background: linear-gradient(180deg, rgba(255, 229, 77, 0.66) 0%, rgba(255, 245, 173, 0.45) 38%, rgba(255, 255, 255, 0.5) 74%, rgba(255, 255, 255, 0.64) 100%) !important;
    box-shadow: 0 20px 46px -18px rgba(107, 122, 97, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice .question-list {
    top: 164px !important;
    height: 680px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-row.compact-question-row {
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.46) !important;
    border-color: rgba(255, 255, 255, 0.64) !important;
    box-shadow: 0 8px 18px -14px rgba(15, 122, 107, 0.06) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-row.compact-question-row.selected {
    background: rgba(238, 255, 250, 0.8) !important;
    border-color: rgba(18, 196, 166, 0.44) !important;
    box-shadow: 0 12px 24px -14px rgba(15, 122, 107, 0.16) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .answer-stage,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-discussion {
    border-color: rgba(255, 255, 255, 0.84) !important;
    box-shadow: var(--ans265-figma-shadow) !important;
    backdrop-filter: blur(36px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .answer-stage {
    background: rgba(255, 249, 237, 0.79) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question {
    background: rgba(255, 255, 255, 0.56) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator {
    border-color: rgba(255, 255, 255, 0.72) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.48) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator [data-nav-step] {
    background: rgba(255, 255, 255, 0.54) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 8px 18px -10px rgba(20, 107, 97, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator .current-question-pill {
    color: var(--ans265-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma265-navigator-mode {
    border-color: rgba(189, 235, 223, 0.8) !important;
    color: #0f766e !important;
    background: rgba(236, 253, 245, 0.76) !important;
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #activeQuestionTitle {
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265[data-active-question-type="RA"]
    #questionText {
    border-color: rgba(255, 255, 255, 0.96) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--ans265-text) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-tools button {
    border-color: rgba(255, 255, 255, 0.78) !important;
    border-radius: 19px !important;
    background: rgba(255, 255, 255, 0.56) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #playRaDemoButton { color: #10a48a !important; }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #favoriteQuestionButton { color: #f0b400 !important; }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #backToQuestionListButton { color: #65707d !important; }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel {
    border-color: rgba(255, 255, 255, 0.72) !important;
    background: linear-gradient(0deg, rgba(255, 242, 185, 0.14), rgba(255, 248, 222, 0.08)), rgba(255, 255, 255, 0.62) !important;
    box-shadow: inset 0 1px 14px rgba(255, 255, 255, 0.76), 0 14px 34px rgba(121, 92, 30, 0.06) !important;
    backdrop-filter: blur(18px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton {
    background-image: url("./assets/figma-answer-265/mic-button-figma.svg") !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton::before {
    background-image: url("./assets/figma-answer-265/mic-figma.svg") !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-discussion {
    position: relative !important;
    background: rgba(255, 247, 232, 0.58) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-discussion::before {
    content: "热门讨论" !important;
    position: absolute !important;
    left: 22px !important;
    top: 18px !important;
    color: var(--ans265-ink) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 23px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-tabs {
    position: absolute !important;
    left: 118px !important;
    top: 14px !important;
    display: flex !important;
    gap: 10px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-tabs button {
    width: 82px !important;
    height: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 16px !important;
    color: #65707d !important;
    background: rgba(255, 255, 255, 0.48) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-tabs button.active {
    border-color: rgba(189, 235, 223, 0.8) !important;
    color: #0f766e !important;
    background: rgba(236, 253, 245, 0.8) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-list {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    top: 58px !important;
    bottom: 20px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel {
    border-color: rgba(255, 255, 255, 0.78) !important;
    background: linear-gradient(90deg, rgba(255, 253, 247, 0.82), rgba(243, 240, 232, 0.7)) !important;
    box-shadow: 0 18px 34px rgba(27, 45, 42, 0.1) !important;
    backdrop-filter: blur(24px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 30px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 248, 216, 0.2), rgba(255, 255, 255, 0.02)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel:not(.reading-report-mode)::after {
    content: "" !important;
    position: absolute !important;
    right: 30px !important;
    top: 44px !important;
    width: 46px !important;
    height: 820px !important;
    border-radius: 23px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel > * {
    position: relative !important;
    z-index: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel:not(.reading-report-mode) > h2 {
    margin: 0 0 4px !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel:not(.reading-report-mode) > h2::after {
    color: #6b7585 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 17px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel .figma265-feedback-status {
    right: 40px !important;
    top: 28px !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(245, 255, 249, 0.7)) !important;
    box-shadow: 0 8px 18px rgba(12, 143, 120, 0.1) !important;
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma265-ready-card {
    border-color: rgba(255, 255, 255, 0.86) !important;
    background:
      radial-gradient(220px 190px at 45% 6%, rgba(197, 255, 244, 0.5), transparent 66%),
      radial-gradient(210px 180px at 92% 22%, rgba(255, 244, 184, 0.28), transparent 68%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(246, 255, 252, 0.58)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 24px 52px -38px rgba(29, 58, 55, 0.24) !important;
    backdrop-filter: blur(30px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.12) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma265-check-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(244, 255, 252, 0.58)) !important;
    box-shadow: 0 14px 26px rgba(37, 48, 39, 0.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma265-history-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(244, 255, 252, 0.56)) !important;
    box-shadow: 0 13px 24px rgba(37, 48, 39, 0.07) !important;
  }
}

/* Screenshot QA correction pass. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active .sidebar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    left: 50% !important;
    width: 1224px !important;
    min-width: 1224px !important;
    max-width: 1224px !important;
    transform: translateX(-50%) !important;
  }

  html body.view-practice.figma-answer-265-active
    .answer-page-back-button {
    position: fixed !important;
    left: max(24px, env(safe-area-inset-left, 0px)) !important;
    top: 18px !important;
    z-index: 1204 !important;
    display: inline-grid !important;
    grid-template-columns: 22px auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 124px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 20px 0 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 27px !important;
    color: #0d1320 !important;
    background:
      radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.96), transparent 48%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 248, 224, 0.58)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(255, 219, 89, 0.12),
      0 18px 42px -30px rgba(130, 86, 6, 0.24) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.14) !important;
    backdrop-filter: blur(24px) saturate(1.14) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
  }

  html body.view-practice.figma-answer-265-active
    .answer-page-back-button:hover {
    transform: translateY(-1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(255, 219, 89, 0.14),
      0 22px 46px -30px rgba(130, 86, 6, 0.28) !important;
  }

  html body.view-practice.figma-answer-265-active
    .answer-page-back-icon {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    background: transparent !important;
    transform: none !important;
    opacity: 0.84 !important;
  }

  html body.view-practice.figma-answer-265-active
    .answer-page-back-icon::before {
    content: "" !important;
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    border-left: 3px solid #0f8d7b !important;
    border-bottom: 3px solid #0f8d7b !important;
    border-radius: 2px !important;
    transform: rotate(45deg) !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar .exam-type-picker {
    position: absolute !important;
    left: 258px !important;
    top: 1px !important;
    display: block !important;
    width: 220px !important;
    height: 46px !important;
    min-width: 220px !important;
    min-height: 46px !important;
    max-width: 220px !important;
    max-height: 46px !important;
    box-sizing: border-box !important;
    transform: translateX(-7px) !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar .exam-type-picker::before {
    content: attr(data-figma-value) !important;
    position: absolute !important;
    left: 28px !important;
    top: 11px !important;
    z-index: 1 !important;
    width: 130px !important;
    height: 22px !important;
    color: #0d1320 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar .exam-type-picker::after {
    z-index: 1 !important;
    border: 0 !important;
    background: url("./assets/figma-answer-265/chevron-down-figma.svg") center / 22px 22px no-repeat !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar .exam-type-picker select {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    color: transparent !important;
    background: transparent !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar .sidebar-user-card,
  html body.view-practice.figma-answer-265-active
    .sidebar .sidebar-user-card.is-logged-in {
    position: absolute !important;
    left: 976px !important;
    right: auto !important;
    top: 10px !important;
    width: 222px !important;
    height: 50px !important;
    min-width: 222px !important;
    min-height: 50px !important;
    max-width: 222px !important;
    max-height: 50px !important;
    box-sizing: border-box !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-browser-head,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-browser-head > div,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #questionListTitle {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator [data-nav-step]::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator [data-nav-step="-1"]::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator [data-nav-step="prev"]::before {
    background-image: url("./assets/figma-answer-265/prev-figma.svg") !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator [data-nav-step="1"]::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator [data-nav-step="next"]::before {
    background-image: url("./assets/figma-answer-265/next-figma.svg") !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #questionText:not(.ra-demo-mode),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #questionText:not(.ra-demo-mode) * {
    font-weight: 500 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma265-discussion-compose {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    top: 58px !important;
    display: grid !important;
    grid-template-columns: 1fr 68px !important;
    align-items: center !important;
    height: 46px !important;
    padding-left: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 23px !important;
    color: rgba(100, 112, 132, 0.82) !important;
    background: rgba(255, 255, 255, 0.56) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma265-discussion-compose button {
    justify-self: end !important;
    width: 64px !important;
    height: 34px !important;
    margin-right: 5px !important;
    border: 0 !important;
    border-radius: 17px !important;
    color: #0d1320 !important;
    background: rgba(255, 255, 255, 0.86) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-list {
    top: 118px !important;
  }
}

/* Figma 265 resize restore: default stays 226 / 628 / 334, drag updates live aliases. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265 {
    --ans265-resizer-live: 18px;
    --ans265-total-live: 1224px;
    --ans265-list-live: clamp(226px, var(--ans265-live-list-width, 226px), 360px);
    --ans265-feedback-live: clamp(300px, var(--ans265-live-feedback-width, 334px), 520px);
    --ans265-workbench-live: calc(var(--ans265-total-live) - var(--ans265-resizer-live) - var(--ans265-feedback-live));
    --ans265-answer-live: calc(var(--ans265-workbench-live) - var(--ans265-list-live) - var(--ans265-resizer-live));
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-dashboard-layout {
    grid-template-columns: var(--ans265-workbench-live) var(--ans265-resizer-live) var(--ans265-feedback-live) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-workbench {
    grid-template-columns: var(--ans265-list-live) var(--ans265-resizer-live) minmax(0, var(--ans265-answer-live)) !important;
    width: var(--ans265-workbench-live) !important;
    min-width: var(--ans265-workbench-live) !important;
    max-width: var(--ans265-workbench-live) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-browser {
    width: var(--ans265-list-live) !important;
    min-width: var(--ans265-list-live) !important;
    max-width: var(--ans265-list-live) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    width: var(--ans265-answer-live) !important;
    min-width: 0 !important;
    max-width: var(--ans265-answer-live) !important;
    box-sizing: border-box !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel {
    width: var(--ans265-feedback-live) !important;
    min-width: var(--ans265-feedback-live) !important;
    max-width: var(--ans265-feedback-live) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .workbench-resizer,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .feedback-resizer {
    width: var(--ans265-resizer-live) !important;
    min-width: var(--ans265-resizer-live) !important;
    pointer-events: auto !important;
    cursor: col-resize !important;
    touch-action: none !important;
    z-index: 30 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-finder {
    width: var(--ans265-question-finder-width, calc(100% - 32px)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-list,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .virtual-question-list-window,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row {
    width: calc(100% - 20px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .virtual-question-list-window
    .question-row.compact-question-row {
    width: 100% !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .virtual-question-list-window {
    width: 100% !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-main
    strong {
    width: calc(100% - 24px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row::after {
    left: auto !important;
    right: 14px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    #activeQuestionTitle,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText {
    width: calc(100% - 48px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .wave {
    width: 100% !important;
    max-width: 472px !important;
    background-size: 100% 54px !important;
  }
}

/* Comprehensive QA repair: lock the answer-page screen back to Figma node 272:2 while allowing dynamic RA titles. */
@media (min-width: 981px) {
  html,
  html body.view-practice.figma-answer-265-active {
    background-color: #fff1b4 !important;
    background-image:
      radial-gradient(520px 420px at calc(50% - 500px) 120px, rgba(255, 222, 76, 0.48), transparent 72%),
      radial-gradient(620px 520px at calc(50% + 540px) 620px, rgba(255, 249, 219, 0.42), transparent 72%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 230px, #fff0aa 520px, #fff7c9 920px, #fff1b4 100%) !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-size: 100% max(1400px, 100dvh) !important;
  }

  html body.view-practice.figma-answer-265-active .app-shell,
  html body.view-practice.figma-answer-265-active .main {
    min-height: 1196px !important;
    background: transparent !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265 {
    margin-top: 94px !important;
    margin-bottom: 48px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-dashboard-layout {
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    position: relative !important;
    display: block !important;
    width: var(--ans265-answer-live) !important;
    min-width: 0 !important;
    max-width: var(--ans265-answer-live) !important;
    height: 960px !important;
    min-height: 960px !important;
    max-height: 960px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 28px !important;
    background: rgba(255, 249, 237, 0.79) !important;
    box-shadow: var(--ans265-figma-shadow) !important;
    backdrop-filter: blur(36px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    top: 20px !important;
    width: auto !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    top: 90px !important;
    display: block !important;
    width: auto !important;
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow: var(--ans265-figma-shadow) !important;
    backdrop-filter: blur(36px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-meta {
    position: absolute !important;
    left: 24px !important;
    top: 22px !important;
    width: 270px !important;
    height: 18px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    #activeQuestionTitle {
    position: absolute !important;
    left: 24px !important;
    top: 52px !important;
    display: -webkit-box !important;
    width: calc(100% - 72px) !important;
    max-height: 68px !important;
    overflow: hidden !important;
    color: var(--ans265-ink) !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText {
    position: absolute !important;
    left: 24px !important;
    top: 130px !important;
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    margin: 0 !important;
    padding: 18px 58px 18px 22px !important;
    overflow: hidden auto !important;
    border: 1px solid rgba(255, 255, 255, 0.96) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--ans265-text) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools {
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    top: 290px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    top: 456px !important;
    display: grid !important;
    grid-template-rows: var(--ans265-recorder-grid-rows) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: var(--ans265-recorder-gap) !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: var(--ans265-recorder-height) !important;
    min-height: var(--ans265-recorder-height) !important;
    max-height: var(--ans265-recorder-height) !important;
    margin: 0 !important;
    padding: var(--ans265-recorder-padding) !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background: linear-gradient(0deg, rgba(255, 242, 185, 0.14), rgba(255, 248, 222, 0.08)), rgba(255, 255, 255, 0.62) !important;
    box-shadow: inset 0 1px 14px rgba(255, 255, 255, 0.76), 0 14px 34px rgba(121, 92, 30, 0.06) !important;
    backdrop-filter: blur(18px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .wave {
    width: min(472px, 100%) !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url("./assets/figma-answer-265/voice-rail-figma.svg") center / 100% 54px no-repeat !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .recorder-actions {
    position: relative !important;
    display: block !important;
    width: 420px !important;
    height: 92px !important;
    min-height: 92px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    width: var(--ans265-record-button-size) !important;
    height: var(--ans265-record-button-size) !important;
    min-width: var(--ans265-record-button-size) !important;
    min-height: var(--ans265-record-button-size) !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    color: transparent !important;
    transform: translateX(-50%) !important;
    background: url("./assets/figma-answer-265/mic-button-figma.svg") center var(--ans265-record-button-art-y) / var(--ans265-record-button-art-size) var(--ans265-record-button-art-size) no-repeat transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton::before {
    content: "" !important;
    position: absolute !important;
    left: calc((var(--ans265-record-button-size) - 28px) / 2) !important;
    top: calc((var(--ans265-record-button-size) - 28px) / 2) !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    background: url("./assets/figma-answer-265/mic-figma.svg") center / 28px 28px no-repeat !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton::after {
    top: calc(var(--ans265-record-button-size) + 4px) !important;
    color: #008d7a !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    top: 696px !important;
    display: block !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 28px !important;
    background: rgba(255, 247, 232, 0.58) !important;
    box-shadow: var(--ans265-figma-shadow) !important;
    backdrop-filter: blur(36px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-list {
    top: 118px !important;
    bottom: 20px !important;
    overflow: hidden auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--ans265-question-row-height, 76px) !important;
    min-height: var(--ans265-question-row-height, 76px) !important;
    max-height: var(--ans265-question-row-height, 76px) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-type-mini {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-main
    strong {
    left: 12px !important;
    top: 33px !important;
    width: calc(100% - 24px) !important;
    height: 34px !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 17px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-status {
    position: absolute !important;
    left: auto !important;
    right: 12px !important;
    top: 12px !important;
    display: grid !important;
    width: var(--figma265-status-width, 36px) !important;
    height: 18px !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }
}

/* Final visual QA lock for Figma node 272:2. This block resolves cross-page style bleed found in browser screenshots. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active {
    position: relative !important;
    min-height: 1196px !important;
    background:
      radial-gradient(520px 420px at calc(50% - 500px) 120px, rgba(255, 222, 76, 0.48), transparent 72%),
      radial-gradient(620px 520px at calc(50% + 540px) 620px, rgba(255, 249, 219, 0.42), transparent 72%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 230px, #fff0aa 520px, #fff7c9 920px, #fff1b4 100%) !important;
    background-size: 100% max(1400px, 100dvh) !important;
  }

  html body.view-practice.figma-answer-265-active::before {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
    background: none !important;
    animation: none !important;
    filter: none !important;
  }

  html body.view-practice.figma-answer-265-active .app-shell,
  html body.view-practice.figma-answer-265-active .main,
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 {
    background: transparent !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-type-mini {
    box-sizing: border-box !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    line-height: 16px !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-code {
    width: 54px !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-main
    strong {
    left: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    font-size: 13px !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recordButton {
    isolation: isolate !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recordButton::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: var(--ans265-record-button-art-y) !important;
    z-index: 0 !important;
    display: block !important;
    width: var(--ans265-record-button-art-size) !important;
    height: var(--ans265-record-button-art-size) !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
    background: url("./assets/figma-answer-265/mic-button-figma.svg") center / var(--ans265-record-button-art-size) var(--ans265-record-button-art-size) no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recordButton::before {
    content: "" !important;
    position: absolute !important;
    left: calc((var(--ans265-record-button-size) - 28px) / 2) !important;
    top: calc((var(--ans265-record-button-size) - 28px) / 2) !important;
    z-index: 1 !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    transform: none !important;
    background: url("./assets/figma-answer-265/mic-figma.svg") center / 28px 28px no-repeat !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    top: 696px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
  }
}

/* Long RA text repair: let the prompt card grow with content and remove the inline speaker ornament. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-workbench {
    height: auto !important;
    min-height: 960px !important;
    max-height: none !important;
    grid-template-rows: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 960px !important;
    max-height: none !important;
    padding: 20px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator {
    flex: 0 0 54px !important;
    min-height: 54px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 246px !important;
    max-height: none !important;
    padding: 22px 24px 20px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-meta {
    position: static !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    min-height: 18px !important;
    gap: 8px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-height: 30px !important;
    align-items: flex-start !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    .active-question-code {
    position: static !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    #activeQuestionTitle {
    position: static !important;
    order: 1 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: initial !important;
    -webkit-box-orient: initial !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .ra-mode-inline {
    position: static !important;
    align-self: flex-end !important;
    margin: -48px 0 2px !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 118px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 18px 22px !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* v28 text-node guard: the RA token wrapper must never crop long prompts. */
@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-text-line,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .dict-word {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-text-line {
    display: block !important;
    width: 100% !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player.is-hidden {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player:not(.is-hidden) {
    position: static !important;
    inset: auto !important;
    z-index: 2 !important;
    display: block !important;
    flex: 0 0 46px !important;
    order: 0 !important;
    width: min(560px, 100%) !important;
    max-width: 560px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow: inset 0 0 0 1px rgba(218, 229, 227, 0.72), 0 12px 26px -22px rgba(28, 103, 92, 0.42) !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player
    .ra-demo-player-head {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player
    .ra-demo-player-controls {
    position: static !important;
    display: grid !important;
    grid-template-columns: 46px auto minmax(160px, 1fr) !important;
    grid-template-areas: "button time rail" !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 14px 0 5px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player
    #raDemoToggleButton {
    position: relative !important;
    inset: auto !important;
    grid-area: button !important;
    display: grid !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #21c9ba !important;
    box-shadow: 0 9px 18px -12px rgba(9, 139, 126, 0.7) !important;
    color: transparent !important;
    font-size: 0 !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player
    .ra-demo-time-readout {
    position: static !important;
    grid-area: time !important;
    display: inline-flex !important;
    min-width: 78px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #718079 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player
    .ra-demo-time-readout
    time,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player
    .ra-demo-time-readout
    i {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
    font-style: normal !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player
    #raDemoProgress {
    position: relative !important;
    inset: auto !important;
    grid-area: rail !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .ra-demo-player
    #raDemoProgress::-webkit-slider-runnable-track {
    height: 5px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #21c9ba 0 var(--demo-progress, 0%), #dbe7e4 var(--demo-progress, 0%) 100%) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-demo-text {
    display: block !important;
    width: 100% !important;
  }
}

/* Recording state and discussion feed polish: use the Figma wave asset while recording, and let discussion grow with lazy 5-item batches. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    background:
      url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 176px 48px no-repeat,
      url("./assets/figma-answer-265/voice-rail-figma.svg") center / 100% 54px no-repeat !important;
    filter: drop-shadow(0 12px 24px rgba(16, 191, 163, 0.1)) !important;
    animation: figma265RecordingWaveFloat 1.65s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton {
    transform: translateY(-1px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before {
    left: 8px !important;
    top: 24px !important;
    width: 56px !important;
    height: 24px !important;
    background: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 56px 20px no-repeat !important;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 8px 16px rgba(8, 151, 128, 0.22)) !important;
    animation: figma265RecordButtonWave 1.18s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::after {
    animation: figma265RecordButtonGlow 1.45s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #submitButton:not(:disabled) {
    left: 270px !important;
    top: 8px !important;
    display: inline-flex !important;
    min-width: 146px !important;
    height: 56px !important;
    min-height: 56px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 28px !important;
    border: 1px solid rgba(154, 235, 220, 0.66) !important;
    border-radius: 28px !important;
    color: #087d70 !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.88), transparent 54%),
      linear-gradient(180deg, rgba(246, 255, 252, 0.86), rgba(225, 255, 247, 0.62)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(108, 214, 194, 0.18),
      0 18px 36px -28px rgba(7, 125, 112, 0.52),
      0 0 0 6px rgba(17, 199, 167, 0.035) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #submitButton:not(:disabled):hover {
    transform: translateY(-2px) !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.94), transparent 54%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(220, 255, 246, 0.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 22px 42px -30px rgba(7, 125, 112, 0.62),
      0 0 0 7px rgba(17, 199, 167, 0.055) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: max-content !important;
    min-height: 760px !important;
    max-height: none !important;
    padding: 24px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion::before {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    color: var(--ans265-ink) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 28px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-tabs {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: -44px 0 8px 118px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .figma265-discussion-compose {
    order: 3 !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-list {
    position: static !important;
    order: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    height: max-content !important;
    min-height: max-content !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-load-sentinel {
    display: grid !important;
    min-height: 56px !important;
    place-items: center !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-load-sentinel::after {
    content: "继续下滑，自动加载下 5 条讨论" !important;
    display: inline-flex !important;
    min-height: 36px !important;
    align-items: center !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 999px !important;
    color: rgba(35, 50, 58, 0.62) !important;
    background: rgba(255, 255, 255, 0.44) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }
}

/* v14: correct recording affordance. The rail stays empty; only the mic button turns into the live wave. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    background: url("./assets/figma-answer-265/voice-rail-figma.svg") center / 472px 54px no-repeat !important;
    filter: none !important;
    animation: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::after {
    display: none !important;
    content: "" !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 62px !important;
    height: 28px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), #ffffff 48%, rgba(226, 255, 249, 0.94)) !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 62px 28px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 62px 28px no-repeat !important;
    opacity: var(--speech-wave-opacity, 0.72) !important;
    transform:
      translate(-50%, -50%)
      scaleX(var(--speech-wave-scale-x, 0.86))
      scaleY(var(--speech-wave-scale-y, 0.62)) !important;
    transform-origin: center !important;
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 12) * 0.7px) rgba(255, 255, 255, 0.5))
      drop-shadow(0 9px 16px rgba(5, 126, 112, 0.18)) !important;
    animation: none !important;
    transition: opacity 70ms linear, transform 58ms linear, filter 70ms linear !important;
  }
}

@keyframes figma265RecordingWaveFloat {
  0%, 100% { transform: translateY(1px); opacity: 0.86; }
  50% { transform: translateY(-3px); opacity: 1; }
}

@keyframes figma265RecordButtonWave {
  0%, 100% { transform: translateY(1px); opacity: 0.76; }
  50% { transform: translateY(-3px); opacity: 1; }
}

@keyframes figma265RecordButtonGlow {
  0%, 100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 12px 20px rgba(17, 199, 167, 0.14)); }
  50% { transform: translateX(-50%) scale(1.045); filter: drop-shadow(0 18px 28px rgba(17, 199, 167, 0.22)); }
}

/* Final recording interaction: while recording, the mic glyph is replaced by a wave-line animation. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave
    span {
    opacity: 0 !important;
    transform: scale(0.01) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton {
    background:
      radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.36), transparent 34%),
      linear-gradient(145deg, #18d0b3 0%, #0bb89f 62%, #079884 100%) !important;
    box-shadow:
      0 20px 38px -20px rgba(7, 151, 132, 0.72),
      0 0 0 10px rgba(17, 199, 167, 0.11),
      0 0 0 24px rgba(17, 199, 167, 0.045) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before {
    width: 56px !important;
    height: 24px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.82), #ffffff 48%, rgba(224, 255, 249, 0.92)) !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 56px 24px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 56px 24px no-repeat !important;
    filter: drop-shadow(0 8px 18px rgba(255, 255, 255, 0.46)) !important;
    animation: figma265RecordButtonWave 1.18s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::after {
    content: "录音中" !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel:not(.recording)
    #submitButton:not(:disabled) {
    min-width: 152px !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.92), transparent 56%),
      linear-gradient(180deg, rgba(250, 255, 253, 0.9), rgba(225, 255, 247, 0.68)) !important;
  }
}

/* v13: live recording wave. Idle/ready states keep an empty rail; recording state follows mic volume. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .wave {
    position: relative !important;
    overflow: visible !important;
    background: url("./assets/figma-answer-265/voice-rail-figma.svg") center / 472px 54px no-repeat !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .wave::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 176px !important;
    height: 48px !important;
    background: linear-gradient(90deg, rgba(16, 191, 163, 0.72), #10bfa3 46%, rgba(18, 205, 177, 0.86)) !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 176px 48px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 176px 48px no-repeat !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) scaleX(0.76) scaleY(0.36) !important;
    transform-origin: center !important;
    transition: opacity 90ms linear, transform 74ms linear, filter 90ms linear !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    animation: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before {
    opacity: var(--speech-wave-opacity, 0.62) !important;
    transform:
      translate(-50%, -50%)
      scaleX(var(--speech-wave-scale-x, 0.78))
      scaleY(var(--speech-wave-scale-y, 0.42)) !important;
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 12) * 1px) rgba(16, 191, 163, 0.24))
      drop-shadow(0 10px 22px rgba(16, 191, 163, 0.16)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton {
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 54px !important;
    height: 24px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), #ffffff 48%, rgba(224, 255, 249, 0.92)) !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 54px 24px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 54px 24px no-repeat !important;
    opacity: var(--speech-wave-opacity, 0.7) !important;
    transform:
      translate(-50%, -50%)
      scaleX(var(--speech-wave-scale-x, 0.78))
      scaleY(var(--speech-wave-scale-y, 0.42)) !important;
    filter: drop-shadow(0 7px 14px rgba(255, 255, 255, 0.42)) !important;
    animation: none !important;
    transition: opacity 80ms linear, transform 66ms linear !important;
  }
}

/* v14 final override: recording rail must stay empty; only the mic button contains the live wave. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    background: url("./assets/figma-answer-265/voice-rail-figma.svg") center / 472px 54px no-repeat !important;
    filter: none !important;
    animation: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::after {
    display: none !important;
    content: "" !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 62px !important;
    height: 28px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), #ffffff 48%, rgba(226, 255, 249, 0.94)) !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 62px 28px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 62px 28px no-repeat !important;
    opacity: var(--speech-wave-opacity, 0.72) !important;
    transform:
      translate(-50%, -50%)
      scaleX(var(--speech-wave-scale-x, 0.86))
      scaleY(var(--speech-wave-scale-y, 0.62)) !important;
    transform-origin: center !important;
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 12) * 0.7px) rgba(255, 255, 255, 0.5))
      drop-shadow(0 9px 16px rgba(5, 126, 112, 0.18)) !important;
    animation: none !important;
    transition: opacity 70ms linear, transform 58ms linear, filter 70ms linear !important;
  }
}

/* v19 whole-page scroll: the center column extends the document instead of becoming an inner scroll frame. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265 {
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-dashboard-layout {
    grid-template-rows: 96px 18px auto !important;
    height: auto !important;
    min-height: 1084px !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: start !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-workbench {
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: 960px !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: start !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 960px !important;
    max-height: none !important;
    padding: 20px !important;
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
    scrollbar-gutter: auto !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage > * {
    flex: 0 0 auto !important;
  }
}

/* v22 final desktop action polish: this must remain at EOF so the white strip cannot win. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .figma-mobile-passed-button {
    position: static !important;
    display: inline-flex !important;
    align-self: center !important;
    width: auto !important;
    min-width: 166px !important;
    height: 40px !important;
    margin: 2px auto 0 !important;
    padding: 0 18px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 999px !important;
    color: rgba(8, 125, 112, 0.9) !important;
    background:
      radial-gradient(circle at 24% 10%, rgba(255, 255, 255, 0.92), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(232, 255, 249, 0.42)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 16px 34px -28px rgba(13, 150, 132, 0.44),
      0 0 0 1px rgba(30, 214, 186, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    font-size: 14px !important;
    font-weight: 860 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .figma-mobile-passed-button::before {
    content: "" !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(10, 168, 146, 0.92) 0 34%, transparent 36%),
      rgba(224, 255, 248, 0.9) !important;
    box-shadow: 0 0 0 5px rgba(18, 200, 172, 0.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools[hidden] {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    button {
    width: auto !important;
    min-width: 126px !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 14px 30px -28px rgba(30, 54, 66, 0.26) !important;
    backdrop-filter: blur(14px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.04) !important;
    font-size: 14px !important;
    font-weight: 840 !important;
  }
}

/* v23 final row-fit: keep the desktop question tools on one transparent row. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools[hidden] {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    button {
    min-width: 112px !important;
    height: 38px !important;
    padding: 0 12px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    #backToQuestionListButton {
    min-width: 104px !important;
  }

}

/* v24 Figma recheck: desktop/narrow-web answer shell cleanup. */
@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active {
    overflow-x: hidden !important;
    background:
      radial-gradient(520px 420px at calc(50% - 500px) 120px, rgba(255, 222, 76, 0.48), transparent 72%),
      radial-gradient(620px 520px at calc(50% + 540px) 620px, rgba(255, 249, 219, 0.42), transparent 72%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 230px, #fff0aa 520px, #fff7c9 920px, #fff1b4 100%) !important;
    background-attachment: scroll !important;
  }

  html body.view-practice.figma-answer-265-active .app-shell,
  html body.view-practice.figma-answer-265-active .app-shell > .main,
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
    background: transparent !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-top-title,
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-top-subtitle,
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-bookmark-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .practice-navigator {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto auto minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 8px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 252, 241, 0.42)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 16px 34px -28px rgba(94, 86, 58, 0.18) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .practice-navigator .mobile-question-list-back {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .practice-navigator [data-nav-step] {
    position: static !important;
    display: grid !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 999px !important;
    color: transparent !important;
    background: rgba(255, 255, 255, 0.64) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .practice-navigator .current-question-pill {
    justify-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #17212f !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .practice-navigator .figma265-navigator-mode {
    justify-self: end !important;
    width: auto !important;
    min-width: 80px !important;
    height: 32px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(137, 232, 213, 0.76) !important;
    border-radius: 16px !important;
    color: #087d70 !important;
    background:
      linear-gradient(180deg, rgba(246, 255, 252, 0.92), rgba(226, 255, 247, 0.72)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
    font-size: 13px !important;
    font-weight: 860 !important;
    line-height: 18px !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .answer-stage {
    background:
      radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.55), transparent 48%),
      linear-gradient(180deg, rgba(255, 251, 238, 0.72), rgba(255, 247, 226, 0.52)) !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .practice-discussion {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 22px 24px 24px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.62), transparent 46%),
      linear-gradient(180deg, rgba(255, 252, 244, 0.72), rgba(255, 247, 226, 0.58)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 22px 44px -34px rgba(93, 82, 48, 0.22) !important;
    backdrop-filter: blur(18px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.04) !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .practice-discussion::before {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    color: #101820 !important;
    font-size: 22px !important;
    font-weight: 940 !important;
    line-height: 30px !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .discussion-tabs {
    position: static !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: auto !important;
    margin: -43px 0 12px 138px !important;
    padding: 0 !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .discussion-tabs button {
    min-width: 92px !important;
    height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.52) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 840 !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .discussion-tabs button.active {
    border-color: rgba(137, 232, 213, 0.72) !important;
    color: #087d70 !important;
    background: rgba(232, 255, 247, 0.66) !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .figma265-discussion-compose {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    align-items: center !important;
    gap: 12px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 8px 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .figma265-discussion-compose span {
    color: #7c8996 !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .figma265-discussion-compose button {
    width: 66px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 17px !important;
    color: #101820 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .discussion-list {
    position: static !important;
    order: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* v26 EOF Figma lock: final desktop answer-page cleanup after all legacy overrides. */
@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active {
    overflow-x: hidden !important;
    background:
      radial-gradient(520px 420px at calc(50% - 500px) 120px, rgba(255, 222, 76, 0.48), transparent 72%),
      radial-gradient(620px 520px at calc(50% + 540px) 620px, rgba(255, 249, 219, 0.42), transparent 72%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 230px, #fff0aa 520px, #fff7c9 920px, #fff1b4 100%) !important;
    background-attachment: scroll !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-top-title,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-top-subtitle,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-bookmark-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto auto minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 8px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 12px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .current-question-pill {
    justify-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #17212f !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 22px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title tabs"
      "compose compose"
      "list list"
      "sentinel sentinel" !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 22px 24px 24px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion::before {
    grid-area: title !important;
    position: static !important;
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 940 !important;
    line-height: 36px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-tabs {
    grid-area: tabs !important;
    position: static !important;
    justify-self: end !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .figma265-discussion-compose {
    grid-area: compose !important;
    position: static !important;
    order: 0 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-list {
    grid-area: list !important;
    position: static !important;
    order: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-load-sentinel {
    grid-area: sentinel !important;
  }
}

/* Consolidated from answer-page-figma-265-sidebar-v15.css during frontend cleanup 2026-07-08. */
/* v15 sidebar polish: center pending cards and add a light ready-state animation. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .feedback-list {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-feedback-pending {
    box-sizing: border-box !important;
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-feedback-pending
    .figma265-side-card {
    box-sizing: border-box !important;
    width: min(calc(100% - 24px), 476px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card {
    position: relative !important;
    overflow: hidden !important;
    animation: figma265ReadyCardBreathV15 4.8s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 22% 18%, rgba(18, 205, 177, 0.11), transparent 38%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 64%) !important;
    opacity: 0.34 !important;
    transform: none !important;
    animation: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card
    > :not(.figma265-ready-wash):not(.figma265-ready-sheen) {
    position: relative !important;
    z-index: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card
    .figma265-wave-line {
    transform-origin: center !important;
    animation: figma265ReadyLineShell 5.4s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel
    .figma265-ready-card
    .figma265-flow-dots {
    transform-origin: center !important;
    animation: figma265FlowDotsPulseV15 2.8s ease-in-out infinite !important;
  }
}

@keyframes figma265ReadyCardBreathV15 {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 24px 52px -38px rgba(29, 58, 55, 0.24),
      0 0 0 rgba(18, 205, 177, 0);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      0 28px 58px -38px rgba(29, 58, 55, 0.28),
      0 0 34px rgba(18, 205, 177, 0.12);
  }
}

@keyframes figma265ReadySheenV15 {
  0%, 18% {
    transform: translateX(-42%);
    opacity: 0.12;
  }
  46% {
    transform: translateX(0);
    opacity: 0.52;
  }
  74%, 100% {
    transform: translateX(38%);
    opacity: 0.12;
  }
}

@keyframes figma265ReadyWaveDriftV15 {
  0%, 100% {
    transform: translateY(1px);
    opacity: 0.9;
    filter:
      drop-shadow(0 0 7px rgba(18, 196, 166, 0.18))
      drop-shadow(0 4px 10px rgba(4, 127, 113, 0.08));
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
    filter:
      drop-shadow(0 0 12px rgba(18, 196, 166, 0.28))
      drop-shadow(0 8px 14px rgba(4, 127, 113, 0.12));
  }
}

@keyframes figma265FlowDotsPulseV15 {
  0%, 100% {
    filter: saturate(1) drop-shadow(0 0 0 rgba(18, 205, 177, 0));
    opacity: 0.82;
  }
  50% {
    filter: saturate(1.12) drop-shadow(0 8px 18px rgba(18, 205, 177, 0.16));
    opacity: 1;
  }
}

/* Consolidated from answer-page-figma-265-recorder-v16.css during frontend cleanup 2026-07-08. */
/* v16 recorder state lock: mic button, live wave line, and submit layout are mutually exclusive. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel {
    --ans265-recorder-action-width: min(420px, 100%);
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .wave {
    position: relative !important;
    display: grid !important;
    width: min(472px, 100%) !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    box-sizing: border-box !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url("./assets/figma-answer-265/voice-rail-figma.svg") center / 100% 54px no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .wave
    span {
    opacity: 0 !important;
    transform: scale(0.01) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .wave::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    box-sizing: border-box !important;
    left: 50% !important;
    top: 50% !important;
    width: min(246px, 72%) !important;
    height: 58px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background:
      linear-gradient(90deg, rgba(17, 194, 166, 0.62), rgba(11, 190, 164, 0.98) 48%, rgba(17, 194, 166, 0.62)) !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 100% 58px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 100% 58px no-repeat !important;
    transform:
      translate(-50%, -50%)
      scaleX(var(--speech-wave-scale-x, 0.82))
      scaleY(var(--speech-wave-scale-y, 0.46)) !important;
    transform-origin: center !important;
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 10) * 0.6px) rgba(17, 194, 166, 0.18))
      drop-shadow(0 12px 24px rgba(7, 151, 132, 0.13)) !important;
    transition: opacity 70ms linear, transform 58ms linear, filter 70ms linear !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording {
    grid-template-rows: 32px 94px 0 !important;
    gap: 12px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    padding: 0 !important;
    border-radius: 47px !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(23, 205, 177, 0.1), transparent 42%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.66)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 20px 48px -42px rgba(31, 53, 45, 0.28) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before {
    content: "" !important;
    display: block !important;
    opacity: var(--speech-wave-opacity, 0.72) !important;
    animation: figma265LiveWaveGlowV16 1.4s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .recorder-actions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 52px var(--ans265-record-button-size) 156px 52px !important;
    width: var(--ans265-recorder-action-width) !important;
    height: 92px !important;
    min-height: 92px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 18px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .recorder-actions
    button {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #prevQuestionButton {
    grid-column: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recordButton {
    grid-column: 2 !important;
    display: grid !important;
    width: var(--ans265-record-button-size) !important;
    height: var(--ans265-record-button-size) !important;
    min-width: var(--ans265-record-button-size) !important;
    min-height: var(--ans265-record-button-size) !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    overflow: visible !important;
    color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recordButton::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: var(--ans265-record-button-art-y) !important;
    z-index: 0 !important;
    display: block !important;
    width: var(--ans265-record-button-art-size) !important;
    height: var(--ans265-record-button-art-size) !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
    background: url("./assets/figma-answer-265/mic-button-figma.svg") center / var(--ans265-record-button-art-size) var(--ans265-record-button-art-size) no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recordButton::before {
    content: "" !important;
    position: absolute !important;
    left: calc((var(--ans265-record-button-size) - 28px) / 2) !important;
    top: calc((var(--ans265-record-button-size) - 28px) / 2) !important;
    z-index: 1 !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    transform: none !important;
    background: url("./assets/figma-answer-265/mic-figma.svg") center / 28px 28px no-repeat !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #submitButton {
    grid-column: 3 !important;
    display: inline-flex !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 156px !important;
    min-width: 156px !important;
    max-width: 156px !important;
    height: 54px !important;
    min-height: 54px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(154, 235, 220, 0.66) !important;
    border-radius: 28px !important;
    color: #087d70 !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.9), transparent 54%),
      linear-gradient(180deg, rgba(246, 255, 252, 0.86), rgba(225, 255, 247, 0.62)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(108, 214, 194, 0.18),
      0 18px 36px -28px rgba(7, 125, 112, 0.52),
      0 0 0 6px rgba(17, 199, 167, 0.035) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel:not(.recording)
    #submitButton:not(:disabled) {
    grid-column: 3 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    width: 156px !important;
    min-width: 156px !important;
    max-width: 156px !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #submitButton::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #submitButton::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #nextQuestionButton {
    grid-column: 4 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="idle"]
    .recorder-actions,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="prompt"]
    .recorder-actions {
    grid-template-columns: 52px 72px 52px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="idle"]
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="prompt"]
    #submitButton {
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="idle"]
    #nextQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="prompt"]
    #nextQuestionButton {
    grid-column: 3 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .recorder-actions {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton {
    position: absolute !important;
    left: 50% !important;
    top: 50px !important;
    z-index: 6 !important;
    display: block !important;
    width: min(472px, calc(100% - 114px)) !important;
    height: 110px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    color: transparent !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #submitButton:not(:disabled) {
    position: absolute !important;
    left: 50% !important;
    top: 50px !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #prevQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #nextQuestionButton {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* v26 absolute final: the live SVG curve wins over every older recorder wave rule. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(209, 255, 245, 0.14), transparent 46%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(255, 255, 255, 0.32),
      0 18px 42px -38px rgba(31, 53, 45, 0.16) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 6 !important;
    display: none !important;
    width: min(354px, 78%) !important;
    height: 88px !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .figma265-live-wave {
    display: block !important;
    opacity: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave
    path {
    fill: none !important;
    vector-effect: non-scaling-stroke !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-baseline {
    stroke: rgba(63, 199, 178, 0.16) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-glow {
    stroke: rgba(17, 194, 166, 0.14) !important;
    stroke-width: calc(8px + var(--speech-level, 0) * 6px) !important;
    stroke-linecap: round !important;
    filter: blur(1px) drop-shadow(0 8px 16px rgba(11, 159, 141, 0.08)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-core {
    stroke: #13bfa7 !important;
    stroke-width: calc(3.4px + var(--speech-level, 0) * 1.1px) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 8) * 0.26px) rgba(19, 191, 167, 0.18))
      drop-shadow(0 5px 10px rgba(4, 127, 113, 0.08)) !important;
  }
}

/* v25 final recorder motion lock: SVG is the only visible recording waveform. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 4 !important;
    display: none !important;
    width: min(354px, 78%) !important;
    height: 88px !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .figma265-live-wave {
    display: block !important;
    opacity: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 0 !important;
    filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave
    path {
    fill: none !important;
    vector-effect: non-scaling-stroke !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-baseline {
    stroke: rgba(63, 199, 178, 0.18) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-glow {
    stroke: rgba(17, 194, 166, 0.16) !important;
    stroke-width: calc(8px + var(--speech-level, 0) * 7px) !important;
    stroke-linecap: round !important;
    filter: blur(1px) drop-shadow(0 8px 16px rgba(11, 159, 141, 0.09)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-core {
    stroke: #13bfa7 !important;
    stroke-width: calc(3.6px + var(--speech-level, 0) * 1.2px) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 8) * 0.3px) rgba(19, 191, 167, 0.2))
      drop-shadow(0 5px 10px rgba(4, 127, 113, 0.1)) !important;
  }
}

/* v24 HyperFrames-style recorder motion: thin live SVG wave, no stretched bitmap mask. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 2 !important;
    display: none !important;
    width: min(354px, 78%) !important;
    height: 88px !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    background:
      radial-gradient(circle at 50% 44%, rgba(20, 194, 168, 0.055), transparent 42%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 0 !important;
    filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .figma265-live-wave {
    display: block !important;
    opacity: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave
    path {
    fill: none !important;
    vector-effect: non-scaling-stroke !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-baseline {
    stroke: rgba(63, 199, 178, 0.18) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-glow {
    stroke: rgba(17, 194, 166, 0.18) !important;
    stroke-width: calc(9px + var(--speech-level, 0) * 8px) !important;
    stroke-linecap: round !important;
    filter: blur(1.2px) drop-shadow(0 8px 16px rgba(11, 159, 141, 0.1)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-core {
    stroke: #13bfa7 !important;
    stroke-width: calc(3.8px + var(--speech-level, 0) * 1.4px) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 8) * 0.34px) rgba(19, 191, 167, 0.22))
      drop-shadow(0 5px 10px rgba(4, 127, 113, 0.12)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton {
    background:
      radial-gradient(circle at 22% 8%, rgba(255, 255, 255, 0.96), transparent 52%),
      linear-gradient(180deg, rgba(252, 255, 254, 0.92), rgba(226, 255, 249, 0.68)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      0 16px 32px -28px rgba(6, 126, 111, 0.44),
      0 0 0 6px rgba(17, 199, 167, 0.028) !important;
  }
}

@keyframes figma265LiveWaveGlowV16 {
  0%, 100% {
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 10) * 0.5px) rgba(17, 194, 166, 0.16))
      drop-shadow(0 10px 20px rgba(7, 151, 132, 0.12));
  }
  50% {
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 10) * 0.8px) rgba(17, 194, 166, 0.24))
      drop-shadow(0 14px 26px rgba(7, 151, 132, 0.16));
  }
}

/* v18: recording state has a visible stop affordance, and discussion content returns to normal flow. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording {
    grid-template-rows: 34px 108px 54px !important;
    align-content: center !important;
    gap: 14px !important;
    min-height: 292px !important;
    padding: 28px 34px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .timer {
    z-index: 2 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    z-index: 1 !important;
    width: min(520px, calc(100% - 72px)) !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    border-radius: 54px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before {
    width: min(296px, 70%) !important;
    height: 64px !important;
    -webkit-mask-size: 100% 64px !important;
    mask-size: 100% 64px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .recorder-actions {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 168px !important;
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    place-content: center !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 4 !important;
    display: inline-flex !important;
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    height: 48px !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(141, 230, 214, 0.78) !important;
    border-radius: 999px !important;
    color: #087d70 !important;
    background:
      radial-gradient(circle at 22% 8%, rgba(255, 255, 255, 0.92), transparent 50%),
      linear-gradient(180deg, rgba(251, 255, 253, 0.9), rgba(223, 255, 248, 0.62)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 18px 36px -30px rgba(6, 126, 111, 0.56),
      0 0 0 7px rgba(17, 199, 167, 0.045) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-indent: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 4px !important;
    background: #0aa892 !important;
    -webkit-mask: none !important;
    mask: none !important;
    transform: none !important;
    filter: drop-shadow(0 0 10px rgba(17, 199, 167, 0.28)) !important;
    animation: figma265StopPulseV18 1.35s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #prevQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #nextQuestionButton {
    position: absolute !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 760px !important;
    max-height: none !important;
    margin-top: 30px !important;
    padding: 24px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion::before {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    line-height: 30px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-tabs {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-self: center !important;
    width: max-content !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    align-items: center !important;
    padding: 4px !important;
    margin: 0 0 2px !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-tabs
    button {
    position: relative !important;
    min-width: 112px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .figma265-discussion-compose {
    position: relative !important;
    z-index: 1 !important;
    order: 3 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-list {
    position: relative !important;
    z-index: 1 !important;
    order: 4 !important;
    margin-top: 0 !important;
  }
}

@keyframes figma265StopPulseV18 {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(0.82);
    opacity: 0.68;
  }
}

/* v20: recorded/submit-ready state must not inherit the live mic button, ring, or dot meter. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave
    span,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    .wave
    span,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    .wave
    span,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]
    .wave
    span,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]
    .wave
    span {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
    transform: scale(0.01) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"],
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"],
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"] {
    grid-template-rows: 34px 52px 64px !important;
    align-content: center !important;
    gap: 12px !important;
    min-height: 222px !important;
    padding: 24px 34px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    .timer,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    .timer,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]
    .timer,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]
    .timer {
    z-index: 2 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    .wave,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    .wave,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]
    .wave,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]
    .wave {
    z-index: 1 !important;
    width: min(472px, calc(100% - 92px)) !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(20, 194, 168, 0.055), transparent 48%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.64)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 18px 42px -36px rgba(31, 53, 45, 0.22) !important;
    filter: none !important;
    animation: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    .wave::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    .wave::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]
    .wave::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]
    .wave::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    .recorder-actions,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    .recorder-actions,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]
    .recorder-actions,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]
    .recorder-actions {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 168px !important;
    width: min(168px, 100%) !important;
    height: 56px !important;
    min-height: 56px !important;
    place-content: center !important;
    column-gap: 0 !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    #recordButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    #recordButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]
    #recordButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]
    #recordButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    #prevQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    #prevQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    #nextQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    #nextQuestionButton {
    position: absolute !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    #recordButton::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    #recordButton::after,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    #recordButton::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    #recordButton::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    animation: none !important;
    filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]
    #submitButton {
    grid-column: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    height: 50px !important;
    min-height: 50px !important;
    transform: none !important;
    justify-self: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio
    .recorder-actions
    button#submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]
    .recorder-actions
    button#submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]
    .recorder-actions
    button#submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]
    .recorder-actions
    button#submitButton {
    grid-column: 1 !important;
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    justify-self: center !important;
  }
}

/* v23 desktop recorder cleanup: remove leaked mobile controls and old green rings. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma-mobile-book-button {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]:not(.recording),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]:not(.recording),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]:not(.recording) {
    position: relative !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: var(--ans265-recorder-saved-height, 222px) !important;
    height: var(--ans265-recorder-saved-height, 222px) !important;
    max-height: var(--ans265-recorder-saved-height, 222px) !important;
    padding: var(--ans265-recorder-saved-padding, 24px 34px) !important;
    align-content: center !important;
    justify-items: center !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    .wave,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]:not(.recording)
    .wave,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]:not(.recording)
    .wave,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]:not(.recording)
    .wave {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    .wave::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    .wave::after,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]:not(.recording)
    .wave::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]:not(.recording)
    .wave::after {
    content: none !important;
    display: none !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    .recorder-actions,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]:not(.recording)
    .recorder-actions,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]:not(.recording)
    .recorder-actions,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]:not(.recording)
    .recorder-actions {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: 168px !important;
    width: 100% !important;
    min-width: 168px !important;
    height: 100% !important;
    min-height: 100% !important;
    place-items: center !important;
    margin: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]:not(.recording)
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitting"]:not(.recording)
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="submitted"]:not(.recording)
    #submitButton {
    position: static !important;
    display: inline-flex !important;
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    #recordButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]:not(.recording)
    #recordButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    #prevQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    #nextQuestionButton {
    position: absolute !important;
    display: block !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    #recordButton::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.has-recorded-audio:not(.recording)
    #recordButton::after,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]:not(.recording)
    #recordButton::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel[data-mic-state="ready"]:not(.recording)
    #recordButton::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording {
    grid-template-rows: 32px 94px 0 !important;
    gap: 12px !important;
    min-height: 236px !important;
    height: 236px !important;
    max-height: 236px !important;
    padding: 17px 57px 22px !important;
    align-content: normal !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    position: absolute !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    transform: none !important;
    opacity: 0 !important;
    filter: none !important;
    transition: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .recorder-actions {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton {
    position: absolute !important;
    left: 50% !important;
    top: 50px !important;
    z-index: 6 !important;
    display: block !important;
    width: min(472px, calc(100% - 114px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 110px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .figma-mobile-discussion-head {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #submitButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #prevQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #nextQuestionButton {
    position: absolute !important;
    display: block !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* v28 input-driven airy recorder wave: SVG curve follows live mic samples only. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .wave {
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(209, 255, 245, 0.14), transparent 46%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(255, 255, 255, 0.32),
      0 18px 42px -38px rgba(31, 53, 45, 0.16) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 6 !important;
    display: none !important;
    width: min(340px, 72%) !important;
    height: 78px !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .figma265-live-wave {
    display: block !important;
    opacity: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave
    path {
    fill: none !important;
    vector-effect: non-scaling-stroke !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-baseline {
    stroke: rgba(78, 190, 174, 0.12) !important;
    stroke-width: 1.25 !important;
    stroke-linecap: round !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-glow {
    stroke: rgba(17, 194, 166, 0.085) !important;
    stroke-width: calc(5px + var(--speech-level, 0) * 4.5px) !important;
    stroke-linecap: round !important;
    filter: blur(0.8px) drop-shadow(0 8px 14px rgba(11, 159, 141, 0.045)) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel
    .figma265-live-wave-core {
    stroke: rgba(12, 184, 160, 0.86) !important;
    stroke-width: calc(2.35px + var(--speech-level, 0) * 0.85px) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter:
      drop-shadow(0 0 calc(var(--speech-wave-glow, 8) * 0.16px) rgba(19, 191, 167, 0.11))
      drop-shadow(0 5px 10px rgba(4, 127, 113, 0.045)) !important;
  }
}

/* v29 desktop Figma lock: recorder layer loads after the page skin, so it must not
   pull the navigator or discussion area back into older absolute/flex layouts. */
@media (min-width: 761px) {
  html:has(body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html:has(body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265)
    body.view-practice.figma-answer-265-active {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto auto minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 8px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 12px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    > :not(.mobile-question-list-back) {
    position: static !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .mobile-question-list-back,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .figma-mobile-top-title,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .figma-mobile-top-subtitle,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .figma-mobile-bookmark-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step] {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.92), transparent 52%),
      rgba(255, 255, 255, 0.64) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 12px 26px -22px rgba(44, 56, 67, 0.3) !important;
    color: transparent !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step="-1"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step="1"] {
    grid-column: 6 !important;
    grid-row: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step]::before {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 3px solid #0c9c8a !important;
    border-bottom: 3px solid #0c9c8a !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step="-1"]::before {
    transform: rotate(135deg) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    [data-nav-step="1"]::before {
    transform: rotate(-45deg) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .current-question-pill {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 204px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #17212f !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator
    .figma265-navigator-mode {
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    min-width: 80px !important;
    max-width: 100% !important;
    height: 32px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(146, 234, 216, 0.72) !important;
    border-radius: 16px !important;
    color: #078777 !important;
    background: rgba(231, 255, 246, 0.62) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title tabs"
      "compose compose"
      "list list"
      "sentinel sentinel" !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 30px !important;
    padding: 22px 24px 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    background: rgba(255, 252, 243, 0.68) !important;
    box-shadow: 0 18px 34px rgba(121, 92, 30, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(28px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.14) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-discussion::before {
    grid-area: title !important;
    position: static !important;
    display: block !important;
    margin: 0 !important;
    color: #101722 !important;
    font-size: 22px !important;
    font-weight: 940 !important;
    line-height: 36px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-tabs {
    grid-area: tabs !important;
    position: static !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-tabs
    button {
    min-width: 84px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    font-weight: 840 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .figma265-discussion-compose {
    grid-area: compose !important;
    position: static !important;
    z-index: 1 !important;
    order: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 8px 0 18px !important;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-list {
    grid-area: list !important;
    position: static !important;
    z-index: 1 !important;
    order: 0 !important;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-list
    > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-column: 1 / -1 !important;
    margin: 0 0 12px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-list
    > *:last-child {
    margin-bottom: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .discussion-load-sentinel {
    grid-area: sentinel !important;
  }
}

/* v33 long RA text repair: the question stem must expand with content instead of
   inheriting old fixed Figma coordinates that crop longer prompts. */
@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: start !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-title-line {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    #activeQuestionTitle {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 20px 24px !important;
    overflow: visible !important;
    color: var(--ans265-text) !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1.68 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-text-line {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    font: inherit !important;
    line-height: inherit !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* v34 hard guard for long RA prompts: never crop the prompt text on desktop. */
@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 24px 20px !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-title-line,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-title-line
    #activeQuestionTitle {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-overflow: clip !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-text-line,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .dict-word {
    display: inline !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    #questionText
    .ra-text-line {
    display: block !important;
    width: 100% !important;
  }
}

html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-item.is-text-record { min-height: 0 !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(248, 246, 255, 0.58)) !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-item.is-text-record .practice-showcase-avatar { background: rgba(238, 234, 255, 0.88) !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-item.is-text-record:is(.is-showcase-record, .is-mine-record) .practice-showcase-avatar::before { background: url("./assets/figma-answer-265/mobile-book.svg") center / 20px 20px no-repeat !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-text-answer { display: grid !important; gap: 10px !important; min-width: 0 !important; padding: 13px 14px !important; border: 1px solid rgba(255, 255, 255, 0.82) !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-text-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-text-head span { color: #6357b8 !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0.04em !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-text-head b { padding: 3px 8px !important; border-radius: 999px !important; color: #087d70 !important; background: rgba(230, 255, 247, 0.72) !important; font-size: 10px !important; font-weight: 850 !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-text-answer p { display: -webkit-box !important; min-width: 0 !important; max-height: 88px !important; margin: 0 !important; overflow: hidden !important; color: #344150 !important; font-size: 13px !important; font-weight: 620 !important; line-height: 22px !important; white-space: pre-line !important; overflow-wrap: anywhere !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 4 !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-text-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding-top: 9px !important; border-top: 1px solid rgba(214, 224, 223, 0.58) !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-text-footer > span { color: #7b8894 !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-text-footer button { min-height: 30px !important; padding: 0 11px !important; border: 1px solid rgba(126, 207, 192, 0.62) !important; border-radius: 15px !important; color: #087d70 !important; background: rgba(242, 255, 251, 0.82) !important; font-size: 11px !important; font-weight: 850 !important; }
html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-text-footer button:disabled { color: #89949d !important; border-color: rgba(194, 205, 207, 0.62) !important; background: rgba(245, 247, 247, 0.72) !important; }

/* Consolidated from answer-page-mobile-figma-tabs.css during frontend cleanup 2026-07-08. */
/* Mobile RA answer page rebuilt from the Figma 385:* frames. */
@media (max-width: 760px) {
  html:has(body.view-practice.figma-answer-265-active),
  html body.view-practice.figma-answer-265-active {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(520px 420px at 8% 0%, rgba(255, 222, 76, 0.5) 0 18%, transparent 42%),
      radial-gradient(520px 520px at 92% 18%, rgba(255, 255, 255, 0.66) 0 18%, transparent 46%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 210px, #fff0aa 430px, #fff8dd 680px, #fffdf7 940px, #ffffff 1200px) !important;
    background-attachment: scroll !important;
  }

  html body.view-practice.figma-answer-265-active .app-shell,
  html body.view-practice.figma-answer-265-active .app-shell > .main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: transparent !important;
  }

  html body.view-practice.figma-answer-265-active .mobile-tabbar,
  html body.view-practice.figma-answer-265-active .desktop-sidebar {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265 {
    --figma-ink: #17212f;
    --figma-text: #314050;
    --figma-muted: #687685;
    --figma-soft-muted: #8b95a0;
    --figma-teal: #22d3c5;
    --figma-cyan: #5eafc0;
    --figma-card-border: rgba(255, 255, 255, 0.84);
    --figma-panel-shadow: 0 20px 42px -10px rgba(110, 133, 128, 0.12);
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    min-width: 0 !important;
    min-height: 1420px !important;
    margin: 0 auto !important;
    padding: 0 0 calc(128px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    color: var(--figma-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265::before {
    content: none !important;
    display: none !important;
    position: absolute !important;
    left: 24px !important;
    top: 17px !important;
    z-index: 3 !important;
    width: 56px !important;
    height: 18px !important;
    color: #18212f !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265::after {
    content: none !important;
    display: none !important;
    position: absolute !important;
    left: 318px !important;
    top: 20px !important;
    z-index: 3 !important;
    width: 58px !important;
    height: 16px !important;
    pointer-events: none !important;
    background:
      linear-gradient(#1f2937, #1f2937) 0 6px / 3px 7px no-repeat,
      linear-gradient(#1f2937, #1f2937) 6px 3px / 3px 10px no-repeat,
      linear-gradient(#1f2937, #1f2937) 12px 0 / 3px 13px no-repeat,
      linear-gradient(rgba(96, 112, 122, 0.7), rgba(96, 112, 122, 0.7)) 34px 2px / 23px 12px no-repeat,
      linear-gradient(rgba(62, 214, 194, 0.95), rgba(62, 214, 194, 0.95)) 37px 5px / 14px 6px no-repeat;
    border-radius: 2px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-top-grid,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-left-rail,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-hero,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-browser,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .workbench-resizer,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .feedback-resizer,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .feedback-panel:not(.mobile-report-open),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #mobileReportSummaryButton.is-hidden {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice:not(.speech-mode):not(.order-mode)
    .answer-workspace:not([hidden]) {
    display: grid !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100% - 36px) !important;
    min-width: 0 !important;
    margin: 0 18px 16px !important;
    padding: 16px 16px 0 !important;
    gap: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(247, 253, 251, 0.62)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 38px -30px rgba(31, 54, 66, 0.24) !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice:not(.speech-mode):not(.order-mode)
    .answer-workspace
    > div:first-child {
    display: block !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice:not(.speech-mode)
    .answer-workspace
    .eyebrow {
    margin: 0 0 3px !important;
    color: #7a8792 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 16px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice:not(.speech-mode)
    .answer-workspace
    h3 {
    margin: 0 !important;
    color: #17212f !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 26px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice.text-mode:not(.fill-mode)
    .answer-workspace
    .text-answer {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--answer-text-height, auto) !important;
    min-height: var(--answer-text-min-height, 176px) !important;
    max-height: var(--answer-text-max-height, none) !important;
    padding: 16px !important;
    border: 1px solid rgba(198, 216, 214, 0.62) !important;
    border-radius: 18px !important;
    color: #17212f !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 12px 28px -26px rgba(23, 67, 61, 0.28) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    resize: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice[data-active-type="WE"]
    .answer-workspace
    .text-answer {
    min-height: 320px !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace.swt-answer-workspace { --answer-workspace-columns: minmax(0, 1fr) auto; --answer-workspace-areas: "title count" "editor editor" "actions actions"; --answer-text-height: 164px; --answer-text-min-height: 164px; --answer-text-max-height: 210px; --answer-actions-grid-area: actions; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace.swt-answer-workspace > div:first-child { grid-area: title !important; min-width: 0 !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace.swt-answer-workspace .eyebrow { color: #0a937f !important; letter-spacing: 0.06em !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace.swt-answer-workspace .answer-hint-bar { grid-area: count !important; width: auto !important; justify-self: end !important; align-self: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace.swt-answer-workspace .we-word-status { display: inline-flex !important; min-height: 36px !important; padding: 0 12px !important; align-items: baseline !important; gap: 5px !important; border: 1px solid rgba(150, 225, 211, 0.72) !important; border-radius: 18px !important; background: rgba(239, 255, 250, 0.72) !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace.swt-answer-workspace .we-word-status strong { color: #087d70 !important; font-size: 18px !important; line-height: 22px !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace.swt-answer-workspace .we-word-status span { color: #6f7e88 !important; font-size: 11px !important; line-height: 16px !important; white-space: nowrap !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace.swt-answer-workspace .text-answer { grid-area: editor !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace.swt-answer-workspace .text-answer:focus { border-color: rgba(17, 179, 153, 0.62) !important; box-shadow: 0 0 0 4px rgba(17, 179, 153, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; outline: none !important; }

  html:has(body.view-practice.figma-answer-265-active.practice-mobile-report-page),body.view-practice.figma-answer-265-active.practice-mobile-report-page{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;scrollbar-width:none;background:radial-gradient(520px 420px at 8% 0%,rgba(255,222,76,.46) 0 18%,transparent 42%),radial-gradient(520px 520px at 92% 18%,rgba(255,255,255,.72) 0 18%,transparent 46%),linear-gradient(180deg,#ffd11a 0,#ffe36d 210px,#fff0aa 430px,#fff8dd 680px,#fff 1120px);}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page>#recorderPanel,body.view-practice.figma-answer-265-active.practice-mobile-report-page #practice.practice-detail-mode.figma-answer-265::before,body.view-practice.figma-answer-265-active.practice-mobile-report-page #practice.practice-detail-mode.figma-answer-265::after,body.view-practice.figma-answer-265-active.practice-mobile-report-page #practice.practice-detail-mode.figma-answer-265 :is(.answer-stage,.practice-navigator,.question-card.active-question,.practice-discussion,#mobileReportSummaryButton){content:none;display:none;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #practice.practice-detail-mode.figma-answer-265{width:100vw;max-width:none;min-height:100svh;padding:0;overflow:hidden;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #practice.practice-detail-mode.figma-answer-265 :is(.practice-dashboard-layout,.practice-panel,.practice-workbench){display:block;width:100%;height:100%;min-height:100svh;margin:0;padding:0;overflow:hidden;background:transparent;box-shadow:none;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel.has-report.mobile-report-open{--ans265-ink:#17212f;--ans265-mint:#10a48a;--ans265-gold:#ffd21f;--ans265-red:#ef5a62;position:fixed;inset:0;z-index:1001;display:block;box-sizing:border-box;width:100vw;min-width:0;max-width:none;height:100dvh;min-height:100svh;max-height:none;margin:0;padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scrollbar-gutter:auto;touch-action:pan-y;border:0;border-radius:0;color:var(--ans265-ink);background:radial-gradient(360px 300px at 8% 0%,rgba(255,222,76,.42),transparent 62%),radial-gradient(340px 320px at 94% 10%,rgba(255,255,255,.84),transparent 64%),linear-gradient(180deg,rgba(255,243,168,.98),rgba(255,252,234,.98) 52%,#fff 100%);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-overflow-scrolling:touch;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel.has-report.mobile-report-open::-webkit-scrollbar{display:none;width:0;height:0;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open::before,body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open::after,body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open :is(>.eyebrow,>h2,>.score-ring,>.ai-breakdown,>.solution-panel,>.action-plan-list,>.report-actions,.figma265-feedback-status){content:none;display:none;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .mobile-feedback-close{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:16px;z-index:1003;display:grid;width:44px;height:44px;place-items:center;border:1px solid rgba(255,255,255,.82);border-radius:999px;color:#17212f;background:rgba(255,255,255,.6);box-shadow:0 14px 28px rgba(90,98,92,.12);-webkit-backdrop-filter:blur(18px) saturate(1.08);backdrop-filter:blur(18px) saturate(1.08);}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .feedback-list{display:block;width:100%;margin:0;padding:0;overflow:visible;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-report-ready{display:grid;gap:14px;width:100%;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-report-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-right:48px;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open :is(.figma265-soft-action,.figma265-primary-action){display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.82);border-radius:18px;color:#17212f;background:rgba(255,255,255,.66);box-shadow:0 10px 22px rgba(111,128,122,.1);font-size:14px;font-weight:850;white-space:nowrap;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open :is(.figma265-dimension-card,.figma265-deep-card,.figma265-recording-card,.figma265-radar-card,.figma265-total-card){box-sizing:border-box;border:1px solid rgba(255,255,255,.78);background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(255,255,255,.46)),rgba(255,255,255,.54);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 18px 36px -28px rgba(38,54,68,.22);-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open :is(.figma265-dimension-card,.figma265-recording-card,.figma265-deep-card){display:grid;gap:12px;padding:16px;border-radius:24px;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open :is(.figma265-section-head,.figma265-recording-head,.figma265-deep-head){display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open :is(.figma265-dimension-card h3,.figma265-recording-card h4,.figma265-deep-card h3){margin:0;color:var(--ans265-ink);font-size:20px;font-weight:900;line-height:25px;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-total-card{display:grid;grid-template-columns:minmax(0,1fr) 66px;align-items:center;gap:12px;min-height:92px;padding:14px 14px 14px 16px;border-radius:22px;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-total-card :is(small,span){display:block;color:rgba(74,87,105,.78);font-size:12px;font-weight:850;line-height:16px;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-total-card strong{display:block;margin-top:2px;color:#05070b;font-size:44px;font-weight:950;line-height:46px;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-total-card em{font-size:17px;font-style:normal;font-weight:760;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-total-card b{display:grid;width:66px;height:66px;place-items:center;border-radius:999px;background:radial-gradient(circle at center,rgba(239,255,250,.96) 0 35%,transparent 36%),conic-gradient(rgba(20,194,162,.72) 0 var(--score),rgba(210,248,238,.82) var(--score) 360deg);box-shadow:0 0 0 9px rgba(226,255,247,.5),0 12px 24px rgba(20,194,162,.12);}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-total-card b i{color:#008d7a;font-size:20px;font-style:normal;font-weight:900;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-recording-head span,body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-deep-head button{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border:1px solid rgba(255,255,255,.74);border-radius:999px;color:#006b57;background:rgba(230,255,248,.74);font-size:11px;font-weight:900;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-native-audio{display:block;width:100%;max-width:100%;height:36px;border-radius:18px;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-sentence-legend{display:flex;align-items:center;gap:8px;margin:0;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-sentence-legend i{width:7px;height:7px;border-radius:50%;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-sentence-legend span{color:rgba(76,89,107,.78);font-size:12px;font-weight:650;line-height:17px;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-sentence{display:block;margin:0;color:var(--ans265-mint);font-size:14px;font-weight:750;line-height:22px;white-space:normal;overflow-wrap:anywhere;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-sentence :is(span,span.good){color:var(--ans265-mint);}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-sentence span.warn{color:#f3b600;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-sentence span.weak{color:#d94752;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-sentence .speech-word{cursor:pointer;pointer-events:auto;touch-action:manipulation;border-radius:6px;}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-radar-card{display:grid;height:108px;place-items:center;border-radius:24px;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-radar{width:112px;height:104px;overflow:visible;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open :is(.radar-grid,.radar-axis){fill:rgba(181,238,225,.26);stroke:rgba(16,164,138,.3);}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .radar-shape{fill:rgba(16,164,138,.22);stroke:var(--ans265-mint);}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .radar-dot{fill:var(--dot,#10a48a);stroke:rgba(255,255,255,.82);}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .radar-zero-core{fill:rgba(16,164,138,.82);stroke:rgba(255,255,255,.9);stroke-width:2;filter:drop-shadow(0 0 10px rgba(16,164,138,.18));}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-metric-list{display:grid;gap:9px;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-metric-list article{display:grid;grid-template-columns:76px 62px minmax(0,1fr) 34px;align-items:center;gap:8px;min-height:48px;padding:9px 10px;border-radius:16px;background:rgba(255,255,255,.62);}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-metric-list :is(span,em,small){font-size:11px;font-weight:900;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-metric-list strong{font-size:25px;line-height:28px;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-metric-list i{height:4px;overflow:hidden;border-radius:999px;background:rgba(117,132,150,.12);}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-metric-list b{display:block;height:100%;border-radius:inherit;background:var(--metric);}
  body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-deep-cta-card{padding:12px!important;overflow:visible!important;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-deep-correction-btn{position:relative!important;display:inline-grid!important;grid-template-columns:auto 20px!important;align-items:center!important;justify-content:center!important;justify-self:center!important;gap:12px!important;width:auto!important;min-width:166px!important;min-height:58px!important;padding:0 17px 0 22px!important;overflow:hidden!important;border:1px solid rgba(32,201,151,.28)!important;border-radius:23px!important;color:#006b57!important;background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.96),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.88),rgba(233,255,248,.7))!important;box-shadow:0 0 0 6px rgba(32,201,151,.045),0 14px 30px rgba(20,151,119,.16),0 0 26px rgba(32,201,151,.2),inset 0 1px 0 rgba(255,255,255,.92)!important;-webkit-backdrop-filter:blur(18px) saturate(1.08)!important;backdrop-filter:blur(18px) saturate(1.08)!important;isolation:isolate!important;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-deep-correction-btn::before{content:""!important;position:absolute!important;inset:-42% auto -42% -55%!important;width:46%!important;z-index:-1!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)!important;filter:blur(2px)!important;transform:rotate(13deg)!important;animation:deep-correction-button-sheen 3.2s ease-in-out infinite!important;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-deep-correction-btn::after{content:""!important;position:absolute!important;inset:6px!important;z-index:-2!important;border-radius:18px!important;background:radial-gradient(circle at 76% 50%,rgba(32,201,151,.16),transparent 58%)!important;opacity:.84!important;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-deep-correction-btn .deep-correction-action-label{display:block!important;color:inherit!important;font-size:17px!important;font-weight:930!important;line-height:1!important;letter-spacing:0!important;text-shadow:0 1px 0 rgba(255,255,255,.82),0 -1px 0 rgba(3,88,74,.12)!important;white-space:nowrap!important;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-deep-correction-btn i{display:none!important;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-deep-correction-btn .deep-correction-action-arrow{position:relative!important;display:block!important;width:18px!important;height:18px!important;border-radius:999px!important;background:rgba(32,201,151,.11)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;}body.view-practice.figma-answer-265-active.practice-mobile-report-page #feedbackPanel.feedback-panel.has-report.mobile-report-open .figma265-deep-correction-btn .deep-correction-action-arrow::before{content:""!important;position:absolute!important;left:5px!important;top:4px!important;width:7px!important;height:7px!important;border-top:2px solid #07977d!important;border-right:2px solid #07977d!important;transform:rotate(45deg)!important;}

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-card{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:stretch!important;justify-content:stretch!important;justify-self:center!important;gap:12px!important;box-sizing:border-box!important;width:min(calc(100% - 24px),342px)!important;min-height:228px!important;padding:20px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.86)!important;border-radius:30px!important;background:radial-gradient(210px 180px at 48% 0%,rgba(197,255,244,.5),transparent 66%),radial-gradient(190px 170px at 96% 24%,rgba(255,244,184,.26),transparent 68%),linear-gradient(145deg,rgba(255,255,255,.86),rgba(246,255,252,.58))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 22px 44px -34px rgba(29,58,55,.22)!important;-webkit-backdrop-filter:blur(24px) saturate(1.12)!important;backdrop-filter:blur(24px) saturate(1.12)!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-card .figma265-card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;min-width:0!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-card h3{font-size:24px!important;line-height:30px!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-card>p{width:auto!important;max-width:100%!important;margin:-6px 0 0!important;color:rgba(79,92,110,.74)!important;font-size:14px!important;line-height:22px!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-card .figma265-status{display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:26px!important;padding:0 10px!important;border:1px solid rgba(115,225,203,.44)!important;border-radius:999px!important;color:#008d7a!important;background:linear-gradient(90deg,rgba(235,255,249,.82),rgba(255,255,255,.62))!important;box-shadow:0 8px 18px rgba(16,164,138,.08)!important;font-size:11px!important;font-weight:900!important;line-height:14px!important;white-space:nowrap!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-card .figma265-status img{display:block!important;width:7px!important;height:7px!important;flex:0 0 7px!important;object-fit:contain!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-visual{position:relative!important;display:grid!important;justify-items:center!important;gap:12px!important;justify-self:stretch!important;width:auto!important;max-width:100%!important;margin:2px auto 0!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-visual::before{content:""!important;position:absolute!important;left:50%!important;top:-24px!important;z-index:-1!important;width:220px!important;height:136px!important;border-radius:999px!important;background:radial-gradient(ellipse at center,rgba(25,211,181,.17),transparent 68%)!important;filter:blur(12px)!important;transform:translateX(-50%)!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-pending-wave{position:relative!important;display:grid!important;grid-template-columns:1fr!important;place-items:center!important;align-items:center!important;gap:0!important;box-sizing:border-box!important;justify-self:stretch!important;width:auto!important;max-width:100%!important;height:80px!important;margin:0 auto!important;padding:0 22px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.86)!important;border-radius:30px!important;background:radial-gradient(ellipse at 42% 48%,rgba(203,255,244,.42),transparent 66%),linear-gradient(90deg,rgba(255,255,255,.78),rgba(246,255,252,.52))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(179,223,214,.18),0 18px 34px -30px rgba(20,118,105,.2)!important;-webkit-backdrop-filter:blur(20px) saturate(1.12)!important;backdrop-filter:blur(20px) saturate(1.12)!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform{position:relative!important;display:grid!important;align-items:center!important;justify-items:center!important;justify-content:center!important;gap:0!important;width:min(220px,100%)!important;min-width:0!important;height:58px!important;overflow:visible!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform::before,html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform::after{content:none!important;display:none!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-line{position:relative!important;inset:auto!important;display:block!important;z-index:2!important;width:min(228px,100%)!important;height:60px!important;opacity:.9!important;overflow:visible!important;transform-origin:center!important;animation:figma265ReadyLineShell 5.4s ease-in-out infinite!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-mist{position:absolute!important;inset:8px 10px 4px!important;z-index:0!important;border-radius:999px!important;background:radial-gradient(ellipse at 44% 52%,rgba(24,205,176,.13),transparent 58%),radial-gradient(ellipse at 74% 40%,rgba(255,246,186,.12),transparent 62%)!important;filter:blur(12px)!important;opacity:.52;animation:figma265WaveMistFloat 6.6s ease-in-out infinite!important;pointer-events:none!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-base{stroke:rgba(141,207,196,.17)!important;stroke-width:1.35!important;opacity:.9!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-glow{stroke:rgba(17,200,169,.08)!important;stroke-width:11!important;filter:blur(.35px) drop-shadow(0 12px 24px rgba(18,196,166,.11))!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-soft{stroke:rgba(109,235,216,.17)!important;stroke-width:5.4!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-main{stroke:rgba(18,188,164,.66)!important;stroke-width:2.7;stroke-dasharray:.48 .52;stroke-dashoffset:.18;transform-box:fill-box!important;transform-origin:center!important;animation:figma265ReadyLineStretch 5.6s cubic-bezier(.42,0,.18,1) infinite!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-highlight{stroke:rgba(255,255,255,.64)!important;stroke-width:1.8!important;stroke-dasharray:.1 .9;stroke-dashoffset:.92;opacity:0;filter:drop-shadow(0 0 8px rgba(255,255,255,.34))!important;animation:figma265WaveLightSweep 5.2s ease-in-out infinite!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-line.is-active .figma265-wave-main{animation:figma265ReadyLineStretch 5.6s cubic-bezier(.42,0,.18,1) infinite!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-spark{position:absolute!important;left:0!important;top:0!important;z-index:3!important;display:block!important;width:4px!important;height:4px!important;border-radius:999px!important;background:rgba(245,255,252,.78)!important;box-shadow:0 0 0 4px rgba(40,218,188,.055),0 0 12px rgba(35,211,184,.26)!important;pointer-events:none!important;opacity:0;animation:figma265WaveSparkGlide 4.9s cubic-bezier(.36,0,.18,1) infinite!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-spark.spark-b{animation-delay:1.18s!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform .figma265-wave-spark.spark-c{animation-delay:2.4s!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-waveform i{display:none!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-pending-wave small{display:none!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-progress{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;width:min(210px,72%)!important;height:16px!important;margin:0 auto!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-progress::before{content:""!important;position:absolute!important;left:8px!important;right:8px!important;top:7px!important;height:2px!important;border-radius:999px!important;background:linear-gradient(90deg,rgba(24,168,143,.45),rgba(255,199,62,.46),rgba(181,197,205,.42))!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-progress span{position:relative!important;z-index:1!important;display:block!important;width:12px!important;height:12px!important;border:2px solid rgba(255,255,255,.82)!important;border-radius:50%!important;background:#20c7ad!important;box-shadow:0 5px 12px rgba(18,164,141,.18)!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-progress span:nth-child(2){width:16px!important;height:16px!important;background:#ffd45a!important;box-shadow:0 6px 14px rgba(221,160,28,.18)!important;}
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel .figma265-ready-progress span:nth-child(3){background:#c8d3d8!important;box-shadow:none!important;}


  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-dashboard-layout,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-workbench,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .answer-stage {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .answer-stage {
    min-height: 1276px !important;
  }

  /* Top glass navigation */
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator {
    position: relative !important;
    z-index: 4 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: calc(100% - 36px) !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 45px 18px 11px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 30px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(248, 255, 248, 0.44)) !important;
    box-shadow: 0 18px 36px -10px rgba(108, 136, 133, 0.1) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
    backdrop-filter: blur(22px) saturate(1.16) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    [data-nav-step],
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .figma265-navigator-mode {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .mobile-question-list-back,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .figma-mobile-bookmark-button {
    position: absolute !important;
    top: 15px !important;
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 20px !important;
    color: #4d5967 !important;
    background: rgba(255, 255, 255, 0.52) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .mobile-question-list-back {
    left: 11px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .mobile-question-list-back::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .figma-mobile-bookmark-button::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: currentColor !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .mobile-question-list-back::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-back.svg") center / 24px 24px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .current-question-pill {
    position: absolute !important;
    left: 57px !important;
    top: 17px !important;
    display: grid !important;
    width: 70px !important;
    height: 36px !important;
    min-width: 70px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 18px !important;
    color: #60707f !important;
    background: rgba(249, 251, 247, 0.62) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-top-title {
    position: absolute !important;
    left: 50% !important;
    top: 18px !important;
    display: block !important;
    width: 128px !important;
    height: 24px !important;
    transform: translateX(-50%) !important;
    color: #17212f !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-top-subtitle {
    position: absolute !important;
    left: 50% !important;
    top: 42px !important;
    display: block !important;
    width: 130px !important;
    height: 15px !important;
    transform: translateX(-50%) !important;
    color: #697785 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .figma-mobile-bookmark-button {
    right: 11px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .figma-mobile-bookmark-button::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-bookmark.svg") center / 24px 24px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  /* Question card */
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: calc(100% - 36px) !important;
    height: 456px !important;
    min-height: 0 !important;
    margin: 0 18px 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 32px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(248, 251, 250, 0.36)) !important;
    box-shadow: var(--figma-panel-shadow) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-meta,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-meaning {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-image-panel:not(.is-hidden) {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 12px 0 0 !important;
    padding: 10px !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(197, 211, 213, 0.58) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    resize: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-image-panel:not(.is-hidden)
    :is(.di-image-fit-frame, img) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    object-fit: contain !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .audio-prompt:not(:empty) {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 40px auto minmax(0, 1fr) auto !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 58px !important;
    margin: 14px 0 0 !important;
    padding: 9px 12px !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(191, 211, 214, 0.58) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow: 0 12px 26px -24px rgba(31, 54, 66, 0.34) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .audio-prompt
    .audio-track {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-title-line {
    position: static !important;
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265[data-active-question-type="RS"]
    .question-title-line {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-title-line
    .active-question-code {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-title-line
    h3 {
    position: absolute !important;
    left: 64px !important;
    top: 19px !important;
    display: block !important;
    width: 134px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #7d8995 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #questionText {
    position: absolute !important;
    left: 21px !important;
    top: 59px !important;
    display: -webkit-box !important;
    box-sizing: border-box !important;
    width: calc(100% - 44px) !important;
    height: 252px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #101820 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 27px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 9 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 300px !important;
    width: 100% !important;
    height: 18px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.66) 55%, rgba(255, 255, 255, 0.88)) !important;
    opacity: 0.56 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .answer-hint-bar.ra-mode-inline {
    position: absolute !important;
    left: auto !important;
    right: 20px !important;
    top: 14px !important;
    z-index: 2 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 126px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control {
    position: relative !important;
    display: flex !important;
    box-sizing: border-box !important;
    width: 126px !important;
    height: 30px !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 3px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow: 0 8px 18px -8px rgba(111, 139, 134, 0.08) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control
    span,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control
    small {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control
    button {
    display: grid !important;
    width: 59px !important;
    height: 24px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #687685 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control
    [data-ra-mode="sentence"] {
    order: 2 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control
    [data-ra-mode="full"] {
    order: 1 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control
    button.active {
    color: #1f2937 !important;
    background: rgba(255, 239, 178, 0.9) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player:not(.is-hidden) {
    position: absolute !important;
    left: 21px !important;
    top: 315px !important;
    z-index: 2 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: calc(100% - 44px) !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 25px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 10px 22px rgba(115, 148, 143, 0.1) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player.is-hidden {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    .ra-demo-avatar,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    .ra-demo-player-head
    span,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoSpeedSelect {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    .ra-demo-player-head
    > div:not(.ra-demo-avatar) {
    position: static !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    .ra-demo-player-head,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    .ra-demo-player-controls {
    display: contents !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoPlayerTitle {
    position: absolute !important;
    left: 53px !important;
    top: 7px !important;
    display: block !important;
    width: 72px !important;
    height: 17px !important;
    margin: 0 !important;
    color: #202b37 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 17px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    z-index: 3 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoToggleButton {
    position: absolute !important;
    left: 13px !important;
    top: 9px !important;
    display: grid !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 15px !important;
    color: #22d3c5 !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-demo-play-bg.svg") center / 42px 44px no-repeat !important;
    box-shadow: none !important;
    font-size: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoToggleButton::before {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 1px !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-play.svg") center / 14px 14px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoDuration {
    position: absolute !important;
    right: 16px !important;
    top: 8px !important;
    display: block !important;
    width: 86px !important;
    height: 15px !important;
    color: #7b8894 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 15px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoDuration::before {
    content: "剩余 " !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoProgress {
    position: absolute !important;
    left: 53px !important;
    top: 27px !important;
    display: block !important;
    width: calc(100% - 70px) !important;
    height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoProgress::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, #22d3c5 0 33%, rgba(220, 235, 232, 0.9) 33% 100%) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoProgress::-webkit-slider-thumb {
    width: 10px !important;
    height: 10px !important;
    margin-top: -3px !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    background: #22d3c5 url("./assets/figma-answer-265/figma-mobile/figma-demo-progress-thumb.svg") center / 10px 10px no-repeat !important;
    box-shadow: 0 2px 6px rgba(12, 148, 135, 0.24) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoProgress::-moz-range-track {
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(220, 235, 232, 0.9) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoProgress::-moz-range-progress {
    height: 4px !important;
    border-radius: 2px !important;
    background: #22d3c5 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-demo-player
    #raDemoProgress::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    background: #22d3c5 !important;
    box-shadow: 0 2px 6px rgba(12, 148, 135, 0.24) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-passed-button {
    position: absolute !important;
    left: 50% !important;
    top: 385px !important;
    z-index: 3 !important;
    display: grid !important;
    width: 152px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
    border: 1px solid rgba(117, 199, 214, 0.62) !important;
    border-radius: 19px !important;
    color: #5eafc0 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  /* Interactive panel and tabs: mirror the compact desktop community header. */
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-discussion { position: relative !important; z-index: 1 !important; display: grid !important; box-sizing: border-box !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 14px 12px !important; align-items: center !important; width: calc(100% - 36px) !important; height: auto !important; min-height: 0 !important; margin: 0 18px !important; padding: 16px !important; overflow: visible !important; border: 1px solid rgba(255, 255, 255, 0.84) !important; border-radius: 26px !important; background: linear-gradient(120deg, rgba(255, 255, 255, 0.68), rgba(248, 255, 252, 0.46)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 14px 30px -20px rgba(95, 122, 115, 0.24) !important; -webkit-backdrop-filter: blur(24px) saturate(1.16) !important; backdrop-filter: blur(24px) saturate(1.16) !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-discussion::before { content: "热门讨论" !important; position: static !important; display: block !important; grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; color: #17212f !important; font-size: 18px !important; font-weight: 900 !important; line-height: 26px !important; white-space: nowrap !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .discussion-tabs { position: static !important; display: grid !important; box-sizing: border-box !important; grid-column: 2 !important; grid-row: 1 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; justify-self: end !important; width: min(190px, 100%) !important; height: 38px !important; margin: 0 !important; padding: 3px !important; border: 1px solid rgba(255, 255, 255, 0.82) !important; border-radius: 19px !important; background: rgba(255, 255, 255, 0.44) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .discussion-tabs button { position: static !important; display: grid !important; width: 100% !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 7px !important; place-items: center !important; border: 1px solid transparent !important; border-radius: 15px !important; color: #73808c !important; background: transparent !important; box-shadow: none !important; font-size: 12px !important; font-weight: 760 !important; line-height: 16px !important; white-space: nowrap !important; transition: color 160ms ease, background-color 160ms ease, transform 120ms ease !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .discussion-tabs button.active { border-color: rgba(137, 232, 213, 0.72) !important; color: #087d70 !important; background: rgba(232, 255, 247, 0.76) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; font-weight: 850 !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .discussion-tabs button.active::after { content: none !important; display: none !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-discussion-head { position: static !important; display: grid !important; box-sizing: border-box !important; grid-column: 1 / -1 !important; grid-row: 2 !important; grid-template-columns: minmax(0, 1fr) 92px !important; align-items: center !important; gap: 6px !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 5px 6px 5px 13px !important; border: 1px solid rgba(255, 255, 255, 0.82) !important; border-radius: 24px !important; background: rgba(255, 255, 255, 0.56) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265[data-figma-mobile-discussion-tab="discussion"] .figma-mobile-discussion-head { grid-template-columns: minmax(0, 1fr) 62px 92px !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-section-copy { min-width: 0 !important; height: 36px !important; overflow: hidden !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-section-copy strong { display: block !important; overflow: hidden !important; color: #17212f !important; font-size: 12px !important; font-weight: 850 !important; line-height: 18px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-section-copy span { display: block !important; overflow: hidden !important; color: #7b8894 !important; font-size: 10px !important; font-weight: 620 !important; line-height: 16px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 :is(.figma-mobile-post-button, .figma-mobile-filter-button) { position: static !important; display: inline-flex !important; box-sizing: border-box !important; width: 100% !important; height: 36px !important; align-items: center !important; justify-content: center !important; gap: 5px !important; margin: 0 !important; padding: 0 8px !important; border-radius: 18px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 16px !important; white-space: nowrap !important; transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-post-button { border: 1px solid rgba(8, 152, 135, 0.2) !important; color: #ffffff !important; background: linear-gradient(180deg, #17bba7, #0ba18f) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 20px -16px rgba(4, 118, 103, 0.7) !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-filter-button { border: 1px solid rgba(173, 191, 197, 0.56) !important; color: #5e6d79 !important; background: rgba(255, 255, 255, 0.72) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94) !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-post-button::before,
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-filter-button::before { content: "" !important; display: block !important; flex: 0 0 14px !important; width: 14px !important; height: 14px !important; -webkit-mask: none !important; mask: none !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-post-button::before { background: url("./assets/figma-answer-265/figma-mobile/figma-icon-compose-post.svg") center / 14px 14px no-repeat !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-filter-button::before { background: url("./assets/figma-answer-265/figma-mobile/figma-icon-filter.svg") center / 14px 14px no-repeat !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 :is(.discussion-tabs button, .figma-mobile-post-button, .figma-mobile-filter-button):focus-visible { outline: 2px solid rgba(10, 155, 138, 0.9) !important; outline-offset: 2px !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 :is(.figma-mobile-post-button, .figma-mobile-filter-button):active { transform: translateY(1px) !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .discussion-list { position: static !important; display: grid !important; box-sizing: border-box !important; grid-column: 1 / -1 !important; grid-row: 3 !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .discussion-list > .practice-community-state { display: grid !important; box-sizing: border-box !important; width: 100% !important; min-height: 104px !important; margin: 0 !important; padding: 20px !important; place-items: center !important; border: 1px solid rgba(255, 255, 255, 0.78) !important; border-radius: 20px !important; color: #75828e !important; background: rgba(255, 255, 255, 0.5) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important; font-size: 12px !important; line-height: 20px !important; text-align: center !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .discussion-list > .practice-community-state p { margin: 0 !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma265-discussion-compose,
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-showcase-toolbar { display: none !important; }
  /* Showcase and mine rows */
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-item {
    position: relative !important;
    display: grid !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 14px 15px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 26px !important;
    background: rgba(250, 255, 253, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px -12px rgba(91, 128, 120, 0.12) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-item.is-mine-record {
    min-height: 0 !important;
    border-radius: 26px !important;
    background: rgba(255, 254, 246, 0.76) !important;
    border-color: rgba(255, 255, 255, 0.74) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-avatar {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: #e9fbff !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-item.is-mine-record
    .practice-showcase-avatar {
    width: 46px !important;
    height: 46px !important;
    background: #f7ecd4 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-avatar
    img {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-avatar::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-avatar-icon-qulili.svg") center / 20px 20px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-item.is-mine-record
    .practice-showcase-avatar::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-avatar-icon-reply-ii.svg") center / 20px 20px no-repeat !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-body {
    display: grid !important;
    grid-column: 2 !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    align-items: start !important;
    min-width: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-meta
    strong {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    color: #17212f !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-item.is-mine-record
    .practice-showcase-meta
    strong {
    width: auto !important;
    height: auto !important;
    font-size: 17px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-meta
    time {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    color: #687685 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-item.is-mine-record
    .practice-showcase-meta
    time {
    width: auto !important;
    height: auto !important;
    color: #7b8894 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-score {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    align-content: start !important;
    align-items: end !important;
    justify-content: end !important;
    justify-items: end !important;
    width: auto !important;
    min-width: 58px !important;
    height: auto !important;
    color: #17212f !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-score
    small {
    position: static !important;
    grid-column: 1 / -1 !important;
    color: #98a1aa !important;
    font-size: 11px !important;
    line-height: 14px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-score
    b {
    color: #17212f !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 32px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-score
    em {
    color: #87919b !important;
    font-size: 11px !important;
    font-style: normal !important;
    line-height: 14px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-badges {
    position: static !important;
    display: none !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-item.is-mine-record
    .practice-showcase-badges {
    position: static !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-badges
    span {
    display: grid !important;
    width: auto !important;
    min-width: 68px !important;
    height: 24px !important;
    padding: 0 10px !important;
    place-items: center !important;
    border-radius: 12px !important;
    color: #687685 !important;
    background: rgba(239, 244, 244, 0.82) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 15px !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-badges
    span:nth-child(2) {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-player {
    position: static !important;
    display: grid !important;
    box-sizing: border-box !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 8px 10px 8px 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 18px !important;
    background: rgba(245, 252, 250, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 9px 20px rgba(52, 122, 110, 0.06) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-item.is-mine-record
    .practice-showcase-player {
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(229, 219, 194, 0.52) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-play {
    position: static !important;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: #22d3c5 !important;
    box-shadow: 0 8px 16px rgba(14, 174, 159, 0.22) !important;
    font-size: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-play::before {
    content: "" !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 2px !important;
    border: 0 !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-play.svg") center / 14px 14px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-player.is-playing
    .practice-showcase-play::before {
    width: 3px !important;
    height: 13px !important;
    margin-left: -6px !important;
    background: currentColor !important;
    box-shadow: 7px 0 0 currentColor !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-time {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 44px !important;
    height: auto !important;
    color: #687685 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 18px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-audio {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-showcase-tags {
    display: none !important;
  }

  /* Discussion posts */
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-post {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 318px !important;
    max-width: 100% !important;
    min-height: 146px !important;
    margin: 0 !important;
    padding: 17px 14px 18px 62px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 24px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.68), rgba(248, 255, 253, 0.44)) !important;
    box-shadow: 0 9px 20px -8px rgba(123, 150, 144, 0.07) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-post.is-expanded {
    min-height: 320px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-avatar {
    position: absolute !important;
    left: 14px !important;
    top: 18px !important;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    color: transparent !important;
    background: #f7ecd4 !important;
    font-size: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-avatar::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-avatar-icon-reply-ii.svg") center / 20px 20px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-post-main {
    display: block !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-meta {
    display: block !important;
    width: 126px !important;
    height: 22px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-meta
    span {
    display: block !important;
    width: 126px !important;
    overflow: hidden !important;
    color: #17212f !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 22px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-meta
    b,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-meta
    small {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-post
    h4 {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-content {
    display: -webkit-box !important;
    width: 232px !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    overflow: hidden !important;
    color: #314050 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-content
    mark {
    color: inherit !important;
    background: transparent !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-post-actions {
    position: absolute !important;
    right: 10px !important;
    top: 16px !important;
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-post-actions
    button {
    position: relative !important;
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: visible !important;
    border: 0 !important;
    color: #87919b !important;
    background: transparent !important;
    font-size: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-post-actions
    button::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background: currentColor !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-post-actions
    [data-discussion-like]::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-like.svg") center / 20px 20px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-post-actions
    [data-discussion-comment]::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-comment.svg") center / 20px 20px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-post-actions
    [data-discussion-expand]::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-star.svg") center / 20px 20px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-expanded {
    display: none !important;
    margin: 16px 0 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 18px !important;
    background: rgba(241, 244, 244, 0.82) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-thread-post.is-expanded
    .discussion-expanded {
    display: block !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .discussion-comment-box {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .empty-state {
    display: grid !important;
    min-height: 180px !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 22px !important;
    color: #7b8894 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    line-height: 20px !important;
    text-align: center !important;
  }

  /* Bottom fixed recorder dock */
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 70 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: min(390px, 100vw) !important;
    height: 104px !important;
    min-height: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -10px !important;
    height: 128px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.76) 32%, rgba(255, 255, 255, 0.94)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel::after {
    content: "" !important;
    position: absolute !important;
    left: 142px !important;
    bottom: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: 106px !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: rgba(23, 33, 47, 0.18) !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .timer {
    position: absolute !important;
    left: 38px !important;
    top: 42px !important;
    z-index: 3 !important;
    display: block !important;
    width: 62px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #202a36 !important;
    text-align: left !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .timer::before {
    content: "" !important;
    position: absolute !important;
    left: 2px !important;
    top: -21px !important;
    width: 18px !important;
    height: 18px !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-clock.svg") center / 18px 18px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #timerLabel {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    width: 62px !important;
    height: 18px !important;
    color: #202a36 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #timerValue {
    position: absolute !important;
    left: 0 !important;
    top: 20px !important;
    display: block !important;
    width: 62px !important;
    height: 24px !important;
    color: #202a36 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .wave {
    position: absolute !important;
    left: 50% !important;
    top: 14px !important;
    z-index: 1 !important;
    display: none !important;
    width: 132px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 38px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel.recording
    .wave {
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .wave
    span {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel.recording
    .wave::before {
    content: "" !important;
    display: block !important;
    width: 98px !important;
    height: 42px !important;
    background: linear-gradient(90deg, rgba(34, 211, 197, 0.44), rgba(34, 211, 197, 0.98), rgba(34, 211, 197, 0.44)) !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 98px 42px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 98px 42px no-repeat !important;
    animation: figmaMobileRecordWave 1.2s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .recorder-actions {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .recorder-actions
    button {
    position: absolute !important;
    display: grid !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    pointer-events: auto !important;
    letter-spacing: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #prevQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #nextQuestionButton,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-book-button {
    top: 30px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 22px !important;
    color: #4d5967 !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: none !important;
    font-size: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #prevQuestionButton {
    left: 106px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #nextQuestionButton {
    left: 256px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-book-button {
    left: 312px !important;
    border-radius: 16px !important;
    color: #4fa8c1 !important;
    background: rgba(234, 251, 255, 0.7) !important;
    border-color: rgba(184, 228, 239, 0.76) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #prevQuestionButton::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #nextQuestionButton::before,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-book-button::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: currentColor !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #prevQuestionButton::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-prev.svg") center / 24px 24px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #nextQuestionButton::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-next.svg") center / 24px 24px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-book-button::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-book.svg") center / 24px 24px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton {
    left: 160px !important;
    top: 14px !important;
    z-index: 4 !important;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton::after {
    content: "" !important;
    position: absolute !important;
    left: -18px !important;
    top: -4px !important;
    z-index: 0 !important;
    display: block !important;
    width: 112px !important;
    height: 112px !important;
    pointer-events: none !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-record-button-bg.svg") center / 112px 112px no-repeat !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton::before {
    content: "" !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-mic.svg") center / 32px 32px no-repeat !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel.recording
    #recordButton::before {
    width: 42px !important;
    height: 42px !important;
    background: #ffffff !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 42px 42px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 42px 42px no-repeat !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #submitButton {
    right: 18px !important;
    top: -26px !important;
    display: none !important;
    width: 118px !important;
    height: 34px !important;
    min-width: 118px !important;
    min-height: 34px !important;
    max-width: 118px !important;
    max-height: 34px !important;
    border: 1px solid rgba(34, 211, 197, 0.32) !important;
    border-radius: 17px !important;
    color: #087d70 !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 12px 22px -16px rgba(7, 125, 112, 0.42) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 16px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #submitButton:not(:disabled) {
    display: grid !important;
  }

  @keyframes figmaMobileRecordWave {
    0%,
    100% {
      opacity: 0.62;
      transform: scaleX(0.86) scaleY(0.82);
    }
    50% {
      opacity: 1;
      transform: scaleX(1.04) scaleY(1);
    }
  }
}

/* Final mobile dock polish: saved audio uses the center primary button as submit. */
@media (max-width: 760px) {
  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton {
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"]) #recordButton::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 0 !important;
    display: block !important;
    width: 78px !important;
    height: 78px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 44%),
      linear-gradient(180deg, #36d7cc 0%, #20cfc1 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"]) #recordButton::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 2 !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    transform: translate(-50%, -50%) !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-mic.svg") center / 34px 34px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #submitButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #submitButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #submitButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #submitButton {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton {
    left: 50% !important;
    top: 30px !important;
    z-index: 5 !important;
    display: grid !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
    border: 1px solid rgba(34, 211, 197, 0.38) !important;
    border-radius: 26px !important;
    color: #087d70 !important;
    background:
      radial-gradient(circle at 28% 10%, rgba(255, 255, 255, 0.96), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(229, 255, 250, 0.78)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 14px 28px -22px rgba(10, 142, 126, 0.32) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton {
    color: #5d6c7a !important;
    border-color: rgba(169, 219, 222, 0.7) !important;
    background:
      radial-gradient(circle at 28% 10%, rgba(255, 255, 255, 0.94), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(239, 249, 249, 0.76)) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #prevQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #prevQuestionButton {
    left: calc(50% - 118px) !important;
    top: 34px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #nextQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #nextQuestionButton {
    left: calc(50% + 79px) !important;
    top: 34px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) .figma-mobile-book-button,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) .figma-mobile-book-button {
    left: calc(50% + 134px) !important;
    top: 34px !important;
  }
  /* v2 mobile discussion usability: clear the demo toolbar shell, protect content from the dock, and provide a functional filter sheet. */
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma-mobile-filter-button.has-active-filter::after { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #0aa892; box-shadow: 0 0 0 3px rgba(10,168,146,.12); } body.practice-showcase-filter-open { overflow: hidden; } .practice-showcase-filter-backdrop { position: fixed; inset: 0; z-index: 1300; display: grid; align-items: end; padding: 0; background: rgba(22,31,38,.24); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .practice-showcase-filter-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .practice-showcase-filter-sheet { box-sizing: border-box; width: min(390px,100vw); max-height: min(72dvh,620px); margin: 0 auto; padding: 18px 18px calc(18px + env(safe-area-inset-bottom,0px)); overflow: auto; border: 1px solid rgba(255,255,255,.9); border-bottom: 0; border-radius: 28px 28px 0 0; color: #17212d; background: rgba(255,255,255,.96); box-shadow: 0 -20px 54px rgba(35,52,58,.16); transform: translateY(24px); transition: transform 200ms ease; } .practice-showcase-filter-backdrop.is-open .practice-showcase-filter-sheet { transform: translateY(0); } .practice-showcase-filter-sheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .practice-showcase-filter-sheet header small { display: block; color: #7a8792; font-size: 11px; font-weight: 750; line-height: 16px; } .practice-showcase-filter-sheet header h3 { margin: 2px 0 0; font-size: 21px; font-weight: 900; line-height: 28px; } .practice-showcase-filter-sheet header > button { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid rgba(188,203,207,.55); border-radius: 50%; color: #60707c; background: #fff; font: 700 22px/1 system-ui; }
  .practice-showcase-filter-sheet fieldset { margin: 0 0 18px; padding: 0; border: 0; } .practice-showcase-filter-sheet legend { color: #44525e; font-size: 13px; font-weight: 850; line-height: 18px; } .practice-showcase-filter-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 10px; } .practice-showcase-filter-options label { position: relative; min-width: 0; } .practice-showcase-filter-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .practice-showcase-filter-options span { display: grid; box-sizing: border-box; min-height: 44px; padding: 0 8px; place-items: center; border: 1px solid rgba(188,203,207,.52); border-radius: 15px; color: #687682; background: rgba(247,250,249,.92); font-size: 12px; font-weight: 780; line-height: 16px; text-align: center; } .practice-showcase-filter-options input:checked + span { border-color: rgba(10,168,146,.46); color: #087d70; background: rgba(224,252,246,.9); box-shadow: inset 0 0 0 1px rgba(10,168,146,.08); } .practice-showcase-filter-options input:focus-visible + span { outline: 2px solid rgba(10,155,138,.9); outline-offset: 2px; }
  .practice-showcase-filter-sheet footer { display: grid; grid-template-columns: .82fr 1.18fr; gap: 10px; margin-top: 4px; } .practice-showcase-filter-sheet footer button { min-height: 46px; padding: 0 16px; border: 1px solid rgba(188,203,207,.6); border-radius: 23px; color: #5d6b76; background: #fff; font: 850 14px/20px system-ui; } .practice-showcase-filter-sheet footer button.is-primary { border-color: rgba(8,152,135,.18); color: #fff; background: linear-gradient(180deg,#17bba7,#0ba18f); box-shadow: 0 12px 24px -18px rgba(4,118,103,.76); }
}

/* Final mobile RA text/player repair. Keep the Figma shell, but let content flow. */
@media (max-width: 760px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 72px 21px 22px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice.speech-mode
    .question-card.active-question {
    min-height: 456px !important;
    padding-top: 96px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools[hidden] {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    > button:not(#playRaDemoButton):not(#flowPracticeQuestionButton) {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    :is(#playRaDemoButton, #flowPracticeQuestionButton) {
    display: inline-flex !important;
    width: auto !important;
    min-width: 126px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 20px !important;
    color: #159f90 !important;
    background: rgba(255, 255, 255, 0.66) !important;
    box-shadow: 0 12px 22px -18px rgba(10, 142, 126, 0.45) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    #flowPracticeQuestionButton {
    border-color: rgba(17, 174, 150, 0.3) !important;
    color: #0b9683 !important;
    background: linear-gradient(145deg, rgba(235, 255, 250, 0.9), rgba(216, 249, 242, 0.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.84),
      0 12px 24px -20px rgba(8, 143, 123, 0.38) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    #flowPracticeQuestionButton.is-hidden {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    #playRaDemoButton[hidden] {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    #playRaDemoButton.active {
    border-color: rgba(34, 211, 197, 0.38) !important;
    background: rgba(226, 255, 250, 0.76) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-title-line
    h3 {
    left: 21px !important;
    width: calc(100% - 42px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .answer-hint-bar.ra-mode-inline {
    right: 17px !important;
    top: 13px !important;
    width: 144px !important;
    height: 34px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control {
    width: 144px !important;
    height: 34px !important;
    gap: 4px !important;
    padding: 4px !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control
    button {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice:not(.speech-mode):not(.fill-mode)
    .question-card.active-question
    #questionText {
    max-height: min(38dvh, 320px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265[data-active-question-type="HIW"]
    .question-card.active-question
    #questionText,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice.fill-mode
    .question-card.active-question
    #questionText {
    max-height: min(58dvh, 480px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-text-line {
    display: inline !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font: inherit !important;
    line-height: inherit !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-word-select,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-selection-gap {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player:not(.is-hidden) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    order: 20 !important;
    flex: 0 0 58px !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 14px 0 0 !important;
    overflow: visible !important;
    border-radius: 29px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player.is-hidden {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    .ra-demo-player-head {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoPlayerTitle {
    left: 60px !important;
    top: 11px !important;
    width: calc(100% - 160px) !important;
    height: 18px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoDuration {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    font-size: 11px !important;
    line-height: 18px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoDuration::before {
    content: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    .ra-demo-time-readout {
    position: absolute !important;
    right: 18px !important;
    top: 8px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 78px !important;
    height: 18px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    color: #718079 !important;
    font-size: 11px !important;
    font-weight: 720 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    .ra-demo-time-readout
    time,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    .ra-demo-time-readout
    i {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
    font-style: normal !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoProgress {
    position: absolute !important;
    left: 60px !important;
    top: 34px !important;
    width: calc(100% - 84px) !important;
    height: 12px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoProgress::-webkit-slider-runnable-track {
    height: 5px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #22d3c5 0 var(--demo-progress, 0%), rgba(220, 235, 232, 0.92) var(--demo-progress, 0%) 100%) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoProgress::-webkit-slider-thumb {
    width: 12px !important;
    height: 12px !important;
    margin-top: -4px !important;
    border: 2px solid #ffffff !important;
    background: #22d3c5 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoToggleButton {
    position: absolute !important;
    left: 14px !important;
    top: 11px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42), transparent 38%),
      linear-gradient(180deg, #35d9cf 0%, #20cfc1 100%) !important;
    box-shadow: 0 10px 20px -14px rgba(11, 158, 145, 0.45) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoToggleButton::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    transform: translate(-36%, -50%) !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-left: 11px solid #ffffff !important;
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
  }
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoToggleButton.is-playing::before {
    width: 13px !important;
    height: 15px !important;
    transform: translate(-50%, -50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #ffffff 0 4px, transparent 4px 9px, #ffffff 9px 13px) !important;
  }
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-demo-text {
    display: block !important;
    width: 100% !important;
  }
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-demo-reading-copy {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.72 !important;
  }
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-demo-legend {
    gap: 6px !important;
    margin-top: 14px !important;
    font-size: 11px !important;
  }
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-demo-legend-item {
    min-height: 24px !important;
    padding: 0 8px !important;
  }
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .figma-mobile-passed-button {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: inline-flex !important;
    align-self: center !important;
    width: auto !important;
    min-width: 146px !important;
    height: 34px !important;
    margin: 16px auto 0 !important;
    padding: 0 16px !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    border-radius: 17px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }
}

@media (max-width: 374px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-discussion {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #prevQuestionButton {
    left: calc(50% - 89px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recordButton {
    left: calc(50% - 38px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #nextQuestionButton {
    left: calc(50% + 60px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .figma-mobile-book-button {
    left: calc(100% - 56px) !important;
  }
}

/* Higher-specificity cleanup for legacy RA mobile rules loaded on the same route. */
@media (max-width: 760px) {
  html
    body.view-practice.practice-answer-detail-active.figma-answer-265-active,
  html
    body.view-practice.figma-answer-265-active {
    width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background-color: #fffdf7 !important;
    background-image:
      radial-gradient(520px 420px at 8% 0%, rgba(255, 222, 76, 0.5) 0 18%, transparent 42%),
      radial-gradient(520px 520px at 92% 18%, rgba(255, 255, 255, 0.66) 0 18%, transparent 46%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 210px, #fff0aa 430px, #fff8dd 680px, #fffdf7 940px, #ffffff 1200px) !important;
  }

  html
    body.view-practice.figma-answer-265-active
    .app-shell,
  html
    body.view-practice.figma-answer-265-active
    .app-shell
    > .main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: transparent !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265 {
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    min-height: 1420px !important;
    margin: 0 auto !important;
    padding: 0 0 calc(128px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265::before {
    content: none !important;
    position: absolute !important;
    left: 24px !important;
    top: 17px !important;
    z-index: 8 !important;
    display: none !important;
    width: 56px !important;
    height: 18px !important;
    color: #18212f !important;
    background: transparent !important;
    filter: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    pointer-events: none !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265::after {
    content: none !important;
    position: absolute !important;
    left: 318px !important;
    top: 20px !important;
    z-index: 8 !important;
    display: none !important;
    width: 58px !important;
    height: 16px !important;
    pointer-events: none !important;
    background:
      linear-gradient(#1f2937, #1f2937) 0 6px / 3px 7px no-repeat,
      linear-gradient(#1f2937, #1f2937) 6px 3px / 3px 10px no-repeat,
      linear-gradient(#1f2937, #1f2937) 12px 0 / 3px 13px no-repeat,
      linear-gradient(rgba(96, 112, 122, 0.7), rgba(96, 112, 122, 0.7)) 34px 2px / 23px 12px no-repeat,
      linear-gradient(rgba(62, 214, 194, 0.95), rgba(62, 214, 194, 0.95)) 37px 5px / 14px 6px no-repeat !important;
    border-radius: 2px !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-dashboard-layout,
  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel,
  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-workbench,
  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .answer-stage {
    transform: none !important;
    contain: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator {
    top: 0 !important;
    margin: 45px 18px 11px !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question {
    margin: 0 18px 12px !important;
    padding: 0 !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265[data-active-question-type="RA"]
    .question-card.active-question
    #questionText {
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    color: #101820 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 27px !important;
    letter-spacing: 0 !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-title-line
    .active-question-code,
  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-title-line
    h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player {
    left: 21px !important;
    top: 315px !important;
    width: 310px !important;
    max-width: calc(100% - 44px) !important;
    height: 50px !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .recorder-actions
    #prevQuestionButton,
  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .recorder-actions
    #nextQuestionButton,
  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .recorder-actions
    .figma-mobile-book-button {
    width: 44px !important;
    max-width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    min-height: 44px !important;
    transform: none !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .recorder-actions
    #prevQuestionButton {
    left: 106px !important;
    right: auto !important;
    top: 30px !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .recorder-actions
    #nextQuestionButton {
    left: 256px !important;
    right: auto !important;
    top: 30px !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .recorder-actions
    .figma-mobile-book-button {
    left: 312px !important;
    right: auto !important;
    top: 30px !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel
    .recorder-actions
    #recordButton {
    left: 160px !important;
    right: auto !important;
    top: 14px !important;
    width: 76px !important;
    max-width: 76px !important;
    min-width: 76px !important;
    height: 76px !important;
    max-height: 76px !important;
    min-height: 76px !important;
    transform: none !important;
  }

  html
    body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #recorderPanel {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    width: min(390px, 100vw) !important;
    height: 104px !important;
    transform: translateX(-50%) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 90 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: min(390px, 100vw) !important;
    height: 104px !important;
    min-height: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -10px !important;
    height: 128px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.76) 32%, rgba(255, 255, 255, 0.94)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel::after {
    content: "" !important;
    position: absolute !important;
    left: 142px !important;
    bottom: 0 !important;
    z-index: 2 !important;
    width: 106px !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: rgba(23, 33, 47, 0.18) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .timer {
    position: absolute !important;
    left: 38px !important;
    top: 42px !important;
    z-index: 3 !important;
    display: block !important;
    width: 62px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #202a36 !important;
    text-align: left !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .timer::before {
    content: "" !important;
    position: absolute !important;
    left: 2px !important;
    top: -21px !important;
    width: 18px !important;
    height: 18px !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-clock.svg") center / 18px 18px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #timerLabel {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    width: 62px !important;
    height: 18px !important;
    color: #202a36 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #timerValue {
    position: absolute !important;
    left: 0 !important;
    top: 20px !important;
    display: block !important;
    width: 62px !important;
    height: 24px !important;
    color: #202a36 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .wave {
    position: absolute !important;
    left: 50% !important;
    top: 14px !important;
    z-index: 1 !important;
    display: none !important;
    width: 132px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 38px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.recording .wave {
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .wave span {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.recording .wave::before {
    content: "" !important;
    display: block !important;
    width: 98px !important;
    height: 42px !important;
    background: linear-gradient(90deg, rgba(34, 211, 197, 0.44), rgba(34, 211, 197, 0.98), rgba(34, 211, 197, 0.44)) !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 98px 42px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 98px 42px no-repeat !important;
    animation: figmaMobileRecordWave 1.2s ease-in-out infinite !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .recorder-actions {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .recorder-actions button {
    position: absolute !important;
    display: grid !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    pointer-events: auto !important;
    letter-spacing: 0 !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #prevQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel #nextQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel .figma-mobile-book-button {
    top: 30px !important;
    width: 44px !important;
    max-width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    min-height: 44px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 22px !important;
    color: #4d5967 !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #prevQuestionButton {
    left: 106px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #nextQuestionButton {
    left: 256px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .figma-mobile-book-button {
    left: 312px !important;
    border-radius: 16px !important;
    color: #4fa8c1 !important;
    background: rgba(234, 251, 255, 0.7) !important;
    border-color: rgba(184, 228, 239, 0.76) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #prevQuestionButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel #nextQuestionButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel .figma-mobile-book-button::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: currentColor !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #prevQuestionButton::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-prev.svg") center / 24px 24px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #nextQuestionButton::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-next.svg") center / 24px 24px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .figma-mobile-book-button::before {
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-book.svg") center / 24px 24px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton {
    left: 160px !important;
    top: 14px !important;
    z-index: 4 !important;
    width: 76px !important;
    max-width: 76px !important;
    min-width: 76px !important;
    height: 76px !important;
    max-height: 76px !important;
    min-height: 76px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton::before {
    content: "" !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-mic.svg") center / 32px 32px no-repeat !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton::after {
    content: "" !important;
    position: absolute !important;
    left: -18px !important;
    top: -4px !important;
    z-index: 0 !important;
    display: block !important;
    width: 112px !important;
    height: 112px !important;
    pointer-events: none !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-record-button-bg.svg") center / 112px 112px no-repeat !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.recording #recordButton::before {
    width: 42px !important;
    height: 42px !important;
    background: #ffffff !important;
    -webkit-mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 42px 42px no-repeat !important;
    mask: url("./assets/figma-answer-265/sound-wave-line-figma.svg") center / 42px 42px no-repeat !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #submitButton {
    right: 18px !important;
    top: -26px !important;
    display: none !important;
    box-sizing: border-box !important;
    width: 118px !important;
    height: 34px !important;
    min-width: 118px !important;
    min-height: 34px !important;
    max-width: 118px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(34, 211, 197, 0.32) !important;
    border-radius: 17px !important;
    color: #087d70 !important;
    background: rgba(255, 255, 255, 0.84) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 16px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #submitButton:not(:disabled) {
    display: grid !important;
  }
}

/* v2 mobile recorder dock alignment: center the mic and keep action buttons symmetric. */
@media (max-width: 760px) {
  html body.view-practice.figma-answer-265-active > #recorderPanel {
    width: min(390px, 100vw) !important;
    height: 112px !important;
    min-height: 112px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel::before {
    height: 140px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel::after {
    left: 50% !important;
    bottom: 2px !important;
    transform: translateX(-50%) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .timer {
    left: max(22px, calc(50% - 180px)) !important;
    top: 44px !important;
    width: 74px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #timerLabel,
  html body.view-practice.figma-answer-265-active > #recorderPanel #timerValue {
    width: 74px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #timerValue {
    font-size: 20px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton {
    left: 50% !important;
    top: 16px !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    transform: translateX(-50%) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton::before {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton::after {
    left: 50% !important;
    top: 50% !important;
    width: 114px !important;
    height: 114px !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #prevQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel #nextQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel .figma-mobile-book-button {
    top: 34px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #prevQuestionButton {
    left: calc(50% - 112px) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #nextQuestionButton {
    left: calc(50% + 68px) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel .figma-mobile-book-button {
    left: calc(50% + 124px) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel #submitButton {
    left: 50% !important;
    right: auto !important;
    top: -30px !important;
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    transform: translateX(-50%) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 26% 12%, rgba(255, 255, 255, 0.96), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(231, 255, 249, 0.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 14px 28px -22px rgba(10, 142, 126, 0.32) !important;
  }
}

/* v3 mobile saved-state alignment: keep the recorded dock on the same center axis. */
@media (max-width: 760px) {
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) {
    left: 50% !important;
    right: auto !important;
    width: min(390px, 100vw) !important;
    height: 112px !important;
    min-height: 112px !important;
    transform: translateX(-50%) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) .recorder-actions,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) .recorder-actions,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) .recorder-actions,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) .recorder-actions {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 16px !important;
    z-index: 4 !important;
    display: grid !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 1 !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    transform: translate(-50%, -50%) !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-mic.svg") center / 32px 32px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 0 !important;
    display: block !important;
    width: 114px !important;
    height: 114px !important;
    transform: translate(-50%, -50%) !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-record-button-bg.svg") center / 114px 114px no-repeat !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #submitButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #submitButton {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: -30px !important;
    z-index: 5 !important;
    display: grid !important;
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
    border: 1px solid rgba(34, 211, 197, 0.36) !important;
    border-radius: 20px !important;
    color: #087d70 !important;
    background:
      radial-gradient(circle at 26% 12%, rgba(255, 255, 255, 0.96), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(231, 255, 249, 0.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 14px 28px -22px rgba(10, 142, 126, 0.32) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #prevQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #prevQuestionButton {
    left: calc(50% - 112px) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #nextQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #nextQuestionButton {
    left: calc(50% + 68px) !important;
  }

  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) .figma-mobile-book-button,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) .figma-mobile-book-button {
    left: calc(50% + 124px) !important;
  }
}

/* v4 mobile top navigator: remove the floating pill and keep a clean three-zone header. */
@media (max-width: 760px) {
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator {
    position: relative !important;
    display: block !important;
    height: 72px !important;
    min-height: 72px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step],
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .figma265-navigator-mode {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .current-question-pill {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .mobile-question-list-back,
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .figma-mobile-bookmark-button {
    position: absolute !important;
    top: 15px !important;
    z-index: 3 !important;
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .mobile-question-list-back {
    left: 11px !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .figma-mobile-bookmark-button {
    right: 11px !important;
    left: auto !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .figma-mobile-top-title {
    position: absolute !important;
    left: 50% !important;
    top: 13px !important;
    z-index: 2 !important;
    display: block !important;
    width: calc(100% - 116px) !important;
    max-width: 230px !important;
    height: 25px !important;
    transform: translateX(-50%) !important;
    color: #101820 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 25px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .figma-mobile-top-subtitle {
    position: absolute !important;
    left: 50% !important;
    top: 39px !important;
    z-index: 2 !important;
    display: block !important;
    width: calc(100% - 116px) !important;
    max-width: 230px !important;
    height: 17px !important;
    transform: translateX(-50%) !important;
    color: #657383 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 17px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* v6 Figma recheck: softer page color and stronger top-nav collision guard. */
@media (max-width: 760px) {
  html:has(body.view-practice.figma-answer-265-active),
  html body.view-practice.figma-answer-265-active {
    background:
      radial-gradient(520px 420px at 8% 0%, rgba(255, 222, 76, 0.5) 0 18%, transparent 42%),
      radial-gradient(520px 520px at 92% 18%, rgba(255, 255, 255, 0.66) 0 18%, transparent 46%),
      linear-gradient(180deg, #ffd11a 0px, #ffe36d 210px, #fff0aa 430px, #fff8dd 680px, #fffdf7 940px, #ffffff 1200px) !important;
    background-attachment: scroll !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator [data-nav-step],
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .figma265-navigator-mode,
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator .current-question-pill {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .practice-navigator {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.74), rgba(255, 252, 240, 0.48)) !important;
  }
}

/* Final override: mobile recording button uses live input-volume bars only. */
@media (max-width: 760px) {
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #recorderPanel.recording .wave,
  html body.view-practice.figma-answer-265-active > #recorderPanel.recording .wave {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #recorderPanel.recording .wave::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel.recording .wave::before {
    content: none !important;
    display: none !important;
    animation: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #recorderPanel #recordButton .speech-record-bars,
  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton .speech-record-bars {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 2 !important;
    display: none !important;
    width: 46px !important;
    height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #recorderPanel.recording #recordButton .speech-record-bars,
  html body.view-practice.figma-answer-265-active > #recorderPanel.recording #recordButton .speech-record-bars {
    display: flex !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #recorderPanel #recordButton .speech-record-bars i,
  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton .speech-record-bars i {
    display: block !important;
    width: 4px !important;
    min-width: 4px !important;
    max-width: 4px !important;
    height: var(--speech-record-bar-height, 12px) !important;
    min-height: 9px !important;
    max-height: 34px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: none !important;
    opacity: var(--speech-record-bar-opacity, 0.72) !important;
    transform: scaleY(var(--speech-record-bar-scale, 0.9)) translateZ(0) !important;
    transform-origin: center !important;
    transition:
      height 72ms linear,
      opacity 72ms linear,
      transform 72ms linear !important;
    will-change: height, opacity, transform !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #recorderPanel.recording #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel.recording #recordButton::before {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: none !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #recorderPanel.recording #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel.recording #recordButton::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 0 !important;
    display: block !important;
    width: 78px !important;
    height: 78px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 44%),
      linear-gradient(180deg, #36d7cc 0%, #20cfc1 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }
}

/* Late mobile RA text/player repair. This sits after the Figma recheck blocks. */
@media (max-width: 760px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools[hidden] {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    > button:not(#playRaDemoButton):not(#flowPracticeQuestionButton) {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    :is(#playRaDemoButton, #flowPracticeQuestionButton) {
    display: inline-flex !important;
    width: auto !important;
    min-width: 126px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 20px !important;
    color: #159f90 !important;
    background: rgba(255, 255, 255, 0.66) !important;
    box-shadow: 0 12px 22px -18px rgba(10, 142, 126, 0.45) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    #flowPracticeQuestionButton {
    border-color: rgba(17, 174, 150, 0.3) !important;
    color: #0b9683 !important;
    background: linear-gradient(145deg, rgba(235, 255, 250, 0.9), rgba(216, 249, 242, 0.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.84),
      0 12px 24px -20px rgba(8, 143, 123, 0.38) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    #flowPracticeQuestionButton.is-hidden {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .question-tools
    #playRaDemoButton.active {
    border-color: rgba(34, 211, 197, 0.38) !important;
    background: rgba(226, 255, 250, 0.76) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 72px 21px 22px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice.speech-mode
    .question-card.active-question {
    min-height: 456px !important;
    padding-top: 96px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-title-line
    h3 {
    left: 21px !important;
    width: calc(100% - 42px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .answer-hint-bar.ra-mode-inline {
    right: 17px !important;
    top: 13px !important;
    width: 144px !important;
    height: 34px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control {
    width: 144px !important;
    height: 34px !important;
    gap: 4px !important;
    padding: 4px !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .ra-mode-control
    button {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice:not(.speech-mode):not(.fill-mode)
    .question-card.active-question
    #questionText {
    max-height: min(38dvh, 320px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265[data-active-question-type="HIW"]
    .question-card.active-question
    #questionText,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice.fill-mode
    .question-card.active-question
    #questionText {
    max-height: min(58dvh, 480px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-text-line {
    display: inline !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font: inherit !important;
    line-height: inherit !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    order: 20 !important;
    flex: 0 0 58px !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 14px 0 0 !important;
    overflow: visible !important;
    border-radius: 29px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player.is-hidden {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    .ra-demo-player-head {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoPlayerTitle {
    left: 60px !important;
    top: 11px !important;
    width: calc(100% - 160px) !important;
    height: 18px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoDuration {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    font-size: 11px !important;
    line-height: 18px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoDuration::before {
    content: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    .ra-demo-time-readout {
    position: absolute !important;
    right: 18px !important;
    top: 8px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 78px !important;
    height: 18px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    color: #718079 !important;
    font-size: 11px !important;
    font-weight: 720 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    .ra-demo-time-readout
    time,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    .ra-demo-time-readout
    i {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
    font-style: normal !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoProgress {
    position: absolute !important;
    left: 60px !important;
    top: 34px !important;
    width: calc(100% - 84px) !important;
    height: 12px !important;
    margin: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoProgress::-webkit-slider-runnable-track {
    height: 5px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #22d3c5 0 var(--demo-progress, 0%), rgba(220, 235, 232, 0.92) var(--demo-progress, 0%) 100%) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoProgress::-webkit-slider-thumb {
    width: 12px !important;
    height: 12px !important;
    margin-top: -4px !important;
    border: 2px solid #ffffff !important;
    background: #22d3c5 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoToggleButton {
    position: absolute !important;
    left: 14px !important;
    top: 11px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42), transparent 38%),
      linear-gradient(180deg, #35d9cf 0%, #20cfc1 100%) !important;
    box-shadow: 0 10px 20px -14px rgba(11, 158, 145, 0.45) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoToggleButton::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    transform: translate(-36%, -50%) !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-left: 11px solid #ffffff !important;
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .ra-demo-player
    #raDemoToggleButton.is-playing::before {
    width: 13px !important;
    height: 15px !important;
    transform: translate(-50%, -50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #ffffff 0 4px, transparent 4px 9px, #ffffff 9px 13px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-demo-text {
    display: block !important;
    width: 100% !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-demo-reading-copy {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.72 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-demo-legend {
    gap: 6px !important;
    margin-top: 14px !important;
    font-size: 11px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    #questionText
    .ra-demo-legend-item {
    min-height: 24px !important;
    padding: 0 8px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .figma-mobile-passed-button {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: inline-flex !important;
    align-self: center !important;
    width: auto !important;
    min-width: 146px !important;
    height: 34px !important;
    margin: 16px auto 0 !important;
    padding: 0 16px !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    border-radius: 17px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }
}
/* Final saved-state override: the center mic button becomes submit. */
@media (max-width: 760px) {
  html body.view-practice.figma-answer-265-active > #recorderPanel #recordButton {
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
  }
  html body.view-practice.figma-answer-265-active > #recorderPanel:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"]) #recordButton::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 0 !important;
    display: block !important;
    width: 78px !important;
    height: 78px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 44%),
      linear-gradient(180deg, #36d7cc 0%, #20cfc1 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }
  html body.view-practice.figma-answer-265-active > #recorderPanel:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"]) #recordButton::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 2 !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    transform: translate(-50%, -50%) !important;
    background: url("./assets/figma-answer-265/figma-mobile/figma-icon-mic.svg") center / 34px 34px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #submitButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #submitButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #submitButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #submitButton:not(:disabled),
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #submitButton {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton {
    left: 50% !important;
    top: 30px !important;
    z-index: 5 !important;
    display: grid !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
    border: 1px solid rgba(34, 211, 197, 0.38) !important;
    border-radius: 26px !important;
    color: #087d70 !important;
    background:
      radial-gradient(circle at 28% 10%, rgba(255, 255, 255, 0.96), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(229, 255, 250, 0.78)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 14px 28px -22px rgba(10, 142, 126, 0.32) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton {
    color: #5d6c7a !important;
    border-color: rgba(169, 219, 222, 0.7) !important;
    background:
      radial-gradient(circle at 28% 10%, rgba(255, 255, 255, 0.94), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(239, 249, 249, 0.76)) !important;
  }
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton::before,
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitting"]:not(.recording) #recordButton::after,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="submitted"]:not(.recording) #recordButton::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
  }
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #prevQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #prevQuestionButton {
    left: calc(50% - 118px) !important;
    top: 34px !important;
  }
  html body.view-practice.figma-answer-265-active > #recorderPanel.has-recorded-audio:not(.recording) #nextQuestionButton,
  html body.view-practice.figma-answer-265-active > #recorderPanel[data-mic-state="ready"]:not(.recording) #nextQuestionButton {
    left: calc(50% + 79px) !important;
    top: 34px !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) { position: static !important; inset: auto !important; z-index: 3 !important; display: block !important; box-sizing: border-box !important; grid-area: var(--answer-actions-grid-area, auto / 1 / auto / -1) !important; width: calc(100% + 32px) !important; max-width: none !important; height: 76px !important; min-height: 76px !important; margin: 2px -16px -16px !important; padding: 0 16px !important; overflow: visible !important; transform: none !important; border: 0 !important; border-top: 1px solid rgba(219, 232, 229, 0.74) !important; border-radius: 0 0 25px 25px !important; background: linear-gradient(180deg, rgba(249, 253, 252, 0.2), rgba(241, 250, 248, 0.72)) !important; box-shadow: none !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])::before { content: none !important; display: none !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) :is(.timer, .wave, #recordButton, .figma-mobile-book-button) { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) .recorder-actions { position: static !important; inset: auto !important; z-index: 3 !important; display: grid !important; grid-template-columns: 42px minmax(0, 190px) 42px !important; box-sizing: border-box !important; width: 100% !important; height: 76px !important; min-height: 76px !important; margin: 0 !important; padding: 12px 0 14px !important; place-content: center !important; align-items: center !important; justify-items: center !important; gap: 10px !important; pointer-events: auto !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) .recorder-actions :is(.hiw-start-control, .lifib-start-control) { position: static !important; inset: auto !important; grid-column: 2 !important; grid-row: 1 !important; z-index: 4 !important; display: inline-flex !important; width: min(190px, 100%) !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 22px !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(6, 152, 132, 0.22) !important; border-radius: 24px !important; color: #ffffff !important; background: linear-gradient(180deg, #18bba6, #079b88) !important; box-shadow: 0 14px 28px -20px rgba(4, 118, 103, 0.68) !important; font-size: 14px !important; font-weight: 900 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) .recorder-actions :is(.hiw-start-control, .lifib-start-control).is-started { display: none !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) .recorder-actions :is(.hiw-start-control, .lifib-start-control):not(.is-started) ~ #submitButton { display: none !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) .recorder-actions :is(#prevQuestionButton, #nextQuestionButton, #submitButton) { position: static !important; inset: auto !important; display: inline-flex !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) .recorder-actions :is(#prevQuestionButton, #nextQuestionButton) { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; border-radius: 21px !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) #prevQuestionButton { grid-column: 1 !important; grid-row: 1 !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) #nextQuestionButton { grid-column: 3 !important; grid-row: 1 !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) #submitButton { grid-column: 2 !important; grid-row: 1 !important; width: min(190px, 100%) !important; min-width: 0 !important; max-width: 190px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; border: 1px solid rgba(6, 152, 132, 0.22) !important; border-radius: 24px !important; color: #ffffff !important; background: linear-gradient(180deg, #18bba6, #079b88) !important; box-shadow: 0 14px 28px -20px rgba(4, 118, 103, 0.68) !important; font-size: 14px !important; font-weight: 900 !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-workspace > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) #submitButton:disabled { color: #718079 !important; background: rgba(239, 245, 244, 0.94) !important; box-shadow: none !important; opacity: 0.72 !important; cursor: not-allowed !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-stage.integrated-mobile-actions:has(> #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])) > .answer-workspace { margin-bottom: 0 !important; border-radius: 26px 26px 0 0 !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-stage.integrated-mobile-actions > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) { position: static !important; inset: auto !important; display: block !important; box-sizing: border-box !important; width: calc(100% - 36px) !important; max-width: none !important; height: 76px !important; min-height: 76px !important; margin: 0 18px 16px !important; padding: 0 16px !important; transform: none !important; border: 1px solid rgba(255, 255, 255, 0.86) !important; border-top: 1px solid rgba(219, 232, 229, 0.74) !important; border-radius: 0 0 26px 26px !important; background: linear-gradient(180deg, rgba(249, 253, 252, 0.2), rgba(241, 250, 248, 0.72)) !important; box-shadow: 0 18px 38px -30px rgba(31, 54, 66, 0.24) !important; }
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .answer-stage.integrated-mobile-actions > #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) .recorder-actions { position: static !important; inset: auto !important; display: grid !important; grid-template-columns: 42px minmax(0, 190px) 42px !important; width: 100% !important; height: 76px !important; min-height: 76px !important; margin: 0 !important; padding: 12px 0 14px !important; place-content: center !important; align-items: center !important; justify-items: center !important; gap: 10px !important; }
}

/* Tablet landscape compact shell: keep the Figma answer page, but fit it into 981-1180px. */
@media (min-width: 981px) and (max-width: 1180px) {
  html body.view-practice.figma-answer-265-active {
    --figma265-compact-page: calc(100vw - 52px);
    --figma265-compact-feedback: clamp(296px, 30vw, 310px);
    --figma265-compact-gap: 12px; --figma265-compact-list: 170px; --figma265-compact-resizer: 10px;
    --figma265-compact-workbench: min(650px, calc(var(--figma265-compact-page) - var(--figma265-compact-gap) - var(--figma265-compact-feedback)));
    --figma265-compact-answer: calc(var(--figma265-compact-workbench) - var(--figma265-compact-list) - var(--figma265-compact-resizer));
    --ans265-recorder-height: 188px;
    --ans265-recorder-grid-rows: 28px 54px 68px;
    --ans265-recorder-gap: 6px;
    --ans265-recorder-padding: 10px 20px;
    --ans265-recorder-saved-height: 188px;
    --ans265-recorder-saved-padding: 16px 24px;
    --ans265-record-button-size: 60px;
    --ans265-record-button-art-size: 104px;
    --ans265-record-button-art-y: -12px;
    --ans265-question-finder-width: 150px;
    --ans265-question-list-width: 158px;
    --ans265-question-row-height: 72px;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar {
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 24px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand {
    width: 370px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .brand-copy strong {
    width: 116px !important;
    font-size: 26px !important;
    line-height: 36px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker {
    left: 192px !important;
    width: 174px !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .exam-type-picker select {
    padding-left: 18px !important;
    padding-right: 46px !important;
    font-size: 15px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-list {
    left: 388px !important;
    gap: 8px !important;
    width: auto !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link {
    width: 74px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link .icon {
    left: 10px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .nav-link > span:last-child {
    left: 34px !important;
    width: 34px !important;
    font-size: 12px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card {
    left: auto !important;
    right: 12px !important;
    width: 178px !important;
  }

  html body.view-practice.figma-answer-265-active .sidebar .sidebar-user-card span {
    width: 82px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 {
    width: calc(100vw - 52px) !important;
    max-width: calc(100vw - 52px) !important;
    margin-top: 112px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-hero {
    height: 88px !important;
    min-height: 88px !important;
    margin-bottom: 16px !important;
    padding: 18px 22px !important;
    border-radius: 26px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-copy h2 {
    font-size: 30px !important;
    line-height: 36px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-detail-copy > p:not(.eyebrow) {
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-dashboard-layout {
    grid-template-columns: minmax(0, var(--figma265-compact-workbench)) var(--figma265-compact-gap) minmax(296px, var(--figma265-compact-feedback)) !important;
    justify-content: center !important;
    min-height: 900px !important;
    overflow: visible !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-workbench {
    grid-template-columns: var(--figma265-compact-list) var(--figma265-compact-resizer) minmax(0, var(--figma265-compact-answer)) !important;
    width: var(--figma265-compact-workbench) !important;
    min-height: 900px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .workbench-resizer,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-resizer {
    width: 10px !important;
    min-width: 10px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-browser {
    width: 170px !important;
    height: 900px !important;
    max-height: calc(100dvh - 132px) !important;
    padding: 16px 10px !important;
    border-radius: 26px !important;
    top: 92px !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-browser-head {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    height: 34px !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 #questionListTitle {
    position: static !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 17px !important;
    line-height: 22px !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma265-list-count {
    position: static !important;
    width: auto !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .figma265-filter-head {
    position: static !important;
    width: 44px !important;
    min-width: 44px !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-finder {
    left: 10px !important;
    width: 150px !important;
  }

  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-finder .search-field,
  html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-finder .figma265-filter-summary {
    left: auto !important;
    width: 100% !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-list {
    left: 10px !important;
    right: auto !important;
    width: 158px !important;
    box-sizing: border-box !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .virtual-question-list-window,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .virtual-question-list-window
    .question-row.compact-question-row {
    width: 100% !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row {
    --figma265-status-left: 104px;
    --figma265-status-width: 30px;
    width: 100% !important;
    height: 72px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-status {
    left: auto !important;
    right: 10px !important;
    top: 10px !important;
    width: 30px !important;
    font-size: 9px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-status {
    left: auto !important;
    right: 10px !important;
    top: 10px !important;
    width: 30px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-type-mini {
    left: 10px !important;
    top: 13px !important;
    width: 34px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-code {
    left: 12px !important;
    top: 11px !important;
    width: 62px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row
    .question-row-main
    strong {
    left: 12px !important;
    top: 31px !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    height: 34px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-row.compact-question-row::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .answer-stage {
    width: var(--figma265-compact-answer) !important;
    min-height: 900px !important;
    padding: 14px !important;
    border-radius: 26px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator {
    grid-template-columns: 34px minmax(0, 1fr) auto 34px !important;
    gap: 8px !important;
    min-height: 50px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .practice-navigator .current-question-pill {
    min-width: 132px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-card.active-question {
    padding: 18px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .question-title-line {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #activeQuestionTitle {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #questionText {
    padding: 18px 48px 18px 18px !important;
    font-size: 16px !important;
    line-height: 28px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools[hidden] {
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    gap: 6px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 7px !important;
    border-radius: 17px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    button[hidden],
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    button.is-hidden {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-card.active-question
    .question-tools
    #flowPracticeQuestionButton {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 17px !important;
    border-color: rgba(255, 255, 255, 0.64) !important;
    color: #10a48a !important;
    background: transparent !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 14px 30px -28px rgba(30, 54, 66, 0.26) !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #recorderPanel {
    justify-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .recorder-actions {
    grid-template-columns: 48px 78px minmax(120px, 1fr) 48px !important;
    gap: 14px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.scoring,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.has-report,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel.speech-result-ready,
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .feedback-panel:not(.scoring):not(.has-report),
  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel {
    width: 310px !important;
    max-width: 310px !important;
    padding: 24px !important;
    border-radius: 30px !important;
    top: 92px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 #feedbackPanel.feedback-panel:not(.reading-report-mode) > h2 {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  html body.view-practice #practice.practice-detail-mode.figma-answer-265 .figma265-ready-card {
    justify-self: center !important;
    width: min(calc(100% - 24px), 250px) !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar {
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 24px !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar
    .brand {
    width: 370px !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar
    .brand-copy
    strong {
    width: 116px !important;
    font-size: 26px !important;
    line-height: 36px !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar
    .exam-type-picker {
    left: 192px !important;
    width: 174px !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar
    .nav-list {
    left: 388px !important;
    gap: 8px !important;
    width: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar
    .nav-link {
    width: 74px !important;
  }

  html body.view-practice.figma-answer-265-active
    .sidebar
    .sidebar-user-card {
    left: auto !important;
    right: 12px !important;
    width: 178px !important;
  }

  html body.view-practice.figma-answer-265-active
    .app-shell
    > .sidebar
    > button#sidebarUserButton.sidebar-user-card,
  html body.view-practice.figma-answer-265-active
    .app-shell
    > .sidebar
    > button#sidebarUserButton.sidebar-user-card.is-logged-in {
    left: auto !important;
    right: 12px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
  }

  html body.view-practice.figma-answer-265-active
    .app-shell
    > .sidebar
    > button#sidebarUserButton.sidebar-user-card
    > span {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265 {
    width: calc(100vw - 52px) !important;
    max-width: calc(100vw - 52px) !important;
    margin-top: 112px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-dashboard-layout {
    grid-template-columns: minmax(0, var(--figma265-compact-workbench)) var(--figma265-compact-gap) minmax(296px, var(--figma265-compact-feedback)) !important;
    grid-template-rows: 88px 16px minmax(900px, auto) !important;
    width: calc(100vw - 52px) !important;
    max-width: calc(100vw - 52px) !important;
    height: auto !important;
    min-height: 1004px !important;
    justify-content: center !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-detail-hero {
    width: calc(100vw - 52px) !important;
    max-width: calc(100vw - 52px) !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    padding: 18px 22px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-workbench {
    grid-template-columns: var(--figma265-compact-list) var(--figma265-compact-resizer) minmax(0, var(--figma265-compact-answer)) !important;
    width: var(--figma265-compact-workbench) !important;
    min-width: 0 !important;
    max-width: var(--figma265-compact-workbench) !important;
    height: auto !important;
    min-height: 900px !important;
    max-height: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .question-browser {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    height: 900px !important;
    min-height: 900px !important;
    max-height: calc(100dvh - 132px) !important;
    padding: 16px 10px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .workbench-resizer,
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .feedback-resizer {
    width: 10px !important;
    min-width: 10px !important;
    pointer-events: none !important;
    cursor: default !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .answer-stage {
    width: var(--figma265-compact-answer) !important;
    min-width: 0 !important;
    max-width: var(--figma265-compact-answer) !important;
    height: auto !important;
    min-height: 900px !important;
    max-height: none !important;
    padding: 14px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    #feedbackPanel.feedback-panel {
    width: var(--figma265-compact-feedback) !important;
    min-width: 296px !important;
    max-width: var(--figma265-compact-feedback) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 24px !important;
  }
}

/* v6 navigator arrows: replace the heavy turn-arrow artwork with crisp glass chevrons. */
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  .answer-stage
  .practice-navigator
  [data-nav-step] {
  position: relative !important;
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 999px !important;
  color: transparent !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.58)) !important;
  box-shadow:
    0 12px 26px rgba(70, 72, 54, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(15, 185, 158, 0.08) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateZ(0) !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  .answer-stage
  .practice-navigator
  [data-nav-step]::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 2.5px solid #0aa58f !important;
  border-right: 2.5px solid #0aa58f !important;
  border-radius: 2px !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  .answer-stage
  .practice-navigator
  [data-nav-step="-1"]::before,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  .answer-stage
  .practice-navigator
  [data-nav-step="prev"]::before {
  transform: translateX(1px) rotate(-135deg) !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  .answer-stage
  .practice-navigator
  [data-nav-step="1"]::before,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  .answer-stage
  .practice-navigator
  [data-nav-step="next"]::before {
  transform: translateX(-1px) rotate(45deg) !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  .answer-stage
  .practice-navigator
  [data-nav-step]:not(:disabled):hover {
  border-color: rgba(16, 169, 145, 0.22) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(230, 255, 249, 0.74)) !important;
  box-shadow:
    0 18px 38px rgba(16, 169, 145, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transform: translateY(-1px) !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  .answer-stage
  .practice-navigator
  [data-nav-step]:not(:disabled):active {
  box-shadow:
    0 10px 22px rgba(70, 72, 54, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  transform: translateY(0) scale(0.96) !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  .answer-stage
  .practice-navigator
  [data-nav-step]:disabled {
  opacity: 0.58 !important;
  filter: none !important;
  cursor: default !important;
}

@media (max-width:760px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .answer-stage .practice-navigator [data-nav-step="-1"]{display:none !important;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .answer-stage .practice-navigator [data-nav-step="1"]{position:absolute !important;left:auto !important;right:11px !important;top:15px !important;z-index:3;border:1px solid rgba(255,255,255,0.8) !important;border-radius:20px !important;background:rgba(255,255,255,0.52) !important;box-shadow:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .stage-practice .answer-stage .practice-navigator [data-nav-step="1"]::before{width:24px !important;height:24px !important;border:0 !important;background:url("./assets/figma-answer-265/figma-mobile/figma-icon-back.svg") center/24px 24px no-repeat !important;transform:rotate(180deg) !important;}}

/* Flow practice navigator: reserve a second, compact control row inside the
   existing answer-page chrome without changing the standard practice layout. */
html body.view-practice.figma-answer-265-active.flow-practice-active
  #practice.practice-detail-mode.figma-answer-265
  #flowPracticeQuestionButton {
  display: none !important;
}

@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active.flow-practice-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    .practice-navigator:has(.flow-practice-nav) {
    display: block !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active.flow-practice-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .flow-practice-nav {
    height: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 760px) {
  html body.view-practice.figma-answer-265-active.flow-practice-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator:has(.flow-practice-nav) {
    height: 142px !important;
    min-height: 142px !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active.flow-practice-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .flow-practice-nav {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    height: 62px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    gap: 4px !important;
    border-radius: 22px !important;
  }

  html body.view-practice.figma-answer-265-active.flow-practice-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .flow-practice-nav-row {
    gap: 6px !important;
  }

  html body.view-practice.figma-answer-265-active.flow-practice-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-navigator
    .flow-practice-nav button {
    min-height: 32px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }
}

/* Shared audio owner: prompt audio and RA demo use the same control language. */
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .audio-prompt.answer-audio-player:not(:empty) {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: 29px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 10px 22px rgba(115, 148, 143, 0.1) !important;
}

@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .question-card.active-question
    .audio-prompt.answer-audio-player:not(:empty) {
    box-sizing: border-box !important;
    width: min(430px, 78%) !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 5px 12px 5px 5px !important;
    border-radius: 23px !important;
  }
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .audio-prompt
  .answer-audio-toggle {
  position: relative !important;
  inset: auto !important;
  justify-self: start !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .answer-audio-toggle {
  display: grid !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: transparent !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42), transparent 38%),
    linear-gradient(180deg, #35d9cf 0%, #20cfc1 100%) !important;
  box-shadow: 0 10px 20px -14px rgba(11, 158, 145, 0.45) !important;
  font-size: 0 !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .answer-audio-toggle::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  transform: translate(-36%, -50%) !important;
  border: 0 !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 11px solid #ffffff !important;
  background: transparent !important;
  clip-path: none !important;
  box-shadow: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .answer-audio-toggle.is-playing::before {
  width: 13px !important;
  height: 15px !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  background: linear-gradient(90deg, #ffffff 0 4px, transparent 4px 9px, #ffffff 9px 13px) !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .audio-prompt
  .answer-audio-progress {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 80px !important;
  height: 5px !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #22d3c5 0 var(--audio-prompt-progress, 0%), rgba(220, 235, 232, 0.92) var(--audio-prompt-progress, 0%) 100%) !important;
  box-shadow: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .audio-prompt
  .answer-audio-progress
  span,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .audio-prompt
  .answer-audio-progress
  i {
  display: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .audio-prompt
  .answer-audio-progress::after {
  content: "" !important;
  position: absolute !important;
  left: var(--audio-prompt-progress, 0%) !important;
  top: 50% !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  transform: translate(-50%, -50%) !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background: #22d3c5 !important;
  box-shadow: 0 2px 6px rgba(12, 148, 135, 0.24) !important;
  pointer-events: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .audio-prompt-time-readout {
  display: inline-flex !important;
  min-width: 78px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  color: #718079 !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  line-height: 18px !important;
  white-space: nowrap !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .question-card.active-question
  .audio-prompt-time-readout
  :is(time, i) {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  font-style: normal !important;
}

/* Figma recording indicator owner: downloaded component assets + live microphone levels. */
html body.view-practice.figma-answer-265-active
  #recorderPanel
  :is(.wave, .figma265-live-wave),
html body.view-practice.figma-answer-265-active
  #recorderPanel
  .wave::before,
html body.view-practice.figma-answer-265-active
  #recorderPanel
  .wave::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
  animation: none !important;
  pointer-events: none !important;
}

html body.view-practice.figma-answer-265-active
  #recorderPanel
  .speech-record-helper {
  display: none !important;
}

html body.view-practice.figma-answer-265-active
  #recorderPanel
  #recordButton
  .speech-record-visual {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body.view-practice.figma-answer-265-active
  #recorderPanel
  #recordButton
  :is(.speech-record-glow, .speech-record-core) {
  display: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html body.view-practice.figma-answer-265-active
  #recorderPanel
  #recordButton
  .speech-record-bars {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  display: none !important;
  width: 46px !important;
  height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

html body.view-practice.figma-answer-265-active
  #recorderPanel.recording
  #recordButton
  .speech-record-bars {
  display: flex !important;
}

html body.view-practice.figma-answer-265-active
  #recorderPanel
  #recordButton
  .speech-record-bars
  i {
  display: block !important;
  width: 4px !important;
  min-width: 4px !important;
  max-width: 4px !important;
  height: var(--speech-record-bar-height, 12px) !important;
  min-height: 9px !important;
  max-height: 34px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: none !important;
  opacity: var(--speech-record-bar-opacity, 0.72) !important;
  transform: scaleY(var(--speech-record-bar-scale, 0.9)) translateZ(0) !important;
  transform-origin: center !important;
  transition: height 72ms linear, opacity 72ms linear, transform 72ms linear !important;
  will-change: height, opacity, transform !important;
}

@media (min-width: 761px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording {
    position: relative !important;
    display: grid !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: 0 !important;
    grid-auto-rows: 0 !important;
    grid-template-rows: 48px 148px 20px !important;
    width: min(560px, 100%) !important;
    max-width: 560px !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    gap: 14px !important;
    align-content: center !important;
    justify-items: center !important;
    margin-inline: auto !important;
    padding: 24px 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 40px !important;
    background: #fffffb !important;
    box-shadow: 0 22px 21px rgba(28, 99, 87, 0.14) !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .timer {
    position: static !important;
    inset: auto !important;
    grid-area: 1 / 1 / 2 / 2 !important;
    place-self: center !important;
    display: flex !important;
    box-sizing: border-box !important;
    width: 218px !important;
    min-width: 218px !important;
    max-width: 218px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fffffb !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .timer::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin-inline: -10px !important;
    background: url("./assets/figma-answer-265/recording-motion/live-dot.svg") center / 30px 30px no-repeat !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .timer
    :is(#timerValue, #timerLabel) {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #069482 !important;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .recorder-actions {
    position: static !important;
    inset: auto !important;
    grid-area: 2 / 1 / 3 / 2 !important;
    place-self: center !important;
    z-index: 6 !important;
    display: block !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-self: center !important;
    z-index: 7 !important;
    display: block !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    animation: none !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-glow {
    position: absolute !important;
    left: -10px !important;
    top: -16px !important;
    z-index: 0 !important;
    display: block !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    object-fit: fill !important;
    opacity: var(--recording-glow-opacity, 1) !important;
    transform: scale(var(--recording-glow-scale, 1)) translateZ(0) !important;
    transform-origin: 50% 50% !important;
    transition:
      transform var(--recording-transition-duration, 220ms) ease-in-out,
      opacity var(--recording-transition-duration, 220ms) ease-in-out !important;
    will-change: transform, opacity !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-core {
    position: absolute !important;
    left: 10px !important;
    top: 18px !important;
    z-index: 1 !important;
    display: block !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    height: 144px !important;
    min-height: 144px !important;
    max-height: 144px !important;
    object-fit: fill !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars {
    left: 46px !important;
    top: 48px !important;
    z-index: 2 !important;
    width: 68px !important;
    height: 52px !important;
    gap: 4px !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars
    i {
    width: 6px !important;
    min-width: 6px !important;
    max-width: 6px !important;
    min-height: 0 !important;
    max-height: 52px !important;
    border-radius: 3px !important;
    background: #fff !important;
    opacity: var(--speech-record-bar-opacity, 0.96) !important;
    transform: scaleY(var(--speech-record-bar-scale, 1)) translateZ(0) !important;
    transition:
      height var(--recording-transition-duration, 220ms) ease-in-out,
      opacity var(--recording-transition-duration, 220ms) ease-in-out,
      transform var(--recording-transition-duration, 220ms) ease-in-out !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars
    i:nth-child(1),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars
    i:nth-child(7) {
    height: var(--speech-record-bar-height, 12px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars
    i:nth-child(2),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars
    i:nth-child(6) {
    height: var(--speech-record-bar-height, 18px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars
    i:nth-child(3),
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars
    i:nth-child(5) {
    height: var(--speech-record-bar-height, 24px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars
    i:nth-child(4) {
    height: var(--speech-record-bar-height, 30px) !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    .speech-record-helper {
    position: static !important;
    grid-area: 3 / 1 / 4 / 2 !important;
    place-self: center !important;
    display: block !important;
    width: auto !important;
    height: 20px !important;
    margin: 0 !important;
    color: #667486 !important;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    :is(#prevQuestionButton, #nextQuestionButton, #submitButton) {
    position: absolute !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-glow {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .stage-practice
    #recorderPanel.recording
    #recordButton
    .speech-record-bars
    i {
    transition: none !important;
  }
}

/* v8 recorder final state lock: no submitted rail, and idle mic stays on the card center axis. */
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel:not(.recording)
  .wave {
  display: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel:not(.recording)
  .wave::before,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel:not(.recording)
  .wave::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel.has-recorded-audio:not(.recording)
  .wave
  span,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="ready"]:not(.recording)
  .wave
  span,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="submitting"]:not(.recording)
  .wave
  span,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="submitted"]:not(.recording)
  .wave
  span {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  animation: none !important;
  transform: scale(0) !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel:not(.recording)
  .figma265-live-wave {
  display: none !important;
  opacity: 0 !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"])
  .recorder-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 88px !important;
  place-items: center !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 0 !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"])
  #prevQuestionButton,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"])
  #nextQuestionButton,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"])
  #submitButton {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"])
  #recordButton {
  grid-column: 1 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
  transform: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  #recorderPanel:is(.has-recorded-audio, [data-mic-state="ready"], [data-mic-state="submitting"], [data-mic-state="submitted"]):not(.recording),
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel.has-recorded-audio:not(.recording),
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="ready"]:not(.recording),
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="submitting"]:not(.recording),
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="submitted"]:not(.recording) {
  position: relative !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  #recorderPanel:is(.has-recorded-audio, [data-mic-state="ready"], [data-mic-state="submitting"], [data-mic-state="submitted"]):not(.recording)
  .recorder-actions,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel.has-recorded-audio:not(.recording)
  .recorder-actions,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="ready"]:not(.recording)
  .recorder-actions,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="submitting"]:not(.recording)
  .recorder-actions,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="submitted"]:not(.recording)
  .recorder-actions {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 6 !important;
  display: grid !important;
  grid-area: 1 / 1 / -1 / -1 !important;
  grid-row: 1 / -1 !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  place-self: stretch !important;
  place-items: center !important;
  place-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 0 !important;
  pointer-events: none !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  #recorderPanel:is(.has-recorded-audio, [data-mic-state="ready"], [data-mic-state="submitting"], [data-mic-state="submitted"]):not(.recording)
  #submitButton,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel.has-recorded-audio:not(.recording)
  #submitButton,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="ready"]:not(.recording)
  #submitButton,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="submitting"]:not(.recording)
  #submitButton,
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-mic-state="submitted"]:not(.recording)
  #submitButton {
  grid-column: 1 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  justify-self: center !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* v11 recorder idle mic true center: align to the recorder card, not the bottom action row. */
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"]) {
  position: relative !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"])
  .recorder-actions {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"])
  #recordButton {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

/* v12 recorder idle mic grid-area lock: absolute controls must span the whole recorder grid. */
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"])
  .recorder-actions {
  grid-area: 1 / 1 / -1 / -1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  place-self: stretch !important;
}

/* v13 recorder idle mic outer-card center: include recorder padding in the centering box. */
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel[data-answer-mode="speech"]:not(.recording):not(.has-recorded-audio):not([data-mic-state="ready"]):not([data-mic-state="submitting"]):not([data-mic-state="submitted"])
  .recorder-actions {
  top: -18px !important;
  bottom: -8px !important;
  height: auto !important;
  min-height: 0 !important;
}

/* v16 recorder mask compatibility: keep the generated SVG hidden after idle centering fixes. */
html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel.recording
  .figma265-live-wave {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel
  .figma265-live-wave
  path {
  transition:
    opacity 90ms linear,
    stroke-width 90ms linear,
    filter 90ms linear !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel
  .figma265-live-wave-baseline {
  stroke: rgba(13, 148, 136, 0.11) !important;
  stroke-width: 1.8 !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel
  .figma265-live-wave-shadow {
  stroke: rgba(16, 169, 145, 0.12) !important;
  stroke-width: calc(14px + var(--speech-level, 0) * 12px) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: calc(0.2 + var(--speech-level, 0) * 0.32) !important;
  filter: blur(8px) !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel
  .figma265-live-wave-glow {
  stroke: rgba(45, 212, 191, 0.34) !important;
  stroke-width: calc(7px + var(--speech-level, 0) * 8px) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: calc(0.34 + var(--speech-level, 0) * 0.42) !important;
  filter:
    blur(1px)
    drop-shadow(0 8px 18px rgba(16, 169, 145, 0.16)) !important;
}

html body.view-practice.figma-answer-265-active
  #practice.practice-detail-mode.figma-answer-265
  .stage-practice
  #recorderPanel
  .figma265-live-wave-core {
  stroke: #0fbfa6 !important;
  stroke-width: calc(3.2px + var(--speech-level, 0) * 1.9px) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: calc(0.78 + var(--speech-level, 0) * 0.22) !important;
  filter:
    drop-shadow(0 0 10px rgba(16, 169, 145, 0.24))
    drop-shadow(0 8px 16px rgba(4, 127, 113, 0.12)) !important;
}

/* Non-speech answer actions reuse the recorder card without exposing microphone controls. */
@media (min-width: 981px) {
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice:not(.speech-mode)
    .answer-workspace:not([hidden]) {
    order: 2 !important;
  }
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"]) {
    order: 3 !important;
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    overflow: visible !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice:not(.speech-mode)
    .practice-discussion {
    order: 4 !important;
  }
  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])
    :is(.timer, .wave, #recordButton, .figma-mobile-book-button) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])
    .recorder-actions {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 48px minmax(160px, 220px) 48px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 14px !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])
    .recorder-actions
    :is(.hiw-start-control, .lifib-start-control) {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    z-index: 2 !important;
    display: inline-flex !important;
    width: 100% !important;
    min-width: 160px !important;
    max-width: 220px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 25px !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #18bba6, #079b88) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])
    .recorder-actions
    :is(.hiw-start-control, .lifib-start-control).is-started {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])
    .recorder-actions
    :is(.hiw-start-control, .lifib-start-control):not(.is-started)
    ~ #submitButton {
    display: none !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])
    .recorder-actions
    :is(#prevQuestionButton, #nextQuestionButton, #submitButton) {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])
    :is(#prevQuestionButton, #nextQuestionButton) {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    font-size: 0 !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])
    #submitButton {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 160px !important;
    max-width: 220px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 24px !important;
    border-radius: 25px !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #18bba6, #079b88) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
  }

  html body.view-practice.figma-answer-265-active
    #practice.practice-detail-mode.figma-answer-265
    .practice-panel.stage-practice
    #recorderPanel[data-answer-mode]:not([data-answer-mode="speech"])
    #submitButton:disabled {
    color: #718079 !important;
    background: #eef4f3 !important;
    box-shadow: none !important;
    opacity: 0.72 !important;
    cursor: not-allowed !important;
  }
}

/* Shared desktop wrongbook shortcut owner: every question type uses the same title icon. */
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-title-line:has(> .desktop-question-title-actions){display:grid !important;grid-template-columns:minmax(0,1fr) auto auto !important;grid-template-rows:auto !important;gap:10px !important;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-title-line:has(> .desktop-question-title-actions)>#activeQuestionTitle{grid-column:1 !important;grid-row:1 !important;min-width:0 !important;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-title-line:has(> .desktop-question-title-actions)>#activeQuestionCode{grid-column:2 !important;grid-row:1 !important;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .desktop-question-title-actions{grid-column:3 !important;grid-row:1 !important;display:inline-flex;align-items:center;justify-self:end;gap:7px;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .desktop-question-title-actions #favoriteQuestionButton{position:relative;display:grid;flex:0 0 34px;width:34px;min-width:34px;max-width:34px;height:34px;min-height:34px;max-height:34px;margin:0;padding:0;place-items:center;overflow:hidden;border:1px solid rgba(224,169,20,0.22);border-radius:50%;color:transparent;background:linear-gradient(145deg,rgba(255,255,255,0.98),rgba(255,248,220,0.78));box-shadow:inset 0 1px 0 rgba(255,255,255,0.98),0 10px 22px -18px rgba(190,132,0,0.5);font-size:0;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .desktop-question-title-actions #favoriteQuestionButton::before{content:"";display:block;width:18px;height:18px;background:url("./assets/figma-answer-265/tool-favorite-figma.svg") center / 18px 18px no-repeat;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .desktop-question-title-actions #favoriteQuestionButton[aria-pressed="true"]{border-color:rgba(13,158,135,0.28);background:linear-gradient(145deg,rgba(255,255,255,0.98),rgba(226,250,244,0.9));}}
@media (max-width:760px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-card.active-question>.figma-mobile-bookmark-button{position:absolute;left:auto;right:18px;top:12px;z-index:6;display:grid;width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;margin:0;padding:0;place-items:center;overflow:hidden;transform:none;border:1px solid rgba(255,255,255,0.78);border-radius:18px;color:#4d5967;background:rgba(255,255,255,0.54);box-shadow:inset 0 1px 0 rgba(255,255,255,0.88),0 10px 22px -18px rgba(45,72,67,0.32);-webkit-backdrop-filter:none;backdrop-filter:none;font-size:0;line-height:0;opacity:1;visibility:visible;pointer-events:auto;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-card.active-question>.figma-mobile-bookmark-button::before{content:"";display:block;width:20px;height:20px;background:url("./assets/figma-answer-265/figma-mobile/figma-icon-bookmark.svg") center/20px 20px no-repeat;-webkit-mask:none;mask:none;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-card.active-question>.figma-mobile-bookmark-button[aria-pressed="true"]{border-color:rgba(13,158,135,0.32);background:rgba(229,250,245,0.92);}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265 .question-card.active-question #activeQuestionTitle{right:auto !important;width:calc(100% - 88px) !important;max-width:calc(100% - 88px) !important;}}

/* RL desktop action owner: title utilities, compact flow control, and idle mic card. */
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .question-card.active-question .question-meta[hidden],html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .question-card.active-question .question-tools,html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout #backToQuestionListButton{display:none !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .question-card.active-question .question-title-line{display:grid !important;grid-template-columns:minmax(0,1fr) auto auto !important;grid-template-rows:auto !important;gap:10px !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .question-title-line #activeQuestionTitle{grid-column:1 !important;grid-row:1 !important;min-width:0 !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .question-title-line #activeQuestionCode{grid-column:2 !important;grid-row:1 !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-title-actions{grid-column:3;grid-row:1;display:inline-flex;align-items:center;gap:7px;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-title-transcript-button{display:inline-flex;height:34px;min-height:34px;padding:0 13px;align-items:center;justify-content:center;border:1px solid rgba(16,164,138,0.2);border-radius:17px;color:#0b927f;background:linear-gradient(145deg,rgba(255,255,255,0.96),rgba(234,252,247,0.72));box-shadow:inset 0 1px 0 rgba(255,255,255,0.96),0 10px 24px -20px rgba(10,136,119,0.46);font-size:12px;font-weight:820;white-space:nowrap;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-title-actions #favoriteQuestionButton{position:relative;display:grid;flex:0 0 34px;width:34px;min-width:34px;max-width:34px;height:34px;min-height:34px;max-height:34px;margin:0;padding:0;place-items:center;overflow:hidden;border:1px solid rgba(224,169,20,0.22);border-radius:50%;color:transparent;background:linear-gradient(145deg,rgba(255,255,255,0.98),rgba(255,248,220,0.78));box-shadow:inset 0 1px 0 rgba(255,255,255,0.98),0 10px 22px -18px rgba(190,132,0,0.5);font-size:0;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-title-actions #favoriteQuestionButton::before{content:"";display:block;width:18px;height:18px;background:url("./assets/figma-answer-265/tool-favorite-figma.svg") center / 18px 18px no-repeat;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout #questionText{display:none;min-height:0;margin:0;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout #questionText:has(.rl-transcript-panel:not([hidden])){display:block !important;min-height:0 !important;padding:14px 16px;border-radius:18px;font-size:14px;font-weight:520;line-height:1.65;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout #questionText::after,html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout #questionText > .ra-text-line,html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout #questionText .rl-transcript-toggle > button{content:none !important;display:none !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout #questionText :is(.rl-transcript-toggle,.rl-transcript-panel,.rl-transcript-panel p){min-height:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card{display:grid;grid-template-columns:112px minmax(132px,1fr) minmax(112px,auto);align-items:center;gap:9px;box-sizing:border-box;width:100%;min-height:76px;margin:2px 0 0;padding:8px 10px;border:1px solid rgba(255,255,255,0.84);border-radius:24px;background:radial-gradient(circle at 52% 0%,rgba(206,255,246,0.22),transparent 48%),linear-gradient(145deg,rgba(255,255,255,0.74),rgba(249,253,251,0.48));box-shadow:inset 0 1px 0 rgba(255,255,255,0.98),0 18px 40px -34px rgba(26,80,72,0.26);}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #flowPracticeQuestionButton{position:relative !important;display:inline-flex !important;width:112px !important;min-width:112px !important;max-width:112px !important;height:46px !important;min-height:46px !important;margin:0 !important;padding:0 13px !important;align-items:center !important;justify-content:center !important;gap:7px !important;border:1px solid rgba(13,164,140,0.18) !important;border-radius:18px !important;color:#088f7b !important;background:linear-gradient(145deg,rgba(239,255,250,0.94),rgba(224,250,244,0.7)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.98),0 12px 26px -22px rgba(8,143,123,0.52) !important;font-size:12px !important;font-weight:860 !important;white-space:nowrap !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #flowPracticeQuestionButton::before{content:"" !important;display:block !important;flex:0 0 22px !important;width:22px !important;height:22px !important;background:url("./assets/figma-answer-265/tool-flow-path-figma.svg") center / 22px 22px no-repeat !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording){position:relative !important;inset:auto !important;display:grid !important;grid-template-columns:minmax(0,1fr) 48px !important;grid-template-rows:52px !important;align-items:center !important;gap:6px !important;box-sizing:border-box !important;width:100% !important;min-width:0 !important;max-width:none !important;height:58px !important;min-height:58px !important;max-height:58px !important;margin:0 !important;padding:3px 4px 3px 10px !important;overflow:visible !important;border:1px solid rgba(17,174,150,0.13) !important;border-radius:19px !important;background:linear-gradient(145deg,rgba(247,255,252,0.94),rgba(230,250,246,0.66)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.98),0 12px 26px -24px rgba(10,131,113,0.4) !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording) .timer{position:static !important;inset:auto !important;display:flex !important;width:auto !important;min-width:0 !important;max-width:none !important;height:auto !important;min-height:0 !important;margin:0 !important;padding:0 !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;gap:0 !important;transform:none !important;white-space:nowrap !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording) #timerValue{color:#087f70;font-size:13px;font-weight:850;line-height:17px;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording) #timerLabel{color:#788780;font-size:9px;font-weight:650;line-height:13px;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording) :is(.wave,.figma265-live-wave,.speech-record-visual,.speech-record-helper){display:none !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording) .recorder-actions{position:static !important;inset:auto !important;z-index:2 !important;display:grid !important;grid-template-columns:48px !important;grid-template-rows:48px !important;grid-area:auto !important;place-self:center !important;width:48px !important;min-width:48px !important;max-width:48px !important;height:48px !important;min-height:48px !important;max-height:48px !important;margin:0 !important;padding:0 !important;transform:none !important;pointer-events:auto !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording) .recorder-actions :is(#prevQuestionButton,#nextQuestionButton,#submitButton){display:none !important;width:0 !important;height:0 !important;min-width:0 !important;min-height:0 !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording) #recordButton{position:relative !important;inset:auto !important;display:block !important;grid-column:1 !important;grid-row:1 !important;width:48px !important;min-width:48px !important;max-width:48px !important;height:48px !important;min-height:48px !important;max-height:48px !important;margin:0 !important;padding:0 !important;overflow:visible !important;transform:none !important;border:0 !important;border-radius:50% !important;color:transparent !important;background:transparent !important;background-image:none !important;box-shadow:none !important;font-size:0 !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording) #recordButton::after{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;display:block !important;border:1px solid rgba(183,255,240,0.96) !important;border-radius:50% !important;background:radial-gradient(circle at 34% 22%,rgba(255,255,255,0.34),transparent 42%),linear-gradient(180deg,#34d7cc 0%,#16bfae 100%) !important;box-shadow:0 10px 20px -12px rgba(9,146,127,0.62),inset 0 1px 0 rgba(255,255,255,0.36) !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #recorderPanel:not(.recording) #recordButton::before{content:"" !important;position:absolute !important;left:50% !important;top:50% !important;z-index:1 !important;display:block !important;width:24px !important;height:24px !important;transform:translate(-50%,-50%) !important;background:url("./assets/figma-answer-265/mic-figma.svg") center / 24px 24px no-repeat !important;-webkit-mask:none !important;mask:none !important;}}
@media (min-width:981px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card .figma-mobile-passed-button{position:static !important;display:inline-flex !important;width:auto !important;min-width:112px !important;max-width:none !important;height:46px !important;min-height:46px !important;margin:0 !important;padding:0 12px !important;align-items:center !important;justify-content:center !important;border:1px solid rgba(24,148,130,0.14) !important;border-radius:18px !important;color:#278c7e !important;background:rgba(249,255,253,0.84) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.98) !important;font-size:11px !important;font-weight:800 !important;line-height:16px !important;white-space:nowrap !important;transform:none !important;}}

@media (min-width:981px) and (max-width:1180px){html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card{grid-template-columns:100px minmax(120px,1fr) 120px !important;gap:7px !important;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card #flowPracticeQuestionButton{width:100px !important;min-width:100px !important;max-width:100px !important;padding:0 8px !important;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card .figma-mobile-passed-button{width:120px !important;min-width:120px !important;max-width:120px !important;}html body.view-practice.figma-answer-265-active #practice.practice-detail-mode.figma-answer-265.rl-desktop-action-layout .rl-practice-action-card .figma-mobile-passed-button::before{display:none !important;}}

/* v17 microphone permission retry: keep the failed-permission state visibly clickable. */
html body.view-practice.figma-answer-265-active
  #recorderPanel[data-mic-state="permission"]:not(.recording)
  .recorder-actions {
  pointer-events: auto !important;
}

html body.view-practice.figma-answer-265-active
  #recorderPanel[data-mic-state="permission"]:not(.recording)
  #recordButton {
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.view-practice.figma-answer-265-active
  #recorderPanel[data-mic-state="permission"]:not(.recording)
  #recordButton::before,
html body.view-practice.figma-answer-265-active
  #recorderPanel[data-mic-state="permission"]:not(.recording)
  #recordButton::after,
html body.view-practice.figma-answer-265-active
  #recorderPanel[data-mic-state="permission"]:not(.recording)
  .figma265-live-wave {
  pointer-events: none !important;
}