/* ============================================================================
   VIDEOTRONICMAKER.COM — ENGINEERING SKETCH WORKBENCH STYLESHEET (vtm-sketch.css)
   Visual Reference: Hand-Drafted Chalkboard & Colored-Pencil CAD Workbench
   Palette:
     - Slate Canvas: #14171a
     - Chalk Ink: #d8dee9 (75% primary / 25% construction)
     - Copper Orange / Golden Amber: #db7a31 / #eda63b
     - Cerulean Blue / Deep Navy: #2d8bea / #003974
     - Emerald / Seafoam / Deep Forest: #1f844d / #46a568 / #00471b
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Major+Mono+Display&family=Orbitron:wght@700&family=Press+Start+2P&family=Share+Tech+Mono&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');

:root {
    --sketch-bg: #040914;
    --sketch-surface: #081426;
    --sketch-card: #0c1e34;
    --sketch-line: #152c4a;
    --sketch-linebright: #234a78;
    --sketch-chalk: rgba(216, 222, 233, 0.78);
    --sketch-chalk-strong: rgba(236, 240, 246, 0.92);
    --sketch-chalk-dim: rgba(216, 222, 233, 0.26);
    --sketch-orange: #db7a31;
    --sketch-amber: #eda63b;
    --sketch-blue: #2d8bea;
    --sketch-navy: #003974;
    --sketch-emerald: #1f844a;
    --sketch-seafoam: #46a568;
    --sketch-forest: #00471b;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--sketch-bg);
    color: #e5e9f0;
    font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
    overflow-x: clip;
}

/* 1. Smooth Deep Navy / Obsidian Workbench Canvas & Hero Gradient */
.sketch-grid-bg {
    background-color: var(--sketch-bg);
    background-image: none;
}

.vtm-hero-gradient {
    background: linear-gradient(135deg, #061e3d 0%, #092d5c 52%, #040e1d 100%);
}

/* CAD Millimeter Ruler Tick Patterns */
.ruler-top {
    background-image:
        linear-gradient(to right, #234a78 1px, transparent 1px),
        linear-gradient(to right, #152c4a 1px, transparent 1px);
    background-size: 50px 100%, 10px 40%;
    background-repeat: repeat-x;
    background-position: bottom;
}

.ruler-left {
    background-image:
        linear-gradient(to bottom, #234a78 1px, transparent 1px),
        linear-gradient(to bottom, #152c4a 1px, transparent 1px);
    background-size: 100% 50px, 40% 10px;
    background-repeat: repeat-y;
    background-position: right;
}

/* Smooth Laser Sweep Animation across Hero Background */
@keyframes laserSweep {
    0% { top: 0%; opacity: 0; }
    15% { opacity: 0.75; }
    85% { opacity: 0.75; }
    100% { top: 100%; opacity: 0; }
}
.laser-line {
    animation: laserSweep 8s ease-in-out infinite;
}

/* Hologram Card Glow on Hover */
.hologram-card {
    transition: all 0.3s ease;
}
.hologram-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px -5px rgba(45, 139, 234, 0.3), 0 0 15px rgba(219, 122, 49, 0.22);
}

/* 2. Reusable .draft-box with 4-Corner 90° Extending Overshoot Ticks */
.draft-box {
    position: relative;
    border: 1.25px solid var(--sketch-chalk);
    background: rgba(12, 30, 52, 0.88);
    box-shadow: inset 0 0 18px rgba(4, 9, 20, 0.55);
}

.draft-box::before,
.draft-box::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

/* Horizontal overshoot extensions (top & bottom edges extend 9px left & right) */
.draft-box::before {
    top: -1.5px;
    bottom: -1.5px;
    left: -9px;
    right: -9px;
    border-top: 1.25px solid var(--sketch-chalk);
    border-bottom: 1.25px solid var(--sketch-chalk);
}

/* Vertical overshoot extensions (left & right edges extend 9px top & bottom) */
.draft-box::after {
    left: -1.5px;
    right: -1.5px;
    top: -9px;
    bottom: -9px;
    border-left: 1.25px solid var(--sketch-chalk);
    border-right: 1.25px solid var(--sketch-chalk);
}

.draft-box-sm::before {
    left: -6px;
    right: -6px;
}
.draft-box-sm::after {
    top: -6px;
    bottom: -6px;
}

/* ==========================================================================
   VTM STUDIO CTA BUTTON: ORANGE BADGE IN BOTTOM DOCK (SITE-WIDE)
   Permanent 1:1 match across Home Page and all Subpages
   ========================================================================== */
.vtm-cta-btn,
#bottom-mode-dock a.vtm-cta-btn,
#bottom-mode-dock a[aria-label="Get VTM Studio"],
a.vtm-cta-btn {
    display: inline-flex !important;
    background-color: #081426 !important;
    background-image: none !important;
    border: 1.25px solid #db7a31 !important;
    color: #db7a31 !important;
    box-shadow: 0 0 16px rgba(219, 122, 49, 0.45) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 14px !important;
}

.vtm-cta-btn::before,
.vtm-cta-btn::after,
#bottom-mode-dock a.vtm-cta-btn::before,
#bottom-mode-dock a.vtm-cta-btn::after,
#bottom-mode-dock a[aria-label="Get VTM Studio"]::before,
#bottom-mode-dock a[aria-label="Get VTM Studio"]::after {
    border-color: #db7a31 !important;
}

.vtm-cta-btn span,
#bottom-mode-dock a.vtm-cta-btn span,
#bottom-mode-dock a[aria-label="Get VTM Studio"] span {
    color: #db7a31 !important;
    font-weight: 700 !important;
}

.vtm-cta-mobile {
    display: none;
}

.vtm-cta-desktop {
    display: inline;
}

#pricing-tiers {
    scroll-margin-top: 75px !important;
}

.vtm-cta-btn:hover,
#bottom-mode-dock a.vtm-cta-btn:hover,
#bottom-mode-dock a[aria-label="Get VTM Studio"]:hover {
    background-color: #db7a31 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(219, 122, 49, 0.75) !important;
}

.vtm-cta-btn:hover::before,
.vtm-cta-btn:hover::after,
#bottom-mode-dock a.vtm-cta-btn:hover::before,
#bottom-mode-dock a.vtm-cta-btn:hover::after {
    border-color: #ffffff !important;
}

.vtm-cta-btn:hover span,
#bottom-mode-dock a.vtm-cta-btn:hover span,
#bottom-mode-dock a[aria-label="Get VTM Studio"]:hover span {
    color: #ffffff !important;
}

/* Double-lined hand-sketched inner border accent */
.draft-inner-frame {
    border: 1px solid rgba(216, 222, 233, 0.32);
}

/* 3. Smooth Deep Navy & VTM Brand Console Panels (zero diagonal hatching) */
.pencil-hatch-blue {
    background-color: #081426; /* vtmsurface Component Plate Navy */
    background-image: none;
}

.pencil-hatch-copper {
    background-color: #0c1e34; /* vtmcard Dark Console Card with warm copper accent */
    background-image: none;
}

.pencil-hatch-green {
    background-color: #071f1a; /* Deep forest console card tint of #00471b */
    background-image: none;
}

.pencil-gauge-copper {
    background: #db7a31;
}

.pencil-gauge-amber {
    background: #eda63b;
}

.pencil-gauge-blue {
    background: #2d8bea;
}

.pencil-gauge-green {
    background: #46a568;
}

.pencil-tab-orange {
    background-color: #db7a31;
    background-image: none;
}

