.github-accelerate-article {
    position: relative;
    overflow: hidden;
    max-width: 1080px;
    padding: 128px 28px 72px;
}

.github-accelerate-article::before {
    content: "";
    position: absolute;
    inset: -40px;
    background:
        radial-gradient(800px 500px at 10% 20%, rgba(56, 189, 248, 0.10), transparent 60%),
        radial-gradient(700px 450px at 85% 15%, rgba(99, 102, 241, 0.10), transparent 60%),
        radial-gradient(900px 600px at 60% 85%, rgba(16, 185, 129, 0.08), transparent 65%),
        repeating-linear-gradient(115deg, rgba(148, 163, 184, 0.07) 0 1px, transparent 1px 14px);
    transform: rotate(-2deg);
    pointer-events: none;
    z-index: 0;
}

.github-accelerate-article::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    opacity: 0.10;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}

.dark-theme .github-accelerate-article::after {
    opacity: 0.08;
}

.dark-theme .github-accelerate-article::before {
    background:
        radial-gradient(800px 500px at 10% 20%, rgba(56, 189, 248, 0.12), transparent 60%),
        radial-gradient(700px 450px at 85% 15%, rgba(99, 102, 241, 0.12), transparent 60%),
        radial-gradient(900px 600px at 60% 85%, rgba(16, 185, 129, 0.10), transparent 65%),
        repeating-linear-gradient(115deg, rgba(226, 232, 240, 0.05) 0 1px, transparent 1px 14px);
}

.accel-decoration {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.10), rgba(99, 102, 241, 0.03) 55%, transparent 70%);
    filter: blur(0.2px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

.dark-theme .accel-decoration {
    background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.14), rgba(99, 102, 241, 0.05) 55%, transparent 70%);
    opacity: 0.75;
}

.accel-dec-1 {
    top: 6%;
    right: -140px;
    animation: accelFloat 10s ease-in-out infinite;
}

.accel-dec-2 {
    top: 38%;
    left: -170px;
    animation: accelFloat 12s ease-in-out infinite reverse;
}

.accel-dec-3 {
    bottom: 6%;
    right: -120px;
    animation: accelFloat 14s ease-in-out infinite;
}

@keyframes accelFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-26px) scale(1.03); }
}

.accel-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.14), rgba(99, 102, 241, 0.12), transparent);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.dark-theme .accel-line {
    opacity: 0.55;
}

.accel-line-1 {
    top: 22%;
    animation: accelLine 5s ease-in-out infinite;
}

.accel-line-2 {
    top: 74%;
    animation: accelLine 7s ease-in-out infinite reverse;
}

@keyframes accelLine {
    0% { transform: scaleX(0.55); opacity: 0.35; }
    50% { transform: scaleX(1); opacity: 0.75; }
    100% { transform: scaleX(0.55); opacity: 0.35; }
}

.accel-floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.accel-float {
    position: absolute;
    font-size: 2rem;
    opacity: 0.14;
    animation: accelIcon 16s ease-in-out infinite;
}

.dark-theme .accel-float {
    opacity: 0.10;
}

.af-1 { top: 11%; left: 6%; animation-delay: 0s; }
.af-2 { top: 28%; right: 8%; animation-delay: 3s; }
.af-3 { top: 58%; left: 4%; animation-delay: 6s; }
.af-4 { top: 82%; right: 6%; animation-delay: 9s; }

@keyframes accelIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.14; }
    30% { transform: translateY(-20px) rotate(8deg); opacity: 0.22; }
    60% { transform: translateY(-12px) rotate(-6deg); opacity: 0.18; }
}

.github-accelerate-article .article-content {
    position: relative;
    z-index: 1;
}

.accel-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 0;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.dark-theme .accel-hero {
    background: rgba(15, 23, 42, 0.18);
    border-color: rgba(148, 163, 184, 0.16);
}

.accel-hero-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    filter: blur(12px) saturate(1.15) contrast(1.08);
    transform: scale(1.18);
    opacity: 0.62;
}

.accel-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 260px at 15% 25%, rgba(56, 189, 248, 0.25), transparent 58%),
        radial-gradient(700px 240px at 80% 20%, rgba(99, 102, 241, 0.22), transparent 55%),
        radial-gradient(500px 300px at 60% 70%, rgba(16, 185, 129, 0.12), transparent 60%),
        repeating-linear-gradient(115deg, rgba(226, 232, 240, 0.10) 0 1px, transparent 1px 16px),
        radial-gradient(circle at 30% 30%, rgba(226, 232, 240, 0.08) 0 1px, transparent 2px) 0 0/22px 22px,
        linear-gradient(180deg, rgba(2, 6, 23, 0.08) 0%, rgba(2, 6, 23, 0.65) 100%);
    pointer-events: none;
}

