.rule-example{margin:var(--space-4) 0 0;padding:var(--space-4) var(--space-5);background:var(--bg-card);background:color-mix(in srgb,var(--bg-card) 62%,var(--bg-panel));border-radius:var(--radius-panel)}.rule-example>figcaption{color:var(--text-primary);font-size:var(--font-size-title);font-weight:600}.rule-example-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin:var(--space-2) 0 0;padding:0;list-style:none}.rule-example-art{position:relative;display:flex;min-block-size:100px;align-items:center;justify-content:center;gap:var(--space-1);border-radius:var(--radius-control)}.rule-example-art>img{display:block;inline-size:clamp(25px,4vw,40px);block-size:auto;object-fit:contain}.rule-example-art>img[data-example-muted]{opacity:.42}.rule-example-art>img[data-piece-shape=portrait]{inline-size:clamp(40px,7vw,74px)}.rule-example-art>svg:not(.rule-example-arrow){flex:none;inline-size:min(100%,156px);block-size:94px;overflow:visible}.rule-example-art>.rule-example-arrow{position:absolute;inset-inline-start:calc(-1 * var(--space-5) + 2px);inset-block-start:calc(50% - 8px);color:var(--accent-primary)}.rule-example-steps p{margin:0;color:var(--text-secondary);font-size:var(--font-size-body);line-height:1.6}.rule-example-steps .rule-example-step-title{display:flex;align-items:baseline;gap:var(--space-2);margin-block-end:var(--space-1);color:var(--text-primary)}.rule-example-step-title>span{color:var(--accent-primary);font-weight:700;font-variant-numeric:tabular-nums}@media(max-width:560px){.rule-example-steps{grid-template-columns:minmax(0,1fr)}.rule-example-art>.rule-example-arrow{display:none}}.rule-example-art .rule-piece-value{color:var(--text-primary);font-size:var(--font-size-score);font-weight:700;font-variant-numeric:tabular-nums}.rule-example-art>[data-piece-shape=card]{inline-size:clamp(28px,4.4vw,48px);max-block-size:80px}