.ab{display:flex;flex-direction:column;gap:20px}.ab__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}.ab__inputs{gap:26px;padding:24px}.ab__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.ab__scale{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:1px solid var(--line)}.ab__scaletitle{font-size:var(--text-sm);font-weight:700;color:var(--fg-muted)}.ab__hint{font-size:var(--text-xs);color:var(--fg-faint);line-height:1.7}.ab__result{display:flex;flex-direction:column;gap:16px;min-width:0;position:sticky;top:80px;transition:opacity .16s ease}.ab__result.is-stale{opacity:.5}.ab__hero{container-type:inline-size;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;padding:2px 2px 8px}.ab__big{display:flex;flex-direction:column;gap:2px}.ab__biglabel{font-size:var(--text-xs);color:var(--fg-faint)}.ab__bigvalue{font-family:var(--font-mono);font-size:min(clamp(52px,7vw,88px),max(20px,calc(100cqi / (var(--n, 5) * .64))));font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--accent-fg)}@media (prefers-reduced-motion:no-preference){.ab__bigvalue{animation:ab-tick .26s var(--ease-out,ease-out)}}@keyframes ab-tick{0%{opacity:.35;transform:translateY(.1em)}to{opacity:1;transform:none}}.ab__badges{display:flex;flex-wrap:wrap;gap:6px}.ab__badges .ui-badge,.ab__hint .ui-badge{white-space:normal;height:auto;min-height:24px;padding-block:3px;line-height:1.4}.ab__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ab__stage{display:grid;place-items:center;min-height:340px;padding:20px;border-radius:var(--radius);border:1px dashed var(--line-strong);background:var(--surface);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;background-position:50%;overflow:hidden}.ab__box{position:relative;border-radius:10px;background:color-mix(in oklab,var(--accent) 22%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent),0 10px 40px color-mix(in oklab,var(--accent) 22%,transparent)}.ab__labels{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;border-radius:inherit}.ab__box--below .ab__labels,.ab__box--side .ab__labels{overflow:visible;inset:auto;white-space:nowrap}.ab__box--below .ab__labels{left:50%;top:calc(100% + 24px);transform:translateX(-50%)}.ab__box--side .ab__labels{left:calc(100% + 26px);top:50%;transform:translateY(-50%);align-items:flex-start}.ab__box--below .ab__ratio,.ab__box--side .ab__ratio{font-size:16px}.ab__ratio{font-size:clamp(14px,3.4vw,34px);font-weight:700;color:var(--accent-fg);letter-spacing:-.02em;line-height:1}.ab__ratio,.ab__size{font-family:var(--font-mono);max-width:100%;overflow:hidden}.ab__size{font-size:12px;font-variant-numeric:tabular-nums;color:var(--fg-muted);white-space:nowrap;text-overflow:ellipsis}.ab__handle{position:absolute;right:-14px;bottom:-14px;width:28px;height:28px;border-radius:50%;background:var(--accent);border:3px solid var(--bg);box-shadow:0 2px 10px rgb(0 0 0/.3);cursor:nwse-resize;touch-action:none}.ab__handle:after{content:"";position:absolute;inset:-10px}.ab__handle:focus-visible{outline:2px solid var(--accent-fg);outline-offset:3px}@media (max-width:960px){.ab__grid{grid-template-columns:minmax(0,1fr)}.ab__result{position:static}}@media (max-width:520px){.ab__inputs{padding:16px}.ab__stage{min-height:300px;padding:14px}}