.ks{--ks-red:#e0383e;--ks-green:#1f9d3a;--ks-blue:var(--color-blue);--ks-tool:var(--color-ink);--ks-tool-edge:#000;--ks-accent:var(--color-brand-deep);--ks-mod:#f2a516;--ks-mod-soft:#fff7e6;--ks-mod-edge:#e0a43a;--ks-mod-ink:#7a4d00;--ks-ink:var(--color-ink);--ks-text:var(--color-ink-2);--ks-muted:var(--color-ink-3);--ks-line:var(--color-line);--ks-line-2:var(--color-line-2);--ks-card:var(--color-card);--ks-stage:linear-gradient(180deg, #fbfbf9, #f1f1ee);--ks-r:18px;color:var(--ks-text);font-family:var(--font-sans)}.ks *,.ks :before,.ks :after{box-sizing:border-box}.ks button{font:inherit;cursor:pointer}.ks svg text{font-family:var(--font-display)}.ks kbd,.ks .ks-k{min-width:1.9em;height:1.9em;font:700 .82em/1 var(--font-display);color:var(--ks-ink);border:1px solid var(--ks-line-2);white-space:nowrap;background:#fff;border-bottom-width:3px;border-radius:7px;justify-content:center;align-items:center;padding:0 .5em;display:inline-flex}.ks .ks-k--tool{background:var(--ks-tool);border-color:var(--ks-tool-edge);color:#fff}.ks .ks-k--mod{background:var(--ks-mod-soft);border-color:var(--ks-mod-edge);color:var(--ks-mod-ink)}.ks .ks-plus{color:var(--ks-muted);margin:0 .25em;font-weight:700}.ks .sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ks-bar{background:var(--ks-card);border:1px solid var(--ks-line);border-radius:var(--ks-r);box-shadow:var(--shadow-flat);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:18px;padding:12px;display:grid}.ks-os{background:var(--color-paper-2);border:1px solid var(--ks-line);border-radius:999px;grid-template-columns:1fr 1fr;padding:4px;display:inline-grid}.ks-os__btn{color:var(--ks-text);transition:background var(--duration-micro), color var(--duration-micro);background:0 0;border:0;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600}.ks-os__btn.is-on{background:var(--ks-ink);color:#fff;box-shadow:var(--shadow-rest)}.ks-search{border-radius:var(--radius-btn);background:var(--color-paper);border:1px solid var(--ks-line-2);min-width:0;height:46px;color:var(--ks-muted);transition:border-color var(--duration-micro);align-items:center;gap:10px;padding:0 14px;display:flex}.ks-search:focus-within{border-color:var(--ks-ink)}.ks-search svg{fill:currentColor;flex:none}.ks-search input{width:100%;min-width:0;height:100%;color:var(--ks-ink);background:0 0;border:0;outline:0;font-size:16px}.ks-actions{flex-wrap:wrap;gap:8px;display:flex}.ks-btn{border-radius:var(--radius-btn);border:1px solid var(--ks-line-2);background:var(--ks-card);height:44px;color:var(--ks-ink);font-family:var(--font-display);white-space:nowrap;transition:background var(--duration-micro), border-color var(--duration-micro), transform var(--duration-micro);justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:14px;font-weight:700;display:inline-flex}.ks-btn:hover{border-color:var(--ks-ink)}.ks-btn:active{transform:scale(.97)}.ks-btn--brand{background:var(--ks-accent);border-color:var(--ks-accent);color:#fff}.ks-btn--brand:hover{background:var(--color-brand-ink);border-color:var(--color-brand-ink)}.ks-board{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);align-items:start;gap:18px;margin-bottom:18px;display:grid}.ks-left{align-content:start;gap:18px;min-width:0;display:grid}.ks-detail{position:sticky;top:104px}.ks-kb,.ks-detail,.ks-panel,.ks-vcb,.ks-grid .ks-card{background:var(--ks-card);border:1px solid var(--ks-line);border-radius:var(--ks-r);box-shadow:var(--shadow-flat)}.ks-kb{min-width:0;padding:14px 14px 10px}.ks-kb__head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:2px 4px 10px;display:flex}.ks-live{font:700 14px/1.3 var(--font-display);color:var(--ks-ink)}.ks-legend{color:var(--ks-muted);align-items:center;gap:14px;font-size:12px;display:flex}.ks-legend i{vertical-align:-1px;border-radius:3px;width:12px;height:12px;margin-right:5px;display:inline-block}.ks-legend .is-tool{background:var(--ks-tool)}.ks-legend .is-mod{background:var(--ks-mod)}.ks-legend .is-axis{background:var(--ks-blue)}.ks-kb__svg{-webkit-user-select:none;user-select:none;width:100%;height:auto;display:block}.ks-kb__svg .k{cursor:default}.ks-kb__svg .k rect.cap{fill:#fff;stroke:var(--ks-line-2);stroke-width:1.2px;transition:fill .15s,transform .12s}.ks-kb__svg .k rect.base{fill:#cfcfc7}.ks-kb__svg .k text{font:600 15px var(--font-display);fill:#3d3d3a;pointer-events:none}.ks-kb__svg .k text.sub{font:700 8.5px var(--font-display);fill:#fff;opacity:.9;letter-spacing:.02em}.ks-kb__svg .k.is-tool{cursor:pointer}.ks-kb__svg .k.is-tool rect.cap{fill:var(--ks-tool);stroke:#000}.ks-kb__svg .k.is-tool rect.base{fill:#000}.ks-kb__svg .k.is-tool text{fill:#fff}.ks-kb__svg .k.is-mod rect.cap{fill:#fff3d6;stroke:#e7b24a}.ks-kb__svg .k.is-axis rect.cap{fill:#e8f0ff;stroke:#9db8f2}.ks-kb__svg .k.is-dim{opacity:.25}.ks-kb__svg .k.is-hit rect.cap{filter:brightness(1.15);transform:translateY(3px)}.ks-kb__svg .k.is-sel rect.cap{fill:var(--ks-accent);stroke:var(--color-brand-ink);stroke-width:2.4px}.ks-kb__svg .k.is-sel rect.base{fill:#8f1722}.ks-kb__svg .k.is-sel:not(.is-tool) text{fill:#fff}.ks-kb__svg .k.is-tool:hover rect.cap{filter:brightness(1.6)}.ks-kb__svg .k.is-modon rect.cap{fill:var(--ks-mod);stroke:#b77900}.ks-kb__svg .k.is-modon text{fill:#3d2700}.ks-kb__svg .k:focus{outline:none}.ks-kb__svg .k:focus-visible rect.cap{stroke:var(--ks-accent);stroke-width:3px}.ks-detail{flex-direction:column;gap:12px;min-width:0;padding:18px;display:flex}.ks-detail__top{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.ks-detail__cat{font:700 11px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--color-brand-ink);margin:0 0 4px}.ks-detail__name{font:800 24px/1.15 var(--font-display);letter-spacing:-.02em;color:var(--ks-ink);margin:0}.ks-detail__en{color:var(--ks-muted);margin:3px 0 0;font-size:13px}.ks-detail__keys{flex-wrap:wrap;justify-content:flex-end;align-items:center;font-size:20px;display:flex}.ks-stage{background:var(--ks-stage);border:1px solid var(--ks-line);border-radius:14px;position:relative;overflow:hidden}.ks-stage svg{width:100%;height:auto;display:block}.ks-stage__cap{border-top:1px solid var(--ks-line);font:700 12px/1.3 var(--font-display);color:var(--ks-muted);background:#fff;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;display:flex}.ks-stage__play{border:1px solid var(--ks-line-2);color:var(--ks-ink);background:#fff;border-radius:8px;padding:3px 9px;font-size:12px}.ks-stage__play:hover{border-color:var(--ks-ink)}.ks-detail__desc{margin:0;font-size:15px;line-height:1.6}.ks-mods{gap:8px;margin:0;padding:0;list-style:none;display:grid}.ks-mod{border:1px solid var(--ks-line);text-align:left;width:100%;color:inherit;background:#fff;border-radius:12px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px;transition:border-color .15s,background .15s;display:grid}.ks-mod:hover{border-color:#e7b24a}.ks-mod.is-on{background:var(--ks-mod-soft);border-color:var(--ks-mod-edge)}.ks-mod.is-static{cursor:default}.ks-mod.is-static:hover{border-color:var(--ks-line)}.ks-mod__keys{align-items:center;display:flex}.ks-mod__txt{font-size:14px;line-height:1.4}.ks-detail__vcb{color:var(--ks-muted);flex-wrap:wrap;align-items:baseline;gap:6px;font-size:13px;display:flex}.ks-detail__vcb code{font:600 13px var(--font-mono);color:var(--ks-ink);background:var(--color-paper-2);border-radius:6px;padding:3px 7px}.ks-cats{flex-wrap:wrap;gap:8px;margin:6px 0 14px;display:flex}.ks-cat{border:1px solid var(--ks-line-2);background:var(--ks-card);color:var(--ks-ink);transition:border-color var(--duration-micro);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600}.ks-cat:hover{border-color:var(--ks-ink)}.ks-cat b{color:var(--ks-muted);margin-left:6px;font-size:12px;font-weight:700}.ks-cat.is-on{background:var(--ks-ink);border-color:var(--ks-ink);color:#fff}.ks-cat.is-on b{color:#bdbdb5}.ks-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:24px;display:grid}.ks-card{text-align:left;color:inherit;font:inherit;min-width:0;transition:transform var(--duration-base) var(--ease-snap), box-shadow var(--duration-base), border-color var(--duration-micro);flex-direction:column;padding:0;display:flex;overflow:hidden}.ks-card__art,.ks-card__name,.ks-card__sub{display:block}.ks-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}.ks-card.is-sel{border-color:var(--ks-accent);box-shadow:0 0 0 2px var(--ks-accent)}.ks-card__art{background:var(--ks-stage);border-bottom:1px solid var(--ks-line)}.ks-card__art svg{width:100%;height:auto;display:block}.ks-card__body{justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:12px 14px 14px;display:flex}.ks-card__name{font:800 15px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--ks-ink);margin:0}.ks-card__sub{color:var(--ks-muted);margin:2px 0 0;font-size:12px}.ks-card__keys{flex:none;align-items:center;font-size:15px;display:flex}.ks-empty{text-align:center;color:var(--ks-muted);background:var(--ks-card);border:1px dashed var(--ks-line-2);border-radius:var(--ks-r);grid-column:1/-1;margin:0;padding:30px}.ks-duo{grid-template-columns:1fr 1fr;gap:18px;display:grid}.ks-panel{min-width:0;margin:0;padding:16px}.ks-panel figcaption{flex-direction:column;gap:2px;margin-bottom:8px;display:flex}.ks-panel figcaption strong{font:800 17px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--ks-ink)}.ks-panel figcaption span{color:var(--ks-muted);font-size:13px}.ks-panel svg{width:100%;height:auto;display:block}.ks-panel svg .ax-key{cursor:pointer}.ks-panel svg .ax-key:focus{outline:none}.ks-panel svg .ax-key:focus-visible rect{stroke-width:3px}.ks-vcb{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:start;gap:20px;padding:20px;display:grid}.ks-vcb h2{font:800 20px/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ks-ink);margin:0 0 6px}.ks-vcb p{margin:0;font-size:15px;line-height:1.6}.ks-vcb__list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.ks-vcb__list li{background:var(--color-paper-2);color:var(--ks-muted);border-radius:12px;flex-direction:column;gap:4px;padding:10px 12px;font-size:13px;display:flex}.ks-vcb__list code{font:700 15px var(--font-mono);color:#fff;background:var(--ks-ink);border-radius:6px;align-self:flex-start;padding:4px 9px}.ks-practice{z-index:1000;-webkit-backdrop-filter:blur(3px);background:#171717b8;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.ks-practice[hidden]{display:none}.ks-practice__box{border-radius:var(--radius-card);background:var(--ks-card);text-align:center;width:min(520px,100%);max-height:calc(100dvh - 32px);box-shadow:var(--shadow-pop);padding:24px;position:relative;overflow:auto}.ks-practice__box h2{font:800 24px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ks-ink);margin:0 0 4px}.ks-practice__hint{color:var(--ks-muted);margin:0 0 14px;font-size:14px}.ks-practice__close{background:var(--color-paper-2);width:36px;height:36px;color:var(--ks-ink);border:0;border-radius:50%;font-size:22px;line-height:1;position:absolute;top:10px;right:12px}.ks-practice__stage{background:var(--ks-stage);border:1px solid var(--ks-line);border-radius:16px;padding:6px 6px 12px;transition:background .2s}.ks-practice__stage.is-ok{background:#e6f4ea}.ks-practice__stage.is-bad{background:#fde8ea}.ks-practice__demo{width:100%;max-width:320px;height:auto;margin:0 auto;display:block}.ks-practice__tool{font:800 22px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ks-ink);margin:4px 0 0}.ks-practice__bar{background:var(--color-paper-2);border-radius:99px;height:8px;margin:14px 0;overflow:hidden}.ks-practice__bar span{background:linear-gradient(90deg, var(--ks-accent), var(--color-orange));transform-origin:0;width:100%;height:100%;display:block}.ks-practice__stats{color:var(--ks-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex}.ks-practice__stats b{font:800 20px var(--font-display);color:var(--ks-ink);margin-left:4px}.ks-print{display:none}@media (max-width:1080px){.ks-board{grid-template-columns:minmax(0,1fr)}.ks-detail{position:static}}@media (max-width:860px){.ks-bar{grid-template-columns:minmax(0,1fr)}.ks-os{justify-self:start}.ks-duo,.ks-vcb{grid-template-columns:minmax(0,1fr)}}@media (max-width:560px){.ks-bar{padding:10px}.ks-actions .ks-btn{flex:1 1 0;padding:0 10px}.ks-kb{padding:10px 6px 6px}.ks-legend,.ks-kb__svg .k text.sub{display:none}.ks-kb__svg .k text{font-size:19px}.ks-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ks-card__body{flex-direction:column;align-items:flex-start;padding:10px}.ks-card__keys{flex-wrap:wrap;font-size:13px}.ks-detail{padding:14px}.ks-detail__name{font-size:21px}.ks-detail__keys{font-size:16px}.ks-mod__keys{flex-wrap:wrap;row-gap:4px}.ks-vcb{padding:16px}.ks-vcb__list{grid-template-columns:minmax(0,1fr)}.ks-practice__box{padding:20px 14px}}@media (prefers-reduced-motion:reduce){.ks *{transition:none!important}}@media print{body.ks-printing *{visibility:hidden!important}body.ks-printing .ks-print,body.ks-printing .ks-print *{visibility:visible!important}body.ks-printing .ks-print{color:#000;width:100%;font:10.5pt/1.35 Arial,sans-serif;position:absolute;inset:0 auto auto 0;display:block!important}.ks-print h2{margin:0 0 8pt;font:700 16pt Arial,sans-serif}.ks-print__cols{columns:2;column-gap:18pt}.ks-print section{break-inside:avoid;margin:0 0 10pt}.ks-print h3{border-bottom:1.5pt solid #d92d3b;margin:0 0 4pt;padding-bottom:2pt;font:700 11pt Arial,sans-serif}.ks-print table{border-collapse:collapse;width:100%}.ks-print td{vertical-align:top;border-bottom:.5pt solid #ccc;padding:2.5pt 0}.ks-print td:last-child{text-align:right;white-space:nowrap;font-weight:700}.ks-print small{color:#444}.ks-print__foot{color:#444;margin-top:8pt;font-size:8.5pt}}