/* 4. Architectural Hand-Drafted Typography & Callouts */
.sketch-heading {
    font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #ecf0f6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.sketch-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Dimension lines <--- 412px ---> & vertical ▲ 280px ▼ with scroll-triggered CAD expansion */
.dim-line-h {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--sketch-chalk);
    font-family: 'Rajdhani', monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    user-select: none;
    opacity: 0.35;
    transition: opacity 0.45s ease, color 0.45s ease;
}
.dim-line-h.dim-revealed {
    opacity: 1;
}
.dim-line-h::before,
.dim-line-h::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(216, 222, 233, 0.52);
    transform: scaleX(0);
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease;
    will-change: transform;
}
.dim-line-h::before {
    margin-right: 10px;
    transform-origin: right center;
}
.dim-line-h::after {
    margin-left: 10px;
    transform-origin: left center;
}
.dim-line-h.dim-revealed::before,
.dim-line-h.dim-revealed::after {
    transform: scaleX(1);
}
.dim-line-h.dim-counting {
    color: var(--sketch-amber);
}
.dim-line-h.dim-counting::before,
.dim-line-h.dim-counting::after {
    background: rgba(237, 166, 59, 0.78);
}

/* Vertical CAD dimension lines ▲ 280px ▼ */
.dim-line-v {
    opacity: 0.35;
    transition: opacity 0.45s ease, color 0.45s ease;
    user-select: none;
}
.dim-line-v.dim-revealed {
    opacity: 1;
}
.dim-line-v .dim-v-bar {
    transform: scaleY(0);
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease;
    will-change: transform;
}
.dim-line-v .dim-v-bar-top {
    transform-origin: center bottom;
}
.dim-line-v .dim-v-bar-bottom {
    transform-origin: center top;
}
.dim-line-v.dim-revealed .dim-v-bar {
    transform: scaleY(1);
}
.dim-line-v.dim-counting {
    color: var(--sketch-amber) !important;
}
.dim-line-v.dim-counting .dim-v-bar {
    background-color: rgba(237, 166, 59, 0.78) !important;
}
@media (prefers-reduced-motion: reduce) {
    .dim-line-h,
    .dim-line-v {
        opacity: 1;
    }
    .dim-line-h::before,
    .dim-line-h::after {
        transform: scaleX(1);
        transition: none;
    }
    .dim-line-v .dim-v-bar {
        transform: scaleY(1);
        transition: none;
    }
}

/* 5. Card Lift & Interactive Hover Glow */
.sketch-card-interactive {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.sketch-card-interactive:hover {
    transform: translate3d(0, -2px, 0);
    border-color: #ffffff;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 14px rgba(219, 122, 49, 0.22);
}

/* 6. Custom Drafting Scrollbars for Collapsible Drawers & Wire Gauge Table */
.sketch-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.sketch-scroll::-webkit-scrollbar-track {
    background: rgba(14, 18, 22, 0.85);
    border-left: 1px solid var(--sketch-chalk);
    border-right: 1px solid var(--sketch-chalk);
}
.sketch-scroll::-webkit-scrollbar-thumb {
    background: repeating-linear-gradient(
        -45deg,
        #003974 0px,
        #003974 4px,
        #2d8bea 4px,
        #2d8bea 8px
    );
    border: 1px solid rgba(45, 139, 234, 0.65);
}
.sketch-scroll::-webkit-scrollbar-thumb:hover {
    background: repeating-linear-gradient(
        -45deg,
        #db7a31 0px,
        #db7a31 4px,
        #eda63b 4px,
        #eda63b 8px
    );
    border-color: #eda63b;
}

/* 7. Bottom Mode Dock Active Indicator Bars (Match Reference Image 1:1) */
.dock-mode-btn {
    position: relative;
    transition: all 0.18s ease;
}
.dock-mode-btn.active {
    background: linear-gradient(180deg, rgba(219, 122, 49, 0.24) 0%, rgba(237, 166, 59, 0.08) 50%, rgba(219, 122, 49, 0.24) 100%);
    color: #eda63b !important;
}
.dock-mode-btn.active::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 6px;
    right: 6px;
    height: 3.5px;
    background: var(--sketch-orange);
    box-shadow: 0 0 10px var(--sketch-orange);
    border-radius: 2px;
}
.dock-mode-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 6px;
    right: 6px;
    height: 3.5px;
    background: var(--sketch-orange);
    box-shadow: 0 0 10px var(--sketch-orange);
    border-radius: 2px;
}

/* 8. AI Vision Target Reticle Overlay (GPU-Accelerated 60fps Lock-On) */
#sketch-vision-reticle {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    border: 1px dashed rgba(70, 165, 104, 0.85);
    background: rgba(31, 132, 77, 0.03);
    transition: width 0.14s ease-out, height 0.14s ease-out, opacity 0.15s ease;
    will-change: transform, width, height;
}

/* 9. Clean Screen Mode (Hides Callout Arrows & Reticle When Toggled) */
body.clean-screen-active .sketch-callout-overlay,
body.clean-screen-active #sketch-vision-reticle {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 10. VTM Labs (.labs-title), NEW FEATURE (.announcement-heading), & Tilted Showcase Cards */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.labs-title {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: -15px;
    margin-bottom: 24px;
}

.labs-title .letter {
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 0 8px rgba(94, 210, 237, 0.6);
    transition: all 0.2s ease-out;
    position: relative;
}

.labs-title .letter:nth-child(1) {
    font-family: 'Orbitron', sans-serif;
    font-size: 72px;
    color: #00a1c4;
    transform: rotate(-3deg);
    margin-right: -5px;
}

.labs-title .letter:nth-child(2) {
    font-family: 'Press Start 2P', cursive;
    font-size: 52px;
    color: #db7a31;
    transform: rotate(2deg);
    margin-left: -5px;
}

.labs-title .letter:nth-child(3) {
    font-family: 'Major Mono Display', monospace;
    font-size: 86px;
    color: #46a568;
    transform: rotate(-1deg);
    margin-right: -5px;
}

.labs-title .letter:nth-child(4) {
    font-family: 'Share Tech Mono', monospace;
    font-size: 58px;
    color: #eca53a;
    transform: rotate(3deg);
    margin-left: -5px;
}

.labs-title .letter:hover {
    transform: translateY(-5px) scale(1.1) rotate(0deg);
    text-shadow: 0 0 15px #5ed2ed, 0 0 25px #FF69B4;
    z-index: 2;
}

.announcement-heading {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 24px;
}

.announcement-letter {
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 0 8px rgba(94, 210, 237, 0.6);
    transition: all 0.2s ease-out;
    position: relative;
    margin: 0 -4px;
}

.announcement-letter:hover {
    transform: translateY(-5px) scale(1.1) rotate(0deg);
    text-shadow: 0 0 15px #5ed2ed, 0 0 25px #FF69B4;
    z-index: 2;
}

.announcement-letter:nth-child(4n+1) {
    font-family: 'Orbitron', sans-serif;
    font-size: 58px;
    color: #00a1c4;
    transform: rotate(-3deg);
}

.announcement-letter:nth-child(4n+2) {
    font-family: 'Press Start 2P', cursive;
    font-size: 42px;
    color: #db7a31;
    transform: rotate(2deg);
}

.announcement-letter:nth-child(4n+3) {
    font-family: 'Major Mono Display', monospace;
    font-size: 70px;
    color: #46a568;
    transform: rotate(-1deg);
}

.announcement-letter:nth-child(4n+0) {
    font-family: 'Share Tech Mono', monospace;
    font-size: 46px;
    color: #eca53a;
    transform: rotate(3deg);
}

