/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
/*!r:1785684195175*/
.tip__lead{font-size:var(--step-1);line-height:var(--leading-snug);max-inline-size:62ch;margin-block-end:var(--space-m)}.tip__modes{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--radius-button);overflow:hidden;margin-block-end:var(--space-l)}.tip__mode{appearance:none;border:0;background:var(--surface);color:var(--muted);font-family:var(--font-body);font-weight:600;font-size:var(--step--1);padding:var(--space-2xs) var(--space-m);min-block-size:2.5rem;cursor:pointer}.tip__mode+.tip__mode{border-inline-start:1.5px solid var(--line)}.tip__mode.is-active{background:var(--accent);color:var(--on-accent)}.tip__toolbar{display:inline-flex;gap:var(--space-2xs);padding:var(--space-2xs);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}.tip__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:2.75rem;block-size:2.75rem;font-size:var(--step-1);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);cursor:pointer}.tip__btn:hover{border-color:var(--accent)}.tip__glyph{line-height:1}.tip__sr{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.tip__bubble{position:absolute;inset-block-end:calc(100% + 0.4rem);inset-inline-start:50%;transform:translateX(-50%);padding:.3rem .55rem;font-size:var(--step--1);font-weight:600;white-space:nowrap;color:var(--paper);background:var(--ink);border-radius:var(--radius-s);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s;z-index:5}.tip:not(.is-off) .tip__btn:focus-visible .tip__bubble,.tip:not(.is-off) .tip__btn:hover .tip__bubble{opacity:1;visibility:visible}.tip__readout{font-size:var(--step-0);color:var(--ink);min-block-size:1.6em;margin-block-start:var(--space-l);padding:var(--space-2xs) var(--space-s);background:var(--accent-soft);border-radius:var(--radius-s);max-inline-size:64ch}.tip__alt{margin-block-start:var(--space-l);border-block-start:1px solid var(--line);padding-block-start:var(--space-m)}.tip__alt summary{cursor:pointer;font-weight:600;color:var(--accent-strong)}.tip__alt[open] summary{margin-block-end:var(--space-s)}@media (prefers-reduced-motion:reduce){.tip__bubble{transition:none}}