/*
Theme Name: Chip Vortex Fixed
Theme URI: https://arsalan.cyfrow.net
Author: Chip Vortex
Description: Custom WordPress theme converted from the original Chip Vortex single-page application. Includes dynamic posts, categories, contact form, newsletter storage, and one-click demo import.
Version: 2.11.1
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: chipvortex
*/

  :root{
    --bg:#0A0E1A; --bg2:#0D1220; --bg3:#111827; --bg4:#0F1626;
    --line:rgba(0,212,255,.12); --line2:rgba(0,212,255,.24);
    --cyan:#00D4FF; --cyan-d:#0A0E1A; --green:#39FF14;
    --orange:#FF6B35; --purple:#B06EFF; --gold:#FFD700;
    --text:#FFFFFF; --muted:rgba(255,255,255,.92); --muted2:rgba(255,255,255,.85); --muted3:rgba(255,255,255,.6);
    --display:'Orbitron',monospace; --body:'Inter',sans-serif;
    --maxw:100%;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer}
  img{max-width:100%;display:block}
  ::selection{background:rgba(0,212,255,.3)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:#1c2740;border-radius:6px}
  ::-webkit-scrollbar-thumb:hover{background:#26344f}

  /* CIRCUIT BACKGROUND */
  .circuit-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
  .circuit-bg svg{width:100%;height:100%;opacity:.05}

  /* layout helpers */
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
  .pagepad{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:3rem 1.5rem 4rem}
  .cv-mark{flex:none}

  /* HEADER */
  header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(13,18,31,.93),rgba(10,14,26,.85));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 6px 26px -10px rgba(0,0,0,.55)}
  header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan) 22%,var(--green) 50%,var(--cyan) 78%,transparent);opacity:.75}
  .nav{display:flex;align-items:center;gap:2rem;max-width:var(--maxw);margin:0 auto;padding:.95rem 1.6rem}
  .brand{display:flex;align-items:center;gap:.7rem;flex:none;transition:transform .25s ease}
  .brand:hover{transform:translateY(-1px)}
  .brand-logo{flex:none;height:96px;aspect-ratio:480/265;transition:filter .25s ease;background:url('assets/images/logo-full.png') center/contain no-repeat}
  .brand:hover .brand-logo{filter:drop-shadow(0 0 12px rgba(0,212,255,.5))}
  .foot-logo{height:88px}
  @media(max-width:760px){ .brand-logo{height:60px} .foot-logo{height:60px} }
  .brand .wordmark{display:flex;flex-direction:column;line-height:1}
  .brand .wm-row{font-family:var(--display);font-weight:900;font-size:1.18rem;letter-spacing:1.5px}
  .brand .wm-row .c{color:var(--text)} .brand .wm-row .v{color:var(--cyan)}
  .brand .wm-sub{font-size:.5rem;letter-spacing:3px;color:var(--cyan);text-transform:uppercase;margin-top:3px;opacity:.8;font-weight:600}
  .nav-spacer{flex:1}
  .nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center}
  .nav-links a{color:var(--muted);font-size:.8rem;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;transition:color .2s;padding:.4rem 0;position:relative}
  .nav-links a:hover,.nav-links a.active{color:var(--cyan)}
  .nav-links a.active{text-shadow:0 0 14px rgba(0,212,255,.45)}
  .nav-links a::after{content:'';position:absolute;left:50%;right:50%;bottom:-3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--green));transition:left .25s ease,right .25s ease}
  .nav-links a:hover::after,.nav-links a.active::after{left:0;right:0}
  .hamburger{display:none;background:none;border:1px solid var(--line2);color:var(--text);width:42px;height:38px;border-radius:4px;font-size:1.1rem;align-items:center;justify-content:center}
  .mobile-menu{display:none;border-top:1px solid var(--line);background:var(--bg2)}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block;padding:.95rem 2rem;color:var(--muted);font-size:.85rem;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--line)}
  .mobile-menu a:hover{color:var(--cyan);background:var(--bg3)}

  /* NAV CATEGORIES DROPDOWN */
  .has-dd{position:relative}
  .dd-toggle .caret{display:inline-block;margin-left:4px;font-size:.55rem;transition:transform .2s;vertical-align:middle}
  .has-dd:hover .dd-toggle .caret{transform:rotate(180deg)}
  .dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:.75rem;display:none;z-index:70}
  .has-dd:hover .dd-menu{display:block}
  .dd-inner{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:.45rem;display:flex;flex-direction:column;gap:2px;min-width:220px;box-shadow:0 18px 44px -18px rgba(0,0,0,.75)}
  .dd-inner a{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;color:var(--muted);font-size:.8rem;letter-spacing:.2px;text-transform:none;border-radius:5px;font-weight:500}
  .dd-inner a:hover{background:var(--bg3);color:var(--cyan)}
  .dd-inner a .ci{font-size:1rem;width:18px;text-align:center;flex:none}
  .dd-inner a::after{display:none !important}

  /* FOOTER COLUMNS */
  .foot-brand{max-width:320px}
  .foot-brand .fb-blurb{color:var(--muted2);font-size:.82rem;line-height:1.65;margin-top:1.1rem}
  /* FOOTER SOCIAL ICONS (links: Appearance → Customize → Social Media Links) */
  .foot-social{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}
  .foot-social .social-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--line2);color:var(--muted);background:rgba(0,212,255,.05);transition:color .18s,border-color .18s,box-shadow .18s,transform .18s}
  .foot-social .social-btn svg{display:block}
  .foot-social .social-btn:hover,.foot-social .social-btn:focus-visible{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 14px rgba(0,212,255,.35);transform:translateY(-2px)}
  /* Header variant — compact, hidden on mobile (hamburger menu covers it) */
  .head-social{display:flex;align-items:center;gap:.45rem;margin-left:1rem;flex:none}
  .head-social .social-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;border:1px solid var(--line2);color:var(--muted);background:rgba(0,212,255,.05);transition:color .18s,border-color .18s,box-shadow .18s}
  .head-social .social-btn svg{width:15px;height:15px;display:block}
  .head-social .social-btn:hover,.head-social .social-btn:focus-visible{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(0,212,255,.35)}
  @media(max-width:900px){.head-social{display:none}}
  /* Mobile menu variant — icon row at the bottom of the menu */
  .mobile-social{display:flex;flex-wrap:wrap;gap:.55rem;padding:1rem 2rem 1.2rem;border-top:1px solid var(--line)}
  .mobile-social .social-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--line2);color:var(--muted);background:rgba(0,212,255,.05)}
  .mobile-social .social-btn svg{display:block}
  .mobile-social .social-btn:hover{color:var(--cyan);border-color:var(--cyan)}
  .foot-col .foot-title{font-family:var(--display);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:1.1rem;font-weight:700}
  .foot-col a{display:flex;align-items:center;gap:.55rem;color:var(--muted2);font-size:.83rem;padding:.34rem 0;transition:color .15s}
  .foot-col a:hover{color:var(--cyan)}
  .foot-col a .ci{font-size:.92rem;width:16px;text-align:center;flex:none}

  /* MOBILE MENU TOPICS */
  .mm-label{padding:.85rem 2rem .35rem;font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);font-weight:700;opacity:.85}
  .mobile-menu .mm-cat{padding-left:2.7rem;font-size:.8rem}

  /* reading progress */
  .progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));z-index:60;transition:width .1s linear;box-shadow:0 0 10px var(--cyan)}

  /* BUTTONS */
  .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);font-size:.78rem;letter-spacing:1px;font-weight:700;text-transform:uppercase;padding:.85rem 1.7rem;border-radius:3px;transition:all .18s;border:1px solid transparent}
  .btn-primary{background:var(--cyan);color:var(--cyan-d)}
  .btn-primary:hover{background:#33ddff;transform:translateY(-1px);box-shadow:0 8px 22px -10px var(--cyan)}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--line2)}
  .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
  .btn-green{background:var(--green);color:#06210a}
  .btn-green:hover{background:#5cff45;transform:translateY(-1px)}
  .btn-danger{background:transparent;color:#ff6b6b;border-color:rgba(255,107,107,.4)}
  .btn-danger:hover{background:rgba(255,107,107,.12)}
  .btn-sm{padding:.5rem 1rem;font-size:.68rem}

  /* eyebrow + titles */
  .eyebrow{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:.7rem;font-family:var(--body)}
  .sec-title{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.1rem);font-weight:700;line-height:1.15;margin-bottom:.5rem}
  .sec-title .hl{color:var(--cyan)}
  .sec-sub{color:var(--muted2);font-size:.95rem;margin-bottom:2.4rem;max-width:560px}

  /* HERO */
  .hero{position:relative;z-index:1;overflow:hidden;border-bottom:1px solid var(--line)}
  .hero-inner{max-width:var(--maxw);margin:0 auto;padding:4.5rem 1.5rem 4rem;display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center}
  .hero-tag{display:inline-flex;align-items:center;gap:.5rem;background:rgba(57,255,20,.08);border:1px solid rgba(57,255,20,.3);color:var(--green);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;padding:.35rem .9rem;margin-bottom:1.4rem;font-weight:600;border-radius:2px}
  .hero-tag::before{content:'';width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 1.6s infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.35)}}
  .hero h1{font-family:var(--display);font-size:clamp(2.1rem,4.6vw,3.7rem);font-weight:900;line-height:1.08;margin-bottom:1.1rem;letter-spacing:-.5px}
  .hero h1 .a{color:var(--cyan)} .hero h1 .b{color:var(--green)}
  .hero p.lead{font-size:1.06rem;color:var(--muted);max-width:480px;line-height:1.7;margin-bottom:2rem;font-weight:300}
  .hero-btns{display:flex;gap:.9rem;flex-wrap:wrap}
  .hero-visual{display:flex;align-items:center;justify-content:center;position:relative}
  .hero-mark-glow{position:absolute;width:86%;height:86%;background:radial-gradient(circle,rgba(0,212,255,.14),transparent 66%);filter:blur(26px)}
  .hero-mark-float{animation:float 5s ease-in-out infinite;position:relative}
  .cat-hero{width:min(440px,82vw);height:auto;display:block;margin:0 auto}
  @keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

  /* STATS */
  .stats{position:relative;z-index:1;border-bottom:1px solid var(--line);background:rgba(30,42,69,.28)}
  .stats-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
  .stat{padding:1.5rem 1.5rem;text-align:center;border-right:1px solid var(--line)}
  .stat:last-child{border-right:none}
  .stat .n{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--cyan);display:block;line-height:1}
  .stat .l{font-size:.72rem;color:var(--muted2);text-transform:uppercase;letter-spacing:1px;margin-top:.45rem;display:block}

  /* CATEGORY GRID */
  .cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.5px;background:var(--line);border:1.5px solid var(--line)}
  .cat-card{background:var(--bg2);padding:1.8rem 1.5rem;cursor:pointer;transition:background .22s;position:relative;overflow:hidden;display:block}
  .cat-card::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;transition:width .3s;background:var(--accent,var(--cyan))}
  .cat-card:hover{background:var(--bg3)} .cat-card:hover::after{width:100%}
  .cat-ic{font-size:1.6rem;margin-bottom:.9rem;display:block}
  .cat-nm{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:.55rem;color:var(--accent,var(--cyan))}
  .cat-de{font-size:.82rem;color:var(--muted2);line-height:1.5;margin-bottom:.9rem}
  .cat-ct{font-size:.7rem;color:var(--muted3);letter-spacing:1px;text-transform:uppercase}


  /* VISUAL ARTICLE STRUCTURE */
  .visual-series{margin-top:2.2rem}
  .visual-format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .vf-card{position:relative;display:flex;flex-direction:column;min-height:330px;padding:1rem;background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
  .vf-card:hover{transform:translateY(-5px);border-color:var(--accent,var(--cyan));box-shadow:0 18px 45px -30px var(--accent,var(--cyan))}
  .vf-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,var(--accent-bg,rgba(0,212,255,.12)),transparent 38%);pointer-events:none}
  .vf-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem}
  .vf-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--accent,var(--cyan));background:var(--accent-bg,rgba(0,212,255,.12));border-radius:9px;font-size:1.2rem}
  .vf-pin{font-size:.61rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent,var(--cyan));border:1px solid currentColor;border-radius:999px;padding:.28rem .55rem;font-weight:800}
  .vf-mini{position:relative;min-height:148px;margin:.1rem 0 1rem;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.005));border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
  .vf-mini::after{content:'';position:absolute;inset:auto 0 0;height:2px;background:var(--accent,var(--cyan))}
  .vf-card h3{position:relative;font-family:var(--display);font-size:.88rem;line-height:1.35;color:var(--accent,var(--cyan));text-transform:uppercase;letter-spacing:.8px;margin-bottom:.5rem}
  .vf-card p{position:relative;color:var(--muted2);font-size:.8rem;line-height:1.55;margin-bottom:.8rem}
  .vf-count{position:relative;margin-top:auto;color:var(--muted3);font-size:.68rem;letter-spacing:1px;text-transform:uppercase}
  .mini-flow{display:flex;align-items:center;gap:.35rem}
  .mini-flow i{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;border:1px solid var(--accent,var(--cyan));background:var(--accent-bg,rgba(0,212,255,.12));font-style:normal;font-size:.65rem;color:var(--accent,var(--cyan));font-weight:800}
  .mini-flow b{width:18px;height:1px;background:var(--accent,var(--cyan));opacity:.55}
  .mini-anatomy{position:relative;width:92px;height:92px;border:1px dashed var(--accent,var(--cyan));border-radius:50%;display:grid;place-items:center}
  .mini-anatomy strong{width:45px;height:45px;display:grid;place-items:center;border:1px solid var(--accent,var(--cyan));border-radius:9px;color:var(--accent,var(--cyan));font-size:1.2rem}
  .mini-anatomy i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent,var(--cyan));box-shadow:0 0 12px var(--accent,var(--cyan))}
  .mini-anatomy i:nth-child(2){top:-4px}.mini-anatomy i:nth-child(3){right:-4px}.mini-anatomy i:nth-child(4){bottom:-4px}.mini-anatomy i:nth-child(5){left:-4px}
  .mini-compare{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;width:82%;height:86px}
  .mini-compare span{display:grid;place-items:center;border:1px solid var(--accent,var(--cyan));border-radius:7px;color:var(--accent,var(--cyan));font-family:var(--display);font-size:.72rem;font-weight:800;background:var(--accent-bg,rgba(0,212,255,.08))}
  .mini-steps{display:flex;align-items:flex-end;gap:.45rem;height:92px}
  .mini-steps span{width:38px;display:grid;place-items:center;border:1px solid var(--accent,var(--cyan));background:var(--accent-bg,rgba(0,212,255,.08));color:var(--accent,var(--cyan));font-family:var(--display);font-size:.7rem;font-weight:800;border-radius:6px 6px 0 0}
  .mini-steps span:nth-child(1){height:36px}.mini-steps span:nth-child(2){height:61px}.mini-steps span:nth-child(3){height:86px}
  .mini-tree{position:relative;width:120px;height:92px}
  .mini-tree span{position:absolute;display:grid;place-items:center;width:42px;height:24px;border:1px solid var(--accent,var(--cyan));border-radius:5px;color:var(--accent,var(--cyan));font-size:.58rem;font-weight:800;background:var(--bg3)}
  .mini-tree span:nth-child(1){left:39px;top:2px}.mini-tree span:nth-child(2){left:4px;bottom:4px}.mini-tree span:nth-child(3){right:4px;bottom:4px}
  .mini-tree::before,.mini-tree::after{content:'';position:absolute;top:36px;width:54px;height:1px;background:var(--accent,var(--cyan));opacity:.6}
  .mini-tree::before{left:20px;transform:rotate(34deg)}.mini-tree::after{right:20px;transform:rotate(-34deg)}
  .mini-timeline{display:flex;align-items:center;width:82%;position:relative}
  .mini-timeline::before{content:'';position:absolute;left:0;right:0;height:2px;background:var(--accent,var(--cyan));opacity:.5}
  .mini-timeline span{position:relative;z-index:1;width:25%;display:flex;justify-content:center}
  .mini-timeline i{width:14px;height:14px;border:3px solid var(--bg2);background:var(--accent,var(--cyan));border-radius:50%;box-shadow:0 0 12px var(--accent,var(--cyan))}

  /* visual article cards */
  .pcard-format{display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;font-size:.62rem;letter-spacing:.8px;text-transform:uppercase;color:var(--muted2)}
  .pcard-cover{height:185px}
  .poster-art{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .poster-art::before{content:'';position:absolute;width:120px;height:120px;border:1px solid var(--accent,var(--cyan));border-radius:50%;opacity:.16}
  .poster-art::after{content:'';position:absolute;width:78px;height:78px;border:1px dashed var(--accent,var(--cyan));transform:rotate(25deg);opacity:.28}
  .poster-icon{position:relative;z-index:2;font-size:3.2rem;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
  .poster-label{position:absolute;z-index:3;left:.8rem;top:.8rem;background:rgba(10,14,26,.82);border:1px solid var(--accent,var(--cyan));color:var(--accent,var(--cyan));font-size:.58rem;letter-spacing:1px;text-transform:uppercase;padding:.28rem .48rem;border-radius:999px;font-weight:800}
  .poster-dots{position:absolute;right:.8rem;bottom:.75rem;display:grid;grid-template-columns:repeat(3,5px);gap:5px;opacity:.55}
  .poster-dots i{width:5px;height:5px;background:var(--accent,var(--cyan));border-radius:50%}

  /* visual article reader */
  .visual-story-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;margin:0 0 2rem}
  .visual-story-label,.visual-story-promise{border:1px solid var(--line);background:var(--bg2);border-radius:8px;padding:1.15rem}
  .visual-story-label{display:flex;align-items:center;gap:1rem;border-color:var(--format-color,var(--cyan))}
  .visual-story-label .vsi{width:48px;height:48px;display:grid;place-items:center;border-radius:9px;background:var(--format-bg,rgba(0,212,255,.12));font-size:1.35rem;flex:none}
  .visual-story-label small,.visual-story-promise small{display:block;font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted3);margin-bottom:.2rem}
  .visual-story-label strong{font-family:var(--display);font-size:.82rem;color:var(--format-color,var(--cyan));text-transform:uppercase;letter-spacing:.7px}
  .visual-story-promise{display:flex;align-items:center;gap:.85rem;color:var(--muted);font-size:.82rem;line-height:1.5}
  .visual-story-promise .vp-icon{font-size:1.4rem}
  .visual-board{margin:1.6rem 0 2rem;padding:1.25rem;background:linear-gradient(145deg,var(--bg2),var(--bg4));border:1px solid var(--line2);border-radius:11px;overflow:hidden;position:relative}
  .visual-board::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--format-color,var(--cyan))}
  .vb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
  .vb-kicker{font-size:.6rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--format-color,var(--cyan));font-weight:800;margin-bottom:.2rem}
  .vb-title{font-family:var(--display);font-size:1rem;line-height:1.35}
  .vb-note{font-size:.64rem;color:var(--muted3);text-transform:uppercase;letter-spacing:.7px;white-space:nowrap}
  .visual-flow{display:flex;align-items:stretch;gap:.55rem;overflow-x:auto;padding:.3rem .1rem .6rem}
  .flow-node{min-width:135px;flex:1;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:8px;padding:.9rem;text-align:center}
  .flow-node .fn-icon{font-size:1.5rem;margin-bottom:.45rem}.flow-node strong{display:block;font-size:.78rem;color:var(--text);margin-bottom:.25rem}.flow-node span{font-size:.7rem;color:var(--muted2);line-height:1.45;display:block}
  .flow-arrow{align-self:center;color:var(--format-color,var(--cyan));font-size:1.1rem;flex:none}
  .visual-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
  .part-tile{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:8px;padding:.9rem;min-height:118px}
  .part-tile .pt-icon{font-size:1.35rem;margin-bottom:.4rem}.part-tile strong{display:block;color:var(--format-color,var(--cyan));font-size:.77rem;margin-bottom:.25rem}.part-tile span{display:block;color:var(--muted2);font-size:.69rem;line-height:1.45}
  .visual-compare{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
  .compare-side{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:8px;padding:1rem}
  .compare-side h4{font-family:var(--display);font-size:.82rem;color:var(--format-color,var(--cyan));margin:0 0 .7rem}
  .compare-side ul{list-style:none;margin:0;padding:0}.compare-side li{position:relative;padding:.35rem 0 .35rem 1.1rem;color:var(--muted);font-size:.73rem;line-height:1.45}.compare-side li::before{content:'✓';position:absolute;left:0;color:var(--format-color,var(--cyan));font-weight:800}
  .visual-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
  .step-tile{position:relative;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:8px;padding:2.1rem .85rem .85rem}
  .step-no{position:absolute;left:.75rem;top:.65rem;font-family:var(--display);font-size:1.2rem;color:var(--format-color,var(--cyan));opacity:.85}
  .step-tile strong{display:block;font-size:.76rem;margin-bottom:.3rem}.step-tile span{font-size:.68rem;line-height:1.45;color:var(--muted2)}
  .visual-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .check-row{display:flex;gap:.65rem;align-items:flex-start;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:8px;padding:.8rem}
  .check-row b{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:var(--format-bg,rgba(0,212,255,.12));color:var(--format-color,var(--cyan));font-size:.68rem;flex:none}.check-row strong{display:block;font-size:.74rem;margin-bottom:.15rem}.check-row span{font-size:.68rem;color:var(--muted2);line-height:1.4}
  .visual-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;position:relative;padding-top:.6rem}
  .visual-timeline::before{content:'';position:absolute;left:8%;right:8%;top:1rem;height:2px;background:var(--format-color,var(--cyan));opacity:.25}
  .time-item{position:relative;text-align:center;padding-top:1.2rem}.time-item::before{content:'';position:absolute;top:.1rem;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--format-color,var(--cyan));border:3px solid var(--bg2);box-shadow:0 0 12px var(--format-color,var(--cyan))}.time-item strong{display:block;color:var(--format-color,var(--cyan));font-family:var(--display);font-size:.72rem;margin-bottom:.35rem}.time-item span{display:block;color:var(--muted2);font-size:.67rem;line-height:1.4}
  .visual-reading-divider{display:flex;align-items:center;gap:.8rem;margin:2.2rem 0 1.2rem;color:var(--muted3);font-size:.63rem;text-transform:uppercase;letter-spacing:1.4px}.visual-reading-divider::before,.visual-reading-divider::after{content:'';height:1px;background:var(--line);flex:1}

  /* ARTICLE GRID (featured) */
  .feat-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:1.5px;background:var(--line);border:1.5px solid var(--line)}
  .feat-main{background:var(--bg2);padding:2.2rem;cursor:pointer;transition:background .2s;display:flex;flex-direction:column}
  .feat-main:hover{background:var(--bg3)}
  .feat-side{display:flex;flex-direction:column;gap:1.5px;background:var(--line)}
  .feat-small{background:var(--bg2);padding:1.4rem;cursor:pointer;transition:background .2s;flex:1;display:flex;flex-direction:column;justify-content:center}
  .feat-small:hover{background:var(--bg3)}
  .feat-cover{font-size:2.4rem;margin-bottom:1rem}
  .tag{display:inline-block;font-size:.64rem;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;padding:.25rem .6rem;border-radius:2px;align-self:flex-start;background:var(--accent-bg,rgba(0,212,255,.12));color:var(--accent,var(--cyan))}
  .feat-main h3{font-family:var(--display);font-size:1.25rem;font-weight:700;line-height:1.35;margin:.9rem 0 .7rem}
  .feat-small h3{font-size:.92rem;font-weight:600;line-height:1.4;margin:.7rem 0 .4rem}
  .excerpt{font-size:.86rem;color:var(--muted2);line-height:1.6;margin-bottom:1rem}
  .meta{display:flex;gap:.7rem;font-size:.7rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;align-items:center;flex-wrap:wrap}
  .meta .dot{opacity:.4}
  .readmore{color:var(--cyan);font-size:.74rem;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:auto;display:inline-flex;gap:.4rem;align-items:center}

  /* Keep the Latest Articles card structure stable even when plugins add generic link/card CSS. */
  .feat-grid > .feat-main{grid-column:1;grid-row:1;min-width:0;width:auto;height:auto;align-items:stretch;justify-content:flex-start}
  .feat-grid > .feat-side{grid-column:2;grid-row:1;min-width:0;width:auto;height:auto}
  .feat-main > .tag,.feat-small > .tag{display:inline-block;align-self:flex-start;width:auto}
  .feat-main > h3,.feat-main > .excerpt,.feat-main > .meta,.feat-main > .readmore{width:auto;max-width:none}

  /* METHOD */
  .method{position:relative;z-index:1;background:rgba(0,212,255,.02);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.4rem}
  .method-card{background:var(--bg2);border:1px solid var(--line);padding:1.8rem;transition:border-color .2s}
  .method-card:hover{border-color:var(--line2)}
  .method-num{font-family:var(--display);font-size:2.6rem;font-weight:900;color:rgba(0,212,255,.13);line-height:1;margin-bottom:.4rem}
  .method-ic{font-size:1.7rem;display:block;margin-bottom:.8rem}
  .method-card h3{font-family:var(--display);font-size:.84rem;font-weight:700;letter-spacing:1px;color:var(--cyan);text-transform:uppercase;margin-bottom:.6rem}
  .method-card p{font-size:.85rem;color:var(--muted2);line-height:1.6}

  /* NEWSLETTER */
  .news{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
  .news-box{background:var(--bg2);border:1px solid var(--line2);padding:2.6rem;display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center;position:relative;overflow:hidden;border-radius:4px}
  .news-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--green),var(--cyan))}
  .news-box h2{font-family:var(--display);font-size:1.4rem;font-weight:700;margin-bottom:.6rem}
  .news-box h2 .hl{color:var(--cyan)}
  .news-box p{font-size:.9rem;color:var(--muted2);line-height:1.6}
  .email-row{display:flex}
  .email-row input{flex:1;background:rgba(240,244,255,.05);border:1px solid var(--line2);border-right:none;color:var(--text);padding:.85rem 1rem;font-family:var(--body);font-size:.9rem;outline:none;border-radius:3px 0 0 3px}
  .email-row input:focus{border-color:var(--cyan)}
  .email-row input::placeholder{color:var(--muted3)}
  .email-row button{background:var(--cyan);color:var(--cyan-d);border:none;padding:0 1.4rem;font-family:var(--display);font-size:.7rem;letter-spacing:1px;font-weight:700;text-transform:uppercase;border-radius:0 3px 3px 0;white-space:nowrap}
  .email-row button:hover{background:#33ddff}
  .news-hint{font-size:.72rem;color:var(--muted3);margin-top:.6rem;letter-spacing:.4px}

  /* FOOTER */
  footer{position:relative;z-index:1;border-top:1px solid var(--line);background:rgba(10,14,26,.9);margin-top:3rem}
  .foot-inner{max-width:var(--maxw);margin:0 auto;padding:3rem 1.5rem 2.2rem;display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.1fr 1.1fr;gap:2rem}
  .foot-copy-wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
  .foot-copy{font-size:.74rem;color:var(--muted3);border-top:1px solid var(--line);padding:1.4rem 0}

  /* ===== ARTICLES / BLOG PAGE ===== */
  .page-head{margin-bottom:2rem}
  .toolbar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1.8rem}
  .search{flex:1;min-width:220px;position:relative}
  .search input{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--text);padding:.8rem 1rem .8rem 2.6rem;font-family:var(--body);font-size:.9rem;outline:none;border-radius:4px}
  .search input:focus{border-color:var(--cyan)}
  .search .icn{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--muted2);font-size:.95rem}
  .chips{display:flex;gap:.5rem;flex-wrap:wrap}
  .chip{background:var(--bg2);border:1px solid var(--line2);color:var(--muted);font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;font-weight:500;padding:.5rem .9rem;border-radius:20px;transition:all .15s}
  .chip:hover{color:var(--text);border-color:var(--cyan)}
  .chip.active{background:var(--cyan);color:var(--cyan-d);border-color:var(--cyan);font-weight:700}
  .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.4rem}
  .pcard{background:var(--bg2);border:1px solid var(--line);border-radius:5px;overflow:hidden;cursor:pointer;transition:transform .18s,border-color .18s;display:flex;flex-direction:column}
  .pcard:hover{transform:translateY(-4px);border-color:var(--line2)}
  .pcard-cover{height:120px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;background:linear-gradient(135deg,var(--bg3),var(--bg2));border-bottom:1px solid var(--line);position:relative}
  .pcard-cover::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent,var(--cyan))}
  .pcard-body{padding:1.3rem;display:flex;flex-direction:column;flex:1}
  .pcard-body h3{font-family:var(--display);font-size:1.02rem;font-weight:700;line-height:1.32;margin:.8rem 0 .55rem}
  .pcard .excerpt{flex:1}
  .badge-draft{background:rgba(255,215,0,.14);color:var(--gold);font-size:.6rem;letter-spacing:1px;text-transform:uppercase;font-weight:700;padding:.2rem .5rem;border-radius:2px;margin-left:.5rem}

  /* empty state */
  .empty{text-align:center;padding:4rem 1rem;border:1px dashed var(--line2);border-radius:6px;background:rgba(13,18,32,.5)}
  .empty .big{font-size:2.6rem;margin-bottom:1rem;opacity:.7}
  .empty h3{font-family:var(--display);font-size:1.1rem;margin-bottom:.6rem}
  .empty p{color:var(--muted2);font-size:.9rem;margin-bottom:1.4rem;max-width:380px;margin-left:auto;margin-right:auto}

  /* ===== POST READER ===== */
  .reader{max-width:none;margin:0 auto}
  .back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:1.6rem;transition:color .2s}
  .back-link:hover{color:var(--cyan)}
  .reader-cover{height:200px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:5rem;background:linear-gradient(135deg,var(--bg3),var(--bg2));border:1px solid var(--line);margin-bottom:1.8rem;position:relative;overflow:hidden}
  .reader-cover::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,var(--accent-bg,rgba(0,212,255,.12)),transparent 60%)}
  .reader h1{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;line-height:1.18;margin:1rem 0;letter-spacing:-.5px}
  .reader-meta{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;padding-bottom:1.6rem;margin-bottom:2rem;border-bottom:1px solid var(--line)}
  .reader-meta .who{color:var(--cyan)}
  .content{font-size:1.04rem;line-height:1.8;color:#dde4f0}
  .content h1,.content h2,.content h3,.content h4{font-family:var(--display);color:var(--text);line-height:1.3;margin:2rem 0 .9rem}
  .content h1{font-size:1.9rem} .content h2{font-size:1.65rem;color:var(--cyan)} .content h3{font-size:1.15rem} .content h4{font-size:1rem}
  .content p{margin:1rem 0}
  .content ul,.content ol{margin:1rem 0 1rem 1.4rem} .content li{margin:.4rem 0}
  .content a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
  .content strong{color:var(--text);font-weight:700}
  .content code{background:rgba(0,212,255,.1);color:var(--cyan);padding:.12rem .4rem;border-radius:3px;font-size:.88em;font-family:'Orbitron',monospace}
  .content pre{background:var(--bg2);border:1px solid var(--line2);border-left:3px solid var(--cyan);padding:1.1rem 1.2rem;border-radius:5px;overflow-x:auto;margin:1.4rem 0}
  .content pre code{background:none;color:#bfe9f7;padding:0;font-size:.85rem;line-height:1.6}
  .content blockquote{border-left:3px solid var(--green);background:rgba(57,255,20,.05);padding:.8rem 1.2rem;margin:1.4rem 0;color:var(--muted);font-style:italic;border-radius:0 5px 5px 0}
  .content hr{border:none;border-top:1px solid var(--line2);margin:2rem 0}
  .content img{border-radius:6px;border:1px solid var(--line);margin:1.4rem 0}
  .section-visual{position:relative;margin:.65rem 0 1.65rem;border:1px solid var(--line2);border-radius:11px;overflow:hidden;background:linear-gradient(145deg,var(--bg2),var(--bg4));box-shadow:0 18px 45px rgba(0,0,0,.18)}
  .section-visual::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--section-accent,var(--cyan));z-index:2}
  .section-visual svg{display:block;width:100%;height:auto;margin:0;border:0;border-radius:0;background:#0c1322}
  .section-visual figcaption{display:flex;align-items:center;gap:.65rem;padding:.75rem .95rem;border-top:1px solid var(--line);font-size:.7rem;color:var(--muted2);line-height:1.45}
  .section-visual figcaption span{font-family:var(--display);font-size:.58rem;letter-spacing:1.1px;text-transform:uppercase;color:var(--section-accent,var(--cyan));white-space:nowrap}
  .content h2 + .section-visual,.content h3 + .section-visual,.content h4 + .section-visual{margin-top:.7rem}
  .reader-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin:2.4rem 0;padding-top:1.6rem;border-top:1px solid var(--line)}
  .reader-tags .t{background:var(--bg2);border:1px solid var(--line2);color:var(--muted);font-size:.72rem;padding:.35rem .8rem;border-radius:20px}
  .reader-foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem}

  /* ===== EDITOR ===== */
  .editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
  .ed-form{display:flex;flex-direction:column;gap:1.2rem}
  .field label{display:block;font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--cyan);font-weight:600;margin-bottom:.5rem}
  .field label .req{color:var(--green)}
  .field input,.field select,.field textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--text);padding:.8rem 1rem;font-family:var(--body);font-size:.92rem;outline:none;border-radius:4px;transition:border-color .15s}
  .field textarea{resize:vertical;line-height:1.6}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan)}
  .field input.err,.field textarea.err{border-color:#ff6b6b}
  .field .hint{font-size:.72rem;color:var(--muted3);margin-top:.4rem}
  .field-row{display:grid;grid-template-columns:1fr 110px;gap:1rem}
  .ed-content{font-family:'Orbitron',monospace;font-size:.86rem !important;letter-spacing:.2px}
  .ed-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.6rem}
  .ed-count{font-size:.74rem;color:var(--muted2);margin-left:auto;align-self:center;letter-spacing:.5px}
  .preview-pane{position:sticky;top:90px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:1.6rem;max-height:calc(100vh - 130px);overflow:auto}
  .preview-head{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem}
  .preview-head::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
  .preview-empty{color:var(--muted3);font-style:italic;font-size:.9rem}
  .md-help{background:var(--bg4);border:1px solid var(--line);border-radius:5px;padding:.9rem 1.1rem;font-size:.74rem;color:var(--muted2);line-height:1.9}
  .md-help code{background:rgba(0,212,255,.1);color:var(--cyan);padding:.1rem .35rem;border-radius:3px;font-family:'Orbitron',monospace;font-size:.92em}

  /* ===== MANAGE ===== */
  .manage-list{display:flex;flex-direction:column;gap:.8rem}
  .mrow{display:flex;align-items:center;gap:1rem;background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:1rem 1.2rem;transition:border-color .15s}
  .mrow:hover{border-color:var(--line2)}
  .mrow .ic{font-size:1.6rem;flex:none}
  .mrow .info{flex:1;min-width:0}
  .mrow .info h4{font-family:var(--display);font-size:.95rem;font-weight:600;margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mrow .info .sub{font-size:.74rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
  .mrow .acts{display:flex;gap:.5rem;flex:none}
  .status-pub{color:var(--green)} .status-draft{color:var(--gold)}

  /* ABOUT */
  .about-hero{text-align:center;padding:1rem 0 2.5rem;border-bottom:1px solid var(--line);margin-bottom:2.5rem}
  .about-hero p{max-width:600px;margin:1.2rem auto 0;color:var(--muted);font-size:1.05rem;line-height:1.8;font-weight:300}
  .author-box{position:relative;margin:2.5rem 0;background:var(--bg2);border:1px solid var(--line2);border-radius:16px;padding:2rem 2rem 1.8rem;overflow:hidden;display:flex;gap:1.8rem;align-items:flex-start}
  .author-box::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--green),var(--cyan))}
  .ab-photo-wrap{flex:none;position:relative;width:128px}
  .ab-photo{display:block;width:128px;height:auto;border-radius:12px;border:3px solid var(--cyan);box-shadow:0 0 18px -4px rgba(0,212,255,.5)}
  .ab-badge{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;gap:.35rem;background:linear-gradient(135deg,#39FF14,#2fd60f);color:#06210a;font-size:.66rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;line-height:1;padding:.45rem .9rem;border-radius:999px;white-space:nowrap;border:2px solid var(--bg2);box-shadow:0 4px 14px -4px rgba(57,255,20,.55)}
  .ab-body{flex:1;min-width:0}
  .ab-label{color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:.5rem}
  .ab-name{font-family:var(--display);font-weight:800;font-size:1.8rem;color:var(--text);line-height:1.1;margin:0 0 .35rem}
  .ab-role{color:var(--cyan);font-size:1rem;font-weight:600;margin-bottom:1rem}
  .ab-bio{color:var(--muted);font-size:.95rem;line-height:1.75;font-weight:300;margin:0 0 1.2rem}
  .ab-tags{display:flex;flex-wrap:wrap;gap:.6rem}
  .ab-tag{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.28);color:var(--cyan);font-size:.78rem;font-weight:600;padding:.45rem .85rem;border-radius:999px}
  @media(max-width:640px){ .author-box{flex-direction:column;align-items:center;text-align:center;padding:1.8rem 1.2rem 1.4rem} .ab-photo-wrap{margin-bottom:14px} .ab-name{font-size:1.5rem} .ab-tags{justify-content:center} }
  .about-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:1rem}
  .about-cols .ac{background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:1.6rem}
  .about-cols .ac h4{font-family:var(--display);font-size:.9rem;color:var(--cyan);text-transform:uppercase;letter-spacing:1px;margin-bottom:.7rem}
  .about-cols .ac p{font-size:.88rem;color:var(--muted2);line-height:1.65}

  /* TOAST */
  .toasts{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:.6rem;align-items:center;pointer-events:none}
  .toast{background:var(--bg3);border:1px solid var(--line2);border-left:3px solid var(--green);color:var(--text);padding:.8rem 1.3rem;border-radius:5px;font-size:.85rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);animation:toastIn .25s ease;max-width:90vw}
  .toast.err{border-left-color:#ff6b6b}
  .toast.info{border-left-color:var(--cyan)}
  @keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

  /* MODAL */
  .modal-bg{position:fixed;inset:0;background:rgba(5,8,16,.7);backdrop-filter:blur(3px);z-index:150;display:flex;align-items:center;justify-content:center;padding:1.5rem;animation:fadeIn .15s}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .modal{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:1.8rem;max-width:400px;width:100%;text-align:center}
  .modal h3{font-family:var(--display);font-size:1.05rem;margin-bottom:.7rem}
  .modal p{color:var(--muted2);font-size:.9rem;margin-bottom:1.5rem;line-height:1.6}
  .modal-acts{display:flex;gap:.8rem;justify-content:center}

  /* section spacing utility */
  .blk{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:3.5rem 1.5rem}

  /* RESPONSIVE */
  @media(max-width:880px){
    .nav-links{display:none}
    .hamburger{display:inline-flex}
    .hero-inner{grid-template-columns:1fr;text-align:center;padding-top:3rem}
    .hero-tag{margin-left:auto;margin-right:auto}
    .hero p.lead{margin-left:auto;margin-right:auto}
    .hero-btns{justify-content:center}
    .hero-visual{order:-1;margin-bottom:1rem}
    .stats-inner{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(2){border-right:none}
    .feat-grid{grid-template-columns:1fr}
    .feat-grid > .feat-main,.feat-grid > .feat-side{grid-column:1;grid-row:auto}
    .method-grid{grid-template-columns:1fr}
    .visual-format-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .visual-story-intro{grid-template-columns:1fr}
    .visual-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
    .visual-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
    .news-box{grid-template-columns:1fr;gap:1.4rem}
    .editor-grid{grid-template-columns:1fr}
    .preview-pane{position:static;max-height:none}
    .foot-inner{grid-template-columns:1fr 1fr;gap:1.8rem}
    .foot-brand{grid-column:1/-1}
  }
  @media(max-width:520px){
    .wrap,.pagepad,.blk,.nav,.hero-inner,.foot-inner,.foot-copy-wrap,.news{padding-left:1.2rem;padding-right:1.2rem}
    .foot-inner{grid-template-columns:1fr;gap:1.6rem}
    .stats-inner{grid-template-columns:repeat(2,1fr)}
    .field-row{grid-template-columns:1fr}
    .visual-format-grid{grid-template-columns:1fr}
    .vf-card{min-height:310px}
    .visual-parts,.visual-compare,.visual-steps,.visual-checks,.visual-timeline{grid-template-columns:1fr}
    .visual-timeline::before{display:none}
    .visual-flow{align-items:stretch}
    .flow-arrow{transform:rotate(90deg);align-self:center}
    .visual-flow{flex-direction:column}
    .flow-node{min-width:0}
    .news-box{padding:1.6rem}
    .brand .wm-sub{display:none}
    .mrow{flex-wrap:wrap}
    .mrow .acts{width:100%;justify-content:flex-end}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  }


/* WordPress integration */
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-main{position:relative;z-index:1;min-height:50vh}
.brand-logo{display:block;width:240px;max-width:34vw}
.foot-logo{width:230px;height:105px}
.nav .brand{min-width:240px}
.wp-post-image{width:100%;height:auto}
.pagination{display:flex;gap:.65rem;justify-content:center;align-items:center;margin:2.5rem 0 0;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .8rem;border:1px solid var(--line2);border-radius:8px;color:var(--muted);background:var(--bg3)}
.pagination .current,.pagination .page-numbers:hover{color:var(--cyan);border-color:var(--cyan)}
.notice-box{max-width:760px;margin:1rem auto 1.5rem;padding:1rem 1.2rem;border:1px solid var(--line2);border-radius:10px;background:rgba(0,212,255,.08);color:var(--text)}
.notice-box.err{border-color:rgba(255,107,53,.55);background:rgba(255,107,53,.08)}
.contact-form button{border:0}
.contact-form .field{margin-bottom:1rem}
.contact-form input,.contact-form textarea{width:100%}
.menu-fallback{display:flex;align-items:center;gap:1.5rem;list-style:none}
.entry-content img{border-radius:12px}
.entry-content iframe{max-width:100%}
.post-nav{display:flex;justify-content:space-between;gap:1rem;margin:2rem 0;flex-wrap:wrap}
.post-nav a{color:var(--cyan)}
.setup-card{max-width:850px;background:#fff;border:1px solid #dcdcde;padding:24px;margin-top:20px;border-radius:8px}
@media(max-width:800px){.brand-logo{width:190px;max-width:68vw}.nav .brand{min-width:0}.foot-logo{width:220px}.menu-fallback{display:none}}


/* Exact SPA header, footer and all-categories alignment */
.categories-page{padding-top:.55rem}
.categories-page .categories-head{margin-bottom:2.35rem}
.categories-page .categories-head .sec-sub{max-width:650px;margin-bottom:0}
.categories-page .visual-series{margin-top:2.2rem}
.nav .nav-spacer{display:block;flex:1 1 auto}
.nav-links .dd-toggle .caret{margin-left:4px}
.foot-col #footCats a{display:flex}
@media(max-width:880px){
  .nav .nav-spacer{display:block}
  .categories-page{padding-top:1.5rem}
}

/* v1.2 single article compatibility isolation */
body.single-post #cvSiteMain .pagepad{display:block;position:relative;z-index:1;width:100%;max-width:none;margin:0;padding:3rem 1.5rem 1rem;background:transparent;transform:none}
body.single-post #cvSiteMain article.reader{display:block;position:relative;width:100%;max-width:none;min-height:0;margin:0;padding:0;background:transparent;border:0;overflow:visible;transform:none}
body.single-post #cvSiteMain article.reader .reader-cover{display:flex;width:100%;height:200px;margin:0 0 1.8rem;padding:0;align-items:center;justify-content:center;position:relative;overflow:hidden}

/* Featured image: show the FULL uploaded image (no cropping) on single posts */
.reader-cover.has-cover-image{height:auto;min-height:0;border:0;background:none;overflow:visible;font-size:0}
.reader-cover.has-cover-image::before{display:none}
.reader-cover.has-cover-image img{display:block;width:100%;height:auto;max-width:100%;border-radius:8px;object-fit:contain}
body.single-post #cvSiteMain article.reader .reader-cover.has-cover-image{display:block;height:auto;min-height:0;overflow:visible;background:none;border:0}
body.single-post #cvSiteMain article.reader .reader-cover.has-cover-image img{display:block;width:100%;height:auto;max-width:100%;border-radius:8px;object-fit:contain}
body.single-post #cvSiteMain article.reader h1{display:block;width:auto;height:auto;position:static;float:none;transform:none}
body.single-post #cvSiteMain article.reader .content{display:block;width:100%;height:auto;position:static;float:none;overflow:visible;transform:none}
@media(max-width:640px){body.single-post #cvSiteMain .pagepad{padding-left:1.2rem;padding-right:1.2rem}}


/* v1.5 safety: no visual/diagram story blocks inside any post. */
body.single-post .visual-story-intro,
body.single-post .visual-board,
body.single-post .visual-reading-divider,
body.single-post [class*="visual-story"],
body.single-post [class~="visual-board"] {
    display: none !important;
}

/* =====================================================================
   v2.0.3 CONTENT STYLE SHIELD
   Posts may contain pasted HTML with their own <style> blocks that set
   global rules like body{background:#fff} or h1{color:#333}. Those leak
   out of the article and flip the whole page to a light theme. The
   rules below use higher specificity + !important so the page shell
   (background, base text, title, meta) always stays on-brand, while
   the embedded widgets inside .content keep their own styling.
   ===================================================================== */
html{background:#0A0E1A !important}
html body.chipvortex-theme{
  --bg:#0A0E1A !important; --bg2:#0D1220 !important; --bg3:#111827 !important; --bg4:#0F1626 !important;
  --line:rgba(0,212,255,.12) !important; --line2:rgba(0,212,255,.24) !important;
  --cyan:#00D4FF !important; --green:#39FF14 !important;
  --text:#FFFFFF !important;
  --muted:rgba(255,255,255,.92) !important; --muted2:rgba(255,255,255,.85) !important; --muted3:rgba(255,255,255,.62) !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--body) !important;
  /* Pasted content CSS often boxes the body (max-width + auto margins).
     Keep the page shell full width no matter what the post contains. */
  max-width:none !important;
  width:auto !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  display:block !important;
}
html body.chipvortex-theme .reader > h1,
html body.chipvortex-theme .reader h1:first-of-type{
  color:var(--text) !important;
  font-family:var(--display) !important;
}
html body.chipvortex-theme .reader-meta{color:var(--muted2) !important}
html body.chipvortex-theme .reader-meta .who{color:var(--cyan) !important}
html body.chipvortex-theme .back-link{color:var(--muted) !important}
html body.chipvortex-theme .pagepad,
html body.chipvortex-theme .site-main{background:transparent !important}

/* ===== v2.1.0 FIELD EXPERIENCE / TRUST SECTION ===== */
.proof-section{position:relative}
.proof-embed{max-width:none;padding:2.75rem 0 .5rem}
.proof-embed .sec-title{font-size:1.5rem}
.proof-embed .proof-img{height:220px}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.proof-count-1{grid-template-columns:minmax(0,640px);justify-content:center}
.proof-count-2,.proof-count-4{grid-template-columns:repeat(2,1fr)}
.proof-card{position:relative;margin:0;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--bg2);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.proof-card::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(10,14,26,.92) 100%)}
.proof-card:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 18px 40px -18px rgba(0,212,255,.45)}
.proof-img{display:block;width:100%;height:260px;object-fit:cover;object-position:center 22%;filter:saturate(1.02);transition:transform .35s ease}
.proof-card:hover .proof-img{transform:scale(1.04)}
.proof-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:.45rem;padding:.7rem .9rem;color:var(--text);font-size:.76rem;font-weight:600;letter-spacing:.4px;line-height:1.4}
.proof-caption .proof-pin{font-size:.85rem;flex:none}
@media(max-width:900px){.proof-grid{grid-template-columns:repeat(2,1fr)}.proof-img{height:220px}}
@media(max-width:560px){.proof-grid{grid-template-columns:1fr}.proof-img{height:230px}}

