/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
/*!r:1787213097730*/
.con__lead{font-size:var(--step-1);line-height:var(--leading-snug);max-inline-size:62ch;margin-block-end:var(--space-m)}.con__modes{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--radius-button);overflow:hidden;margin-block-end:var(--space-l)}.con__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}.con__mode+.con__mode{border-inline-start:1.5px solid var(--line)}.con__mode.is-active{background:var(--accent);color:var(--on-accent)}.con__panel{padding:var(--space-l);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);max-inline-size:32rem}.con__panel-title{font-weight:700;font-size:var(--step--1);color:var(--ink)}.con__buttons{display:flex;flex-wrap:wrap;gap:var(--space-s);align-items:center;margin-block-start:var(--space-m)}.con__btn{font-family:var(--font-body);cursor:pointer}.con__panel[data-con-mode=consistent] .con__btn{font-weight:600;font-size:var(--step--1);padding:var(--space-2xs) var(--space-m);min-block-size:2.75rem;border-radius:var(--radius-button);background:var(--surface-2);color:var(--ink);border:1.5px solid var(--line)}.con__panel[data-con-mode=consistent] .con__btn--1{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.con__panel[data-con-mode=consistent] .con__btn--5{color:var(--status-challenged-fg);border-color:var(--status-challenged-fg)}.con__panel[data-con-mode=inconsistent] .con__btn--1{background:#2e7d32;color:#fff;border:0;padding:.3rem .7rem;border-radius:0;font-size:.8rem;font-weight:400}.con__panel[data-con-mode=inconsistent] .con__btn--2{background:#fff;color:#c2185b;border:2px dashed #c2185b;padding:.6rem 1.2rem;border-radius:999px;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}.con__panel[data-con-mode=inconsistent] .con__btn--3{background:linear-gradient(#ffb300,#ff6f00);color:#222;border:1px solid #999;padding:.5rem .6rem;border-radius:10px;font-size:1rem;font-weight:800}.con__panel[data-con-mode=inconsistent] .con__btn--4{background:#1565c0;color:#fff;border:0;padding:.2rem 1.6rem;border-radius:4px 16px;font-size:.85rem;font-style:italic}.con__panel[data-con-mode=inconsistent] .con__btn--5{background:#eee;color:#555;border:3px double #555;padding:.45rem .5rem;border-radius:50%;font-size:.6rem}.con__readout{font-size:var(--step-0);color:var(--ink);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}.con__alt{margin-block-start:var(--space-l);border-block-start:1px solid var(--line);padding-block-start:var(--space-m)}.con__alt summary{cursor:pointer;font-weight:600;color:var(--accent-strong)}.con__alt[open] summary{margin-block-end:var(--space-s)}