@media (max-width: 768px) {
    .labs-title .letter:nth-child(1) { font-size: 48px; }
    .labs-title .letter:nth-child(2) { font-size: 38px; }
    .labs-title .letter:nth-child(3) { font-size: 54px; }
    .labs-title .letter:nth-child(4) { font-size: 42px; }
    .announcement-letter:nth-child(4n+1) { font-size: 40px; }
    .announcement-letter:nth-child(4n+2) { font-size: 30px; }
    .announcement-letter:nth-child(4n+3) { font-size: 48px; }
    .announcement-letter:nth-child(4n+0) { font-size: 34px; }
}

.sci-art-slogan {
    font-family: 'Major Mono Display', monospace;
    font-size: 20px;
    color: #a0d8f0;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.4;
    text-align: center;
}

.sci-art-intro-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16.5px;
    line-height: 1.75;
    max-width: 760px;
    margin: 0 auto 22px auto;
    color: #c0c8d0;
    letter-spacing: 0.5px;
    text-align: center;
}

.sci-art-intro-text .material-symbols-outlined {
    font-size: 26px;
    vertical-align: -5px;
    margin: 0 4px;
    color: #5ed2ed;
}

.innovation-stream-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px;
    color: #5ed2ed;
    margin-top: 12px;
    margin-bottom: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.innovation-stream-text .material-symbols-outlined {
    font-size: 26px;
    color: #5ed2ed;
}

.cta-pre-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 17px;
    line-height: 1.6;
    color: #a0d8f0;
    margin: 22px auto 18px auto;
    text-align: center;
    letter-spacing: 0.8px;
    max-width: 680px;
}

@keyframes vtm-badge-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.system-update-badge {
    background-color: transparent;
    color: #39FF14;
    padding: 3px 8px;
    border-radius: 3px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.88em;
    text-transform: uppercase;
    margin-left: 6px;
    display: inline-block;
    box-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
    animation: vtm-badge-blink 1s steps(1, start) infinite;
}

.sci-art-lab-item {
    background-color: #1a2c3a;
    border: 2px solid #3d5a73;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.sci-art-lab-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65);
    border-color: #5ed2ed;
}

.sci-art-lab-avatar {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 190px;
    height: 190px;
    margin: 0 auto 14px auto;
    display: block;
}

.sci-art-thumb-title,
.sci-art-thumb-title .title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #e0e6eb;
    margin-top: 6px;
    margin-bottom: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
}

.sci-art-thumb-desc,
.sci-art-thumb-desc p {
    font-family: 'Share Tech Mono', monospace;
    font-size: 15.5px;
    color: #a0d8f0;
    line-height: 1.6;
    text-align: center;
}

.btn-container {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 18px;
}

a.share-journey-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #5ed2ed;
    background: transparent;
    border: 1px solid #3d5a73;
    padding: 13px 24px;
    border-radius: 8px;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

a.share-journey-btn:hover {
    color: #ffffff;
    background-color: #00a1c4;
    border-color: #5ed2ed;
    box-shadow: 0 0 20px #5ed2ed, 0 0 30px #5ed2ed;
    transform: translateY(-3px);
}

a.share-journey-btn .material-symbols-outlined {
    font-size: 24px;
    margin-left: 8px;
    line-height: 1;
}

/* ============================================================================
   VTM MONTAGE BRANDING BACKGROUND: DOTTED GRID + LIVE SCROLLING TERMINAL +
   FULL-BLEED FLOWING CAD SPLINES, SCHEMATIC WATERMARKS & ANIMATING BOARD HUDS
   ============================================================================ */
#vtm-montage-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #040914;
    background-image:
        radial-gradient(circle, rgba(148, 163, 184, 0.24) 1px, transparent 1px),
        linear-gradient(to right, rgba(21, 44, 74, 0.38) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(21, 44, 74, 0.38) 1px, transparent 1px),
        linear-gradient(to right, rgba(35, 74, 120, 0.28) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(35, 74, 120, 0.28) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px, 24px 24px, 96px 96px, 96px 96px;
    background-position: 0 0;
}

#vtm-bg-terminal-wrap {
    position: absolute;
    top: 44px;
    bottom: 36px;
    left: 28px;
    width: min(46vw, 720px);
    overflow: hidden;
    pointer-events: none;
    opacity: 0.22;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.9) 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.9) 88%, transparent 100%);
}

#vtm-bg-terminal-stream {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre;
    will-change: transform;
}

.vtm-term-line {
    display: flex;
    align-items: baseline;
    min-height: 18px;
}

.vtm-term-lnum {
    display: inline-block;
    width: 40px;
    color: #64748b;
    user-select: none;
    flex-shrink: 0;
}

.vtm-term-code {
    color: #2d8bea;
}

.vtm-term-cursor {
    display: inline-block;
    width: 7px;
    height: 13px;
    background-color: #db7a31;
    vertical-align: -2px;
    margin-left: 2px;
    animation: vtmTermBlink 0.75s steps(2, start) infinite;
}

@keyframes vtmTermBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Full-Bleed Section Background Layer (Flows across and into adjacent blocks) */
.vtm-sec-board-layer {
    position: absolute;
    inset: -48px 0 -48px 0;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.vtm-sec-board-Host > *:not(.vtm-sec-board-layer):not(.vtm-cutout-bg):not(.cad-grid-bg):not(svg.absolute):not(img.mix-blend-screen) {
    position: relative;
    z-index: 1;
}

.vtm-schem-watermark {
    display: none !important;
}

.vtm-flow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    overflow: visible;
}

/* GPU-Accelerated Animations: Flowing Signal Pulses, Rotating Polar Rings, & HUD Callouts */
@keyframes vtmSignalFlow {
    0% { stroke-dashoffset: 320; }
    100% { stroke-dashoffset: 0; }
}

@keyframes vtmPolarSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes vtmHudLineDraw {
    0%, 10% { stroke-dashoffset: 180; opacity: 0.25; }
    32%, 82% { stroke-dashoffset: 0; opacity: 0.95; }
    96%, 100% { stroke-dashoffset: 180; opacity: 0.25; }
}

@keyframes vtmHudNodePing {
    0%, 100% { transform: scale(0.85); opacity: 0.45; }
    50% { transform: scale(1.45); opacity: 1; }
}

@keyframes vtmHudBoxPulse {
    0%, 12% { opacity: 0.22; }
    35%, 80% { opacity: 0.92; }
    96%, 100% { opacity: 0.22; }
}

@keyframes vtmTangentFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.vtm-signal-pulse {
    stroke-dasharray: 28 292;
    animation: vtmSignalFlow 7.5s linear infinite;
}

.vtm-signal-pulse-alt {
    stroke-dasharray: 22 298;
    animation: vtmSignalFlow 9.5s linear reverse infinite;
}

.vtm-polar-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: vtmPolarSpin 48s linear infinite;
}

.vtm-hud-leader {
    stroke-dasharray: 180;
    stroke-dashoffset: 0;
    animation: vtmHudLineDraw 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.vtm-hud-leader-alt {
    stroke-dasharray: 180;
    stroke-dashoffset: 0;
    animation: vtmHudLineDraw 11s cubic-bezier(0.22, 1, 0.36, 1) 2.5s infinite;
}

.vtm-hud-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: vtmHudNodePing 3.2s ease-in-out infinite;
}

.vtm-hud-node-alt {
    transform-box: fill-box;
    transform-origin: center;
    animation: vtmHudNodePing 4.1s ease-in-out 1.4s infinite;
}

.vtm-hud-callout {
    animation: vtmHudBoxPulse 9s ease-in-out infinite;
}

