@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&display=swap");

/* =============================================================
   WonderTexture core color system + geometric interface refresh

   Visual direction:
   - deep technical frame
   - hard geometric silhouettes
   - lime / interface-white dual contrast
   - restrained cyan signal color
   - flatter, quieter surfaces
   - fewer pills, fewer soft/glossy cards
   ============================================================= */

:root {
    color-scheme: dark;

    /* Canonical brand palette. */
    --wt-color-primary: #C0FE04;
    --wt-color-void: #0A0C10;
    --wt-color-graphite: #12161C;
    --wt-color-interface: #F5F8FC;
    --wt-color-cyan: #43E6FF;

    /* Quiet supporting neutrals derived for readable UI states. */
    --wt-color-surface-2: #171C23;
    --wt-color-surface-3: #1C222B;
    --wt-color-muted: #98A3AD;
    --wt-color-muted-2: #6F7A84;
    --wt-color-line: rgba(245, 248, 252, .085);
    --wt-color-line-strong: rgba(245, 248, 252, .14);

    /* Geometric interface tokens. */
    --wt-ui-edge: #26323A;
    --wt-ui-edge-strong: #34434D;
    --wt-ui-black: #05070A;
    --wt-ui-radius: 5px;
    --wt-ui-radius-soft: 8px;
    --wt-ui-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    --wt-ui-hard-shadow: 5px 5px 0 rgba(5, 7, 10, .96);
    --wt-ui-cut: 14px;
    --wt-ui-grid: rgba(245, 248, 252, .024);

    /* Generic bridge used by homepage, Atlas, About and asset pages. */
    --bg: var(--wt-color-void);
    --bg-2: var(--wt-color-graphite);
    --bg2: var(--wt-color-graphite);
    --surface: var(--wt-color-graphite);
    --surface-2: var(--wt-color-surface-2);
    --surface-3: var(--wt-color-surface-3);
    --panel: var(--wt-color-graphite);
    --panel-2: var(--wt-color-surface-2);
    --panel2: var(--wt-color-surface-2);
    --panel-3: var(--wt-color-surface-3);
    --text: var(--wt-color-interface);
    --muted: var(--wt-color-muted);
    --muted-2: var(--wt-color-muted-2);
    --muted2: var(--wt-color-muted-2);
    --line: var(--wt-color-line);
    --soft-line: var(--wt-color-line);
    --line-strong: var(--wt-color-line-strong);
    --lime: var(--wt-color-primary);
    --lime-2: var(--wt-color-primary);
    --green: var(--wt-color-primary);
    --cyan: var(--wt-color-cyan);

    /* Collapse decorative rainbow accents into the two-brand-accent system. */
    --blue: var(--wt-color-cyan);
    --violet: var(--wt-color-cyan);
    --yellow: var(--wt-color-primary);

    /* Tutorial archive tokens. */
    --wt-tut-bg: var(--wt-color-void);
    --wt-tut-panel: var(--wt-color-graphite);
    --wt-tut-panel-2: var(--wt-color-surface-2);
    --wt-tut-line: var(--wt-color-line);
    --wt-tut-text: var(--wt-color-interface);
    --wt-tut-muted: var(--wt-color-muted);
    --wt-tut-muted-2: var(--wt-color-muted-2);
    --wt-tut-lime: var(--wt-color-primary);
    --wt-tut-green: var(--wt-color-primary);
    --wt-tut-cyan: var(--wt-color-cyan);
    --wt-tut-black: var(--wt-color-void);

    /* Tutorial article tokens. */
    --wt-ta-bg: var(--wt-color-void);
    --wt-ta-panel: var(--wt-color-graphite);
    --wt-ta-panel-2: var(--wt-color-surface-2);
    --wt-ta-line: var(--wt-color-line);
    --wt-ta-text: var(--wt-color-interface);
    --wt-ta-muted: var(--wt-color-muted);
    --wt-ta-lime: var(--wt-color-primary);
    --wt-ta-green: var(--wt-color-primary);
    --wt-ta-cyan: var(--wt-color-cyan);
    --wt-ta-violet: var(--wt-color-cyan);
    --wt-ta-black: var(--wt-color-void);
}

body:not(.wp-admin) {
    background:
        radial-gradient(circle at 82% -8%, rgba(67, 230, 255, .045), transparent 31rem),
        radial-gradient(circle at -8% 18%, rgba(192, 254, 4, .04), transparent 34rem),
        var(--wt-color-void);
    color: var(--wt-color-interface);
}

::selection {
    background: var(--wt-color-primary);
    color: var(--wt-color-void);
    text-shadow: none;
}

::-moz-selection {
    background: var(--wt-color-primary);
    color: var(--wt-color-void);
    text-shadow: none;
}

::-webkit-scrollbar-track {
    background: var(--wt-color-void);
}

::-webkit-scrollbar-thumb {
    background: #2A343D;
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--wt-color-primary);
}

/* Shared header/footer palette. */
.wt-global-header,
.wt-global-footer {
    --wt-shell-bg: var(--wt-color-void);
    --wt-shell-surface: var(--wt-color-graphite);
    --wt-shell-surface-2: var(--wt-color-surface-2);
    --wt-shell-line: var(--wt-color-line);
    --wt-shell-line-strong: var(--wt-color-line-strong);
    --wt-shell-text: var(--wt-color-interface);
    --wt-shell-muted: var(--wt-color-muted);
    --wt-shell-muted-2: var(--wt-color-muted-2);
    --wt-shell-lime: var(--wt-color-primary);
    --wt-shell-green: var(--wt-color-primary);
    --wt-shell-black: var(--wt-color-void);
}

header.wt-global-header {
    border-bottom-color: var(--wt-ui-edge);
    background: rgba(10, 12, 16, .94);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .20);
}

.wt-global-header__inner {
    min-height: 70px;
}

.wt-global-brand__mark {
    border: 2px solid var(--wt-ui-edge-strong);
    border-radius: 3px;
    background: var(--wt-color-primary);
    box-shadow:
        inset 0 0 0 2px rgba(5, 7, 10, .72),
        4px 4px 0 rgba(5, 7, 10, .95);
}

.wt-global-brand__mark--image {
    overflow: hidden;
}

.wt-global-brand__icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wt-global-brand__name {
    letter-spacing: -.045em;
}

.wt-global-nav {
    gap: 7px;
}

.wt-global-nav a {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 3px;
    color: #A8B2BA;
    font-family: var(--wt-shell-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.wt-global-nav a:hover,
.wt-global-nav a:focus-visible {
    border-color: var(--wt-ui-edge);
    background: var(--wt-color-graphite);
}

.wt-global-nav a.is-active,
.wt-global-nav a[aria-current="page"] {
    color: var(--wt-color-interface);
    border-color: var(--wt-ui-edge-strong);
    background:
        linear-gradient(90deg, rgba(192, 254, 4, .10), transparent 58%),
        var(--wt-color-graphite);
}

.wt-global-nav a.is-active::after,
.wt-global-nav a[aria-current="page"]::after {
    left: 0;
    right: auto;
    bottom: -1px;
    width: 34%;
    height: 2px;
    border-radius: 0;
    background: var(--wt-color-primary);
    box-shadow: none;
}

.wt-global-cta {
    border-radius: 3px !important;
    border: 2px solid var(--wt-ui-black) !important;
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
    font-family: var(--wt-shell-mono) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.wt-global-cta:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--wt-ui-black) !important;
}

/* Documentation has namespaced variables, so bridge it explicitly. */
.wt-doc-page {
    --wt-doc-bg: var(--wt-color-void);
    --wt-doc-surface: var(--wt-color-graphite);
    --wt-doc-surface-2: var(--wt-color-surface-2);
    --wt-doc-surface-3: var(--wt-color-surface-3);
    --wt-doc-line: var(--wt-color-line);
    --wt-doc-line-soft: var(--wt-color-line);
    --wt-doc-line-strong: var(--wt-color-line-strong);
    --wt-doc-text: var(--wt-color-interface);
    --wt-doc-muted: var(--wt-color-muted);
    --wt-doc-muted-2: var(--wt-color-muted-2);
    --wt-doc-lime: var(--wt-color-primary);
    --wt-doc-green: var(--wt-color-primary);
    --wt-doc-cyan: var(--wt-color-cyan);
    --wt-doc-blue: var(--wt-color-cyan);
    --wt-doc-yellow: var(--wt-color-primary);
    --wt-doc-violet: var(--wt-color-cyan);
    --wt-doc-black: var(--wt-color-void);
}

/* =============================================================
   Shared geometric language
   ============================================================= */

:is(
    .wt-home-page,
    .wt-atlas-page,
    .wt-about-page,
    .wt-doc-page,
    .wt-tutorials-page,
    .wt-tutorial-article,
    .wt-node-asset-page
) :is(button, a, input, textarea, select):focus-visible {
    outline: 2px solid var(--wt-color-cyan);
    outline-offset: 3px;
}

:is(
    .wt-home-page,
    .wt-atlas-page,
    .wt-about-page,
    .wt-doc-page,
    .wt-tutorials-page,
    .wt-tutorial-article,
    .wt-node-asset-page
) :is(input, textarea, select) {
    border-radius: 3px !important;
}

/* Technical label treatment. */
:is(
    .wt-home-page .feature-kicker,
    .wt-home-page .metric-label,
    .wt-home-page .media-top,
    .wt-home-page .hero-product-mark,
    .wt-home-page .hero-build-meta,
    .wt-atlas-page .catalog-meta,
    .wt-tutorial-article__cover-label,
    .wt-tutorial-side-card__label
) {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* =============================================================
   Homepage
   ============================================================= */

.wt-home-page .hero::before {
    background:
        radial-gradient(circle at 42% 44%, rgba(192, 254, 4, .075), transparent 25%),
        radial-gradient(circle at 70% 20%, rgba(67, 230, 255, .05), transparent 29%);
    filter: none;
}

.wt-home-page .hero::after {
    border-color: rgba(245, 248, 252, .025);
    background: transparent;
}

.wt-home-page .hero-brand-intro::before {
    color: rgba(245, 248, 252, .014);
}

.wt-home-page .hero-brand-wordmark {
    text-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}

.wt-home-page .hero-brand-texture {
    background: linear-gradient(
        102deg,
        var(--wt-color-primary) 0%,
        var(--wt-color-primary) 72%,
        var(--wt-color-interface) 118%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
}

.wt-home-page .hero-brand-texture::after {
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--wt-color-primary),
        rgba(245, 248, 252, .72) 74%,
        transparent
    );
}

.wt-home-page .hero-beta-stamp {
    border: 3px solid var(--wt-ui-black);
    border-radius: 2px;
    background: var(--wt-color-primary);
    box-shadow: 5px 5px 0 var(--wt-ui-black);
    transform: rotate(1deg);
}

.wt-home-page .hero-beta-stamp::before {
    inset: 4px;
    border-radius: 0;
    border-color: rgba(10, 12, 16, .32);
}

.wt-home-page .hero-btn {
    min-height: 48px;
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 3px !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background .16s ease !important;
}

.wt-home-page .hero-btn:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 5px 5px 0 var(--wt-ui-black) !important;
}

