/* ==========================================================================
   QUICK SWING — Guide Utilisateur
   Styles structurels uniquement.
   Toutes les variables --qs-*, fonts et classes utilitaires
   viennent du thème (style.css + utilitaire.css).
   ========================================================================== */

/* ── Wrapper global ── */
.qs-guide {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ── Hero guide — Orbitron + animations d'entrée ── */

/* Animations d'entrée déclenchées au load */
@keyframes qs-hero-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes qs-hero-slide-left {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes qs-hero-scale-in {
    from { opacity: 0; transform: scaleX(0); transform-origin: left; }
    to   { opacity: 1; transform: scaleX(1); transform-origin: left; }
}
@keyframes qs-hero-scan {
    0%   { transform: translateY(-100%); opacity: .6; }
    100% { transform: translateY(400%);  opacity: 0; }
}
@keyframes qs-glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 18px var(--qs-neon-a35)); }
    50%       { filter: drop-shadow(0 0 38px var(--qs-neon-a50)); }
}

.qs-guide__hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 3rem;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 0;
    /* Fond radial + lignes scanline subtiles */
    background:
        radial-gradient(ellipse 70% 80% at 10% 50%, var(--qs-neon-a08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 90% 10%, rgba(0,153,255,.05) 0%, transparent 55%);
}

/* Ligne scan animée */
.qs-guide__hero::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--qs-neon-a25) 40%, var(--qs-neon-a50) 50%, var(--qs-neon-a25) 60%, transparent 100%);
    animation: qs-hero-scan 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Coin décoratif haut-droit */
.qs-guide__hero::after {
    content: 'QUICK-SWING · V1.6.2 · 2026';
    position: absolute;
    top: 1.25rem; right: 0;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .58rem;
    color: rgba(255,255,255,.12);
    letter-spacing: .15em;
    pointer-events: none;
}

.qs-guide__hero-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end;
    position: relative;
    z-index: 2;
}

.qs-guide__hero-left {}

.qs-guide__hero-label {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .68rem;
    color: var(--qs-neon);
    letter-spacing: .25em;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: qs-hero-slide-left .6s cubic-bezier(.23,1,.32,1) .1s forwards;
}

.qs-guide__hero-title {
    /* Orbitron avec fallback Space Grotesk */
    font-family: 'Orbitron', var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: clamp(3rem, 9vw, 5.5rem);
    font-weight: 900;
    line-height: .92;
    color: var(--qs-contrast);
    margin-bottom: 1.1rem;
    letter-spacing: .04em;
    opacity: 0;
    animation: qs-hero-fade-up .7s cubic-bezier(.23,1,.32,1) .25s forwards;
}
.qs-guide__hero-title span {
    display: block;
    background: linear-gradient(135deg, var(--qs-neon) 0%, #0099ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: qs-glow-pulse 3s ease-in-out 1s infinite;
}

.qs-guide__hero-sub {
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: 1rem;
    color: rgba(255,255,255,.45);
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 0;
    opacity: 0;
    animation: qs-hero-fade-up .6s cubic-bezier(.23,1,.32,1) .45s forwards;
}

/* Bloc version — droite */
.qs-guide__hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    padding-bottom: .1rem;
    opacity: 0;
    animation: qs-hero-fade-up .6s cubic-bezier(.23,1,.32,1) .55s forwards;
}

.qs-guide__hero-badge {
    font-family: 'Orbitron', var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--qs-neon);
    letter-spacing: .08em;
    line-height: 1;
    text-shadow: 0 0 20px var(--qs-neon-a40);
}