/* ===== v2.2.0 WIDGET EMBED FRAME ===== */
.chip-widget-embed{margin:1.8rem 0;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--bg2);box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
.chip-widget-embed iframe{background:var(--bg)}

/* ===== v2.3.2 FULL-BLEED WIDGET EMBEDS =====
   Simulators are wider than the reading column, so by default the embed
   breaks out of the column and uses (almost) the full screen width,
   centered on the viewport. Add wide="no" to the shortcode to opt out. */
.chip-widget-wide{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(96vw,1500px);
  max-width:none;
}
@media(max-width:900px){
  .chip-widget-wide{width:calc(100vw - 1.6rem)}
}

/* v2.3.9 — footer legal links row */
.foot-legal{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;border-top:1px solid var(--line);padding:1.1rem 0 0}
.foot-legal a{color:var(--muted3);font-size:.74rem;line-height:1.8;transition:color .15s}
.foot-legal a:hover{color:var(--cyan)}
.foot-legal + .foot-copy{border-top:none;padding-top:.7rem}

/* v2.3.12 — mobile fix: newsletter box overflowing the viewport */
.news{width:100%;box-sizing:border-box}
.news-box{max-width:100%;min-width:0}
.news-box > div{min-width:0}
.news-box h2,.news-box p{overflow-wrap:break-word}
.email-row{width:100%;max-width:100%}
.email-row input{min-width:0;width:100%}
@media(max-width:560px){
  .email-row{flex-direction:column;gap:.7rem}
  .email-row input{border-right:1px solid var(--line2);border-radius:3px;box-sizing:border-box}
  .email-row input:focus{border-color:var(--cyan)}
  .email-row button{padding:.9rem 1.4rem;border-radius:3px;width:100%}
  .news-hint{text-align:center}
}