.wt-home-page .hero-btn.primary {
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
}

.wt-home-page .hero-btn.tertiary {
    border-color: var(--wt-ui-edge-strong) !important;
    background: var(--wt-color-graphite) !important;
    color: var(--wt-color-interface) !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
}

.wt-home-page .hero-btn.tertiary:hover {
    border-color: rgba(192, 254, 4, .54) !important;
}

.wt-home-page .os-notice {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius) !important;
    background:
        linear-gradient(90deg, rgba(192, 254, 4, .055), transparent 34%),
        var(--wt-color-graphite) !important;
    box-shadow:
        inset 3px 0 0 var(--wt-color-primary),
        var(--wt-ui-shadow) !important;
}

.wt-home-page .os-icon-wrap {
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 3px !important;
    background:
        linear-gradient(135deg, var(--wt-color-primary) 0 52%, var(--wt-color-interface) 52% 100%) !important;
    box-shadow: 3px 3px 0 var(--wt-ui-black);
}

.wt-home-page .os-tag {
    border-radius: 2px !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .08em;
}

.wt-home-page .section-title {
    letter-spacing: -.055em;
}

.wt-home-page .section-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 18px;
    background: var(--wt-color-primary);
}

.wt-home-page .section-header[style*="text-align:center"] .section-title::after {
    margin-inline: auto;
}

.wt-home-page .feature-row {
    border-top: 1px solid var(--wt-ui-edge);
    padding-top: 34px;
}

.wt-home-page .feature-row + .feature-row {
    margin-top: 36px;
}

.wt-home-page .feature-icon {
    border: 2px solid var(--wt-ui-edge-strong);
    border-radius: 3px !important;
    background: var(--wt-color-graphite);
    box-shadow: 4px 4px 0 var(--wt-ui-black);
}

.wt-home-page .media-frame {
    overflow: hidden;
    border: 2px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: var(--wt-color-graphite) !important;
    box-shadow:
        inset 0 0 0 1px rgba(245, 248, 252, .025),
        7px 7px 0 rgba(5, 7, 10, .92),
        var(--wt-ui-shadow) !important;
}

.wt-home-page .media-top {
    min-height: 38px;
    border-bottom: 1px solid var(--wt-ui-edge-strong) !important;
    background: #0D1116 !important;
    color: #83909A !important;
}

.wt-home-page .media-top span:last-child {
    color: var(--wt-color-primary) !important;
}

.wt-home-page .callout,
.wt-home-page .ai-card {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius-soft) !important;
    background:
        linear-gradient(135deg, rgba(192, 254, 4, .045), transparent 35%),
        var(--wt-color-graphite) !important;
    box-shadow: var(--wt-ui-shadow) !important;
}

.wt-home-page .metric-card,
.wt-home-page .mini-card,
.wt-home-page .ai-tool {
    border: 1px solid var(--wt-ui-edge) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
    box-shadow: none !important;
}

.wt-home-page .mini-card {
    position: relative;
    overflow: hidden;
}

.wt-home-page .mini-card::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 3px;
    left: 18px;
    top: 0;
    background: var(--wt-color-primary);
}

.wt-home-page .mini-icon,
.wt-home-page .ai-badge {
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 2px !important;
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
    box-shadow: 3px 3px 0 var(--wt-ui-black) !important;
}

/* =============================================================
   Atlas
   ============================================================= */

.wt-atlas-page .btn {
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 3px !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
}

.wt-atlas-page .btn:hover {
    transform: translate(-1px, -1px) !important;
}

.wt-atlas-page .btn-primary {
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
}

.wt-atlas-page .btn-ghost {
    border-color: var(--wt-ui-edge-strong) !important;
    background: var(--wt-color-graphite) !important;
    color: var(--wt-color-interface) !important;
}

.wt-atlas-page .atlas-visual,
.wt-atlas-page .catalog-shell,
.wt-atlas-page .contribute,
.wt-atlas-page .modal-card {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius-soft) !important;
    background: var(--wt-color-graphite) !important;
    box-shadow: var(--wt-ui-shadow) !important;
}

.wt-atlas-page .atlas-visual::before {
    opacity: .26 !important;
    background-image:
        linear-gradient(var(--wt-ui-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--wt-ui-grid) 1px, transparent 1px) !important;
}

.wt-atlas-page .mini-card,
.wt-atlas-page .asset,
.wt-atlas-page .stat {
    border-color: var(--wt-ui-edge) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
}

.wt-atlas-page .asset {
    box-shadow: inset 0 0 0 1px rgba(245, 248, 252, .018);
}

.wt-atlas-page .asset:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(192, 254, 4, .42) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.wt-atlas-page .asset-icon {
    border: 3px solid var(--wt-ui-black) !important;
    border-radius: 4px !important;
    background: var(--wt-color-surface-2) !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
}

.wt-atlas-page .toolbar {
    border-bottom-color: var(--wt-ui-edge) !important;
    background: #0D1116 !important;
}

.wt-atlas-page .search input {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 3px !important;
    background: var(--wt-color-void) !important;
    box-shadow: inset 3px 0 0 rgba(192, 254, 4, .22) !important;
}

.wt-atlas-page .search input:focus {
    border-color: var(--wt-color-cyan) !important;
    box-shadow: inset 3px 0 0 var(--wt-color-cyan) !important;
}

.wt-atlas-page .filter {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 3px !important;
    background: var(--wt-color-surface-2) !important;
    box-shadow: none !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wt-atlas-page .filter:hover,
.wt-atlas-page .filter.active {
    border-color: var(--wt-color-primary) !important;
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
}

.wt-atlas-page .tag {
    border-radius: 2px !important;
    border-color: rgba(192, 254, 4, .32) !important;
    background: rgba(192, 254, 4, .055) !important;
    color: var(--wt-color-primary) !important;
}

/* =============================================================
   About
   ============================================================= */

.wt-about-page .btn {
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 3px !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
}

.wt-about-page .btn-primary {
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
}

.wt-about-page .btn-ghost {
    border-color: var(--wt-ui-edge-strong) !important;
    background: var(--wt-color-graphite) !important;
}

.wt-about-page .lab-visual,
.wt-about-page .pipeline-shell {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius-soft) !important;
    background: var(--wt-color-graphite) !important;
    box-shadow: var(--wt-ui-shadow) !important;
}

.wt-about-page .core {
    border: 4px solid var(--wt-ui-black) !important;
    border-radius: 5px !important;
    background:
        linear-gradient(135deg, var(--wt-color-primary) 0 52%, var(--wt-color-interface) 52% 100%) !important;
    box-shadow:
        8px 8px 0 rgba(5, 7, 10, .92),
        0 0 38px rgba(192, 254, 4, .08) !important;
}

.wt-about-page .lab-node,
.wt-about-page .big-card,
.wt-about-page .small-card,
.wt-about-page .value,
.wt-about-page .time-row,
.wt-about-page .role {
    border-color: var(--wt-ui-edge) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
}

.wt-about-page .lab-node {
    border: 3px solid var(--wt-ui-black) !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
}

.wt-about-page .value .icon,
.wt-about-page .role-icon {
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 3px !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
}

.wt-about-page .value:nth-child(odd) .icon,
.wt-about-page .role:nth-child(odd) .role-icon {
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
}

.wt-about-page .value:nth-child(even) .icon,
.wt-about-page .role:nth-child(even) .role-icon {
    background: var(--wt-color-interface) !important;
    color: var(--wt-color-void) !important;
}

.wt-about-page .pipeline-bar {
    border-bottom-color: var(--wt-ui-edge) !important;
    background: #0D1116 !important;
}

.wt-about-page .traffic i {
    border-radius: 1px !important;
}

.wt-about-page .traffic i:nth-child(1) {
    background: #48545E !important;
}

.wt-about-page .traffic i:nth-child(2) {
    background: var(--wt-color-interface) !important;
}

.wt-about-page .traffic i:nth-child(3) {
    background: var(--wt-color-primary) !important;
}

/* =============================================================
   Documentation
   ============================================================= */

.wt-doc-page :is(
    .wt-doc-sidebar,
    .doc-card,
    .code-block,
    .file-tree,
    .param-table,
    .doc-image-wrapper,
    .gif-placeholder
) {
    border-radius: var(--wt-ui-radius) !important;
}

.wt-doc-page :is(
    .code-block,
    .file-tree,
    .param-table
) {
    border-color: var(--wt-ui-edge-strong) !important;
    background: #0D1116 !important;
    box-shadow: none !important;
}

.wt-doc-page :is(.code-head, .pt-head) {
    border-bottom-color: var(--wt-ui-edge-strong) !important;
    background: var(--wt-color-graphite) !important;
}

.wt-doc-page .wt-doc-sidebar {
    border-color: var(--wt-ui-edge) !important;
    background: rgba(15, 19, 24, .94) !important;
}

