:root{--primary:#D946EF;--primary-dark:#C026D3;--primary-light:#FDF4FF;--primary-glow:rgba(217,70,239,0.25);--accent:#E879F9;--bg-body:#FDF4FF;--bg-surface:#FFFFFF;--bg-glass:rgba(255,255,255,0.85);--bg-card:linear-gradient(135deg,#FFFFFF 0%,#FDF4FF 100%);--text-main:#701A75;--text-muted:#A21CAF;--text-light:#C026D3;--border-color:rgba(217,70,239,0.15);--shadow-sm:0 2px 8px rgba(0,0,0,0.04);--shadow-md:0 8px 24px rgba(217,70,239,0.1);--shadow-lg:0 16px 32px rgba(217,70,239,0.14);--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-pill:9999px}
    [data-theme="dark"]{--primary:#E879F9;--primary-dark:#D946EF;--primary-light:rgba(232,121,249,0.15);--primary-glow:rgba(232,121,249,0.3);--accent:#F0ABFC;--bg-body:#1a0a1f;--bg-surface:#2d1035;--bg-glass:rgba(45,16,53,0.85);--bg-card:linear-gradient(135deg,#2d1035 0%,#1a0a1f 100%);--text-main:#F5D0FE;--text-muted:#F0ABFC;--text-light:#E879F9;--border-color:rgba(232,121,249,0.22);--shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 8px 24px rgba(0,0,0,0.4);--shadow-lg:0 16px 32px rgba(0,0,0,0.5)}
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:90px}
    body{font-family:'Inter',system-ui,-apple-system,sans-serif;background-color:var(--bg-body);color:var(--text-main);line-height:1.8;font-size:16px;transition:background-color 0.3s ease,color 0.3s ease}
    .skip-link{position:absolute;top:-100px;left:20px;background:var(--primary);color:#fff;padding:10px 18px;z-index:99999;font-weight:600;border-radius:0 0 8px 8px;transition:top 0.2s ease}
    .skip-link:focus{top:0}
    .reading-progress-bar{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));z-index:10000;width:0%;transition:width 0.1s linear}
    .navbar{position:sticky;top:0;z-index:9999;background:var(--bg-glass);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color);padding:14px 24px}
    .nav-container{max-width:clamp(1200px, 62.5vw, 1800px);margin:0 auto;display:flex;align-items:center;justify-content:space-between}
    .brand-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
    .brand-logo img{width:36px;height:36px;border-radius:8px}
    .brand-text{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:800;color:var(--text-main);letter-spacing:-0.5px}
    .brand-tagline{font-size:0.7rem;color:var(--text-light);font-weight:500;opacity:0.85}
    .nav-menu{display:flex;align-items:center;gap:24px;list-style:none}
    .nav-menu a{text-decoration:none;color:var(--text-muted);font-size:0.92rem;font-weight:500;transition:color 0.2s ease}
    .nav-menu a:hover{color:var(--primary)}
    .nav-actions{display:flex;align-items:center;gap:12px}
    .btn-theme-toggle{background:var(--primary-light);border:1px solid var(--border-color);color:var(--primary);padding:7px 10px;border-radius:var(--radius-pill);cursor:pointer;display:flex;align-items:center;justify-content:center}
    .btn-cta-tool{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:0.9rem;padding:10px 20px;border-radius:var(--radius-pill);box-shadow:0 4px 14px var(--primary-glow);transition:all 0.2s ease}
    .btn-cta-tool:hover{transform:translateY(-2px)}
    .hero-wrapper{padding:48px 20px 36px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 20%,var(--primary-light) 0%,transparent 70%)}
    .hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--bg-surface);border:1px solid var(--border-color);padding:6px 18px;border-radius:var(--radius-pill);font-family:'JetBrains Mono',monospace;font-size:0.8rem;font-weight:600;color:var(--primary);text-transform:uppercase;margin-bottom:20px;box-shadow:var(--shadow-sm)}
    .hero-title{font-family:'Outfit',sans-serif;font-size:clamp(2.2rem,5vw,3.3rem);font-weight:800;line-height:1.15;color:var(--text-main);margin-bottom:20px}
    .hero-title span{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .hero-description{max-width:clamp(700px, 36.5vw, 1100px);margin:0 auto 28px;font-size:1.12rem;color:var(--text-muted);line-height:1.7}
    .hero-pills{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}
    .hero-pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg-surface);border:1px solid var(--border-color);padding:6px 14px;border-radius:var(--radius-pill);font-size:0.82rem;color:var(--text-muted);font-weight:500}
    .hero-pill svg{width:14px;height:14px;stroke:var(--primary);fill:none;stroke-width:2}
    .hero-meta{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-size:0.88rem;color:var(--text-light);opacity:0.85;margin-top:16px}
    .main-container{max-width:clamp(960px, 50vw, 1500px);margin:0 auto;padding:24px 14px 40px}
    .summary-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:28px;margin-bottom:32px;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
    .summary-card::before{content:'';position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(180deg,var(--primary),var(--accent))}
    .summary-header{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:700;color:var(--primary);margin-bottom:16px}
    .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 24px;list-style:none}
    .summary-grid li{position:relative;padding-left:22px;font-size:0.95rem;color:var(--text-muted)}
    .summary-grid li::before{content:'\2192';position:absolute;left:0;color:var(--primary);font-weight:700}
    .toc-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px;margin-bottom:36px;box-shadow:var(--shadow-sm)}
    .toc-title{font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:18px;color:var(--text-main)}
    .toc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 20px;list-style:none;counter-reset:toc-counter}
    .toc-grid li{counter-increment:toc-counter}
    .toc-grid a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-muted);font-size:0.92rem;font-weight:500;transition:color 0.2s}
    .toc-grid a::before{content:counter(toc-counter,decimal-leading-zero);font-family:'JetBrains Mono',monospace;font-size:0.75rem;font-weight:700;color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:4px}
    .toc-grid a:hover{color:var(--primary)}
    .section-block{margin-bottom:40px;scroll-margin-top:100px}
    .section-title{font-family:'Outfit',sans-serif;font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--text-main);margin-bottom:10px;display:flex;align-items:center;gap:12px}
    .title-icon{width:40px;height:40px;background:var(--primary-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;font-family:'Outfit',sans-serif;font-weight:800;font-size:1rem}
    .section-lead{font-size:1.05rem;color:var(--text-muted);margin-bottom:14px}
    .p-text{font-size:1rem;color:var(--text-muted);margin-bottom:16px;line-height:1.8}
    .p-text strong{color:var(--text-main);font-weight:600}
    a.tool-link{color:var(--primary-dark);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s}
    a.tool-link:hover{border-bottom-color:var(--primary)}
[data-theme="dark"] a.tool-link{color:var(--primary);}
    /* Body content links (external references): theme-aware in light + dark mode */
    .p-text a:not([class]), .section-lead a:not([class]), .faq-item a:not([class]), .step-box a:not([class]), .callout-box a:not([class]), .callout-warning a:not([class]), .takeaway-box a:not([class]), .info-card a:not([class]), td a:not([class]), th a:not([class]){color:var(--primary-dark);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s;}
    .p-text a:not([class]):hover, .section-lead a:not([class]):hover, .faq-item a:not([class]):hover, .step-box a:not([class]):hover, .callout-box a:not([class]):hover, .callout-warning a:not([class]):hover, .takeaway-box a:not([class]):hover, .info-card a:not([class]):hover, td a:not([class]):hover, th a:not([class]):hover{border-bottom-color:var(--primary);}
    [data-theme="dark"] .p-text a:not([class]), [data-theme="dark"] .section-lead a:not([class]), [data-theme="dark"] .faq-item a:not([class]), [data-theme="dark"] .step-box a:not([class]), [data-theme="dark"] .callout-box a:not([class]), [data-theme="dark"] .callout-warning a:not([class]), [data-theme="dark"] .takeaway-box a:not([class]), [data-theme="dark"] .info-card a:not([class]), [data-theme="dark"] td a:not([class]), [data-theme="dark"] th a:not([class]){color:var(--primary);}
    .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:16px 0}
    .info-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:22px;transition:all 0.25s ease;box-shadow:var(--shadow-sm)}
    .info-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary)}
    .info-card h3{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:700;margin-bottom:8px}
    .info-card p{font-size:0.9rem;color:var(--text-muted);line-height:1.6}
    .steps-container{display:flex;flex-direction:column;gap:12px;margin:16px 0}
    .steps-container { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
    .step-box {
      display: grid; grid-template-columns: 1fr 400px; gap: 14px; align-items: center;
      background: var(--bg-surface); border: 1px solid var(--border-color);
      border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-sm);
      transition: border-color 0.2s;
    }
    .step-box:hover { border-color: var(--primary); }
    .step-box:not(:has(.step-shot)) { grid-template-columns: 1fr; }
    .step-box:not(:has(.step-shot)) .step-num { display: inline; font-size: 1.2rem; margin-right: 8px; vertical-align: middle; }
    .step-box:not(:has(.step-shot)) .step-body h3 { display: inline; vertical-align: middle; }
    .step-num {
      font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; font-weight: 800;
      color: var(--primary); opacity: 0.5; line-height: 1;
    }
    .step-body h3 { font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
    .step-body p, .step-body li { font-size: 0.95rem; color: var(--text-muted); line-height: 1.55; }
    .step-body ul { padding-left: 18px; margin-top: 6px; }
    .step-body li { margin-bottom: 3px; }
    .step-shot {
      border-radius: 10px; overflow: hidden;
      border: 1px solid var(--border-color); background: var(--bg-body);
      cursor: zoom-in; position: relative; transition: box-shadow 0.25s, transform 0.25s;
      box-shadow: var(--shadow-sm); justify-self: end;
    }
    .step-shot:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
    .step-shot img { display: block; width: 400px; height: 165px; object-fit: cover; object-position: top center; }
    .step-shot .zoom-icon {
      position: absolute; top: 8px; right: 8px;
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.25s;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    [data-theme="dark"] .step-shot .zoom-icon { background: rgba(15,23,42,0.7); }
    .step-shot:hover .zoom-icon { opacity: 1; }
    .step-shot .zoom-icon svg { width: 14px; height: 14px; stroke: var(--primary); fill: none; stroke-width: 2; }
    @media(max-width:900px) {
      .step-box { grid-template-columns: 1fr; }
      .step-shot { justify-self: start; }
      .step-shot img { width: 100%; height: auto; max-height: 180px; }
    }
    .step-num{font-family:'JetBrains Mono',monospace;font-size:2rem;font-weight:800;color:var(--primary);opacity:0.6;line-height:1}
    .step-body h3{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:700;margin-bottom:6px}
    .step-body p,.step-body li{font-size:0.94rem;color:var(--text-muted)}
    .step-body ul{padding-left:18px;margin-top:6px}
    .step-body li{margin-bottom:3px}
    .custom-table-wrapper{overflow-x:auto;margin:16px 0;border-radius:var(--radius-md);border:1px solid var(--border-color)}
    .custom-table{width:100%;border-collapse:collapse;background:var(--bg-surface);text-align:left}
    .custom-table th{background:var(--primary-light);font-family:'Outfit',sans-serif;font-weight:700;color:var(--primary);padding:13px 16px;font-size:0.88rem}
    .custom-table td{padding:13px 16px;border-top:1px solid var(--border-color);font-size:0.9rem;color:var(--text-muted)}
    .custom-table tr:hover td{background:var(--bg-body)}
    .callout-box{border-radius:var(--radius-md);padding:18px;margin:16px 0}
    .callout-tip{background:var(--primary-light);border:1px solid var(--border-color)}
    .callout-warning{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
    [data-theme="dark"] .callout-warning{background:rgba(153,27,27,0.2);border-color:rgba(239,68,68,0.4);color:#FCA5A5}
    .callout-title{font-family:'JetBrains Mono',monospace;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px}
    .faq-wrapper{margin:16px 0}
    .faq-item{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden}
    .faq-btn{width:100%;text-align:left;background:none;border:none;padding:18px 22px;font-family:'Outfit',sans-serif;font-size:1.02rem;font-weight:700;color:var(--text-main);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px}
    .faq-btn:hover{color:var(--primary)}
    .faq-btn-icon{transition:transform 0.3s ease;color:var(--primary);flex-shrink:0}
    .faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;padding:0 22px;color:var(--text-muted);font-size:0.94rem;line-height:1.7}
    .faq-item.active .faq-answer{max-height:420px;padding:0 22px 18px}
    .faq-item.active .faq-btn-icon{transform:rotate(180deg)}
    .cta-banner{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:var(--radius-lg);padding:36px 28px;text-align:center;color:#fff;margin:36px 0;box-shadow:var(--shadow-lg)}
    .cta-banner h2{font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800;margin-bottom:12px}
    .cta-banner p{max-width:520px;margin:0 auto 26px;opacity:0.9;font-size:1.05rem}
    .btn-cta-large{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--primary-dark);font-family:'Outfit',sans-serif;font-weight:800;font-size:1.05rem;padding:15px 34px;border-radius:var(--radius-pill);text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,0.15);transition:all 0.2s}
    .btn-cta-large:hover{transform:scale(1.03)}
    .cross-link-box{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px;margin:20px 0;text-align:center}
    .cross-link-box p{font-size:0.95rem;color:var(--text-muted);margin-bottom:14px}
    .cross-link-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
    .cross-link-pills a{display:inline-block;padding:6px 14px;background:var(--primary-light);border:1px solid var(--border-color);border-radius:var(--radius-pill);font-size:0.85rem;color:var(--primary-dark);text-decoration:none;font-weight:600;transition:all 0.2s}
    .cross-link-pills a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
    .related-guides-box{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px;margin:20px 0}
    .related-guides-box h3{font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:12px}
    .related-pills{display:flex;flex-wrap:wrap;gap:8px}
    .related-pills a{display:inline-block;padding:6px 14px;background:var(--primary-light);border:1px solid var(--border-color);border-radius:var(--radius-pill);font-size:0.85rem;color:var(--primary-dark);text-decoration:none;transition:all 0.2s}
    .related-pills a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
    .takeaway-box{background:linear-gradient(135deg,var(--primary-light),#FDF4FF);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px;margin:20px 0}
    .takeaway-box h2{font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:700;margin-bottom:16px;color:var(--primary-dark)}
    .takeaway-list{list-style:none;padding:0}
    .takeaway-list li{padding:8px 0 8px 28px;position:relative;font-size:0.95rem;color:var(--text-muted);line-height:1.6}
    .takeaway-list li::before{content:attr(data-num);position:absolute;left:0;color:var(--primary);font-weight:700;font-family:'JetBrains Mono',monospace}
    .author-box{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px;display:flex;gap:20px;align-items:flex-start;margin:28px 0}
    .author-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.4rem;flex-shrink:0}
    .author-info h3{font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:4px}
    .author-role{font-size:0.84rem;color:var(--primary);font-weight:600;margin-bottom:8px}
    .author-desc{font-size:0.9rem;color:var(--text-muted);line-height:1.6}
    .site-footer{background:var(--bg-surface);border-top:1px solid var(--border-color);padding:24px 20px 16px;margin-top:20px;font-size:0.85rem;color:var(--text-light)}
    .footer-grid{max-width:clamp(1200px, 62.5vw, 1800px);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
    .footer-col h4{font-family:'Outfit',sans-serif;font-size:0.88rem;font-weight:700;color:var(--text-main);margin-bottom:8px}
    .footer-col a{display:block;color:var(--text-muted);text-decoration:none;margin-bottom:4px}
    .footer-col a:hover{color:var(--primary)}
    .footer-bottom{max-width:clamp(1200px, 62.5vw, 1800px);margin:20px auto 0;text-align:center;border-top:1px solid var(--border-color);padding-top:12px}
    @media(max-width:768px){.hero-wrapper{padding:32px 16px 24px}.nav-menu{display:none}.author-box{flex-direction:column}}
    .nav-container{flex-wrap:nowrap}.nav-actions{flex-wrap:nowrap;flex-shrink:1;min-width:0}.btn-cta-tool{white-space:nowrap;flex-shrink:1;min-width:0}.brand-tagline{white-space:nowrap}.nav-menu{flex-wrap:nowrap;flex-shrink:1;min-width:0}.nav-menu a{white-space:nowrap}@media (max-width:900px){.nav-menu{gap:14px}.nav-actions{gap:8px}}@media (max-width:768px){.nav-menu{display:none}}@media (max-width:640px){.navbar{padding:10px 14px}.nav-actions{gap:6px}.btn-theme-toggle{padding:6px 8px}.btn-cta-tool{padding:8px 10px;font-size:0.78rem}.brand-tagline{display:none}.brand-text{font-size:1.05rem}.brand-logo{gap:8px}}