/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
/*!r:1789286734295*/
.dim__lead{font-size:var(--step-1);line-height:var(--leading-snug);max-inline-size:62ch;margin-block-end:var(--space-l)}.dim__scene{display:grid;place-items:center;max-inline-size:22rem;padding:var(--space-l);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-m);margin-block-end:var(--space-m)}.dim__phone{inline-size:12rem;padding:var(--space-m);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);position:relative}.dim__bubble{align-self:flex-end;margin-inline-start:auto;inline-size:fit-content;padding:var(--space-2xs) var(--space-s);background:var(--accent);color:var(--on-accent);border-radius:12px 12px 2px;font-size:var(--step--1);margin-block-end:var(--space-m);transition:transform .3s,opacity .3s}.dim__inputrow{display:flex;gap:var(--space-2xs);align-items:center}.dim__field{flex:1;font-size:var(--step--2);color:var(--muted);padding:var(--space-2xs) var(--space-s);border:1px solid var(--line);border-radius:999px}.dim__send{font:inherit;font-size:var(--step--2);font-weight:700;cursor:pointer;padding:var(--space-2xs) var(--space-s);color:var(--on-accent);background:var(--accent);border:0;border-radius:999px}.dim__tick{display:block;font-size:var(--step--2);color:var(--status-supported-fg);text-align:end;margin-block-start:var(--space-2xs);opacity:0}.dim__scene.is-words .dim__bubble,.dim__scene.is-words .dim__send{outline:3px solid var(--accent-strong);outline-offset:2px}.dim__scene.is-visual .dim__send{transform:scale(1.15);box-shadow:0 0 0 4px var(--accent-soft)}.dim__scene.is-physical .dim__phone{outline:3px dashed var(--accent);outline-offset:4px}.dim__scene.is-time .dim__bubble{transform:translate(20px,-16px) rotate(8deg);opacity:.5}.dim__scene.is-behaviour .dim__tick{opacity:1}.dim__tabs{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-block-end:var(--space-m)}.dim__tab{display:flex;align-items:center;gap:.3rem;font:inherit;font-weight:600;font-size:var(--step--1);cursor:pointer;padding:var(--space-2xs) var(--space-s);min-block-size:2.5rem;border:1.5px solid var(--line);border-radius:var(--radius-button);background:var(--surface)}.dim__tab.is-active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.dim__n{font-size:.7em;font-weight:800;opacity:.7}.dim__readout{font-size:var(--step-0);line-height:var(--leading-snug);min-block-size:1.6em;margin-block-start:var(--space-m);padding:var(--space-s);background:var(--accent-soft);border-radius:var(--radius-s);max-inline-size:64ch}.dim__alt{margin-block-start:var(--space-l);border-block-start:1px solid var(--line);padding-block-start:var(--space-m)}.dim__alt summary{cursor:pointer;font-weight:600;color:var(--accent-strong)}.dim__alt[open] summary{margin-block-end:var(--space-s)}