.skills-module { max-width: 1240px; margin: 0 auto; }
.skills-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 36px; border-radius: 20px; background: color-mix(in srgb, var(--accent, #1f6575) 9%, var(--card, #fff)); margin-bottom: 24px; }
.skills-hero h1 { margin: 10px 0; font-size: clamp(28px, 4vw, 40px); }
.skills-count, .skills-badges span { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 24px; padding: 7px 12px; font-size: 12px; }
.skills-count { white-space: nowrap; }
.skills-format-grid, .skills-downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.skills-format-grid article, .skills-card, .skills-detail, .skills-install { border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 14px; padding: 24px; background: var(--card, #fff); }
.skills-format-grid h2 { margin-top: 0; font-size: 18px; }
.skills-module p, .skills-module li { line-height: 1.8; }
.skills-toolbar { display: flex; gap: 16px; align-items: center; margin: 28px 0 20px; flex-wrap: wrap; }
.skills-toolbar input { flex: 1; min-width: 180px; max-width: 460px; }
.skills-toolbar label { font-weight: 600; }
#skillsState { font-size: 13px; }
.skills-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.skills-card { display: flex; flex-direction: column; gap: 12px; }
.skills-number { font-size: 12px; letter-spacing: 2px; opacity: .6; }
.skills-card h2 { margin: 0; font-size: 19px; }
.skills-card p { margin: 0; flex: 1; }
.skills-card button { margin-top: 10px; width: 100%; }
.skills-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.skills-detail { margin-top: 24px; scroll-margin-top: 20px; }
.skills-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.skills-detail-head h2 { margin: 8px 0; }
.skills-detail h3 { margin-top: 24px; }
.skills-detail dl { display: grid; grid-template-columns: 60px 1fr; gap: 10px; }
.skills-detail dd { margin: 0; overflow-wrap: anywhere; }
.skills-detail dt { font-weight: 600; }
.skills-detail blockquote { margin: 16px 0; padding: 16px 20px; border-left: 3px solid var(--accent, #1f6575); background: color-mix(in srgb, currentColor 4%, transparent); line-height: 1.8; }
.skills-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: color-mix(in srgb, currentColor 5%, transparent); border-radius: 8px; }
.skills-downloads { margin-top: 22px; }
.skills-downloads small { display: block; padding: 10px 0; opacity: .7; }
.skills-downloads code { display: block; overflow-wrap: anywhere; font-size: 11px; padding-top: 8px; }
.skills-footnote, .skills-compat { font-size: 13px; opacity: .8; }
.skills-install { margin-top: 24px; }
.skills-install summary, .skills-downloads summary { cursor: pointer; }
.skills-install article { padding: 12px 0; }
.skills-empty { grid-column: 1 / -1; padding: 30px; text-align: center; }
:root[data-theme="dark"] .skills-module { --card: #192331; }
:root[data-theme="dark"] .skills-module button { color: #092e32; }
@media (max-width: 1000px) { .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .skills-grid, .skills-format-grid, .skills-downloads { grid-template-columns: 1fr; } .skills-hero { align-items: flex-start; flex-direction: column; padding: 24px; } .skills-toolbar input { max-width: none; } }