.learn-page .kire-game-canvas { position: relative; }
.learn-overlay { position:absolute; z-index:20; pointer-events:none; overflow:hidden; font-family:Georgia,'Times New Roman',serif; --learn-font:18px; }
.learn-shade { position:absolute; inset:0; background:rgba(2,11,16,.70); transition:opacity 400ms; }
.learn-overlay.is-revealed .learn-shade { opacity:0; }
.learn-annotations { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.learn-target { fill:rgba(255,211,103,.06); stroke:#ffe396; stroke-width:4; filter:drop-shadow(0 1px 3px #000); }
.learn-arrow, .learn-arrow-head { fill:none; stroke:#ffe396; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 2px #000); }
.learn-arrow-label { fill:#fff2ca; font:bold 21px Georgia,serif; paint-order:stroke; stroke:#071723; stroke-width:6px; stroke-linejoin:round; }
.learn-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:86%; max-width:760px; max-height:72%; overflow-y:auto; padding:clamp(14px,2vw,26px); border:2px solid #c99a53; border-radius:16px; background:linear-gradient(145deg,#123044,#061722); box-shadow:0 16px 45px #0009,inset 0 0 0 4px #f3dfad08; color:#f3dfad; cursor:pointer; pointer-events:auto; font-size:var(--learn-font); line-height:1.45; transition:top 450ms cubic-bezier(.22,.7,.25,1),max-height 450ms; scrollbar-width:thin; scrollbar-color:#c99a53 #061722; }
.learn-panel:focus-visible { outline:3px solid #ffe396; outline-offset:3px; }
.learn-panel-kicker { color:#c99a53; font-size:.60em; letter-spacing:.18em; margin-bottom:.6em; }
.learn-panel h1 { margin:0 0 .7em; font-size:1.14em; letter-spacing:.025em; }
.learn-panel p { margin:0 0 .8em; }
.learn-overlay.is-revealed .learn-panel { background:linear-gradient(145deg,#123044f5,#061722f5); }
.learn-exit { position:absolute; top:2%; left:3%; pointer-events:auto; color:#f3dfad; text-decoration:none; font-size:max(13px,.82 * var(--learn-font)); padding:4px 7px; border-radius:4px; background:#061722b8; }
.learn-navigation { position:absolute; bottom:1.5%; left:3%; width:94%; display:flex; justify-content:center; align-items:center; gap:8px; }
.learn-navigation button { pointer-events:auto; cursor:pointer; color:#f3dfad; background:#061722ef; border:1px solid #c99a53; border-radius:6px; padding:8px 12px; min-height:36px; font:600 max(12px,.75 * var(--learn-font)) Arial,sans-serif; }
.learn-navigation button:disabled { opacity:.4; cursor:default; }
.learn-navigation button:focus-visible,.learn-exit:focus-visible { outline:2px solid #ffe396; outline-offset:2px; }
.learn-counter { color:#f3dfad; padding:7px; background:#061722b8; font:600 max(12px,.7 * var(--learn-font)) Arial,sans-serif; }
.learn-loading { color:#f3dfad; padding:20px; text-align:center; }
.learn-loading button { display:block; margin:12px auto; padding:10px; cursor:pointer; }
@media(prefers-reduced-motion:reduce) { .learn-panel,.learn-shade { transition:none; } }

.learn-paragraphs p { white-space: pre-line; }
.learn-panel a { color: #ffe396; text-decoration: underline; }
.learn-inline-images { display: flex; align-items: flex-start; justify-content: center; gap: 18px; margin: 12px 0; }
.learn-inline-images figure { flex: 0 1 100px; margin: 0; text-align: center; }
.learn-inline-images img { width: 64px; height: 64px; object-fit: contain; max-width: 100%; }
.learn-inline-images figcaption { margin-top: 5px; font-size: .7em; line-height: 1.2; }