@layer components{.tk{--tk-soft: color-mix(in srgb, var(--color-text-heading) 6%, transparent);--tk-skin: #eebd96;--tk-skin-hi: #f8d7b9;--tk-line: #bd7f57;--tk-nail: #fbe4d5;--tk-skin-active: #f0894a;--tk-sleeve: #a79df0;--tk-sleeve-hi: #bdb5f6;--tk-sleeve-line: #7f74d8}[data-theme=dark] .tk{--tk-skin: #dba983;--tk-skin-hi: #ecc4a3;--tk-line: #8e5a3a;--tk-nail: #f3d6c4;--tk-skin-active: #e9783a;--tk-sleeve: #8f85e0;--tk-sleeve-hi: #a69df0;--tk-sleeve-line: #5f55b8}.tk{width:100%;margin:0 auto}.tk-stage{position:relative;overflow:hidden;background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:28px;padding:22px 28px 0;box-shadow:0 1px 2px #281c0c0a,0 30px 60px -36px #3c230a47}@media(max-width:640px){.tk-stage{padding:18px 14px 0;border-radius:22px}}.tk-progress{position:absolute;inset:0 0 auto;height:3px}#tk-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--color-primary-400),var(--color-primary-600));transition:width .18s ease}.tk-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--color-border)}.tk-brand-wrap{display:flex;flex-direction:column;gap:4px}.tk-brand{font-family:var(--font-display, serif);font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem);font-weight:700;color:var(--color-text-heading);line-height:1.05;letter-spacing:-.01em;margin:0}.tk-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary-600);margin:0}.tk-top-right{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}.tk-iconbtn{width:38px;height:38px;flex-shrink:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--color-border);background:var(--color-surface-card);color:var(--color-text-muted);transition:color .15s,border-color .15s}.tk-iconbtn svg{width:18px;height:18px}.tk-iconbtn:hover{color:var(--color-text-heading);border-color:var(--color-border-hover)}.tk-iconbtn[aria-pressed=true]{color:var(--color-primary-600);border-color:var(--color-primary-300)}.tk-iconbtn .tk-snd-off,.tk-iconbtn[aria-pressed=false] .tk-snd-on{display:none}.tk-iconbtn[aria-pressed=false] .tk-snd-off{display:inline}.tk-metrics{display:flex;gap:20px}.tk-metric{display:flex;align-items:baseline;gap:6px}.tk-metric span{font-family:var(--font-display, serif);font-size:24px;font-weight:700;color:var(--color-text-heading);line-height:1;font-variant-numeric:tabular-nums}.tk-metric label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}.tk-os{display:inline-flex;align-items:center;height:38px;padding:3px;gap:2px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface-card)}.tk-os button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:650;color:var(--color-text-muted);cursor:pointer;transition:background .15s,color .15s}.tk-os button svg{width:14px;height:14px;flex-shrink:0}.tk-os button:hover{color:var(--color-text-heading)}.tk-os button[aria-checked=true]{background:var(--color-primary-500);color:#fff}@media(max-width:420px){.tk-os button span{display:none}.tk-os button{padding:0 10px}}.tk-layout{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface-card);color:var(--color-text-muted)}.tk-layout svg{width:16px;height:16px;flex-shrink:0}.tk-layout select{appearance:none;border:none;background:transparent;font-size:13.5px;font-weight:650;color:var(--color-text-heading);cursor:pointer;outline:none;padding-right:2px}.tk-layout select option{background:var(--color-surface-card);color:var(--color-text-heading)}@media(max-width:560px){.tk-topbar{padding-bottom:16px}.tk-top-right{width:100%;justify-content:space-between;gap:12px 8px}.tk-layout{flex:1;min-width:0}.tk-layout select{width:100%;min-width:0;text-overflow:ellipsis}.tk-metrics{width:100%}}.tk-body{position:relative;display:grid;grid-template-columns:186px minmax(0,1fr);gap:24px;padding:22px 0 0}.tk-main{min-width:0;padding-bottom:24px}.tk-lessonlist[hidden]{display:none}.tk-lessonlist{position:absolute;left:198px;top:22px;z-index:8;width:270px;max-height:min(540px,calc(100% - 44px));display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface-card);overflow:hidden;box-shadow:0 30px 60px -22px #28190a61,0 8px 20px -12px #28190a33;animation:tk-pop-in .16s ease-out}@keyframes tk-pop-in{0%{opacity:0;transform:translate(-8px) scale(.98)}to{opacity:1;transform:none}}.tk-ll-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px 12px 14px;border-bottom:1px solid var(--color-border)}.tk-ll-head span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}.tk-ll-x{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-muted)}.tk-ll-x:hover{background:var(--tk-soft);color:var(--color-text-heading)}.tk-ll-x svg{width:15px;height:15px}.tk-ll-scroll{position:relative;overflow-y:auto;overflow-x:hidden;padding:8px;scrollbar-width:thin}.tk-ll-unit{font-size:11px;font-weight:800;color:var(--color-text-heading);padding:10px 8px 4px}.tk-ll-unit:first-child{padding-top:2px}.tk-ll-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 9px;border-radius:10px;font-size:13px;font-weight:600;color:var(--color-text-body);cursor:pointer;transition:background .12s,color .12s}.tk-ll-item:hover{background:var(--tk-soft)}.tk-ll-item.active{background:color-mix(in srgb,var(--color-primary-500) 13%,transparent);color:var(--color-primary-700)}[data-theme=dark] .tk-ll-item.active{color:var(--color-primary-300)}.tk-ll-num{width:20px;height:20px;flex-shrink:0;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;background:var(--tk-soft);color:var(--color-text-muted)}.tk-ll-item.active .tk-ll-num{background:var(--color-primary-500);color:#fff}.tk-ll-item.done .tk-ll-num{background:color-mix(in srgb,var(--color-correct, #2f9e63) 18%,transparent);color:var(--color-correct, #2f9e63)}.tk-ll-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tk-ll-stars{font-size:10px;color:var(--color-primary-500);letter-spacing:.5px}@media(max-width:760px){.tk-lessonlist{position:fixed;inset:auto 12px 12px;width:auto;z-index:60;max-height:60vh}}.tk-levels-col{display:flex;flex-direction:column;gap:8px}.tk-level{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:16px;cursor:pointer;border:1px solid transparent;background:var(--tk-soft);transition:background .15s,border-color .15s,box-shadow .15s}.tk-level:hover{background:color-mix(in srgb,var(--color-text-heading) 9%,transparent)}.tk-level.active{background:var(--color-surface-card);border-color:var(--color-primary-400);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 12%,transparent),0 6px 16px -10px #3c230a4d}.tk-level-ico{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-text-heading) 7%,transparent);color:var(--color-text-muted)}.tk-level-ico svg{width:18px;height:18px}.tk-level.active .tk-level-ico{background:var(--color-primary-500);color:#fff}.tk-level-txt{display:flex;flex-direction:column;gap:1px;min-width:0}.tk-level-name{font-size:14px;font-weight:700;color:var(--color-text-heading)}.tk-level-count{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-text-muted)}.tk-level.active .tk-level-count{color:var(--color-primary-600)}@media(max-width:760px){.tk-body{grid-template-columns:1fr;gap:16px}.tk-levels-col{flex-direction:row;overflow-x:auto;gap:8px;scrollbar-width:none;margin:0 -14px;padding:0 14px 2px}.tk-levels-col::-webkit-scrollbar{display:none}.tk-level{width:auto;flex:0 0 auto;padding:8px 12px;border-radius:999px}.tk-level-ico{display:none}.tk-level-txt{flex-direction:row;align-items:baseline;gap:7px;white-space:nowrap}}.tk-lessonbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px}.tk-lessoninfo{flex:1;min-width:0;text-align:center}.tk-arrow{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-body);border:1px solid var(--color-border);background:var(--color-surface-card);transition:border-color .15s,color .15s,transform .15s}.tk-arrow svg{width:18px;height:18px}.tk-arrow:hover:not(:disabled){border-color:var(--color-primary-400);color:var(--color-primary-600);transform:translateY(-1px)}.tk-arrow:disabled{opacity:.35;cursor:default}.tk-crumb{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary-600);margin-bottom:4px}.tk-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}.tk-lesson-title{font-size:24px;font-weight:800;color:var(--color-text-heading);line-height:1.2;letter-spacing:-.01em}.tk-newkeys{display:inline-flex;gap:5px}.tk-cap{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:8px;font-family:var(--font-mono, monospace);font-size:13px;font-weight:700;background:var(--color-surface-card);color:var(--color-text-heading);border:1px solid var(--color-border-hover);box-shadow:0 2px 0 var(--color-border-hover)}.tk-dots{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:12px}.tk-dot{width:9px;height:9px;border-radius:999px;background:color-mix(in srgb,var(--color-text-heading) 14%,transparent);cursor:pointer;transition:all .2s;padding:0}.tk-dot:hover{background:var(--color-primary-400);transform:scale(1.25)}.tk-dot.done{background:var(--color-primary-500)}.tk-dot.active{width:26px;background:var(--color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 18%,transparent)}.tk-dot-gap{width:8px}.tk-prompt{display:flex;gap:7px;justify-content:center;min-height:58px;overflow:hidden}.tk-ch{flex:0 1 46px;min-width:22px;height:56px;border-radius:12px;background:var(--tk-soft);border:1.5px solid transparent;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono, monospace);font-size:23px;font-weight:600;color:var(--color-text-body);transition:transform .12s,border-color .12s,box-shadow .12s}.tk-ch.space:after{content:"␣";opacity:.45}.tk-ch.done{opacity:.38}.tk-ch.current{background:var(--color-surface-card);border-color:var(--color-primary-500);color:var(--color-text-heading);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary-500) 15%,transparent),0 3px 0 var(--color-primary-500);transform:translateY(-2px)}.tk-ch.bad{animation:tk-shake .28s;border-color:var(--color-error, #e5484d);color:var(--color-error, #e5484d);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-error, #e5484d) 15%,transparent)}@keyframes tk-shake{0%,to{transform:translateY(-2px)}25%{transform:translate(-4px,-2px)}75%{transform:translate(4px,-2px)}}.tk-hint{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;min-height:30px;margin:14px 0 12px;font-size:14.5px;color:var(--color-text-muted);text-align:center}.tk-hint b{color:var(--color-primary-600);font-weight:700}[data-theme=dark] .tk-hint b{color:var(--color-primary-400)}.tk-hint .sep{opacity:.4}.tk-board-wrap{max-width:780px;margin:0 auto}.tk-board{width:100%;height:auto;display:block}.tk-deck{fill:var(--tk-soft);stroke:var(--color-border);stroke-width:1}.tk-key rect{fill:var(--color-surface-card);stroke:var(--color-border-hover);stroke-width:1.2;transition:fill .1s,stroke .1s}.tk-key.fn rect{fill:color-mix(in srgb,var(--color-text-heading) 4%,var(--color-surface-card))}.tk-key text{fill:var(--color-text-body);font-family:var(--font-sans, system-ui);user-select:none}.tk-key text.main{font-size:19px;font-weight:600}.tk-key text.sub{font-size:12px;font-weight:600;fill:var(--color-text-muted)}.tk-key text.fnl{font-size:11.5px;font-weight:600;fill:var(--color-text-muted)}.tk-key .bump{stroke:var(--color-text-muted);stroke-width:2;stroke-linecap:round;opacity:.6}.tk-key.active rect{fill:var(--color-primary-500);stroke:var(--color-primary-600)}.tk-key.active text{fill:#fff}.tk-key.active .bump{stroke:#fff}.tk-key.hit rect{animation:tk-hit .22s ease-out}.tk-key.wrong rect{fill:var(--color-error, #e5484d);stroke:var(--color-error, #e5484d)}.tk-key.wrong text{fill:#fff}@keyframes tk-hit{0%{fill:var(--color-primary-300)}to{fill:var(--color-surface-card)}}.tk-hand{opacity:.95;filter:drop-shadow(0 10px 14px rgba(40,25,10,.22));pointer-events:none}.tk-h-outline path{fill:var(--tk-skin);stroke:var(--tk-line);stroke-width:3.4;stroke-linejoin:round}.tk-h-fill path{fill:var(--tk-skin)}.tk-g1{stop-color:var(--tk-skin-hi)}.tk-g2{stop-color:var(--tk-skin)}.tk-h-outline path.active{stroke:var(--color-primary-600)}.tk-h-fill path.active{fill:var(--tk-skin-active)}.tk-h-detail path{fill:none;stroke:var(--tk-line);stroke-width:1.5;stroke-linecap:round;opacity:.5}.tk-h-detail ellipse{fill:var(--tk-nail);stroke:var(--tk-line);stroke-width:1.1;opacity:.9}.tk-h-knuckles path{opacity:.38;stroke-width:1.6}.tk-sleeve{fill:var(--tk-sleeve);stroke:var(--tk-sleeve-line);stroke-width:2;stroke-linejoin:round}.tk-cuff{fill:var(--tk-sleeve-hi);stroke:var(--tk-sleeve-line);stroke-width:1.5;stroke-linejoin:round}.tk-h-detail g.active path,.tk-h-detail g.active ellipse{stroke:var(--color-primary-700)}.tk-done{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in srgb,var(--color-surface-card) 72%,transparent);backdrop-filter:blur(6px);animation:tk-fade .2s ease-out}.tk-done.hidden{display:none}@keyframes tk-fade{0%{opacity:0}to{opacity:1}}.tk-done-card{background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:24px;padding:30px 32px;max-width:390px;width:100%;text-align:center;box-shadow:0 40px 80px -40px #28190a73}.tk-stars{display:flex;justify-content:center;gap:6px;margin-bottom:10px}.tk-stars svg{width:38px;height:38px;color:var(--color-border-hover)}.tk-stars svg.on{color:var(--color-primary-500);animation:tk-pop .35s cubic-bezier(.3,1.6,.5,1) backwards}.tk-stars svg.on:nth-child(2){animation-delay:.12s}.tk-stars svg.on:nth-child(3){animation-delay:.24s}@keyframes tk-pop{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}.tk-done-title{font-size:22px;font-weight:800;color:var(--color-text-heading)}.tk-done-stats{display:flex;justify-content:center;gap:40px;margin:18px 0 22px}.tk-done-stats span{display:block;font-family:var(--font-display, serif);font-size:38px;font-weight:700;color:var(--color-text-heading);line-height:1;font-variant-numeric:tabular-nums}.tk-done-stats label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}.tk-done-actions{display:flex;gap:10px}.tk-done-actions button{flex:1;justify-content:center}.tk-done-note{margin-top:12px;font-size:12px;color:var(--color-text-placeholder, var(--color-text-muted))}}