/* v2.3.15 — homepage improvements */
.hero-start{margin-top:1.1rem;font-size:.82rem;color:var(--muted2)}
.hero-start a{color:var(--cyan);font-weight:600;border-bottom:1px dashed rgba(0,212,255,.4)}
.hero-start a:hover{color:var(--green);border-color:rgba(57,255,20,.5)}

.sim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.sim-card{display:flex;flex-direction:column;gap:.55rem;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:1.4rem;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.sim-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--green))}
.sim-card:hover{border-color:var(--cyan);transform:translateY(-3px)}
.sim-ic{font-size:1.5rem}
.sim-card h3{font-family:var(--display);font-size:.98rem;font-weight:700;color:var(--text)}
.sim-card p{font-size:.82rem;color:var(--muted2);line-height:1.6;flex:1}
.sim-launch{font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--cyan)}
.sim-card:hover .sim-launch{color:var(--green)}

.faq-list{max-width:760px}
.faq-item{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;margin-bottom:.7rem;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;font-weight:600;font-size:.92rem;color:var(--text);transition:color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--cyan)}
.faq-caret{color:var(--cyan);font-size:.7rem;transition:transform .2s;flex:none}
.faq-item[open] .faq-caret{transform:rotate(180deg)}
.faq-item[open] summary{color:var(--cyan);border-bottom:1px solid rgba(0,212,255,.12)}
.faq-item p{padding:.9rem 1.2rem 1.1rem;font-size:.85rem;color:var(--muted2);line-height:1.7}
.faq-item p a{color:var(--cyan)}

