.kbd{--kbd-neutral:#f1e7d0;--kbd-outline:#4a3426;container-type:inline-size;width:100%;max-width:760px;margin:0 auto;border:2px solid var(--kbd-outline);border-radius:14px;background:#fff6e0;font-family:Trebuchet MS,Segoe UI,system-ui,Apple SD Gothic Neo,Malgun Gothic,PingFang SC,Microsoft YaHei,Noto Sans CJK SC,Noto Sans CJK KR,sans-serif;color:#2b2118;-webkit-user-select:none;-moz-user-select:none;user-select:none}.kbd-inner{padding:1.2cqw}.kbd-row{display:flex;gap:.5cqw;margin-bottom:.5cqw}.kbd-row:last-child{margin-bottom:0}.kbd-key,.kbd-spacer{flex-basis:0;flex-shrink:1;min-width:0}.kbd-key{position:relative;height:6.2cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--kbd-outline);border-radius:1cqw;background:var(--key-bg);line-height:1;overflow:hidden;transition:background-color .25s ease}.kbd-main{font-size:max(3.4cqw,9px);font-weight:700}.kbd-small{font-size:max(2cqw,7px);font-weight:600}.kbd-top{font-size:max(2.4cqw,8px);opacity:.7;margin-bottom:.3cqw}.kbd-key.is-next{outline:3px solid #d9482b;outline-offset:1px;z-index:1;box-shadow:0 0 10px 3px rgba(217,72,43,.55);animation:kbd-pulse .9s ease-in-out infinite alternate}.kbd-key.is-wrong{animation:kbd-wrong .4s ease-out;background:#f0483e;color:#fff}@keyframes kbd-pulse{0%{box-shadow:0 0 4px 1px rgba(217,72,43,.35)}to{box-shadow:0 0 12px 4px rgba(217,72,43,.7)}}@keyframes kbd-wrong{0%,60%{background:#f0483e}to{background:var(--key-bg)}}.hands-wrap{width:100%;max-width:760px;margin:0 auto;border:2px solid transparent}.hands{display:block;width:100%;height:auto}.hand-finger.is-active,.hand-finger.is-shift{stroke:#e65100;stroke-width:5;filter:drop-shadow(0 0 10px #ffb300) drop-shadow(0 0 4px #fff);animation:hand-glow .9s ease-in-out infinite alternate}@keyframes hand-glow{0%{filter:drop-shadow(0 0 5px #ffb300)}to{filter:drop-shadow(0 0 14px #ffb300) drop-shadow(0 0 5px #fff)}}@media (prefers-reduced-motion:reduce){.hand-finger.is-active,.hand-finger.is-shift,.kbd-key.is-next{animation:none}}.train-page{--panel-bg:#fff3d6;--panel-outline:#2b1a10;--panel-shadow:0 4px 0 rgba(43,26,16,0.45);--ok:#3f9a35;--bad:#d9482b;min-height:100vh;max-width:1100px;margin:0 auto;padding:16px;font-family:Trebuchet MS,Segoe UI,system-ui,Apple SD Gothic Neo,Malgun Gothic,PingFang SC,Microsoft YaHei,Noto Sans CJK SC,Noto Sans CJK KR,sans-serif;color:#2b2118;overflow-x:hidden}.train-panel{border:3px solid var(--panel-outline);border-radius:16px;background:var(--panel-bg);box-shadow:var(--panel-shadow)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.train-btn{display:inline-flex;align-items:center;justify-content:center;padding:.55rem 1.4rem;border:3px solid var(--panel-outline);border-radius:999px;background:var(--accent,#d9482b);color:#fff;font:inherit;font-size:1.05rem;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 rgba(43,26,16,.45)}.train-btn-ghost{background:#fff;color:var(--panel-outline)}.train-btn:focus-visible{outline:3px solid #ffb300;outline-offset:2px}.train-notice{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border:2px solid var(--panel-outline);border-radius:12px;background:#fff8e6;font-weight:600}.train-notice-mobile,.train-notice-touch{display:none}@media (max-width:760px),(pointer:coarse){.train-notice-mobile{display:flex}}@media (hover:none) and (pointer:coarse){.train-notice-touch{display:flex}}.train-notice>span{flex:1 1}.train-notice-warn{background:#ffe2a8}.train-notice-ime{border-color:#ffd166;background:rgba(150,30,20,.92);color:#fff;text-align:center;justify-content:center}.train-notice-close{flex:none;width:28px;height:28px;border:0;border-radius:8px;background:rgba(43,26,16,.1);color:inherit;font-size:1.2rem;line-height:1;cursor:pointer}.train-header{margin-bottom:16px;text-align:center}.train-home{display:inline-block;margin-bottom:4px;color:inherit;font-weight:600;opacity:.75}.train-title{margin:0;font-size:clamp(1.8rem,5vw,2.6rem)}.train-subtitle{margin:6px 0 0;opacity:.8}.train-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));grid-gap:16px;gap:16px;margin:0;padding:0;list-style:none}.train-level{min-width:0;padding:14px 16px}.train-level-head{display:flex;align-items:baseline;gap:8px}.train-level-num{flex:none;padding:2px 8px;border-radius:999px;background:var(--panel-outline);color:#fff3d6;font-size:.8rem;font-weight:700}.train-level-title{flex:1 1;margin:0;font-size:1.2rem}.train-badge{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border:2px solid var(--panel-outline);border-radius:50%;background:#f5b400;color:#fff;font-size:1rem}.train-level-meta{margin:6px 0 10px;font-size:.85rem;opacity:.8}.train-chars{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-weight:700}.train-lessons{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}.train-lesson{display:grid;grid-template-columns:auto 1fr auto;align-items:center;grid-gap:8px;gap:8px;padding:7px 10px;border:2px solid var(--panel-outline);border-radius:10px;background:#fff;color:inherit;text-decoration:none}a.train-lesson:hover{background:#fffbf0;transform:translateY(-1px)}.train-lesson.is-locked{border-style:dashed;background:transparent;opacity:.6}.train-lesson.is-passed{background:#e6f5df}.train-lesson-num{font-size:.8rem;font-weight:700;opacity:.7}.train-lesson-name{min-width:0;overflow-wrap:anywhere;font-weight:600}.train-lesson-name small{display:block;font-weight:400;opacity:.8}.train-lesson-state{display:flex;flex-direction:column;align-items:flex-end;font-size:.8rem;white-space:nowrap}.train-lesson.is-passed .train-lesson-state{color:var(--ok);font-weight:700}.train-lesson-best{color:#2b2118;font-weight:400;opacity:.75}.train-target-icon{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#d9482b 0 22%,#fff 23% 45%,#d9482b 46% 68%,#fff 69%);border:1.5px solid var(--panel-outline);opacity:1}.lesson,.train-lesson-page{display:flex;flex-direction:column}.lesson{gap:12px}.lesson-hud{display:flex;align-items:center;gap:clamp(8px,2vw,20px);min-height:44px;padding:4px 8px 4px 14px;border-radius:12px;background:rgba(29,20,16,.85);color:#fff;font-weight:700;min-width:0}.lesson-back{flex:none;color:#ffe066;text-decoration:none}.lesson-title{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}.lesson-live{display:flex;gap:14px}.lesson-live-item{display:flex;align-items:baseline;gap:5px}.lesson-live-label{font-size:.75rem;opacity:.75;text-transform:uppercase}.lesson-live-value{font-size:1.1rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.lesson-progress{height:12px;border:2px solid var(--panel-outline);border-radius:999px;background:#fff;overflow:hidden}.lesson-progress-fill{height:100%;background:#6ccf5a;transition:width .25s ease}.lesson-stage{position:relative;min-height:190px;justify-content:center;gap:10px;padding:16px;border:3px solid var(--panel-outline);border-radius:16px;background:var(--panel-bg);box-shadow:var(--panel-shadow)}.keys-stage,.lesson-stage{display:flex;flex-direction:column;align-items:center}.keys-stage{gap:8px}.keys-intro{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 16px;border:2px solid var(--panel-outline);border-radius:12px;background:#fff}.keys-intro-title{font-size:clamp(1rem,2.6vw,1.3rem);font-weight:700;text-align:center}.keys-intro-count{display:flex;align-items:center;gap:5px;font-size:.85rem}.keys-intro-dot{width:12px;height:12px;border:2px solid var(--panel-outline);border-radius:50%;background:#f5b400}.keys-intro-left{margin-left:4px;opacity:.75}.keys-practice{font-size:.95rem;opacity:.7}.keys-char{min-width:1.3em;padding:0 .15em;border-bottom:6px solid #d9482b;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:clamp(4.5rem,16vw,7.5rem);font-weight:800;line-height:1.1;text-align:center}.keys-char.is-space{font-family:inherit;font-size:clamp(2rem,7vw,3rem);padding:.4em 1em}.keys-char.is-shake{animation:lesson-shake .35s ease-out;color:var(--bad)}@keyframes lesson-shake{0%,to{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}.lesson-text{margin:0;width:100%;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:clamp(1.25rem,3.2vw,2rem);line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.lesson-char{color:#8a7a68;border-radius:3px}.lesson-char.is-done{color:var(--ok)}.lesson-char.is-done.is-error{color:#c27c12}.lesson-char.is-current{color:#2b2118;background:rgba(255,179,0,.25);box-shadow:inset 0 -4px 0 #d9482b;animation:lesson-blink 1s steps(2,start) infinite}.lesson-char.is-current.is-error{color:#fff;background:var(--bad);box-shadow:inset 0 -4px 0 #7a1a0c}@keyframes lesson-blink{to{box-shadow:inset 0 -4px 0 transparent}}.lesson-skip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:.9rem}.lesson-guide{gap:8px}.lesson-guide,.lesson-pause{display:flex;flex-direction:column}.lesson-pause{position:fixed;inset:0;z-index:20;align-items:center;justify-content:center;gap:12px;background:rgba(20,14,10,.6);color:#fff}.lesson-pause-title{font-size:clamp(2rem,6vw,3.5rem);font-weight:800}.lesson-pause-hint{font-size:1.1rem;opacity:.85}.report{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(760px,100%);margin:0 auto;padding:18px clamp(12px,3vw,24px)}.report-title{margin:0;font-size:1.3rem}.report-verdict{padding:4px 24px;border:3px solid var(--panel-outline);border-radius:999px;color:#fff;font-size:clamp(1.8rem,6vw,2.4rem);font-weight:800}.report-verdict.is-pass{background:var(--ok)}.report-verdict.is-fail{background:var(--bad)}.report-note{margin:0;text-align:center;opacity:.85}.report-stats{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px;width:100%;margin:4px 0;text-align:center}.report-stats dt{font-size:.8rem;opacity:.7}.report-stats dd{margin:0;font-size:1.5rem;font-weight:800}.report-stats dd.report-sub{font-size:.8rem;font-weight:400;opacity:.7}.report-subtitle{align-self:flex-start;margin:6px 0 0;font-size:1rem}.report-missed{display:flex;flex-wrap:wrap;gap:10px;align-self:flex-start;margin:0;padding:0;list-style:none}.report-missed li{display:flex;align-items:center;gap:6px}.report-missed kbd{min-width:2em;padding:2px 8px;border:2px solid var(--panel-outline);border-radius:6px;background:#fff;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:1.1rem;font-weight:700;text-align:center}.report-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}.train-lesson.is-loading{border-style:dashed;background:rgba(255,255,255,.5);color:transparent}.train-lesson.is-loading .train-lesson-name,.train-lesson.is-loading .train-lesson-num{color:#2b2118;opacity:.45}.train-lesson.is-loading .train-lesson-state{color:#2b2118;opacity:.4}.train-stats-link{margin-top:10px;padding:.3rem 1.1rem;font-size:.95rem}.train-stars{color:#e09a00;font-size:1rem;letter-spacing:1px}.train-range.is-open .train-lesson-state,.train-range.is-passed .train-lesson-state{font-weight:700}.lesson-accuracy-note{margin:0;padding:6px 12px;border:2px solid var(--panel-outline);border-radius:10px;background:#ffe2a8;font-weight:700;text-align:center}.lesson-skip-key{margin-left:8px;padding:0 6px;border:1.5px solid;border-radius:5px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.8em}.range{display:flex;flex-direction:column;gap:10px}.lesson-live-value.is-low{color:#ff8a6b}.range-field{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 160px);overflow:hidden;border:3px solid var(--panel-outline);border-radius:16px;background-color:#8fd0f0;background-image:url(/assets/bg/valley-ground.png),url(/assets/bg/valley-hills.png),url(/assets/bg/valley-sky.png);background-repeat:no-repeat;background-size:100% auto,100% auto,cover;background-position:bottom,center 78%,top;box-shadow:var(--panel-shadow);-webkit-user-select:none;-moz-user-select:none;user-select:none}.range-wall{position:absolute;left:0;bottom:0;width:17%;height:46%;border-right:3px solid var(--panel-outline);border-top:3px solid var(--panel-outline);background:repeating-linear-gradient(0deg,transparent 0 22%,rgba(43,26,16,.35) 22% 24%),linear-gradient(#b9a68c,#8f7a60);border-top-right-radius:6px}.range-wall:before{content:"";position:absolute;left:0;right:0;top:-12%;height:12%;background:repeating-linear-gradient(90deg,#a8957a 0 22%,transparent 22% 34%);border-bottom:3px solid var(--panel-outline)}.range-archer{position:absolute;left:2%;bottom:38%;width:14%;height:auto;pointer-events:none;filter:drop-shadow(0 3px 0 rgba(43,26,16,.35))}.range-target{position:absolute;width:clamp(46px,11%,120px);aspect-ratio:1;transform:translate(-50%,-50%);transition:filter .15s}.range-target:after{content:"";position:absolute;left:50%;top:80%;width:46%;height:40%;transform:translateX(-50%);z-index:-1;background:linear-gradient(70deg,transparent 0 44%,#7a4d27 44% 56%,transparent 56%) 0 /50% 100% no-repeat,linear-gradient(-70deg,transparent 0 44%,#7a4d27 44% 56%,transparent 56%) 100% /50% 100% no-repeat}.range-target-svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 0 rgba(43,26,16,.4))}.range-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 .35em;border:2px solid var(--panel-outline);border-radius:8px;background:#fff8e6;color:#2b2118;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:clamp(1rem,2.6vw,1.7rem);font-weight:800;line-height:1.25;white-space:pre}.range-typed{color:var(--ok)}.range-target.is-locked .range-target-svg{filter:drop-shadow(0 0 6px #ffb300) drop-shadow(0 0 2px #ffb300)}.range-target.is-locked .range-label{border-color:#e09a00;background:#fff1b8}.range-target.is-shake{animation:range-shake .3s ease-out}.range-target.is-broken{pointer-events:none;animation:range-break .3s ease-in .22s forwards}.range-arrow{position:absolute;width:clamp(36px,8%,96px);height:auto;margin:-1.1% 0 0 -4%;pointer-events:none;animation-name:range-arrow-fly;animation-timing-function:linear;animation-fill-mode:forwards}.range-start{position:absolute;left:50%;bottom:6%;max-width:80%;transform:translateX(-40%);padding:6px 14px;border:2px solid var(--panel-outline);border-radius:999px;background:rgba(255,248,230,.92);font-weight:700;text-align:center}.range-help{margin:0;font-size:.85rem;text-align:center;opacity:.8}@keyframes range-arrow-fly{0%{transform:translate(0) rotate(var(--rot))}to{transform:translate(var(--tx),var(--ty)) rotate(var(--rot))}}@keyframes range-break{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}30%{transform:translate(-50%,-50%) scale(1.15) rotate(-6deg)}to{opacity:0;transform:translate(-50%,-20%) scale(.6) rotate(25deg)}}@keyframes range-shake{0%,to{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 6px),-50%)}75%{transform:translate(calc(-50% + 6px),-50%)}}.range-results .range-result-hits{font-size:clamp(2.4rem,8vw,3.4rem)}.range-result-stats{grid-template-columns:1fr}.range-result-stars{color:#e09a00;font-size:clamp(2rem,7vw,2.8rem);letter-spacing:4px}.range-new-badge{display:flex;align-items:center;gap:8px;margin:0;font-size:1.15rem;font-weight:800}.range-goal{font-size:.85rem}.train-stats{gap:14px}.stats-panel,.train-stats{display:flex;flex-direction:column}.stats-panel{gap:8px;padding:14px clamp(10px,3vw,20px)}.stats-hint{margin:0;font-size:.9rem;opacity:.8}.stats-drill{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}.train-btn:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}.stats-table-wrap{max-width:100%;overflow-x:auto}.stats-table{width:100%;border-collapse:collapse;font-size:.95rem;text-align:center}.stats-table td,.stats-table th{padding:6px 8px;border-bottom:1.5px solid rgba(43,26,16,.2)}.stats-table thead th{font-size:.8rem;opacity:.75}@media (max-width:560px){.lesson-live-label{display:none}.lesson-back{font-size:.9rem}}@media (prefers-reduced-motion:reduce){.keys-char.is-shake,.lesson-char.is-current,.range-target.is-shake{animation:none}.range-target.is-broken{animation-duration:.01s}.range-arrow{animation-duration:.01s!important}}.train-home-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}