.learning-guide { margin:32px 0; }
.learning-guide > h2 { font-size:clamp(24px,4vw,32px); }
.learn-example { border-top:1px solid #641b2730; padding:24px 0; }
.learn-example h3 { margin:0 0 18px; color:var(--wine); font-size:20px; line-height:1.5; }
.learn-number { display:inline-grid; place-items:center; min-width:30px; height:30px; margin-inline-end:6px; border-radius:50%; background:var(--wine); color:var(--cream); font-size:15px; }
.learn-table { display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px 40px; padding:18px; background:#641b2708; border-radius:10px; }
.learn-table p { margin:0 0 10px; font-size:14px; font-weight:600; }
.learn-cards { display:flex; flex-wrap:wrap; gap:8px; }
.learn-card { display:inline-flex; flex-direction:column; justify-content:space-between; width:62px; height:88px; border:1px solid #641b2730; border-radius:7px; padding:5px 8px; background:#fff; color:#29262b; font:bold 22px/1.2 Georgia,serif; box-shadow:0 2px 0 #641b2720; }
.learn-card > span:last-child { align-self:flex-end; font-size:32px; }
.learn-card.learn-red { color:#b32e40; }
.learn-cover { display:none; }
.learning-guide[data-interactive] .learn-example:not(.learn-revealed) .learn-face { display:none; }
.learning-guide[data-interactive] .learn-example:not(.learn-revealed) .learn-cover { display:grid; place-items:center; width:62px; height:88px; border-radius:7px; background:var(--wine); color:var(--gold); font-size:32px; }
.learn-actions { display:none; gap:10px; flex-wrap:wrap; margin:18px 0 8px; }
.learning-guide[data-interactive] .learn-actions { display:flex; }
.learn-actions button { cursor:pointer; padding:10px 14px; min-height:44px; max-width:100%; border:1px solid var(--wine); border-radius:7px; background:#fff8ee; color:var(--wine); font:600 15px/1.4 system-ui,sans-serif; overflow-wrap:anywhere; }
.learn-actions button[aria-pressed=true] { background:var(--wine); color:var(--cream); }
.learn-actions button:focus-visible,.learn-example summary:focus-visible { outline:3px solid #b37410; outline-offset:3px; }
.learn-result:empty { display:none; }
.learn-result { font-weight:700; color:var(--wine); }
.learn-example details { margin-top:14px; }
.learn-example summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; color:var(--wine); }
.learn-example details p { max-width:75ch; }
.learn-screenshot figure { margin:18px 0 0; }
.learn-screenshot img { display:block; width:min(100%,390px); height:auto; border-radius:10px; border:1px solid #641b2730; }
.learn-screenshot figcaption { font-size:14px; margin-top:8px; color:#735c64; }
@media(max-width:440px) { .learn-table { padding:12px; gap:18px; } .learn-card,.learn-cover { width:52px; height:76px; } .learning-guide[data-interactive] .learn-example:not(.learn-revealed) .learn-cover { width:52px; height:76px; } }