.bdf-placement {
  --placement-ink: #192f2c;
  --placement-accent: #17624f;
  --placement-border: #c6d9d2;
  background: #edf6f2;
  border-block: 1px solid var(--placement-border);
  color: var(--placement-ink);
  padding-block: 36px;
  scroll-margin-top: 12px;
}
.bdf-placement__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 36px;
  align-items: start;
}
.bdf-placement__layout > * { min-width: 0; overflow-wrap: anywhere; }
.bdf-placement__intro h3, .bdf-placement__status h3 { font-size: 22px; margin: 0; }
.bdf-placement__eyebrow {
  color: var(--placement-accent);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 8px;
}
.bdf-placement h2 { font-size: 32px; margin: 0 0 12px; }
.bdf-placement p { color: inherit; }
.bdf-placement__levels {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  max-width: 370px;
  margin: 18px 0 14px;
  padding: 0;
}
.bdf-placement__levels li {
  border-top: 3px solid #367e65;
  padding: 6px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 750;
}
.bdf-placement__levels li:nth-child(n+3) { border-color: #3870a3; }
.bdf-placement__levels li:nth-child(n+5) { border-color: #b54e5e; }
.bdf-placement__scope { font-size: 13px; margin: 0; }
.bdf-placement__content { border-left: 1px solid var(--placement-border); padding-left: 34px; }
.bdf-placement__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  padding: 0;
  margin: 14px 0 20px;
  font-size: 14px;
}
.bdf-placement__facts li { display: flex; align-items: center; gap: 7px; }
.bdf-placement__facts svg { color: var(--placement-accent); width: 17px; height: 17px; }
.bdf-placement__button, .bdf-placement__text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--placement-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  max-width: 100%;
  cursor: pointer;
}
.bdf-placement__button:hover { background: #104a3b; color: #fff; }
.bdf-placement__button:disabled { opacity: .65; cursor: wait; }
.bdf-placement__button--secondary, .bdf-placement__text-button {
  color: var(--placement-ink);
  background: #fff;
  border-color: #9dbbb0;
}
.bdf-placement__button--secondary:hover, .bdf-placement__text-button:hover { color: var(--placement-ink); background: #dcefe7; }
.bdf-placement__text-button { padding-inline: 8px; border-color: transparent; background: transparent; text-decoration: underline; }
.bdf-placement__button svg { width: 17px; height: 17px; flex: none; }
.bdf-placement__actions, .bdf-placement__status, .bdf-placement__storage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.bdf-placement__actions { margin-top: 16px; }
.bdf-placement__status { justify-content: space-between; }
.bdf-placement__status span, .bdf-placement__progress span, .bdf-placement__storage { font-size: 13px; }
.bdf-placement__progress { margin: 9px 0 16px; }
.bdf-placement__progress progress { display: block; width: 100%; height: 8px; margin-top: 4px; accent-color: var(--placement-accent); }
.bdf-placement__passage { white-space: pre-line; font-size: 17px; font-weight: 650; margin: 0 0 14px; }
.bdf-placement fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.bdf-placement legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.bdf-placement__options { display: grid; gap: 8px; }
.bdf-placement__option {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--placement-border);
  background: #fff;
  cursor: pointer;
}
.bdf-placement__option input { accent-color: var(--placement-accent); flex: none; margin: 0; }
.bdf-placement__option:hover, .bdf-placement__option:has(input:checked) { background: #ddf2e8; border-color: var(--placement-accent); }
.bdf-placement__option:focus-within { outline: 2px solid var(--placement-accent); outline-offset: 2px; }
.bdf-placement__result h3 { font-size: 38px; margin: 0 0 5px; }
.bdf-placement__stages { padding: 0; list-style: none; margin: 0 0 14px; }
.bdf-placement__stages li { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--placement-border); }
.bdf-placement__review summary { cursor: pointer; min-height: 44px; padding-block: 9px; font-weight: 700; }
.bdf-placement__review ol { padding-inline-start: 22px; margin-block: 0; }
.bdf-placement__review li { border-top: 1px solid var(--placement-border); padding-block: 12px; }
.bdf-placement__review li p { margin: 0 0 7px; }
.bdf-placement__review-status { font-size: 13px; font-weight: 700; }
.bdf-placement__review-status[data-correct=true] { color: var(--placement-accent); }
.bdf-placement__review-status[data-correct=false], .bdf-placement .bdf-placement__error { color: #8c3041; }
.bdf-placement__storage { margin-top: 8px; }
@media (max-width: 760px) {
  .bdf-placement { padding-block: 26px; }
  .bdf-placement__layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bdf-placement__content { border-left: 0; padding: 16px 0 0; border-top: 1px solid var(--placement-border); }
  .bdf-placement h2 { font-size: 26px; }
  .bdf-placement[data-state=question] .bdf-placement__levels,
  .bdf-placement[data-state=question] .bdf-placement__lead { display: none; }
}