.fr-card, .fr-banner {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  padding: clamp(16px, 3vw, 30px);
  border: 1px solid #aec9b7;
  border-radius: 24px;
  background: #eaf5e8;
  color: #173d38;
}
.fr-card { margin: 24px 0 32px; }
.fr-card h2, .fr-banner h1 { margin: 4px 0; }
.fr-card p, .fr-banner p { margin: 8px 0 12px; }
.fr-bridge { width: 100%; display: block; border-radius: 16px; background: #245363; }
.fr-plank-ready { fill: #e9ae63; }
.fr-plank-missing { stroke: #e2c894; stroke-dasharray: 4 3; fill: #245363; }
.fr-mission { max-width: 940px; margin: auto; padding: clamp(12px, 3vw, 34px); }
.fr-mission > .back { margin-bottom: 16px; }
.fr-stages { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 16px 0; }
.fr-stages li {
  padding: 8px 12px; border: 1px solid #b2c9c3; border-radius: 10px;
  background: #f0f7f1; color: #173d38; font-weight: 700;
}
.fr-stages [aria-current="step"] { background: #17665d; color: white; border-color: #17665d; }
.fr-lesson {
  padding: clamp(16px, 4vw, 32px);
  border: 1px solid #b2c9c3; border-radius: 20px; background: #fffef9; color: #173d38;
}
.fr-teach {
  display: grid; grid-template-columns: clamp(64px, 12vw, 130px) minmax(0, 1fr); gap: 12px;
  align-items: center; background: #eaf5e8; padding: 12px; border-radius: 12px;
}
.fr-teach p { margin: 4px 0 0; }
.fr-buddy { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; }
.fr-lines { display: grid; gap: 12px; padding: 0 20px; margin: 16px 0; }
.fr-line { position: relative; height: 48px; color: inherit; }
.fr-line::before { content: ''; position: absolute; top: 29px; width: 100%; border-top: 3px solid currentColor; }
.fr-tick { position: absolute; top: 24px; left: var(--at); width: 2px; height: 13px; background: currentColor; }
.fr-tick b { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.fr-point::after { content: ''; position: absolute; top: 1px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #dc913c; }
.fr-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fr-choices button { min-height: 48px; min-width: 44px; padding-inline: 7px; overflow-wrap: anywhere; }
.fr-choices button[aria-disabled="true"] { cursor: default; }
.fr-choices button.fr-right { outline: 3px solid #359b6c; outline-offset: -3px; }
.fr-choices button.fr-wrong { outline: 3px solid #d58742; outline-offset: -3px; }
.fr-hint { min-height: 44px; margin-top: 6px; }
.fr-feedback { margin: 0; min-height: 3em; font-weight: 700; line-height: 1.45; }
.fr-feedback:not(:empty) { padding: 10px 12px; background: #eaf5e8; border-radius: 10px; }
.fr-mission [tabindex="-1"]:focus { outline: none; }
.fr-results li { margin-block: 8px; }
[data-theme="dark"] :is(.fr-card, .fr-banner, .fr-lesson, .fr-teach, .fr-feedback:not(:empty), .fr-stages li) {
  background: #15343b; color: #ecfaf1; border-color: #446b66;
}
[data-theme="dark"] .fr-stages [aria-current="step"] { background: #22756a; }
[data-theme="dark"] :is(.fr-card, .fr-banner) .eyebrow { color: #bce7cd; }
@media (max-width: 620px) {
  .fr-card, .fr-banner { grid-template-columns: minmax(0, 1fr); }
  .fr-card .fr-bridge, .fr-banner .fr-bridge { max-height: 125px; }
  .fr-stages li { font-size: .875rem; }
  .fr-teach { display: flow-root; }
  .fr-buddy { float: right; width: 56px; margin: 0 0 6px 10px; }
}

body:has(.fr-mission) > .skip:not(:focus) { clip-path: inset(50%); }