/* page-module.shortcut — keyboard shortcut reference card. Mac/PC swap: shows ⌘, 'pc' shows Ctrl. Defaults to mac (no attr set). Glyph width tiers (set by .wider / .widest class from PHP): default — letters, digits, symbols (A, 1, >) wider — modifiers and named keys (shift, command, option, return, ...) widest — space (very rare) */ page-module.shortcut { .warning { color: var(--ink-error); } .shortcut-placeholder { aspect-ratio: 4 / 1; max-width: 28rem; background: var(--viz-canvas-background); border: 1px dashed var(--stroke-secondary); } .shortcut-placeholder + .warning { margin-top: var(--below-block); } } [data-key='command'] .key-pc { display: none; } [data-keyboard='pc'] [data-key='command'] .key-mac { display: none; } [data-keyboard='pc'] [data-key='command'] .key-pc { display: inline; } shortcut-card { font-family: var(--font-mono); font-size: var(--strong-voice-font-size); shortcut-keys { display: flex; flex-direction: row; align-items: center; gap: 0.5em; margin-block: 1.3em; } .glyph { --size: 60px; display: block; min-width: var(--size); height: var(--size); display: grid; place-items: center; border-radius: 6px; padding-inline: 10px; &.wider { min-width: calc(var(--size, 60px) * 1.5); } &.widest { min-width: calc(var(--size, 60px) * 2.5); } } }