/* Keyboard journey: real reflow, readable practice and a visible learning path. */
.keyboard-guide{width:min(720px,100%);flex-shrink:0}.keyboard-guide summary{font-size:12px;color:inherit;cursor:pointer;padding:8px 3px}.keyboard-guide .keyboard{width:100%}
html[data-mabni-theme=dark] .safari-kicker{color:#bbcfda}
select{font:inherit}body[data-view=map]{overflow:auto}.skill-map{max-width:1420px;margin:auto;padding:clamp(18px,3vw,42px)}
.journey-hero{display:flex;align-items:center;gap:32px;padding:clamp(22px,3.5vw,45px);border-radius:24px;background:#e4f2ed;border:1px solid #c6ddd3}.journey-hero>div:first-child{flex:1}.journey-hero small,.free-practice small{font-size:10px;letter-spacing:2px;font-weight:750;color:#397969}.journey-hero h2{font-size:clamp(28px,3.2vw,46px);letter-spacing:-1.5px;line-height:1.12;max-width:720px;margin:12px 0 16px}.journey-hero p{max-width:690px;font-size:14px;line-height:1.8;color:#496b6c}.journey-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:23px}.journey-actions button,.journey-actions a{font-size:13px;text-decoration:none;border:1px solid #bfd2cd;border-radius:9px;padding:12px 18px;background:#fff;color:#315a5d}.journey-actions .primary{background:#087f89;color:white;border-color:#087f89}.journey-progress{min-width:160px;display:flex;flex-direction:column;gap:12px;color:#426961;font-size:12px}.journey-progress strong{font-size:58px;color:#176a60;letter-spacing:-3px}.journey-progress strong span{font-size:23px;letter-spacing:-1px}.journey-progress progress{width:180px;height:9px;accent-color:#158472}.journey-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:30px 0 20px}.journey-heading h3{font-size:20px;letter-spacing:-.5px;margin:0}.journey-heading label{font-size:12px;display:flex;gap:8px;align-items:center;color:#526d79}.journey-heading input{width:18px;height:18px;accent-color:#087f89}.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.journey-chapter{background:#fff;border:1px solid #d7e3e8;border-radius:18px;padding:22px;position:relative;min-width:0}.chapter-number{font:600 12px system-ui;color:#567a76;background:#edf5f1;border-radius:9px;display:grid;place-items:center;width:37px;height:34px}.journey-chapter h3{font-size:19px;margin:17px 0 8px;letter-spacing:-.5px}.journey-chapter p{font-size:12px;color:#5b7381;margin:0 0 20px;line-height:1.6}.chapter-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.chapter-levels button{min-height:38px;border:1px solid #ccdde3;border-radius:8px;background:#f6fafb;color:#416473;font:650 12px system-ui;padding:6px}.chapter-levels button:hover{border-color:#087f89;background:#e8f5f1}.chapter-levels button.done{background:#e0f4e9;color:#1d7155;border-color:#86bda6}.journey-chapter small{display:block;font-size:11px;color:#667d86;margin-top:14px}.journey-chapter.is-complete{border-color:#76b497}.journey-chapter:has([data-start-level="1"]:only-child) .chapter-levels{display:block}.journey-chapter:has([data-start-level="1"]:only-child) button{width:100%}.free-practice{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:white;border:1px solid #d7e3e8;border-radius:20px;padding:30px;margin:28px 0}.free-practice h3{font-size:27px;letter-spacing:-.7px;margin:12px 0}.free-practice p{font-size:13px;line-height:1.8;color:#5c7682}.free-practice label{display:block;font-size:12px;margin:0 0 7px}.free-practice textarea,.free-practice select{display:block;width:100%;padding:12px;background:#f5f9fb;color:#224350;border:1px solid #c9dae2;border-radius:9px;margin-bottom:15px}.free-practice textarea{resize:vertical;font:14px/1.6 system-ui}.free-practice .primary{font-size:13px}.skills-top nav{min-width:0;overflow:auto;justify-content:flex-start;scrollbar-width:thin}.skills-top nav button{flex:0 0 32px}.skills-top #journeyButton{flex-shrink:0}.skills-top select{font-size:12px;max-width:165px}.skills-top #themeBtn{padding:9px;flex-shrink:0}.skills-top #themeBtn svg{width:18px;height:18px}.skills-top #themeBtn:empty:after{content:'◐'}body[data-view=map] .skills-top nav,body[data-view=map] .chapter-picker,body[data-view=map] #journeyButton{display:none}.skills-top #helpButton{margin-left:auto}.skill-play{justify-content:safe center}.key-safari{width:min(700px,100%);padding:20px;text-align:center;border:1px solid #c9dce5;background:#fff;border-radius:18px;cursor:text}.safari-kicker{font-size:11px;letter-spacing:2px;color:#5d7c86}.key-safari>strong{display:block;font:650 clamp(54px,11vh,100px)/1.4 system-ui;color:#795fc4}.key-safari>p{font-size:13px;color:#526e7c}.safari-trail{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.safari-trail span{border-bottom:2px solid #c6d6df;font:16px/1.6 ui-monospace,monospace;min-width:20px;color:#526e7c}.safari-trail span.done{color:#17855e;border-color:#17855e}.safari-trail span.current{color:#7554c0;background:#e9e1f7;border-radius:4px}.keyboard kbd{min-width:0;font-size:clamp(9px,1.1vw,13px)}.keyboard kbd.wide{flex:1.7;overflow:hidden}.typing-input{min-height:74px}.typing-line{font-size:clamp(20px,2.1vw,30px)}.edit-card label>strong{display:block;font-size:clamp(18px,2vw,24px)}.edit-card{padding:20px}.edit-card>svg{height:50px;margin-bottom:5px}.edit-card .play-note{text-align:left;margin:4px 0 15px}
html[data-mabni-theme=dark]{--ink:#e6eef4;--paper:#15232e;--line:#3b5360;color-scheme:dark}html[data-mabni-theme=dark] .skills-main,html[data-mabni-theme=dark] .journey-chapter,html[data-mabni-theme=dark] .free-practice,html[data-mabni-theme=dark] .message-card,html[data-mabni-theme=dark] .key-safari,html[data-mabni-theme=dark] dialog{background:#20313e;color:#e6eef4;border-color:#3b5360}html[data-mabni-theme=dark] .journey-hero{background:#203e3b;border-color:#3d6760}html[data-mabni-theme=dark] :is(.skill-heading p,.skill-bottom p,.play-note,.typing-stats,.quest-complete p,.journey-hero p,.journey-chapter p,.journey-chapter small,.journey-heading label,.free-practice p,.key-safari>p,dialog p){color:#b7ccd4}html[data-mabni-theme=dark] :is(.journey-hero small,.free-practice small,.journey-progress,.journey-progress strong){color:#8de1c2}html[data-mabni-theme=dark] :is(.skill-play,.typing-play){background:#192a38}html[data-mabni-theme=dark] :is(.typing-input,.message-card input,.free-practice textarea,.free-practice select){background:#142530;color:#eef5fa;-webkit-text-fill-color:#eef5fa;border-color:#66838f}html[data-mabni-theme=dark] :is(input,textarea)::placeholder{color:#a5bcc6}html[data-mabni-theme=dark] :is(.chapter-number,.chapter-levels button,.journey-actions button,.journey-actions a,.skill-bottom button,.skills-layout>aside button.current){background:#2c4653;color:#e6eef4;border-color:#516e7b}html[data-mabni-theme=dark] .chapter-levels button.done{background:#234d40;color:#a1edc8;border-color:#558e78}html[data-mabni-theme=dark] .skills-layout>aside button{color:#e1ecf2}html[data-mabni-theme=dark] .skills-layout>aside button small{color:#acc3ce}html[data-mabni-theme=dark] .keyboard{background:#273e4b;border-color:#4c6575}html[data-mabni-theme=dark] .keyboard kbd{background:#344d5a;color:#e8f3f8;border-color:#587484}html[data-mabni-theme=dark] .keyboard kbd.next{background:#ac8aef;color:#17222c;border-color:#c1a9ed}html[data-mabni-theme=dark] :is(.typing-stats strong,.safari-trail span){color:#c1d6e0}html[data-mabni-theme=dark] :is(.skill-heading span,.key-safari>strong){color:#c4adf1}html[data-mabni-theme=dark] .typing-line span.correct{color:#88deb1}html[data-mabni-theme=dark] .typing-line span.caret{background:#574775;color:#fff}html[data-mabni-theme=dark] .safari-trail span.done{color:#88deb1}html[data-mabni-theme=dark] :is(.journey-actions .primary,.skill-bottom .primary){background:#147f85;color:#fff}
@media(max-width:1150px){.skills-top{flex-wrap:wrap;height:auto;min-height:78px}.skills-top nav{order:5;flex-basis:100%}.skills-layout{height:calc(100dvh - 126px)}.skills-top nav:empty{display:none}.skills-layout{grid-template-columns:190px minmax(0,1fr)}.journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){body{overflow:auto}.skills-layout{height:auto;min-height:calc(100dvh - 150px)}.skills-main{overflow:visible}.skill-play{overflow:visible;min-height:0;gap:15px;padding:20px 12px}.keyboard{max-width:100%}.keyboard-row{gap:2px}.keyboard kbd{font-size:9px;min-height:30px}.keyboard kbd.wide{font-size:8px}.typing-line{font-size:22px}.typing-input{font-size:18px}.journey-hero{display:block}.journey-progress{margin-top:22px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 18px}.journey-progress strong{font-size:42px;grid-row:span 2}.journey-progress progress{width:100%}.journey-heading{align-items:flex-start;flex-direction:column}.journey-grid{gap:12px}.journey-chapter{padding:17px}.journey-chapter h3{font-size:18px}.chapter-levels{gap:5px}.chapter-levels button{min-height:36px}.free-practice{grid-template-columns:1fr;gap:15px;padding:22px}.skills-top h1{font-size:16px}.skills-top{gap:10px;padding:12px}.skills-top .chapter-picker{order:6;width:100%}.skills-top .chapter-picker select{width:100%;max-width:none}.skills-top #helpButton{margin-left:0}.skills-top #themeBtn{margin-left:auto}.skills-top nav button{flex-basis:30px}.skill-bottom{position:sticky;bottom:0;background:var(--paper);z-index:2}}
@media(max-width:440px){.journey-grid{grid-template-columns:1fr}.skills-brand{display:none}.skills-top #journeyButton{padding:9px;font-size:11px}.skills-top #helpButton{font-size:10px;padding:9px}.journey-actions{align-items:stretch}.journey-actions button{flex:1}.journey-hero h2{letter-spacing:-1px}.typing-line{font-size:20px}}
@media(min-width:761px) and (max-height:740px){.skills-layout{padding:10px 16px;gap:14px}.skill-heading{padding:12px 18px}.skill-heading h2{font-size:21px}.skill-play{padding:12px 18px;gap:8px;justify-content:flex-start}.typing-line{font-size:23px;line-height:1.4}.typing-input{min-height:58px;font-size:18px;padding:8px 12px}.keyboard{padding:5px 8px}.keyboard-row{margin:3px 0}.keyboard kbd{min-height:27px}.skill-bottom{padding:10px 16px;min-height:60px}.key-safari{padding:14px}.key-safari>strong{font-size:64px}.edit-card{padding:15px}}

@media(min-width:761px){.skills-layout{height:calc(100dvh - var(--skills-header-height,82px))}}
@media(min-width:761px) and (max-height:740px){.skill-heading img{width:46px;height:46px}.key-safari>strong{font-size:56px}.key-safari{padding:10px}.key-safari>p{margin:8px 0}.typing-play{gap:7px}.typing-line{font-size:22px}.play-note{margin-top:8px}}