.keyboard-demo{font-family:var(--font-sans);border:1px solid var(--color-border);max-width:600px;margin:0 auto}.demo-cards{display:flex;flex-direction:column;gap:0;margin-bottom:0}.demo-card{border-bottom:1px solid var(--color-border);background:var(--color-bg-elevated);cursor:pointer;padding:12px 16px;transition:all .15s}.demo-card:hover{background:#1a1a1a}.demo-card:focus{border-left:2px solid var(--color-accent);background:#1a1a1a;padding-left:14px}.demo-card:focus-visible{outline:none}.demo-card h3{color:var(--color-text);margin:0 0 6px;font-size:14px;font-weight:500}.card-shortcuts{color:var(--color-text-tertiary);font-size:12px;font-family:var(--font-mono)}.demo-help{background:var(--color-bg);border-top:1px solid var(--color-border);padding:12px 16px}.demo-help p{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;font-size:12px;font-weight:500}.demo-help ul{list-style:none;margin:0;padding-left:1.5rem}.demo-help li{font-family:var(--font-mono);color:var(--color-text-tertiary);margin:4px 0;font-size:12px}.demo-help li:before{content:"›";color:var(--color-border-subtle);margin-right:8px}