.accel-hero-badges {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.accel-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    box-shadow:
        inset 0 0 0 1px rgba(226, 232, 240, 0.10),
        inset 0 -40px 80px rgba(2, 6, 23, 0.25);
    pointer-events: none;
}

.accel-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
    color: #e2e8f0;
    background: rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(226, 232, 240, 0.18);
    backdrop-filter: blur(8px);
}

.accel-badge i {
    opacity: 0.95;
}

.accel-box {
    border: 1px solid rgba(56, 189, 248, 0.12);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(99, 102, 241, 0.03));
}

.dark-theme .accel-box {
    border-color: rgba(56, 189, 248, 0.14);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(99, 102, 241, 0.05));
}

.accel-pulse {
    animation: accelPulse 1.8s ease-in-out infinite;
}

@keyframes accelPulse {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-2px); opacity: 0.85; }
}

.accel-highlight {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(56, 189, 248, 0.12);
}

.dark-theme .accel-highlight {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(99, 102, 241, 0.06));
    border-color: rgba(56, 189, 248, 0.14);
}

.accel-glow {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, transparent 70%);
}

.route-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.route-card {
    position: relative;
    padding: 1.25rem;
    border-radius: 16px;
    background: rgba(108, 117, 125, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.20);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.route-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(99, 102, 241, 0.20), rgba(16, 185, 129, 0.12));
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.35;
}

.dark-theme .route-card::before {
    opacity: 0.28;
}

.dark-theme .route-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.14);
}

.route-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(2, 6, 23, 0.10);
    background: rgba(108, 117, 125, 0.055);
}

.dark-theme .route-card:hover {
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.22);
    background: rgba(255, 255, 255, 0.05);
}

.route-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0.9rem;
}

.route-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(99, 102, 241, 0.25));
    border: 1px solid rgba(56, 189, 248, 0.22);
    flex-shrink: 0;
}

.dark-theme .route-icon {
    color: #e2e8f0;
}

.route-head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.route-head p {
    margin: 0.25rem 0 0;
    color: rgba(15, 23, 42, 0.75);
    font-size: 0.95rem;
}

.dark-theme .route-head p {
    color: rgba(226, 232, 240, 0.78);
}

.accel-list li {
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(56, 189, 248, 0.03);
}

.dark-theme .accel-list li {
    background: rgba(56, 189, 248, 0.04);
    border-color: rgba(148, 163, 184, 0.12);
}

.accel-tip {
    border-left-color: rgba(56, 189, 248, 0.9);
}

.accel-subtitle {
    margin-top: 1.6rem;
}

.accel-link-row {
    margin: 1rem 0 0;
}

.accel-store-btn {
    border-color: rgba(56, 189, 248, 0.25);
}

.accel-pain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 1.25rem 0 0.75rem;
}

.accel-pain-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left-color: rgba(56, 189, 248, 0.75);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.06), rgba(99, 102, 241, 0.02));
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.accel-pain-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(99, 102, 241, 0.03));
    border-color: rgba(56, 189, 248, 0.20);
}

.dark-theme .accel-pain-card {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(99, 102, 241, 0.04));
    border-color: rgba(148, 163, 184, 0.14);
}

.accel-pain-card .pain-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.14);
    flex-shrink: 0;
    font-size: 1.05rem;
}

.dark-theme .accel-pain-card .pain-icon {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.16);
}

.accel-pain-card p {
    margin: 0;
    color: rgba(15, 23, 42, 0.78);
}

.dark-theme .accel-pain-card p {
    color: rgba(226, 232, 240, 0.80);
}

.accel-compare {
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.accel-compare-item h4 {
    letter-spacing: 0.2px;
}

.accel-faq {
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.accel-table-wrap {
    overflow: auto;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(108, 117, 125, 0.03);
    box-shadow: 0 16px 50px rgba(2, 6, 23, 0.06);
}

.dark-theme .accel-table-wrap {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.22);
}

.accel-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.accel-table th,
.accel-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    vertical-align: top;
}

.accel-table thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(99, 102, 241, 0.05));
    backdrop-filter: blur(8px);
    font-weight: 700;
}

.dark-theme .accel-table thead th {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(99, 102, 241, 0.06));
}

.accel-table tbody tr:hover td {
    background: rgba(56, 189, 248, 0.04);
}

.dark-theme .accel-table tbody tr:hover td {
    background: rgba(56, 189, 248, 0.05);
}

