/* Sentence parts stay together: a two-word subject still occupies one slot. */
.wo-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 12px; background: var(--workbook-sage); border-radius: 10px; color: var(--workbook-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.wo-toggle input { width: 20px; height: 20px; accent-color: var(--workbook-ink); cursor: pointer; }
.wo-demo { border-top: 3px solid var(--workbook-ink); }
.wo-demo > .cs-muted { margin-top: 5px; }
.wo-example { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 14px; }
.wo-example > span { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--workbook-soft); font-size: 17px; font-weight: 600; }
.wo-example small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.wo-example > .wo-verb, .wo-token.wo-verb { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.wo-example .wo-verb small { color: var(--accent-dark); }
.wo-demo-sentence { font-size: 19px; font-weight: 600; line-height: 1.6; }
.wo-note { margin-top: 18px; padding: 14px 16px; background: var(--workbook-sage); border-radius: 10px; color: var(--workbook-ink); font-size: 14px; line-height: 1.7; }
.wo-rules { display: grid; gap: 18px; margin-top: 22px; }
.wo-rules article { position: relative; padding-left: 42px; }
.wo-rules h3, .wo-faq h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.wo-rule-number { position: absolute; left: 0; top: 0; color: var(--accent); font-size: 13px; font-weight: 700; }
.wo-rules p { line-height: 1.7; }
.wo-pattern { color: var(--workbook-ink); font-size: 13px; margin-bottom: 6px; }
.wo-rules p[lang] { font-size: 17px; }
.wo-rules p[lang] strong { color: var(--accent-dark); }
.wo-caution { margin-top: 12px; }
.wo-progress { font-size: 12px; color: var(--workbook-ink); font-weight: 700; }
.wo-builder > .cs-muted { margin-top: 8px; }
.wo-prompt { padding: 16px 18px; margin: 22px 0; background: var(--workbook-sage); border-radius: 10px; }
.wo-prompt > p:first-child { font-size: 18px; font-weight: 600; }
.wo-prompt .cs-muted { margin-top: 6px; color: var(--workbook-ink); }
.wo-tray { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-height: 104px; margin-top: 9px; padding: 14px; border: 1.5px dashed var(--text-muted); border-radius: 12px; background: var(--workbook-soft); }
.wo-placeholder { align-self: center; color: var(--text-muted); font-size: 14px; }
.wo-bank { display: flex; flex-wrap: wrap; gap: 8px; min-height: 60px; margin: 9px 0; padding: 8px 0; border: 1px solid transparent; border-radius: 10px; }
.wo-token { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; max-width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 9px; background: var(--card); color: var(--text); font: 600 15px 'DM Sans', sans-serif; cursor: grab; }
.wo-token:hover { border-color: var(--workbook-ink); }
.wo-token small { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--workbook-sage); color: var(--workbook-ink); font-size: 10px; }
.wo-token:active { cursor: grabbing; }
.wo-token.is-dragging { opacity: .5; }
.is-drop-target { outline: 2px solid var(--workbook-ink); outline-offset: 3px; }
.wo-position { min-height: 42px; margin: 9px 0 16px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.wo-position.is-right { color: var(--de); }
.wo-position.is-wrong { color: var(--accent-dark); }
.wo-keyboard { font-size: 12px; }
.wo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.wo-actions .cs-button:disabled { opacity: .5; cursor: default; }
.wo-feedback { display: grid; gap: 5px; padding: 16px 18px; margin-top: 18px; border: 1px solid; border-left-width: 4px; border-radius: 10px; font-size: 14px; line-height: 1.6; }
.wo-feedback strong { font-size: 16px; }
.wo-feedback.is-right { background: var(--de-bg); color: var(--de); }
.wo-feedback.is-wrong { background: var(--accent-light); color: var(--accent-dark); }
.wo-answer { margin: 12px 0; padding: 14px 16px; border-radius: 10px; background: var(--workbook-sage); font-size: 17px; line-height: 1.7; color: var(--workbook-ink); }
.wo-next { margin-top: 14px; }
.wo-round-result { padding-top: 22px; }
.wo-round-result h3 { font: 700 25px 'Playfair Display', Georgia, serif; }
.wo-round-result p { margin: 12px 0 20px; font-size: 14px; line-height: 1.7; }
.wo-faq { display: grid; gap: 20px; margin-top: 20px; }
.wo-faq p { font-size: 14.5px; line-height: 1.8; }
.wo-faq a { color: var(--workbook-ink); text-underline-offset: 3px; }
@media (max-width: 700px) {
  .wo-example > span { font-size: 15px; padding: 10px 12px; }
  .wo-tray { padding: 10px; gap: 7px; }
  .wo-token { font-size: 14px; padding: 10px 11px; }
  .wo-actions { gap: 6px; }
  .wo-actions .cs-button, .wo-next { width: 100%; }
  .wo-actions .cs-text-button { margin: 0 auto; }
  .wo-feedback { padding: 14px; }
  .wo-rules article { padding-left: 32px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }