/* © 2026 William C. Chesher. All Rights Reserved.
   wordless - the look of wordless.js on the pages around the studio and in the code room: a button that lost
   its words is a square of its own height, the icon centred; its words are out of sight; the tip shows them.
   The fallbacks are the house colours, for the code room, which does not load tokens.css. */
.sr { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:is(button, a).icon-only { padding-left: 0; padding-right: 0; justify-content: center; gap: 0; aspect-ratio: 1 / 1; }
:is(button, a).icon-only::before { content: none; }
.tip { position: fixed; z-index: 1000; pointer-events: none; max-width: 260px; padding: 6px 10px; border-radius: 8px;
  background: var(--panel-2, #172038); color: var(--ink, #f2f5ff); border: 1px solid var(--line, #233052);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45); font: 500 var(--type-small, 13px)/1.3 var(--body, system-ui, sans-serif);
  opacity: 0; transform: translateY(2px); transition: opacity 90ms, transform 90ms; }
.tip.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }