.h5p-bird-reproduction { font-family: Arial, Helvetica, sans-serif; color: #16202a; }
.h5p-bird-reproduction * { box-sizing: border-box; }
.br-wrap { max-width: 980px; margin: 0 auto; padding: 18px; background: #f5f8fb; line-height: 1.55; }
.br-hero { padding: 30px; border-radius: 20px; background: linear-gradient(135deg, #eef8f1, #eef5ff 58%, #fff7e8); border: 1px solid #d9e6df; margin-bottom: 20px; box-shadow: 0 4px 18px rgba(24,50,38,.06); }
.br-kicker { font-size: 12px; font-weight: 800; letter-spacing: .13em; color: #2d7448; }
.br-hero h1 { margin: 6px 0 8px; font-size: 30px; line-height: 1.2; }
.br-hero p { margin: 0 0 12px; color: #4d5964; }
.br-progress-note { display: inline-block; padding: 7px 11px; border-radius: 999px; background: rgba(47,123,76,.1); color: #286b42; font-weight: 700; font-size: 13px; }
.br-card { background: #fff; border: 1px solid #dfe6ec; border-radius: 18px; padding: 22px; margin: 18px 0; box-shadow: 0 3px 12px rgba(28,46,64,.05); }
.br-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.br-card-head h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.br-num { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: #2f7b4c; color: #fff; font-weight: 800; flex: 0 0 auto; }
.br-order { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 9px; counter-reset: step; }
.br-order-item { display: grid; grid-template-columns: 26px 32px 1fr auto; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid #cbd6cf; border-radius: 11px; background: #fbfdfc; cursor: grab; transition: transform .12s, box-shadow .12s; }
.br-order-item:hover { box-shadow: 0 4px 12px rgba(26,56,39,.08); }
.br-order-item.dragging { opacity: .55; transform: scale(.99); }
.br-order-item.correct { border-color: #3e9561; background: #f1fbf5; }
.br-order-item.wrong { border-color: #d47373; background: #fff5f5; }
.br-grip { color: #86958c; font-weight: 900; letter-spacing: -3px; }
.br-order-item > strong { display: inline-flex; width: 29px; height: 29px; align-items: center; justify-content: center; border-radius: 8px; background: #e8f2eb; color: #28633e; }
.br-move { display: flex; gap: 5px; }
.br-move button { width: 31px; height: 31px; border: 1px solid #bdc9c1; border-radius: 8px; background: #fff; cursor: pointer; font-weight: 800; }
.br-definition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.br-def-item { padding: 15px; border: 1px solid #e0e6ea; border-radius: 13px; background: #fafcfd; }
.br-term { font-size: 17px; font-weight: 800; color: #285e3c; margin-bottom: 4px; }
.br-def-item p { margin: 0 0 9px; color: #55616b; font-size: 14px; }
textarea { font: inherit; }
.br-def-item textarea, .br-question textarea { width: 100%; resize: vertical; padding: 10px 11px; border: 1px solid #b8c5bd; border-radius: 9px; background: #fff; min-height: 86px; }
.br-def-item textarea.correct, .br-question textarea.correct { border-color: #3a9660; background: #f2fbf5; }
.br-def-item textarea.wrong, .br-question textarea.wrong { border-color: #cb6666; background: #fff6f6; }
.br-mini-feedback { min-height: 20px; margin-top: 6px; font-size: 13px; font-weight: 700; }
.br-mini-feedback.good { color: #1f743f; }
.br-mini-feedback.bad { color: #a83b3b; }
.br-question-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.br-question { display: grid; grid-template-columns: 38px 1fr; gap: 11px; padding: 14px; border: 1px solid #e0e6ea; border-radius: 13px; background: #fafcfd; }
.br-qnum { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #eef3ff; color: #3c5794; font-weight: 800; }
.br-qbody label { display: block; font-weight: 800; margin-bottom: 7px; }
.br-check, .br-final, .br-reset { border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 800; cursor: pointer; margin-top: 13px; }
.br-check, .br-final { background: #2f7b4c; color: #fff; }
.br-check:hover, .br-final:hover { background: #25633d; }
.br-reset { background: #e8edeb; color: #27342d; }
.br-feedback { min-height: 24px; margin-top: 11px; font-weight: 800; }
.br-feedback.good { color: #1e743e; }
.br-feedback.mid { color: #8a6300; }
.br-feedback.bad { color: #aa3d3d; }
.br-summary { margin-top: 22px; padding: 25px; border-radius: 19px; background: #183a2a; color: #fff; text-align: center; }
.br-summary h2 { margin-top: 0; }
.br-score { width: 164px; height: 164px; margin: 18px auto; border: 10px solid rgba(255,255,255,.2); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.br-percent { font-size: 34px; }
.br-raw { font-size: 14px; opacity: .85; }
.br-summary-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.br-summary .br-final { background: #fff; color: #183a2a; }
.br-summary .br-reset { background: rgba(255,255,255,.16); color: #fff; }
@media (max-width: 720px) {
  .br-wrap { padding: 10px; }
  .br-hero { padding: 21px; }
  .br-hero h1 { font-size: 24px; }
  .br-card { padding: 16px; }
  .br-definition-grid { grid-template-columns: 1fr; }
  .br-order-item { grid-template-columns: 22px 30px 1fr; }
  .br-move { grid-column: 3; }
  .br-question { grid-template-columns: 1fr; }
}