.crumbs{font-size:.72rem;color:var(--muted3);margin-bottom:1rem;letter-spacing:.3px;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a{color:var(--muted2)}
.crumbs a:hover{color:var(--cyan)}
.crumbs .sep{color:var(--muted3)}
.crumbs .here{color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.reader-meta .updated{color:var(--green)}

@media(max-width:880px){.sim-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sim-grid{grid-template-columns:1fr}}

/* v2.3.16 — visual formats: featured simulator card + honest tags */
.vf-card.vf-featured{border-color:rgba(0,255,156,.55);box-shadow:0 0 34px -14px rgba(0,255,156,.55)}
.vf-card.vf-featured:hover{border-color:#00FF9C}
.vf-badge{margin-left:auto;font-size:.58rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#00FF9C;border:1px solid rgba(0,255,156,.5);border-radius:20px;padding:.22rem .6rem;background:rgba(0,255,156,.08)}
.vf-top{display:flex;align-items:center}
.mini-sim{display:flex;align-items:center;gap:.55rem;justify-content:center}
.mini-sim .ms-sw{font-size:.56rem;font-weight:800;letter-spacing:1px;color:var(--muted3);border:1px solid var(--line2);border-radius:20px;padding:.3rem .65rem}
.mini-sim .ms-sw.on{color:#00FF9C;border-color:rgba(0,255,156,.6);background:rgba(0,255,156,.1);box-shadow:0 0 10px -3px rgba(0,255,156,.7)}
.mini-sim .ms-gauge{width:64px;height:7px;border:1px solid var(--line2);border-radius:4px;overflow:hidden;background:#0a1020}
.mini-sim .ms-gauge i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--cyan),#00FF9C);animation:msGauge 2.2s ease-in-out infinite alternate}
@keyframes msGauge{from{width:22%}to{width:88%}}

/* v2.3.17 — FAQ open/close smoothing */
.faq-item p{animation:faqIn .22s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* v2.3.23 — "Beyond the Diagram" signature section */
.btd{position:relative;margin:2.6rem 0;padding:1.6rem 1.5rem 1.4rem;background:linear-gradient(160deg,var(--bg2),var(--bg4));border:1px solid var(--line2);border-radius:16px;overflow:hidden}
.btd::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--green) 45%,var(--orange));opacity:.9}
.btd-eyebrow{font-size:.68rem;letter-spacing:3px;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:.45rem}
.btd-title{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.25;margin:0 0 1.1rem;color:var(--text)}
.btd-title .btd-sub{display:block;font-family:var(--body);font-weight:500;font-size:.85rem;color:var(--muted);letter-spacing:.4px;margin-top:.3rem}
/* split image comparison */
.btd-split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:1.2rem;align-items:start}
.btd-pane{position:relative;margin:0;background:var(--bg3);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.btd-pane > img:not(.emoji):not(.wp-smiley){width:100%;height:auto;object-fit:contain;display:block;border-radius:0}
.btd-pane figcaption{font-size:.74rem;color:var(--muted);padding:.55rem .8rem;border-top:1px solid var(--line)}
.btd-pane-textbook{box-shadow:inset 0 0 0 1px rgba(0,212,255,.15)}
.btd-pane-real{box-shadow:inset 0 0 0 1px rgba(255,107,53,.18)}
.btd-tag{position:absolute;top:.6rem;left:.6rem;z-index:2;font-size:.66rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;backdrop-filter:blur(6px)}
.btd-tag-cyan{background:rgba(10,14,26,.88);color:var(--cyan);border:1px solid rgba(0,212,255,.55);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.btd-tag-orange{background:rgba(255,107,53,.16);color:var(--orange);border:1px solid rgba(255,107,53,.45)}
.btd-vs{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:3;font-family:var(--display);font-size:.8rem;font-weight:700;color:var(--bg);background:linear-gradient(135deg,var(--cyan),var(--green));padding:.45rem .6rem;border-radius:999px;box-shadow:0 0 18px rgba(0,212,255,.45)}
.btd-note{font-size:.8rem;color:var(--muted);margin:-.4rem 0 1.2rem;font-style:italic}
/* three sub-blocks */
.btd-grid{display:grid;gap:.9rem}
.btd-block{background:var(--bg3);border:1px solid var(--line);border-left-width:3px;border-radius:10px;padding:.95rem 1.05rem}
.btd-textbook{border-left-color:var(--cyan)}
.btd-reality{border-left-color:var(--orange)}
.btd-why{border-left-color:var(--gold)}
.btd-block-head{font-family:var(--display);font-size:.82rem;letter-spacing:.6px;margin-bottom:.45rem;display:flex;align-items:center;gap:.5rem}
.btd-textbook .btd-block-head{color:var(--cyan)}
.btd-reality .btd-block-head{color:var(--orange)}
.btd-why .btd-block-head{color:var(--gold)}
.btd-block-body{font-size:.92rem;color:var(--muted)}
.btd-block-body p{margin:0 0 .6rem}
.btd-block-body p:last-child{margin-bottom:0}
.btd-foot{margin-top:1.1rem;padding:.7rem .9rem;font-size:.78rem;color:var(--muted2);border:1px dashed rgba(255,107,53,.35);border-radius:8px;background:rgba(255,107,53,.05)}
.btd-foot strong{color:var(--orange)}
@media(max-width:680px){
  .btd-split{grid-template-columns:1fr}
  .btd-vs{top:50%}
  .btd-pane > img:not(.emoji):not(.wp-smiley){height:auto}
}

/* =====================================================================
   v2.4.2 SINGLE POST IMAGE SIZE FIX
   Root cause: --maxw is 100% (full-width site) and the v1.2 isolation
   block sets max-width:none on .pagepad and article.reader for single
   posts. Every image inside the post is width:100% / max-width:100%,
   so on wide screens featured images and in-content images render at
   the full viewport width (1600px+) and look enormous.
   Fix: give the article a readable column, cap image heights, and
   center smaller images instead of stretching them.
   ===================================================================== */

/* NOTE (v2.4.2b): article column stays FULL WIDTH as per original design.
   Only the images are size-capped and centered — text/content untouched. */

/* v2.4.3 — Featured (cover) image: FULL-WIDTH hero banner.
   Fills the full article column width, height capped so ultra-wide
   screens don't get an over-tall image. In-content images UNCHANGED. */
body.single-post #cvSiteMain article.reader .reader-cover.has-cover-image img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:560px !important;
  margin:0 !important;
  object-fit:cover !important;
  border-radius:8px !important;
}
@media(max-width:960px){
  body.single-post #cvSiteMain article.reader .reader-cover.has-cover-image img{max-width:100% !important}
}

/* In-content images: never stretch, cap width + height, center them
   (emoji + Beyond-the-Diagram images excluded — see v2.4.4 fix below)

   v2.7.1 — max-height raised from 520px to 1000px. The old 520px cap hit
   BEFORE the 860px width cap on portrait images, so a 2:3 Pinterest pin
   (1000x1500) rendered at only ~347x520px and its text was unreadable.
   With 1000px the WIDTH is the limiting dimension again: a 2:3 pin now
   renders ~667x1000px, while landscape images are unchanged (860px wide). */
body.single-post #cvSiteMain article.reader .content img:not(.emoji):not(.wp-smiley){
  display:block;
  width:auto !important;
  max-width:min(100%, 860px) !important;
  height:auto !important;
  max-height:1000px !important;
  margin:1.4rem auto !important;
  object-fit:contain;
}

/* WordPress alignment classes should still behave */
body.single-post article.reader .content img.alignleft{margin:1rem 1.4rem 1rem 0 !important;float:left}
body.single-post article.reader .content img.alignright{margin:1rem 0 1rem 1.4rem !important;float:right}
body.single-post article.reader .content figure{max-width:min(100%, 860px);margin:1.4rem auto}
body.single-post article.reader .content figure img{margin:0 auto !important}
body.single-post article.reader .content figcaption{text-align:center;font-size:.78rem;color:var(--muted2);margin-top:.5rem}

@media(max-width:640px){
  /* v2.7.1 — was max-height:400px, which squeezed a 2:3 pin down to ~267px
     wide on phones. Pins/portrait images now use the full column width. */
  body.single-post #cvSiteMain article.reader .content img:not(.emoji):not(.wp-smiley){
    max-width:100% !important;
    max-height:none !important;
  }
  body.single-post #cvSiteMain article.reader .reader-cover.has-cover-image img{max-height:300px !important}
}

/* =====================================================================
   v2.4.3 — AUTO BRAND WATERMARK (CSS overlay, non-destructive)
   Logo (assets/images/logo-mark.png) shown at the bottom-right corner of
   the featured image AND in-content images (wrapped by main.js .cv-wm-wrap).
   Nothing is baked into files — original media stays untouched.
   TWEAKS: change --cv-wm-opacity / --cv-wm-size below. To DISABLE, set
   --cv-wm-opacity to 0 (or delete this whole block).
   ===================================================================== */
:root{
  --cv-wm-img: url(assets/images/logo-mark.png);
  --cv-wm-opacity: .28;
}

/* Featured (cover) image watermark */
body.single-post #cvSiteMain article.reader .reader-cover.has-cover-image{position:relative}
body.single-post #cvSiteMain article.reader .reader-cover.has-cover-image::after{
  content:"";
  position:absolute;
  right:16px; bottom:14px;
  width:clamp(64px, 8%, 104px);
  aspect-ratio:480 / 265;
  background:var(--cv-wm-img) no-repeat center / contain;
  opacity:var(--cv-wm-opacity);
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.55));
  pointer-events:none;
  z-index:3;
}

