/**
 * Light-surface components only.
 */
@layer components {
    .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.05em;
        color: var(--color-on-primary);
        background-color: var(--color-accent-ink);
        border: none;
        border-radius: var(--radius-md);
        padding: 11px var(--spacing-2xl);
        min-height: 42px;
        box-shadow: var(--shadow-button);
        cursor: pointer;
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            background 0.2s ease;
    }

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-button-hover);
        background-color: var(--color-accent-ink);
    }

    .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgb(38 112 232 / 0.14);
        background-color: var(--color-accent-ink);
    }

    @media (width < 479px) {
        .btn-primary {
            min-height: 44px;
        }
    }

    .btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.05em;
        color: var(--color-accent-ink);
        background-color: var(--color-canvas);
        border: none;
        border-radius: var(--radius-md);
        padding: 10px var(--spacing-2xl);
        min-height: 42px;
        box-shadow: var(--shadow-field);
        cursor: pointer;
        transition:
            background-color 0.2s ease,
            box-shadow 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
    }

    .btn-outline:hover {
        background-color: var(--color-accent-wash);
        box-shadow: var(--shadow-surface);
        transform: translateY(-1px);
    }

    .btn-ghost {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.04em;
        color: var(--color-accent-soft);
        background: transparent;
        border: none;
        border-radius: var(--radius-md);
        padding: 10px var(--spacing-lg);
        min-height: 40px;
        cursor: pointer;
        transition:
            background-color 0.2s ease,
            color 0.2s ease;
    }

    .btn-ghost:hover {
        color: var(--color-accent-ink);
        background-color: var(--color-accent-wash);
    }

    @media (prefers-reduced-motion: reduce) {
        .btn-primary:hover,
        .btn-outline:hover {
            transform: none;
        }
    }

    .card-on-light {
        border-radius: var(--radius-md);
        padding: var(--spacing-2xl);
        background-color: var(--color-canvas);
        color: var(--color-ink);
        border: none;
        box-shadow: var(--shadow-surface);
        transition: box-shadow 0.2s ease;
    }

    .card-on-light:hover {
        box-shadow: var(--shadow-surface-hover);
    }

    .panel-on-light {
        border-radius: var(--radius-sm);
        border: none;
        background-color: var(--color-canvas);
        box-shadow: var(--shadow-surface);
    }

    .stat-tile {
        border-radius: var(--radius-sm);
        padding: var(--spacing-3xl);
        background-color: var(--color-canvas);
        color: var(--color-ink);
        border: none;
        box-shadow: var(--shadow-surface);
    }

    .code-panel {
        border-radius: var(--radius-sm);
        padding: var(--spacing-2xl);
        background-color: var(--color-canvas-muted);
        color: var(--color-ink-soft);
        border: none;
        box-shadow: var(--shadow-field);
        font-family: var(--font-mono-caps);
        font-size: 12px;
        line-height: 1.7;
    }

    .input-text {
        @apply type-body-md w-full;
        background-color: var(--color-canvas);
        color: var(--color-ink);
        border: none;
        border-radius: var(--radius-md);
        padding: var(--spacing-md) var(--spacing-lg);
        box-shadow: var(--shadow-field);
        transition: box-shadow 0.2s ease;
    }

    .input-text:focus {
        outline: none;
        box-shadow: var(--shadow-field-focus);
    }

    .badge-neutral {
        @apply type-caption-strong inline-flex items-center;
        background-color: var(--color-accent-wash);
        color: var(--color-accent);
        border: none;
        border-radius: var(--radius-sm);
        padding: var(--spacing-xxs) var(--spacing-sm);
    }

    .contact-layout {
        display: grid;
        gap: var(--spacing-xl);
        align-items: stretch;
    }

    @media (width >= 992px) {
        .contact-layout {
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, 360px);
            gap: var(--spacing-2xl);
        }
    }

    .contact-channels {
        display: grid;
        gap: var(--spacing-lg);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    @media (width >= 640px) {
        .contact-channels {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (width >= 992px) {
        .contact-channels {
            grid-template-columns: 1fr;
        }
    }

    .contact-channels__item {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        min-width: 0;
    }

    .contact-channels__item.card-on-light:hover {
        box-shadow: var(--shadow-surface-hover);
    }

    .contact-business {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        min-width: 0;
        padding: var(--spacing-lg);
    }

    .contact-business__eyebrow {
        margin: 0;
        color: var(--color-accent);
    }

    .contact-business__panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-xl) var(--spacing-lg);
        border-radius: var(--radius-md);
        background: linear-gradient(
            165deg,
            rgb(22 32 48) 0%,
            rgb(14 22 34) 100%
        );
        color: rgb(248 250 252);
        text-align: center;
        box-shadow: var(--shadow-surface-hover);
    }

    .contact-business__title {
        margin: 0;
        font-size: 1.125rem;
        letter-spacing: 0.04em;
    }

    .contact-business__lead {
        margin: 0;
        color: rgb(203 213 225);
        line-height: 1.65;
        max-width: 16rem;
    }

    .contact-business__qr-wrap {
        padding: var(--spacing-sm);
        border-radius: var(--radius-sm);
        background-color: rgb(255 255 255);
        line-height: 0;
    }

    .contact-business__qr {
        width: 200px;
        height: auto;
        max-width: 100%;
    }

    .contact-business__phone {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-xs);
        color: rgb(94 234 212);
    }

    .contact-business__phone:hover {
        color: rgb(153 246 228);
    }

    .contact-business__phone-icon {
        font-size: 1rem;
        line-height: 1;
    }

    .page-hero__back {
        transition: color 0.15s ease;
    }

    .page-hero__back:hover {
        color: var(--color-ink);
    }

    .page-hero__copy {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
        width: 100%;
        max-width: var(--width-container);
        min-width: 0;
    }

    .page-hero__eyebrow {
        display: inline-flex;
        width: fit-content;
        max-width: 100%;
    }

    .page-hero__title {
        margin: 0;
        max-width: 20em;
        text-wrap: wrap;
        word-break: normal;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .page-hero__lead {
        margin: 0;
        max-width: 42rem;
        text-wrap: wrap;
        word-break: normal;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .news-list-card {
        transition: box-shadow 0.2s ease;
    }

    .news-list-card:hover {
        box-shadow: var(--shadow-surface-hover);
    }

    .news-list-card__media-link {
        flex-shrink: 0;
    }

    .news-list-card:not(.news-list-card--primary):not(.news-list-card--secondary)
        .news-list-card__media-link {
        aspect-ratio: 16 / 9;
        width: 100%;
    }

    .news-list-card:not(.news-list-card--primary):not(.news-list-card--secondary)
        .news-list-card__body {
        gap: var(--spacing-md);
        padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);
    }

    .news-home-preview {
        display: grid;
        gap: var(--spacing-lg);
        width: 100%;
    }

    .news-home-preview .news-list-card.card-on-light {
        padding: 0;
    }

    .news-home-preview .news-list-card__media-link {
        background-color: transparent;
        border-radius: 0;
    }

    @media (width >= 768px) {
        .news-home-preview {
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
            align-items: stretch;
            gap: var(--spacing-md);
        }
    }

    .news-home-preview__side {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        min-width: 0;
    }

    @media (width >= 768px) {
        .news-home-preview__side {
            height: 100%;
            min-height: 0;
        }

        .news-home-preview__side > .news-list-card--secondary {
            flex: 1 1 0;
            min-height: 0;
        }
    }

    @media (width >= 768px) {
        .news-home-preview > .news-list-card--primary {
            height: 100%;
        }
    }

    .news-list-card--primary .news-list-card__media-link {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
        width: 100%;
        height: auto;
        max-height: none;
    }

    .news-list-card--primary .news-list-card__body {
        flex: 1 1 auto;
        min-height: 0;
        padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
    }

    .news-list-card--primary .news-list-card__summary--clamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 0;
        line-height: 1.6;
    }

    .news-list-card--secondary {
        flex-direction: row;
        align-items: stretch;
        min-height: 0;
    }

    .news-list-card--secondary .news-list-card__media-link {
        position: relative;
        flex: 0 0 34%;
        width: auto;
        max-width: 148px;
        min-width: 96px;
        aspect-ratio: unset;
        height: auto;
        align-self: stretch;
        min-height: 100%;
    }

    @media (width >= 480px) {
        .news-list-card--secondary .news-list-card__media-link {
            flex-basis: 38%;
            max-width: 160px;
            min-width: 108px;
        }
    }

    .news-list-card--secondary .news-list-card__body {
        flex: 1;
        min-width: 0;
        justify-content: center;
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md)
            var(--spacing-md);
    }

    .news-list-card--secondary .news-list-card__title--compact {
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .news-list-card--secondary .news-list-card__foot {
        margin-top: auto;
    }

    .news-detail-layout {
        width: 100%;
    }

    .news-detail-cover {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        border-radius: var(--radius-md);
        background-color: var(--color-canvas-muted);
        box-shadow: var(--shadow-surface-hover);
        aspect-ratio: 16 / 9;
        min-height: 200px;
    }

    @media (width >= 768px) {
        .news-detail-cover {
            aspect-ratio: 21 / 9;
            min-height: 320px;
        }
    }

    @media (width >= 992px) {
        .news-detail-cover {
            aspect-ratio: 2.4 / 1;
            min-height: 420px;
        }
    }

    .models-square-grid {
        display: grid;
        gap: var(--spacing-xl);
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    @media (width >= 768px) {
        .models-square-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (width >= 992px) {
        .models-square-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    .models-square-item {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        min-width: 0;
        width: 100%;
    }

    .models-square-item__meta {
        margin: 0;
        white-space: normal;
        word-break: normal;
    }

    .models-square-filters__chip {
        @apply type-caption-strong;
        white-space: nowrap;
        padding: var(--spacing-xs) var(--spacing-md);
        border-radius: var(--radius-full);
        border: none;
        background-color: var(--color-canvas);
        color: var(--color-body);
        box-shadow: var(--shadow-field);
        cursor: pointer;
        transition:
            background-color 0.15s ease,
            color 0.15s ease,
            box-shadow 0.15s ease;
    }

    .models-square-filters__chip:hover {
        color: var(--color-ink);
        box-shadow: var(--shadow-surface);
    }

    .models-square-filters__chip.is-active {
        background-color: var(--color-accent-wash);
        color: var(--color-accent);
        box-shadow: var(--shadow-surface);
    }

    .article-prose {
        width: 100%;
        max-width: 42rem;
        min-width: 0;
        padding-bottom: var(--spacing-2xl);
    }

    .model-library-card {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border-radius: var(--radius-md);
        padding: var(--spacing-2xl);
        background-color: var(--color-canvas);
        border: none;
        box-shadow: var(--shadow-surface);
        gap: var(--spacing-lg);
        writing-mode: horizontal-tb;
        text-orientation: mixed;
    }

    .model-library-card__corner-badge {
        position: absolute;
        top: 14px;
        right: -32px;
        z-index: 2;
        width: 104px;
        padding: 4px 0;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-align: center;
        pointer-events: none;
        transform: rotate(42deg);
        transform-origin: center center;
        box-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
    }

    .model-library-card__corner-badge--tem {
        color: var(--color-on-primary);
        background: linear-gradient(
            135deg,
            var(--color-primary) 0%,
            var(--color-accent-ink-hover) 100%
        );
        box-shadow: 0 2px 8px rgb(38 112 232 / 0.35);
    }

    .model-library-card__corner-badge--deal {
        color: #fff;
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        box-shadow: 0 2px 8px rgb(234 88 12 / 0.35);
    }

    .model-marquee-stack {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
        margin-top: var(--spacing-sm);
    }

    .model-marquee {
        width: 100%;
    }

    .model-marquee__viewport {
        overflow: hidden;
        width: 100%;
        mask-image: linear-gradient(
            90deg,
            transparent 0%,
            #000 6%,
            #000 94%,
            transparent 100%
        );
    }

    .model-marquee__track {
        display: flex;
        width: max-content;
        will-change: transform;
    }

    .model-marquee--left .model-marquee__track {
        animation: model-marquee-left 48s linear infinite;
    }

    .model-marquee--right .model-marquee__track {
        animation: model-marquee-right 52s linear infinite;
    }

    .model-marquee__group {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: var(--spacing-lg);
        margin: 0;
        padding: var(--spacing-sm) var(--spacing-md);
        list-style: none;
    }

    .model-marquee__chip {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-full);
        background-color: var(--color-canvas);
        border: 1px solid var(--color-border-light);
        box-shadow: var(--shadow-field);
    }

    .model-marquee__icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--radius-full);
        background-color: var(--color-canvas-muted);
        overflow: hidden;
    }

    .model-marquee__logo {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .model-marquee__icon-fallback {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        background: conic-gradient(
            from 200deg,
            rgb(59 158 255),
            rgb(52 211 153),
            rgb(167 139 250),
            rgb(59 158 255)
        );
    }

    .model-marquee__name {
        max-width: 14rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .model-library-card__head {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-md);
        min-width: 0;
    }

    .model-library-card__title {
        flex: 1;
        min-width: 0;
        margin: 0;
        word-break: normal;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .model-library-card__icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-full);
        background-color: var(--color-canvas-muted);
        border: none;
        box-shadow: var(--shadow-field);
        overflow: hidden;
    }

    .model-library-card__logo {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .model-library-card__tag--featured {
        background-color: rgb(74 101 130 / 0.12);
        color: var(--color-accent-ink);
    }

    .model-library-card__icon-mark {
        width: 14px;
        height: 14px;
        border-radius: 3px;
        background: conic-gradient(
            from 200deg,
            rgb(59 158 255),
            rgb(52 211 153),
            rgb(167 139 250),
            rgb(251 113 133),
            rgb(59 158 255)
        );
    }

    .model-library-card__desc {
        margin: 0;
        line-height: 1.75;
        min-width: 0;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .model-library-card__tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .model-library-card__tag {
        @apply type-caption-strong inline-flex items-center;
        padding: var(--spacing-xxs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        background-color: var(--color-accent-wash);
        color: var(--color-accent);
        border: none;
    }

    .model-library-card__meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-lg);
        padding-top: var(--spacing-lg);
        margin-top: var(--spacing-xs);
        width: 100%;
    }

    @media (width >= 480px) {
        .model-library-card__meta {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .model-library-card__meta-cell {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        min-width: 0;
        white-space: normal;
        word-break: normal;
    }

    .model-library-card__meta-cell .type-body-md-strong {
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .model-library-card__meta-value {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-sm);
        margin: 0;
        min-width: 0;
    }

    .model-library-card__meta-bar {
        flex-shrink: 0;
        width: 10px;
        height: 3px;
        border-radius: var(--radius-xs);
        background-color: var(--color-nav-axis);
    }

    .agent-pillar-tile {
        border-radius: var(--radius-sm);
        padding: var(--spacing-2xl);
        background: linear-gradient(
            145deg,
            rgb(158 178 212 / 0.1),
            rgb(158 178 212 / 0.04)
        );
        border: none;
        color: var(--color-ink);
        box-shadow: var(--shadow-surface);
    }

    .agent-skill-agents {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .agent-skill-agents__chip {
        @apply type-caption-strong;
        display: inline-flex;
        align-items: center;
        padding: var(--spacing-xs) var(--spacing-md);
        border-radius: var(--radius-full);
        background-color: var(--color-canvas);
        color: var(--color-accent-ink);
        box-shadow: var(--shadow-field);
    }

    .agent-skill-soon-banner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-md);
        margin: 0 0 var(--spacing-xl);
        padding: var(--spacing-md) var(--spacing-lg);
        border-radius: var(--radius-sm);
        background: linear-gradient(
            90deg,
            rgb(158 178 212 / 0.2) 0%,
            rgb(91 142 196 / 0.12) 100%
        );
        box-shadow: var(--shadow-field);
    }

    .agent-skill-soon-banner__label {
        @apply type-caption-strong;
        flex-shrink: 0;
        padding: var(--spacing-xxs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        background-color: var(--color-accent-wash);
        color: var(--color-accent);
    }

    .agent-skill-soon-banner__text {
        margin: 0;
        flex: 1;
        min-width: 12rem;
    }

    .btn-primary--coming-soon {
        cursor: not-allowed;
        opacity: 0.72;
        transform: none !important;
        box-shadow: var(--shadow-soft) !important;
        gap: var(--spacing-sm);
    }

    .btn-primary--coming-soon:hover {
        transform: none;
        box-shadow: var(--shadow-soft) !important;
    }

    .btn-primary__soon-tag {
        @apply type-caption-strong;
        padding: 2px var(--spacing-sm);
        border-radius: var(--radius-xs);
        background-color: rgb(255 255 255 / 0.22);
        color: inherit;
        letter-spacing: 0.06em;
    }

    .agent-main-panel {
        border-radius: var(--radius-md);
        border: none;
        background-color: var(--color-canvas);
        padding: var(--spacing-2xl);
        box-shadow: var(--shadow-surface-hover);
    }

    .agent-main-panel--soon {
        position: relative;
    }

    @media (width >= 992px) {
        .agent-main-panel {
            padding: var(--spacing-3xl);
        }
    }

    .agent-main-panel__grid {
        display: grid;
        gap: var(--spacing-3xl);
        align-items: stretch;
    }

    @media (width >= 992px) {
        .agent-main-panel__grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
            gap: var(--spacing-3xl);
        }
    }

    .agent-main-panel__copy {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--spacing-2xl);
        min-height: 100%;
    }

    .agent-main-panel__visual {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100%;
    }

    .agent-capability-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: var(--spacing-lg);
    }

    @media (width >= 768px) {
        .agent-capability-list {
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-xl) var(--spacing-2xl);
        }
    }

    .agent-capability-list__item {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .agent-flow-visual {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        height: 100%;
        align-content: center;
    }

    @media (width >= 768px) {
        .agent-flow-visual {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--spacing-md);
        }
    }

    .agent-flow-visual__step {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        min-width: 0;
    }

    @media (width >= 768px) {
        .agent-flow-visual__step:not(:last-child) {
            padding-right: var(--spacing-md);
        }
    }

    .agent-flow-visual__caption {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-inline: 2px;
    }

    .agent-mock-screen {
        flex: 1;
        border-radius: var(--radius-sm);
        border: none;
        background-color: var(--color-canvas-muted);
        overflow: hidden;
        box-shadow: var(--shadow-field);
    }

    .agent-mock-screen__chrome {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: var(--spacing-xs) var(--spacing-sm);
        background-color: var(--color-canvas);
        border-bottom: none;
    }

    .agent-mock-screen__dot {
        width: 6px;
        height: 6px;
        border-radius: var(--radius-full);
        background-color: var(--color-hairline);
    }

    .agent-mock-screen__title {
        margin-left: auto;
        color: var(--color-body-light);
        max-width: 55%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .agent-mock-screen__body {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        min-height: 72px;
    }

    .agent-mock-screen__lines {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: auto;
    }

    .agent-mock-screen__lines span {
        display: block;
        height: 6px;
        border-radius: var(--radius-xs);
        background-color: rgb(228 232 238 / 0.9);
        border: none;
    }

    .report-scenario-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
        border-radius: var(--radius-md);
        padding: var(--spacing-2xl);
        padding-left: calc(var(--spacing-2xl) + 6px);
        background-color: var(--color-canvas);
        color: var(--color-ink);
        border: none;
        box-shadow: var(--shadow-surface);
        transition: box-shadow 0.2s ease;
    }

    .report-scenario-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: var(--spacing-2xl);
        bottom: var(--spacing-2xl);
        width: 3px;
        border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
        background: linear-gradient(
            180deg,
            var(--color-nav-axis),
            rgb(158 178 212 / 0.25)
        );
    }

    .report-scenario-card:hover {
        box-shadow: var(--shadow-surface-hover);
    }

    .report-scenario-card__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--spacing-md);
    }

    .report-scenario-card__index {
        font-family: var(--font-mono-caps);
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.08em;
        color: var(--color-body-light);
    }

    .report-scenario-card__cta {
        margin-top: auto;
        padding-top: var(--spacing-lg);
    }

    .report-example-overlay {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-lg);
        background-color: rgb(20 20 20 / 0.32);
    }

    .report-example-dialog {
        max-width: min(680px, 100%);
        width: 100%;
        max-height: min(85vh, 720px);
        border: none;
        border-radius: var(--radius-md);
        background-color: var(--color-canvas-elevated);
        color: var(--color-ink);
        box-shadow: 0 16px 48px rgb(30 45 65 / 0.18);
    }

    .report-example-dialog__inner {
        display: flex;
        max-height: min(85vh, 720px);
        flex-direction: column;
        gap: 0;
    }

    .report-example-dialog__header {
        flex-shrink: 0;
        padding: var(--spacing-2xl);
        padding-bottom: var(--spacing-xl);
        background-color: var(--color-canvas-muted);
        border-bottom: none;
    }

    .report-example-dialog__body {
        overflow-y: auto;
        padding: var(--spacing-2xl);
        padding-right: calc(var(--spacing-2xl) - var(--spacing-xs));
    }

    .report-example-dialog__footer {
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        padding: var(--spacing-xl) var(--spacing-2xl);
        border-top: none;
        background-color: var(--color-canvas-muted);
    }

    .report-example-section {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        padding-block: var(--spacing-xl);
        border-top: none;
    }

    .report-example-section:first-child {
        padding-top: 0;
    }

    .report-example-section:last-child {
        padding-bottom: 0;
    }

    .report-example-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .report-example-list li {
        position: relative;
        padding-left: var(--spacing-lg);
        font-family: var(--font-display);
        font-size: 16px;
        line-height: 1.75;
        letter-spacing: 0.02em;
        color: var(--color-body);
    }

    .report-example-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.72em;
        width: 5px;
        height: 5px;
        border-radius: var(--radius-full);
        background-color: var(--color-nav-axis);
    }

    .report-example-list li:nth-child(4n + 1)::before {
        background-color: rgb(59 158 255);
    }

    .report-example-list li:nth-child(4n + 2)::before {
        background-color: rgb(52 211 153);
    }

    .report-example-list li:nth-child(4n + 3)::before {
        background-color: rgb(167 139 250);
    }

    .report-example-list li:nth-child(4n)::before {
        background-color: rgb(251 113 133);
    }

    .nav-float {
        position: fixed;
        top: var(--spacing-md);
        left: 0;
        right: 0;
        z-index: 50;
        box-sizing: border-box;
        width: 100%;
        padding-inline: var(--spacing-md);
        pointer-events: none;
        transition:
            top 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            padding-inline 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @media (width >= 768px) {
        .nav-float {
            top: var(--spacing-lg);
            padding-inline: var(--spacing-2xl);
        }
    }

    .nav-float--docked {
        top: 0;
        padding-inline: 0;
    }

    .nav-float-stack {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        pointer-events: auto;
    }

    .nav-float-rail {
        position: relative;
        display: flex;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        max-width: none;
        transition:
            gap 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            border-radius 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            background-color 0.38s ease;
    }

    @media (width >= 768px) {
        .nav-float-rail {
            gap: 8px;
        }
    }

    .nav-float--docked .nav-float-rail {
        gap: 0;
        border-radius: 0;
        background-color: rgb(255 255 255 / 0.94);
        backdrop-filter: blur(12px);
        box-shadow: var(--shadow-surface-hover);
        border-bottom: 1px solid var(--color-border-light);
    }

    .nav-axis {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        z-index: 0;
        height: 2px;
        background-color: var(--color-nav-axis);
        opacity: 1;
        pointer-events: none;
        transform: translateY(-50%);
        transition: opacity 0.28s ease;
    }

    .nav-float--docked .nav-axis {
        opacity: 0;
    }

    .nav-axis--desktop {
        display: none;
    }

    @media (width >= 992px) {
        .nav-axis--desktop {
            display: block;
        }
    }

    .nav-island {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        display: flex;
        height: 52px;
        min-height: 52px;
        align-items: center;
        background-color: rgb(255 255 255 / 0.92);
        backdrop-filter: blur(10px);
        border: none;
        border-radius: 12px;
        box-shadow: var(--shadow-surface-hover);
        transition:
            border-radius 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            background-color 0.38s ease;
    }

    .nav-float--docked .nav-island {
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
        backdrop-filter: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .nav-float,
        .nav-float-rail,
        .nav-island,
        .nav-axis {
            transition: none;
        }
    }

    .nav-island > * {
        position: relative;
        z-index: 1;
    }

    /* 仅用 rail 内一条横轴连线；card 边缘伪元素短线已去掉，避免与横轴叠成双線 */

    .nav-island-logo {
        flex: 1 1 auto;
        min-width: 0;
        padding-inline: 14px;
    }

    @media (width >= 768px) {
        .nav-island-logo {
            flex: 0 0 auto;
            padding-inline: 18px;
        }
    }

    @media (width >= 992px) {
        .nav-island-logo {
            padding-inline: 22px;
        }
    }

    .site-brand-logo {
        font-family: var(--font-serif);
        font-weight: bold;
        white-space: nowrap;
    }

    .nav-island-logo .site-brand-logo {
        font-size: 1.0625rem;
        line-height: 1;
        letter-spacing: 0.02em;
    }

    .site-brand-lockup {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        line-height: 1;
    }

    .site-brand-lockup__img {
        display: block;
        flex-shrink: 0;
        height: 2rem;
        width: auto;
        max-width: 2.75rem;
        object-fit: contain;
    }

    @media (width >= 768px) {
        .site-brand-lockup {
            gap: 0.625rem;
        }

        .site-brand-lockup__img {
            height: 2.25rem;
            max-width: 3rem;
        }
    }

    html[lang="zh-CN"] .site-brand-logo {
        font-feature-settings: "palt" 1;
        letter-spacing: 0.04em;
    }

    html[lang="zh-CN"] .nav-island-logo .site-brand-logo {
        letter-spacing: 0.03em;
        line-height: 1.12;
    }

    .nav-island-menu--desktop {
        display: none;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        padding-inline: 6px;
    }

    @media (width >= 992px) {
        .nav-island-menu--desktop {
            display: flex;
        }
    }

    .nav-island-menu__list {
        display: flex;
        height: 100%;
        width: 100%;
        align-items: stretch;
        justify-content: center;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-island-menu__list > li {
        display: flex;
        align-items: center;
    }

    .nav-island-menu__link {
        display: inline-flex;
        height: 100%;
        align-items: center;
        padding-inline: 12px;
        font-size: 13px;
        line-height: 1;
        letter-spacing: 0.02em;
        color: var(--color-body);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .nav-island-menu__link:hover {
        color: var(--color-accent-ink);
        text-decoration: none;
    }

    .nav-island-actions {
        flex-shrink: 0;
        gap: 4px;
        padding-inline: 6px;
    }

    @media (width >= 768px) {
        .nav-island-actions {
            gap: 6px;
            padding-inline: 8px;
        }
    }

    .nav-island-actions__service {
        display: none;
        padding: 0 12px;
        min-height: 36px;
        height: 36px;
        font-size: 13px;
    }

    @media (width >= 992px) {
        .nav-island-actions__service {
            display: inline-flex;
        }
    }

    .nav-island-actions .btn-primary,
    .nav-island-actions .btn-ghost,
    .nav-menu-toggle {
        min-height: 36px;
        height: 36px;
        padding: 0 12px;
        font-size: 13px;
        line-height: 1;
    }

    @media (width >= 768px) {
        .nav-island-actions .btn-primary,
        .nav-island-actions .btn-ghost {
            padding: 0 16px;
        }
    }

    .nav-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--color-accent-ink);
        background-color: var(--color-canvas-muted);
        border: none;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-field);
        cursor: pointer;
        transition:
            background-color 0.15s ease,
            box-shadow 0.15s ease;
    }

    .nav-menu-toggle:hover {
        background-color: var(--color-accent-wash);
        box-shadow: var(--shadow-surface);
    }

    @media (width >= 992px) {
        .nav-menu-toggle {
            display: none;
        }
    }

    .nav-mobile-drawer {
        display: none;
        border-radius: 12px;
        background-color: rgb(255 255 255 / 0.96);
        backdrop-filter: blur(12px);
        box-shadow: var(--shadow-surface-hover);
        padding: var(--spacing-md);
    }

    .nav-mobile-drawer.is-open {
        display: block;
    }

    @media (width >= 992px) {
        .nav-mobile-drawer {
            display: none !important;
        }
    }

    .nav-mobile-drawer__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .nav-mobile-drawer__link {
        display: block;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 15px;
        line-height: 1.4;
        letter-spacing: 0.02em;
        color: var(--color-ink);
        text-decoration: none;
        border-radius: var(--radius-sm);
        transition: background-color 0.15s ease;
    }

    .nav-mobile-drawer__link:hover {
        background-color: var(--color-accent-wash);
        text-decoration: none;
    }

    .nav-mobile-drawer__cta-row {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
        border-top: none;
        box-shadow: inset 0 1px 0 var(--color-hairline);
    }

    .btn-sm {
        min-height: 34px;
        padding: 7px var(--spacing-lg);
        font-size: 13px;
        border-radius: var(--radius-sm);
    }

    .btn-outline:disabled {
        color: var(--color-body-light);
        background-color: var(--color-canvas-muted);
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.7;
    }

    .btn-outline:disabled:hover {
        transform: none;
        background-color: var(--color-canvas-muted);
        box-shadow: none;
    }

    .skill-marketplace {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-3xl);
    }

    .skill-marketplace__toolbar {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        align-items: flex-start;
    }

    @media (width >= 768px) {
        .skill-marketplace__toolbar {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
    }

    .skill-marketplace__categories {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .skill-category-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        color: var(--color-body);
        background-color: var(--color-canvas);
        border: 1px solid var(--color-hairline);
        border-radius: var(--radius-full);
        padding: 8px var(--spacing-lg);
        cursor: pointer;
        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            border-color 0.2s ease;
    }

    .skill-category-chip:hover {
        color: var(--color-accent-ink);
        border-color: var(--color-accent-border);
    }

    .skill-category-chip--active {
        color: var(--color-on-primary);
        background-color: var(--color-ink);
        border-color: var(--color-ink);
    }

    .skill-category-chip--active:hover {
        color: var(--color-on-primary);
    }

    .skill-category-chip__emoji {
        font-size: 14px;
        line-height: 1;
    }

    .skill-category-chip__count {
        font-family: var(--font-mono-caps);
        font-size: 11px;
        font-weight: 500;
        color: inherit;
        opacity: 0.7;
        margin-left: var(--spacing-xxs);
    }

    .skill-marketplace__search {
        width: 100%;
        max-width: 280px;
    }

    @media (width < 768px) {
        .skill-marketplace__search {
            max-width: 100%;
        }
    }

    .skill-search-input {
        width: 100%;
        font-family: var(--font-display);
        font-size: 14px;
        color: var(--color-ink);
        background-color: var(--color-canvas);
        border: 1px solid var(--color-hairline);
        border-radius: var(--radius-md);
        padding: 9px var(--spacing-lg);
        min-height: 38px;
        box-shadow: var(--shadow-field);
        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .skill-search-input::placeholder {
        color: var(--color-body-light);
    }

    .skill-search-input:focus {
        outline: none;
        border-color: var(--color-accent-border);
        box-shadow: var(--shadow-field-focus);
    }

    .skill-marketplace__grid {
        display: grid;
        gap: var(--spacing-xl);
        grid-template-columns: 1fr;
    }

    @media (width >= 768px) {
        .skill-marketplace__grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (width >= 1024px) {
        .skill-marketplace__grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .skill-marketplace__empty {
        text-align: center;
        padding: var(--spacing-5xl) var(--spacing-lg);
    }

    .skill-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
        height: 100%;
        border-radius: var(--radius-md);
        padding: var(--spacing-2xl);
        background-color: var(--color-canvas);
        color: var(--color-ink);
        border: 1px solid var(--color-hairline);
        box-shadow: var(--shadow-surface);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .skill-card:hover {
        box-shadow: var(--shadow-surface-hover);
        transform: translateY(-2px);
    }

    @media (prefers-reduced-motion: reduce) {
        .skill-card:hover {
            transform: none;
        }
    }

    .skill-card__head {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .skill-card__title {
        font-size: 18px;
        line-height: 1.35;
    }

    .skill-card__slug {
        font-family: var(--font-mono-caps);
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.04em;
        color: var(--color-accent-soft);
        background-color: var(--color-accent-wash);
        border-radius: var(--radius-xs);
        padding: 4px var(--spacing-sm);
        align-self: flex-start;
    }

    .skill-card__body {
        font-size: 13.5px;
        line-height: 1.65;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .skill-card__cta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin-top: auto;
        padding-top: var(--spacing-sm);
    }

    /* ===== 怎么使用 SKILL ===== */
    .skill-howto {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-3xl);
    }

    .skill-howto__head {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        max-width: 720px;
    }

    .skill-howto__title {
        font-size: clamp(24px, 3vw, 34px);
        line-height: 1.2;
    }

    .skill-howto__subtitle {
        color: var(--color-body);
    }

    .skill-howto__layout {
        display: grid;
        gap: var(--spacing-3xl);
        grid-template-columns: 1fr;
        align-items: start;
    }

    @media (width >= 960px) {
        .skill-howto__layout {
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-4xl);
        }
    }

    .skill-howto__steps {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2xl);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .skill-howto-step {
        display: flex;
        gap: var(--spacing-lg);
    }

    .skill-howto-step__no {
        font-family: var(--font-mono-caps);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.06em;
        color: var(--color-accent-ink);
        background-color: var(--color-accent-wash);
        border-radius: var(--radius-full);
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .skill-howto-step__copy {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        padding-top: 3px;
    }

    .skill-howto-step__title {
        font-size: 15px;
    }

    .skill-howto-step__desc {
        font-size: 13.5px;
        line-height: 1.65;
    }

    .skill-howto-config {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .skill-howto-config__intro {
        font-size: 13.5px;
        line-height: 1.65;
        margin: 0;
    }

    /* ===== 可折叠代码面板（仿企查查） ===== */
    .skill-code-block {
        border: 1px solid var(--color-hairline);
        border-radius: var(--radius-md);
        background-color: var(--color-canvas-muted);
        overflow: hidden;
        box-shadow: var(--shadow-field);
    }

    .skill-code-block__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-md);
        background-color: var(--color-canvas);
        border-bottom: 1px solid var(--color-hairline);
    }

    .skill-code-block__filename {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-family: var(--font-mono-caps);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--color-ink-soft);
    }

    .skill-code-block__dot {
        width: 8px;
        height: 8px;
        border-radius: var(--radius-full);
        background-color: var(--color-accent-ink);
        flex-shrink: 0;
    }

    .skill-code-block__actions {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .skill-code-block__btn {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        color: var(--color-body);
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        padding: 6px var(--spacing-sm);
        cursor: pointer;
        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            border-color 0.2s ease;
    }

    .skill-code-block__btn:hover {
        color: var(--color-accent-ink);
        background-color: var(--color-accent-wash);
    }

    .skill-code-block__btn--toggle {
        color: var(--color-accent-ink);
    }

    .skill-code-block__chevron {
        transition: transform 0.2s ease;
    }

    .skill-code-block[data-open="true"] .skill-code-block__chevron {
        transform: rotate(180deg);
    }

    .skill-code-block__pre {
        margin: 0;
        padding: var(--spacing-lg) var(--spacing-md);
        overflow-x: auto;
        font-family: var(--font-mono-caps);
        font-size: 12.5px;
        line-height: 1.75;
        color: var(--color-ink-soft);
    }

    .skill-code-block__pre code {
        font-family: inherit;
        white-space: pre;
    }

    .skill-howto-config__apps {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-sm);
        margin: 0;
    }

    .skill-howto-config__apps-label {
        font-family: var(--font-mono-caps);
        font-size: 11px;
        letter-spacing: 0.06em;
        color: var(--color-body-light);
    }

    .skill-howto-config__app {
        font-size: 12px;
        color: var(--color-ink-soft);
        background-color: var(--color-canvas);
        border: 1px solid var(--color-hairline);
        border-radius: var(--radius-full);
        padding: 4px var(--spacing-md);
    }

    .skill-howto-config__soon {
        margin: 0;
    }

    /* ===== SKILL 详情页 ===== */

    .skill-detail {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2xl);
        max-width: 880px;
        margin: 0 auto;
        width: 100%;
    }

    .skill-detail__crumbs ol {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-xs);
        list-style: none;
        margin: 0;
        padding: 0;
        font-family: var(--font-mono-caps);
        font-size: 12px;
        letter-spacing: 0.08em;
        color: var(--color-body-light);
        text-transform: uppercase;
    }

    .skill-detail__crumbs a {
        color: var(--color-body-light);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .skill-detail__crumbs a:hover {
        color: var(--color-accent-ink);
    }

    .skill-detail__crumbs li[aria-current="page"] {
        color: var(--color-ink);
    }

    .skill-detail__head {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .skill-detail__title {
        margin: 0;
    }

    .skill-detail__lead {
        margin: 0;
    }

    .skill-detail__tabs {
        display: flex;
        gap: var(--spacing-xs);
        border-bottom: 1px solid var(--color-hairline);
        padding: 0;
    }

    .skill-detail__tab {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 500;
        color: var(--color-body-light);
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        padding: var(--spacing-sm) var(--spacing-lg);
        margin-bottom: -1px;
        cursor: pointer;
        transition:
            color 0.2s ease,
            border-color 0.2s ease;
    }

    .skill-detail__tab:hover {
        color: var(--color-ink-soft);
    }

    .skill-detail__tab--active {
        color: var(--color-accent-ink);
        border-bottom-color: var(--color-accent-ink);
    }

    .skill-detail__panel {
        min-height: 320px;
    }

    /* 在线运行 */
    .skill-run {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .skill-run__head {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .skill-run__title {
        margin: 0;
    }

    .skill-run__hint {
        margin: 0;
    }

    .skill-run__field {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .skill-run__label {
        margin: 0;
    }

    .skill-run__input {
        font-family: var(--font-display);
        font-size: 15px;
        color: var(--color-ink);
        background-color: var(--color-canvas);
        border: 1px solid var(--color-hairline);
        border-radius: var(--radius-md);
        padding: 14px var(--spacing-xl);
        padding-right: 44px;
        box-shadow: var(--shadow-field);
        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
        outline: none;
        width: 100%;
    }

    .skill-run__input:focus {
        border-color: var(--color-accent-ink);
        box-shadow: var(--shadow-field-focus);
    }

    .skill-run__clear {
        position: absolute;
        right: var(--spacing-sm);
        bottom: 9px;
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        color: var(--color-body-light);
        background: transparent;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .skill-run__clear:hover {
        color: var(--color-ink);
        background-color: var(--color-canvas-muted);
    }

    .skill-run__go {
        align-self: flex-start;
    }

    .skill-run__note {
        margin: 0;
    }

    /* 安装方式 */
    .skill-install {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-3xl);
    }

    .skill-install__step {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .skill-install__title,
    .skill-install__subtitle {
        margin: 0;
    }

    .skill-install__desc {
        margin: 0;
    }

    .skill-code-block__pre--text {
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* 示例报告 */
    .skill-example {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .skill-example__content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2xl);
    }

    .skill-example__head {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .skill-example__title {
        margin: 0;
    }

    .skill-example__sections {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .skill-example__section {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        padding-bottom: var(--spacing-xl);
        border-bottom: 1px solid var(--color-hairline);
    }

    .skill-example__section:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .skill-example__section-title {
        margin: 0;
    }

    .skill-example__bullets {
        margin: 0;
        padding-left: var(--spacing-xl);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .skill-example__bullets li {
        color: var(--color-body);
        font-size: 15px;
        line-height: 1.6;
    }

    .skill-example__empty {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-lg);
        padding: var(--spacing-2xl);
        background-color: var(--color-canvas-muted);
        border-radius: var(--radius-md);
    }

    .skill-example__empty p {
        margin: 0;
    }

    /* 卡片标题链接 */
    .skill-card__title-link {
        color: inherit;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .skill-card__title-link:hover {
        color: var(--color-accent-ink);
    }

    @media (max-width: 640px) {
        .skill-detail {
            gap: var(--spacing-xl);
        }

        .skill-detail__tab {
            padding: var(--spacing-sm) var(--spacing-md);
            font-size: 14px;
        }

        .skill-install {
            gap: var(--spacing-2xl);
        }
    }
}