.vtm-hud-callout-alt {
    animation: vtmHudBoxPulse 11s ease-in-out 2.5s infinite;
}

.vtm-tangent-group {
    animation: vtmTangentFloat 6.5s ease-in-out infinite;
}

/* AI Vision Wireframe Sensor Scanning & Bracket Target Animations */
@keyframes vtmAiScanSweep {
    0%, 100% { transform: translateY(-24px); opacity: 0.15; }
    50% { transform: translateY(24px); opacity: 0.95; }
}

.vtm-ai-scan-line {
    transform-box: fill-box;
    transform-origin: center;
    animation: vtmAiScanSweep 3s ease-in-out infinite;
}

@keyframes vtmAiBracketPulse {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    50% { transform: scale(1.06); opacity: 1; }
}

.vtm-ai-bracket {
    transform-box: fill-box;
    transform-origin: center;
    animation: vtmAiBracketPulse 2.8s ease-in-out infinite;
}

/* ============================================================================
   NATURAL SEQUENTIAL PEN TOOL BEZIER DRAWING ENGINE (12s Master Cycle)
   1. Anchor 1 [■] snaps in (0%..6%)
   2. Tangent Handle 1 [●───■] pulls out from Anchor 1 (6%..16%)
   3. Bezier Segment 1 draws along spline to Anchor 2 (16%..36%)
   4. Anchor 2 [■] snaps in & pulls out symmetric Tangent Handle 2 [●───■───●] (34%..50%)
   5. Bezier Segment 2 draws along spline to Anchor 3 (50%..72%)
   6. Anchor 3 [■] + Tangent Handle 3 snap in (70%..80%), hold full spline (80%..93%), reset (93%..100%)
   ============================================================================ */
@keyframes vtmPenAnchor1 {
    0%, 2% { opacity: 0; transform: scale(0.2); }
    6%, 92% { opacity: 1; transform: scale(1); }
    97%, 100% { opacity: 0; transform: scale(0.2); }
}

@keyframes vtmPenHandle1 {
    0%, 6% { opacity: 0; transform: scale(0.05); }
    15%, 92% { opacity: 0.95; transform: scale(1); }
    97%, 100% { opacity: 0; transform: scale(0.05); }
}

@keyframes vtmPenSeg1 {
    0%, 15% { stroke-dashoffset: 900; opacity: 0; }
    17% { opacity: 1; }
    36%, 92% { stroke-dashoffset: 0; opacity: 1; }
    97%, 100% { stroke-dashoffset: 900; opacity: 0; }
}

@keyframes vtmPenAnchor2 {
    0%, 33% { opacity: 0; transform: scale(0.2); }
    38%, 92% { opacity: 1; transform: scale(1); }
    97%, 100% { opacity: 0; transform: scale(0.2); }
}

@keyframes vtmPenHandle2 {
    0%, 37% { opacity: 0; transform: scale(0.05); }
    49%, 92% { opacity: 0.95; transform: scale(1); }
    97%, 100% { opacity: 0; transform: scale(0.05); }
}

@keyframes vtmPenSeg2 {
    0%, 49% { stroke-dashoffset: 900; opacity: 0; }
    51% { opacity: 1; }
    72%, 92% { stroke-dashoffset: 0; opacity: 1; }
    97%, 100% { stroke-dashoffset: 900; opacity: 0; }
}

@keyframes vtmPenAnchor3 {
    0%, 69% { opacity: 0; transform: scale(0.2); }
    75%, 92% { opacity: 1; transform: scale(1); }
    97%, 100% { opacity: 0; transform: scale(0.2); }
}

@keyframes vtmPenHandle3 {
    0%, 73% { opacity: 0; transform: scale(0.05); }
    82%, 92% { opacity: 0.95; transform: scale(1); }
    97%, 100% { opacity: 0; transform: scale(0.05); }
}

.vtm-pen-anchor-1,
.vtm-pen-anchor-2,
.vtm-pen-anchor-3,
.vtm-pen-handle-1,
.vtm-pen-handle-2,
.vtm-pen-handle-3 {
    transform-box: fill-box;
    transform-origin: center;
}

.vtm-pen-anchor-1 { animation: vtmPenAnchor1 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.vtm-pen-handle-1 { animation: vtmPenHandle1 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.vtm-pen-seg-1 {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: vtmPenSeg1 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.vtm-pen-anchor-2 { animation: vtmPenAnchor2 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.vtm-pen-handle-2 { animation: vtmPenHandle2 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.vtm-pen-seg-2 {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: vtmPenSeg2 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.vtm-pen-anchor-3 { animation: vtmPenAnchor3 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.vtm-pen-handle-3 { animation: vtmPenHandle3 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; }

main, footer, #vtm-shell-footer {
    position: relative;
    z-index: 1;
}

header, #vtm-shell-top, #vtm-main-site-header {
    z-index: 9000 !important;
}

header.sticky {
    position: sticky !important;
    top: 20px !important;
    z-index: 9000 !important;
}

/* Site-Wide Diagonal Sketch Colored Scrollbars */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background-color: #040914;
    border-left: 1px solid rgba(216, 222, 233, 0.35);
    border-top: 1px solid rgba(216, 222, 233, 0.35);
}

::-webkit-scrollbar-thumb {
    background-color: #db7a31;
    background-image: repeating-linear-gradient(
        -45deg,
        #db7a31 0px,
        #db7a31 5px,
        #eda63b 5px,
        #eda63b 10px
    );
    border: 1.5px solid #eda63b;
}

::-webkit-scrollbar-thumb:hover {
    background-image: repeating-linear-gradient(
        -45deg,
        #eda63b 0px,
        #eda63b 5px,
        #db7a31 5px,
        #db7a31 10px
    );
    border-color: #ecf0f6;
}

/* Semi-transparent dark section surfaces so the dotted grid, terminal, and flowing schematics show through */
.bg-vtmobsidian,
section.bg-vtmobsidian {
    background-color: rgba(4, 9, 20, 0.82) !important;
}

.bg-vtmsurface,
section.bg-vtmsurface,
main > section:not(.vtm-hero-gradient) {
    background-color: rgba(8, 20, 38, 0.84) !important;
}

#vtm-shell-top {
    position: fixed !important;
    top: 20px !important;
    left: 24px !important;
    right: 0 !important;
    z-index: 9000 !important;
}

body[data-sketch-sheet="mag"] #vtm-shell-top {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* VTM Studio 2.2 Collapsible Bottom Icon Navigation Dock */
#bottom-mode-dock {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

#bottom-mode-dock.dock-collapsed {
    transform: translateY(100%);
}

/* ============================================================================
   VTM STUDIO 2.2 — STRUCTURAL SKETCHED DOCK & CHALK STROKE ENGINE
   Concept Sketch Parity: Boxes form the structural shape of the menu bar
   ============================================================================ */

/* Chalk / Charcoal hand-sketched outline filter */
.vtm-chalk-stroke {
    filter: url(#vtm-chalk-filter);
}

/* The structural dock container */
#bottom-mode-dock.vtm-structural-dock {
    background: rgba(8, 20, 38, 0.96);
    border-top: 1.5px solid var(--sketch-chalk);
    box-shadow: 0 -4px 20px rgba(4, 9, 20, 0.65);
}

/* Mode Menu Tab Interactive Pulsing & Green Glow (Signals Collapse / Raise Affordance) */
@keyframes vtmTabGreenThrob {
    0%, 100% {
        box-shadow: 0 -2px 6px rgba(31, 132, 74, 0.35), 0 0 4px rgba(70, 165, 104, 0.25);
        border-color: #234a78;
        transform: translateX(-50%) scale(1);
    }
    50% {
        box-shadow: 0 -4px 14px rgba(70, 165, 104, 0.8), 0 0 10px rgba(70, 165, 104, 0.6), inset 0 0 6px rgba(70, 165, 104, 0.35);
        border-color: #46a568;
        transform: translateX(-50%) scale(1.025);
    }
}

#vtm-dock-toggle-btn {
    animation: vtmTabGreenThrob 2.4s ease-in-out infinite;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#vtm-dock-toggle-btn:hover {
    animation-play-state: paused;
    border-color: #46a568 !important;
    box-shadow: 0 -4px 16px rgba(70, 165, 104, 0.9), 0 0 12px rgba(70, 165, 104, 0.7), inset 0 0 8px rgba(70, 165, 104, 0.4) !important;
    transform: translateX(-50%) scale(1.04) !important;
}

/* Nav ribbon holding Option 5 Stepped Micro-Flange Terminal Faceplates */
.vtm-dock-ribbon {
    display: flex;
    align-items: center;
    height: 66px;
    padding: 2px 0;
    margin: 0;
    gap: 5px;
    overflow: visible !important;
}

/* Each navigation box: Container holding isolated Option 5 frame + razor-sharp content */
.vtm-dock-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(68px, 6.2vw, 84px);
    height: 62px;
    min-height: 62px;
    margin-right: 0;
    color: #ecf0f6;
    text-decoration: none;
    user-select: none;
    z-index: 1;
    background: transparent;
}

