.sfso-block{max-width:760px;margin:28px auto}.sfso-root{border-top:1px solid #d7dce1;border-bottom:1px solid #d7dce1;padding:20px 0;color:#202428}.sfso-heading-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 14px}.sfso-title{font-size:1.12rem;line-height:1.3;margin:0}.sfso-progress{flex:0 0 auto;font-size:.84rem;font-weight:600;color:#6a7077;margin:0;text-align:right}.sfso-area{margin:10px 0}.sfso-bank,.sfso-answer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:49px;padding:10px;border:1px solid #dfe3e7;background:#fafafa}.sfso-answer{position:relative;background:#fff}.sfso-token{appearance:none;border:1px solid #aeb6bf;border-radius:3px;background:#fff;color:#202428!important;padding:8px 11px;font:inherit;line-height:1.25;cursor:pointer}.sfso-token:hover,.sfso-token:focus-visible{border-color:#385d78;background:#fff!important;color:#202428!important;outline:2px solid rgba(56,93,120,.17);outline-offset:1px}.sfso-token:disabled{cursor:default;opacity:1;color:#202428!important}.sfso-token.is-position-correct{border:2px solid #2f7748;background:#f7fcf8!important;color:#202428!important;padding:7px 10px}.sfso-token.is-position-correct:hover,.sfso-token.is-position-correct:focus-visible{background:#f7fcf8!important;color:#202428!important}.sfso-token.is-position-wrong{border:2px solid #b23b3b;background:#fff7f7!important;color:#202428!important;padding:7px 10px}.sfso-token.is-position-wrong:hover,.sfso-token.is-position-wrong:focus-visible{background:#fff7f7!important;color:#202428!important}.sfso-answer-placeholder,.sfso-loading{color:#8a9096;font-size:.92rem}.sfso-answer.is-wrong{border-color:#b44b4b;background:#fffafa;box-shadow:inset 0 0 0 1px rgba(180,75,75,.08)}.sfso-answer.is-correct{border-color:#4f7b5d;background:#fbfefc;box-shadow:inset 0 0 0 1px rgba(79,123,93,.08)}.sfso-feedback-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-height:38px;margin-top:9px}.sfso-status{display:flex;align-items:center;gap:6px;min-height:1.5em;margin:0;font-weight:600;flex:0 0 auto;white-space:nowrap}.sfso-status-icon{display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;border-radius:50%;font-weight:700;line-height:1}.sfso-status.is-correct{color:#285d3c}.sfso-status.is-wrong{color:#922f2f}.sfso-status.is-correct .sfso-status-icon{background:#dcefe2;color:#24633c}.sfso-status.is-wrong .sfso-status-icon{background:#f5dede;color:#9c2929}.sfso-button{border:1px solid #2f7748;border-radius:3px;background:#2f7748;color:#fff!important;padding:7px 11px;font:inherit;font-weight:600;line-height:1.25;cursor:pointer;white-space:nowrap}.sfso-button:hover,.sfso-button:focus-visible{background:#2f7748;color:#fff!important;filter:brightness(.96);outline:2px solid rgba(45,107,70,.18);outline-offset:1px}.sfso-button-secondary{border-color:#8a9299;background:#fff;color:#30363b!important}.sfso-button-secondary:hover,.sfso-button-secondary:focus-visible{background:#f5f6f7;color:#202428!important;filter:none;outline-color:rgba(70,78,85,.18)}.sfso-answer span.s_tooltip{margin-left:2px;align-self:center}.sfso-root.is-session-complete .sfso-bank{display:none}@media(max-width:600px){.sfso-root{padding:17px 0}.sfso-heading-row{margin-bottom:11px}.sfso-title{font-size:1rem}.sfso-area{margin:8px 0}.sfso-token{padding:9px 10px}.sfso-token.is-position-correct,.sfso-token.is-position-wrong{padding:8px 9px}.sfso-feedback-row{gap:6px}.sfso-button{padding:6px 9px;font-size:.88rem}.sfso-status{font-size:.9rem;gap:5px}}
.sfso-answer-tools{display:inline-flex;align-items:center;gap:8px;margin-left:2px;align-self:center}.sfso-answer-tools span.s_tooltip{margin-left:0}.sfso-replay-audio,.sfso-replay-audio .audio-player{display:inline-flex;align-items:center;margin:0}.sfso-replay-audio .hide{display:none!important}.sfso-replay-audio .play-audio{cursor:pointer}.sfso-replay-audio .play-audio:focus-visible{outline:2px solid rgba(56,93,120,.24);outline-offset:3px;border-radius:50%}

/* 0.3.4 compact interaction guidance and forgiving movement. */
.sfso-token{
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}
.sfso-bank .sfso-token{
  touch-action:pan-y;
  cursor:pointer;
}
.sfso-answer .sfso-token{
  touch-action:none;
  cursor:grab;
}
.sfso-answer .sfso-token:active,.sfso-root.is-dragging .sfso-answer .sfso-token{cursor:grabbing}
.sfso-token.is-drag-source{opacity:.34}
.sfso-token.is-auto-selected{animation:sfso-auto-selected .58s ease-out}
.sfso-bank.is-drop-target,.sfso-answer.is-drop-target{
  border-color:#385d78;
  box-shadow:inset 0 0 0 1px rgba(56,93,120,.16);
}
.sfso-drop-marker{
  flex:0 0 3px;
  align-self:stretch;
  min-height:34px;
  max-height:42px;
  margin:0 1px;
  border-radius:2px;
  background:#385d78;
  box-shadow:0 0 0 2px rgba(56,93,120,.12);
}
.sfso-drag-ghost,.sfso-demo-token{
  position:fixed;
  top:0;
  left:0;
  z-index:2147483000;
  pointer-events:none;
  box-sizing:border-box;
  border:1px solid #385d78;
  border-radius:3px;
  background:#fff;
  color:#202428;
  padding:8px 11px;
  font:inherit;
  line-height:1.25;
  text-align:center;
  box-shadow:0 6px 18px rgba(20,32,42,.22);
  opacity:.96;
  will-change:transform;
}
.sfso-demo-token{
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2147483001;
}
.sfso-token.is-demo-source{animation:sfso-demo-source-pulse 1.1s ease-in-out 2}
.sfso-answer.is-demo-target{
  border-color:#385d78;
  box-shadow:inset 0 0 0 2px rgba(56,93,120,.15),0 0 0 3px rgba(56,93,120,.08);
}
html.sfso-pointer-dragging,html.sfso-pointer-dragging *{
  cursor:grabbing!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
@keyframes sfso-auto-selected{
  0%{transform:translateY(-5px) scale(1.05);box-shadow:0 5px 12px rgba(56,93,120,.2)}
  100%{transform:translateY(0) scale(1);box-shadow:none}
}
@keyframes sfso-demo-source-pulse{
  0%,100%{transform:scale(1);box-shadow:none}
  50%{transform:scale(1.06);box-shadow:0 0 0 4px rgba(56,93,120,.13)}
}
@media(max-width:600px){
  .sfso-drag-ghost,.sfso-demo-token{padding:9px 10px}
  .sfso-drop-marker{min-height:36px}
}
@media(prefers-reduced-motion:reduce){
  .sfso-token.is-auto-selected,.sfso-token.is-demo-source{animation:none}
}

/* 0.3.1 batch/session controls. */
.sfso-more{
  border-color:#2f6f9f;
  background:#2f6f9f;
}
.sfso-more:hover,.sfso-more:focus-visible{
  border-color:#2f6f9f;
  background:#2f6f9f;
  outline-color:rgba(47,111,159,.2);
}
.sfso-status.is-info{color:#4d5963}
.sfso-status.is-info .sfso-status-icon{background:#e7edf2;color:#4d5963}
.sfso-answer-tools{gap:3px}
.sfso-root.is-empty .sfso-area{display:none}
.sfso-root.is-session-complete .sfso-status{white-space:normal}
.sfso-root.is-loading .sfso-token{pointer-events:none}


/* 0.3.6 temporary per-block design comparison. */
.sfso-root.sfso-design-unified{
  overflow:visible;
  border:1px solid #d7dce1;
  border-radius:8px;
  padding:0;
  background:#fff;
  box-shadow:0 2px 8px rgba(32,36,40,.06);
}
.sfso-root.sfso-design-unified.sfso-card-bg-blue{
  background:#eef4ff;
  border-color:#cfd9eb;
  box-shadow:0 3px 10px rgba(39,63,99,.08);
}
.sfso-root.sfso-design-unified.sfso-card-bg-warm{
  background:#faf6ee;
  border-color:#dfd6c7;
  box-shadow:0 3px 10px rgba(91,71,29,.08);
}
.sfso-design-unified.sfso-card-bg-blue .sfso-bank{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.sfso-design-unified.sfso-card-bg-blue .sfso-feedback-row{
  background:#eef4ff;
}

@media(max-width:600px){
  .sfso-root.sfso-design-unified.sfso-card-bg-blue{
    background:#e3edff;
    border-color:#bdcde7;
    box-shadow:0 3px 11px rgba(39,63,99,.11);
  }
  .sfso-design-unified.sfso-card-bg-blue .sfso-feedback-row{
    background:#e3edff;
  }
}
.sfso-design-unified.sfso-card-bg-warm .sfso-bank{
  background:#fffaf2;
  border-color:#e5dccf;
}
.sfso-design-unified .sfso-heading-row{
  align-items:baseline;
  margin:0;
  padding:13px 14px 6px;
}
.sfso-design-unified .sfso-title{
  font-size:1.08rem;
  line-height:1.3;
}
.sfso-design-unified .sfso-heading-row + .sfso-area{
  margin:0;
  padding:0 14px 8px;
}
.sfso-design-unified .sfso-heading-row + .sfso-area + .sfso-area{
  margin:0;
  padding:0 14px 12px;
}
.sfso-design-unified .sfso-bank,
.sfso-design-unified .sfso-answer{
  border-radius:5px;
}
.sfso-design-unified .sfso-bank{
  background:#f7f8f9;
  border-color:#d9dee3;
}
.sfso-design-unified .sfso-answer{
  min-height:55px;
  background:#fff7cf;
  border-color:#d9ad17;
  box-shadow:inset 0 0 0 1px rgba(217,173,23,.08);
}
.sfso-design-unified .sfso-answer.is-demo-target{
  border-color:#b98d00;
  box-shadow:inset 0 0 0 2px rgba(185,141,0,.16),0 0 0 3px rgba(185,141,0,.08);
}
.sfso-design-unified .sfso-answer.is-wrong{
  border-color:#b44b4b;
  background:#fff1da;
  box-shadow:inset 0 0 0 1px rgba(180,75,75,.1);
}
.sfso-design-unified .sfso-answer.is-correct{
  border-color:#4f7b5d;
  background:#f6f4cf;
  box-shadow:inset 0 0 0 1px rgba(79,123,93,.1);
}
.sfso-design-unified .sfso-feedback-row{
  min-height:40px;
  margin:0;
  padding:9px 14px 10px;
  gap:12px;
  border-top:0;
  background:#fff;
}
.sfso-design-unified .sfso-token{
  border-radius:4px;
}
@media(max-width:600px){
  .sfso-root.sfso-design-unified{padding:0}
  .sfso-design-unified .sfso-heading-row{padding:11px 11px 5px}
  .sfso-design-unified .sfso-heading-row + .sfso-area{padding:0 11px 7px}
  .sfso-design-unified .sfso-heading-row + .sfso-area + .sfso-area{padding:0 11px 10px}
  .sfso-design-unified .sfso-feedback-row{padding:8px 11px 9px;gap:9px}
}


/* 0.3.13: blue tiles sit directly on the card; stronger mobile blue tint. */
.sfso-design-unified .sfso-heading-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  column-gap:14px;
  overflow:visible;
  position:relative;
  z-index:10;
}
.sfso-design-unified .sfso-title{
  min-width:0;
}
.sfso-design-unified .sfso-progress{
  align-self:baseline;
}
.sfso-design-unified .sfso-howto-tooltip{
  margin-left:4px;
  vertical-align:baseline;
  position:relative;
  top:0;
  cursor:pointer;
}
.sfso-design-unified .sfso-howto-tooltip .tooltip_templates{
  z-index:10000;
}
.sfso-design-unified .sfso-howto-tooltip .tooltip_content{
  white-space:normal;
  text-align:left;
  color:#202428!important;
  font-weight:400;
}
@media(max-width:600px){
  .sfso-design-unified .sfso-heading-row{column-gap:9px}
  .sfso-design-unified .sfso-howto-tooltip{margin-left:3px}
}

/* 0.3.14: desktop-only optical alignment for the replay icon beside the T tooltip. */
@media(min-width:769px){
  .sfso-replay-audio .play-audio{
    position:relative;
    top:-1px;
  }
}

/* 0.4.0: permanent Soft blue design with page-local, variable-length sentence batches. */