/* Agent Skill download and installation. Shared colors follow the site theme. */
.skill-hero { padding: calc(var(--header-h) + 76px) 0 76px; background: radial-gradient(ellipse at 76% 20%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%); }
.skill-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: center; }
.skill-hero h1 { margin: 22px 0; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.22; letter-spacing: -0.045em; color: var(--ink-strong); }
.skill-lead { color: var(--muted-strong); font-size: 17px; line-height: 1.9; }
.skill-badges, .skill-hero-actions, .skill-download-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.skill-badges { margin-top: 23px; gap: 8px; }
.skill-badges span { color: var(--muted-strong); padding: 5px 10px; font-size: 11px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); }
.skill-hero-actions { margin-top: 30px; }
.skill-download-links { margin-top: 19px; gap: 18px; font-size: 12px; color: var(--muted-strong); }
.skill-download-links a:hover, .skill-source-links a:hover { color: var(--primary); }
.skill-package { padding: 26px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); transform: rotate(1deg); }
.skill-package-head { display: flex; align-items: center; gap: 10px; color: var(--muted-strong); font: 13px var(--font-mono); padding-bottom: 25px; }
.skill-package-head .icon { color: var(--primary); }
.skill-package-tag { margin-left: auto; padding: 5px 8px; border-radius: 5px; background: var(--primary-soft); color: var(--primary); font-size: 9px; letter-spacing: .09em; }
.skill-file { display: flex; align-items: center; gap: 15px; min-height: 88px; border-top: 1px solid var(--line); }
.skill-file > .icon, .skill-file-glyph { color: var(--muted); flex-shrink: 0; width: 26px; }
.skill-file-glyph { color: var(--primary); font: 700 16px var(--font-mono); }
.skill-file strong { display: block; font: 13px var(--font-mono); color: var(--ink-strong); }
.skill-file div > span { display: block; margin-top: 7px; font-size: 11px; color: var(--muted); }
.skill-file-pill { margin-left: auto; color: var(--teal-strong); border-radius: 5px; background: var(--teal-soft); padding: 4px 7px; white-space: nowrap; font-size: 10px; }
.skill-package-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 11px; color: var(--muted); }
.skill-live-dot { width: 6px; height: 6px; flex-shrink: 0; display: inline-block; border-radius: 50%; background: var(--teal); }
.skill-section { padding: 72px 0; scroll-margin-top: var(--header-h); }
.skill-section-head { max-width: 760px; margin-bottom: 32px; }
.skill-section h2 { margin: 14px 0; color: var(--ink-strong); font-size: clamp(27px, 3vw, 36px); letter-spacing: -.04em; line-height: 1.4; }
.skill-section-head > p, .skill-small { color: var(--muted); font-size: 13px; line-height: 1.9; }
.skill-install-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }
.skill-install-card, .skill-prompt-card { min-width: 0; padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: var(--surface); }
.skill-step-label { display: flex; align-items: center; gap: 10px; color: var(--ink-strong); font-size: 14px; font-weight: 700; }
.skill-step-label > span { font: 10px var(--font-mono); background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; }
.skill-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 12px; }
.skill-select-grid label { font-size: 12px; color: var(--muted-strong); }
.skill-select-grid select { display: block; width: 100%; min-height: 46px; margin-top: 9px; border: 1px solid var(--line-strong); background: var(--surface-soft); color: var(--ink); padding: 10px 12px; border-radius: var(--radius-sm); font: inherit; font-size: 13px; }
.skill-install-note { min-height: 3.8em; margin-bottom: 28px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.skill-install-card .skill-small { margin: 14px 0; font-size: 12px; }
.skill-command-box { overflow: hidden; border-radius: var(--radius-sm); background: var(--code-bg); color: var(--code-text); }
.skill-command-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--code-line); font: 11px var(--font-mono); color: #94a5c5; }
.skill-command-header button { border: 0; background: transparent; color: #dbe5ff; cursor: pointer; font: 11px var(--font-sans); min-height: 32px; padding: 5px 0 5px 12px; }
.skill-command-box pre { padding: 20px 17px; font-size: 12px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.skill-command-header .icon { width: 12px; height: 12px; }
.skill-advanced { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted-strong); }
.skill-advanced summary, .skill-faq-list summary { cursor: pointer; color: var(--ink-soft); line-height: 1.7; padding: 5px 0; }
.skill-advanced p { margin: 14px 0; line-height: 1.9; }
.skill-advanced pre { padding: 13px; border-radius: 7px; background: var(--surface-soft); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.skill-prompt-card { background: linear-gradient(145deg, var(--surface-tint), var(--surface)); }
.skill-prompt-meta { display: flex; align-items: center; gap: 7px; margin-top: 28px; color: var(--muted); font-size: 11px; }
.skill-prompt { margin: 16px 0 22px; color: var(--ink-soft); font-size: 15px; line-height: 2; overflow-wrap: anywhere; }
.skill-prompt-card .btn { font-size: 12px; }
.skill-prompt-divider { height: 1px; background: var(--line-strong); margin: 30px 0 24px; }
.skill-prompt-card h3 { color: var(--ink-strong); font-size: 13px; }
.skill-knowledge { list-style: none; padding: 0; display: grid; gap: 12px; margin: 19px 0 24px; font-size: 12px; color: var(--muted-strong); }
.skill-knowledge li::before { content: '✓'; color: var(--teal-strong); margin-right: 9px; }
.skill-text-link { color: var(--primary); font-size: 12px; }
.skill-compat-section { background: var(--bg-soft); border-block: 1px solid var(--line); }
.skill-compat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.skill-compat-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 30px; }
.skill-compat-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); }
.skill-compat-icon--teal { background: var(--teal-soft); color: var(--teal-strong); }
.skill-compat-card h3 { margin: 19px 0 12px; font-size: 17px; color: var(--ink-strong); }
.skill-compat-card p { font-size: 13px; color: var(--muted-strong); line-height: 1.9; overflow-wrap: anywhere; }
.skill-agent-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 23px; }
.skill-agent-tags span { border: 1px solid var(--line); border-radius: 5px; padding: 5px 9px; color: var(--muted-strong); font-size: 10px; }
.skill-compat-note { margin-top: 23px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.skill-source-links { display: flex; flex-wrap: wrap; gap: 10px 21px; margin-top: 20px; font-size: 11px; color: var(--muted-strong); }
.skill-source-links > span { color: var(--muted); }
.skill-faq-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; }
.skill-faq-grid h2 { max-width: 310px; }
.skill-faq-list details { padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.skill-faq-list details:first-child { padding-top: 0; }
.skill-faq-list summary { font-size: 14px; }
.skill-faq-list p { padding: 12px 0 4px; font-size: 13px; line-height: 1.9; color: var(--muted); overflow-wrap: anywhere; }
.skill-faq-list a { color: var(--primary); }
.skill-noscript { padding: 16px 0; color: var(--muted-strong); font-size: 13px; line-height: 1.9; }
.skill-section code { color: var(--primary); font-size: .93em; overflow-wrap: anywhere; }
@media (max-width: 1024px) { .skill-hero-grid { gap: 32px; } .skill-package { padding: 22px; } .skill-file-pill { display: none; } .skill-install-card, .skill-prompt-card { padding: 24px; } .skill-faq-grid { gap: 32px; } }
@media (max-width: 720px) { .skill-hero { padding: calc(var(--header-h) + 40px) 0 44px; } .skill-hero-grid, .skill-install-grid, .skill-compat-grid, .skill-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .skill-package { transform: none; margin-top: 12px; } .skill-hero h1 { font-size: 40px; } .skill-lead { font-size: 15px; } .skill-section { padding: 48px 0; } .skill-install-card, .skill-prompt-card, .skill-compat-card { padding: 24px 20px; } .skill-hero-actions .btn { min-height: 48px; padding-inline: 17px; font-size: 13px; } .skill-select-grid { gap: 12px; } .skill-faq-grid h2 { max-width: none; } .skill-install-note { min-height: 0; } .skill-source-links { line-height: 1.8; } }
@media (max-width: 380px) { .skill-hero h1 { font-size: 34px; } .skill-select-grid { grid-template-columns: 1fr; } .skill-desktop-break { display: none; } .skill-hero-actions { align-items: stretch; flex-direction: column; } }