.article-page .free-play-controls button[aria-pressed=false]{background:var(--cf-color-surface);color:var(--cf-color-text-secondary);border-color:var(--cf-color-border-control)}.article-page .measurement-note{display:grid;grid-gap:var(--cf-space-150);gap:var(--cf-space-150)}.article-page .measurement-note span{color:var(--cf-color-text-secondary)}.article-page .demo-box{overflow:hidden;max-height:calc(var(--cf-space-800)*4);background:var(--cf-color-surface);border:1px dashed var(--cf-color-border);border-radius:var(--cf-radius-300);color:var(--cf-color-text)}.article-page .demo-box p{margin:0 0 var(--cf-space-250)}.article-page .demo-box p:last-child{margin-bottom:0}.article-page .demo-box.has-padding{padding:var(--cf-space-400)}.article-page .demo-box.has-border{border-width:var(--cf-space-100);border-style:solid;border-color:var(--cf-color-primary)}.article-page .demo-box.has-overflow{overflow-y:auto}.article-page .metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--cf-space-800) * 3),1fr));grid-gap:var(--cf-space-200);gap:var(--cf-space-200);margin:var(--cf-space-400) 0 0}.article-page .metric-grid div{display:grid;grid-gap:var(--cf-space-100);gap:var(--cf-space-100);padding:var(--cf-space-250);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-200);background:var(--cf-color-surface-raised)}.article-page .metric-grid dt{color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-200)}.article-page .metric-grid dd{margin:0;font-weight:var(--cf-font-weight-bold);color:var(--cf-color-text)}.article-page .rect-target{display:grid;place-items:center;inline-size:calc(var(--cf-space-800)*5);min-block-size:calc(var(--cf-space-800)*2);margin:var(--cf-space-500) auto;padding:var(--cf-space-300);border:1px solid var(--cf-color-primary);border-radius:var(--cf-radius-300);background:var(--cf-color-surface-raised);color:var(--cf-color-text);transform-origin:center}.article-page .rect-target.is-scaled{transform:scale(1.12)}.article-page .demo-list,.article-page .event-scroll-box{max-height:calc(var(--cf-space-800)*5);overflow-y:auto;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-300);background:var(--cf-color-surface)}.article-page .demo-list-item,.article-page .event-scroll-box p{margin:0;padding:var(--cf-space-300);border-bottom:1px solid var(--cf-color-border);color:var(--cf-color-text)}.article-page .demo-list-item:nth-child(2n),.article-page .event-scroll-box p:nth-child(2n){background:var(--cf-color-surface-raised)}.article-page .point-area{position:relative;min-height:calc(var(--cf-space-800)*7);overflow:hidden;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-300);background:var(--cf-color-surface)}.article-page .point-area button,.article-page .point-card{position:absolute;display:grid;place-items:center;min-inline-size:calc(var(--cf-space-800)*4);min-block-size:calc(var(--cf-space-800)*2);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-300);background:var(--cf-color-surface-raised);color:var(--cf-color-text)}.article-page .point-card-a{inset-block-start:var(--cf-space-500);inset-inline-start:var(--cf-space-500)}.article-page .point-card-b{inset-block-start:calc(var(--cf-space-800)*2);inset-inline-start:calc(var(--cf-space-800)*3);background:var(--cf-color-primary-subtle)}.article-page .point-area button{inset-block-start:calc(var(--cf-space-800)*4);inset-inline-start:calc(var(--cf-space-800)*5)}@media(max-width:560px){.article-page .free-play-controls{flex-wrap:wrap}.article-page .metric-grid{grid-template-columns:1fr}.article-page .point-area button,.article-page .point-card{min-inline-size:calc(var(--cf-space-800)*3)}}