<div class="kchord-stage">
  <div class="kchord-inner">
    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Save file</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">S</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Save File</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">S</span></div>
        </div>
        <div class="kchord-desc">Saves the current file to disk immediately. If the file has never been saved, opens a Save As dialog to choose a name and location.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">After every meaningful change to preserve work</div>
          <div class="kchord-when-item">Before switching branches or running tests</div>
          <div class="kchord-when-item">Before closing the editor or tab</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ ⇧ S — Save As</div>
          <div class="kchord-rel-pill">⌘ ⌥ S — Save All</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Undo</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">Z</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Undo</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">Z</span></div>
        </div>
        <div class="kchord-desc">Reverses the last editing action, stepping backwards through the undo history one action at a time. History is preserved across saves.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">After accidentally deleting or overwriting text</div>
          <div class="kchord-when-item">To compare before/after a refactor</div>
          <div class="kchord-when-item">To recover from an unwanted auto-format</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ ⇧ Z — Redo</div>
          <div class="kchord-rel-pill">⌘ K U — Clear history</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Command palette</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">⇧</span><span class="kchord-plus">+</span><span class="kchord-key">P</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Command Palette</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">⇧</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">P</span></div>
        </div>
        <div class="kchord-desc">Opens a searchable list of every editor command, extension action, and setting. The fastest way to trigger any feature without memorising its location.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">To find any command without digging through menus</div>
          <div class="kchord-when-item">To run a formatter, linter, or task</div>
          <div class="kchord-when-item">To change settings quickly by name</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ P — Quick open file</div>
          <div class="kchord-rel-pill">⌘ ⇧ O — Go to symbol</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Find in file</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">F</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Find in File</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">F</span></div>
        </div>
        <div class="kchord-desc">Opens an inline search bar. Supports plain text, regular expressions, and case-sensitive matching. Highlights all occurrences inside the active file.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">To locate a variable, function, or string in the file</div>
          <div class="kchord-when-item">To count occurrences of a term before refactoring</div>
          <div class="kchord-when-item">With regex to find patterns (e.g. unused imports)</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ H — Find &amp; Replace</div>
          <div class="kchord-rel-pill">⌘ ⇧ F — Find in workspace</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Toggle comment</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">/</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Toggle Comment</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">/</span></div>
        </div>
        <div class="kchord-desc">Toggles line comments on the current line or all selected lines. Uses the correct comment syntax for the file's language automatically.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">To temporarily disable a block of code for debugging</div>
          <div class="kchord-when-item">To add an explanatory comment above a function</div>
          <div class="kchord-when-item">To comment multiple lines at once (select first)</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ ⇧ / — Block comment</div>
          <div class="kchord-rel-pill">⌘ K C — Add comment</div>
        </div>
      </div>
    </div>
  </div>
</div>

.kchord-stage {
  background: #111116;
  /* Left room — kchord tips pop to the LEFT of each shortcut row,
     ~260px wide. */
  padding: 36px 28px 36px 320px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.kchord-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kchord-t {
  position: relative;
}
.kchord-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: help;
  transition: background .12s;
}
.kchord-t:hover .kchord-row {
  background: rgba(255, 255, 255, 0.04);
}
.kchord-label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}
.kchord-keys {
  display: flex;
  gap: 4px;
  align-items: center;
}
.kchord-key {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  line-height: 1;
  letter-spacing: 0.02em;
}
.kchord-plus {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
}
.kchord-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: 260px;
  background: #1c1c24;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  text-align: left;
}
.kchord-t:hover .kchord-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.kchord-top {
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kchord-action {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 7px;
}
.kchord-keys-big {
  display: flex;
  gap: 5px;
  align-items: center;
}
.kchord-key-big {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}
.kchord-plus-big {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}
.kchord-desc {
  padding: 11px 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Inter', system-ui, sans-serif;
}
.kchord-when {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.kchord-when-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kchord-when-item {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 4px;
  padding-left: 10px;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.4;
}
.kchord-when-item::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  top: -1px;
}
.kchord-related {
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kchord-rel-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 2px;
}
.kchord-rel-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}