.wt-doc-page .side-link {
    border-radius: 2px !important;
}

.wt-doc-page .side-link:hover,
.wt-doc-page .side-link.active,
.wt-doc-page .side-link.is-active {
    background: rgba(192, 254, 4, .055) !important;
    color: var(--wt-color-interface) !important;
    box-shadow: inset 2px 0 0 var(--wt-color-primary);
}

.wt-doc-page code,
.wt-doc-page kbd {
    border-radius: 2px !important;
}

.wt-doc-page .doc-body a:not(.wt-doc-lightbox-trigger) {
    text-decoration-color: rgba(67, 230, 255, .48);
    text-underline-offset: 3px;
}

.wt-doc-page .doc-body a:not(.wt-doc-lightbox-trigger):hover {
    color: var(--wt-color-cyan);
}

/* =============================================================
   Tutorials
   ============================================================= */

.wt-tutorials-page :is(
    .wt-tutorial-card,
    .tutorial-card,
    .wt-tutorials-card
) {
    border-color: var(--wt-ui-edge) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
    box-shadow: none !important;
}

.wt-tutorials-page :is(
    .wt-tutorial-card,
    .tutorial-card,
    .wt-tutorials-card
):hover {
    transform: translateY(-3px);
    border-color: rgba(192, 254, 4, .4) !important;
}

.wt-tutorial-article__cover,
.wt-tutorial-side-card,
.wt-tutorial-back {
    border-color: var(--wt-ui-edge) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
}

.wt-tutorial-article__cover {
    box-shadow:
        6px 6px 0 rgba(5, 7, 10, .9),
        var(--wt-ui-shadow) !important;
}

.wt-tutorial-article__cover-label {
    border-radius: 2px !important;
    border-color: var(--wt-ui-edge-strong) !important;
    background: rgba(10, 12, 16, .9) !important;
    color: var(--wt-color-primary) !important;
}

.wt-tutorial-article__meta span {
    border-radius: 2px !important;
    border-color: var(--wt-ui-edge) !important;
    background: #0D1116 !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

.wt-tutorial-toc a {
    border-radius: 2px !important;
}

.wt-tutorial-toc a:hover,
.wt-tutorial-toc a.is-active {
    background: rgba(192, 254, 4, .05) !important;
}

.wt-tutorial-progress {
    border-radius: 0 !important;
    background: var(--wt-ui-edge) !important;
}

.wt-tutorial-progress span {
    background: linear-gradient(90deg, var(--wt-color-primary), var(--wt-color-interface)) !important;
}

/* =============================================================
   Single asset / node detail
   ============================================================= */

.wt-node-asset-page :is(
    .asset-preview,
    .asset-preview-image,
    .asset-hero-card,
    .asset-panel,
    .asset-info-card,
    .asset-download-card,
    .content-card
) {
    border-color: var(--wt-ui-edge) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
}

.wt-node-asset-page .asset-preview-image {
    border: 2px solid var(--wt-ui-edge-strong) !important;
    box-shadow: 6px 6px 0 rgba(5, 7, 10, .92) !important;
}

.wt-node-asset-page :is(.btn, .button, .asset-button) {
    border-radius: 3px !important;
}

/* =============================================================
   Patch notes / legacy content safety layer
   ============================================================= */

body.page-template-default :is(
    .patch-card,
    .patch-entry,
    .patch-panel,
    .release-card
) {
    border-radius: var(--wt-ui-radius) !important;
}

/* =============================================================
   Low-motion / responsive
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    .wt-home-page .hero-btn,
    .wt-global-cta,
    .wt-atlas-page .btn,
    .wt-about-page .btn,
    .wt-atlas-page .asset {
        transition: none !important;
    }
}

@media (max-width: 900px) {
    :root {
        --wt-ui-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    }

    .wt-global-nav a {
        font-size: 12px;
    }

    .wt-home-page .media-frame,
    .wt-tutorial-article__cover {
        box-shadow:
            4px 4px 0 rgba(5, 7, 10, .9),
            var(--wt-ui-shadow) !important;
    }
}

@media (max-width: 620px) {
    .wt-global-brand__mark {
        box-shadow: 3px 3px 0 rgba(5, 7, 10, .95);
    }

    .wt-home-page .hero-btn,
    .wt-global-cta,
    .wt-atlas-page .btn,
    .wt-about-page .btn {
        box-shadow: 3px 3px 0 var(--wt-ui-black) !important;
    }

    .wt-home-page .os-notice {
        box-shadow: inset 2px 0 0 var(--wt-color-primary) !important;
    }
}
/* =============================================================
   COMPONENT COVERAGE PATCH / V2
   Real component selectors audited against current templates.

   Fixes:
   - homepage feature-row containers
   - more-grid / more-item language
   - gallery material cards
   - documentation shell, category cards and content components
   - current Assets Library index
   - dynamic WordPress asset-card preview regression
   ============================================================= */

/* -------------------------------------------------------------
   Homepage — feature containers
   ------------------------------------------------------------- */

.wt-home-page .graph-stack {
    gap: 30px;
}

.wt-home-page .feature-row {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 2.2vw, 28px);
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius) !important;
    background:
        linear-gradient(110deg, rgba(192, 254, 4, .025), transparent 26%),
        #0F1318 !important;
    box-shadow:
        6px 6px 0 rgba(5, 7, 10, .90),
        0 18px 40px rgba(0, 0, 0, .16) !important;
}

.wt-home-page .feature-row::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 46px;
    height: 3px;
    background: var(--wt-color-primary);
    pointer-events: none;
}

.wt-home-page .feature-row.reverse::before {
    left: auto;
    right: 0;
    background: var(--wt-color-interface);
}

.wt-home-page .feature-row:hover {
    border-color: #41515C !important;
}

.wt-home-page .feature-row .feature-text,
.wt-home-page .feature-row .feature-media {
    position: relative;
    z-index: 1;
}

.wt-home-page .feature-title h3 {
    letter-spacing: -.035em;
}

.wt-home-page .feature-kicker {
    color: var(--wt-color-primary) !important;
}

.wt-home-page .feature-row.reverse .feature-kicker {
    color: #D7DFE5 !important;
}

/* -------------------------------------------------------------
   Homepage — "And even more" grid
   ------------------------------------------------------------- */

.wt-home-page .more-grid {
    gap: 14px;
}

.wt-home-page .more-item {
    --wt-more-accent: var(--wt-color-primary);
    position: relative;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 42px 15px 15px;
    overflow: hidden;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(90deg, rgba(192, 254, 4, .025), transparent 34%),
        #0F1318 !important;
    color: #DCE3E8 !important;
    box-shadow: 3px 3px 0 rgba(5, 7, 10, .88);
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.wt-home-page .more-item:nth-child(even) {
    --wt-more-accent: var(--wt-color-interface);
}

.wt-home-page .more-item::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 22px;
    height: 3px;
    background: var(--wt-more-accent);
    opacity: .86;
}

.wt-home-page .more-item:hover {
    transform: translateY(-2px);
    border-color: #43535E !important;
    background:
        linear-gradient(90deg, rgba(192, 254, 4, .038), transparent 38%),
        #11161C !important;
}

.wt-home-page .check {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: grid !important;
    place-items: center !important;
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 2px !important;
    background: var(--wt-more-accent) !important;
    color: var(--wt-color-void) !important;
    box-shadow: 2px 2px 0 var(--wt-ui-black) !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* -------------------------------------------------------------
   Homepage — material gallery
   ------------------------------------------------------------- */

.wt-home-page .material-card {
    position: relative;
    overflow: hidden;
    padding: 6px !important;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
    box-shadow:
        5px 5px 0 rgba(5, 7, 10, .90),
        0 16px 34px rgba(0, 0, 0, .18) !important;
    transform: none !important;
}

.wt-home-page .material-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 6px;
    top: 6px;
    width: 28px;
    height: 3px;
    background: var(--wt-color-primary);
    pointer-events: none;
}

.wt-home-page .material-card:nth-child(even)::before {
    background: var(--wt-color-interface);
}

.wt-home-page .material-card:hover {
    transform: translateY(-3px) !important;
    border-color: #465761 !important;
}

.wt-home-page .material-card img {
    border-radius: 2px !important;
}


/* -------------------------------------------------------------
   Homepage — remaining small utility surfaces
   ------------------------------------------------------------- */

.wt-home-page .hero-build-meta {
    border-radius: 3px !important;
    border-color: var(--wt-ui-edge-strong) !important;
    background: rgba(15, 19, 24, .86) !important;
    box-shadow: none !important;
}

.wt-home-page .metric-card {
    position: relative;
    overflow: hidden;
}

.wt-home-page .metric-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 3px;
    background: var(--wt-color-interface);
}

/* -------------------------------------------------------------
   Documentation — actual shell selectors
   ------------------------------------------------------------- */

.wt-doc-page .layout {
    background: transparent;
}

.wt-doc-page .sidebar {
    border-color: var(--wt-ui-edge) !important;
    background: rgba(10, 12, 16, .90) !important;
    backdrop-filter: blur(14px);
}

.wt-doc-page .sidebar.right {
    border-left-color: var(--wt-ui-edge) !important;
}

.wt-doc-page .wt-doc-nav-group {
    margin-block: 4px !important;
}

.wt-doc-page .wt-doc-nav-toggle {
    border-radius: 3px !important;
}

.wt-doc-page .wt-doc-nav-toggle:hover,
.wt-doc-page .wt-doc-nav-group[open] > .wt-doc-nav-toggle {
    border-color: var(--wt-ui-edge) !important;
    background: #10151A !important;
}

.wt-doc-page .wt-doc-nav-group.is-active-branch > .wt-doc-nav-toggle {
    color: var(--wt-color-interface) !important;
    box-shadow: inset 2px 0 0 var(--wt-color-primary);
}

.wt-doc-page .wt-doc-nav-children::before {
    background: linear-gradient(
        to bottom,
        rgba(192, 254, 4, .22),
        rgba(245, 248, 252, .045)
    ) !important;
}