/* Barre de séparation hero → contenu */
.qs-guide__hero-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 2.5rem;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: qs-hero-fade-up .6s cubic-bezier(.23,1,.32,1) .7s forwards;
}
.qs-guide__hero-bar-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--qs-neon-a30), transparent);
}
.qs-guide__hero-bar span {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .62rem;
    color: rgba(255,255,255,.3);
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Meta grid */
.qs-guide__hero-meta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.qs-guide__meta-item {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}
.qs-guide__meta-label {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .58rem;
    color: var(--qs-neon);
    letter-spacing: .15em;
    opacity: .6;
    text-transform: uppercase;
}
.qs-guide__meta-item strong {
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: .9rem;
    font-weight: 700;
    color: var(--qs-contrast);
}

/* Mobile hero */
@media (max-width: 640px) {
    .qs-guide__hero-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .qs-guide__hero-right {
        align-items: flex-start;
        flex-direction: row;
        align-items: center;
    }
    .qs-guide__hero-badge { font-size: 1.2rem; }
}

/* ── Table des matières ── */
.qs-guide__toc {
    padding: 3rem 0;
    border-top: 1px solid var(--qs-glass-border);
    border-bottom: 1px solid var(--qs-glass-border);
    margin-bottom: 1rem;
}
.qs-guide__toc-title {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .78rem;
    color: var(--qs-neon);
    letter-spacing: .25em;
    margin-bottom: 1.25rem;
}
.qs-guide__toc-rule {
    height: 1px;
    background: linear-gradient(90deg, var(--qs-neon-a30), transparent);
    margin-bottom: 2rem;
}
.qs-guide__toc-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.qs-guide__toc-list a {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: rgba(255,255,255,.65);
    font-size: .95rem;
    transition: color var(--transition-base, .4s ease);
}
.qs-guide__toc-list a:hover {
    color: var(--qs-neon);
    text-decoration: none;
}
.qs-toc-num {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .63rem;
    color: var(--qs-neon);
    min-width: 2.2rem;
    flex-shrink: 0;
}
.qs-toc-name { flex: 1; }
.qs-toc-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(255,255,255,.12);
    margin: 0 .5rem;
    min-width: 2rem;
    align-self: center;
}
.qs-toc-page {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .68rem;
    color: rgba(255,255,255,.28);
}

/* ── Sections doc ── */
.qs-guide__section {
    padding: 4.5rem 0 3rem;
    border-top: 1px solid var(--qs-glass-border);
}

.qs-guide__section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--qs-glass-border);
    flex-wrap: wrap;
}
.qs-guide__num-badge {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .72rem;
    font-weight: 600;
    color: var(--qs-bg);
    background: var(--qs-neon);
    padding: .2rem .55rem;
    border-radius: 4px;
    letter-spacing: .05em;
    flex-shrink: 0;
}
.qs-guide__section-name {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .68rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .2em;
    flex: 1;
}
.qs-guide__breadcrumb {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .58rem;
    color: rgba(255,255,255,.15);
    letter-spacing: .12em;
}

/* Titre de section */
.qs-guide__h2 {
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--qs-contrast);
    margin-bottom: 1.25rem;
    letter-spacing: -.02em;
}
.qs-guide__h2 .qs-cyan {
    background: linear-gradient(135deg, var(--qs-neon) 0%, #0099ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.qs-guide__lead {
    font-size: 1rem;
    color: rgba(255,255,255,.68);
    line-height: 1.75;
    margin-bottom: 2.5rem;
    max-width: 640px;
}

/* Sous-titre avec barre cyan — miroir de la barre turfu-quote */
.qs-guide__sub {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 2.5rem 0 1.25rem;
}
.qs-guide__sub-bar {
    display: block;
    width: 3px;
    height: 1.1em;
    background: var(--qs-neon);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--qs-neon-a50);
    flex-shrink: 0;
}
.qs-guide__sub h3 {
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--qs-contrast);
    margin: 0;
}

/* ── Grilles cards ── */
.qs-guide__cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin: 1.75rem 0;
}
.qs-guide__cards-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin: 1.75rem 0;
}

/* Card individuelle — hérite du style glass du thème */
.qs-guide__card {
    background: var(--qs-glass-bg);
    backdrop-filter: var(--qs-glass-blur);
    -webkit-backdrop-filter: var(--qs-glass-blur);
    border: 1px solid var(--qs-glass-border);
    border-radius: 16px;
    padding: 1.4rem;
    transition: transform var(--transition-base, .4s ease), border-color var(--transition-base, .4s ease);
}
.qs-guide__card:hover {
    border-color: var(--qs-neon-a30);
    transform: translateY(-4px);
}
.qs-guide__card-label {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .63rem;
    color: var(--qs-neon);
    letter-spacing: .15em;
    margin-bottom: .55rem;
    opacity: .8;
}
.qs-guide__card h3 {
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: .95rem;
    font-weight: 700;
    color: var(--qs-contrast);
    margin-bottom: .5rem;
}
.qs-guide__card p {
    font-size: .87rem;
    color: rgba(255,255,255,.58);
    margin: 0;
}

