[data-explanation-feedback] {margin-top:24px;border-top:1px solid var(--line);padding-top:16px}
[data-explanation-feedback] label {display:block;margin:12px 0;line-height:1.6}
[data-explanation-feedback] fieldset {border:1px solid var(--line);border-radius:8px;margin:16px 0;padding:12px}
[data-explanation-feedback] fieldset label {display:flex;gap:10px;align-items:flex-start}
[data-explanation-feedback] fieldset input {flex-shrink:0;margin-top:6px}
[data-repeat-actions] .button {margin:4px 4px 4px 0}
[data-repeat-actions] h2,[data-repetition-hub] h2 {margin-top:0}
[data-understanding-status] {font-size:14px;line-height:1.6}
.button[data-understanding]{margin:0 6px 8px 0}
[data-explanation-feedback] .feedback-steps>summary {cursor:pointer;color:var(--berry);font-weight:650;line-height:1.6}
.solution.understanding{padding:14px 24px 16px}
.solution.understanding h4{margin-top:0}
.solution.understanding [data-understanding-status]:empty{display:none}
/* "?" next to a heading: its explanation appears under the heading on hover or tap (focus). */
.solution.understanding h4{position:relative}
.hint{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:4px;padding:0;border:1px solid #cfccc5;border-radius:50%;background:var(--paper);color:var(--muted);font-size:12px;font-weight:700;line-height:1;vertical-align:2px;cursor:help}
.hint:hover,.hint:focus-visible{border-color:var(--berry);color:var(--berry)}
.hint::after{content:attr(data-hint);position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;padding:8px 12px;border-radius:8px;background:var(--ink);color:white;font-size:13px;font-weight:400;line-height:1.45;text-align:left;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s;pointer-events:none}
.hint:hover::after,.hint:focus::after{opacity:1;visibility:visible;transition:opacity .15s}