.wt-doc-page .side-link {
    border-radius: 3px !important;
}

.wt-doc-page .side-link:hover {
    transform: translateX(1px) !important;
}

.wt-doc-page .side-link.active {
    border-color: rgba(192, 254, 4, .18) !important;
    background:
        linear-gradient(90deg, rgba(192, 254, 4, .075), transparent 72%),
        #10151A !important;
}

.wt-doc-page .side-link.active::before {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Documentation search */
.wt-doc-page .top-search input {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 3px !important;
    background: #0D1116 !important;
    box-shadow: inset 3px 0 0 rgba(192, 254, 4, .18) !important;
}

.wt-doc-page .top-search input:focus {
    border-color: var(--wt-color-cyan) !important;
    background: #0E1318 !important;
    box-shadow: inset 3px 0 0 var(--wt-color-cyan) !important;
}

.wt-doc-page .kbd {
    border-radius: 2px !important;
    border-color: var(--wt-ui-edge-strong) !important;
    background: var(--wt-color-graphite) !important;
    box-shadow: 2px 2px 0 var(--wt-ui-black) !important;
}

/* Documentation identity badge */
.wt-doc-page .doc-badge {
    border-radius: 3px !important;
    border-color: rgba(67, 230, 255, .22) !important;
    background:
        linear-gradient(90deg, rgba(67, 230, 255, .055), transparent),
        #0D1116 !important;
    color: #C6F7FF !important;
}

.wt-doc-page .doc-badge i {
    border-radius: 1px !important;
    box-shadow: none !important;
}

/* Documentation archive cards */
.wt-doc-page .wt-doc-card-grid {
    gap: 14px !important;
}

.wt-doc-page .wt-doc-card {
    --wt-doc-card-accent: var(--wt-color-primary);
    position: relative;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius) !important;
    background:
        linear-gradient(120deg, rgba(192, 254, 4, .025), transparent 34%),
        #0F1318 !important;
    box-shadow: 4px 4px 0 rgba(5, 7, 10, .88);
}

.wt-doc-page .wt-doc-card:nth-child(even) {
    --wt-doc-card-accent: var(--wt-color-interface);
}

.wt-doc-page .wt-doc-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 20px;
    top: 0;
    width: 36px;
    height: 3px;
    background: var(--wt-doc-card-accent);
    pointer-events: none;
}

.wt-doc-page .wt-doc-card::after {
    display: none !important;
}

.wt-doc-page .wt-doc-card:hover {
    transform: translateY(-2px) !important;
    border-color: #465761 !important;
    background:
        linear-gradient(120deg, rgba(192, 254, 4, .035), transparent 38%),
        #11161C !important;
}

.wt-doc-page .wt-doc-card small {
    color: #7F8A93 !important;
}

.wt-doc-page .wt-doc-card b {
    color: var(--wt-doc-card-accent) !important;
}

/* Right TOC */
.wt-doc-page .toc {
    display: grid;
    gap: 3px;
}

.wt-doc-page .toc a {
    position: relative;
    display: block;
    padding: 7px 8px 7px 11px;
    border-radius: 2px !important;
    color: #7F8A93;
}

.wt-doc-page .toc a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: transparent;
}

.wt-doc-page .toc a:hover,
.wt-doc-page .toc a.active,
.wt-doc-page .toc a.is-active {
    background: rgba(192, 254, 4, .045) !important;
    color: var(--wt-color-interface) !important;
}

.wt-doc-page .toc a:hover::before,
.wt-doc-page .toc a.active::before,
.wt-doc-page .toc a.is-active::before {
    background: var(--wt-color-primary);
}

.wt-doc-page .feedback {
    border-top-color: var(--wt-ui-edge) !important;
}

.wt-doc-page .wt-feedback-link {
    color: var(--wt-color-primary) !important;
}

/* Previous / next cards */
.wt-doc-page .nextprev a {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: #0F1318 !important;
    box-shadow: 3px 3px 0 rgba(5, 7, 10, .84);
}

.wt-doc-page .nextprev a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 3px;
    background: var(--wt-color-primary);
}

.wt-doc-page .nextprev a:hover {
    transform: translateY(-2px) !important;
    border-color: #43535E !important;
    background: #11161C !important;
}

/* Documentation content components */
.wt-doc-page .doc-body blockquote {
    border-color: var(--wt-ui-edge) !important;
    border-left: 3px solid var(--wt-color-primary) !important;
    border-radius: 0 4px 4px 0 !important;
    background:
        linear-gradient(90deg, rgba(192, 254, 4, .045), transparent 60%),
        #0D1116 !important;
}

.wt-doc-page .inline,
.wt-doc-page .doc-body :not(pre) > code {
    border-radius: 2px !important;
    border-color: var(--wt-ui-edge-strong) !important;
    background: #0D1116 !important;
}

.wt-doc-page .doc-body .section-divider {
    background: linear-gradient(
        90deg,
        var(--wt-ui-edge-strong),
        rgba(192, 254, 4, .32),
        transparent 92%
    ) !important;
}

.wt-doc-page .doc-body .warning-box,
.wt-doc-page .doc-body .info-box {
    border-radius: 4px !important;
    border-color: var(--wt-ui-edge-strong) !important;
    background: #0F1318 !important;
    box-shadow: 3px 3px 0 rgba(5, 7, 10, .70) !important;
}

.wt-doc-page .doc-body .warning-icon-wrap,
.wt-doc-page .doc-body .info-icon-wrap,
.wt-doc-page .doc-body .warning-box.critical .warning-icon-wrap {
    border-radius: 2px !important;
}

.wt-doc-page .doc-body .info-box {
    border-left: 3px solid var(--wt-color-cyan) !important;
}

.wt-doc-page .doc-body .warning-box {
    border-left-width: 3px !important;
}

/* Media, tables and code surfaces */
.wt-doc-page .doc-body .doc-image-wrapper,
.wt-doc-page .doc-body .gif-placeholder {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: #080B0F !important;
    box-shadow:
        5px 5px 0 rgba(5, 7, 10, .82),
        0 16px 34px rgba(0, 0, 0, .16) !important;
}

.wt-doc-page .doc-body .gif-caption {
    border-top: 1px solid var(--wt-ui-edge) !important;
    background: #0D1116 !important;
}

.wt-doc-page .doc-body .gif-label {
    border-radius: 2px !important;
    border-color: rgba(192, 254, 4, .24) !important;
    background: rgba(192, 254, 4, .055) !important;
    color: var(--wt-color-primary) !important;
}

.wt-doc-page :is(
    .code-block,
    .file-tree,
    .param-table
) {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: #0D1116 !important;
    box-shadow: 3px 3px 0 rgba(5, 7, 10, .62) !important;
}

.wt-doc-page :is(.code-head, .pt-head) {
    border-bottom-color: var(--wt-ui-edge-strong) !important;
    background: #12171D !important;
}

/* -------------------------------------------------------------
   Assets Library — current hero/index component
   ------------------------------------------------------------- */

.wt-atlas-page .wt-atlas-index {
    overflow: hidden;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
    box-shadow:
        5px 5px 0 rgba(5, 7, 10, .86),
        0 16px 34px rgba(0, 0, 0, .15);
}

.wt-atlas-page .wt-atlas-index__summary {
    border-right-color: var(--wt-ui-edge) !important;
}

.wt-atlas-page .wt-atlas-index__number {
    color: var(--wt-color-primary) !important;
}

.wt-atlas-page .wt-atlas-index__links a,
.wt-atlas-page .wt-atlas-index__links .is-static {
    border: 1px solid var(--wt-ui-edge) !important;
    border-radius: 3px !important;
    background: #0D1116 !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px !important;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.wt-atlas-page .wt-atlas-index__links a:hover {
    border-color: rgba(192, 254, 4, .38) !important;
    background:
        linear-gradient(90deg, rgba(192, 254, 4, .065), transparent),
        #0D1116 !important;
}

.wt-atlas-page .wt-atlas-index__links small {
    border-radius: 1px !important;
    background: rgba(192, 254, 4, .065) !important;
    color: var(--wt-color-primary) !important;
}

/* -------------------------------------------------------------
   Assets Library — dynamic asset cards
   IMPORTANT: .wt-asset-icon is intentionally reset to 100%.
   The previous generic .asset-icon rule collapsed thumbnails.
   ------------------------------------------------------------- */

.wt-atlas-page .asset-grid {
    gap: 17px !important;
}

.wt-atlas-page .wt-asset-card {
    position: relative;
    min-height: 285px;
    overflow: hidden;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
    box-shadow:
        4px 4px 0 rgba(5, 7, 10, .86),
        0 14px 30px rgba(0, 0, 0, .13);
}

.wt-atlas-page .wt-asset-card::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 14px;
    top: 0;
    width: 34px;
    height: 3px;
    background: var(--wt-color-primary);
    pointer-events: none;
}

.wt-atlas-page .wt-asset-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(192, 254, 4, .42) !important;
    box-shadow:
        5px 5px 0 rgba(5, 7, 10, .90),
        0 18px 34px rgba(0, 0, 0, .16);
}

.wt-atlas-page .wt-asset-card .preview {
    height: 150px;
    overflow: hidden;
    border-bottom: 1px solid var(--wt-ui-edge);
    background:
        linear-gradient(var(--wt-ui-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--wt-ui-grid) 1px, transparent 1px),
        #0C1015 !important;
    background-size: 22px 22px !important;
}

/* Regression fix: restore the dynamic WordPress image stage. */
.wt-atlas-page .wt-asset-icon {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
}

.wt-atlas-page .wt-asset-icon::after {
    display: none !important;
    content: none !important;
}

.wt-atlas-page .asset-thumb {
    width: 100% !important;
    height: 100% !important;
    max-width: 230px !important;
    max-height: 138px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .32)) !important;
}

.wt-atlas-page .asset-thumb.fallback {
    max-width: 84px !important;
    max-height: 84px !important;
}

.wt-atlas-page .wt-asset-card:hover .asset-thumb {
    transform: scale(1.025) !important;
}

