.term-card .usability-card-preview{color:#4d5360;background:#fbfbfc;border-color:#e1e3e8;align-content:center;gap:6px;padding:12px;display:grid}.usability-card-task{color:#6b7280;margin:0;font-size:9px;font-weight:700}.usability-card-task b{color:#1f2330;font-size:11px;font-weight:800}.usability-card-compare{gap:5px;margin:0;padding:0;list-style:none;display:grid}.usability-card-compare>span{background:#fff;border:1px solid #e1e3e8;border-radius:5px;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 6px;padding:6px 8px;display:grid}.usability-card-compare>span b{color:#1f2330;font-size:10px;font-weight:800}.usability-card-compare>span i{font-size:10px;font-style:normal;font-weight:800}.usability-card-compare>span small{color:#6b7280;font-family:var(--font-geist-mono), ui-monospace, monospace;grid-column:1/-1;font-size:9px}.usability-card-compare .is-good{background:#e6f7ec;border-color:#bfe3cd}.usability-card-compare .is-good i{color:#1f6a3a}.usability-card-compare .is-bad{background:#fdf3f4;border-color:#eec6c9}.usability-card-compare .is-bad i{color:#a83a44}.usability-card-verdict{color:#4d5360;background:#f3f4f7;border-radius:5px;margin:0;padding:6px 8px;font-size:9px;font-weight:650;line-height:1.45}.usability-card-verdict strong{color:#1f2330;font-weight:800}@media (max-width:780px){.usability-card-compare>span{grid-template-columns:minmax(0,1fr)}.usability-card-compare>span i{grid-area:1/2}.usability-card-compare>span small{grid-column:1/-1}}.term-card .term-preview.usability-card-preview{background:#fbfbfc;border-color:#e1e3e8}.term-interactive-demo.usability-demo{border-color:var(--line);background:var(--soft);gap:13px}.usability-demo-brief{color:#4d5360;margin:0;font-size:13px;line-height:1.6}.usability-demo-brief b{color:#1f2330;font-weight:800}.usability-variant-picker{flex-wrap:wrap;gap:8px;display:flex}.usability-variant-picker button{text-align:left;align-content:start;gap:1px;min-height:42px;padding:8px 12px;display:grid}.usability-variant-picker button b{color:#1f2330;font-size:13px;font-weight:800}.usability-variant-picker button small{color:#6b7280;font-size:11px;font-weight:600}.term-interactive-demo.usability-demo .usability-variant-picker button:hover{color:#1f2330;background:#fff;border-color:#1f2330}.term-interactive-demo.usability-demo .usability-variant-picker button[aria-pressed=true]{color:#1f2330;background:#f3f4f7;border-color:#1f2330}.term-interactive-demo.usability-demo .usability-variant-picker button[aria-pressed=true] b{color:#1f2330}.usability-task-card{background:#fff;border:1px solid #d8dbe2;border-radius:10px;gap:11px;padding:14px;display:grid}.usability-task-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px;display:flex}.usability-task-name{color:#1f2330;font-size:14px;font-weight:800}.usability-task-meta{color:#6b7280;font-size:12px;font-weight:650}.usability-step-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.usability-step{color:#4d5360;background:#fff;border:1px solid #e1e3e8;border-radius:8px;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;display:grid}.usability-step-glyph{color:#6b7280;background:#f3f4f7;border-radius:50%;place-items:center;width:26px;height:26px;font-size:13px;font-weight:800;display:grid}.usability-step-body{gap:1px;min-width:0;display:grid}.usability-step-body b{color:#1f2330;font-size:13px;font-weight:750;line-height:1.35}.usability-step-body small{color:#6b7280;font-size:11.5px;font-weight:500;line-height:1.4}.usability-step-tag{white-space:nowrap;border-radius:99px;padding:3px 8px;font-size:11px;font-weight:750}.usability-step.is-pending{background:#fafafb;border-color:#eceef1}.usability-step.is-pending .usability-step-body b{color:#9aa0a8}.usability-step.is-pending .usability-step-body small{color:#aab0b8}.usability-step.is-pending .usability-step-glyph{color:#9aa0a8;background:#eceef1}.usability-step.is-current{background:#fff;border-style:dashed;border-color:#1f2330;box-shadow:0 0 0 3px #f3f4f7}.usability-step.is-current .usability-step-glyph{color:#fff;background:#1f2330}.usability-step.is-current .usability-step-body b{color:#1f2330}.usability-step.is-walked.is-ok{background:#e6f7ec;border-color:#bfe3cd}.usability-step.is-walked.is-ok .usability-step-glyph{color:#fff;background:#1f6a3a}.usability-step.is-walked.is-ok .usability-step-tag{color:#1f6a3a;background:#e6f7ec;border:1px solid #bfe3cd}.usability-step.is-walked.is-error{background:#fdf3f4;border-color:#eec6c9}.usability-step.is-walked.is-error .usability-step-glyph{color:#fff;background:#a83a44}.usability-step.is-walked.is-error .usability-step-tag{color:#a83a44;background:#fdf3f4;border:1px solid #eec6c9}.usability-step.is-walked.is-back{background:#f0f1f4;border-color:#c9ccd4}.usability-step.is-walked.is-back .usability-step-glyph{color:#fff;background:#4d5360}.usability-step.is-walked.is-back .usability-step-tag{color:#4d5360;background:#fff;border:1px solid #c9ccd4}.usability-metrics{background:#f6f7f9;border-radius:8px;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px;display:grid}.usability-metric{background:#fff;border:1px solid #e1e3e8;border-radius:6px;gap:2px;padding:8px;display:grid}.usability-metric small{color:#6b7280;font-size:10.5px;font-weight:700}.usability-metric b{color:#1f2330;font-size:19px;font-weight:800;font-family:var(--font-geist-mono), ui-monospace, monospace;line-height:1}.usability-metric b i{color:#9aa0a8;font-size:11px;font-style:normal;font-weight:700}.usability-metric.is-error b{color:#a83a44}.usability-metric.is-back b{color:#4d5360}.usability-result-line{color:#4d5360;background:#fff;border-left:4px solid #1f2330;border-radius:6px;margin:0;padding:10px 12px;font-size:12.5px;line-height:1.6}.usability-result-line strong{color:#1f2330;margin-right:4px;font-weight:800}.usability-result-line.is-done{color:#1f3a2a;background:#e6f7ec;border-left-color:#1f6a3a}.usability-result-line.is-done strong{color:#1f6a3a}.usability-run-controls{flex-wrap:wrap;gap:8px;display:flex}.term-interactive-demo.usability-demo .usability-run-next{border:1px solid var(--color-rausch);background:var(--color-rausch);min-height:40px;color:var(--color-white);font:inherit;border-radius:8px;padding:9px 22px;font-size:14px;font-weight:750;transition:background-color .12s ease-out,border-color .12s ease-out}.term-interactive-demo.usability-demo .usability-run-next:hover:not(:disabled){border-color:var(--color-rausch-600);background:var(--color-rausch-600);color:var(--color-white)}.term-interactive-demo.usability-demo .usability-run-next:focus-visible{outline:3px solid color-mix(in srgb, var(--color-rausch) 35%, #fff);outline-offset:2px}.term-interactive-demo.usability-demo .usability-run-next:disabled{opacity:.5;cursor:not-allowed}.term-interactive-demo.usability-demo .usability-reset{color:#4d5360;background:#fff;border-color:#d8dbe2}.term-interactive-demo.usability-demo .usability-reset:hover:not(:disabled){color:#1f2330;background:#f3f4f7;border-color:#1f2330}.term-interactive-demo.usability-demo .usability-reset:disabled{opacity:.5;cursor:not-allowed}.usability-demo-hint{color:#4d5360;background:#fff;border-left:4px solid #1f2330;border-radius:6px;margin:0;padding:10px 12px;font-size:13px;line-height:1.6}.usability-demo-hint b{color:#1f2330;font-weight:800}.usability-focus-points{color:#4d5360;background:#fff;border-left:4px solid #1f2330;border-radius:6px;margin:12px 0 0;padding:10px 12px;font-size:13px;line-height:1.6}.usability-focus-points b{color:#1f2330;font-weight:800}.usability-howto{gap:7px;margin:0;padding-left:20px;display:grid}.usability-howto li{color:#4d5360;font-size:13px;line-height:1.6}.usability-howto li b{color:#1f2330;font-weight:800}.usability-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.usability-examples article{background:#fff;border:1px solid #d8dbe2;border-radius:8px;gap:6px;padding:12px 14px;display:grid}.usability-examples header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.usability-examples header strong{color:#1f2330;font-size:13px;font-weight:800}.usability-examples header small{color:#6b7280;font-size:11px;font-weight:700}.usability-examples p{color:#4d5360;margin:0;font-size:12.5px;line-height:1.6}.usability-examples span{color:#6b7280;font-size:11.5px;font-weight:650;line-height:1.5}.usability-examples article.is-good{background:#f6fbf8;border-left:4px solid #1f6a3a}.usability-examples article.is-good header strong:before{content:"✓ ";color:#1f6a3a;font-weight:800}.usability-examples article.is-bad{background:#fdf3f4;border-left:4px dashed #a83a44}.usability-examples article.is-bad header strong:before{content:"✗ ";color:#a83a44;font-weight:800}@media (max-width:780px){.usability-card-compare>span{grid-template-columns:minmax(0,1fr)}.usability-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.usability-examples{grid-template-columns:1fr}.usability-variant-picker button{flex:calc(50% - 8px)}.usability-step{grid-template-columns:24px minmax(0,1fr)}.usability-step-tag{grid-column:2;justify-self:start}}@media (prefers-reduced-motion:reduce){.term-interactive-demo.usability-demo .usability-run-next{transition:none}}
