/* Skills extends the locked MiAI tokens and ruled-row patterns. */
.skills-serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
.skills-library { padding-top: clamp(60px, 8vw, 110px); }
.skill-list { margin-top: clamp(70px, 9vw, 130px); border-top: 1px solid var(--line); }
.skill-row { padding: clamp(42px, 6vw, 80px) 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 6vw, 90px); border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.skill-title h3 { margin-top: 28px; max-width: 500px; font-size: clamp(2.5rem, 4.6vw, 4.8rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.skill-intro { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.4; letter-spacing: -.025em; }
.skill-body dl { margin: 34px 0; }
.skill-body dt { margin-top: 22px; font-weight: 600; }
.skill-body dd { margin: 8px 0 0; color: var(--muted); }
.skill-example { color: var(--muted); }
.skill-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 32px 0; }
.skill-body details { border-top: 1px solid var(--line); padding: 18px 0; }
.skill-body summary { cursor: pointer; font-weight: 500; }
.skill-body details p { margin-top: 20px; color: var(--muted); }
.skill-body details blockquote { margin-top: 20px; padding-left: 20px; border-left: 1px solid var(--blue); }
.skill-body details a { display: inline-block; margin-top: 20px; }
.setup-card { min-height: 0; }
.setup-card ol { margin: 36px 0 0; padding-left: 24px; }
.setup-card li { padding-left: 6px; margin-bottom: 22px; }
.setup-card blockquote { font-size: 1.1rem; line-height: 1.55; letter-spacing: 0; margin-top: 18px; padding-left: 20px; border-left: 1px solid var(--blue); }
.setup-card > p { padding-top: 30px; }
.setup-note { max-width: 760px; margin-top: 40px; color: var(--muted); }
.setup-note a { display: inline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skills-hero h1 { overflow-wrap: normal; }
#library, #how-to-use { scroll-margin-top: 78px; }
@media (max-width: 900px) {
  .skill-row { grid-template-columns: 1fr; }
  .skill-title h3 { max-width: 650px; }
}
@media (max-width: 650px) {
  .skill-actions { align-items: flex-start; flex-direction: column; }
  #library, #how-to-use { scroll-margin-top: 68px; }
}