.wt-atlas-page .wt-asset-card .asset-body {
    padding: 17px !important;
}

.wt-atlas-page .wt-asset-card .asset-line {
    align-items: flex-start !important;
}

.wt-atlas-page .wt-asset-card h3 {
    line-height: 1.2;
}

.wt-atlas-page .wt-asset-card .tag {
    flex: 0 0 auto;
    border-radius: 2px !important;
    border-color: rgba(192, 254, 4, .26) !important;
    background: rgba(192, 254, 4, .05) !important;
    color: var(--wt-color-primary) !important;
}

.wt-atlas-page .wt-asset-card .asset-meta span {
    border-radius: 2px !important;
    border-color: var(--wt-ui-edge) !important;
    background: #0C1015 !important;
    color: #87939C !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px !important;
    letter-spacing: .025em;
}

/* Catalog container itself should match the cards. */
.wt-atlas-page .catalog-shell {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0D1116 !important;
    box-shadow:
        5px 5px 0 rgba(5, 7, 10, .82),
        var(--wt-ui-shadow) !important;
}

.wt-atlas-page .toolbar {
    border-bottom-color: var(--wt-ui-edge) !important;
}

.wt-atlas-page .catalog-meta {
    border-bottom-color: var(--wt-ui-edge) !important;
    background: rgba(10, 12, 16, .42);
}

/* -------------------------------------------------------------
   Small-screen tuning for newly covered components
   ------------------------------------------------------------- */

@media (max-width: 800px) {
    .wt-atlas-page .wt-atlas-index__summary {
        border-right: 0 !important;
        border-bottom: 1px solid var(--wt-ui-edge) !important;
    }

    .wt-home-page .feature-row {
        box-shadow:
            4px 4px 0 rgba(5, 7, 10, .88),
            0 14px 28px rgba(0, 0, 0, .14) !important;
    }
}

@media (max-width: 620px) {
    .wt-home-page .more-item {
        min-height: 62px;
        padding-right: 36px;
    }

    .wt-home-page .material-card,
    .wt-atlas-page .wt-asset-card,
    .wt-doc-page .wt-doc-card,
    .wt-doc-page .nextprev a,
    .wt-atlas-page .wt-atlas-index {
        box-shadow: 3px 3px 0 rgba(5, 7, 10, .82) !important;
    }

    .wt-atlas-page .wt-asset-card .preview {
        height: 142px;
    }

    .wt-atlas-page .asset-thumb {
        max-height: 130px !important;
    }
}

/* =============================================================
   BRAND CONSOLIDATION + ASSET/TUTORIAL REWORK / V3

   - Windows notice returns to a red warning identity.
   - Single asset pages are rebuilt around their real blueprint markup.
   - Tutorial archive + tutorial article adopt the geometric interface.
   - Every primary lime treatment uses exactly --wt-color-primary.
   ============================================================= */

:root {
    --wt-color-danger: #FF5364;
    --wt-color-danger-deep: #241014;
    --wt-color-danger-line: #6B2A34;
}

/* -------------------------------------------------------------
   Exact brand accent parity
   ------------------------------------------------------------- */

.wt-global-brand__name strong,
.wt-global-cta,
.wt-home-page .hero-btn.primary,
.wt-atlas-page .btn-primary,
.wt-about-page .btn-primary,
.wt-node-asset-page .btn.primary,
.wt-tutorial-filter.is-active,
.wt-tutorial-card__play,
.wt-tutorial-video__overlay > span {
    --wt-active-brand-accent: var(--wt-color-primary);
}

.wt-global-brand__name strong {
    color: var(--wt-color-primary) !important;
    -webkit-text-fill-color: currentColor;
}

.wt-global-cta,
.wt-home-page .hero-btn.primary,
.wt-atlas-page .btn-primary,
.wt-about-page .btn-primary {
    background: var(--wt-color-primary) !important;
}

/* -------------------------------------------------------------
   Homepage — Windows warning returns to red
   Keep the hard-edged geometry from V2.
   ------------------------------------------------------------- */

.wt-home-page .os-notice {
    border: 1px solid var(--wt-color-danger-line) !important;
    border-radius: var(--wt-ui-radius) !important;
    background:
        linear-gradient(90deg, rgba(255, 83, 100, .105), transparent 38%),
        linear-gradient(145deg, #241014, #120B0E) !important;
    box-shadow:
        inset 3px 0 0 var(--wt-color-danger),
        5px 5px 0 rgba(5, 7, 10, .88),
        0 16px 34px rgba(0, 0, 0, .16) !important;
}

.wt-home-page .os-icon-wrap {
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 3px !important;
    background: #2A1116 !important;
    box-shadow:
        3px 3px 0 var(--wt-ui-black),
        inset 0 0 0 1px rgba(255, 83, 100, .18) !important;
}

.wt-home-page .os-icon-wrap img {
    filter: none !important;
}

.wt-home-page .os-title {
    color: #FFF0F2 !important;
}

.wt-home-page .os-desc {
    color: #C7A8AD !important;
}

.wt-home-page .os-desc strong {
    color: #FFD7DC !important;
}

.wt-home-page .os-tag {
    border: 1px solid rgba(255, 83, 100, .42) !important;
    border-radius: 2px !important;
    background: rgba(255, 83, 100, .07) !important;
    color: #FF8A97 !important;
    box-shadow: none !important;
}

/* =============================================================
   SINGLE ASSET PAGE
   ============================================================= */

body.single-wt_asset {
    background:
        radial-gradient(circle at 88% -4%, rgba(67, 230, 255, .04), transparent 30rem),
        radial-gradient(circle at -8% 16%, rgba(192, 254, 4, .045), transparent 32rem),
        var(--wt-color-void) !important;
}

.wt-node-asset-page {
    --bg: var(--wt-color-void);
    --bg2: var(--wt-color-graphite);
    --panel: var(--wt-color-graphite);
    --panel2: var(--wt-color-surface-2);
    --text: var(--wt-color-interface);
    --muted: var(--wt-color-muted);
    --muted2: var(--wt-color-muted-2);
    --line: var(--wt-ui-edge);
    --black: var(--wt-ui-black);
    --lime: var(--wt-color-primary);
    --green: var(--wt-color-primary);
    --cyan: var(--wt-color-cyan);
    --blue: var(--wt-color-cyan);
    --yellow: var(--wt-color-primary);
    --violet: var(--wt-color-cyan);
    --orange: var(--wt-color-primary);
    --shadow: var(--wt-ui-shadow);
}

/* Asset buttons */
.wt-node-asset-page .btn {
    min-height: 44px;
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 3px !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px !important;
    letter-spacing: .035em;
    text-transform: uppercase;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.wt-node-asset-page .btn:hover {
    transform: translate(-1px, -1px) !important;
    filter: none !important;
    box-shadow: 5px 5px 0 var(--wt-ui-black) !important;
}

.wt-node-asset-page .btn.primary {
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
}

.wt-node-asset-page .btn.ghost {
    border-color: var(--wt-ui-edge-strong) !important;
    background: var(--wt-color-graphite) !important;
    color: var(--wt-color-interface) !important;
}

/* Dossier shell */
.wt-node-asset-page .asset-dossier {
    border-bottom-color: var(--wt-ui-edge) !important;
}

.wt-node-asset-page .asset-dossier::before {
    background:
        linear-gradient(var(--wt-ui-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--wt-ui-grid) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    opacity: .8;
}

.wt-node-asset-page .asset-dossier__topline {
    border-bottom-color: var(--wt-ui-edge) !important;
}

.wt-node-asset-page .asset-breadcrumb {
    color: #66727C !important;
}

.wt-node-asset-page .asset-breadcrumb a:hover {
    color: var(--wt-color-primary) !important;
}

.wt-node-asset-page .asset-breadcrumb strong {
    color: #B7C0C7 !important;
}

.wt-node-asset-page .asset-type-label {
    color: var(--wt-color-primary) !important;
}

.wt-node-asset-page .asset-type-label i {
    width: 9px !important;
    height: 9px !important;
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 1px !important;
    background: var(--wt-color-primary) !important;
    box-shadow: 2px 2px 0 var(--wt-ui-black) !important;
}

.wt-node-asset-page h1 .accent {
    color: var(--wt-color-primary) !important;
}

.wt-node-asset-page .lead {
    color: #A1ACB4 !important;
}

/* Blueprint: frame owns the border, image does not. */
.wt-node-asset-page .asset-blueprint {
    overflow: hidden;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0D1116 !important;
    box-shadow:
        6px 6px 0 rgba(5, 7, 10, .9),
        0 20px 44px rgba(0, 0, 0, .20) !important;
    clip-path: none !important;
}

.wt-node-asset-page .asset-blueprint__preview {
    border-right: 1px solid var(--wt-ui-edge) !important;
    background:
        linear-gradient(var(--wt-ui-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--wt-ui-grid) 1px, transparent 1px),
        #0B0F14 !important;
    background-size: 24px 24px !important;
}

.wt-node-asset-page .asset-blueprint__preview::before {
    inset: 20px !important;
    border: 1px solid rgba(245, 248, 252, .045) !important;
    border-radius: 2px;
}

.wt-node-asset-page .asset-preview-stage {
    width: min(84%, 650px) !important;
}

.wt-node-asset-page .asset-blueprint__image-wrap {
    position: relative;
    width: 100% !important;
    height: 320px !important;
    padding: clamp(22px, 4vw, 38px) !important;
    overflow: hidden;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(135deg, rgba(192, 254, 4, .025), transparent 34%),
        #12171D !important;
    box-shadow:
        4px 4px 0 rgba(5, 7, 10, .84),
        inset 0 0 0 1px rgba(245, 248, 252, .018) !important;
}

.wt-node-asset-page .asset-blueprint__image-wrap::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 0;
    width: 38px;
    height: 3px;
    background: var(--wt-color-primary);
    pointer-events: none;
}

/* Important regression reset from previous generic image styling. */
.wt-node-asset-page .asset-preview-image,
.wt-node-asset-page .asset-preview-image.fallback {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .26)) !important;
}

