/* Feature-owned keyboard presentation. */
.keyboard-widget { margin: 2rem 0; }

.layer-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 25px; flex-wrap: wrap; }

.layer-tabs .tab { padding: 10px 20px; background: var(--ayu-ui); border: 1px solid var(--ayu-ui-border); border-radius: 6px; cursor: pointer; transition: all 0.2s; font-family: inherit; font-size: 0.85rem; font-weight: 500; color: var(--ayu-fg); }

.layer-tabs .tab:hover { background: var(--ayu-selection); border-color: var(--ayu-comment); }

.layer-tabs .tab.active { background: var(--ayu-accent); border-color: var(--ayu-accent); color: var(--ayu-bg); }

.keyboard-viewport { position: relative; left: 50%; width: min(var(--keyboard-natural-width), calc(100vw - 2rem)); max-width: none; margin-bottom: 30px; overflow: clip; transform: translateX(-50%); }

.keyboard-container { margin: 0; position: relative; transform-origin: top left; }

.keyboard-container .key { width: 60px; height: 60px; background: linear-gradient(145deg, var(--ayu-selection), var(--ayu-ui)); border: 1px solid var(--ayu-ui-border); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.7rem; position: absolute; transition: all 0.15s; box-sizing: border-box; }

.keyboard-container .key:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); border-color: var(--ayu-accent); }

.keyboard-container .key .main { font-weight: 600; color: var(--ayu-fg); font-size: 0.8rem; text-align: center; line-height: 1.1; }

.keyboard-container .key .hold { font-size: 0.6rem; color: var(--ayu-accent); margin-top: 2px; text-align: center; }

.keyboard-container .key .tap { font-size: 0.6rem; color: var(--ayu-string); text-align: center; }

.keyboard-container .key.mod { background: linear-gradient(145deg, color-mix(in srgb, var(--site-color-accent) 24%, var(--site-color-surface)), var(--ayu-ui)); border-color: var(--ayu-entity); }

.keyboard-container .key.mod .main { color: var(--ayu-entity); }

.keyboard-container .key.layer-key { background: linear-gradient(145deg, color-mix(in srgb, var(--site-color-accent) 30%, var(--site-color-surface)), color-mix(in srgb, var(--site-color-accent) 20%, var(--site-color-surface))); border-color: var(--site-color-accent); }

.keyboard-container .key.layer-key .main { color: var(--ayu-markup); }

.keyboard-container .key.special { background: linear-gradient(145deg, color-mix(in srgb, var(--site-color-positive) 30%, var(--site-color-surface)), color-mix(in srgb, var(--site-color-positive) 20%, var(--site-color-surface))); border-color: var(--site-color-positive); }

.keyboard-container .key.special .main { color: var(--ayu-string); }

.keyboard-container .key.transparent { opacity: 0.3; background: linear-gradient(145deg, var(--ayu-bg), var(--site-color-surface)); }

.keyboard-container .key.thumb { background: linear-gradient(145deg, var(--ayu-ui-border), var(--ayu-ui)); }

.keyboard-widget .notes { max-width: 900px; margin: 30px auto 0; padding: 20px; background: var(--ayu-ui); border-radius: 8px; border: 1px solid var(--ayu-ui-border); }

.keyboard-widget .notes h3 { color: var(--ayu-accent); margin-bottom: 12px; font-size: 1rem; font-weight: 500; margin-top: 0; }

.keyboard-widget .notes ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; padding: 0; margin: 0; }

.keyboard-widget .notes li { font-size: 0.8rem; color: var(--ayu-comment); padding: 4px 0; }

.keyboard-widget .notes li strong { color: var(--ayu-string); }

.keyboard-widget .notes .behavior-note { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--ayu-ui-border); font-size: 0.8rem; color: var(--ayu-comment); }

.keyboard-widget .notes .behavior-label { color: var(--ayu-accent); font-weight: 500; }

.keyboard-widget .legend { display: flex; justify-content: center; gap: 25px; margin-top: 20px; flex-wrap: wrap; }

.keyboard-widget .legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ayu-comment); }

.keyboard-widget .legend-color { width: 16px; height: 16px; border-radius: 3px; }

.keyboard-widget .legend-color.normal { background: var(--ayu-selection); border: 1px solid var(--ayu-ui-border); }

.keyboard-widget .legend-color.mod { background: color-mix(in srgb, var(--site-color-accent) 24%, var(--site-color-surface)); border: 1px solid var(--ayu-entity); }

.keyboard-widget .legend-color.layer { background: color-mix(in srgb, var(--site-color-accent) 30%, var(--site-color-surface)); border: 1px solid var(--site-color-accent); }

.keyboard-widget .legend-color.special { background: color-mix(in srgb, var(--site-color-positive) 30%, var(--site-color-surface)); border: 1px solid var(--site-color-positive); }

.keyboard-error { padding: 2rem; text-align: center; color: var(--ayu-markup); background: var(--ayu-ui); border-radius: var(--radius-md); border: 1px solid var(--ayu-markup); }

@media (max-width: 900px) {
.layer-tabs .tab { padding: 8px 14px; font-size: 0.75rem; }
}