/* Variante barre latérale cyan — miroir .turfu-quote */
.qs-guide__card--left-bar {
    border-left: 3px solid var(--qs-neon) !important;
    border-radius: 0 12px 12px 0;
    box-shadow: inset 0 0 5px var(--qs-neon-a08);
}

/* ── Info box (tip / important) ── */
.qs-guide__info {
    border-left: 3px solid var(--qs-neon);
    background: var(--qs-neon-a05);
    border-radius: 0 10px 10px 0;
    padding: 1.2rem 1.5rem;
    margin: 1.75rem 0;
}
.qs-guide__info--pink {
    border-left-color: var(--qs-neon-alt);
    background: rgba(255,45,120,.05);
}
.qs-guide__info-label {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .63rem;
    color: var(--qs-neon);
    letter-spacing: .18em;
    font-weight: 600;
    margin-bottom: .6rem;
}
.qs-guide__info--pink .qs-guide__info-label {
    color: var(--qs-neon-alt);
}
.qs-guide__info p {
    font-size: .88rem;
    color: rgba(255,255,255,.68);
    margin: 0;
}

/* ── Étapes numérotées ── */
.qs-guide__steps {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1.5rem 0;
}
.qs-guide__step {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.2rem;
    background: var(--qs-glass-bg);
    border: 1px solid var(--qs-glass-border);
    border-radius: 12px;
    transition: border-color var(--transition-base, .4s ease);
}
.qs-guide__step:hover {
    border-color: var(--qs-neon-a25);
}
.qs-guide__step-num {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .78rem;
    font-weight: 600;
    color: var(--qs-bg);
    background: var(--qs-neon);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .05rem;
}
.qs-guide__step-title {
    display: block;
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: .93rem;
    font-weight: 700;
    color: var(--qs-contrast);
    margin-bottom: .3rem;
}
.qs-guide__step p {
    font-size: .86rem;
    color: rgba(255,255,255,.62);
    margin: 0;
}

/* ── Tableaux ── */
.qs-guide__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin: 1rem 0;
}
.qs-guide__table thead tr {
    border-bottom: 1px solid var(--qs-neon-a25);
}
.qs-guide__table th {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .62rem;
    color: var(--qs-neon);
    letter-spacing: .15em;
    font-weight: 600;
    padding: .6rem .75rem;
    text-align: left;
    background: var(--qs-neon-a04);
}
.qs-guide__table td {
    padding: .65rem .75rem;
    color: rgba(255,255,255,.72);
    border-bottom: 1px solid rgba(255,255,255,.05);
    vertical-align: top;
}
.qs-guide__table tr:last-child td { border-bottom: none; }
.qs-guide__table tr:hover td { background: rgba(255,255,255,.02); }
.qs-guide__table code {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .78rem;
    color: var(--qs-neon);
    background: var(--qs-neon-a08);
    padding: .12rem .38rem;
    border-radius: 4px;
}