.wt-node-asset-page .asset-preview-image.fallback {
    width: 58% !important;
    height: 58% !important;
    margin: auto !important;
}

.wt-node-asset-page .asset-preview-stage__caption {
    padding-top: 16px !important;
    border-top: 0;
}

.wt-node-asset-page .asset-preview-stage__caption strong {
    color: var(--wt-color-interface) !important;
}

.wt-node-asset-page .asset-preview-stage__caption small {
    color: #74808A !important;
}

/* Coordinate labels */
.wt-node-asset-page .asset-blueprint__coordinate {
    color: #65717B !important;
}

.wt-node-asset-page .asset-blueprint__coordinate--tr {
    color: var(--wt-color-primary) !important;
}

/* Specification panel */
.wt-node-asset-page .asset-blueprint__spec {
    padding: 24px !important;
    background:
        linear-gradient(180deg, rgba(192, 254, 4, .02), transparent 32%),
        #11161C !important;
}

.wt-node-asset-page .asset-blueprint__spec-head {
    border-bottom: 1px solid var(--wt-ui-edge) !important;
}

.wt-node-asset-page .asset-blueprint__spec-head span {
    color: var(--wt-color-interface) !important;
}

.wt-node-asset-page .asset-blueprint__spec-head b {
    color: var(--wt-color-primary) !important;
}

.wt-node-asset-page .asset-spec-list > div {
    border-bottom-color: var(--wt-ui-edge) !important;
}

.wt-node-asset-page .asset-spec-list dt {
    color: #68747E !important;
}

.wt-node-asset-page .asset-spec-list dd {
    color: #D8E0E5 !important;
}

.wt-node-asset-page .asset-compatibility {
    border-top: 0;
}

.wt-node-asset-page .asset-compatibility > span {
    color: #6D7881 !important;
}

.wt-node-asset-page .asset-compatibility b {
    border: 1px solid rgba(192, 254, 4, .22) !important;
    border-radius: 2px !important;
    background: rgba(192, 254, 4, .055) !important;
    color: var(--wt-color-primary) !important;
}

/* Datasheet */
.wt-node-asset-page .asset-datasheet__grid {
    max-width: 940px !important;
}

.wt-node-asset-page .asset-notes {
    padding-right: 0 !important;
    border-right: 0 !important;
}

.wt-node-asset-page .asset-section-label {
    position: relative;
    padding-bottom: 15px !important;
    border-bottom: 1px solid var(--wt-ui-edge) !important;
}

.wt-node-asset-page .asset-section-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 42px;
    height: 2px;
    background: var(--wt-color-primary);
}

.wt-node-asset-page .asset-section-label span {
    color: var(--wt-color-interface) !important;
}

.wt-node-asset-page .asset-section-label small {
    color: #6F7A83 !important;
}

.wt-node-asset-page .asset-entry-content {
    color: #9EA9B1 !important;
}

.wt-node-asset-page .asset-entry-content h2,
.wt-node-asset-page .asset-entry-content h3,
.wt-node-asset-page .asset-entry-content h4 {
    color: var(--wt-color-interface) !important;
}

.wt-node-asset-page .asset-entry-content h2::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 12px;
    background: var(--wt-color-primary);
}

.wt-node-asset-page .asset-entry-content a {
    color: var(--wt-color-primary) !important;
}

/* Asset shortcode components */
.wt-node-asset-page .asset-entry-content .param-table,
.wt-node-asset-page .asset-entry-content .code,
.wt-node-asset-page .asset-entry-content pre,
.wt-node-asset-page .asset-entry-content .gif-placeholder {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: #0D1116 !important;
    box-shadow: 3px 3px 0 rgba(5, 7, 10, .62) !important;
}

.wt-node-asset-page .asset-entry-content .pt-head,
.wt-node-asset-page .asset-entry-content .gif-caption {
    border-color: var(--wt-ui-edge) !important;
    background: #12171D !important;
}

.wt-node-asset-page .asset-entry-content .pt-row {
    border-top-color: var(--wt-ui-edge) !important;
}

.wt-node-asset-page .asset-entry-content .pt-head span,
.wt-node-asset-page .asset-entry-content .pt-row > span {
    border-right-color: var(--wt-ui-edge) !important;
}

.wt-node-asset-page .asset-entry-content .pt-type {
    color: var(--wt-color-cyan) !important;
}

.wt-node-asset-page .asset-entry-content .pt-default,
.wt-node-asset-page .asset-entry-content .cs-eyebrow,
.wt-node-asset-page .asset-entry-content .gif-label {
    color: var(--wt-color-primary) !important;
}

.wt-node-asset-page .asset-entry-content .warning-box,
.wt-node-asset-page .asset-entry-content .info-box {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: #0F1318 !important;
    box-shadow: 3px 3px 0 rgba(5, 7, 10, .60);
}

.wt-node-asset-page .asset-entry-content .warning-box {
    border-left: 3px solid var(--wt-color-primary) !important;
}

.wt-node-asset-page .asset-entry-content .info-box {
    border-left: 3px solid var(--wt-color-cyan) !important;
}

.wt-node-asset-page .asset-entry-content .warning-icon-wrap,
.wt-node-asset-page .asset-entry-content .info-icon-wrap {
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 2px !important;
    box-shadow: 2px 2px 0 var(--wt-ui-black);
}

.wt-node-asset-page .asset-entry-content .warning-icon-wrap {
    background: rgba(192, 254, 4, .09) !important;
    color: var(--wt-color-primary) !important;
}

.wt-node-asset-page .asset-entry-content .info-icon-wrap {
    background: rgba(67, 230, 255, .075) !important;
    color: var(--wt-color-cyan) !important;
}

/* Before / after components */
.wt-node-asset-page .asset-entry-content .comparison-grid .gif-placeholder {
    border-radius: 4px !important;
}

.wt-node-asset-page .asset-entry-content .comparison-grid .cmp-item::after {
    border-radius: 2px !important;
    border-color: var(--wt-ui-edge-strong) !important;
    background: rgba(10, 12, 16, .90) !important;
    box-shadow: 2px 2px 0 rgba(5, 7, 10, .72) !important;
}

.wt-node-asset-page .asset-entry-content .comparison-grid .cmp-item:last-child::after {
    border-color: rgba(192, 254, 4, .32) !important;
    background: rgba(22, 28, 11, .92) !important;
    color: var(--wt-color-primary) !important;
}

.wt-node-asset-page .asset-entry-content .cmp-divider {
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 2px !important;
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
    box-shadow: 3px 3px 0 var(--wt-ui-black) !important;
}

/* Revision ledger */
.wt-node-asset-page .asset-revision-ledger {
    overflow: hidden;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px;
    background: #0D1116;
    box-shadow: 4px 4px 0 rgba(5, 7, 10, .70);
}

.wt-node-asset-page .asset-revision-row {
    border-bottom-color: var(--wt-ui-edge) !important;
}

.wt-node-asset-page .asset-revision-row:last-child {
    border-bottom: 0;
}

.wt-node-asset-page .asset-revision-row > * {
    border-right-color: var(--wt-ui-edge) !important;
}

.wt-node-asset-page .asset-revision-row > b {
    color: var(--wt-color-primary) !important;
}

/* =============================================================
   TUTORIAL ARCHIVE
   ============================================================= */

body.post-type-archive-wt_tutorial,
body.tax-tutorial_category {
    background:
        radial-gradient(circle at 8% -2%, rgba(192, 254, 4, .045), transparent 28rem),
        radial-gradient(circle at 92% 16%, rgba(67, 230, 255, .035), transparent 30rem),
        var(--wt-color-void) !important;
}

.wt-tutorials-page {
    --wt-tut-bg: var(--wt-color-void);
    --wt-tut-panel: var(--wt-color-graphite);
    --wt-tut-panel-2: var(--wt-color-surface-2);
    --wt-tut-line: var(--wt-ui-edge);
    --wt-tut-text: var(--wt-color-interface);
    --wt-tut-muted: var(--wt-color-muted);
    --wt-tut-muted-2: var(--wt-color-muted-2);
    --wt-tut-lime: var(--wt-color-primary);
    --wt-tut-green: var(--wt-color-primary);
    --wt-tut-cyan: var(--wt-color-cyan);
    --wt-tut-orange: var(--wt-color-primary);
    --wt-tut-black: var(--wt-ui-black);
}

.wt-tutorials-hero {
    border-bottom-color: var(--wt-ui-edge) !important;
}