/* 1. Isolated Stepped Micro-Flange Terminal Frame (Option 5: 1px Engineering Hairline) */
.vtm-chalk-frame {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 38, 0.95);
    border: 1px solid rgba(216, 222, 233, 0.38);
    filter: none !important;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.15);
    pointer-events-none;
    z-index: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Deactivate rough hand-drawn overshoots */
.vtm-chalk-frame::before,
.vtm-chalk-frame::after {
    display: none !important;
}

/* Stepped Micro-Flange Terminal Tag (Option 5 Header Notch) */
.vtm-tag {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 1.5px 4.5px;
    font-size: 7.5px;
    font-family: 'Share Tech Mono', monospace;
    font-weight: 700;
    line-height: 1;
    background: #152c4a;
    color: #d8dee9;
    border-right: 1px solid rgba(216, 222, 233, 0.4);
    border-bottom: 1px solid rgba(216, 222, 233, 0.4);
    letter-spacing: 0.06em;
    pointer-events-none;
    z-index: 3;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vtm-dock-cell:hover .vtm-tag,
.vtm-block-tab:hover .vtm-tag {
    background: #db7a31 !important;
    color: #ffffff !important;
    border-color: #db7a31 !important;
}

.vtm-dock-cell.active-mode .vtm-tag,
.vtm-dock-cell[data-active="true"] .vtm-tag,
.vtm-block-tab.active-mode .vtm-tag {
    background: #eda63b !important;
    color: #040914 !important;
    border-color: #eda63b !important;
}

/* 2. Sharp Content Layer: 100% Vector-Sharp Icons & Text (Zero Filter Distortion) */
.vtm-cell-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 4px;
    pointer-events: none;
}

.vtm-cell-icon {
    width: 22px;
    height: 22px;
    color: #ecf0f6;
    transition: transform 0.15s ease, color 0.15s ease;
}

.vtm-dock-cell:hover .vtm-cell-icon {
    transform: translateY(-1px);
    color: #eda63b;
}

.vtm-cell-label {
    font-size: 8.5px;
    font-family: 'Share Tech Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 3px;
    color: #d8dee9;
    line-height: 1;
    transition: color 0.15s ease;
}

.vtm-dock-cell:hover .vtm-cell-label {
    color: #eda63b;
}

/* Hover state on frame */
.vtm-dock-cell:hover {
    z-index: 5;
    transform: translateY(-2px);
}

.vtm-dock-cell:hover .vtm-chalk-frame {
    background: rgba(0, 57, 116, 0.92);
    border-color: #db7a31;
    box-shadow: 0 0 12px rgba(219, 122, 49, 0.35);
}

.vtm-dock-cell:hover .vtm-chalk-frame::before,
.vtm-dock-cell:hover .vtm-chalk-frame::after {
    display: none !important;
}

/* Active Page State (Concept drawing highlight) */
.vtm-dock-cell.active-mode,
.vtm-dock-cell[data-active="true"] {
    z-index: 4;
}

.vtm-dock-cell.active-mode .vtm-chalk-frame,
.vtm-dock-cell[data-active="true"] .vtm-chalk-frame {
    background: rgba(0, 57, 116, 0.96);
    border-color: #eda63b;
    box-shadow: inset 0 0 12px rgba(237, 166, 59, 0.35), 0 0 12px rgba(237, 166, 59, 0.3);
}

.vtm-dock-cell.active-mode .vtm-chalk-frame::before,
.vtm-dock-cell.active-mode .vtm-chalk-frame::after {
    display: none !important;
}

.vtm-dock-cell.active-mode .vtm-cell-label {
    color: #eda63b;
    font-weight: 700;
}

/* ============================================================================
   VTM STUDIO 2.2 — DRAFTING VELLUM / CREAM LIGHT THEME (.theme-light)
   100% Visual Parity with Mag Mode (#f4edd9 / #ffffff / #111827)
   ============================================================================ */
body.theme-light,
html.theme-light {
    --sketch-bg: #f4edd9 !important;
    --sketch-surface: #eae2d5 !important;
    --sketch-card: #ffffff !important;
    --sketch-line: #d5d1c4 !important;
    --sketch-linebright: #b8a892 !important;
    --sketch-chalk: #111827 !important;
    --sketch-chalk-strong: #000000 !important;
    --sketch-chalk-dim: rgba(17, 24, 39, 0.45) !important;

    background-color: #f4edd9 !important;
    color: #111827 !important;
}

/* 1. Neutralize Fixed Montage Backdrop & Dark Code Overlay — Prevent Subpage Occlusion */
body.theme-light #vtm-montage-backdrop,
body.theme-light #vtm-bg-terminal-wrap,
body.theme-light #vtm-bg-terminal-stream,
body.theme-light .vtm-sec-board-layer {
    display: none !important;
}

/* Neutralize Deep Glows & Reduce Hero Blueprint Opacity on Cream */
body.theme-light #sketch-hero .blur-3xl,
body.theme-light .blur-3xl {
    display: none !important;
}

body.theme-light #sketch-hero svg.pointer-events-none,
body.theme-light section svg.pointer-events-none,
body.theme-light article svg.pointer-events-none {
    opacity: 0.12 !important;
}

/* 2. CAD Millimeter Rulers */
body.theme-light #cad-ruler-x,
body.theme-light #cad-ruler-y {
    background-color: #e6dfcb !important;
    border-color: #d5d1c4 !important;
    color: #586e75 !important;
}

