#howDialog{box-sizing:border-box;width:min(94vw,460px);max-height:94dvh;overflow-y:auto;padding:20px;background:#102e50;color:#fff9e9;border:1px solid #6e91ad;border-radius:20px;box-shadow:0 16px 60px #0009;touch-action:pan-y}#howDialog::backdrop{background:#051325df}.lesson-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font:800 12px system-ui;letter-spacing:1.4px;color:#bbd0e1}.lesson-head button{width:40px;height:40px;border:1px solid #7592ab;border-radius:50%;background:#193f63;color:white;font-size:26px;padding:0;cursor:pointer}.lesson-notes{padding:0 0 16px;min-height:145px}#lessonCount{font:700 12px system-ui;color:#b9cfe1;margin:6px 0 12px}#howDialog #lessonTitle{text-align:left;font:900 clamp(21px,5.8vw,26px)/1.12 system-ui;color:#ffe16e;margin:0 0 12px}#lessonCopy{text-align:left;font:500 17px/1.45 system-ui;margin:0;color:#fff9ed}.lesson-window{position:relative;overflow:hidden;border:2px solid #7598b2;border-radius:14px;background:#90cce7;box-shadow:0 4px 12px #0004}#lessonCanvas{position:static;inset:auto;transform:none;touch-action:pan-y;display:block;width:100%;height:auto;aspect-ratio:390/300;margin:0;max-height:none;border:0;border-radius:0;object-fit:contain}#lessonDots{display:flex;justify-content:center;gap:0;margin:9px 0}#lessonDots button{position:relative;width:32px;height:32px;border:0;background:none;padding:0;cursor:pointer}#lessonDots button:after{content:'';display:block;width:8px;height:8px;border:1px solid #ffe16e;border-radius:50%;margin:auto}#lessonDots button[aria-current=true]:after{background:#ffe16e}.lesson-nav{display:flex;gap:12px}.lesson-nav button{font:800 14px system-ui;min-height:48px;border-radius:11px;border:1px solid #7c9bb6;padding:12px;background:#1a4268;color:#fff;flex:1;cursor:pointer}.lesson-nav #lessonNext{background:#f5ce49;color:#102e50;border-color:#f5ce49;flex:1.4}.lesson-nav button:disabled{opacity:.35;cursor:default}@media(max-height:680px){#howDialog{padding:14px}.lesson-notes{min-height:0;padding-bottom:12px}#lessonCopy{font-size:16px}#howDialog #lessonTitle{font-size:21px}#lessonCanvas{max-height:33dvh;object-fit:contain}.lesson-window{background:#102e50}#lessonDots{margin:4px 0}}
/* Keep ten steps comfortably inside narrow phones; images remain in the window. */
#lessonDots{gap:0;flex-wrap:wrap}#lessonDots button{width:26px;height:30px}#lessonCopy{font-size:16px;line-height:1.45}.lesson-notes{min-height:150px}#lessonCanvas{image-rendering:auto}@media(max-width:360px){#howDialog{padding:14px}#howDialog #lessonTitle{font-size:21px}#lessonCopy{font-size:15px}#lessonDots button{width:24px}}@media(max-height:680px){.lesson-notes{min-height:0}#lessonCopy{font-size:15px}}