.oksi-learning, .oksi-practice { margin:20px 0; }
.oksi-learning-picker { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.oksi-learning button, .oksi-practice button { min-height:44px; padding:10px 14px; border:1px solid var(--oksi-border); border-radius:5px; background:#fff; color:var(--oksi-burgundy-dark); font:inherit; cursor:pointer; text-align:left; }
.oksi-learning button:hover, .oksi-practice button:hover { background:var(--oksi-burgundy-soft); border-color:var(--oksi-burgundy); }
.oksi-learning button[aria-pressed="true"], .oksi-practice button[aria-pressed="true"] { border-color:var(--oksi-burgundy); background:var(--oksi-burgundy-soft); box-shadow:inset 0 0 0 1px var(--oksi-burgundy); }
.oksi-learning :is(button,a,input):focus-visible, .oksi-practice :is(button,a):focus-visible { outline:2px solid var(--oksi-burgundy); outline-offset:3px; }
.markdown-section .oksi-learning-body h2, .markdown-section .oksi-practice h2 { margin:0 0 12px; }
.oksi-learning-body h2:focus:not(:focus-visible), .oksi-practice h2:focus:not(:focus-visible) { outline:none; }
.markdown-section .oksi-learning-role, .markdown-section .oksi-learning-note { font-size:14px; color:var(--oksi-muted); }
.markdown-section .oksi-learning-role { font-weight:600; }
.markdown-section .oksi-learning-caution { padding:12px 14px; border-left:3px solid var(--oksi-burgundy); background:var(--oksi-burgundy-soft); }
.markdown-section .oksi-learning-progress { padding:12px 0; border-bottom:1px solid var(--oksi-border); font-size:14px; }
.markdown-section .oksi-learning-steps { list-style:none; padding:0; margin:0; }
.markdown-section .oksi-learning-step { margin:0 0 14px; padding:16px; border:1px solid var(--oksi-border); border-radius:5px; background:#fff; }
.markdown-section .oksi-learning-step h3 { margin:0 0 10px; font-size:19px; }
.markdown-section .oksi-learning-step p { margin:9px 0; }
.oksi-learning-step.is-done { border-left:3px solid var(--oksi-burgundy); }
.oksi-learning-check { display:flex; gap:10px; align-items:center; margin:12px 0 0; min-height:44px; cursor:pointer; }
.oksi-learning-check input { width:20px; height:20px; flex-shrink:0; accent-color:var(--oksi-burgundy); }
.oksi-learning-result { color:var(--oksi-text); }
.oksi-practice-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:24px; align-items:start; }
.markdown-section .oksi-practice-figure { margin:0; min-width:0; }
.oksi-practice-image { display:block; max-width:350px; overflow:hidden; }
.markdown-section .oksi-practice-image img { display:block; width:100%; max-width:none; height:auto; max-height:none; margin:0; }
.markdown-section .oksi-practice-figure figcaption { max-width:350px; font-size:13px; line-height:1.5; margin-top:8px; color:var(--oksi-muted); }
.oksi-practice-question { min-width:0; }
.oksi-practice fieldset { border:0; margin:0; padding:0; min-width:0; }
.oksi-practice legend { padding:0; margin:0 0 14px; font-weight:650; line-height:1.5; }
.oksi-practice-option { display:block; width:100%; margin:0 0 9px; }
.oksi-practice-feedback:not(:empty) { padding:12px 14px; border-left:3px solid var(--oksi-burgundy); background:var(--oksi-burgundy-soft); }
.oksi-practice-nav { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; }
@media (max-width:650px) {
  .oksi-practice-layout { grid-template-columns:1fr; gap:18px; }
  .oksi-practice-image, .markdown-section .oksi-practice-figure figcaption { max-width:300px; }
  .oksi-learning-choice { width:100%; }
  .markdown-section .oksi-learning-step { padding:13px; }
}
@media (prefers-reduced-motion:no-preference) {
  .oksi-learning button, .oksi-practice button { transition:background-color 160ms ease,border-color 160ms ease; }
}
@media print {
  .oksi-learning-picker, .oksi-learning-reset, .oksi-practice-nav { display:none !important; }
  .oksi-learning-step { break-inside:avoid; }
  .oksi-practice-layout { display:block; }
  .oksi-practice-image { max-width:220px; }
}