/* In-content image watermark — wrapper span injected by main.js.
   Sizes/centering match the existing .content img rules (no size change). */
body.single-post #cvSiteMain article.reader .content .cv-wm-wrap{
  position:relative;
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  max-width:min(100%, 860px);
  margin:1.4rem auto;
  line-height:0;
}
body.single-post #cvSiteMain article.reader .content .cv-wm-wrap img{
  margin:0 !important; /* centering handled by the wrapper now */
}
body.single-post #cvSiteMain article.reader .content .cv-wm-wrap::after{
  content:"";
  position:absolute;
  right:12px; bottom:12px;
  width:clamp(52px, 10%, 88px);
  aspect-ratio:480 / 265;
  background:var(--cv-wm-img) no-repeat center / contain;
  opacity:var(--cv-wm-opacity);
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.55));
  pointer-events:none;
  z-index:3;
}

@media(max-width:640px){
  body.single-post #cvSiteMain article.reader .reader-cover.has-cover-image::after{right:10px;bottom:10px;width:clamp(48px,10%,74px)}
  body.single-post #cvSiteMain article.reader .content .cv-wm-wrap::after{right:8px;bottom:8px;width:clamp(42px,14%,64px)}
}

/* =====================================================================
   v2.4.4 — BEYOND THE DIAGRAM FIX
   1) WP converts 📖 ✈️ 💡 into <img class="emoji"> — the generic in-content
      img rules were blowing them up to 500px+. Force emoji to 1em.
   2) The generic .content img / figure rules were overriding the BTD split
      panes (height:230px / object-fit:cover) and centering the figures,
      which scattered the whole section. Restore BTD's own layout with
      higher specificity + !important so it always wins inside articles.
   ===================================================================== */