.wt-tutorials-hero::before {
    background:
        linear-gradient(var(--wt-ui-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--wt-ui-grid) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
}

.wt-tutorials-hero__layout {
    max-width: 1180px;
}

.wt-tutorials-hero__copy {
    max-width: 820px !important;
    padding-left: 0 !important;
}

.wt-tutorials-kicker {
    color: var(--wt-color-primary) !important;
}

.wt-tutorials-kicker i {
    width: 9px !important;
    height: 9px !important;
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 1px !important;
    background: var(--wt-color-primary) !important;
    box-shadow: 2px 2px 0 var(--wt-ui-black) !important;
}

.wt-tutorials-hero h1 span {
    color: var(--wt-color-primary) !important;
}

.wt-tutorials-hero__meta {
    max-width: 720px;
    border-top-color: var(--wt-ui-edge) !important;
    border-bottom-color: var(--wt-ui-edge) !important;
}

.wt-tutorials-hero__meta span {
    color: #74808A !important;
}

/* Toolbar */
.wt-tutorials-toolbar {
    align-items: stretch !important;
    padding: 12px;
    border: 1px solid var(--wt-ui-edge-strong);
    border-radius: 4px;
    background: #0D1116;
    box-shadow: 4px 4px 0 rgba(5, 7, 10, .68);
}

.wt-tutorials-filters {
    align-items: center;
}

.wt-tutorial-filter {
    min-height: 38px;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 3px !important;
    background: #151A20 !important;
    color: #89949D !important;
    box-shadow: none !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px !important;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.wt-tutorial-filter:hover {
    border-color: rgba(192, 254, 4, .36) !important;
    color: var(--wt-color-interface) !important;
}

.wt-tutorial-filter.is-active {
    border-color: var(--wt-color-primary) !important;
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
}

.wt-tutorial-search {
    min-height: 42px !important;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 3px !important;
    background: var(--wt-color-void) !important;
    box-shadow: inset 3px 0 0 rgba(192, 254, 4, .18);
}

.wt-tutorial-search:focus-within {
    border-color: var(--wt-color-cyan) !important;
    box-shadow: inset 3px 0 0 var(--wt-color-cyan);
}

.wt-tutorial-search > span:last-child {
    color: var(--wt-color-primary) !important;
}

.wt-tutorials-catalog__meta {
    border-top-color: var(--wt-ui-edge) !important;
}

/* Tutorial cards */
.wt-tutorial-grid {
    gap: 18px !important;
}

.wt-tutorial-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: var(--wt-ui-radius) !important;
    background: #0F1318 !important;
    box-shadow:
        4px 4px 0 rgba(5, 7, 10, .84),
        0 14px 30px rgba(0, 0, 0, .12) !important;
}

.wt-tutorial-card::before {
    content: "";
    position: absolute;
    z-index: 5;
    left: 14px;
    top: 0;
    width: 34px;
    height: 3px;
    background: var(--wt-color-primary);
    pointer-events: none;
}

.wt-tutorial-card:nth-child(even)::before {
    background: var(--wt-color-interface);
}

.wt-tutorial-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(192, 254, 4, .42) !important;
    box-shadow:
        5px 5px 0 rgba(5, 7, 10, .88),
        0 18px 34px rgba(0, 0, 0, .16) !important;
}

.wt-tutorial-card__media {
    border-bottom: 1px solid var(--wt-ui-edge) !important;
    background: #0A0D11 !important;
}

.wt-tutorial-card__image {
    opacity: .82 !important;
    filter: saturate(.78) contrast(1.03) !important;
}

.wt-tutorial-card:hover .wt-tutorial-card__image {
    opacity: .96 !important;
    filter: saturate(.94) contrast(1.03) !important;
}

.wt-tutorial-card__placeholder {
    background-image:
        linear-gradient(var(--wt-ui-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--wt-ui-grid) 1px, transparent 1px) !important;
}

.wt-tutorial-card__play {
    width: 42px !important;
    height: 42px !important;
    left: 15px !important;
    bottom: 14px !important;
    border: 2px solid var(--wt-ui-black) !important;
    border-radius: 2px !important;
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
    box-shadow: 3px 3px 0 var(--wt-ui-black) !important;
}

.wt-tutorial-card__level {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 2px !important;
    background: rgba(10, 12, 16, .9) !important;
    color: #DCE3E8 !important;
    box-shadow: 2px 2px 0 rgba(5, 7, 10, .68);
}

.wt-tutorial-card__body {
    padding: 18px !important;
}

.wt-tutorial-card__eyebrow span:first-child {
    color: var(--wt-color-primary) !important;
}

.wt-tutorial-card h2 {
    color: var(--wt-color-interface) !important;
}

.wt-tutorial-card p {
    color: #8E99A2 !important;
}

.wt-tutorial-card__footer {
    border-top-color: var(--wt-ui-edge) !important;
}

.wt-tutorial-card__footer strong {
    color: var(--wt-color-primary) !important;
}

/* =============================================================
   SINGLE TUTORIAL ARTICLE
   ============================================================= */

body.single-wt_tutorial {
    background:
        radial-gradient(circle at 86% 0%, rgba(67, 230, 255, .035), transparent 28rem),
        radial-gradient(circle at 6% 15%, rgba(192, 254, 4, .04), transparent 28rem),
        var(--wt-color-void) !important;
}

.wt-tutorial-article {
    --wt-ta-bg: var(--wt-color-void);
    --wt-ta-panel: var(--wt-color-graphite);
    --wt-ta-panel-2: #0D1116;
    --wt-ta-line: var(--wt-ui-edge);
    --wt-ta-text: var(--wt-color-interface);
    --wt-ta-muted: var(--wt-color-muted);
    --wt-ta-lime: var(--wt-color-primary);
    --wt-ta-green: var(--wt-color-primary);
    --wt-ta-cyan: var(--wt-color-cyan);
    --wt-ta-orange: var(--wt-color-primary);
    --wt-ta-violet: var(--wt-color-cyan);
    --wt-ta-black: var(--wt-ui-black);
}

.wt-tutorial-breadcrumb a:hover {
    color: var(--wt-color-primary) !important;
}

.wt-tutorial-article__kicker {
    color: var(--wt-color-primary) !important;
}

.wt-tutorial-article__kicker i {
    width: 9px !important;
    height: 9px !important;
    border: 2px solid var(--wt-ui-black);
    border-radius: 1px !important;
    background: var(--wt-color-primary) !important;
    box-shadow: 2px 2px 0 var(--wt-ui-black) !important;
}

.wt-tutorial-article__meta span {
    border: 1px solid var(--wt-ui-edge) !important;
    border-radius: 2px !important;
    background: #0D1116 !important;
    color: #85919B !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

.wt-tutorial-article__cover {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: #0B0F14 !important;
    box-shadow:
        6px 6px 0 rgba(5, 7, 10, .9),
        0 18px 40px rgba(0, 0, 0, .18) !important;
}

.wt-tutorial-article__cover-label {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 2px !important;
    background: rgba(10, 12, 16, .92) !important;
    color: var(--wt-color-primary) !important;
    box-shadow: 2px 2px 0 rgba(5, 7, 10, .74);
}

.wt-tutorial-back,
.wt-tutorial-side-card {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: #0F1318 !important;
}

.wt-tutorial-back {
    box-shadow: 3px 3px 0 rgba(5, 7, 10, .68);
}

.wt-tutorial-back:hover {
    border-color: rgba(192, 254, 4, .36) !important;
    color: var(--wt-color-primary) !important;
}

.wt-tutorial-side-card {
    position: relative;
    overflow: hidden;
}

.wt-tutorial-side-card::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 0;
    width: 30px;
    height: 2px;
    background: var(--wt-color-primary);
}

.wt-tutorial-side-card__label {
    color: var(--wt-color-primary) !important;
}

.wt-tutorial-facts > div {
    border-bottom-color: var(--wt-ui-edge) !important;
}

.wt-tutorial-toc a {
    border-radius: 2px !important;
}

.wt-tutorial-toc a:hover,
.wt-tutorial-toc a.is-active {
    background: rgba(192, 254, 4, .045) !important;
}

.wt-tutorial-progress {
    border-radius: 0 !important;
    background: var(--wt-ui-edge) !important;
}

.wt-tutorial-progress span {
    background: var(--wt-color-primary) !important;
}

.wt-tutorial-node img {
    border: 1px solid var(--wt-ui-edge);
    border-radius: 2px !important;
    background: #0D1116;
}

.wt-tutorial-article__content-card {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: #0F1318 !important;
    box-shadow:
        5px 5px 0 rgba(5, 7, 10, .80),
        0 16px 34px rgba(0, 0, 0, .14);
}

.wt-tutorial-video {
    border-bottom-color: var(--wt-ui-edge) !important;
}

.wt-tutorial-video__overlay {
    background:
        radial-gradient(circle at center, rgba(192, 254, 4, .055), transparent 38%),
        rgba(7, 9, 10, .94) !important;
}

.wt-tutorial-video__overlay > span {
    border: 3px solid var(--wt-ui-black) !important;
    border-radius: 3px !important;
    background: var(--wt-color-primary) !important;
    color: var(--wt-color-void) !important;
    box-shadow: 4px 4px 0 var(--wt-ui-black) !important;
}

.wt-tutorial-entry h2::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 12px;
    background: var(--wt-color-primary);
}

.wt-tutorial-entry a {
    color: var(--wt-color-primary) !important;
}

.wt-tutorial-entry img,
.wt-tutorial-entry video,
.wt-tutorial-entry .gif-placeholder,
.wt-tutorial-entry .doc-image-wrapper,
.wt-tutorial-entry .param-table,
.wt-tutorial-entry pre {
    border-radius: 4px !important;
}

.wt-tutorial-entry .gif-placeholder,
.wt-tutorial-entry .doc-image-wrapper,
.wt-tutorial-entry .param-table,
.wt-tutorial-entry pre {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    background: #0D1116 !important;
    box-shadow: 3px 3px 0 rgba(5, 7, 10, .58);
}

.wt-tutorial-entry .pt-head,
.wt-tutorial-entry .gif-caption {
    border-color: var(--wt-ui-edge) !important;
    background: #12171D !important;
}

.wt-tutorial-entry .pt-row {
    border-top-color: var(--wt-ui-edge) !important;
}

.wt-tutorial-entry .warning-box,
.wt-tutorial-entry .info-box {
    border: 1px solid var(--wt-ui-edge-strong) !important;
    border-radius: 4px !important;
    background: #0D1116 !important;
    box-shadow: 3px 3px 0 rgba(5, 7, 10, .56);
}

.wt-tutorial-entry .warning-box {
    border-left: 3px solid var(--wt-color-primary) !important;
}

.wt-tutorial-entry .info-box {
    border-left: 3px solid var(--wt-color-cyan) !important;
}

.wt-tutorial-entry .warning-icon-wrap,
.wt-tutorial-entry .info-icon-wrap {
    border-radius: 2px !important;
}

.wt-tutorial-entry .warning-icon-wrap {
    background: rgba(192, 254, 4, .08) !important;
    color: var(--wt-color-primary) !important;
}

.wt-tutorial-entry .info-icon-wrap {
    background: rgba(67, 230, 255, .07) !important;
    color: var(--wt-color-cyan) !important;
}

.wt-tutorial-entry blockquote {
    border-radius: 0 4px 4px 0 !important;
    border-left-color: var(--wt-color-primary) !important;
    background:
        linear-gradient(90deg, rgba(192, 254, 4, .04), transparent),
        #0D1116 !important;
}

