.hw-lesson{--hw-blue:#326477;--hw-fill:#dcebf0;--hw-gold:#e9be70;--hw-leaf:#3d7858}
.hw-lesson .hw-grid,.hw-picture-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.25rem 0}
.hw-figure{margin:0;padding:1rem;border:1px solid var(--line);border-radius:.75rem;background:var(--paper);min-width:0}
.hw-figure figcaption{font-size:var(--type-small);line-height:1.55}.hw-figure figcaption p{margin:.5em 0 0}
.hw-art{display:block;width:100%;height:auto;max-width:42rem;margin:0 auto;color:#25333c;background:#f7fbfc;border-radius:.4rem;overflow:visible;--hw-fill:#dcebf0;--hw-blue:#326477;--hw-gold:#e9be70}
.hw-art g{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hw-art text{fill:currentColor;stroke:none;font:12px Atkinson Hyperlegible Next,Arial,sans-serif}
.hw-body{fill:var(--hw-fill)}.hw-screen{fill:#f7fbfc}.hw-paper,.hw-keycap{fill:#fff}.hw-highlight{fill:var(--hw-gold)}.hw-dark,.hw-wheel{fill:var(--hw-blue)}.hw-metal{fill:#d9dfe1}.hw-contact{stroke:#845b11;stroke-width:7}.hw-landscape{fill:#aac8b9}.hw-sun{fill:var(--hw-gold)}
.hw-practice{margin:1.25rem 0;padding:1.25rem;background:var(--soft);border:1px solid var(--line);border-radius:.8rem}
.hw-practice h4{margin-top:1.6rem}.hw-practice h4:first-child{margin-top:0}
.hw-practice select,.hw-practice textarea{max-width:100%;box-sizing:border-box}.hw-practice textarea{width:100%}
.hw-picture-choice{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:.5rem;min-width:0;padding:.8rem;border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:.7rem}
.hw-picture-choice .hw-art{width:100%;max-height:none}.hw-picture-choice>span{font-weight:600;font-size:1.05em;line-height:1.4;white-space:normal}
.hw-picture-choice:hover{border-color:var(--accent)}.hw-picture-choice:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.hw-lesson [hidden]{display:none!important}
.hw-click-target{display:block;width:9rem;min-height:9rem;border-radius:50%;margin:1rem auto;padding:1.25rem;white-space:normal;line-height:1.4}
.hw-folder{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;max-width:100%;margin:0 .6rem 1rem 0;padding:1rem;background:var(--paper);color:var(--ink);border:2px solid var(--line);border-radius:.7rem}
.hw-folder svg{max-width:100%;height:auto;fill:var(--hw-gold);stroke:currentColor;stroke-width:3}
.hw-open-folder{padding:1rem;border:2px solid var(--accent);border-radius:.4rem;background:var(--paper)}
.hw-scroll-panel{max-height:22rem;overflow:auto;overscroll-behavior:auto;padding:1rem;border:2px solid var(--line);border-radius:.4rem;background:var(--paper);scroll-behavior:auto}
.hw-scroll-space{height:21rem;display:flex;flex-direction:column;justify-content:space-around;text-align:center;font-size:2rem;color:var(--accent)}
.hw-scroll-panel figure{margin:0}.hw-tree{display:block;max-width:100%;height:auto}.hw-trunk{fill:#846248}.hw-leaves{fill:var(--hw-leaf);stroke:var(--ink);stroke-width:3}.hw-path{fill:none;stroke:var(--hw-gold);stroke-width:18}
.hw-key-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.hw-keyboard-layout{margin:1.25rem 0;padding:1rem;background:var(--hw-fill);border:2px solid var(--line);border-radius:.8rem;box-shadow:0 .3rem 0 var(--line)}
.hw-key-row{display:flex;flex-wrap:wrap;gap:.3rem;margin:.3rem 0}
.hw-key-letter{flex:1;min-width:max-content;white-space:nowrap;overflow-wrap:normal;min-height:2.1rem;padding:.25rem;text-align:center;border:1px solid var(--line);border-radius:.25rem;background:var(--paper);color:var(--ink);font-size:.9rem;line-height:1.4}
.hw-real-key{flex:2;min-width:4.3rem;min-height:44px;padding:.45rem .6rem;background:var(--hw-gold);color:#18242a;border:2px solid #53636b;border-radius:.3rem;box-shadow:0 .15rem 0 #53636b;font:inherit;white-space:normal;line-height:1.25}
.hw-real-key kbd{font:inherit}.hw-real-key:disabled{opacity:1;color:#18242a}.hw-real-key[data-hw-key="Space"]{flex:6;min-width:8rem}.hw-real-key:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
[data-hw-question]{font-weight:600;font-size:1.25em}[data-hw-result]:not(:empty),[data-hw-mouse-status]:not(:empty),[data-hw-key-status]:not(:empty){padding:.8rem;border-left:4px solid var(--accent);background:var(--paper)}
.hw-lesson button{overflow-wrap:normal;word-break:normal}.hw-lesson .action-row{flex-wrap:wrap}.hw-lesson .action-row>*{max-width:100%;white-space:normal}
@media(max-width:36rem){.hw-lesson .hw-grid,.hw-picture-choices{grid-template-columns:1fr}.hw-practice{padding:.75rem}.hw-keyboard-layout{padding:.5rem}.hw-figure{padding:.75rem}}
html[data-theme="dark"] .hw-lesson,html[data-theme="dim"] .hw-lesson{--hw-fill:#253e47;--hw-blue:#93bed0;--hw-gold:#d8ac60;--hw-leaf:#72a78c}
html[data-theme="dark"] .hw-screen,html[data-theme="dim"] .hw-screen{fill:#e2eef1}
@media(forced-colors:active){.hw-art g{stroke:CanvasText}.hw-art text{fill:CanvasText}.hw-art .hw-body,.hw-art .hw-screen,.hw-art .hw-paper,.hw-art .hw-keycap,.hw-art .hw-metal{fill:Canvas}.hw-art .hw-highlight,.hw-art .hw-dark,.hw-art .hw-wheel{fill:Highlight}.hw-picture-choice,.hw-real-key,.hw-key-letter,.hw-keyboard-layout{border-color:CanvasText;background:Canvas;color:CanvasText;box-shadow:none}.hw-folder svg{fill:Canvas;stroke:CanvasText}.hw-leaves,.hw-trunk{fill:CanvasText}.hw-path{stroke:CanvasText}}
@media print{.hw-practice{break-inside:auto}.hw-scroll-panel{max-height:none;overflow:visible}.hw-scroll-space{display:none}.hw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hw-picture-choice{break-inside:avoid}}

.hw-inline-feedback:not(:empty){display:block;padding-top:.6rem;border-top:1px solid var(--line);font-size:var(--type-small)!important;font-weight:400!important;text-align:left}.hw-inline-feedback:empty{display:none}

.hw-art-mouse text{font-size:24px;font-weight:600}