/* Study prose follows the shared site type scale and reading column. */
.pattern-study{--pattern-ink:oklch(.26 0 0);--pattern-secondary:oklch(.49 0 0);--pattern-rule:oklch(0 0 0 / .09)}
.pattern-study .pattern-intro{margin-top:24px}
.pattern-study .pattern-section{scroll-margin-top:32px}
.pattern-study .pattern-section>p,.pattern-study .pattern-intro{font-size:var(--text-body);line-height:1.5;color:var(--pattern-ink);max-width:65ch}
.pattern-study .pattern-section>p+p{margin-top:16px}
.pattern-study .pattern-note,.pattern-study .pattern-section>.pattern-note{font-size:var(--text-support);line-height:1.4286;color:var(--pattern-secondary);margin-top:16px}
.pattern-rules{margin-top:24px;border-block:1px solid var(--pattern-rule)}
.pattern-rules>div{display:grid;grid-template-columns:108px minmax(0,1fr);gap:20px;padding-block:16px}
.pattern-rules>div+div{border-top:1px solid var(--pattern-rule)}
.pattern-rules dt{font-size:var(--text-support);line-height:1.5;font-weight:500;color:var(--pattern-ink);font-variant-numeric:tabular-nums}
.pattern-rules dd{margin:0;font-size:var(--text-support);line-height:1.5;color:var(--pattern-secondary)}
.pattern-evidence{display:grid;gap:24px;margin-block:24px}
.pattern-evidence figure{display:grid;grid-template-columns:minmax(0,338px) minmax(0,1fr);align-items:center;gap:24px;margin:0;min-width:0}
.pattern-evidence img{display:block;width:100%;height:auto;clip-path:inset(0 round 14.2% / 30.4%)}
.pattern-evidence figcaption{display:flex;flex-direction:column;gap:4px;margin:0;font-size:var(--text-support);line-height:1.4286;color:var(--pattern-secondary);text-wrap:pretty}
.pattern-evidence figcaption strong{font-size:var(--text-body);line-height:1.5;font-weight:500;color:var(--pattern-ink)}
.pattern-study .browser-observation,.pattern-study [data-activity-note]{display:none}
.pattern-study .pattern-related a{display:inline-block;padding-block:8px;color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:oklch(0 0 0 / .25)}
.concept-demo{margin:24px 0}
.concept-demo figcaption{font-size:var(--text-support);line-height:1.4286;color:var(--pattern-secondary);margin-top:12px;text-wrap:pretty}
.study-concept-name{grid-column:2;grid-row:1;white-space:nowrap;font-size:var(--text-support);line-height:20px;font-weight:500;color:var(--study-chrome-ink);border-radius:100px;background:var(--study-chrome-bg);padding:10px 16px}
@media(max-width:767px){.pattern-rules>div{grid-template-columns:76px minmax(0,1fr);gap:16px}}
@media(max-width:600px){.pattern-evidence figure{grid-template-columns:minmax(0,1fr);gap:12px}.pattern-evidence img{max-width:338px}}