/* 1) Emoji: always inline, 1em, no border/margin/watermark styling */
img.emoji,
img.wp-smiley,
.content img.emoji,
.content img.wp-smiley,
body.single-post #cvSiteMain article.reader .content img.emoji,
body.single-post #cvSiteMain article.reader .content img.wp-smiley{
  display:inline-block !important;
  width:1em !important;
  height:1em !important;
  max-width:1em !important;
  max-height:1em !important;
  margin:0 .07em !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:none !important;
  vertical-align:-0.1em !important;
  object-fit:contain !important;
  float:none !important;
}

/* 2) BTD split panes: restore intended layout inside single posts */
body.single-post #cvSiteMain article.reader .content .btd .btd-split{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:.9rem !important;
  margin:0 0 1.2rem !important;
  align-items:start !important;
}
body.single-post #cvSiteMain article.reader .content .btd .btd-pane{
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
}
body.single-post #cvSiteMain article.reader .content .btd .btd-pane > img:not(.emoji):not(.wp-smiley){
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:contain !important;
}
body.single-post #cvSiteMain article.reader .content .btd .btd-pane figcaption{
  text-align:left !important;
  font-size:.74rem !important;
  color:var(--muted) !important;
  padding:.55rem .8rem !important;
  margin:0 !important;
  border-top:1px solid var(--line) !important;
}
/* watermark wrapper should never touch BTD images */
body.single-post #cvSiteMain article.reader .content .btd .cv-wm-wrap{
  position:static !important;
  display:contents !important;
}
body.single-post #cvSiteMain article.reader .content .btd .cv-wm-wrap::after{
  content:none !important;
}
@media(max-width:700px){
  body.single-post #cvSiteMain article.reader .content .btd .btd-split{
    grid-template-columns:1fr !important;
  }
  body.single-post #cvSiteMain article.reader .content .btd .btd-pane > img:not(.emoji):not(.wp-smiley){
    height:auto !important;
    max-height:none !important;
  }
}

/* =====================================================================
   v2.4.5 — EMOJI LOCKDOWN (final)
   Emoji-images anywhere inside the BTD section (tags, titles, blocks)
   can NEVER be sized by pane/content image rules. Highest specificity,
   placed last in the cascade.
   ===================================================================== */
body.single-post #cvSiteMain article.reader .content .btd img.emoji,
body.single-post #cvSiteMain article.reader .content .btd img.wp-smiley,
body.single-post #cvSiteMain article.reader .content .btd .btd-pane img.emoji,
body.single-post #cvSiteMain article.reader .content .btd .btd-pane img.wp-smiley,
body.single-post #cvSiteMain article.reader .content .btd .btd-tag img,
.btd .btd-tag img,
.btd .btd-block-head img,
.btd .btd-title img{
  display:inline-block !important;
  width:1em !important;
  height:1em !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:1em !important;
  max-height:1em !important;
  margin:0 .07em !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:static !important;
  float:none !important;
  object-fit:contain !important;
  vertical-align:-0.1em !important;
}

/* Pane anatomy re-assert: tag pinned top-left, caption at bottom */
body.single-post #cvSiteMain article.reader .content .btd .btd-pane{
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
}
body.single-post #cvSiteMain article.reader .content .btd .btd-tag{
  position:absolute !important;
  top:.6rem !important;
  left:.6rem !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2 !important;
}

/* =========================================================
   v2.4.6 — Auto FAQ accordion inside post content
   ========================================================= */