/* -------------------------------------------------------------
   Responsive fixes for V3 pages
   ------------------------------------------------------------- */

@media (max-width: 980px) {
    .wt-node-asset-page .asset-blueprint__preview {
        border-right: 0 !important;
        border-bottom: 1px solid var(--wt-ui-edge) !important;
    }

    .wt-tutorials-toolbar {
        flex-direction: column;
    }

    .wt-tutorial-search {
        width: 100% !important;
    }
}

@media (max-width: 700px) {
    .wt-node-asset-page .asset-blueprint,
    .wt-tutorial-article__content-card,
    .wt-tutorial-article__cover {
        box-shadow:
            4px 4px 0 rgba(5, 7, 10, .86),
            0 14px 28px rgba(0, 0, 0, .14) !important;
    }

    .wt-node-asset-page .asset-blueprint__image-wrap {
        height: 240px !important;
        padding: 24px !important;
    }

    .wt-tutorials-toolbar {
        padding: 10px;
    }
}

@media (max-width: 470px) {
    .wt-node-asset-page .asset-blueprint__image-wrap {
        height: 210px !important;
    }

    .wt-node-asset-page .asset-blueprint__spec {
        padding: 18px !important;
    }

    .wt-tutorial-card,
    .wt-tutorial-article__content-card,
    .wt-tutorial-article__cover {
        box-shadow: 3px 3px 0 rgba(5, 7, 10, .82) !important;
    }
}

/* =============================================================
   ORBITRON DISPLAY TYPOGRAPHY / V4

   Typeface roles:
   - Orbitron: brand, display headings, selected product CTAs
   - Inter: body copy, descriptions, long-form reading
   - JetBrains Mono: code, metadata, technical labels

   This intentionally avoids applying Orbitron to every text node.
   ============================================================= */

:root {
    --wt-font-display: "Orbitron", "Inter", ui-sans-serif, system-ui, sans-serif;
    --wt-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wt-font-tech: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* Keep long-form reading neutral and comfortable. */
body:not(.wp-admin),
.wt-home-page,
.wt-atlas-page,
.wt-about-page,
.wt-doc-page,
.wt-tutorials-page,
.wt-tutorial-article,
.wt-node-asset-page {
    font-family: var(--wt-font-body);
}

/* -------------------------------------------------------------
   Global brand + primary product actions
   ------------------------------------------------------------- */

.wt-global-brand__name {
    font-family: var(--wt-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.04em !important;
}

.wt-global-brand__name strong {
    font-family: inherit !important;
    font-weight: inherit !important;
}

.wt-global-cta,
.wt-home-page .hero-btn.primary,
.wt-atlas-page .btn-primary,
.wt-about-page .btn-primary,
.wt-node-asset-page .btn.primary,
.wt-tutorial-filter.is-active {
    font-family: var(--wt-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
}

/* Navigation stays technical rather than becoming display-heavy. */
.wt-global-nav a,
.wt-home-page .hero-product-mark,
.wt-home-page .hero-build-meta,
.wt-home-page .feature-kicker,
.wt-home-page .media-top,
.wt-home-page .metric-label,
.wt-atlas-page .catalog-meta,
.wt-doc-page .wt-doc-search-label,
.wt-doc-page .side-title,
.wt-doc-page .toc-title,
.wt-tutorials-kicker,
.wt-tutorial-card__eyebrow,
.wt-tutorial-article__kicker,
.wt-tutorial-side-card__label {
    font-family: var(--wt-font-tech) !important;
}

/* -------------------------------------------------------------
   Homepage
   ------------------------------------------------------------- */

.wt-home-page .hero-brand-wordmark {
    font-family: var(--wt-font-display) !important;
    font-weight: 900 !important;
    letter-spacing: -.055em !important;
    line-height: .80 !important;
    transform: scaleX(.94) !important;
}

.wt-home-page .hero-beta-stamp strong {
    font-family: var(--wt-font-display) !important;
    font-weight: 900 !important;
    letter-spacing: .035em !important;
}

.wt-home-page .section-title,
.wt-home-page .callout h2,
.wt-home-page .ai-card h2 {
    font-family: var(--wt-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
    line-height: 1.02 !important;
}

.wt-home-page .feature-title h3,
.wt-home-page .mini-card h4 {
    font-family: var(--wt-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
    line-height: 1.12 !important;
}

.wt-home-page .metric-value {
    font-family: var(--wt-font-display) !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
}

.wt-home-page .more-item {
    font-family: var(--wt-font-body) !important;
}

/* -------------------------------------------------------------
   Assets Library
   ------------------------------------------------------------- */

.wt-atlas-page h1,
.wt-atlas-page .section-head h2 {
    font-family: var(--wt-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.05em !important;
    line-height: .98 !important;
}

.wt-atlas-page .wt-atlas-index__number {
    font-family: var(--wt-font-display) !important;
    font-weight: 900 !important;
    letter-spacing: -.055em !important;
}

.wt-atlas-page .wt-asset-card h3 {
    font-family: var(--wt-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
    line-height: 1.16 !important;
}

.wt-atlas-page .wt-asset-card p {
    font-family: var(--wt-font-body) !important;
}

.wt-atlas-page .wt-asset-card .tag,
.wt-atlas-page .wt-asset-card .asset-meta span,
.wt-atlas-page .filter,
.wt-atlas-page .wt-atlas-index__links a {
    font-family: var(--wt-font-tech) !important;
}

/* -------------------------------------------------------------
   Single asset
   ------------------------------------------------------------- */

.wt-node-asset-page h1 {
    font-family: var(--wt-font-display) !important;
    font-weight: 900 !important;
    letter-spacing: -.055em !important;
    line-height: .88 !important;
}

.wt-node-asset-page .asset-section-label span,
.wt-node-asset-page .asset-entry-content h2 {
    font-family: var(--wt-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
}

.wt-node-asset-page .asset-entry-content h3,
.wt-node-asset-page .asset-entry-content h4 {
    font-family: var(--wt-font-body) !important;
    font-weight: 800 !important;
}

.wt-node-asset-page .asset-preview-stage__caption strong {
    font-family: var(--wt-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}

.wt-node-asset-page .asset-type-label,
.wt-node-asset-page .asset-breadcrumb,
.wt-node-asset-page .asset-blueprint__coordinate,
.wt-node-asset-page .asset-blueprint__spec-head,
.wt-node-asset-page .asset-spec-list dt,
.wt-node-asset-page .asset-compatibility b,
.wt-node-asset-page .asset-revision-row > b {
    font-family: var(--wt-font-tech) !important;
}

/* -------------------------------------------------------------
   Documentation
   ------------------------------------------------------------- */

.wt-doc-page h1 {
    font-family: var(--wt-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.05em !important;
    line-height: .98 !important;
}

.wt-doc-page .wt-doc-card h2,
.wt-doc-page .content > h2,
.wt-doc-page .doc-body .cs-title {
    font-family: var(--wt-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    line-height: 1.1 !important;
}

.wt-doc-page .content h3,
.wt-doc-page .content h4,
.wt-doc-page .doc-body p,
.wt-doc-page .doc-body li {
    font-family: var(--wt-font-body) !important;
}

/* -------------------------------------------------------------
   Tutorials archive
   ------------------------------------------------------------- */

.wt-tutorials-hero h1 {
    font-family: var(--wt-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.05em !important;
    line-height: .96 !important;
}

.wt-tutorial-card h2 {
    font-family: var(--wt-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
    line-height: 1.16 !important;
}

.wt-tutorial-card p,
.wt-tutorials-hero__copy > p {
    font-family: var(--wt-font-body) !important;
}

/* -------------------------------------------------------------
   Single tutorial
   ------------------------------------------------------------- */

.wt-tutorial-article__hero h1 {
    font-family: var(--wt-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.05em !important;
    line-height: .98 !important;
}

.wt-tutorial-entry h2 {
    font-family: var(--wt-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
}

.wt-tutorial-entry h3,
.wt-tutorial-entry h4,
.wt-tutorial-entry p,
.wt-tutorial-entry li {
    font-family: var(--wt-font-body) !important;
}

.wt-tutorial-video__overlay strong {
    font-family: var(--wt-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: .035em !important;
}

/* -------------------------------------------------------------
   About / other redesigned display pages
   ------------------------------------------------------------- */

.wt-about-page h1,
.wt-about-page h2 {
    font-family: var(--wt-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
    line-height: 1.02 !important;
}

.wt-about-page h3 {
    font-family: var(--wt-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
}

/* -------------------------------------------------------------
   Small-screen tuning
   Orbitron is wider than Inter/Outfit; loosen transforms where needed.
   ------------------------------------------------------------- */

@media (max-width: 760px) {
    .wt-home-page .hero-brand-wordmark {
        letter-spacing: -.045em !important;
        transform: scaleX(.91) !important;
    }

    .wt-global-brand__name {
        letter-spacing: -.035em !important;
    }

    .wt-home-page .section-title,
    .wt-atlas-page h1,
    .wt-doc-page h1,
    .wt-node-asset-page h1,
    .wt-tutorials-hero h1,
    .wt-tutorial-article__hero h1 {
        letter-spacing: -.04em !important;
    }
}

@media (max-width: 470px) {
    .wt-home-page .hero-brand-wordmark {
        letter-spacing: -.035em !important;
        transform: scaleX(.88) !important;
    }

    .wt-global-brand__name {
        font-weight: 700 !important;
    }
}
/* Homepage store-state overrides loaded after homepage.css. */
.wt-home-page .hero-btn[aria-disabled="true"],
.wt-home-page .hero-btn[aria-disabled="true"]:hover {
    cursor: not-allowed;
    opacity: .46;
    filter: saturate(.55);
    transform: none !important;
    border-color: var(--wt-ui-edge-strong) !important;
    background: var(--wt-color-graphite) !important;
    box-shadow: 2px 2px 0 var(--wt-ui-black) !important;
}