body.theme-light .ruler-top {
    background-image:
        linear-gradient(to right, #b8a892 1px, transparent 1px),
        linear-gradient(to right, #d5d1c4 1px, transparent 1px) !important;
}

body.theme-light .ruler-left {
    background-image:
        linear-gradient(to bottom, #b8a892 1px, transparent 1px),
        linear-gradient(to bottom, #d5d1c4 1px, transparent 1px) !important;
}

/* 3. Top Shell Instrument Cluster & Main Site Header */
body.theme-light #vtm-shell-top > div,
body.theme-light #vtm-main-site-header {
    background-color: #e6dfcb !important;
    border-color: #d5d1c4 !important;
    color: #111827 !important;
}

body.theme-light #vtm-main-site-header a {
    color: #111827 !important;
}

body.theme-light #vtm-main-site-header a:hover {
    color: #c2410c !important;
}

/* 4. Backgrounds & All Content Sections */
body.theme-light .sketch-grid-bg,
body.theme-light main,
body.theme-light #published-articles,
body.theme-light #featured-tutorials,
body.theme-light .view-section,
body.theme-light #Wrapper,
body.theme-light #Content,
body.theme-light .content_wrapper,
body.theme-light .sections_group,
body.theme-light .section_wrapper,
body.theme-light article.post,
body.theme-light .vtm-wp-content {
    background-color: #f4edd9 !important;
}

body.theme-light .vtm-hero-gradient,
body.theme-light section.bg-gradient-to-br {
    background: #f4edd9 !important;
    border-color: #db7a31 !important;
}

/* 5. Editorial Spreads & Intermediate Dark Blocks (Eliminate Dark Brown/Black Sections) */
body.theme-light article.bg-\[\#1c0c04\]\/60,
body.theme-light .bg-\[\#1c0c04\]\/60,
body.theme-light article.bg-\[\#03180d\]\/50,
body.theme-light .bg-\[\#03180d\]\/50,
body.theme-light article.bg-\[\#042817\]\/65,
body.theme-light .bg-\[\#042817\]\/65,
body.theme-light article.bg-\[\#041410\]\/60,
body.theme-light .bg-\[\#041410\]\/60 {
    background-color: #eae2d5 !important;
    border-color: #d5d1c4 !important;
}

/* 6. Clean White Cards on Cream Canvas (Matching Mag Mode) */
body.theme-light .bg-vtmcard,
body.theme-light .bg-\[\#0c1e34\],
body.theme-light .bg-\[\#051020\]\/95,
body.theme-light [data-hud="YOUTUBE_CHANNEL_CARD"],
body.theme-light .hologram-card,
body.theme-light .draft-card,
body.theme-light #card-protoshield-compare,
body.theme-light .draft-box,
body.theme-light .sketch-tool-card,
body.theme-light .pencil-hatch-blue,
body.theme-light .pencil-hatch-copper,
body.theme-light .pencil-hatch-green,
body.theme-light .sci-art-lab-item,
body.theme-light .vtm-wp-content .sci-art-lab-item {
    background-color: #ffffff !important;
    border-color: #d5d1c4 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    color: #111827 !important;
}

body.theme-light .draft-box::before,
body.theme-light .draft-box::after {
    border-color: #d5d1c4 !important;
}

body.theme-light .sci-art-thumb-title .title,
body.theme-light .sci-art-lab-item h3 {
    color: #111827 !important;
}

body.theme-light .sci-art-thumb-desc p,
body.theme-light .sci-art-lab-item p {
    color: #374151 !important;
}

body.theme-light .share-journey-btn {
    background: #003974 !important;
    color: #ffffff !important;
    border-color: #003974 !important;
}

/* 7. Typography: Solid Readable Dark Graphite / Black */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light .sketch-heading,
body.theme-light .text-white {
    color: #111827 !important;
}

body.theme-light p,
body.theme-light span:not(.text-vtmorange):not(.text-\[\#db7a31\]):not(.text-\[\#46a568\]):not(.text-white),
body.theme-light .text-zinc-200,
body.theme-light .text-zinc-300,
body.theme-light .text-zinc-400,
body.theme-light .text-zinc-500,
body.theme-light .text-sky-100,
body.theme-light .text-sky-100\/90,
body.theme-light .text-\[\#ecf0f6\],
body.theme-light .text-\[\#d8dee9\],
body.theme-light .text-\[\#d8dee9\]\/90,
body.theme-light .text-\[\#d8dee9\]\/85,
body.theme-light .text-\[\#d8dee9\]\/80,
body.theme-light .text-\[\#d8dee9\]\/75,
body.theme-light .text-\[\#d8dee9\]\/70,
body.theme-light .text-\[\#d8dee9\]\/60 {
    color: #374151 !important;
}

/* Cyan Blueprint Code/Labels shift to Deep Navy for High Contrast */
body.theme-light .text-\[\#2d8bea\],
body.theme-light .text-sky-300,
body.theme-light .text-sky-400 {
    color: #003974 !important;
    font-weight: 600 !important;
}

/* Retain Brand Orange & Green Accents */
body.theme-light .text-vtmorange,
body.theme-light .text-\[\#db7a31\],
body.theme-light .text-\[\#eda63b\] {
    color: #c2410c !important;
}

body.theme-light .text-\[\#46a568\],
body.theme-light .text-emerald-400,
body.theme-light .text-green-400 {
    color: #166534 !important;
}

/* 8. Bottom Navigation Dock & Buttons */
body.theme-light #bottom-mode-dock {
    background-color: rgba(230, 223, 203, 0.96) !important;
    border-color: #d5d1c4 !important;
}

body.theme-light #vtm-dock-toggle-btn {
    background-color: #f4edd9 !important;
    border-color: #d5d1c4 !important;
}

body.theme-light .vtm-title-block {
    background-color: #e6dfcb !important;
    border-color: #d5d1c4 !important;
}

body.theme-light .vtm-title-block > div {
    border-color: #d5d1c4 !important;
    color: #111827 !important;
}

body.theme-light .draft-box,
body.theme-light .vtm-dock-btn {
    background-color: #ffffff !important;
    border-color: #d5d1c4 !important;
    color: #111827 !important;
}

body.theme-light .draft-box:hover,
body.theme-light .vtm-dock-btn:hover {
    background-color: #f4edd9 !important;
    border-color: #db7a31 !important;
    color: #c2410c !important;
}

/* Orange CTA button stays vibrant orange with white text */
body.theme-light .vtm-cta-btn,
body.theme-light a[href*="store"].vtm-cta-btn,
body.theme-light a.bg-\[\#db7a31\] {
    background-color: #db7a31 !important;
    color: #ffffff !important;
}

/* Content Footer */
body.theme-light footer:not(#bottom-mode-dock) {
    background-color: #e6dfcb !important;
    border-color: #d5d1c4 !important;
}

body.theme-light footer:not(#bottom-mode-dock) a {
    color: #374151 !important;
}

body.theme-light footer:not(#bottom-mode-dock) a:hover {
    color: #c2410c !important;
}

/* Hardcoded Tailwind Background Neutralizers */
body.theme-light .bg-\[\#040914\],
body.theme-light .bg-\[\#081426\],
body.theme-light .bg-\[\#040914\]\/90,
body.theme-light .bg-\[\#081426\]\/90,
body.theme-light .bg-\[\#081426\]\/95,
body.theme-light .bg-vtmobsidian {
    background-color: #f4edd9 !important;
}

body.theme-light .bg-\[\#003974\],
body.theme-light .bg-\[\#003974\]\/80,
body.theme-light .bg-\[\#003974\]\/70,
body.theme-light .bg-\[\#14171a\],
body.theme-light .bg-\[\#14171a\]\/60 {
    background-color: #eae2d5 !important;
    border-color: #d5d1c4 !important;
}

body.theme-light .border-\[\#234a78\],
body.theme-light .border-\[\#152c4a\],
body.theme-light .border-vtmline,
body.theme-light .border-vtmlinebright {
    border-color: #d5d1c4 !important;
}

/* Dimension Lines on Cream */
body.theme-light .dim-line-h {
    color: #586e75 !important;
}

body.theme-light .dim-line-h::before,
body.theme-light .dim-line-h::after {
    border-color: #b8a892 !important;
}

/* Left Override Drawer in Light Mode */
body.theme-light #override-drawer {
    background-color: #eae2d5 !important;
    border-color: #d5d1c4 !important;
}

body.theme-light #override-drawer select {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d5d1c4 !important;
}

/* Theme Icon Visibility */
body.theme-light .theme-icon-sun,
body.theme-light #theme-icon-sun {
    display: none !important;
}

body.theme-light .theme-icon-moon,
body.theme-light #theme-icon-moon {
    display: block !important;
}

/* ==========================================================================
   VTM Studio 2.2 — Mobile Floating Pill Navigation Dock (< 1024px)
   - Floating rounded pill dock elevated above bottom screen edge
   - Collapsible toggle tab on top center (• MODE MENU —)
   - 8 compact icon-only mode buttons (TUTORIALS, TOOLS, LABS, VIDEOS, DOWNLOAD, ARTICLES, MAGAZINE, CONTACT)
   - Compact orange VTM CTA badge fitting alongside in a single clean row (zero horizontal scrolling)
   - Desktop 480px CAD Title Block and text labels cleanly omitted on mobile
   ========================================================================== */
@media (max-width: 1023px) {
    #bottom-mode-dock {
        position: fixed !important;
        bottom: 12px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 20px) !important;
        max-width: 440px !important;
        border: 1px solid #234a78 !important;
        border-radius: 12px !important;
        background: rgba(8, 20, 38, 0.96) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        backdrop-filter: blur(16px) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), 0 0 1px rgba(45, 139, 234, 0.3) !important;
        padding: 4px 6px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        z-index: 9000 !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    }

    #bottom-mode-dock.dock-collapsed {
        transform: translateX(-50%) translateY(calc(100% + 12px)) !important;
    }

    #vtm-dock-toggle-btn {
        display: flex !important;
        top: -22px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 9020 !important;
    }

    #bottom-mode-dock.dock-collapsed #vtm-dock-toggle-btn {
        top: -26px !important;
        height: 26px !important;
        padding: 0 14px !important;
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.9), 0 0 12px rgba(70, 165, 104, 0.8) !important;
    }

    #bottom-mode-dock > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    #bottom-mode-dock nav.vtm-dock-ribbon {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: auto !important;
        gap: 3px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Compact Icon-Only Buttons */
    #bottom-mode-dock .vtm-dock-cell {
        position: relative !important;
        width: 35px !important;
        height: 38px !important;
        min-width: 32px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        max-width: 42px !important;
    }

    /* Hide text labels & stepped tags on mobile */
    #bottom-mode-dock .vtm-cell-label,
    #bottom-mode-dock .vtm-tag {
        display: none !important;
    }

    /* Center icon nicely */
    #bottom-mode-dock .vtm-cell-icon {
        width: 19px !important;
        height: 19px !important;
        margin: 0 !important;
    }

    #bottom-mode-dock .vtm-cell-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Compact chalk frame on mobile */
    #bottom-mode-dock .vtm-chalk-frame {
        border-width: 1.5px !important;
        border-radius: 4px !important;
    }
    #bottom-mode-dock .vtm-chalk-frame::before,
    #bottom-mode-dock .vtm-chalk-frame::after {
        display: none !important;
    }

    /* Compact Orange CTA Button on mobile */
    #bottom-mode-dock .vtm-dock-ribbon > div.flex-1 {
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin-left: 2px !important;
        display: flex !important;
        align-items: center !important;
    }

    #bottom-mode-dock .vtm-cta-btn {
        padding: 0 8px !important;
        height: 38px !important;
        font-size: 10px !important;
        letter-spacing: 0.05em !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 0 12px rgba(219, 122, 49, 0.4) !important;
    }

    #bottom-mode-dock .vtm-cta-mobile {
        display: inline !important;
    }

    #bottom-mode-dock .vtm-cta-desktop {
        display: none !important;
    }

    /* Hide flyouts on mobile so hover states don't block taps */
    #bottom-mode-dock .group-hover\:block {
        display: none !important;
    }

    /* Hide desktop CAD title block on mobile */
    #bottom-mode-dock .vtm-title-block,
    #bottom-mode-dock div[class*="min-w-[480px]"],
    #bottom-mode-dock > div > div:last-child {
        display: none !important;
    }

    /* Content Breathing Room on Mobile */
    body {
        padding-bottom: 74px !important;
    }
}

/* Micro Mobile Viewports (< 360px) */
@media (max-width: 360px) {
    #bottom-mode-dock {
        padding: 3px 4px !important;
        bottom: 8px !important;
        width: calc(100% - 12px) !important;
    }
    #bottom-mode-dock nav.vtm-dock-ribbon {
        gap: 2px !important;
    }
    #bottom-mode-dock .vtm-dock-cell {
        width: 30px !important;
        height: 34px !important;
        min-width: 28px !important;
        min-height: 34px !important;
    }
    #bottom-mode-dock .vtm-cell-icon {
        width: 16px !important;
        height: 16px !important;
    }
    #bottom-mode-dock .vtm-cta-btn {
        height: 34px !important;
        padding: 0 6px !important;
        font-size: 9px !important;
    }
}

/* ==========================================================================
   HOMEPAGE BLOCK CORNER TABS (Exact Concept Sketch Box Parity)
   - Sits flush at top-left corner of each primary block section
   - Sketched chalk border, hand-drawn corner overshoots, themed SVG icon & label
   - Seamlessly docks onto block's top border with negative bottom margin
   ========================================================================== */
.vtm-block-tab {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 96px !important;
    height: 62px !important;
    min-height: 62px !important;
    text-decoration: none !important;
    user-select: none !important;
    z-index: 25 !important;
    background: transparent !important;
    margin-right: 0 !important;
    margin-bottom: -1px !important;
    transition: transform 0.15s ease !important;
}

.vtm-block-tab:hover {
    transform: translateY(-2px) !important;
    z-index: 30 !important;
}

.vtm-block-tab .vtm-chalk-frame {
    background: rgba(8, 20, 38, 0.96) !important;
    border: 1px solid rgba(216, 222, 233, 0.35) !important;
    border-bottom: 1px solid rgba(8, 20, 38, 0.96) !important;
    box-shadow: none !important;
    filter: none !important;
}

.vtm-block-tab .vtm-chalk-frame::before,
.vtm-block-tab .vtm-chalk-frame::after {
    display: none !important;
}

/* 1. Magazine Mode Corner Tab (Single Unified Box Cutout — Transparent Frame Using Article's Own Background) */
.vtm-block-tab[href*="mag"],
.vtm-integrated-mag-tab {
    margin-bottom: 0 !important;
}
.vtm-block-tab[href*="mag"]:hover,
.vtm-integrated-mag-tab:hover {
    transform: none !important;
}
.vtm-block-tab[href*="mag"] .vtm-chalk-frame,
.vtm-integrated-mag-tab .vtm-chalk-frame {
    background: transparent !important;
    border-top: 1px solid #db7a31 !important;
    border-left: 1px solid #db7a31 !important;
    border-right: 1px solid #db7a31 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.vtm-block-tab[href*="mag"] .vtm-tag,
.vtm-integrated-mag-tab .vtm-tag {
    background: #db7a31 !important;
    color: #ffffff !important;
    border-color: #db7a31 !important;
}
.vtm-block-tab[href*="mag"]:hover .vtm-chalk-frame,
.vtm-integrated-mag-tab:hover .vtm-chalk-frame {
    background: transparent !important;
    border-top: 1px solid #eda63b !important;
    border-left: 1px solid #eda63b !important;
    border-right: 1px solid #eda63b !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.vtm-block-tab[href*="mag"]:hover .vtm-tag,
.vtm-integrated-mag-tab:hover .vtm-tag {
    background: #eda63b !important;
    color: #040914 !important;
    border-color: #eda63b !important;
}

/* 2. Tools Corner Tab (Single Unified Box Cutout — Transparent Frame Using Section's Own Background) */
main > section.vtm-cutout-section,
section#online-tools.vtm-cutout-section {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.vtm-block-tab[href*="tools"],
.vtm-integrated-tools-tab {
    margin-bottom: 0 !important;
}
.vtm-block-tab[href*="tools"]:hover,
.vtm-integrated-tools-tab:hover {
    transform: none !important;
}
.vtm-block-tab[href*="tools"] .vtm-chalk-frame,
.vtm-integrated-tools-tab .vtm-chalk-frame {
    background: transparent !important;
    border-top: 1px solid #46a568 !important;
    border-left: 1px solid #46a568 !important;
    border-right: 1px solid #46a568 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

#online-tools:not(.vtm-cutout-section),
section#online-tools:not(.vtm-cutout-section) {
    background-color: rgba(4, 33, 17, 0.96) !important;
    border: 1px solid #46a568 !important;
    box-shadow: 0 0 20px rgba(70, 165, 104, 0.15), inset 0 0 16px rgba(4, 9, 20, 0.6) !important;
}
.vtm-block-tab[href*="tools"] .vtm-tag,
.vtm-integrated-tools-tab .vtm-tag {
    background: #1f844a !important;
    color: #ffffff !important;
    border-color: #46a568 !important;
}
.vtm-block-tab[href*="tools"]:hover .vtm-chalk-frame,
.vtm-integrated-tools-tab:hover .vtm-chalk-frame {
    background: transparent !important;
    border-top: 1px solid #46a568 !important;
    border-left: 1px solid #46a568 !important;
    border-right: 1px solid #46a568 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.vtm-block-tab[href*="tools"]:hover .vtm-tag,
.vtm-integrated-tools-tab:hover .vtm-tag {
    background: #46a568 !important;
    color: #ffffff !important;
    border-color: #46a568 !important;
}

/* 3. Tutorials Corner Tab (Blue Line #2d8bea matching #featured-tutorials perimeter) */
#vtm-web-resources-divider,
section#vtm-web-resources-divider {
    background-color: rgba(4, 28, 15, 0.86) !important;
    border: none !important;
    box-shadow: none !important;
}
#featured-tutorials,
section#featured-tutorials {
    border: 1px solid #2d8bea !important;
    box-shadow: 0 0 20px rgba(45, 139, 234, 0.15), inset 0 0 16px rgba(4, 9, 20, 0.6) !important;
}
#featured-tutorials::before,
section#featured-tutorials::before {
    border-top: 1px solid #2d8bea !important;
    border-bottom: 1px solid #2d8bea !important;
}
#featured-tutorials::after,
section#featured-tutorials::after {
    border-left: 1px solid #2d8bea !important;
    border-right: 1px solid #2d8bea !important;
}
.vtm-block-tab[href*="tutorials"] .vtm-chalk-frame {
    background: rgba(4, 16, 34, 0.96) !important;
    border: 1px solid #2d8bea !important;
    border-bottom: 1px solid rgba(4, 16, 34, 0.96) !important;
    box-shadow: 0 0 10px rgba(45, 139, 234, 0.25) !important;
}
.vtm-block-tab[href*="tutorials"] .vtm-tag {
    background: #003974 !important;
    color: #ffffff !important;
    border-color: #2d8bea !important;
}
.vtm-block-tab[href*="tutorials"]:hover .vtm-chalk-frame {
    background: rgba(8, 26, 54, 0.96) !important;
    border-color: #2d8bea !important;
    border-bottom: 1px solid rgba(8, 26, 54, 0.96) !important;
    box-shadow: 0 0 14px rgba(45, 139, 234, 0.45) !important;
}
.vtm-block-tab[href*="tutorials"]:hover .vtm-tag {
    background: #2d8bea !important;
    color: #ffffff !important;
    border-color: #2d8bea !important;
}

/* 4. Labs Corner Tab (Blue Line #2d8bea matching Labs hub perimeter) */
.vtm-block-tab[href*="labs"] .vtm-chalk-frame {
    background: #061224 !important;
    border: 1px solid #2d8bea !important;
    border-bottom: 1px solid #061224 !important;
    box-shadow: 0 0 10px rgba(45, 139, 234, 0.25) !important;
}
.vtm-block-tab[href*="labs"] .vtm-tag {
    background: #003974 !important;
    color: #ffffff !important;
    border-color: #2d8bea !important;
}
.vtm-block-tab[href*="labs"]:hover .vtm-chalk-frame {
    background: #081a36 !important;
    border-color: #2d8bea !important;
    border-bottom: 1px solid #081a36 !important;
    box-shadow: 0 0 14px rgba(45, 139, 234, 0.45) !important;
}
.vtm-block-tab[href*="labs"]:hover .vtm-tag {
    background: #2d8bea !important;
    color: #ffffff !important;
    border-color: #2d8bea !important;
}

/* VTM Labs Content Section Outline (All-Around 1px Blue #2d8bea matching 08.LAB tab) */
#vtm-labs,
section#vtm-labs {
    border: 1px solid #2d8bea !important;
    background-color: #061224 !important;
    box-shadow: 0 0 20px rgba(45, 139, 234, 0.15), inset 0 0 16px rgba(4, 9, 20, 0.6) !important;
}

#vtm-labs::before,
section#vtm-labs::before {
    border-top: 1px solid #2d8bea !important;
    border-bottom: 1px solid #2d8bea !important;
}

#vtm-labs::after,
section#vtm-labs::after {
    border-left: 1px solid #2d8bea !important;
    border-right: 1px solid #2d8bea !important;
}

