.kb{display:grid;gap:16px}.kb-drop{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:18px;border:2px dashed var(--hw-shell-lo);border-radius:14px;background:var(--hw-shell-hi)}.kb-drop.is-drag{border-color:var(--hw-orange);background:#fff4ec}.kb-go,.kb-pick,.kb-tap-key{padding:12px 20px;border:0;border-radius:10px;cursor:pointer;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(180deg,var(--hw-orange),var(--hw-orange-lo));box-shadow:0 2px 0 #8a3300,0 6px 14px -6px rgba(201,74,0,.7)}.kb-pick:disabled{opacity:.6;cursor:default}.kb-go:active,.kb-pick:active,.kb-tap-key:active{transform:translateY(2px);box-shadow:0 0 0 #8a3300}.kb-drop-note{color:var(--hw-ink-2);font-size:15px;min-width:0;overflow-wrap:anywhere}.kb-drop-note b,.kb-status{color:var(--hw-ink)}.kb-status{display:inline-flex;align-items:center;gap:8px;font-weight:700}.kb-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--hw-shell-lo);border-top-color:var(--hw-orange);animation:kb-spin .8s linear infinite}@keyframes kb-spin{to{transform:rotate(1turn)}}.kb-error{color:#b42318;font-weight:700}.kb-audio{width:100%;height:40px}.kb-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width:700px){.kb-cards{grid-template-columns:1fr}}.kb-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;color:#e9e7e3;background:linear-gradient(180deg,#232426,var(--hw-glass));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -14px rgba(0,0,0,.6)}.kb-card-label{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9a9893}.kb-big{font-size:44px;font-weight:900;line-height:1.05;letter-spacing:-.02em;color:#fff}.kb-big small{font-size:20px;font-weight:800;color:#b9b6b0}.kb-dim{color:#55534f}.kb-sub{font-size:16px;color:#cfccc6}.kb-sub b{color:var(--hw-orange)}.kb-hint{font-size:14px;color:#9a9893}.kb-sure{align-self:flex-start;padding:3px 9px;border-radius:999px;font-size:13px;font-weight:700}.kb-sure--high{color:#0f3d16;background:#9be3a6}.kb-sure--medium{color:#4a3300;background:#ffd27a}.kb-sure--low{color:#fff;background:#8a5a5a}.kb-chroma{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;height:84px;margin-top:8px}.kb-bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}.kb-bar i{display:block;width:100%;border-radius:3px 3px 0 0;background:#4b4a47}.kb-bar.is-tonic i{background:var(--hw-orange)}.kb-bar em{font-style:normal;font-size:11px;color:#9a9893}.kb-tap{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:var(--hw-shell-hi)}.kb-tap-key{min-width:96px}.kb-tap-read{color:var(--hw-ink-2)}.kb-tap-read b{font-size:22px;color:var(--hw-ink)}.kb-link{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-weight:700;text-decoration:underline}.kb-link,.kb-next{color:var(--hw-ink)}.kb-next{display:grid;gap:8px;padding:18px 20px;border-radius:14px;border:2px solid var(--hw-orange);background:#fff7f1}.kb-next b{font-size:18px}.kb-next-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:4px}.kb-go{display:inline-block;text-decoration:none}