/* ── Code block ── */
.qs-guide__code {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--qs-glass-border);
    border-radius: 10px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
}
.qs-guide__code pre { margin: 0; }
.qs-guide__code code {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .82rem;
    color: rgba(255,255,255,.6);
    line-height: 1.8;
    background: none;
    padding: 0;
}
.qs-code-comment { color: rgba(255,255,255,.25); }
.qs-code-attr    { color: var(--qs-neon); }
.qs-code-val     { color: #ff9966; }

/* ── Palette couleurs ── */
.qs-guide__colors {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
    margin: 1.5rem 0;
}
.qs-guide__swatch-color {
    height: 58px;
    border-radius: 8px;
    margin-bottom: .45rem;
    transition: transform var(--transition-base, .4s ease);
}
.qs-guide__swatch:hover .qs-guide__swatch-color { transform: scale(1.05); }
.qs-guide__swatch-name {
    font-size: .68rem;
    color: rgba(255,255,255,.55);
    display: block;
}
.qs-guide__swatch-hex {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .62rem;
    color: rgba(255,255,255,.3);
    display: block;
}

/* ── Typo samples ── */
.qs-guide__typo {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 1.5rem 0;
}
.qs-guide__typo-item {
    background: var(--qs-glass-bg);
    border: 1px solid var(--qs-glass-border);
    border-radius: 12px;
    padding: 1.4rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.qs-guide__typo-meta { min-width: 130px; flex-shrink: 0; }
.qs-guide__typo-font {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .6rem;
    color: var(--qs-neon);
    letter-spacing: .12em;
    display: block;
    margin-bottom: .15rem;
}
.qs-guide__typo-weight {
    font-size: .7rem;
    color: rgba(255,255,255,.32);
    display: block;
}
.qs-guide__typo-preview-head {
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--qs-contrast);
    letter-spacing: -.02em;
}
.qs-guide__typo-preview-mono {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: 1rem;
    font-weight: 600;
    color: var(--qs-neon);
    letter-spacing: .08em;
}
.qs-guide__typo-preview-body {
    font-family: var(--wp--preset--font-family--inter, sans-serif);
    font-size: .95rem;
    color: rgba(255,255,255,.68);
}

/* ── Templates list ── */
.qs-guide__templates {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 1.5rem 0;
}
.qs-guide__template {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    background: var(--qs-glass-bg);
    border: 1px solid var(--qs-glass-border);
    border-radius: 10px;
    transition: border-color var(--transition-base, .4s ease), background var(--transition-base, .4s ease);
}
.qs-guide__template:hover {
    border-color: var(--qs-neon-a25);
    background: var(--qs-neon-a02);
}
.qs-guide__template-badge {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .6rem;
    font-weight: 600;
    color: var(--qs-bg);
    background: var(--qs-neon);
    padding: .22rem .5rem;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: .04em;
    flex-shrink: 0;
    margin-top: .15rem;
}
.qs-guide__template h3 {
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: .93rem;
    font-weight: 700;
    color: var(--qs-contrast);
    margin-bottom: .2rem;
}
.qs-guide__template p {
    font-size: .84rem;
    color: rgba(255,255,255,.52);
    margin: 0;
}

/* ── Deux colonnes ── */
.qs-guide__two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* ── Badge inline ── */
.qs-badge {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .58rem;
    font-weight: 600;
    color: var(--qs-bg);
    background: var(--qs-neon);
    padding: .15rem .45rem;
    border-radius: 3px;
    letter-spacing: .04em;
    vertical-align: middle;
    margin-left: .4rem;
}

/* ── Footer guide ── */
.qs-guide__footer {
    margin-top: 4rem;
    padding: 2rem 0;
    border-top: 1px solid var(--qs-glass-border);
    text-align: center;
}
.qs-guide__footer span {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .62rem;
    color: rgba(255,255,255,.15);
    letter-spacing: .18em;
}

/* ── Démos animées (section 06) ── */
.qs-guide__demo {
    background: var(--qs-glass-bg);
    border: 1px solid var(--qs-glass-border);
    border-radius: 14px;
    padding: 2rem;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.qs-guide__demo::before {
    content: '// DEMO';
    position: absolute;
    top: .7rem; left: 1rem;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .58rem;
    color: rgba(255,255,255,.18);
    letter-spacing: .15em;
    pointer-events: none;
}

/* Glitch demo — CSS scopé car le h3 n'a pas .wp-block-heading */
.qs-guide__demo--glitch .is-style-glitch-title {
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 800;
    color: var(--qs-contrast);
    margin: 0;
    letter-spacing: .06em;
    cursor: default;
    text-shadow:
        2px 0 var(--wp--preset--color--neon-cyan, #00ffcc),
       -2px 0 var(--wp--preset--color--neon-pink, #ff2d78);
}
.qs-guide__demo--glitch .is-style-glitch-title.is-glitching {
    animation: glitch-active .38s linear;
}

/* Skeleton demo */
.qs-guide__demo--skeleton {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding: 1.5rem;
}
.qs-guide__demo-skel-img {
    height: 120px;
    border-radius: 8px;
    min-height: unset !important;
}
.qs-guide__demo-skel-lines {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.qs-guide__demo-skel-line {
    height: 12px;
    border-radius: 4px;
    min-height: unset !important;
}

/* Neon Blade demo */
.qs-guide__demo--blade {
    min-height: 72px;
    padding: 0;
}
.qs-guide__demo-blade-label {
    font-family: var(--wp--preset--font-family--space-grotesk, sans-serif);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: .18em;
    color: rgba(255,255,255,.12);
    position: relative;
    z-index: 0;
}
.qs-guide__demo--blade::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -100%;
    width: 100%;
    background: #0a0a0a;
    border-right: 2px solid var(--qs-neon);
    box-shadow: 4px 0 18px var(--qs-neon), 8px 0 40px var(--qs-neon-a35);
    animation: qs-demo-blade 3.5s cubic-bezier(.77,0,.18,1) infinite;
    z-index: 1;
}
@keyframes qs-demo-blade {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(200%); }
    100% { transform: translateX(200%); }
}
@media (prefers-reduced-motion: reduce) {
    .qs-guide__demo--blade::after { animation: none; transform: translateX(200%); }
}

/* ── Preview Shortcodes (section 11) ── */
.qs-guide__shortcode-preview {
    background: var(--qs-glass-bg);
    border: 1px solid var(--qs-glass-border);
    border-radius: 14px;
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
}
.qs-guide__shortcode-preview-label {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .62rem;
    color: var(--qs-neon);
    letter-spacing: .15em;
    margin-bottom: 1rem;
}
.qs-guide__shortcode-preview-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.qs-guide__shortcode-meta-item {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
}
.qs-guide__shortcode-meta-label {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .62rem;
    color: rgba(255,255,255,.38);
    letter-spacing: .1em;
    min-width: 72px;
    flex-shrink: 0;
}
.qs-guide__shortcode-meta-value {
    font-size: .9rem;
    color: var(--qs-contrast);
}
.qs-guide__shortcode-meta-link {
    font-size: .9rem;
    color: var(--qs-neon);
    text-decoration: none;
    border-bottom: 1px solid var(--qs-neon-a35);
    transition: border-color .2s;
}
.qs-guide__shortcode-meta-link:hover { border-color: var(--qs-neon); }
.qs-guide__shortcode-meta-code {
    font-size: .6rem;
    opacity: .35;
    margin-left: auto;
}

/* ── A11y info box (section 03) ── */
.qs-guide__info--a11y {
    border-left-color: #ffcc00;
    background: rgba(255,204,0,.05);
}
.qs-guide__info--a11y .qs-guide__info-label {
    color: #ffcc00;
}
.qs-guide__a11y-list {
    list-style: none;
    padding: 0;
    margin: .8rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}
.qs-guide__a11y-list li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    color: rgba(255,255,255,.6);
}
.qs-guide__a11y-swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .qs-guide__cards-3 { grid-template-columns: repeat(2, 1fr); }
    .qs-guide__colors  { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
    .qs-guide { padding: 0 1.25rem 4rem; }
    .qs-guide__hero { padding: 3rem 0 2.5rem; min-height: 60vh; }
    .qs-guide__hero-title { font-size: clamp(2.8rem, 14vw, 4.5rem); }
    .qs-guide__section { padding: 3rem 0 2rem; }
    .qs-guide__section-header { flex-wrap: wrap; gap: .5rem; }
    .qs-guide__breadcrumb { display: none; }
    .qs-guide__cards-2,
    .qs-guide__cards-3 { grid-template-columns: 1fr; }
    .qs-guide__two-col { grid-template-columns: 1fr; gap: 1rem; }
    .qs-guide__colors  { grid-template-columns: repeat(3, 1fr); }
    .qs-guide__typo-item { flex-direction: column; gap: .75rem; }
    .qs-guide__typo-meta { min-width: unset; }
    .qs-guide__table { font-size: .78rem; }
    .qs-guide__table th,
    .qs-guide__table td { padding: .5rem .5rem; }
    .qs-guide__hero-meta { gap: 1.5rem; }
}

@media (max-width: 480px) {
    .qs-guide__colors { grid-template-columns: repeat(2, 1fr); }
    .qs-guide__h2 { font-size: clamp(1.6rem, 8vw, 2.1rem); }
    .qs-guide__toc-list a { font-size: .86rem; }
}