.vocab-page .h1 { font-size: clamp(32px,3.6vw,48px); line-height: 1.12; max-width: 19ch; }
.vocab-page .section { padding-block: clamp(40px,5vw,64px); }
.vocab-hero-grid { display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center; }
.vocab-page .section-head { max-width:760px; }
.vocab-page .section-head p { line-height:1.7; }
.vocab-small { font-size:.875rem;line-height:1.65;color:#4b5d55; }
.vocab-word-card { background:#fff;border:1px solid #d7e2db;border-radius:24px;padding:24px;box-shadow:0 16px 42px #244d3412; }
.vocab-label { font-size:.72rem;letter-spacing:.08em;font-weight:700;color:#0b7165; }
.vocab-word { font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.03em;margin:16px 0; }
.vocab-word span { font-size:.85rem;font-weight:400;letter-spacing:0;color:#59685e; }
.vocab-prompt { font-size:1.125rem;font-weight:600; }
.vocab-options { list-style:none;padding:0;display:grid;gap:10px; }
.vocab-options li { display:flex;align-items:center;gap:12px;border:1px solid #dedfd7;border-radius:12px;padding:12px;font-size:.9rem;line-height:1.5; }
.vocab-options li>span { display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border-radius:50%;background:#f2f1eb; }
.vocab-options .vocab-right { border-color:#83bba2;background:#edf7ef; }
.vocab-options strong { margin-left:auto;font-size:.7rem;color:#0a6659; }
.vocab-builder { display:grid;grid-template-columns:1fr 1fr;border:1px solid #d7e2db;border-radius:22px;overflow:hidden;background:#fff; }
.vocab-editor,.vocab-output { padding:clamp(20px,3vw,32px);min-width:0; }
.vocab-builder h3 { font-size:1.1rem;margin:0 0 22px; }
.vocab-output { background:#eef7f2;border-left:1px solid #d7e2db; }
.vocab-editor label { display:block;font-size:.9rem;font-weight:600;margin:18px 0 8px; }
.vocab-builder input:not([type=radio]),.vocab-builder textarea { width:100%;box-sizing:border-box;padding:12px;border:1px solid #8da495;border-radius:10px;font:inherit;font-size:1rem;line-height:1.6;background:#fff;color:#1d3025; }
.vocab-builder textarea { resize:vertical;min-height:175px;white-space:pre-wrap; }
.vocab-actions { display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:20px; }
.vocab-actions a { color:#08665a;font-weight:600;font-size:.9rem;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center; }
.vocab-page [hidden] { display:none; }
.vocab-page [id] { scroll-margin-top:100px; }
.vocab-try { margin-top:18px;border-top:1px solid #c8dace;padding-top:12px; }
.vocab-try summary { font-weight:600;cursor:pointer;min-height:44px;line-height:1.7;padding-block:10px; }
.vocab-try [role=group] { border:0;padding:16px 0;margin:0;min-width:0; }
.vocab-try #vocab-learner-question { font-weight:600;overflow-wrap:anywhere;margin:0 0 12px; }
.vocab-try label { display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;overflow-wrap:anywhere; }
.vocab-try input[type=radio] { flex-shrink:0;width:18px;height:18px;accent-color:#0f766e; }
.vocab-handoff { max-width:800px;margin-top:32px;line-height:1.8; }
.vocab-handoff li { margin-bottom:10px; }.vocab-handoff p { font-size:.95rem;color:#4b5d55; }
.vocab-band { background:#f1f3ec; }
.vocab-format-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.vocab-format-grid article { padding:24px;border:1px solid #d7e0d7;border-radius:18px;background:#fff;min-width:0; }
.vocab-format-grid h3 { font-size:1.2rem;margin:14px 0; }.vocab-format-grid p { font-size:1rem;line-height:1.75; }
.vocab-page a:not(.btn) { text-underline-offset:4px; }
.vocab-workflow { display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center; }
.vocab-workflow figure { margin:0;min-width:0; }.vocab-workflow img { display:block;width:100%;height:auto;border:1px solid #d7e2db;border-radius:16px; }
.vocab-workflow figcaption { font-size:.875rem;line-height:1.6;color:#4b5d55;padding:14px 0; }
.vocab-faq { max-width:900px; }.vocab-faq details { background:#fff;border:1px solid #d7e2db;border-radius:14px;padding:20px;margin-bottom:12px; }
.vocab-faq summary { cursor:pointer;font-weight:600;line-height:1.6;min-height:44px;display:list-item; }
.vocab-faq p { line-height:1.75; }.vocab-final { margin-top:48px;max-width:750px; }.vocab-final h2 { font-size:clamp(25px,3vw,36px);line-height:1.2; }
.vocab-page :focus-visible { outline:3px solid #0b7165;outline-offset:4px; }
@media(max-width:960px) { .vocab-hero-grid,.vocab-workflow { grid-template-columns:1fr;gap:28px; }.vocab-format-grid { grid-template-columns:1fr; } }
@media(max-width:760px) { .vocab-builder { grid-template-columns:1fr; }.vocab-output { border-left:0;border-top:1px solid #d7e2db; } }
.vocab-story-handoff { font-size:.8rem;font-weight:600;line-height:1.8;padding:12px;border:1px solid #d7e2db;border-radius:10px; }
.vocab-story-handoff span { color:#0b7165;padding-inline:4px; }
.vocab-story-steps { display:flex;flex-wrap:wrap;gap:8px;margin-top:16px; }
.vocab-story-steps button,.vocab-story-pause { min-height:44px;border:1px solid #b2ccbe;border-radius:10px;padding:8px 12px;background:#fff;color:#0b6658;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer; }
.vocab-story-steps button[aria-pressed=true] { color:#fff;background:#0f766e;border-color:#0f766e; }
.vocab-story-pause { border:0;padding-inline:0;text-decoration:underline;text-underline-offset:4px; }
[data-story-part] { outline:2px solid transparent;outline-offset:6px;transition:outline-color .3s ease,background-color .3s ease; }
[data-story-part].is-story-active { outline-color:#0f766e;border-radius:10px; }
@media(prefers-reduced-motion:reduce) { .vocab-page * { transition:none!important;scroll-behavior:auto!important; } }
.vocab-page .vocab-hero { padding-block:44px 36px; }
.vocab-hero .vocab-small>a { color:#0b7165;font-weight:600;text-decoration:underline;display:inline-flex;align-items:center;min-height:44px; }