.kb-trigger{z-index:200;background:var(--bg);border:1px solid var(--bd);cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:10px 14px 8px;font-family:JetBrains Mono,monospace;transition:border-color .2s,box-shadow .2s,transform .15s;display:flex;position:fixed;bottom:24px;right:24px}.kb-trigger:hover{border-color:var(--hl-blue);transform:translateY(-2px);box-shadow:0 0 16px #82aaff40}.kb-trigger-label{color:var(--tx3);letter-spacing:.12em;text-transform:uppercase;font-size:10px}.kb-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;background:#000000bf;justify-content:center;align-items:center;padding:24px;animation:.15s kb-fade-in;display:flex;position:fixed;inset:0}@keyframes kb-fade-in{0%{opacity:0}to{opacity:1}}.kb-panel{background:var(--bg);border:1px solid var(--bd3);border-radius:16px;width:100%;max-width:900px;padding:24px;animation:.2s cubic-bezier(.34,1.56,.64,1) kb-slide-up;box-shadow:0 24px 80px #0009,0 0 0 1px #82aaff1a}@keyframes kb-slide-up{0%{opacity:0;transform:translateY(20px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.kb-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;display:flex}.kb-header-left{flex-direction:column;gap:2px;display:flex}.kb-title{color:var(--tx);letter-spacing:-.02em;font-family:Syne,sans-serif;font-size:19px;font-weight:700}.kb-subtitle{color:var(--tx3);font-family:JetBrains Mono,monospace;font-size:12px}.kb-header-right{align-items:center;gap:8px;display:flex}.kb-ctrl-btn{border:1px solid var(--bd3);color:var(--tx3);cursor:pointer;background:0 0;border-radius:5px;padding:5px 12px;font-family:JetBrains Mono,monospace;font-size:12px;transition:all .15s}.kb-ctrl-btn:hover{border-color:var(--hl-blue);color:var(--hl-blue)}.kb-ctrl-btn.active{background:var(--bg4);border-color:var(--hl-blue);color:var(--hl-blue)}.kb-close{border:1px solid var(--bd3);color:var(--tx3);cursor:pointer;background:0 0;border-radius:5px;padding:5px 10px;font-size:13px;transition:all .15s}.kb-close:hover{border-color:var(--hl-red);color:var(--hl-red)}.kb-legend{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:14px;display:flex}.kb-legend-item{color:var(--tx3);align-items:center;gap:6px;font-family:JetBrains Mono,monospace;font-size:11px;display:flex}.kb-legend-dot{border-radius:2px;width:8px;height:8px}.kb-legend-dot.prog{background:var(--hl-blue-bg);border:1px solid var(--hl-blue)}.kb-legend-dot.special{background:var(--hl-purple-bg);border:1px solid var(--hl-purple)}.kb-legend-note{color:var(--tx4);margin-left:auto;font-family:JetBrains Mono,monospace;font-size:11px}.kb-keyboard{flex-direction:column;gap:5px;display:flex}.kb-row{align-items:stretch;gap:5px;display:flex}.kb-key{background:var(--bg3);border:1px solid var(--bd);cursor:default;border-radius:6px;flex:1;justify-content:flex-start;align-items:flex-end;min-width:44px;height:44px;padding:4px 6px;transition:background .1s,border-color .1s;display:flex;position:relative}.kb-key:hover{background:var(--bg4);border-color:var(--bd3)}.kb-key.kb-prog{background:var(--hl-blue-bg);border-color:#1a3a5c}.kb-key.kb-prog:hover{background:var(--hl-blue-bg);border-color:var(--hl-blue);box-shadow:0 0 8px #82aaff26}.kb-key.kb-special{background:var(--hl-purple-bg);border-color:#2a2a3a}.kb-key.kb-wide{flex:1.7}.kb-key.kb-space{flex:5;justify-content:center;align-items:center}.kb-main{color:var(--tx2);-webkit-user-select:none;user-select:none;font-family:JetBrains Mono,monospace;font-size:14px;font-weight:400;line-height:1}.kb-key.kb-prog .kb-main{color:var(--hl-blue);font-weight:500}.kb-key.kb-special .kb-main{color:var(--tx3);font-size:12px}.kb-key.kb-space .kb-main{color:var(--tx4);letter-spacing:.1em;font-size:11px}.kb-shift{color:var(--hl-yellow);-webkit-user-select:none;user-select:none;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500;line-height:1;position:absolute;top:4px;right:6px}.kb-alt{color:var(--hl-green);-webkit-user-select:none;user-select:none;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:400;line-height:1;position:absolute;bottom:4px;right:6px}.kbd-panel{flex-direction:column;height:100%;display:flex;overflow:hidden}.kbd-panel-header{border-bottom:1px solid var(--bd2);flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 12px 8px;display:flex}.kbd-panel-title{letter-spacing:.1em;font-size:10px;font-weight:700}.kbd-panel-header-ctrls{gap:4px;display:flex}.kbd-panel-ctrl-btn{padding:2px 7px;font-size:9px}.kbd-rows{flex-direction:column;flex:1;gap:4px;padding:10px 8px;display:flex;overflow:hidden auto}.kbd-row{align-items:stretch;gap:3px;display:flex}.kbd-key{background:var(--bg3);border:1px solid var(--bd);cursor:default;border-radius:4px;flex:1 1 0;justify-content:flex-start;align-items:flex-end;min-width:0;height:24px;padding:2px 3px;transition:background .1s,border-color .1s,box-shadow .1s,transform .1s,filter .1s;display:flex;position:relative;overflow:hidden}.kbd-key:hover{filter:brightness(1.1);transform:translateY(-1px)}.kbd-key--wide{flex-grow:1.7}.kbd-key--space{flex-grow:5;justify-content:center;align-items:center}.kbd-key--special{background:var(--bg4);border-color:var(--bd3)}.kbd-key--prog{border-color:var(--hl-blue)}.kbd-key__main{color:var(--tx2);-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:JetBrains Mono,monospace;font-size:9px;font-weight:300;line-height:1;overflow:hidden}.kbd-key--special .kbd-key__main{color:var(--tx3);font-size:7px}.kbd-key--prog .kbd-key__main{color:var(--hl-blue);font-weight:500}.kbd-key--space .kbd-key__main{color:var(--tx4);letter-spacing:.1em;font-size:11px}.kbd-key__shift{color:#ffcb6b60;-webkit-user-select:none;user-select:none;font-size:7px;line-height:1;position:absolute;top:1px;right:2px}.kbd-key__alt{color:#4ec99460;-webkit-user-select:none;user-select:none;font-size:6px;line-height:1;position:absolute;bottom:2px;right:2px}.kbd-key.is-target{border:1px solid var(--hl-yellow);background:#ffcb6b1f;box-shadow:0 0 10px #ffcb6ba6}.kbd-key.is-target .kbd-key__main{color:var(--hl-yellow);font-weight:700}.kbd-key.is-target .kbd-key__shift{color:var(--hl-yellow)}.kbd-key.is-mod{border:1px solid var(--hl-blue);background:#82aaff1f;box-shadow:0 0 8px #82aaff73}.kbd-key.is-mod .kbd-key__main{color:var(--hl-blue);font-weight:700}.kbd-combo-bar{border-top:1px solid var(--bd2);flex-shrink:0;justify-content:center;align-items:center;gap:6px;min-height:38px;padding:8px 10px;display:flex}.kbd-combo-pill{letter-spacing:.04em;border-radius:5px;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600}.kbd-combo-pill--mod{border:1px solid var(--hl-blue);color:var(--hl-blue);background:#82aaff1f}.kbd-combo-pill--key{border:1px solid var(--hl-yellow);color:var(--hl-yellow);background:#ffcb6b1f}.kbd-combo-plus{color:var(--tx3);font-size:14px;line-height:1}.kbd-combo-empty{color:var(--tx5);letter-spacing:.06em;font-size:10px}.kbd-footer{border-top:1px solid var(--bd2);flex-shrink:0;align-items:center;gap:10px;padding:5px 10px;display:flex}.kbd-footer-legend{color:var(--tx3);align-items:center;gap:4px;font-size:10px;display:flex}.kbd-footer-legend-dot{background:var(--bg3);border:1px solid var(--hl-blue);border-radius:2px;flex-shrink:0;width:7px;height:7px;display:inline-block}.kbd-footer-note{color:var(--tx4);margin-left:auto;font-size:10px}[data-theme=light] .kbd-panel-header,[data-theme=light] .kbd-combo-bar{border-color:var(--ct-border-panel)}[data-theme=light] .kbd-footer{border-color:var(--ct-border-panel);background:var(--ct-bg-chrome-deep)}[data-theme=light] .kbd-panel-ctrl-btn.active{background:var(--ct-blue-bg);border-color:var(--ct-blue);color:var(--ct-blue)}[data-theme=light] .kbd-row{gap:5px}[data-theme=light] .kbd-key{background:var(--ct-surface);border-color:var(--ct-border-card-top);box-shadow:var(--ct-shadow-key)}[data-theme=light] .kbd-key--special{background:var(--ct-surface);border-color:var(--ct-border-card-top)}[data-theme=light] .kbd-key--prog{border-color:var(--ct-blue)}[data-theme=light] .kbd-key__main{color:var(--ct-text-sub)}[data-theme=light] .kbd-key--special .kbd-key__main{color:var(--ct-text-faint)}[data-theme=light] .kbd-key--prog .kbd-key__main{color:var(--ct-blue)}[data-theme=light] .kbd-key--space .kbd-key__main{color:var(--ct-text-faint)}[data-theme=light] .kbd-key.is-target{background:var(--ct-amber-bg);border:1.5px solid var(--ct-amber);box-shadow:0 0 0 2px #b8791b33,0 4px 10px #b8791b57}[data-theme=light] .kbd-key.is-target .kbd-key__main,[data-theme=light] .kbd-key.is-target .kbd-key__shift{color:var(--ct-amber)}[data-theme=light] .kbd-key.is-mod{background:var(--ct-blue-bg);border:1px solid var(--ct-blue);box-shadow:0 2px 5px #2f6fed33}[data-theme=light] .kbd-key.is-mod .kbd-key__main{color:var(--ct-blue)}[data-theme=light] .kbd-combo-pill--mod{background:var(--ct-blue-bg);border-color:var(--ct-blue);color:var(--ct-blue)}[data-theme=light] .kbd-combo-pill--key{background:var(--ct-amber-bg);border-color:var(--ct-amber);color:var(--ct-amber)}[data-theme=light] .kbd-combo-plus,[data-theme=light] .kbd-combo-empty{color:var(--ct-text-faint)}[data-theme=light] .kbd-footer-legend{color:var(--ct-text-sub)}[data-theme=light] .kbd-footer-legend-dot{background:var(--ct-surface);border-color:var(--ct-blue)}[data-theme=light] .kbd-footer-note{color:var(--ct-text-faint)}
@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes errorFlash{0%,to{background:var(--bg)}50%{background:#1a0d0d}}@keyframes pulse-node{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}@keyframes slide-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}.practice-root{background:var(--bg);outline:none;flex-direction:column;width:100%;height:100%;font-family:JetBrains Mono,monospace;display:flex;overflow:hidden}.practice-layout{flex:1;min-height:0;position:relative;overflow:hidden}.practice-code-area{background:var(--bg);scrollbar-width:thin;scrollbar-color:var(--bd)var(--bg);justify-content:flex-start;display:flex;position:absolute;inset:0;overflow:hidden auto}@media (min-width:769px){.practice-code-area{left:344px;right:344px}}.practice-code-area::-webkit-scrollbar{width:4px}.practice-code-area::-webkit-scrollbar-track{background:var(--bg)}.practice-code-area::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}.practice-code-area.error-flash{animation:.15s errorFlash}.practice-code-block{box-sizing:border-box;width:100%;margin:0;padding:40px 24px 300px}.practice-line{align-items:flex-start;min-height:28px;display:flex}.practice-line-num{color:var(--tx4);-webkit-user-select:none;user-select:none;text-align:right;flex-shrink:0;min-width:36px;padding-right:16px;font-size:13px;line-height:28px}.practice-line-content{letter-spacing:.02em;white-space:normal;flex-wrap:wrap;align-items:center;gap:4px;font-size:16px;line-height:28px;display:flex}.code-cursor{background:var(--hl-blue);z-index:10;border-radius:1px;width:2px;height:21px;animation:1s step-end infinite blink;position:absolute;top:3px;left:0}.comment-tag{color:var(--hl-green);border:1px solid var(--hl-green);letter-spacing:.08em;-webkit-user-select:none;user-select:none;border-radius:3px;flex-shrink:0;padding:1px 4px;font-size:10px}.practice-panel{border-left:1px solid var(--bd2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#080d14f2;flex-direction:column;width:280px;display:flex;position:absolute;top:0;bottom:0;right:0}.practice-panel-header{border-bottom:1px solid var(--bd2);flex-shrink:0;align-items:center;gap:10px;padding:14px 16px;display:flex}.practice-panel-lang{letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:700}.practice-panel-title{color:var(--tx8);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:12px;overflow:hidden}.practice-panel-progress-track{background:var(--bd2);flex-shrink:0;height:2px}.practice-panel-progress-fill{height:100%;transition:width .3s}.practice-panel-tree{scrollbar-width:thin;scrollbar-color:var(--bg4)var(--bg2);flex:1;padding:6px 0;overflow-y:auto}.practice-panel-tree::-webkit-scrollbar{width:3px}.practice-panel-tree::-webkit-scrollbar-track{background:var(--bg2)}.practice-panel-tree::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}.practice-panel-footer{border-top:1px solid var(--bd2);flex-shrink:0;justify-content:space-around;padding:12px 16px;display:flex}.trans-panel{border-right:1px solid var(--bd2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#080d14f2;flex-direction:column;width:320px;display:flex;position:absolute;top:0;bottom:0;left:0;overflow-y:auto}.trans-panel__head{border-bottom:1px solid var(--bd2);background:inherit;color:var(--tx2);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px;font-size:12px;font-weight:600;display:flex;position:sticky;top:0}.trans-panel__close{border:1px solid var(--bd3);width:24px;height:24px;color:var(--tx3);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;transition:all .15s;display:flex}.trans-panel__close:hover{color:var(--hl-red);border-color:var(--hl-red)}.trans-panel__body{flex-direction:column;gap:8px;padding:12px 14px;display:flex}.trans-card{background:var(--bg3);border:1px solid var(--bd);border-radius:8px;align-items:baseline;gap:8px;padding:9px 12px;transition:opacity .2s,border-color .2s,background .2s;display:flex}.trans-card__num{color:var(--tx4);flex-shrink:0;font-size:11px}.trans-card__text{color:var(--tx3);overflow-wrap:break-word;flex:1;min-width:0;font-size:13px}.trans-card--empty{text-align:center;color:var(--tx4);justify-content:center}.trans-card--empty .trans-card__text{color:var(--tx4);font-style:italic}.trans-card.is-active .trans-card__text,.trans-card.is-active .trans-card__num{color:var(--tx2)}.trans-card.is-done{opacity:.5}.trans-card.is-done .trans-card__num{color:var(--hl-green);font-weight:700}.trans-word{color:var(--tx3)}.trans-word.is-active{font-weight:700}.mode-toggle{border:1px solid var(--bd);border-radius:4px;align-items:center;display:flex;overflow:hidden}.mode-toggle-btn{cursor:pointer;letter-spacing:.06em;color:var(--tx3);background:0 0;border:none;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:11px;transition:all .15s}.mode-toggle-btn:first-child{border-right:1px solid var(--bd)}.mode-toggle-btn.active-editor{background:var(--hl-blue-bg);color:var(--hl-blue)}.mode-toggle-btn.active-terminal{background:var(--hl-green-bg);color:var(--hl-green)}@media (max-width:768px){.practice-code-area{justify-content:center}.practice-code-block{padding:32px 12px 200px}.practice-line-num{min-width:24px;padding-right:8px;font-size:11px}.practice-line-content{letter-spacing:0;font-size:14px}.practice-panel,.trans-panel{display:none}}[data-theme=light] .practice-line-num{color:var(--ct-text-faint)}[data-theme=light] .practice-line-content{letter-spacing:.5px}[data-theme=light] .practice-panel,[data-theme=light] .trans-panel{background:var(--ct-bg-chrome);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--ct-border-chrome)}[data-theme=light] .practice-panel-header,[data-theme=light] .practice-panel-progress-track,[data-theme=light] .practice-panel-footer,[data-theme=light] .trans-panel__head{border-color:var(--ct-border-panel)}[data-theme=light] .trans-panel__head{color:var(--ct-text-label)}[data-theme=light] .trans-panel__close{background:var(--ct-surface);border-color:var(--ct-border-button);box-shadow:var(--ct-shadow-button);width:28px;height:28px}[data-theme=light] .trans-card{background:var(--ct-surface);border-color:var(--ct-border-panel);box-shadow:var(--ct-shadow-transcard);border-radius:10px;padding:11px 14px}[data-theme=light] .trans-card__num{color:var(--ct-text-faint)}[data-theme=light] .trans-card__text,[data-theme=light] .trans-card--empty .trans-card__text{color:var(--ct-text-faint);font-weight:400}[data-theme=light] .trans-card.is-active .trans-card__text,[data-theme=light] .trans-card.is-active .trans-card__num{color:var(--ct-text-sub);font-weight:500}[data-theme=light] .trans-card.is-done .trans-card__num{color:var(--ct-green)}[data-theme=light] .trans-word{color:var(--ct-text-faint)}[data-theme=light] .subnav-toolbar{gap:9px!important}[data-theme=light] .subnav-toggle-btn{box-shadow:var(--ct-shadow-subnav);background:var(--ct-surface)!important;border-color:var(--ct-border-button)!important}[data-theme=light] .subnav-toggle-btn.is-active{box-shadow:0 3px 8px #1e293b26}[data-theme=light] .subnav-toggle-btn--kbd.is-active{box-shadow:0 3px 8px #7b52e033;border-color:var(--ct-purple)!important;color:var(--ct-purple)!important;background:#f0ebfb!important}[data-theme=light] .mode-toggle{border:none;gap:9px}[data-theme=light] .mode-toggle-btn{background:var(--ct-surface);border:1px solid var(--ct-border-button);box-shadow:var(--ct-shadow-subnav);color:var(--ct-text-sub)}[data-theme=light] .mode-toggle-btn:first-child{border-right:none}[data-theme=light] .mode-toggle-btn.active-editor{background:var(--ct-blue-bg);border-color:var(--ct-blue);color:var(--ct-blue)}[data-theme=light] .mode-toggle-btn.active-terminal{background:var(--ct-green-bg);border-color:var(--ct-green);color:var(--ct-green)}[data-theme=light] .subnav-toggle-btn,[data-theme=light] .mode-toggle-btn{gap:7px;line-height:1;box-sizing:border-box!important;border-radius:8px!important;align-items:center!important;height:34px!important;padding:0 13px!important;font-size:12.5px!important;display:inline-flex!important}
@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.5)}80%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.results-wrap{animation:.5s fadeUp}.results-grade{animation:.6s cubic-bezier(.34,1.56,.64,1) popIn}.result-btn{cursor:pointer;letter-spacing:.05em;background:0 0;border:1px solid;border-radius:6px;padding:10px 24px;font-family:JetBrains Mono,monospace;font-size:13px;transition:opacity .15s,transform .15s}.result-btn:hover{opacity:.8;transform:translateY(-1px)}