@layer components{.nn-rule{--nn-rule-line: var(--nn-line-strong);--nn-rule-minor: var(--nn-line-strong);--nn-rule-major: var(--nn-fg-muted);display:flex;align-items:flex-start;gap:14px;width:100%}.nn-rule-brand{--nn-rule-line: var(--color-brand-300);--nn-rule-minor: var(--color-brand-300);--nn-rule-major: var(--color-brand-700)}.nn-rule-label,.nn-rule-note{flex-shrink:0;margin-top:-5px;color:var(--nn-fg-muted);font-family:var(--font-ds-mono);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.08em;text-transform:uppercase}.nn-rule-brand .nn-rule-label{color:var(--color-brand-700)}.nn-rule-body{position:relative;display:block;flex:1;min-width:0;height:10px}.nn-rule-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--nn-rule-line);transform-origin:left}.nn-rule-ticks{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:10px;overflow:visible;shape-rendering:crispEdges}.nn-rule-ticks path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}.nn-rule-minor{stroke:var(--nn-rule-minor)}.nn-rule-major{stroke:var(--nn-rule-major)}.nn-rule-armed .nn-rule-line{transform:scaleX(0)}.nn-rule-armed .nn-rule-ticks{clip-path:inset(0 100% 0 0)}.nn-rule-armed.nn-rule-in .nn-rule-line{transform:none;transition:transform var(--transition-duration-ds-reveal) var(--ease-standard)}.nn-rule-armed.nn-rule-in .nn-rule-ticks{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-standard) .12s}}@media (prefers-reduced-motion: reduce){.nn-rule-armed .nn-rule-line{transform:none}.nn-rule-armed .nn-rule-ticks{clip-path:none}}