.comic-entry{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff8df;border:1px solid #dec67d;border-radius:12px;padding:22px 25px;margin:0 0 28px;transition:background .18s,box-shadow .18s}.comic-entry:hover{color:var(--ink);background:#fff1c2;box-shadow:0 4px 15px #58441c0b}.comic-entry strong{display:block;font-size:21px;line-height:1.6;margin:5px 0}.comic-entry p{font-size:13px;color:var(--muted);margin:0}.comic-entry .arrow{font-size:26px;flex-shrink:0}.comic-layout{display:grid;grid-template-columns:minmax(0,720px) minmax(220px,1fr);gap:27px;align-items:start}.comic-page{margin:0;min-width:0}.comic-page img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:#fff}.comic-page figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:13px 0 22px}.comic-page figcaption a{text-decoration:underline;text-underline-offset:3px}.comic-guide{position:sticky;top:25px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:10px}.comic-guide h2{font-size:23px;margin:18px 0;line-height:1.6}.comic-guide p{font-size:14px}.comic-guide .small{font-size:12px;margin:18px 0 0}.comic-cta{display:block;border-radius:7px;background:var(--ink);color:#fff;font-size:14px;text-align:center;padding:13px 15px;font-weight:600;line-height:1.6;transition:background .18s,color .18s}.comic-cta:hover{background:#464c40;color:#fff}.comic-cta.secondary{margin-top:25px;background:var(--pale);color:var(--ink)}.comic-cta.secondary:hover{background:#f5e5b5}.comic-bottom{max-width:960px;margin:0 auto}.comic-transcript{margin:10px 0 26px;padding:18px 24px;font-size:14px}.comic-transcript summary{cursor:pointer;font-weight:600}.comic-transcript ol{padding-left:22px;margin-bottom:0}.comic-transcript li{padding:12px 0;line-height:1.9}.comic-check{scroll-margin-top:20px}.comic-check>h2{margin-top:10px}.comic-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:25px 0 18px}.comic-comparison>div{background:var(--paper);border:1px solid var(--line);padding:20px 15px;border-radius:8px;text-align:center;display:grid;grid-template-rows:44px 70px auto;align-items:center}.comic-comparison small{font-size:13px;color:var(--ink)}.comic-comparison strong{display:block;font-size:44px;font-weight:650;line-height:1.5}.comic-comparison strong span{font-size:17px;margin-left:6px}.comic-comparison p{font-size:12px;color:var(--muted);margin:10px 0 0}.comic-comparison .comic-result{border-color:#d4b14e;background:#fff6d8}.comic-action{border-left:3px solid var(--gold);padding:5px 0 5px 18px;margin-top:30px}.comic-action p{font-size:18px;line-height:1.8;margin:12px 0 8px}.comic-action small{font-size:12px}.comic-correct{background:#edf3ec;color:var(--green)}[data-comic-answer][aria-pressed=true]{border-color:var(--green);background:#edf3ec}.comic-link-note{font-size:13px;margin-top:18px}.comic-link-note a{text-decoration:underline;color:var(--green)}
@media(max-width:1200px){.comic-layout{grid-template-columns:1fr;max-width:800px;margin:auto}.comic-guide{position:static;display:none}.comic-bottom{max-width:800px}}
@media(max-width:620px){.comic-entry{padding:19px;gap:14px}.comic-entry strong{font-size:19px}.comic-page{margin:0 -10px}.comic-page img{border-radius:3px}.comic-page figcaption{padding:0 10px}.comic-transcript{padding:16px 18px}.comic-comparison{gap:7px}.comic-comparison>div{padding:12px 6px;grid-template-rows:44px 53px auto}.comic-comparison small{font-size:12px}.comic-comparison strong{font-size:30px}.comic-comparison strong span{font-size:13px;margin-left:3px}.comic-comparison p{font-size:11px}.comic-action p{font-size:16px}.comic-check>h2{font-size:21px}}
/* The story catalogue shares the existing learning palette. */
.comic-library-status{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#fff8df;border:1px solid #e1cc8d;border-radius:10px;padding:18px 22px;margin-bottom:25px}.comic-library-status strong{font-size:15px}.comic-library-status p{margin:4px 0 0}.comic-library-status a{font-size:14px;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}.comic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.comic-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:transform .18s,box-shadow .18s,border-color .18s}.comic-card:hover{color:var(--ink);transform:translateY(-3px);border-color:#c0a85d;box-shadow:0 7px 22px #3d372015}.comic-card-image{aspect-ratio:1.48;overflow:hidden;position:relative;background:white;border-bottom:1px solid var(--line)}.comic-card-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.comic-card-image>span{position:absolute;bottom:10px;left:12px;font-size:10px;letter-spacing:.1em;font-weight:650;background:var(--ink);color:white;padding:4px 9px;border-radius:4px}.comic-card-body{padding:20px;display:grid;grid-template-rows:24px 3.3em 1fr auto;gap:13px}.comic-card-body>.pill{justify-self:start;align-self:start}.comic-card h2{font-size:17px;line-height:1.65;margin:0}.comic-card p{font-size:13px;color:var(--muted);min-height:5.1em;margin:0}.comic-card-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:14px}.comic-card-footer strong{font-size:13px}.comic-card-footer small{font-size:10px}.comic-library-note{margin:24px 0 0}.comic-reset{font-size:12px;margin-top:14px;background:transparent}.comic-reader-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;font-size:13px}.comic-reader-nav>a{text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.comic-reader-nav label{display:flex;align-items:center;gap:10px;min-width:0}.comic-reader-nav select{max-width:360px;min-width:0;border:1px solid var(--line);background:white;border-radius:7px;padding:9px 11px;font-size:13px}.comic-pagination{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:25px 0 0}.comic-pagination a{background:white;border:1px solid var(--line);padding:18px 22px}.comic-pagination a:hover{background:#fff8df;border-color:#dec67d}.comic-pagination small,.comic-pagination strong{display:block}.comic-pagination small{font-size:11px;margin-bottom:7px}.comic-pagination strong{font-size:15px;line-height:1.7}.comic-pagination .next{background:#fff8df}.comic-comparison>div{grid-template-rows:44px 70px auto}.comic-comparison strong{font-size:clamp(19px,2.7vw,33px);line-height:1.45;overflow-wrap:anywhere}.comic-notes p{font-size:13px;margin:9px 0 0}.comic-saved{font-size:12px}
@media(max-width:1100px){.comic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.comic-card-body{padding:17px}.comic-card-footer{gap:5px}.comic-card-footer strong{font-size:12px}.comic-reader-nav label{flex-direction:column;align-items:flex-start;gap:4px}}
@media(max-width:620px){.comic-grid{grid-template-columns:1fr;gap:20px}.comic-card-body{grid-template-rows:auto auto auto auto;gap:12px;padding:20px}.comic-card h2{font-size:19px}.comic-card p{min-height:0}.comic-card-footer strong{font-size:13px}.comic-library-status{align-items:flex-start;flex-direction:column;padding:18px;gap:10px}.comic-reader-nav{flex-direction:column;align-items:stretch;gap:13px}.comic-reader-nav label{display:block;font-size:12px}.comic-reader-nav select{display:block;width:100%;max-width:none;margin-top:6px}.comic-comparison{grid-template-columns:1fr}.comic-comparison>div{grid-template-rows:auto auto auto;padding:15px}.comic-comparison strong{font-size:29px;margin-top:6px}.comic-comparison p{font-size:12px;margin-top:4px}.comic-pagination{gap:9px}.comic-pagination a{padding:14px}.comic-pagination strong{font-size:13px}.comic-page figcaption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.comic-card:hover{transform:none}}