@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#080e20;--bg2:#0d1530;--surface:#131d38;--line:#293253;--text:#f8f9ff;--muted:#a7b2d2;--lime:#bdfc78;--violet:#967aff;--coral:#ff9872;--cyan:#6cdbff;--pink:#ff83bd;--shadow:0 25px 65px rgba(0,0,0,.25)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'Be Vietnam Pro',Arial,sans-serif}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--lime);outline-offset:3px}#keynova-app{isolation:isolate;position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(ellipse 45% 13% at 85% 3%,#20234c 0%,transparent 95%),radial-gradient(ellipse 55% 25% at 4% 29%,#142550 0%,transparent 88%),#080e20}.ambient{position:absolute;pointer-events:none;filter:blur(70px);border-radius:50%;z-index:-1;opacity:.19}.ambient-one{height:370px;width:450px;right:-90px;top:600px;background:#6167df}.ambient-two{height:390px;width:300px;left:-130px;top:1450px;background:#3b9fa6}.kn-shell{width:min(1250px,calc(100% - 72px));margin:0 auto}.sr-only{position:absolute!important;height:1px!important;width:1px!important;overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important;white-space:nowrap!important}
.kn-header{height:99px;display:flex;align-items:center;gap:48px;border-bottom:1px solid rgba(207,220,255,.1)}.kn-logo{display:flex;align-items:center;gap:11px;min-width:204px}.logo-mark{height:45px;width:45px;display:grid;place-items:center;position:relative;background:var(--lime);color:#0c1326;font-size:28px;font-weight:900;border-radius:13px;box-shadow:4px 4px 0 #7dab58}.logo-spark{position:absolute;font-size:15px;right:-8px;top:-11px;color:#ffd98b}.logo-name{font:700 24px/1 'Space Grotesk',sans-serif;letter-spacing:-1.2px;display:block}.logo-name>span{color:var(--lime)}.logo-name small{display:block;font:700 7.5px/1.3 'Be Vietnam Pro',sans-serif;letter-spacing:3px;color:var(--muted);margin-top:5px}.kn-nav{display:flex;gap:32px;flex:1}.kn-nav a{font-size:13px;font-weight:700;color:#b9c1d9;transition:color .2s}.kn-nav a:hover{color:var(--lime)}.kn-header-actions{display:flex;gap:12px;align-items:center}.lang-control{border:1px solid #33405c;border-radius:11px;padding:0 10px}.lang-control select{background:transparent;border:0;color:#e8ebff;height:41px;width:80px;outline:none;font-size:13px;font-weight:800}.lang-control option,.control-tile option{background:#182340;color:#fff}.account-button{display:flex;align-items:center;gap:9px;border:1px solid #35405f;background:#161f38;border-radius:11px;padding:13px 14px;color:#f7f7ff;font-size:12px;font-weight:700}.account-dot{height:8px;width:8px;background:var(--lime);border-radius:50%}
.kn-hero{display:grid;grid-template-columns:1.5fr .7fr;align-items:center;min-height:335px;position:relative;padding:42px 0 50px}.eyebrow{color:var(--lime);letter-spacing:2.5px;font-size:10px;font-weight:900;display:flex;gap:9px;align-items:center;margin-bottom:18px}.eyebrow-icon{font-size:19px}.eyebrow-rocket{font-size:15px}.kn-hero h1{font-size:clamp(35px,4.05vw,60px);letter-spacing:-3px;line-height:1.22;font-weight:900;margin:0 0 19px;max-width:860px}.gradient-words{background:linear-gradient(99deg,#bdfc78 0%,#7be6d8 52%,#a88aff 100%);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-intro{color:#b5c0dc;line-height:1.85;font-size:13px;max-width:670px;margin:0}.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.hero-pills>span{background:#171f39;border:1px solid #2b3553;border-radius:30px;color:#c5cee5;display:flex;align-items:center;gap:7px;padding:9px 11px;font-size:10px;font-weight:600}.pill-dot{display:block;width:7px;height:7px;border-radius:50%}.green{background:var(--lime)}.orange{background:var(--coral)}.pink{background:var(--pink)}.hero-mini-illustration{width:278px;height:256px;justify-self:end;position:relative}.orbit{border:1px solid #445173;border-radius:50%;position:absolute;transform:rotate(-23deg)}.orbit-one{width:270px;height:173px;top:36px;left:0}.orbit-two{width:225px;height:225px;top:12px;left:27px;border-style:dashed;opacity:.3}.mini-main-key{position:absolute;left:93px;top:71px;width:123px;height:127px;border:1px solid #9e9dd3;border-radius:23px;background:linear-gradient(140deg,#414585,#222a56);box-shadow:0 19px 0 #171d3e,0 40px 70px rgba(0,0,0,.25),inset 0 1px 0 #b6aefc;transform:rotate(-12deg);display:flex;align-items:center;flex-direction:column;justify-content:center}.mini-main-key span{position:absolute;top:8px;left:17px;color:#969fcf}.mini-main-key strong{font:900 71px/1 'Space Grotesk',sans-serif;color:#c8fb8d;text-shadow:0 0 20px #bdfc7850}.mini-main-key small{font:700 10px 'Space Grotesk',sans-serif;letter-spacing:4px}.float-key{position:absolute;display:grid;place-items:center;color:#1c2741;font:900 23px 'Space Grotesk',sans-serif;border:2px solid #fff8;border-radius:14px;box-shadow:0 9px 0 #5d7189,0 18px 35px #0004}.float-key-a{width:61px;height:60px;background:#c9f994;top:25px;left:14px;transform:rotate(16deg)}.float-key-s{width:53px;height:50px;background:#ffb78d;right:0;top:20px;transform:rotate(-17deg)}.float-key-space{width:96px;height:40px;bottom:11px;left:18px;background:#9ecbff;font-size:13px;transform:rotate(17deg)}.star1,.star2{position:absolute;color:#c5a5ff;font-size:26px}.star1{right:6px;bottom:29px}.star2{top:7px;left:122px}
.kn-practice,.lessons-section,.stats-section{scroll-margin-top:20px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:22px}.section-kicker{display:flex;align-items:center;gap:8px;color:#b3bbd3;letter-spacing:2.1px;font-size:10px;font-weight:800;margin-bottom:10px}.live-dot{background:#ffac67;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #ffa7681d}.live-dot.purple{background:#9879ff;box-shadow:0 0 0 4px #9879ff22}.live-dot.green{background:var(--lime);box-shadow:0 0 0 4px #bdfc7830}.section-head h2{margin:0;font-size:27px;font-weight:900;letter-spacing:-1px}.practice-head-right{align-self:center}.session-pill{font-weight:700;font-size:11px;border:1px solid #354465;padding:10px 14px;border-radius:40px;background:#151e36;color:#bfc9e1;display:flex;align-items:center;gap:8px}.session-light{width:7px;height:7px;background:var(--lime);border-radius:50%;box-shadow:0 0 12px var(--lime)}.session-pill.is-running .session-light{background:#ffbb7e;box-shadow:0 0 10px #ffbb7e}.practice-tools{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr auto;gap:10px;margin-bottom:16px}.control-tile{height:73px;border:1px solid #32405e;background:#151f39;border-radius:15px;padding:12px 13px;display:flex;flex-direction:column;gap:6px;min-width:0}.control-tile span{color:#9ea9c6;font-size:10px;font-weight:700}.control-tile select{background:transparent;border:none;appearance:none;color:#f3f3ff;font-size:13px;font-weight:800;cursor:pointer;width:100%;padding-right:16px;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8"%3E%3Cpath d="m1 1 5 5 5-5" stroke="%23a3aec9" fill="none" stroke-width="1.6"/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right center;text-overflow:ellipsis;outline:none}.control-icon-button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;border:1px solid #32405e;border-radius:15px;background:#151f39;color:var(--text);min-width:80px}.control-icon-button span{font-size:23px}.control-icon-button small{font-size:9px;font-weight:700;color:#aab5ce}.control-icon-button.is-on{background:#264139;border-color:#9de482}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 17px}.metric{position:relative;min-height:137px;background:#172139;border:1px solid #334162;border-radius:17px;padding:16px 19px;overflow:hidden}.metric:after{content:'';position:absolute;right:-18px;bottom:-50px;width:112px;height:112px;background:currentColor;opacity:.045;border-radius:100%}.metric-speed{color:var(--lime)}.metric-accuracy{color:var(--cyan)}.metric-errors{color:var(--pink)}.metric-time{color:#ffc387}.metric-header{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1.2px;font-weight:800}.metric-icon{display:grid;place-items:center;border-radius:10px;width:29px;height:29px;font-size:21px;background:color-mix(in srgb,currentColor 10%,transparent)}.metric-number{display:flex;align-items:baseline;gap:7px;margin:12px 0 5px}.metric-number strong{font:900 38px/1.1 'Space Grotesk','Be Vietnam Pro',sans-serif;letter-spacing:-2px;color:#fff}.metric-number small{font-size:12px;font-weight:800}.metric-meta{font-size:10px;color:#9faac6}
.station{border:1px solid #384666;background:#111c35;border-radius:21px;box-shadow:var(--shadow);overflow:hidden}.station-top{height:44px;display:flex;justify-content:space-between;align-items:center;padding:0 23px;border-bottom:1px solid #35415b;color:#c0cce9;font-weight:800;font-size:9px;letter-spacing:2px;background:#1a2641}.station-top>span:first-child{display:flex;align-items:center;gap:9px}.station-star{font-size:16px;color:var(--lime)}.station-no{color:#7f8dac;letter-spacing:1.5px}.station-desk{display:grid;grid-template-columns:minmax(105px,1fr) minmax(0,3.8fr) minmax(105px,1fr);gap:15px;align-items:center;padding:22px 18px 0;background:radial-gradient(ellipse 60% 100% at 50% 100%,#1d3563 0%,#152440 65%,#111c35 100%)}.hand-guide{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.hand-label{font-size:10px;letter-spacing:1px;text-align:center;display:flex;flex-direction:column;gap:5px;color:#bbc5db;font-weight:800}.hand-label b{color:#b8f98c;font:800 15px 'Space Grotesk',sans-serif;letter-spacing:3px}.hand-svg{width:100%;max-width:148px;height:auto;margin:8px auto 4px;overflow:visible;filter:drop-shadow(0 14px 9px #0004)}.palm-shape{fill:#f5bd9a}.hand-outline{fill:none;stroke:#ec9f7b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.finger-trace{fill:none;stroke:#c97e61;stroke-width:2.2;stroke-linecap:round;opacity:.7}.wrist-detail{fill:none;stroke:#bc806f;stroke-width:2.5}.hand-svg circle{fill:#e5e9ff;stroke:#ffffff;stroke-width:2.3;transition:fill .13s,stroke .13s,filter .13s}.hand-svg circle.is-active{fill:var(--lime);stroke:#fff;filter:drop-shadow(0 0 9px #bdfc78)}.right-guide .hand-art{transform:translate(150px,0) scale(-1,1)}.right-guide svg circle{transform-box:fill-box}.hand-caption{font-size:9px;color:#8998bb;text-align:center;white-space:nowrap}.monitor{min-width:0;z-index:1}.monitor-frame{border:9px solid #111726;border-top-width:13px;border-bottom-width:10px;border-radius:16px;box-shadow:0 15px 0 #080d1a,0 18px 22px #0008,0 0 0 1px #455473;background:#dfe8f6;overflow:hidden}.monitor-top{height:35px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#e6eef9;color:#6e7990;padding:0 15px;font-size:9px;font-weight:900;letter-spacing:1px}.monitor-circles{display:flex;gap:5px}.monitor-circles i{width:7px;height:7px;border-radius:50%;background:#f6a2aa}.monitor-circles i:nth-child(2){background:#ffc975}.monitor-circles i:nth-child(3){background:#93dbad}.monitor-indicator{color:#58a478;font-size:8px;white-space:nowrap}.monitor-display{background:#f7f9ff;min-height:240px;padding:20px 22px 15px;position:relative}.monitor-line-no{font:700 10px/1 'Space Grotesk',sans-serif;color:#a9b4ca;letter-spacing:1px;margin-bottom:12px}.monitor-line-no span{margin-left:7px;color:#bdcae1}.target-text{color:#7a869c;font:600 clamp(16px,1.55vw,20px)/1.85 'Be Vietnam Pro',sans-serif;letter-spacing:.1px;min-height:76px;max-height:145px;overflow:auto;overflow-wrap:anywhere}.target-text .typed-correct{color:#27875c;background:#dcf8e4;border-radius:3px}.target-text .typed-wrong{color:#e24d61;background:#ffe0e3;border-radius:3px;text-decoration:underline;text-underline-offset:4px}.target-text .current-char{border-bottom:3px solid #805ce6;color:#292c4c;background:#efe9ff}.typing-input{display:block;width:100%;margin-top:10px;resize:vertical;min-height:55px;max-height:115px;padding:11px 12px;border:2px solid #c9d3e5;border-radius:10px;background:#fff;color:#243047;font-size:15px;line-height:1.5;outline:none;box-shadow:inset 0 1px 1px #00000008}.typing-input:focus{border-color:#9971ff;box-shadow:0 0 0 3px #9773ff20}.typing-input::placeholder{color:#9eabc0;font-size:12px}.typing-input:disabled{background:#edf0f7;color:#69758b}.typing-help{display:flex;align-items:center;gap:6px;color:#858eaa;font-size:9px;margin-top:10px;line-height:1.6}.blink-caret{display:inline-block;width:5px;height:12px;background:#8067df;animation:blink .9s steps(1) infinite}@keyframes blink{50%{opacity:0}}.monitor-bottom{height:30px;background:#e6eef9;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#9ba8bd;font:700 8px 'Space Grotesk',sans-serif;letter-spacing:1.2px}.monitor-brand{font:700 12px 'Space Grotesk',sans-serif;color:#6b7591;letter-spacing:-.5px}.monitor-brand i{font-style:normal;color:#9c86ed}.monitor-neck{height:19px;width:40px;margin:0 auto;background:linear-gradient(90deg,#3e4964,#6b7899,#3b4965);border-radius:0 0 3px 3px}.monitor-foot{height:10px;width:126px;margin:0 auto;border-radius:80% 80% 5px 5px;background:linear-gradient(180deg,#7b86a7,#35435f)}.practice-progress{padding:18px 22px 10px;border-top:1px solid #344360}.progress-meta{display:flex;justify-content:space-between;align-items:center;color:#9aaaca;font-size:10px}.progress-meta>span:first-child{display:flex;gap:14px;align-items:center;letter-spacing:1px;font-weight:800}.progress-meta strong{color:var(--lime);font-size:14px;letter-spacing:0}.progress-track{height:9px;border-radius:20px;background:#2a3956;overflow:hidden;margin-top:9px}.progress-bar{height:100%;width:0%;border-radius:20px;background:linear-gradient(90deg,#bdfc78,#78dfd4);transition:width .18s}.keyboard-section{padding:12px 24px 17px}.keyboard-heading{display:flex;justify-content:space-between;color:#aeb9d8;font-size:10px;font-weight:800;letter-spacing:1px;margin-bottom:12px}.keyboard-heading>span:first-child{color:#d4dcf3}.keyboard-tip{color:#91e0b1;text-transform:none;letter-spacing:0}.keyboard{padding:12px;background:linear-gradient(150deg,#202e50,#17243e);border:1px solid #364665;border-radius:16px;display:flex;flex-direction:column;gap:5px;box-shadow:0 6px 0 #0b1328;max-width:750px;margin:0 auto}.kb-row{display:flex;gap:5px;justify-content:center;width:100%}.kb-key{height:39px;min-width:0;flex:1;max-width:56px;display:grid;place-items:center;border:1px solid #576681;border-bottom:3px solid #343d59;background:#344561;border-radius:7px;color:#e4ebfa;font:700 12px 'Space Grotesk',sans-serif;transition:background .12s,transform .12s,box-shadow .12s}.kb-key[data-finger-type=pinky]{border-bottom-color:#d68abf}.kb-key[data-finger-type=ring]{border-bottom-color:#ffb179}.kb-key[data-finger-type=middle]{border-bottom-color:#83c9ff}.kb-key[data-finger-type=index]{border-bottom-color:#a3ec9a}.kb-key[data-finger-type=thumb]{border-bottom-color:#a58fff}.kb-key.space-key{max-width:none;flex:5}.kb-key.wide-key{flex:1.5;max-width:90px}.kb-key.is-active{background:var(--lime);color:#142626;transform:translateY(2px);box-shadow:0 0 24px #bdfc785a;border-color:#edffcf}.keyboard-legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding-top:15px}.keyboard-legend>span{display:flex;gap:6px;align-items:center;color:#9faeca;font-size:9px}.keyboard-legend i{height:7px;width:13px;border-radius:5px}.legend-pinky{background:#d68abf}.legend-ring{background:#ffb179}.legend-middle{background:#83c9ff}.legend-index{background:#a3ec9a}.legend-thumb{background:#a58fff}.station-actions{display:flex;align-items:center;gap:10px;border-top:1px solid #34435e;padding:16px 22px;background:#17243e;flex-wrap:wrap}.kn-button{border:1px solid #3c4b66;padding:13px 18px;background:#23304c;color:#dfe8ff;border-radius:10px;font-weight:800;font-size:11px;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,background .2s}.kn-button:hover{transform:translateY(-2px)}.kn-button.primary{background:var(--lime);color:#18232b;border-color:var(--lime);box-shadow:0 4px 0 #85b552}.kn-button.primary:hover{background:#ddffa7}.kn-button.subtle{background:#1c2945;color:#dde5f6}.shortcut-hint{margin-left:auto;font-size:9px;color:#8497b7}.results-panel{display:flex;align-items:center;gap:18px;background:#233e3d;border-top:1px solid #78b98d;padding:17px 23px}.results-panel[hidden]{display:none}.result-icon{display:grid;place-items:center;width:51px;height:51px;background:#bdfc78;color:#23343d;font-size:30px;border-radius:50%}.results-panel h3{margin:0 0 3px;font-size:17px}.results-panel p{font-size:11px;margin:0;color:#cbe3d0}.results-panel button{margin-left:auto}
.lessons-section{margin-top:76px}.section-aside{color:#9ca9c5;font-size:11px;max-width:345px;line-height:1.8;margin:0}.lesson-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.lesson-card{text-align:left;display:flex;align-items:stretch;flex-direction:column;padding:17px 19px 15px;background:#131e36;color:#fff;border:1px solid #334261;border-radius:17px;transition:transform .2s,background .2s,border-color .2s;min-height:285px}.lesson-card:hover,.lesson-card.selected{transform:translateY(-3px);border-color:#8fb88c;background:#1c2b42}.lesson-count{font:700 9px 'Space Grotesk',sans-serif;color:#8498bc;letter-spacing:1px}.lesson-art{height:94px;display:flex;align-items:center;justify-content:center;gap:9px;font:800 clamp(20px,2.1vw,30px) 'Space Grotesk',sans-serif;letter-spacing:4px;border-radius:12px;margin:13px 0;color:#19264a;box-shadow:inset 0 -4px 20px #0001}.lesson-art b{font:800 22px 'Space Grotesk',sans-serif}.lesson-art-blue{background:linear-gradient(115deg,#7ddbef,#a3f0c1)}.lesson-art-orange{background:linear-gradient(120deg,#ffc782,#fd9d90);transform:none}.lesson-art-pink{background:linear-gradient(120deg,#e8aaff,#8e9cff)}.lesson-art .second{font-size:26px;letter-spacing:0}.lesson-tag{color:#bdfc78;font-size:9px;font-weight:800;letter-spacing:1px;margin:4px 0 9px}.lesson-card strong{font-size:15px;letter-spacing:-.4px}.lesson-desc{font-size:10px;color:#adb8d1;line-height:1.8;margin:8px 0 15px}.lesson-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #36425e;padding-top:11px;margin-top:auto;color:#a4b2cf;font-size:10px}.lesson-bottom b{font-size:20px;color:#bdfc78}
.stats-section{margin-top:71px}.stats-saved{display:flex;align-items:center;gap:8px;font-size:10px;color:#a3b1d0}.saved-icon{font-size:20px;color:#93e9b0}.stats-layout{display:grid;grid-template-columns:2fr 1fr;gap:16px}.stats-large,.stats-summary{background:#14203b;border:1px solid #344263;border-radius:17px}.stats-large{padding:22px}.stats-graph-title{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}.stats-graph-title>span{color:#8ea2c3;font:700 10px 'Space Grotesk',sans-serif}.graph{height:165px;display:flex;gap:14px;align-items:end;border-bottom:1px solid #374662;margin-top:30px;position:relative;background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#ffffff0d 40px,#ffffff0d 41px)}.graph-bar-wrap{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;min-width:0}.graph-bar{width:min(40px,70%);min-height:2px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#bafa7f,#519b9b);position:relative;transition:height .3s}.graph-bar::after{content:attr(data-value);position:absolute;top:-20px;left:50%;transform:translateX(-50%);font:700 10px 'Space Grotesk',sans-serif;color:#d4ebc1}.graph-empty{height:100%;display:grid;place-items:center;width:100%;color:#8d9bb8;font-size:12px;text-align:center;line-height:1.8}.graph-footer{display:flex;justify-content:space-between;color:#7f91b3;font-size:9px;margin-top:12px}.stats-side{display:flex;flex-direction:column;gap:14px}.stats-summary{padding:22px;flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px}.stats-summary>span:first-child{color:#a9b7d5;font-size:11px}.stats-summary>div{display:flex;align-items:baseline;gap:8px}.stats-summary strong{font:900 35px 'Space Grotesk',sans-serif}.stats-summary small{color:var(--lime);font-size:11px;font-weight:800}.summary-note{font-size:10px;color:#8399b7}.stats-summary.second small{color:#85d5ff}
.footer-cta{margin-top:75px;background:linear-gradient(110deg,#bdfc78,#89e7cd);color:#162833;min-height:195px;border-radius:19px;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;overflow:hidden}.footer-cta:after{content:'✦';position:absolute;font-size:250px;right:180px;top:-98px;opacity:.08;pointer-events:none}.footer-cta>div{z-index:1}.footer-cta>div>span{font-size:10px;font-weight:900;letter-spacing:2px}.footer-cta h2{font-size:27px;letter-spacing:-1px;margin:10px 0 7px}.footer-cta p{font-size:11px;line-height:1.8;margin:0;max-width:550px}.footer-cta a{padding:15px 22px;border-radius:12px;background:#142b36;color:white;white-space:nowrap;font-size:12px;font-weight:800;box-shadow:0 5px 0 #36535b;z-index:1}.kn-footer{padding:30px 0 38px;display:flex;justify-content:space-between;gap:15px;color:#7f90ae;font-size:10px}
@media(max-width:1120px){.kn-shell{width:min(100% - 38px,1100px)}.station-desk{grid-template-columns:minmax(72px,1fr) minmax(0,5fr) minmax(72px,1fr);padding:20px 9px 0;gap:7px}.hand-label{font-size:8px}.hand-label b{font-size:12px}.hand-caption{font-size:8px}.monitor-display{padding:16px}.practice-tools{grid-template-columns:repeat(4,1fr) 69px}.control-tile{padding:12px 9px}.control-tile select{font-size:11px}.metric{padding:14px}.metric-number strong{font-size:33px}}
@media(max-width:780px){.kn-shell{width:calc(100% - 30px)}.kn-header{height:77px;gap:15px}.kn-logo{min-width:0}.logo-name{font-size:20px}.logo-name small{letter-spacing:1px}.logo-mark{width:39px;height:39px;font-size:24px}.kn-nav{display:none}.kn-header-actions{margin-left:auto}.account-button{padding:11px}.kn-hero{grid-template-columns:1fr;padding:36px 0 30px;min-height:0}.kn-hero h1{font-size:clamp(34px,7vw,52px);letter-spacing:-2px}.hero-intro{font-size:12px}.hero-mini-illustration{display:none}.section-head h2{font-size:23px}.practice-tools{grid-template-columns:repeat(2,minmax(0,1fr)) 65px}.control-tile{height:69px}.control-tile:nth-child(4){grid-column:2/3}.control-icon-button{grid-column:3;grid-row:1/3;min-width:0}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:113px}.metric-number{margin:9px 0 2px}.station-desk{grid-template-columns:minmax(0,1fr);padding:14px 15px 0}.hand-guide{display:none}.monitor-frame{border-width:7px;border-top-width:10px}.target-text{font-size:16px;min-height:66px}.monitor-display{min-height:240px}.keyboard-section{padding:14px}.keyboard{padding:8px;gap:4px}.kb-row{gap:4px}.kb-key{height:33px;font-size:10px}.lesson-cards{grid-template-columns:1fr;gap:13px}.lesson-card{min-height:0}.lesson-art{height:86px;font-size:30px}.stats-layout{grid-template-columns:1fr}.stats-side{display:grid;grid-template-columns:1fr 1fr}.stats-summary{padding:16px}.section-aside{display:none}.shortcut-hint{display:none}.footer-cta{padding:28px;min-height:180px}.footer-cta h2{font-size:22px}}
@media(max-width:460px){.kn-shell{width:calc(100% - 22px)}.kn-header{gap:4px}.logo-name{font-size:18px}.logo-name small{font-size:6px}.kn-header-actions{gap:6px}.lang-control{padding:0 5px}.lang-control select{width:68px;font-size:11px}.account-button{padding:12px 8px}.account-button span:last-child{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kn-hero{padding:30px 3px}.kn-hero h1{font-size:35px}.hero-pills{gap:5px}.hero-pills>span{font-size:9px;padding:8px}.section-head h2{font-size:21px}.section-kicker{font-size:9px}.session-pill{padding:8px;font-size:9px}.practice-tools{gap:7px}.control-tile span{font-size:9px}.control-tile select{font-size:10px}.metric{padding:11px 12px;min-height:113px}.metric-header{font-size:9px;letter-spacing:.7px}.metric-number strong{font-size:32px}.station-top{padding:0 12px}.station-no{font-size:8px}.station-desk{padding:10px 8px 0}.monitor-display{padding:13px 11px;min-height:240px}.target-text{font-size:15px;line-height:1.9}.typing-input{font-size:14px}.monitor-bottom span:last-child{font-size:6px}.practice-progress{padding:17px 12px 9px}.keyboard-section{padding:12px 7px}.keyboard-heading{font-size:9px;padding:0 4px}.keyboard-tip{max-width:125px;text-align:right}.keyboard{padding:6px;gap:3px;border-radius:10px}.kb-row{gap:2px}.kb-key{height:28px;font-size:8px;border-radius:4px;border-bottom-width:2px}.keyboard-legend{gap:9px}.keyboard-legend>span{font-size:8px}.station-actions{padding:13px 9px;gap:6px}.kn-button{padding:12px 9px;font-size:10px;gap:5px}.results-panel{padding:12px;gap:8px}.results-panel h3{font-size:13px}.results-panel p{font-size:10px}.results-panel .kn-button{margin-left:auto}.result-icon{width:35px;height:35px;font-size:20px}.lessons-section,.stats-section{margin-top:52px}.stats-graph-title{font-size:10px}.stats-side{gap:8px}.stats-summary strong{font-size:28px}.footer-cta{flex-direction:column;align-items:flex-start}.footer-cta h2{font-size:20px}.kn-footer{flex-direction:column;text-align:center;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* 1.1.0 Sound Studio — keyboard switch audio selector */
.sound-studio{margin:-3px 0 17px;padding:16px 18px 13px;background:linear-gradient(115deg,#18253f,#121c33 66%,#24233e);border:1px solid #3a4969;border-radius:17px;box-shadow:inset 0 1px 0 #ffffff0a}
.sound-studio-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:13px}
.sound-studio-title{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.75px;font-weight:900;color:#eaf3ff}
.sound-studio-title>span:first-child{color:#bdfc78;font-size:18px}
.sound-studio-title small{letter-spacing:0;color:#8b9fbd;font-weight:500;font-size:10px;margin-left:10px}
.volume-control{display:flex;align-items:center;gap:10px;color:#c7d5f3;font-weight:700;font-size:10px;white-space:nowrap}
.volume-control input{width:110px;accent-color:#bdfc78;cursor:pointer}
.volume-control output{font:800 11px 'Space Grotesk',sans-serif;color:#bdfc78;width:37px;text-align:right}
.switch-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.switch-choice{background:#1e2b46;border:1px solid #40506c;border-bottom:3px solid #25314c;border-radius:11px;color:white;display:flex;align-items:center;gap:9px;padding:10px;text-align:left;min-width:0;transition:background .17s,border-color .17s,transform .14s,box-shadow .14s}
.switch-choice:hover{background:#2a3855;transform:translateY(-2px)}
.switch-choice.is-selected{border-color:#bdfc78;border-bottom-color:#76b947;background:#263e3d;box-shadow:0 0 0 1px #bdfc7833,inset 0 1px 0 #ffffff16}
.switch-choice:active,.switch-choice.is-playing{transform:translateY(2px)}
.switch-choice>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:5px}
.switch-choice strong{font-size:12px;letter-spacing:.1px;line-height:1.1}
.switch-choice small{font-size:9px;color:#a4b4d0;line-height:1.2;white-space:nowrap}
.switch-choice.is-selected small{color:#d1e7d5}
.switch-art{height:34px;width:34px;flex-shrink:0;display:grid;place-items:center;border:2px solid #ffffff4a;border-bottom:5px solid #0005;border-radius:9px;font:900 13px 'Space Grotesk',sans-serif;color:#111b2b;box-shadow:0 4px 7px #0005,inset 0 1px 0 #ffffff92}
.blue-switch{background:linear-gradient(145deg,#b1e8ff,#459cfa)}.brown-switch{background:linear-gradient(145deg,#ecd0a6,#a16a4d)}.red-switch{background:linear-gradient(145deg,#ffc6ba,#f16e72)}.thock-switch{background:linear-gradient(145deg,#dbb0ff,#9662b8)}.creamy-switch{background:linear-gradient(145deg,#fff4b9,#d4b882)}
.switch-play{margin-left:auto;font-size:15px;color:#8794b0;flex-shrink:0}
.switch-choice.is-selected .switch-play{color:#bdfc78}
.sound-status{margin:11px 0 0;font-size:10px;color:#94a7c8;line-height:1.5}
@media(max-width:1000px){.switch-choices{gap:6px}.switch-choice{gap:7px;padding:8px}.switch-art{height:28px;width:28px}.switch-play{display:none}.sound-studio-title small{display:none}}
@media(max-width:700px){.sound-studio{padding:12px 10px}.sound-studio-heading{align-items:flex-start;gap:8px}.sound-studio-title{font-size:9px;gap:5px}.volume-control{gap:6px;font-size:9px}.volume-control input{width:67px}.switch-choices{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:1px 0 8px;gap:8px;scrollbar-color:#56668a transparent}.switch-choice{flex:0 0 118px;scroll-snap-align:start}.switch-art{height:29px;width:29px}.switch-choice strong{font-size:11px}.switch-choice small{font-size:8px}.sound-status{font-size:9px}}
@media(max-width:390px){.sound-studio-heading{flex-wrap:wrap}.volume-control{margin-left:auto}}

/* KEYNOVA 1.2 — one-screen learning cockpit, richer pseudo-3D hands */
@media(min-width:901px){
  #keynova-app .kn-shell{width:min(calc(100% - 30px),1480px)}
  .kn-header{height:55px;min-height:55px}
  .kn-practice{padding-top:7px}
  .kn-practice .section-head{margin:4px 0 8px}
  .kn-practice .section-head h2{font-size:21px;margin-top:3px}
  .kn-practice .section-kicker{font-size:9px}
  .practice-tools{margin:0 0 7px;gap:8px}
  .control-tile{height:48px;padding:6px 12px}
  .control-tile span{font-size:9px}
  .control-tile select{font-size:11px}
  .control-icon-button{height:48px}
  .sound-studio{margin:0 0 7px}
  .metrics-grid{margin:0 0 8px;gap:10px}
  .metric{min-height:70px;padding:8px 13px}
  .metric-header{font-size:9px}
  .metric-number{margin:2px 0 0}
  .metric-number strong{font-size:30px}
  .metric-meta{display:none}
  .station-top{height:27px;padding:4px 15px}
  .station-desk{grid-template-columns:minmax(110px,1fr) minmax(0,5fr) minmax(110px,1fr);padding:10px 14px 0;gap:12px}
  .hand-svg{max-width:165px;margin:0 auto}
  .monitor-frame{border-width:6px;border-top-width:7px}
  .monitor-top{height:25px}
  .monitor-display{min-height:157px;padding:10px 16px}
  .target-text{min-height:49px;font-size:clamp(15px,1.3vw,19px);line-height:1.4}
  .typing-input{min-height:45px;padding:5px 9px;font-size:14px}
  .typing-help{margin-top:4px}
  .monitor-bottom{height:17px}
  .monitor-neck{height:12px}
  .monitor-foot{height:8px}
  .practice-progress{padding:4px 18px 6px}
  .progress-meta{margin-bottom:4px}
  .keyboard-section{padding:6px 18px}
  .keyboard-heading{margin:0 0 4px}
  .keyboard{padding:6px 10px;gap:3px}
  .kb-row{gap:4px}
  .kb-key{height:27px;border-radius:5px;font-size:10px}
  .keyboard-legend{margin-top:4px}
  .station-actions{padding:8px 16px;gap:8px}
  .kn-button{padding:8px 13px}
}
@media(min-width:901px) and (max-height:840px){
  .hand-svg{max-width:125px}
  .station-desk{padding-top:5px}
  .monitor-display{min-height:127px}
  .monitor-neck,.monitor-foot{display:none}
  .typing-input{min-height:36px}
  .keyboard-legend,.hand-caption{display:none}
  .kb-key{height:24px}
  .station-actions{padding:6px 16px}
}
.sound-studio{padding:0;position:relative;z-index:5;background:transparent;border:0;box-shadow:none}
.sound-collapsed{cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #40516a;border-radius:10px;background:#1d2b45;color:#dbf7ff;font-size:11px;list-style:none;min-height:33px}
.sound-collapsed::-webkit-details-marker{display:none}
.sound-collapsed strong{font-size:11px}
.sound-collapsed>span{color:#9eaeca}
.sound-collapsed>b{margin-left:auto;font-size:10px;color:#bdfc78}
.sound-studio-inner{padding:12px 15px;background:linear-gradient(120deg,#1d2945,#141d31);border:1px solid #506280;border-radius:0 0 14px 14px}
@media(min-width:901px){.sound-studio[open] .sound-studio-inner{position:absolute;z-index:80;top:34px;left:0;right:0;box-shadow:0 22px 45px #0009}}
.audio-credit{font-size:9px;color:#94a7c8;margin-top:8px;line-height:1.6}
.audio-credit a{color:#bdfc78;text-decoration:underline}
.hand-guide{perspective:330px;overflow:visible}
.hand-svg{transform:rotateX(9deg) rotateZ(-4deg);filter:drop-shadow(0 16px 12px #0009);transition:transform .22s}
.right-guide .hand-svg{transform:rotateX(9deg) rotateZ(4deg)}
.hand-svg .palm-shadow{fill:#7c3e47;opacity:.45;transform:translate(5px,7px)}
.hand-svg .palm-shape{fill:url(#handSkin);stroke:#eaa88f;stroke-width:2}
.hand-svg .palm-highlight{fill:none;stroke:#fff9db;stroke-width:5;stroke-linecap:round;opacity:.5}
.hand-svg .hand-outline{stroke:#8e4f58;stroke-width:2.8;opacity:.75}
.hand-svg .finger-trace{stroke:#d17c6d;stroke-width:2.1;stroke-linecap:round}
.hand-svg circle{fill:#eaf0ff;stroke:#ffffff;stroke-width:2.1;filter:drop-shadow(0 2px 3px #0007)}
.hand-svg circle.is-active{fill:#bdfc78;filter:drop-shadow(0 0 9px #bdfc78)}
.hand-label{text-shadow:0 1px 10px #0008}
@media(max-width:780px){.sound-collapsed>span{display:none}.hand-guide{display:none}}

@media(min-width:901px) and (max-height:840px){
  .kn-practice .section-head{margin:0 0 4px}
  .kn-practice .section-kicker{display:none}
  .kn-practice .section-head h2{font-size:17px;margin:2px 0}
  .kn-header{height:48px;min-height:48px}
  .control-tile,.control-icon-button{height:39px;padding-top:3px;padding-bottom:3px}
  .metric{min-height:62px;padding:6px 12px}
  .metric-number strong{font-size:25px}
  .metric-number{margin:0}
  .metric-header{font-size:8px}
  .monitor-display{padding:7px 12px 5px;min-height:0}
  .monitor-line-no{display:none}
  .target-text{min-height:0;max-height:59px;line-height:1.35;font-size:14px}
  .typing-input{min-height:35px;height:35px;margin-top:4px;padding:5px 8px;font-size:13px}
  .typing-help{margin-top:1px;font-size:8px}
  .monitor-bottom{height:13px}
  .station-desk{padding-top:3px}
  .station-top{height:22px}
  .hand-svg{max-width:112px}
  .practice-progress{padding:2px 14px 3px}
  .keyboard-section{padding:4px 13px}
  .keyboard{padding:4px 8px;gap:2px}
  .kb-key{height:23px}
  .keyboard-heading{margin-bottom:3px}
  .station-actions{padding:5px 12px}
  .kn-button{padding:6px 10px}
}

@media(min-width:901px) and (min-height:841px) and (max-height:980px){
 .station-desk{padding-top:4px}
 .monitor-display{min-height:137px;padding:8px 15px}
 .monitor-top{height:22px}
 .monitor-bottom{height:15px}
 .monitor-neck,.monitor-foot{display:none}
 .typing-help{margin-top:3px}
 .keyboard-section{padding:3px 14px}
 .keyboard{gap:2px;padding:4px 8px}
 .kb-key{height:25px}
 .keyboard-legend{margin-top:2px}
 .station-actions{padding:6px 14px}
 .kn-button{padding:7px 12px}
}

/* KEYNOVA 1.3.0 — practice stays above the fold for desktop and laptop. */
@media(min-width:901px){
  .kn-practice{margin:0;min-height:0}
  .kn-practice .section-head{margin:2px 0 7px;align-items:center}
  .kn-practice .section-head h2{font-size:20px}
  .practice-tools{margin-bottom:7px}
  .metrics-grid{margin-bottom:7px;gap:8px}
  .metric{padding:7px 15px;border-radius:12px;min-height:72px}
  .metric-number strong{font-size:30px}
  .metric-header{letter-spacing:.45px}
  .station{border-radius:15px}
  .station-desk{grid-template-columns:minmax(115px,1fr) minmax(0,5.6fr) minmax(115px,1fr);gap:8px;align-items:center}
  .hand-svg{max-width:144px}
  .hand-guide{padding:0 3px}
  .monitor-display{padding:12px 17px;min-height:162px}
  .target-text{font-size:clamp(17px,1.35vw,22px);line-height:1.45;min-height:53px;max-height:90px;overflow-y:auto}
  .typing-input{font-size:15px;line-height:1.3;min-height:42px}
  .typing-help{font-size:9px}
  .keyboard{max-width:min(980px,100%);margin:auto}
  .kb-key{height:29px;font-size:12px}
  .keyboard-section{padding:7px 12px}
  .keyboard-heading{margin-bottom:5px}
  .station-actions{padding:8px 15px}
  .station-actions .kn-button{font-size:12px}
  .kn-hero{margin-top:60px}
}
@media(min-width:901px) and (max-height:800px){
  .kn-header{height:46px;min-height:46px}
  .kn-practice .section-head h2{font-size:18px}
  .kn-practice .section-head{margin:1px 0 5px}
  .practice-tools{margin-bottom:5px;gap:7px}
  .control-tile,.control-icon-button{height:43px}
  .sound-studio{margin-bottom:5px}
  .metric{min-height:65px;padding:5px 10px}
  .metric-number strong{font-size:27px}
  .metric-icon{width:25px;height:25px;font-size:17px}
  .station-top{height:24px}
  .station-desk{padding:7px 9px 0}
  .hand-svg{max-width:128px}
  .monitor-top{height:21px}
  .monitor-display{min-height:144px;padding:8px 12px}
  .target-text{font-size:16px;line-height:1.35;max-height:72px;min-height:44px}
  .typing-input{height:39px;min-height:39px}
  .monitor-bottom{height:16px}
  .monitor-neck,.monitor-foot{display:none}
  .practice-progress{padding:4px 12px 5px}
  .keyboard-section{padding:5px 12px}
  .keyboard{padding:5px 9px}
  .kb-key{height:27px}
  .keyboard-legend{display:none}
  .station-actions{padding:6px 12px}
  .kn-hero{margin-top:70px}
}
@media(min-width:901px) and (max-height:680px){
  .kn-header{height:40px;min-height:40px}
  .section-kicker,.keyboard-legend,.hand-caption{display:none}
  .kn-practice .section-head h2{font-size:15px}
  .station-top{height:20px}
  .control-tile,.control-icon-button{height:37px}
  .metrics-grid{margin-bottom:4px}
  .metric{min-height:52px;padding:3px 9px}
  .metric-number strong{font-size:24px}
  .metric-icon{height:21px;width:21px}
  .station-desk{padding-top:3px}
  .hand-svg{max-width:96px}
  .monitor-display{min-height:125px;padding:5px 10px}
  .target-text{min-height:34px;max-height:52px;font-size:14px;line-height:1.3}
  .typing-input{height:34px;min-height:34px;padding:4px 8px}
  .typing-help{display:none}
  .monitor-top,.monitor-bottom{height:12px}
  .progress-meta{display:none}
  .practice-progress{padding:3px 10px}
  .keyboard-heading{margin-bottom:2px}
  .kb-key{height:22px;font-size:10px}
  .station-actions{padding:4px 10px}
}
/* Resizable LCD text remains legible while long passages stay contained. */
.target-text{overflow-wrap:anywhere}
.monitor-display{overflow:hidden}
.sound-studio[open] .sound-studio-inner{z-index:100}
.sound-collapsed:focus-visible{outline:2px solid #bdfc78;outline-offset:2px}
.hand-svg circle.is-active{animation:kn-finger-glow .75s ease-in-out infinite alternate}
@keyframes kn-finger-glow{from{filter:drop-shadow(0 0 5px #bdfc78)}to{filter:drop-shadow(0 0 11px #c3ff84)}}
@media(prefers-reduced-motion:reduce){.hand-svg circle.is-active{animation:none}}

/* KeyNova 1.3.1 — compact 50-lesson navigation + one-screen cockpit. */
#keynova-app .kn-nav-lesson{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:6px 4px}
#keynova-app .kn-nav-lesson:hover,#keynova-app .kn-nav-lesson:focus-visible{color:#bbfc70}
#keynova-app .lesson-picker-tile{flex:1.15 1 165px;min-width:150px;display:flex;align-items:stretch}
#keynova-app .lesson-picker-button{height:100%;width:100%;background:linear-gradient(130deg,#324667,#1b2c4b);border:1px solid #688cbb;border-radius:11px;color:#fff;padding:5px 12px;display:flex;gap:11px;align-items:center;cursor:pointer;text-align:left;box-shadow:inset 0 1px #ffffff12}
#keynova-app .lesson-picker-button:hover{border-color:#bcf77e;background:linear-gradient(130deg,#40577e,#243a5d)}
#keynova-app .lesson-picker-symbol{width:25px;height:25px;background:#bdfc78;border-radius:7px;color:#213024;font-size:23px;line-height:22px;text-align:center;flex-shrink:0}
#keynova-app .lesson-picker-name{min-width:0;display:grid;gap:2px}
#keynova-app .lesson-picker-name small{font-size:9px;color:#b8d0e8;line-height:1.1}
#keynova-app .lesson-picker-name strong{font-weight:750;font-size:12px;line-height:1.18;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:225px}
#keynova-app .lesson-picker-chevron{margin-left:auto;color:#bdfc78;font-size:22px}
#keynova-app .lesson-drawer[hidden]{display:none!important}
#keynova-app .lesson-drawer{position:fixed;inset:0;z-index:99998;display:flex;justify-content:flex-start;align-items:stretch;isolation:isolate}
#keynova-app .lesson-drawer-backdrop{position:absolute;inset:0;background:#070d1bcc;border:0;cursor:pointer}
#keynova-app .lesson-drawer-panel{position:relative;height:100%;width:min(440px,92vw);background:#101b30;border-right:1px solid #40547b;color:#fff;display:flex;flex-direction:column;box-shadow:25px 0 65px #03070dcc;animation:kn-open-drawer .2s ease-out;overflow:hidden}
@keyframes kn-open-drawer{from{transform:translateX(-24px);opacity:.6}to{transform:translateX(0);opacity:1}}
#keynova-app .lesson-drawer-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:21px 20px 13px;border-bottom:1px solid #263c59}
#keynova-app .lesson-drawer-kicker{font-size:9px;letter-spacing:2px;color:#bdfc78}
#keynova-app .lesson-drawer-top h2{color:#f5f9ff;margin:6px 0;font-weight:850;font-size:23px;line-height:1.2}
#keynova-app .lesson-drawer-top p{margin:0;color:#adbfdb;font-size:12px}
#keynova-app .lesson-drawer-close{height:35px;min-width:35px;border:1px solid #53637c;border-radius:9px;background:#283752;color:#fff;font-size:18px;cursor:pointer}
#keynova-app .lesson-drawer-search-wrap{display:flex;gap:9px;align-items:center;margin:15px 18px 8px;border:1px solid #4c6484;border-radius:9px;background:#1c2b46;padding:0 11px;color:#bdfc78;font-size:23px}
#keynova-app #lessonSearch{width:100%;height:39px;background:transparent;border:0;color:white;outline:0;font-size:13px}
#keynova-app #lessonSearch::placeholder{color:#a4b3ce}
#keynova-app .lesson-drawer-tally{display:flex;justify-content:space-between;gap:8px;margin:0 20px 8px;color:#b3c0d7;font-size:10px}
#keynova-app .lesson-drawer-tally span:last-child{color:#bdfc78}
#keynova-app .lesson-drawer-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 13px 25px;scrollbar-color:#435a81 transparent}
#keynova-app .lesson-group{border:1px solid #2f4569;border-radius:13px;background:#192945;margin:10px 0;overflow:hidden}
#keynova-app .lesson-group-heading{padding:12px 13px;background:#223553;display:flex;align-items:center;justify-content:space-between;gap:8px}
#keynova-app .lesson-group-heading h3{margin:0;font-size:13px;color:#f8fbff}
#keynova-app .lesson-group-heading small{font-size:10px;color:#b0bfd7;display:block;margin-top:3px}
#keynova-app .lesson-group-heading>span{color:#bbfc78;font-size:10px}
#keynova-app .lesson-group-items{display:grid;gap:2px;padding:5px}
#keynova-app .lesson-row{padding:8px;border:0;display:flex;gap:9px;align-items:center;text-align:left;width:100%;border-radius:8px;background:transparent;color:#eff5ff;cursor:pointer}
#keynova-app .lesson-row:hover,#keynova-app .lesson-row:focus-visible{background:#33496b;outline:0}
#keynova-app .lesson-row.is-current{background:#304d4b;box-shadow:inset 0 0 0 1px #8adc76}
#keynova-app .lesson-row-no{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#314766;color:#c8ddf4;font-weight:800;font-size:11px;flex-shrink:0}
#keynova-app .lesson-row.is-current .lesson-row-no{background:#bdfc78;color:#1e3024}
#keynova-app .lesson-row-info{flex:1;min-width:0;display:grid;gap:2px}
#keynova-app .lesson-row-info strong{color:#f5f8ff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#keynova-app .lesson-row-info small{font-size:10px;color:#aebdd5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#keynova-app .lesson-row-arrow{color:#c0fe8a;font-size:14px}
#keynova-app .lesson-empty{color:#b3bed2;padding:15px;font-size:13px}
body.kn-lesson-open{overflow:hidden}
#keynova-app #monitorLessonLabel{max-width:70%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#keynova-app .target-text{scrollbar-width:thin;scrollbar-color:#6b8398 transparent}
@media(min-width:901px){
  #keynova-app .practice-tools{grid-template-columns:minmax(160px,1fr) minmax(180px,1.4fr) minmax(95px,.7fr) minmax(145px,1fr) 85px}
  #keynova-app .lesson-picker-tile{min-width:0}
  #keynova-app .kn-practice .section-head{margin:1px 0 4px}
  #keynova-app .metrics-grid{margin-bottom:5px}
  #keynova-app .control-tile,#keynova-app .control-icon-button,#keynova-app .lesson-picker-button{height:42px}
  #keynova-app .sound-collapsed{min-height:28px;padding:5px 11px}
  #keynova-app .sound-studio{margin-bottom:5px}
  #keynova-app .station-desk{padding-top:4px}
  #keynova-app .monitor-display{min-height:155px}
  #keynova-app .target-text{font-size:clamp(15px,1.32vw,19px);max-height:86px}
  #keynova-app .keyboard-section{padding:5px 13px}
  #keynova-app .kb-key{height:27px}
}
@media(min-width:901px) and (max-height:800px){
  #keynova-app .control-tile,#keynova-app .control-icon-button,#keynova-app .lesson-picker-button{height:36px}
  #keynova-app .metric{min-height:61px}
  #keynova-app .station-desk{padding-top:3px}
  #keynova-app .monitor-display{min-height:130px;padding:6px 10px}
  #keynova-app .target-text{min-height:40px;max-height:63px;line-height:1.36}
  #keynova-app .typing-input{height:35px;min-height:35px}
  #keynova-app .station-actions{padding:5px 12px}
}
@media(min-width:901px) and (max-height:680px){
  #keynova-app .monitor-display{min-height:117px}
  #keynova-app .target-text{max-height:45px;min-height:28px;font-size:13px}
  #keynova-app .typing-input{height:30px;min-height:30px}
  #keynova-app .metric{min-height:48px}
  #keynova-app .keyboard-section{padding:3px 10px}
  #keynova-app .kb-key{height:21px}
}
@media(max-width:900px){
  #keynova-app .lesson-picker-tile{flex:1 1 180px}
  #keynova-app .lesson-picker-button{min-height:45px}
  #keynova-app .lesson-picker-name strong{font-size:11px;max-width:160px}
}
@media(prefers-reduced-motion:reduce){#keynova-app .lesson-drawer-panel{animation:none}}

/* 1.3.2: clear typing speed measured as correct characters per second */
.metric-speed .metric-number{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.metric-speed .metric-number small{font-size:clamp(10px,1vw,14px);line-height:1.3;font-weight:800;letter-spacing:0}
.metric-speed .metric-meta{line-height:1.25}
.stats-summary:first-child small{font-size:11px;font-weight:700}
@media(max-width:460px){.metric-speed .metric-number{gap:5px}.metric-speed .metric-number small{font-size:10px}}


/* KeyNova 1.3.3 — physical full-size keyboard / photographic hands / desktop one-screen cockpit */
#keynova-app{--lime:#a7f778;--cyan:#30c8fc;--pink:#f972b0;--text:#f4f7ff;--muted:#95a8cb;background:linear-gradient(115deg,#071025,#0c1630 55%,#0a1024)}
#keynova-app .kn-shell{width:calc(100% - 28px);max-width:1900px}
#keynova-app .kn-header{height:61px;min-height:61px;gap:32px;padding:0 8px}
#keynova-app .kn-logo{min-width:202px}
#keynova-app .kn-nav a,#keynova-app .kn-nav button{font-size:12px}
#keynova-app .kn-practice.kn133{height:calc(100dvh - 66px);min-height:580px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:13px;padding:9px 0 5px;overflow:hidden}
#keynova-app .kn-lesson-sidebar{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:linear-gradient(155deg,#101c37,#101b34);border:1px solid #30446c;border-radius:16px}
#keynova-app .kn-sidebar-title{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:16px 13px 11px;color:#f5f8ff;font-weight:800}
#keynova-app .kn-sidebar-title>span{font-size:16px}
#keynova-app .kn-sidebar-title>span:first-letter{color:#3fd8f9}
#keynova-app #sideAllLessons{border:0;background:transparent;color:#92b5ed;font-size:10px;cursor:pointer}
#keynova-app .kn-sidebar-search{margin:0 10px 9px;border:1px solid #31496d;border-radius:9px;display:flex;gap:6px;align-items:center;padding:7px 9px;color:#93aed4}
#keynova-app .kn-sidebar-search input{min-width:0;flex:1;background:transparent;border:0;color:#fff;outline:none;font-size:11px}
#keynova-app .kn-sidebar-list{min-height:0;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3c5482 transparent;padding:0 9px 12px}
#keynova-app .side-group{border-top:1px solid #243554;margin-top:5px}
#keynova-app .side-stage{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:transparent;color:#dbe8ff;padding:10px 5px;font-size:12px;font-weight:800;cursor:pointer;text-align:left}
#keynova-app .side-stage:hover{color:#8ceafc}
#keynova-app .side-stage small{font-size:9px;color:#879abb;font-weight:600}
#keynova-app .side-items{display:flex;flex-direction:column;gap:3px;padding-bottom:6px}
#keynova-app .side-lesson{width:100%;border:1px solid transparent;background:transparent;color:#9caccd;text-align:left;border-radius:8px;font-size:11px;line-height:1.2;padding:8px 7px;display:flex;gap:7px;cursor:pointer}
#keynova-app .side-lesson>i{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #415677;border-radius:5px;font-style:normal;font-size:10px;flex-shrink:0}
#keynova-app .side-lesson:hover{background:#1b3153;color:#fff}
#keynova-app .side-lesson.is-current{color:#fff;background:linear-gradient(90deg,#154f9f,#162953);border-color:#2a80f5;box-shadow:inset 3px 0 #41baff}
#keynova-app .side-lesson.is-current>i{border-color:#42a5ff;color:#41f3fb}
#keynova-app .kn-workspace{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;position:relative}
#keynova-app .kn-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:29px}
#keynova-app .kn-workspace-heading{display:flex;align-items:center;gap:9px;font-size:14px;min-width:0}
#keynova-app .kn-workspace-heading>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#keynova-app .kn-live-dot{color:#5fddfc;font-size:18px}
#keynova-app .kn-badge{font-size:10px;color:#9dec85;border:1px solid #315c57;background:#16352f;border-radius:20px;padding:4px 9px;white-space:nowrap}
#keynova-app .kn-head-lessons{border:1px solid #34496f;color:#a8cffb;border-radius:7px;background:#152844;font-size:10px;font-weight:800;padding:8px 10px;cursor:pointer}
#keynova-app .practice-tools{display:grid;grid-template-columns:1fr .82fr .84fr 1.27fr 74px;gap:7px;margin:0;flex-shrink:0}
#keynova-app .control-tile{height:49px;min-height:49px;padding:6px 10px;border-radius:10px;background:#121e39}
#keynova-app .control-tile>span{font-size:8px}
#keynova-app .control-tile select{font-size:11px;line-height:1.2}
#keynova-app .control-icon-button{height:49px;min-width:0;border-radius:10px;font-size:18px}
#keynova-app .control-icon-button small{font-size:9px}
#keynova-app .metrics-grid{flex-shrink:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0}
#keynova-app .metric{height:86px;min-height:0;border-radius:12px;padding:10px 13px;background:linear-gradient(155deg,#12253c,#102239);}
#keynova-app .metric-speed{border-color:#216d5d;background:linear-gradient(125deg,#10352b,#102338)}
#keynova-app .metric-accuracy{border-color:#24558f;background:linear-gradient(125deg,#0b2b53,#10213d)}
#keynova-app .metric-errors{border-color:#70375d;background:linear-gradient(125deg,#321c39,#172036)}
#keynova-app .metric-time{border-color:#694c35;background:linear-gradient(125deg,#35282b,#171f35)}
#keynova-app .metric-header{font-size:9px;gap:7px;letter-spacing:.45px}
#keynova-app .metric-icon{height:23px;width:23px;font-size:17px}
#keynova-app .metric-number{gap:8px;margin:2px 0 0;white-space:nowrap;align-items:baseline}
#keynova-app .metric-number strong{font-size:clamp(26px,2.5vw,38px);line-height:1.05;letter-spacing:-1px}
#keynova-app .metric-number small{font-size:11px}
#keynova-app .metric-meta{display:none}
#keynova-app .station{flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;padding:8px;background:transparent;border:0;box-shadow:none;overflow:hidden}
#keynova-app .station-desk{display:block;padding:0;min-height:0;background:transparent;flex:0 0 auto}
#keynova-app .monitor{width:100%}
#keynova-app .monitor-frame{border:1px solid #2d4a7e;border-radius:14px;box-shadow:none;background:#0d1730;overflow:hidden}
#keynova-app .monitor-top{height:30px;padding:0 11px;background:#14223f;color:#b4c4e2}
#keynova-app .kn-typing-marker{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:0}
#keynova-app .kn-progress-inline{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:10px}
#keynova-app .kn-progress-line{display:block;width:94px;height:6px;border-radius:9px;background:#294368;overflow:hidden}
#keynova-app .kn-progress-line .progress-bar{display:block;height:6px;width:0;border-radius:8px;background:linear-gradient(90deg,#83f49a,#3db5e9)}
#keynova-app #progressPercent{font-weight:800;color:#a6f37f}
#keynova-app #characterProgress{font-size:9px;letter-spacing:0;color:#9aa8d5}
#keynova-app .monitor-display{background:#0d1934;padding:11px 12px 8px;min-height:0;}
#keynova-app .target-scroll{height:clamp(42px,10vh,85px);overflow:hidden}
#keynova-app .target-text{font:600 clamp(15px,1.62vw,24px)/1.65 'Be Vietnam Pro',sans-serif;min-height:0;max-height:100%;height:100%;overflow-y:auto;color:#879abf;letter-spacing:.5px}
#keynova-app .target-text .typed-correct{color:#8df7a3;background:#183b35}
#keynova-app .target-text .typed-wrong{color:#ff87ac;background:#44172d}
#keynova-app .target-text .current-char{color:#fff;border-bottom-color:#48baff;background:#1b5b9c}
#keynova-app .typing-input{height:38px;min-height:38px;max-height:38px;resize:none;margin:7px 0 0;padding:7px 11px;background:#132748;color:#fff;border:1px solid #3b74ba;border-radius:8px;font-size:14px}
#keynova-app .typing-input:focus{border-color:#35bbff;box-shadow:0 0 0 2px #246ace55}
#keynova-app .typing-help{display:none}
#keynova-app .keyboard-section{padding:0;min-height:0;flex:1;display:flex;flex-direction:column;gap:4px}
#keynova-app .keyboard-heading{margin:0;font-size:10px;letter-spacing:.25px;flex-shrink:0}
#keynova-app .keyboard-heading .keyboard-tip{font-size:10px}
#keynova-app .keyboard-illustration{position:relative;display:flex;align-items:stretch;justify-content:center;min-height:0;flex:1;padding-bottom:0;overflow:hidden}
#keynova-app .keyboard{max-width:none;width:100%;height:100%;margin:0;padding:7px 8px;display:flex;flex-direction:column;gap:4px;border:1px solid #3b5376;border-radius:13px;box-shadow:inset 0 1px 4px #ffffff13,0 9px 18px #0005;background:linear-gradient(130deg,#1d2a47,#132039);}
#keynova-app .kb-function{display:flex;gap:4px;flex:0 0 24px;min-height:0}
#keynova-app .kb-function .kb-key{max-width:none;flex:1}
#keynova-app .kb-spacer{width:11px;flex:0 0 11px}
#keynova-app .kb-clusters{display:grid;grid-template-columns:minmax(0,4.8fr) minmax(0,1.05fr) minmax(0,1.25fr);gap:7px;flex:1;min-height:0}
#keynova-app .kb-main,#keynova-app .kb-navigation,#keynova-app .kb-numpad{display:flex;flex-direction:column;gap:3px;min-width:0}
#keynova-app .kb-mainrow{display:flex;gap:3px;min-width:0;flex:1}
#keynova-app .kb-key{max-width:none;height:auto;min-height:0;min-width:0;border-radius:6px;background:linear-gradient(180deg,#344766,#253652);border:1px solid #506387;border-bottom:3px solid #101c35;font:700 clamp(7px,.68vw,11px)/1 'Space Grotesk',sans-serif;color:#f1f7ff;display:flex;align-items:center;justify-content:center;padding:0 1px;box-shadow:inset 0 1px 0 #ffffff20;user-select:none;flex:var(--grow,1)}
#keynova-app .kb-key.is-active{background:linear-gradient(160deg,#65d1ff,#3b90ec);color:#07182d;box-shadow:0 0 9px #28c7ff,0 0 2px #baf8ff inset;border-color:#a4eaff;transform:translateY(1px)}
#keynova-app .kb-key[data-key=F],#keynova-app .kb-key[data-key=J]{border-color:#2379ea;box-shadow:0 0 0 1px #1764ae;}
#keynova-app .kb-navigation .kb-navline,#keynova-app .kb-numpad .kb-numline{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;min-height:0}
#keynova-app .kb-numpad .kb-numline{grid-template-columns:repeat(4,minmax(0,1fr))}
#keynova-app .kb-navigation .kb-key,#keynova-app .kb-numpad .kb-key{width:100%;height:100%}
#keynova-app .kb-numpad .kb-key.kb-tall{grid-row:span 2}
#keynova-app .kb-numpad .kb-key.kb-double{grid-column:span 2}
#keynova-app .kb-navigation .kb-arrow-gap{visibility:hidden}
#keynova-app .kn-real-hands{position:absolute;z-index:3;pointer-events:none;width:57%;max-width:670px;height:auto;bottom:-15%;left:50%;transform:translateX(-50%);filter:drop-shadow(0 -2px 8px #0008);object-fit:contain}
#keynova-app .kn-real-hands[hidden]{display:none}
#keynova-app .station-actions{padding:4px 0 1px;background:transparent;border:0;gap:6px;flex-shrink:0;flex-wrap:nowrap;min-height:35px}
#keynova-app .kn-button{padding:7px 11px;border-radius:8px;white-space:nowrap}
#keynova-app .kn-button.primary{background:#76eaaa;box-shadow:none;border-color:#57f3a1}
#keynova-app .kn-toggle-hands{margin-left:auto;display:flex;align-items:center;gap:5px;color:#b4c8e8;font-size:10px;white-space:nowrap;cursor:pointer}
#keynova-app .kn-toggle-hands input{accent-color:#69d5ff}
#keynova-app .kn-shortcut{font-size:9px;color:#83a7ce;white-space:nowrap}
#keynova-app .sound-studio{position:absolute;bottom:1px;right:3px;width:min(310px,38%);z-index:10;margin:0;display:none}
#keynova-app .sound-studio[open]{display:block}
#keynova-app .sound-studio .sound-collapsed{display:none}
#keynova-app .sound-studio-inner{max-height:280px;overflow-y:auto;box-shadow:0 12px 32px #000b}
#keynova-app .sound-studio .switch-choices{display:flex;overflow-x:auto;gap:4px}
#keynova-app .sound-studio .switch-choice{flex:0 0 125px;padding:5px}
#keynova-app .sound-studio .sound-studio-heading{display:block}
#keynova-app .sound-studio .volume-control{margin-top:10px}
#keynova-app .kn-hero,#keynova-app .lessons-section,#keynova-app .stats-section,#keynova-app .footer-cta,#keynova-app .kn-footer{margin-top:50px}
@media(min-width:1000px) and (max-height:760px){
  #keynova-app .kn-header{height:49px;min-height:49px}
  #keynova-app .kn-practice.kn133{height:calc(100dvh - 51px);min-height:530px;padding-top:5px}
  #keynova-app .kn-workspace{gap:5px}
  #keynova-app .kn-topline{min-height:24px}
  #keynova-app .practice-tools .control-tile,#keynova-app .practice-tools .control-icon-button{height:43px;min-height:43px}
  #keynova-app .metric{height:70px;padding:7px 10px}
  #keynova-app .metric-number strong{font-size:26px}
  #keynova-app .monitor-top{height:25px}
  #keynova-app .monitor-display{padding:6px 11px}
  #keynova-app .target-scroll{height:48px}
  #keynova-app .typing-input{min-height:31px;height:31px;max-height:31px;margin-top:4px;padding:4px 9px}
  #keynova-app .kb-function{flex-basis:20px}
  #keynova-app .station-actions{min-height:30px}
}
@media(max-width:1050px){#keynova-app .kn-practice.kn133{grid-template-columns:205px minmax(0,1fr)}#keynova-app .kn-shortcut{display:none}#keynova-app .kn-real-hands{width:65%}}
@media(max-width:820px){#keynova-app .kn-practice.kn133{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible}#keynova-app .kn-lesson-sidebar{height:130px}#keynova-app .kn-sidebar-list{display:none}#keynova-app .kn-workspace{min-height:760px}#keynova-app .metrics-grid{grid-template-columns:repeat(2,1fr)}#keynova-app .practice-tools{grid-template-columns:repeat(2,minmax(0,1fr))}#keynova-app .control-icon-button{grid-column:2;grid-row:auto}#keynova-app .keyboard-illustration{min-height:285px}#keynova-app .kb-key{font-size:8px}#keynova-app .kn-real-hands{width:75%}#keynova-app .station-actions{flex-wrap:wrap}#keynova-app .sound-studio{width:90%;bottom:0}}

/* Physical numpad: tall Enter and + keys, double-width 0 */
#keynova-app .kb-numpad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:3px}
#keynova-app .kb-numpad .kb-key.kb-tall{grid-row:span 2}
#keynova-app .kb-numpad .kb-key.kb-double{grid-column:span 2}

/* Sound controls accessible without scrolling */
#keynova-app .kn-audio-picker{padding:6px 11px;border-radius:8px;background:#213453;border:1px solid #36587e;color:#d6e9ff;font-size:10px;font-weight:750;white-space:nowrap;cursor:pointer}
#keynova-app .kn-audio-picker:hover{background:#294a76;color:#fff}
@media(max-width:1100px){#keynova-app .kn-audio-picker{padding:5px 6px}}

/* KeyNova 1.3.4 custom duration and real-hand side guides */
#keynova-app .duration-control{position:relative;display:flex;flex-direction:column;justify-content:center;z-index:25}
#keynova-app .duration-control>label{font-size:8px;color:#91aacb;display:block;margin-bottom:2px}
#keynova-app .duration-control>select{width:100%;font-size:11px;line-height:1.2}
#keynova-app .duration-popover{position:absolute;z-index:50;top:calc(100% + 8px);left:0;width:255px;max-width:min(290px,90vw);padding:14px;border:1px solid #4974a3;border-radius:13px;background:#132542;color:#eff7ff;box-shadow:0 18px 44px #000a}
#keynova-app .duration-popover[hidden]{display:none!important}
#keynova-app .duration-popover>strong{display:block;font-size:12px;margin-bottom:12px}
#keynova-app .duration-fields{display:flex;gap:10px}
#keynova-app .duration-fields>label{display:flex;flex-direction:column;flex:1;gap:5px;color:#b0cafa;font-size:11px}
#keynova-app .duration-fields input{width:100%;background:#0b172c;color:#fff;border:1px solid #4b668b;border-radius:7px;padding:7px 9px;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
#keynova-app .duration-error{display:block;min-height:13px;color:#ff8fae;font-size:10px;margin-top:5px}
#keynova-app .duration-actions{display:flex;justify-content:flex-end;gap:8px}
#keynova-app .duration-actions button{background:#263e5e;color:#eaf4ff;border:1px solid #467196;padding:7px 11px;border-radius:8px;font-weight:700;font-size:11px;cursor:pointer}
#keynova-app .duration-actions button:last-child{background:#76eaaa;color:#102037;border-color:#76eaaa}
#keynova-app .keyboard-illustration{gap:5px;align-items:stretch;overflow:visible}
#keynova-app .keyboard{flex:1 1 auto;min-width:0;width:75%;box-shadow:inset 0 3px 6px #ffffff19,0 7px 0 #0b152a,0 11px 22px #0007}
#keynova-app .kb-key{box-shadow:inset 0 1px 1px #ffffff3b,0 2px 0 #101b31;background:linear-gradient(170deg,#405572,#263752);border-bottom:3px solid #101a30}
#keynova-app .kn-hand-side{position:relative;flex:0 0 clamp(68px,10%,155px);min-width:0;display:flex;align-items:center;justify-content:center;overflow:visible}
#keynova-app .kn-hand-side[hidden]{display:none!important}
#keynova-app .kn-hand-side>img{display:block;max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 4px #0006)}
#keynova-app .kn-tip-indicator{position:absolute;display:block;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:#9aff45;box-shadow:0 0 12px 5px #5fff69;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .13s,transform .13s;pointer-events:none;z-index:5}
#keynova-app .kn-tip-indicator.is-active{opacity:1;transform:translate(-50%,-50%) scale(1)}
#keynova-app .kn-hand-left [data-finger=lp]{left:14%;top:20%}
#keynova-app .kn-hand-left [data-finger=lr]{left:32%;top:11%}
#keynova-app .kn-hand-left [data-finger=lm]{left:49%;top:8%}
#keynova-app .kn-hand-left [data-finger=li]{left:70%;top:12%}
#keynova-app .kn-hand-left [data-finger=lt]{left:94%;top:31%}
#keynova-app .kn-hand-right [data-finger=rp]{left:87%;top:24%}
#keynova-app .kn-hand-right [data-finger=rr]{left:69%;top:14%}
#keynova-app .kn-hand-right [data-finger=rm]{left:56%;top:9%}
#keynova-app .kn-hand-right [data-finger=ri]{left:42%;top:14%}
#keynova-app .kn-hand-right [data-finger=rt]{left:18%;top:41%}
@media(min-width:1000px) and (max-height:760px){#keynova-app .kn-hand-side{flex-basis:8%}#keynova-app .keyboard{width:84%}}
@media(max-width:820px){#keynova-app .kn-hand-side{flex-basis:9%}#keynova-app .kn-tip-indicator{width:9px;height:9px}#keynova-app .duration-popover{width:250px}}

/* KeyNova 1.3.4: audible mistake feedback control in sound studio */
#keynova-app .kn-wrong-audio-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;margin:7px 0 9px;padding:8px 12px;border:1px solid #48618b;border-radius:10px;color:#edf4ff;background:#182944;min-height:36px;max-width:100%;font-size:12px}
#keynova-app .kn-wrong-audio-toggle input{accent-color:#a4f279;width:17px;height:17px;margin:0;cursor:pointer;flex-shrink:0}
#keynova-app .kn-wrong-audio-icon{color:#ffb27e;display:inline-flex;justify-content:center;align-items:center;font-weight:900;letter-spacing:-1px;font-size:14px}
#keynova-app .kn-wrong-audio-toggle strong{display:block;font-size:11px;line-height:1.2}
#keynova-app .kn-wrong-audio-toggle small{display:block;color:#9cb3d5;font-size:10px;line-height:1.35;margin-top:3px}

/* KeyNova 1.3.5 — layout, photoreal hand reliability and per-finger guidance */
#keynova-app .kn-sidebar-title{height:30px;min-height:30px;padding:0 11px;flex:0 0 30px;box-sizing:border-box;margin:0 0 3px}
#keynova-app .kn-topline{height:30px;min-height:30px;flex:0 0 30px}
#keynova-app .kn-workspace-heading{align-self:center;line-height:1.2}
#keynova-app .side-stage{min-height:35px}
#keynova-app .side-items{gap:2px}
#keynova-app .side-lesson{min-height:31px;align-items:center}
#keynova-app .kn-hand-side{flex:0 0 clamp(66px,11%,152px);height:100%;min-width:0;align-self:stretch;justify-content:center;align-items:center}
#keynova-app .kn-hand-figure{position:relative;max-width:100%;height:100%;aspect-ratio:190 / 308;display:flex;align-items:center;justify-content:center}
#keynova-app .kn-hand-figure>img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 7px #000a)}
#keynova-app .kn-hand-figure.kn-hand-asset-error:before{content:'✋';font-size:clamp(32px,4vw,56px);color:#ead5c7;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#keynova-app .kn-hand-image-error{opacity:0}
#keynova-app .kn-tip-indicator{width:clamp(10px,1.3vw,17px);height:clamp(10px,1.3vw,17px);border:2px solid #eafff0;background:#6aff79;box-shadow:0 0 6px 3px #54fca8,0 0 19px 7px #30ffa891;z-index:8}
#keynova-app .kn-tip-indicator.is-active{animation:kn135FingerBlink .65s ease-in-out infinite alternate}
@keyframes kn135FingerBlink{from{box-shadow:0 0 5px 2px #6aff80,0 0 10px 3px #2bff7090}to{box-shadow:0 0 9px 4px #6aff80,0 0 20px 9px #2bff70b8}}
/* Finger coordinates measured against the image itself, not its flex cell. */
#keynova-app .kn-hand-left [data-finger=lp]{left:9%;top:16%}
#keynova-app .kn-hand-left [data-finger=lr]{left:23%;top:12%}
#keynova-app .kn-hand-left [data-finger=lm]{left:45%;top:7%}
#keynova-app .kn-hand-left [data-finger=li]{left:64%;top:10%}
#keynova-app .kn-hand-left [data-finger=lt]{left:96%;top:23%}
#keynova-app .kn-hand-right [data-finger=rp]{left:87%;top:16%}
#keynova-app .kn-hand-right [data-finger=rr]{left:70%;top:12%}
#keynova-app .kn-hand-right [data-finger=rm]{left:52%;top:7%}
#keynova-app .kn-hand-right [data-finger=ri]{left:29%;top:10%}
#keynova-app .kn-hand-right [data-finger=rt]{left:5%;top:23%}
/* Sculptural keyboard chassis and real-looking raised keycaps. */
#keynova-app .keyboard{border:2px solid #7083a2;background:linear-gradient(140deg,#2d3952 0%,#1d2b43 49%,#101d30 100%);box-shadow:inset 0 3px 4px #d7eeff4d,inset 0 -4px 8px #0008,0 6px 0 #071122,0 10px 16px #0008;border-radius:15px}
#keynova-app .kb-key{background:linear-gradient(160deg,#647996 0%,#3c506e 20%,#243754 90%);border:1px solid #879db5;border-bottom:4px solid #0d1728;border-radius:6px;box-shadow:inset 0 2px 0 #eaf8ff38,0 2px 2px #030a1480;text-shadow:0 1px 1px #080e1c}
#keynova-app .kb-key.is-active{background:linear-gradient(150deg,#80eaff 0%,#54c2ff 35%,#1779ce 100%);border-bottom-color:#0052a8;box-shadow:0 0 9px 3px #37baff70,inset 0 2px 1px #fff9;color:#00162c;text-shadow:none}
#keynova-app .kb-key.is-pressed{transform:translateY(3px);border-bottom-width:1px;filter:brightness(1.14)}
#keynova-app .kn-workspace .target-text{overflow-wrap:break-word}
#keynova-app .kn-header .kn-nav{align-items:center}
@media(min-width:901px) and (max-height:760px){#keynova-app .kn-sidebar-title,#keynova-app .kn-topline{height:27px;min-height:27px;flex-basis:27px}#keynova-app .kn-hand-side{flex-basis:9.5%}}
@media(max-width:820px){#keynova-app .kn-hand-side{flex-basis:9%}#keynova-app .kn-hand-figure{height:auto;max-height:260px}}
@media(prefers-reduced-motion:reduce){#keynova-app .kn-tip-indicator.is-active{animation:none}}

/* 1.3.5.1 fingertip marker alignment: figure exactly matches image aspect. */
#keynova-app .kn-hand-side .kn-hand-figure{width:100%;height:auto;max-height:100%;aspect-ratio:190/308;align-items:unset;justify-content:unset}
#keynova-app .kn-hand-right .kn-hand-figure{aspect-ratio:225/308}
#keynova-app .kn-hand-figure>img{width:100%;height:100%;max-height:none;object-fit:fill}
#keynova-app .kn-hand-side{align-items:center}
/* Keep the three header items equally readable and baseline-aligned. */
#keynova-app .kn-nav-lesson{color:#b9cdea;font-size:12px;font-weight:700;line-height:1.3}
#keynova-app .kn-nav-lesson:hover{color:#adff86}
#keynova-app .kn-nav{display:flex;align-items:center}

/* KeyNova 1.3.7: always-visible audio controls, one desktop viewport */
#keynova-app .kn-audio-strip{display:flex;align-items:center;gap:7px;min-height:33px;max-height:33px;flex-shrink:0;padding:4px 9px;background:#111d37;border:1px solid #344d75;border-radius:9px;position:relative;z-index:5;color:#b9cbea;font-size:10px}
#keynova-app .kn-strip-toggle,#keynova-app .kn-strip-preview,#keynova-app .kn-strip-presets button{border:1px solid #405476;border-radius:6px;color:#dceeff;background:#203250;font-size:10px;cursor:pointer;height:24px;padding:0 8px;white-space:nowrap}
#keynova-app .kn-strip-toggle.is-on{border-color:#6ad7a7;background:#143d39;color:#b2ffd4}
#keynova-app .kn-strip-presets{display:flex;gap:3px;white-space:nowrap}
#keynova-app .kn-strip-presets button.is-selected{background:#164a7e;border-color:#72c9ff;color:white;box-shadow:0 0 0 1px #3f95ed inset}
#keynova-app .kn-strip-presets button:focus-visible,#keynova-app .kn-strip-preview:focus-visible{outline:2px solid #8be5ff;outline-offset:2px}
#keynova-app .kn-strip-volume{display:flex;align-items:center;gap:5px;white-space:nowrap;margin-left:auto;font-weight:600}
#keynova-app .kn-strip-volume input{width:clamp(55px,6vw,108px);accent-color:#84e9b0;cursor:pointer}
#keynova-app .kn-strip-volume output{width:31px;color:#c7ebff}
#keynova-app .kn-strip-preview{border-color:#58ad9a;background:#184843;color:#aef8e5;font-weight:750}
#keynova-app .kn-strip-state{font-size:9px;color:#bbd1ee;max-width:193px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#keynova-app .kn-strip-state.is-error{color:#ff9ba6}
#keynova-app .kn-strip-state.is-ok{color:#80f4ba}
@media(min-width:1000px) and (max-height:800px){
 #keynova-app .kn-workspace{gap:5px}
 #keynova-app .kn-audio-strip{min-height:29px;max-height:29px;padding:2px 7px}
 #keynova-app .metric{height:68px;padding:7px 11px}
 #keynova-app .target-scroll{height:clamp(37px,7vh,56px)}
 #keynova-app .typing-input{min-height:30px;height:30px;max-height:30px;margin-top:4px}
 #keynova-app .station-actions{min-height:28px}
}
@media(max-width:1280px){#keynova-app .kn-strip-state{max-width:104px}#keynova-app .kn-strip-presets button{padding:0 6px}}
@media(max-width:1050px){#keynova-app .kn-strip-state{display:none}#keynova-app .kn-strip-volume{margin-left:auto}}
@media(max-width:820px){#keynova-app .kn-audio-strip{height:auto;min-height:0;max-height:none;flex-wrap:wrap;padding:9px}#keynova-app .kn-strip-presets{overflow-x:auto;max-width:100%}#keynova-app .kn-strip-state{display:inline;max-width:240px}}

/* Built-in user's own recording is highlighted, not a switch-type claim */
#keynova-app .kn-strip-presets [data-quick-sound="mine"]{border-color:#70d8b9;background:#1c554d;color:#eafff8;font-weight:800}
#keynova-app .kn-strip-presets [data-quick-sound="mine"].is-selected{border-color:#b3f5d3;background:#146d59}
#keynova-app .mine-switch{background:linear-gradient(145deg,#78e6c0,#158c80);color:#09342d}
@media(max-width:1350px){#keynova-app .kn-strip-presets button{padding:0 5px}#keynova-app .kn-strip-state{max-width:100px}}
@media(max-width:1150px){#keynova-app .kn-strip-state{display:none}#keynova-app .kn-strip-presets{overflow-x:auto}}

/* TypingLeap 1.3.10: show the ACTUAL wrong key in red, independent of the blue target key. */
#keynova-app .kb-key.is-wrong,
#keynova-app .kb-key.is-wrong.is-active {
  background:linear-gradient(155deg,#ff8e94 0%,#ff4559 38%,#bc1739 100%);
  color:#fff;
  border-color:#ffbcc6;
  border-bottom-color:#86102a;
  text-shadow:0 1px 1px #5d1020;
  box-shadow:0 0 0 2px #ff879a99,0 0 16px 5px #ff344c99,inset 0 1px 2px #fff8;
  animation:kn-wrong-key-pulse .28s ease-out;
}
@keyframes kn-wrong-key-pulse{0%{filter:brightness(1.65)}100%{filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){#keynova-app .kb-key.is-wrong{animation:none}}

/* 1.3.11: new transparent hands without baked-in dark border/labels. */
#keynova-app .kn-hand-figure>img{object-fit:contain!important;filter:drop-shadow(0 5px 7px rgba(0,0,0,.32))!important}
#keynova-app .kn-hand-figure{overflow:visible}
#keynova-app .kn-hand-side .kn-hand-figure:after{display:none!important}
#keynova-app .kn-special-note{display:block;color:#95b5e7;font-size:11px;margin:3px 0 0}
#keynova-app .kn-key-token{display:inline-flex;align-items:center;justify-content:center;margin:2px 4px 2px 0;padding:3px 8px;border:1px solid #3c5c85;border-radius:7px;background:#203653;color:#cfe1fb;font-size:14px;font-weight:800;min-width:26px}
#keynova-app .kn-key-token.is-past{border-color:#287c60;color:#a6f8c8;background:#163e36}
#keynova-app .kn-key-token.is-next{border-color:#88cdfe;box-shadow:0 0 0 2px #49aafa66;background:#215a88;color:white}
#keynova-app .kn-key-token.is-wrong{border-color:#ff5b77!important;background:#69263b!important;color:#fff!important}
#keynova-app .kb-key{cursor:pointer}
#keynova-app .kn-key-help{margin:0 0 3px;color:#90aed8;font-size:10px}

#keynova-app .kn-hand-left .kn-hand-figure{aspect-ratio:350/530!important}
#keynova-app .kn-hand-right .kn-hand-figure{aspect-ratio:288/518!important}

/* TypingLeap 1.3.12: recalibrated fingertip dots to exact asset image coordinates. */
#keynova-app .kn-hand-left [data-finger=lp]{left:25%!important;top:32%!important}
#keynova-app .kn-hand-left [data-finger=lr]{left:47%!important;top:21%!important}
#keynova-app .kn-hand-left [data-finger=lm]{left:60%!important;top:21%!important}
#keynova-app .kn-hand-left [data-finger=li]{left:82%!important;top:27%!important}
#keynova-app .kn-hand-left [data-finger=lt]{left:95%!important;top:56%!important}
#keynova-app .kn-hand-right [data-finger=ri]{left:4%!important;top:25%!important}
#keynova-app .kn-hand-right [data-finger=rm]{left:25%!important;top:17%!important}
#keynova-app .kn-hand-right [data-finger=rr]{left:45%!important;top:19%!important}
#keynova-app .kn-hand-right [data-finger=rp]{left:75%!important;top:32%!important}
#keynova-app .kn-hand-right [data-finger=rt]{left:4%!important;top:68%!important}
#keynova-app .kn-hand-figure>img{filter:none!important}
#keynova-app .kn-tip-indicator:not(.is-active){opacity:0!important}
#keynova-app .kn-tip-indicator.is-active{opacity:1!important;filter:drop-shadow(0 0 7px #9fff75)}

/* TypingLeap 1.3.13: fully uncropped hands with reanchored indicators. */
#keynova-app .kn-hand-figure>img{object-fit:contain!important;filter:none!important}
#keynova-app .kn-hand-side{overflow:visible!important}
#keynova-app .kn-hand-left .kn-hand-figure{aspect-ratio:214/266!important}
#keynova-app .kn-hand-right .kn-hand-figure{aspect-ratio:238/265!important}
#keynova-app .kn-hand-right{padding-right:6px;box-sizing:border-box}
#keynova-app .kn-hand-left [data-finger=lp]{left:23%!important;top:20%!important}
#keynova-app .kn-hand-left [data-finger=lr]{left:40%!important;top:12%!important}
#keynova-app .kn-hand-left [data-finger=lm]{left:64%!important;top:8%!important}
#keynova-app .kn-hand-left [data-finger=li]{left:83%!important;top:16%!important}
#keynova-app .kn-hand-left [data-finger=lt]{left:94%!important;top:36%!important}
#keynova-app .kn-hand-right [data-finger=ri]{left:23%!important;top:17%!important}
#keynova-app .kn-hand-right [data-finger=rm]{left:39%!important;top:8%!important}
#keynova-app .kn-hand-right [data-finger=rr]{left:59%!important;top:14%!important}
#keynova-app .kn-hand-right [data-finger=rp]{left:80%!important;top:26%!important}
#keynova-app .kn-hand-right [data-finger=rt]{left:12%!important;top:42%!important}


/* TypingLeap 1.3.20 — adjustments based on the owner's annotated screenshot.
 * Built over UNMODIFIED 1.3.13 keyboard, hands, and general workspace.
 * Only four compact statistics and the two one-line text fields change. */
#keynova-app .metrics-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  flex-shrink:0;
}
#keynova-app .metric{
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  min-width:0;
  height:49px;
  min-height:49px;
  padding:5px 10px;
  border-radius:10px;
  gap:5px;
  overflow:hidden;
}
#keynova-app .metric-header{
  display:flex;
  flex:0 1 auto;
  min-width:0;
  align-items:center;
  gap:6px;
  font-size:clamp(9px,.8vw,12px);
  line-height:1.1;
  letter-spacing:0;
  white-space:nowrap;
}
#keynova-app .metric-icon{
  flex:0 0 19px;
  width:19px;
  height:19px;
  font-size:13px;
}
#keynova-app .metric-number{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:4px;
  flex:0 1 auto;
  min-width:0;
  margin:0;
  white-space:nowrap;
}
#keynova-app .metric-number strong{
  font-size:clamp(20px,1.85vw,31px);
  line-height:1;
  letter-spacing:-.6px;
}
#keynova-app .metric-number small,
#keynova-app .metric-speed .metric-number small{
  font-size:clamp(7px,.65vw,11px);
  line-height:1;
  white-space:nowrap;
}

/* Give the space saved from the statistics to the original monitor frame.
   Reference on top, typed text below: one visual line each, same font & height. */
#keynova-app .monitor-display{
  padding:8px 12px 9px;
}
#keynova-app .target-scroll,
#keynova-app .typing-input{
  box-sizing:border-box;
  height:82px;
  min-height:82px;
  max-height:82px;
  width:100%;
  font-family:'Be Vietnam Pro',sans-serif;
  font-size:clamp(30px,2.3vw,42px);
  font-weight:650;
  line-height:1.3;
  letter-spacing:.25px;
}
#keynova-app .target-scroll{
  display:flex;
  align-items:center;
  overflow:hidden;
}
#keynova-app .target-text,
#keynova-app .kn-workspace .target-text{
  display:block;
  flex:0 0 100%;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  scrollbar-width:none;
  font:inherit;
  line-height:1.3;
}
#keynova-app .target-text::-webkit-scrollbar{display:none}
#keynova-app .typing-input{
  display:block;
  white-space:pre;
  overflow-wrap:normal;
  word-break:normal;
  overflow-x:auto;
  overflow-y:hidden;
  resize:none;
  margin:6px 0 0;
  padding:11px 13px;
}
#keynova-app .typing-input::placeholder{font-size:clamp(14px,1.2vw,19px);font-weight:400}

@media(min-width:821px) and (max-height:800px){
  #keynova-app .metric{height:46px;min-height:46px;padding:4px 9px}
  #keynova-app .target-scroll,#keynova-app .typing-input{
    height:57px;min-height:57px;max-height:57px;
    font-size:clamp(26px,2.3vw,37px);
  }
  #keynova-app .monitor-display{padding:6px 10px}
  #keynova-app .typing-input{margin-top:5px;padding:5px 11px}
}
@media(max-width:820px){
  #keynova-app .metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  #keynova-app .metric{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    height:49px;
    min-height:49px;
    padding:5px 7px;
    gap:1px;
  }
  #keynova-app .metric-header{font-size:clamp(6px,1.2vw,9px);gap:3px;line-height:1}
  #keynova-app .metric-icon{flex:0 0 13px;width:13px;height:13px;font-size:10px}
  #keynova-app .metric-number{justify-content:flex-start;gap:2px}
  #keynova-app .metric-number strong{font-size:clamp(17px,3.1vw,24px)}
  #keynova-app .metric-number small,#keynova-app .metric-speed .metric-number small{font-size:clamp(7px,1vw,9px)}
  #keynova-app .target-scroll,#keynova-app .typing-input{
    height:68px;min-height:68px;max-height:68px;
    font-size:clamp(26px,4.2vw,35px);
  }
  #keynova-app .monitor-display{padding:8px 10px}
  #keynova-app .typing-input{margin-top:6px;padding:10px}
}
@media(max-width:480px){
  #keynova-app .metrics-grid{gap:3px}
  #keynova-app .metric{height:46px;min-height:46px;padding:5px 4px}
  #keynova-app .metric-header{font-size:clamp(5px,1.6vw,7px);gap:2px}
  #keynova-app .metric-icon{display:none}
  #keynova-app .metric-number strong{font-size:clamp(16px,4.6vw,19px)}
  #keynova-app .metric-number small,#keynova-app .metric-speed .metric-number small{font-size:6px}
  #keynova-app .target-scroll,#keynova-app .typing-input{
    height:63px;min-height:63px;max-height:63px;
    font-size:clamp(24px,6vw,30px);
  }
  #keynova-app .monitor-display{padding:7px 8px}
  #keynova-app .typing-input{margin-top:5px;padding:10px 9px}
  #keynova-app .typing-input::placeholder{font-size:12px}
}


/* TypingLeap 1.3.21 — remove keyboard title, enlarge keyboard area near text box */
#keynova-app .keyboard-section{
  padding:0;
  gap:1px;
}
#keynova-app .keyboard-heading{
  min-height:18px;
  margin:0;
  justify-content:flex-end;
}
#keynova-app .keyboard-heading > span:first-child{
  display:none;
}
#keynova-app .keyboard-heading .keyboard-tip,
#keynova-app .keyboard-tip{
  font-size:10px;
  color:#91e0b1;
}
#keynova-app .keyboard-illustration{
  gap:2px;
  align-items:stretch;
  overflow:visible;
  min-height:290px;
  margin-top:0;
}
#keynova-app .keyboard{
  flex:1 1 auto;
  min-width:0;
  width:82%;
  height:100%;
  min-height:258px;
  padding:8px 8px;
  margin:0;
}
#keynova-app .kn-hand-side{
  flex:0 0 clamp(56px,7.2%,94px);
}
#keynova-app .kb-function{flex-basis:24px}
#keynova-app .kb-main,#keynova-app .kb-navigation,#keynova-app .kb-numpad{gap:4px}
#keynova-app .kb-mainrow{gap:4px}
#keynova-app .kb-navigation .kb-navline,
#keynova-app .kb-numpad .kb-numline{gap:4px}

@media(min-width:1000px) and (max-height:760px){
  #keynova-app .keyboard-heading{min-height:15px}
  #keynova-app .keyboard-illustration{min-height:250px}
  #keynova-app .keyboard{width:84%;min-height:225px}
  #keynova-app .kn-hand-side{flex-basis:7.5%}
}

@media(max-width:1050px){
  #keynova-app .keyboard{width:84%}
  #keynova-app .kn-hand-side{flex-basis:7.5%}
}

@media(max-width:820px){
  #keynova-app .keyboard-heading{min-height:14px}
  #keynova-app .keyboard-tip{font-size:9px}
  #keynova-app .keyboard-illustration{min-height:265px;gap:2px}
  #keynova-app .keyboard{width:86%;min-height:220px;padding:7px 7px}
  #keynova-app .kn-hand-side{flex-basis:6.5%}
}

@media(max-width:480px){
  #keynova-app .keyboard-heading{min-height:12px}
  #keynova-app .keyboard-tip{font-size:8px}
  #keynova-app .keyboard-illustration{min-height:205px}
  #keynova-app .keyboard{width:88%;min-height:176px;padding:5px 5px}
  #keynova-app .kn-hand-side{flex-basis:4.5%}
}


/* TypingLeap 1.3.22 — pull keyboard upward closer to the text box */
#keynova-app .station{
  gap:3px;
}
#keynova-app .keyboard-section{
  padding:0;
  gap:0;
  margin-top:-7px;
}
#keynova-app .keyboard-heading{
  min-height:12px;
  margin:0 0 1px;
}
#keynova-app .keyboard-tip{
  line-height:1;
}
#keynova-app .keyboard-illustration{
  margin-top:-2px;
  min-height:296px;
}
#keynova-app .keyboard{
  min-height:264px;
}

@media(min-width:1000px) and (max-height:760px){
  #keynova-app .station{gap:2px}
  #keynova-app .keyboard-section{margin-top:-8px}
  #keynova-app .keyboard-heading{min-height:10px;margin-bottom:0}
  #keynova-app .keyboard-illustration{margin-top:-2px;min-height:255px}
  #keynova-app .keyboard{min-height:232px}
}

@media(max-width:820px){
  #keynova-app .station{gap:2px}
  #keynova-app .keyboard-section{margin-top:-5px}
  #keynova-app .keyboard-heading{min-height:10px}
  #keynova-app .keyboard-illustration{margin-top:-1px;min-height:268px}
  #keynova-app .keyboard{min-height:224px}
}

@media(max-width:480px){
  #keynova-app .keyboard-section{margin-top:-4px}
  #keynova-app .keyboard-heading{min-height:9px}
  #keynova-app .keyboard-illustration{min-height:208px}
  #keynova-app .keyboard{min-height:178px}
}


/* TypingLeap 1.3.23 — readable left lesson navigation only.
   No changes to keyboard, practice monitor, statistics or other sections. */
#keynova-app #sideAllLessons{
  font-size:12px;
  white-space:nowrap;
}
#keynova-app .kn-sidebar-search input{
  font-size:13px;
}
#keynova-app .side-stage{
  font-size:14px;
  line-height:1.35;
  padding:10px 5px;
}
#keynova-app .side-stage small{
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
  flex-shrink:0;
  margin-left:4px;
}
#keynova-app .side-lesson{
  font-size:13px;
  line-height:1.35;
  padding:8px 7px;
}
#keynova-app .side-lesson > span{
  min-width:0;
  overflow-wrap:break-word;
}


/* TypingLeap 1.3.24 — enlarge only top navigation and left lesson menu. */
#keynova-app .kn-header .kn-nav{
  gap:clamp(16px,2.2vw,30px);
}
#keynova-app .kn-header .kn-nav a,
#keynova-app .kn-header .kn-nav button.kn-nav-lesson{
  font-size:clamp(14px,1.17vw,16px);
  font-weight:800;
  line-height:1.3;
  white-space:nowrap;
}
#keynova-app .kn-sidebar-title>span{
  font-size:18px;
}
#keynova-app #sideAllLessons{
  font-size:12px;
}
#keynova-app .kn-sidebar-search input{
  font-size:14px;
}
#keynova-app .side-stage{
  font-size:15px;
  line-height:1.35;
}
#keynova-app .side-stage small{
  font-size:11px;
}
#keynova-app .side-lesson{
  font-size:14px;
  line-height:1.38;
}
/* Header space is limited on compact desktop widths; retain one-line labels. */
@media(min-width:781px) and (max-width:1100px){
  #keynova-app .kn-header .kn-nav{
    gap:12px;
  }
  #keynova-app .kn-header .kn-nav a,
  #keynova-app .kn-header .kn-nav button.kn-nav-lesson{
    font-size:14px;
  }
}