.kbd-svg { display: inline-block; max-width: 100%; height: auto; }

/* Size presets (can be overridden in themes) */
.kbd--xs { width: 300px; }
.kbd--sm { width: 380px; }
.kbd--md { width: 490px; }
.kbd--lg { width: 660px; }
.kbd--xl { width: 760px; }

/* Placement helpers */
.kbd-right { float: right; margin: 0 0 .5em .75em; }

/* Figure wrapper and caption styling */
.kbd-figure { text-align: center; margin: .5em 0; }
.kbd-figure figcaption { margin: .25em 0 2em; font-size: .9em; color: #444; }

/* Exercise intro/content: two-column layout with text on left, keyboard on right */
.exercise-intro,
.exercise-content { display: flex; gap: 1.5rem; align-items: flex-start; }
.exercise-intro .intro-text,
.exercise-content .intro-text { flex: 1; min-width: 0; }
.exercise-intro .intro-keyboard,
.exercise-content .intro-keyboard { flex-shrink: 0; }
@media (max-width: 768px) {
  .exercise-intro,
  .exercise-content { flex-direction: column; }
  .exercise-intro .intro-keyboard,
  .exercise-content .intro-keyboard { align-self: center; }
}

/* Base colors via CSS variables (theme can override) */
.kbd-svg .kr { fill: var(--kbd-bg, #f4f6f8); stroke: var(--kbd-stroke, #c7cdd3); stroke-width: 1; }
.kbd-svg .kt { fill: var(--kbd-fg, #111); font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Hide alternate (shifted) labels when not showing alternates - but keep in DOM for JavaScript search */
.kbd-svg .kt-alt-hidden { display: none; }

/* Highlighted keys: bright background + readable foreground */
.kbd-svg .kh .kr { fill: var(--kbd-hl-bg, #ffd54f); stroke: var(--kbd-hl-border, #c49a00); stroke-width: 3; }
.kbd-svg .kh .kt { fill: var(--kbd-hl-fg, #111); }
/* Emphasized highlighted keys: extra bright for special emphasis */
.kbd-svg .khe .kr { fill: var(--kbd-hl-emphasis-bg, rgba(255, 235, 59, 1)) !important; stroke: var(--kbd-hl-emphasis-border, rgba(251, 192, 45, 1)) !important; stroke-width: 4; }
.kbd-svg .khe .kt { fill: var(--kbd-hl-emphasis-fg, #111) !important; }
/* Wrong-key full key flash */
.kbd-svg .k.ke .kr { fill: var(--kbd-err-bg, #ffb3b3) !important; stroke: var(--kbd-err-border, #cc3b3b) !important; stroke-width: 3; }
.kbd-svg .k.ke .kt { fill: var(--kbd-err-fg, #111) !important; }

/* Base finger colors - single source of truth (fully bright/saturated) */
.kbd-svg {
  --lpinky-base: rgba(255, 80, 80, 1);
  --lring-base: rgba(255, 180, 60, 1);
  --lmiddle-base: rgba(255, 240, 60, 1);
  --lindex-base: rgba(120, 255, 60, 1);
  --rindex-base: rgb(40, 230, 255);
  --rmiddle-base: rgb(9, 131, 255);
  --rring-base: rgb(179, 69, 255);
  --rpinky-base: rgb(255, 255, 255);
  --thumb-base: rgb(119, 119, 119);
}
/* Finger zone colors: base, border (darkened), highlight bg, highlight border */
.kbd-svg .lpinky { --finger-base: var(--lpinky-base); --finger-border: #b33838; --kbd-hl-bg: rgba(255, 80, 80, 1);  --kbd-hl-border: #b33838; }
.kbd-svg .lring  { --finger-base: var(--lring-base);  --finger-border: #b37e2a; --kbd-hl-bg: rgba(255, 180, 60, 1); --kbd-hl-border: #b37e2a; }
.kbd-svg .lmiddle{ --finger-base: var(--lmiddle-base); --finger-border: #b3a82a; --kbd-hl-bg: rgba(255, 240, 60, 1); --kbd-hl-border: #b3a82a; }
.kbd-svg .lindex { --finger-base: var(--lindex-base); --finger-border: #54b32a; --kbd-hl-bg: rgba(120, 255, 60, 1); --kbd-hl-border: #54b32a; }
.kbd-svg .rindex { --finger-base: var(--rindex-base); --finger-border: #1ca1b3; --kbd-hl-bg: rgb(40, 230, 255);     --kbd-hl-border: #1ca1b3; }
.kbd-svg .rmiddle{ --finger-base: var(--rmiddle-base); --finger-border: #065cb3; --kbd-hl-bg: rgb(9, 131, 255);     --kbd-hl-border: #065cb3; }
.kbd-svg .rring  { --finger-base: var(--rring-base);  --finger-border: #7d30b3; --kbd-hl-bg: rgb(179, 69, 255);    --kbd-hl-border: #7d30b3; }
.kbd-svg .rpinky { --finger-base: var(--rpinky-base); --finger-border: #b3b3b3; --kbd-hl-bg: rgb(255, 255, 255);   --kbd-hl-border: #b3b3b3; }
.kbd-svg .thumb  { --finger-base: var(--thumb-base);  --finger-border: #535353; --kbd-hl-bg: rgb(119, 119, 119);    --kbd-hl-border: #535353; }

/* Non-highlighted: lightest tint */
.kbd-svg.fc .k.lpinky:not(.kh):not(.ke) .kr  { fill: #ffc2c2; }
.kbd-svg.fc .k.lring:not(.kh):not(.ke) .kr   { fill: #ffe5bb; }
.kbd-svg.fc .k.lmiddle:not(.kh):not(.ke) .kr { fill: #fffabb; }
.kbd-svg.fc .k.lindex:not(.kh):not(.ke) .kr  { fill: #d0ffbb; }
.kbd-svg.fc .k.rindex:not(.kh):not(.ke) .kr  { fill: #b4f6ff; }
.kbd-svg.fc .k.rmiddle:not(.kh):not(.ke) .kr { fill: #a9d4ff; }
.kbd-svg.fc .k.rring:not(.kh):not(.ke) .kr   { fill: #e4beff; }
.kbd-svg.fc .k.rpinky:not(.kh):not(.ke) .kr  { fill: #e0e0e0; }
.kbd-svg.fc .k.thumb:not(.kh):not(.ke) .kr   { fill: #c2c2c2; }

/* Highlighted: medium brightness (uses --kbd-hl-bg set above, which is var(--finger-base)) */
/* This is already handled by line 21: .kbd-svg .kh .kr { fill: var(--kbd-hl-bg, #ffd54f); ... } */

/* Emphasized: full bright color (same as base) */
.kbd-svg .lpinky.khe .kr,
.kbd-svg .lring.khe .kr,
.kbd-svg .lmiddle.khe .kr,
.kbd-svg .lindex.khe .kr,
.kbd-svg .rindex.khe .kr,
.kbd-svg .rmiddle.khe .kr,
.kbd-svg .rring.khe .kr,
.kbd-svg .rpinky.khe .kr,
.kbd-svg .thumb.khe .kr {
  fill: var(--finger-base) !important;
  stroke: var(--finger-border) !important;
  stroke-width: 4;
}

/* Hand overlays - matches keyboard spacebar gray (neutral/educational) */
.kbd-svg .hand { fill: rgba(232, 232, 232, 0.08); }
.kbd-svg .hand-side { opacity: 0.8; }
.kbd-svg .hand-outline { fill: #e8e8e8; stroke: #999999; stroke-opacity: 0.8; }
.kbd-overlay .hand-outline { fill: #f0f0f0; stroke: #888888; stroke-opacity: 1; }

/* Hand finger overlays use the same colors as highlighted keys */
.kbd-svg .hand path.finger.lpinky,
.kbd-svg .hand path.finger.lring,
.kbd-svg .hand path.finger.lmiddle,
.kbd-svg .hand path.finger.lindex,
.kbd-svg .hand path.finger.rindex,
.kbd-svg .hand path.finger.rmiddle,
.kbd-svg .hand path.finger.rring,
.kbd-svg .hand path.finger.rpinky { fill: var(--kbd-hl-bg); opacity: 0.95; }
.kbd-svg .hand path.finger.lthumb,
.kbd-svg .hand path.finger.rthumb { fill: rgb(119, 119, 119); opacity: 0.95; }

/* Slideout keyboard panel */
.kbd-slideout { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; transform: translateY(100%); transition: transform 180ms ease-out; height: var(--kbd-slideout-height, auto); max-height: 50vh; display: flex; flex-direction: column; }
.kbd-slideout--visible { transform: translateY(0); }
.kbd-slideout--dragging { transition: none; user-select: none; }
.kbd-slideout__drag-handle { flex-shrink: 0; height: 12px; cursor: ns-resize; border-radius:.5rem .5rem 0 .0em; background: rgba(121, 186, 214, 0.65); display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; position: relative; z-index: 1; }
.kbd-slideout__drag-handle:hover { background: var(--kbd-slideout-bg-hover, rgba(237, 250, 255, 0.82)); }
.kbd-slideout__drag-bar { width: 50%; height: 4px; border-radius: 1px; border: 1px solid #fdfeff; background: #eff6ff; pointer-events: none; }
.kbd-slideout__inner { flex: 1; min-height: 0; padding: .5rem .75rem; display: flex; align-items: center; justify-content: center; overflow-y: auto; flex-direction: column; }
.kbd-center { display: flex; justify-content: center; min-width: fit-content; flex-direction: column; border-radius: 3px;}
.kbd-slideout--custom-size .kbd-center { height: 100%; }
.kbd-controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }
.kbd-controls label { font-size: .85rem; color: #333; margin: .15rem 0 0; }
.kbd-controls .kbd-select { min-width: 160px; }
.kbd-controls .kbd-btn { align-self: flex-end; margin-top: .35rem; }
.kbd-slideout__bar { display: flex; align-items: center; justify-content: space-between; padding: .25rem .5rem; border-bottom: 1px solid var(--kbd-stroke, #c7cdd3); background: var(--kbd-slideout-bar, #eef3f7); }
.kbd-slideout__title { font-size: .9rem; color: #333; }
.kbd-slideout__controls { display: flex; gap: .5rem; }
.kbd-btn { font: inherit; font-size: .85rem; padding: .25rem .5rem; border: 1px solid #bbb; background: white; color: #333; border-radius: .25rem; cursor: pointer; }
.kbd-btn[aria-pressed="true"], .kbd-btn:hover { background: #f1f5f9; }
@media (prefers-reduced-motion: reduce) {
  .kbd-slideout { transition: none; }
}

.kbd-variant { background: var(--kbd-backdrop, rgba(255,255,255,0.90)); padding: .5rem .75rem; border-radius: 0 0 .5rem .5rem; border: 1px solid rgba(0,0,0,0.05); }


/* Custom size mode: scale keyboard to fit container when manually resized */
.kbd-slideout--custom-size .kbd-variant {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kbd-slideout--custom-size .kbd-svg {
  width: auto !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
}

/* Bottom fixed toggle button (lessons only) */
.kbd-fab { position: fixed; right: 16px; bottom: 16px; z-index: 1060; padding: .5rem .75rem; border: 1px solid #bbb; background: white; color: #333; border-radius: .5rem; box-shadow: 0 3px 10px rgba(0,0,0,0.12); cursor: pointer; }
.kbd-fab:hover { background: #f7f9fc; }
#kbd-toggle, #kbd-hide { display: inline-flex; align-items: center; gap: .35rem; z-index: 1060;}
#kbd-hide { display: none; }
#kbd-slideout.kbd-slideout--visible ~ #kbd-toggle { display: none; }
#kbd-slideout.kbd-slideout--visible ~ #kbd-hide { display: inline-flex; }