.content .post-faq{margin:1.4rem 0 2.2rem;max-width:none}
.content .post-faq .faq-item{margin-bottom:.7rem}
.content .post-faq .faq-item summary{font-family:var(--display);letter-spacing:.02em;font-size:.95rem}
.content .post-faq .faq-body{padding:.35rem 1.2rem 1.15rem;animation:faqIn .22s ease}
.content .post-faq .faq-item p{margin:.65rem 0;padding:0;font-size:.88rem;color:#fff;line-height:1.7}
.content .post-faq .faq-item p:first-child{margin-top:0}
.content .post-faq .faq-item p:last-child{margin-bottom:0}
.content .post-faq .faq-item ul,.content .post-faq .faq-item ol{margin:.6rem 0 .6rem 1.2rem;font-size:.88rem;color:#fff}
.content .post-faq .faq-item a{color:var(--cyan)}

/* =========================================================
   v2.5.0 — Styled tables inside post/page content
   ========================================================= */
.content .cv-table-wrap{width:100%;overflow-x:auto;margin:1.6rem 0 2rem;border:1px solid var(--line2);border-radius:8px;background:var(--bg2);-webkit-overflow-scrolling:touch}
.content .cv-table-wrap::-webkit-scrollbar{height:8px}
.content .cv-table-wrap::-webkit-scrollbar-thumb{background:rgba(0,212,255,.25);border-radius:4px}
.content table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.6;color:#fff}
.content table caption{caption-side:top;text-align:left;font-family:var(--display);font-size:.8rem;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);padding:1rem 1.2rem .4rem}
.content thead th,.content table tr:first-child th{background:linear-gradient(180deg,rgba(0,212,255,.14),rgba(0,212,255,.06));color:var(--cyan);font-family:var(--display);font-size:.78rem;letter-spacing:1px;text-transform:uppercase;font-weight:600;text-align:left;padding:.95rem 1.2rem;border-bottom:2px solid var(--line2)}
.content table td,.content table tbody th{padding:.85rem 1.2rem;border-bottom:1px solid var(--line);vertical-align:top}
.content table tbody th{color:#fff;font-weight:600;text-align:left}
.content table tbody tr:nth-child(even) td,.content table tbody tr:nth-child(even) th{background:rgba(255,255,255,.03)}
.content table tbody tr:hover td,.content table tbody tr:hover th{background:rgba(0,212,255,.06)}
.content table tbody tr:last-child td,.content table tbody tr:last-child th{border-bottom:none}
.content table a{color:var(--cyan)}
.content table td strong,.content table td b{color:#fff}
@media(max-width:640px){
  .content table{font-size:.82rem}
  .content thead th,.content table tr:first-child th{font-size:.68rem;letter-spacing:.5px;padding:.7rem .7rem}
  .content table td,.content table tbody th{padding:.65rem .7rem;word-break:break-word}
}

/* =====================================================================
   v2.6.0 — PINTEREST SAVE
   Hover "Save" button on article images, the [chip_pin] card, and the
   "Save to Pinterest" row after the content.
   Watermark sits bottom-right, so the pin button lives top-right.
   To DISABLE, use Appearance → Customize → Pinterest Save.
   ===================================================================== */
:root{
  /* Pin button palette — official Pinterest brand colours.
     Brand red #E60023, pressed/hover #AD081B, white label. */
  --cv-pin-bg:#E60023;
  --cv-pin-bg-hover:#AD081B;
  --cv-pin-fg:#FFFFFF;
}

/* Wrapper created when main.js has not already wrapped the image */
body.single-post #cvSiteMain article.reader .content .cv-pin-wrap{
  position:relative;
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  max-width:min(100%, 860px);
  margin:1.4rem auto;
  line-height:0;
}
body.single-post #cvSiteMain article.reader .content .cv-pin-wrap img{
  margin:0 !important;
}

/* Shared button — matches Pinterest's official Save button.
   The !important on colour/decoration is deliberate: the theme styles
   .content a links and would otherwise underline and recolour the label. */
.cv-pin-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--cv-pin-bg);
  color:var(--cv-pin-fg) !important;
  font-family:var(--body);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:0;
  line-height:1;
  height:36px;
  padding:0 1rem 0 .85rem;
  border-radius:18px;
  border:0;
  box-shadow:none;
  transition:background .15s ease;
  text-decoration:none !important;
  border-bottom:0 !important;
  background-image:none !important;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.cv-pin-btn:hover,
.cv-pin-btn:focus-visible{
  background:var(--cv-pin-bg-hover);
  color:var(--cv-pin-fg) !important;
  text-decoration:none !important;
  transform:none;
}
.cv-pin-btn span{
  text-decoration:none !important;
  border-bottom:0 !important;
  color:inherit;
}
.cv-pin-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Overlay button on images */
.cv-pin-btn-overlay{
  position:absolute;
  top:12px;
  left:12px;
  z-index:4;
  opacity:0;
  pointer-events:none;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.cv-wm-wrap:hover .cv-pin-btn-overlay,
.cv-pin-wrap:hover .cv-pin-btn-overlay,
.reader-cover:hover .cv-pin-btn-overlay,
.cv-pin-btn-overlay:focus-visible{
  opacity:1;
  pointer-events:auto;
}

/* Cover image: keep the theme's own overflow:visible — only position the button */
body.single-post #cvSiteMain article.reader .reader-cover .cv-pin-btn-overlay{top:14px;left:16px}

/* Touch devices have no hover — keep the button permanently visible */
@media (hover:none),(pointer:coarse){
  .cv-pin-btn-overlay{
    opacity:1;
    pointer-events:auto;
    top:8px;
    left:8px;
    height:32px;
    padding:0 .85rem 0 .7rem;
    font-size:.8rem;
  }
}

/* [chip_pin] dedicated pin card */
.cv-pin-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  margin:2.4rem auto;
  padding:1.4rem;
  max-width:620px; /* v2.7.1 — was 420px; full infographic pins were unreadable */
  background:var(--bg2);
  border:1px solid var(--line2);
  border-radius:14px;
}
.cv-pin-card-media{width:100%;line-height:0;border-radius:10px;overflow:hidden}
.cv-pin-card-media img{width:100%;height:auto;display:block;margin:0 !important}
.cv-pin-align-left{margin-left:0}
.cv-pin-align-right{margin-right:0}
.cv-pin-btn-lg{height:44px;font-size:1rem;padding:0 1.35rem 0 1.1rem;border-radius:22px}

/* "Save to Pinterest" row after the article */
.cv-pin-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.9rem;
  margin:2.6rem 0 .5rem;
  padding:1.2rem 1rem;
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:12px;
}
.cv-pin-row-label{
  font-family:var(--display);
  font-size:.8rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted2);
}

@media(max-width:640px){
  .cv-pin-card{padding:1rem;max-width:100%}
  .cv-pin-row{flex-direction:column;gap:.8rem;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .cv-pin-btn,.cv-pin-btn-overlay{transition:none}
}

/* Pinterest glyph sizing inside the button (official button uses a ~16px mark) */
.cv-pin-btn svg{flex:none;display:block;width:16px;height:16px}
.cv-pin-btn-lg svg{width:19px;height:19px}

/* =====================================================================
   v2.6.5 — SHORT ANSWER BLOCK
   The highlighted one-line answer under each H2.
   Markup stays a plain <p> so Google can lift it as a featured snippet;
   the left rule does all the visual work.
   Use: [answer]…[/answer]  or  add the CSS class "answer" to a paragraph.
   ===================================================================== */
body.single-post #cvSiteMain article.reader .content p.answer{
  border-left:3px solid var(--green);
  border-radius:0;
  padding:.2rem 0 .2rem 1.05rem;
  margin:1.2rem 0 1.5rem;
  font-size:1.06rem;
  font-weight:600;
  line-height:1.62;
  color:var(--text);
  letter-spacing:.1px;
}

/* First answer directly under a heading sits tighter to it */
body.single-post #cvSiteMain article.reader .content h2 + p.answer,
body.single-post #cvSiteMain article.reader .content h3 + p.answer{
  margin-top:.9rem;
}

/* Bolded key terms inside the answer get the accent colour... */
body.single-post #cvSiteMain article.reader .content p.answer strong{
  color:var(--green);
  font-weight:700;
}
/* ...but if the WHOLE line is bolded, keep it white and readable.
   A full sentence in neon green on a dark background is hard to read. */
body.single-post #cvSiteMain article.reader .content p.answer > strong:only-child{
  color:var(--text);
  font-weight:600;
}

@media(max-width:640px){
  body.single-post #cvSiteMain article.reader .content p.answer{
    padding-left:.85rem;
    font-size:1rem;
    line-height:1.58;
  }
}

/* =====================================================================
   v2.6.7 — PINTEREST SAVE: OVERLAY HARDENING
   -----------------------------------------------------------------
   SYMPTOM: hovering an article image (most visible on tall/vertical pin
   images) turned the whole image into a solid red block instead of
   showing a small "Save" pill.

   CAUSE: .cv-pin-btn-overlay is an <a> with display:flex and
   align-items:center. If ANY outside rule stretches it — a Pinterest
   plugin, a stale cached stylesheet, Additional CSS, or a parent that
   forces width/height onto links — it grows to the full size of the
   image. Its red button background then reads as a red curtain, with
   the "Save" label sitting centred inside it. That red rectangle IS
   the button.

   FIX: lock the button's own box so nothing can stretch it, re-anchor it
   to the image corner, and switch off any third-party full-image
   Pinterest hover overlay.

   NOTE ON SELECTORS: these use `html body a.cv-pin-btn...` on purpose.
   !important alone is not enough — a plugin rule marked !important that
   loads AFTER this stylesheet would still win on source order. The extra
   specificity makes these rules win regardless of load order.

   On a clean install this block changes nothing visually.
   ===================================================================== */

/* 1. The button can never grow larger than its own label -------------- */
html body a.cv-pin-btn,
html body a.cv-pin-btn.cv-pin-btn-overlay,
html body a.cv-pin-btn.cv-pin-btn-lg{
  box-sizing:border-box !important;
  width:auto !important;
  min-width:0 !important;
  max-width:max-content !important;
  min-height:0 !important;
  flex:0 0 auto !important;
  background-image:none !important;
}
html body a.cv-pin-btn,
html body a.cv-pin-btn.cv-pin-btn-overlay{
  height:36px !important;
  max-height:36px !important;
  align-self:flex-start !important;
}
html body a.cv-pin-btn.cv-pin-btn-lg{
  height:44px !important;
  max-height:44px !important;
  align-self:center !important;
}

/* 2. Overlay anchors to the image corner — never inset:0 -------------- */
html body a.cv-pin-btn.cv-pin-btn-overlay{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  right:auto !important;
  bottom:auto !important;
  z-index:4 !important;
}
html body.single-post #cvSiteMain article.reader .reader-cover a.cv-pin-btn.cv-pin-btn-overlay{
  top:14px !important;
  left:16px !important;
}
/* Touch devices have no hover — smaller, permanently visible pill */
@media (hover:none),(pointer:coarse){
  html body a.cv-pin-btn.cv-pin-btn-overlay{
    top:8px !important;
    left:8px !important;
    height:32px !important;
    max-height:32px !important;
  }
}

/* 3. Wrapper hugs the image, so the button can never be positioned
      against the full-width article column ------------------------- */
html body.single-post #cvSiteMain article.reader .content .cv-pin-wrap,
html body.single-post #cvSiteMain article.reader .content .cv-wm-wrap{
  position:relative;
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  max-width:min(100%, 860px);
  line-height:0;
}
/* The cover (featured) image is a full-width hero — its wrapper must stay
   100% wide, or the banner shrinks to the image's intrinsic width. It only
   needs to become a positioning context for the button. */
html body.single-post #cvSiteMain article.reader .reader-cover .cv-pin-wrap{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  line-height:0;
}
/* The theme never uses ::before on these wrappers, so anything appearing
   there is injected — remove it. ::after is the brand watermark and is
   deliberately left untouched. */
html body.single-post #cvSiteMain article.reader .cv-pin-wrap::before,
html body.single-post #cvSiteMain article.reader .cv-wm-wrap::before{
  content:none !important;
}

/* 4. Neutralise third-party full-image Pinterest hover overlays ------- */
html body.single-post .jpibfi,
html body.single-post .jpibfi-indicator,
html body.single-post .jpibfi_container,
html body.single-post [class*="pinit-hover"],
html body.single-post [class*="pin-it-overlay"],
html body.single-post [class*="pinterest-overlay"],
html body.single-post .swp_pin_button_overlay,
html body.single-post .tasty-pins-hidden-image-container::before{
  display:none !important;
  background:none !important;
}