.vtm-block-tab:hover .vtm-chalk-frame {
    background: rgba(0, 57, 116, 0.95) !important;
    border-color: #db7a31 !important;
    box-shadow: 0 0 12px rgba(219, 122, 49, 0.35) !important;
}

.vtm-block-tab:hover .vtm-chalk-frame::before,
.vtm-block-tab:hover .vtm-chalk-frame::after {
    display: none !important;
}

@media (max-width: 640px) {
    .vtm-block-tab {
        width: 76px !important;
        height: 50px !important;
        min-height: 50px !important;
    }
    .vtm-block-tab .vtm-cell-icon {
        width: 18px !important;
        height: 18px !important;
    }
    .vtm-block-tab .vtm-cell-label {
        font-size: 8px !important;
    }
}

/* ============================================================================
   VTM STUDIO 2.2 FOOTER AVATAR SPINNER & HUD HALO ANIMATIONS
   Exact replication from vtm_studio_V2.2/static/style.css
   ============================================================================ */

.vtm-hud-avatar-container {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.vtm-hud-avatar-logo {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px rgba(0, 161, 196, 0.3);
    animation: vtm-hud-breathe 3s infinite ease-in-out;
}

.vtm-hud-avatar-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #00a1c4;
    border-bottom-color: #db7a31;
    animation: vtm-spin-slow 4s linear infinite;
    z-index: 1;
    pointer-events: none;
}

.vtm-hud-avatar-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px dashed rgba(72, 165, 108, 0.55);
    animation: vtm-spin-reverse 8s linear infinite;
}

@keyframes vtm-spin-slow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes vtm-spin-reverse {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes vtm-hud-breathe {
    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
}