.stemleaf {
    --sl-ink:        #1f2433;  /* digits / main text            */
    --sl-paper:      #ffffff;  /* card background               */
    --sl-accent:     #2f6f5e;  /* stem digits + the | divider   */
    --sl-accent-soft:#eaf3ef;  /* row hover highlight           */
    --sl-tint:       #f6f9f7;  /* faint track behind the leaves */
    --sl-tick:       #e3ebe7;  /* hairline "ruler" between leaves*/
    --sl-muted:      #6b7280;  /* key / caption text            */
    --sl-line:       black;  /* card border + row guides      */
    --sl-radius:     14px;
    --sl-leaf-w:     1.7rem;   /* fixed leaf-cell width = one "ruler unit" */
 
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    margin: 1.25rem 0;
    padding: 1.4rem 1.6rem 1.1rem;
    background: var(--sl-paper);
    border: 2px solid var(--sl-line);
    border-radius: var(--sl-radius);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.06);
    color: var(--sl-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: auto;            /* long rows scroll instead of breaking alignment */
  }
 
  .stemleaf__title {
    margin: 0 0 1rem;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -0.01em;
  }
 
  .stemleaf__table {
    border-collapse: collapse;
    margin: 0;
  }
 
  /* subtle horizontal guides between rows */
  .stemleaf__table tr + tr .stemleaf__stem,
  .stemleaf__table tr + tr .stemleaf__leaves {
    border-top: 1px solid var(--sl-line);
  }
 
  /* the stem digit + the iconic vertical rule */
  .stemleaf__stem {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sl-accent);
    text-align: right;
    padding: 0.42rem 0.95rem;
    border-right: 3px solid var(--sl-accent);
    white-space: nowrap;
  }
 
  /* the leaf strip — a faint track so it reads like a measuring tape */
  .stemleaf__leaves {
    padding: 0.42rem 0 0.42rem 0.7rem;
    background: var(--sl-tint);
    white-space: nowrap;
  }
 
  /* each leaf: equal width, so longer rows are visibly longer */
  .stemleaf__leaves .leaf {
    display: inline-block;
    width: var(--sl-leaf-w);
    text-align: center;
    border-right: 1px solid var(--sl-tick);   /* aligned "ruler" ticks */
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--sl-ink);
  }
 
  /* highlight a row on hover so it's easy to read across */
  .stemleaf__table tr:hover .stemleaf__leaves {
    background: var(--sl-accent-soft);
    transition: background .12s ease;
  }
 
  .stemleaf__key {
    margin: 0.95rem 0 0;
    font-size: 0.82rem;
    color: var(--sl-muted);
  }
  .stemleaf__keysample {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 600;
    color: var(--sl-accent);
    padding: 0.05rem 0.35rem;
    border-radius: 5px;
    background: var(--sl-tint);
  }