/* =====================================================================
   ↓↓↓  DUSK MODE  (v2.9.1)  ↓↓↓
   ---------------------------------------------------------------------
   A lighter page for readers who find near-black too heavy — WITHOUT
   touching a single brand colour.

   WHY #36415A AND NOT SOMETHING LIGHTER
   The palette sets its own ceiling. Gadgets purple #B06EFF is the darkest
   accent (luminance 0.276), so for it to stay legible at 3:1 the page
   luminance cannot exceed 0.0587 — and #36415A sits at 0.0578. This is
   literally the lightest this page can go while every accent still reads.
   A light grey such as #BECBD6 measures 0.585, ten times over, and drops
   cyan to 1.07:1 — indistinguishable from its background.

   DEPTH MODEL IS INVERTED HERE, ON PURPOSE
   In dark mode cards sit LIGHTER than the page. At this lightness that
   would push purple down to 2.97:1, under the line. So cards sit DARKER
   than the page instead — they read as recessed rather than raised, and
   purple recovers to 3.64:1. Same visual hierarchy, better contrast.

   WHAT CHANGES:  surfaces only.
   WHAT DOES NOT: every accent colour, all text, the logo, the hero
                  artwork, the diagrams, the simulators, the pins.

   Measured across every surface — weakest value anywhere is 3.16:1:
       page   cyan 5.76  green 7.52  gold 7.27  mint 7.66  orange 3.59  purple 3.16
       cards  cyan 6.63  green 8.66  gold 8.37  mint 8.82  orange 4.14  purple 3.64
   ===================================================================== */

html[data-theme="dim"] { background: #36415A !important; }

html[data-theme="dim"] body.chipvortex-theme {
  --bg:   #36415A !important;   /* page   — was #0A0E1A */
  --bg2:  #2E384D !important;   /* cards  — now darker than the page */
  --bg3:  #283044 !important;   /* hover  — deepest step */
  --bg4:  #2B3449 !important;   /* panels */
  --line:  rgba(0,212,255,.20) !important;   /* same cyan, lifted to stay visible */
  --line2: rgba(0,212,255,.34) !important;
  background: var(--bg) !important;
}

/* Hardcoded surfaces, kept deeper than the cards so the artwork inside
   them still reads the way it does in dark mode. */
html[data-theme="dim"] body.chipvortex-theme .section-visual svg { background: #232B3C !important; }
html[data-theme="dim"] body.chipvortex-theme .section-visual     { background: linear-gradient(145deg,#232B3C,#2B3449) !important; }
html[data-theme="dim"] body.chipvortex-theme .section-visual figcaption { background: #232B3C !important; }
html[data-theme="dim"] body.chipvortex-theme .mini-sim .ms-gauge { background: #212938 !important; }
html[data-theme="dim"] body.chipvortex-theme .content pre        { background: #2A3345 !important; }
html[data-theme="dim"] body.chipvortex-theme .poster-label       { background: rgba(24,30,42,.86) !important; }
html[data-theme="dim"] body.chipvortex-theme .stats              { background: rgba(0,0,0,.10) !important; }
html[data-theme="dim"] ::-webkit-scrollbar-track { background: #2E384D; }
html[data-theme="dim"] ::-webkit-scrollbar-thumb { background: #556488; }
html[data-theme="dim"] ::-webkit-scrollbar-thumb:hover { background: #6A7BA3; }

/* Cards are recessed now, so the raised drop-shadow is replaced with a
   soft inset edge — otherwise they float the wrong way. */
html[data-theme="dim"] body.chipvortex-theme .pcard,
html[data-theme="dim"] body.chipvortex-theme .cat-card,
html[data-theme="dim"] body.chipvortex-theme .vf-card,
html[data-theme="dim"] body.chipvortex-theme .method-card {
  box-shadow: inset 0 1px 0 rgba(0,0,0,.18) !important;
}

/* Overlays that darken photographs are left alone — they act on the
   image, not on the page. */

/* ---- mode toggle button ---- */
.cv-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  flex:none;margin-left:.45rem;padding:0;border:1px solid var(--line2);border-radius:7px;
  background:rgba(0,212,255,.05);color:var(--muted);cursor:pointer;
  transition:color .18s,border-color .18s}
.cv-theme-toggle svg{width:15px;height:15px;display:block}
.cv-theme-toggle:hover,.cv-theme-toggle:focus-visible{color:var(--cyan);border-color:var(--cyan)}
.cv-theme-toggle .cv-ic-dim{display:none}
.cv-theme-toggle .cv-ic-dark{display:block}
html[data-theme="dim"] .cv-theme-toggle .cv-ic-dim{display:block}
html[data-theme="dim"] .cv-theme-toggle .cv-ic-dark{display:none}
@media (max-width:900px){.nav > .cv-theme-toggle{display:none}}
.cv-theme-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 2rem;border-top:1px solid var(--line)}
.cv-theme-toggle-row .cv-tt-label{font-size:.85rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.cv-theme-toggle-row .cv-theme-toggle{width:38px;height:38px;margin:0;border-radius:8px}
.cv-theme-toggle-row .cv-theme-toggle svg{width:17px;height:17px}

html.cv-theme-ready body.chipvortex-theme,
html.cv-theme-ready body.chipvortex-theme .pcard,
html.cv-theme-ready body.chipvortex-theme #cvSiteHeader,
html.cv-theme-ready body.chipvortex-theme #cvSiteFooter{
  transition:background-color .25s ease,border-color .25s ease}
@media (prefers-reduced-motion:reduce){
  html.cv-theme-ready body.chipvortex-theme,
  html.cv-theme-ready body.chipvortex-theme *{transition:none!important}}


/* =====================================================================
   v2.9.4 — READING COLUMN, SCOPED TO THE POST ONLY
   ---------------------------------------------------------------------
   Supersedes and REPLACES the v2.9.2 and v2.9.3 blocks. Those two were
   stacked overrides fighting each other; this is one block.

   WHAT IS NARROWED — the post itself, nothing else:
       back link, breadcrumb, category badge, H1, byline, featured image,
       and .content (paragraphs, headings, lists, quotes, FAQ, images).

   WHAT STAYS FULL WIDTH — restored to the original v2.9.1 behaviour:
       every static Page (privacy, terms, editorial policy, about,
       contact), the tag row, the AUTHOR BOX, the Pinterest save row and
       the end-of-post button row. article.reader is left full width, so
       these need no rule at all — they simply are not in the list below.

   THREE WIDTHS, all centred on the same axis:
       --cv-read    680px   prose — about 80 characters per line at the
                            theme's 1.04rem / 1.8 body type
       --cv-media   700px   images, figures, tables, featured image
       --cv-media-h 780px   height cap for tall (portrait) images

   IMAGE SIZES, original 2.9.1 -> now:
       2:3 pin        667x1000 -> 520x780
       4:5 pin        800x1000 -> 624x780
       square          860x860 -> 700x700
       16:9 diagram    860x484 -> 700x394
       featured hero   860x484 -> 700x394

   WHY THE HEIGHT CAP IS FLAT AND NOT vh
   A viewport cap such as min(780px, 88vh) would guarantee tall pins fit
   on screen, but on a 1366x768 laptop it collapses a 2:3 pin to 375x563 —
   barely above the 347x520 that v2.7.1 already rejected as unreadable.
   Infographic pins are meant to be scrolled, not fitted.

   MOBILE IS UNTOUCHED. Every cap is wider than a phone viewport, and the
   height rule is scoped to >=641px so the existing max-height:none
   override at 640px still governs.

   TO TUNE: the three values below are the only place any of this lives.
   ===================================================================== */

:root{
  --cv-read:     680px;
  --cv-media:    700px;
  --cv-media-h:  780px;
}

/* ---- 1. Post furniture on the prose axis ---------------------------- */
/* Block-level elements centre with auto margins. */
body.single-post #cvSiteMain article.reader > .crumbs,
body.single-post #cvSiteMain article.reader > h1,
body.single-post #cvSiteMain article.reader > .reader-meta{
  max-width: var(--cv-read);
  margin-left: auto;
  margin-right: auto;
}

/* .back-link is inline-flex and .tag is inline-block, so auto margins do
   nothing — they would stay pinned to the far left of the full-width
   article. Offset them by half the leftover instead. max() collapses the
   offset to zero once the viewport is narrower than the prose column, so
   this needs no media query: between 680px and desktop it tracks the
   centring exactly. (v2.9.2 had a max-width:900px override here that
   left-aligned them while the text stayed centred — that is removed.) */
body.single-post #cvSiteMain article.reader > .back-link,
body.single-post #cvSiteMain article.reader > span.tag{
  margin-left: max(0px, calc((100% - var(--cv-read)) / 2));
}

/* ---- 2. Featured image on the media axis ---------------------------- */
body.single-post #cvSiteMain article.reader > .reader-cover{
  max-width: var(--cv-media);
  margin-left: auto;
  margin-right: auto;
}

/* ---- 3. The content column ------------------------------------------ */
body.single-post #cvSiteMain article.reader .content{
  max-width: var(--cv-media);
  margin-left: auto;
  margin-right: auto;
}

/* Prose inside it. Direct children only — paragraphs nested in .btd
   blocks, FAQ answers, table cells and pin cards keep their container's
   width. */
body.single-post #cvSiteMain article.reader .content > p,
body.single-post #cvSiteMain article.reader .content > h1,
body.single-post #cvSiteMain article.reader .content > h2,
body.single-post #cvSiteMain article.reader .content > h3,
body.single-post #cvSiteMain article.reader .content > h4,
body.single-post #cvSiteMain article.reader .content > h5,
body.single-post #cvSiteMain article.reader .content > h6,
body.single-post #cvSiteMain article.reader .content > blockquote,
body.single-post #cvSiteMain article.reader .content > dl,
body.single-post #cvSiteMain article.reader .content > hr{
  max-width: var(--cv-read);
  margin-left: auto;
  margin-right: auto;
}

/* Lists need the bullet indent as padding, not margin — margin-left:auto
   cancels the theme's 1.4rem indent and hangs the markers outside. */
body.single-post #cvSiteMain article.reader .content > ul,
body.single-post #cvSiteMain article.reader .content > ol{
  max-width: var(--cv-read);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.4rem;
}

/* The FAQ accordion is running text. .content .post-faq{max-width:none}
   earlier in this file would otherwise leave it on the media axis. */
body.single-post #cvSiteMain article.reader .content > .post-faq{
  max-width: var(--cv-read) !important;
}

/* A paragraph whose only child is an image is a media block, not prose.
   The classic editor and pasted HTML emit <p><img></p>, and at runtime
   main.js rewraps that image in <span class="cv-wm-wrap"> for the
   watermark (pinterest-save.js uses .cv-pin-wrap) — all four shapes are
   matched. :has() degrades cleanly: without it the image just sits at the
   prose width, 20px narrower, which still reads fine. */
body.single-post #cvSiteMain article.reader .content > p:has(> img:only-child),
body.single-post #cvSiteMain article.reader .content > p:has(> a:only-child > img),
body.single-post #cvSiteMain article.reader .content > p:has(> .cv-wm-wrap:only-child),
body.single-post #cvSiteMain article.reader .content > p:has(> .cv-pin-wrap:only-child){
  max-width: var(--cv-media);
}

/* ---- 4. Image caps -------------------------------------------------- */
@media(min-width:641px){
  body.single-post #cvSiteMain article.reader .content img:not(.emoji):not(.wp-smiley){
    max-width:  min(100%, var(--cv-media)) !important;
    max-height: var(--cv-media-h) !important;
  }
  /* The runtime wrappers shrink-wrap the image and carry their own 860px
     literal from v2.4.3 / v2.6.7. They have to track the same cap or the
     watermark and Save button drift away from the image corner. */
  body.single-post #cvSiteMain article.reader .content .cv-wm-wrap,
  body.single-post #cvSiteMain article.reader .content .cv-pin-wrap,
  html body.single-post #cvSiteMain article.reader .content .cv-wm-wrap,
  html body.single-post #cvSiteMain article.reader .content .cv-pin-wrap,
  body.single-post article.reader .content figure{
    max-width: min(100%, var(--cv-media));
  }
}