.accel-ending {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(56, 189, 248, 0.12);
}

.dark-theme .accel-ending {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(99, 102, 241, 0.06));
    border-color: rgba(56, 189, 248, 0.14);
}

.github-accelerate-article .article-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.68));
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow:
        0 18px 60px rgba(2, 6, 23, 0.10),
        0 6px 18px rgba(2, 6, 23, 0.06);
    backdrop-filter: blur(16px);
}

.dark-theme .github-accelerate-article .article-content {
    background: linear-gradient(180deg, rgba(16, 18, 24, 0.86), rgba(16, 18, 24, 0.72));
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow:
        0 20px 66px rgba(0, 0, 0, 0.34),
        0 6px 20px rgba(0, 0, 0, 0.22);
}

.github-accelerate-article .article-title {
    letter-spacing: -0.02em;
}

.github-accelerate-article .article-excerpt {
    font-size: 1.05rem;
    color: rgba(15, 23, 42, 0.72);
    max-width: 44rem;
}

.dark-theme .github-accelerate-article .article-excerpt {
    color: rgba(226, 232, 240, 0.74);
}

.accel-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 2.4rem;
}

.accel-header-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
    align-items: start;
}

.accel-header-left {
    padding-top: 0.25rem;
}

.accel-header-right {
    min-width: 0;
}

.accel-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 1.3rem;
}

.accel-kpi {
    border-radius: 16px;
    padding: 14px 14px;
    background: rgba(2, 6, 23, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.dark-theme .accel-kpi {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(148, 163, 184, 0.14);
}

.accel-kpi-num {
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
    color: rgba(15, 23, 42, 0.92);
    font-variant-numeric: tabular-nums;
}

.dark-theme .accel-kpi-num {
    color: rgba(226, 232, 240, 0.92);
}

.accel-kpi-label {
    margin-top: 4px;
    font-size: 0.9rem;
    color: rgba(15, 23, 42, 0.62);
}

.dark-theme .accel-kpi-label {
    color: rgba(226, 232, 240, 0.62);
}

.accel-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.1rem;
}

.accel-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.18);
    color: rgba(15, 23, 42, 0.88);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.accel-chip:hover {
    transform: translateY(-1px);
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.26);
}

.dark-theme .accel-chip {
    background: rgba(56, 189, 248, 0.10);
    border-color: rgba(56, 189, 248, 0.16);
    color: rgba(226, 232, 240, 0.88);
}

.dark-theme .accel-chip:hover {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.22);
}

.accel-chip i {
    opacity: 0.95;
}

.accel-divider {
    height: 1px;
    margin: 2.2rem 0;
    background:
        radial-gradient(320px 1px at 25% 50%, rgba(56, 189, 248, 0.55), transparent 65%),
        radial-gradient(320px 1px at 75% 50%, rgba(99, 102, 241, 0.45), transparent 65%),
        linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.25), transparent);
    opacity: 0.9;
}

.dark-theme .accel-divider {
    background:
        radial-gradient(320px 1px at 25% 50%, rgba(56, 189, 248, 0.55), transparent 65%),
        radial-gradient(320px 1px at 75% 50%, rgba(99, 102, 241, 0.50), transparent 65%),
        linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.16), transparent);
    opacity: 0.75;
}

#route,
#compare,
#safety {
    scroll-margin-top: 92px;
}

@media (max-width: 980px) {
    .github-accelerate-article {
        padding: 120px 20px 64px;
    }

    .accel-header-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .accel-hero-img {
        height: 320px;
    }
}

.accel-image-section {
    margin: 1.8rem 0;
}

.accel-image-section h4 {
    margin-bottom: 1rem;
    color: rgba(15, 23, 42, 0.92);
    font-size: 1.1rem;
}

.dark-theme .accel-image-section h4 {
    color: rgba(226, 232, 240, 0.92);
}

.accel-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.accel-image-item {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(108, 117, 125, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.accel-image-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.10);
}

.dark-theme .accel-image-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(148, 163, 184, 0.14);
}

.accel-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.accel-image-caption {
    padding: 1rem;
    margin: 0;
    font-size: 0.95rem;
    color: rgba(15, 23, 42, 0.78);
    line-height: 1.4;
}

.dark-theme .accel-image-caption {
    color: rgba(226, 232, 240, 0.78);
}

@media (max-width: 560px) {
    .accel-kpi-row {
        grid-template-columns: 1fr;
    }

    .accel-pain-grid {
        grid-template-columns: 1fr;
    }

    .accel-image-grid {
        grid-template-columns: 1fr;
    }

    .accel-image {
        height: 180px;
    }
}