/* One real-font specimen teaches position, then spacing. */
.usage-guide { padding-block:64px; }
.usage-heading { display:flex; flex-direction:column; align-items:center; text-align:center; margin:0 auto; max-width:760px; }
.usage-heading>div { display:flex; flex-direction:column; align-items:center; width:100%; }
.usage-heading h2,.usage-heading p,.usage-heading a { text-align:center; margin-inline:auto; }
.usage-heading h2 { font-size:clamp(44px,5vw,72px); line-height:.96; }
.usage-heading p { font-size:18px; line-height:1.6; margin:18px auto 0; }
.usage-heading a { margin-top:12px; font-size:13px; }
.usage-stage { display:grid; place-items:center; height:300px; overflow:hidden; }
.usage-composition { --usage-clear-space:18px; position:relative; display:flex; align-items:flex-start; width:max-content; gap:0; height:1.2em; font-size:120px; line-height:1; }
.usage-symbol { position:relative; display:block; flex:none; top:.09em; width:86px; height:115px; font-size:1em; }
.usage-symbol svg { display:block; width:100%; height:100%; }
#guidelines .usage-symbol { width:86px; height:115px; }
#guidelines .usage-symbol svg { width:100%; height:100%; }
.usage-amount { display:block; flex:none; width:var(--amount-width,1.7em); overflow:hidden; font-size:1em; letter-spacing:-.03em; transition:width 1.1s cubic-bezier(.65,0,.25,1),opacity 1.1s; }
.usage-amount>span { display:block; width:max-content; white-space:nowrap; transform:translateY(0); transition:transform 1.1s cubic-bezier(.65,0,.25,1); }
.usage-gap { position:relative; order:1; align-self:flex-end; flex:none; box-sizing:border-box; width:var(--usage-clear-space); height:.13em; margin-bottom:.13em; border-bottom:1px solid #C5ACD9; opacity:1; transition:width 1.1s cubic-bezier(.65,0,.25,1),opacity 1.1s; }
.usage-symbol { order:0; }
.usage-amount { order:2; }
.usage-motion[data-step="symbol"] .usage-amount { opacity:0; width:0; }
.usage-motion[data-step="symbol"] .usage-amount>span { transform:translateY(.22em); }
.usage-motion[data-step="symbol"] .usage-gap { width:0; opacity:0; }
.usage-motion[data-step="position"] .usage-gap { width:.08em; opacity:0; }
.usage-steps { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:600px; margin:auto; }
.usage-steps button { text-align:left; background:none; color:var(--ink-muted); border:0; border-top:1px solid var(--rule); border-radius:0; padding:20px 24px; }
.usage-steps button[aria-pressed="true"] { border-top-color:#C5ACD9; color:var(--ink); }
.usage-steps strong { display:block; font-size:20px; font-weight:500; margin-bottom:6px; }
.usage-steps span { font-size:15px; line-height:1.5; }
.usage-replay { display:block; margin:22px auto 0; padding:10px; min-height:44px; border:0; background:none; color:var(--ink-muted); font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.usage-note { margin:24px auto 0; max-width:78ch; font-size:12px; text-align:center; }
@media(max-width:809px) {
 .usage-guide { padding-block:48px; }
 .usage-heading { grid-template-columns:1fr; gap:20px; }
 .usage-heading h2 { font-size:44px; }
 .usage-heading p { font-size:16px; }
 .usage-stage { height:210px; }
 .usage-composition { --usage-clear-space:12px; font-size:clamp(58px,16vw,90px); }
 #guidelines .usage-symbol { width:6vw; height:8vw; }
 .usage-steps { gap:20px; }
 .usage-steps button { padding:16px; }
 .usage-steps strong { font-size:18px; }
 .usage-steps span { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
 .usage-composition,.usage-symbol,.usage-amount,.usage-amount>span,.usage-gap { transition:none; }
}