:root{--orange: #EC7726;--hot: #FF8A38;--amber: #F4A93B;--magenta: #F2557A;--violet: #7A5CE6;--ice: #6FA8FF;--void: #06070B;--space: #0A0C13;--space-2:#0E1119;--panel: #14171F;--panel-2:#181C26;--ink: #EEF0F5;--muted: #9AA2B1;--faint: #5C6473;--line: rgba(255,255,255,0.08);--line-soft: rgba(255,255,255,0.05);--line-hot: rgba(236,119,38,0.45);--display: 'Helvetica Neue',Helvetica,Arimo,Arial,sans-serif;--body: 'Helvetica Neue',Helvetica,Arimo,Arial,sans-serif;--mono: 'JetBrains Mono',ui-monospace,monospace;--r-sm: 10px;--r: 14px;--r-lg: 20px;--r-xl: 28px;--shadow: 0 30px 80px -40px rgba(0,0,0,0.8);--shadow-sm: 0 16px 40px -28px rgba(0,0,0,0.7);--glow-orange: 0 0 0 1px rgba(255,138,56,0.4),0 18px 50px -16px rgba(236,119,38,0.55);--maxw: 1220px}*{box-sizing: border-box}html{scroll-behavior: smooth;scroll-padding-top:92px;-webkit-font-smoothing: antialiased;overflow-x: hidden}body{margin: 0;font-family: var(--body);color: var(--ink);background: var(--space);line-height: 1.55;overflow-x: hidden;width: 100%;max-width: 100vw}img{max-width: 100%;display: block}a{color: inherit;text-decoration: none}::selection{background: rgba(236,119,38,0.3)}.wrap{max-width: var(--maxw);margin: 0 auto;padding: 0 30px}.section{padding: 110px 0;position: relative}.section-2{background: var(--space-2)}.divider-top{border-top: 1px solid var(--line-soft)}h1,h2,h3,h4{font-family: var(--display);font-weight: 700;letter-spacing: -0.02em;margin: 0;line-height: 1.04;color: #fff}.eyebrow{font-family: var(--mono);font-size: 12px;letter-spacing: 0.2em;text-transform: uppercase;color: var(--hot);display: inline-flex;align-items: center;gap: 11px}.eyebrow::before{content: '';width: 22px;height: 1px;background: linear-gradient(90deg,transparent,var(--hot))}.eyebrow.center::before{display: none}.h2{font-size: clamp(32px,4.4vw,52px);letter-spacing: -0.03em}.lede{font-size: 18px;line-height: 1.62;color: var(--muted);max-width: 600px}.section-head{max-width: 740px;margin-bottom: 60px}.section-head .h2{margin-top: 18px}.section-head .lede{margin-top: 20px}.mono{font-family: var(--mono)}.text-grad{background: linear-gradient(100deg,var(--hot),var(--amber) 60%,var(--magenta));-webkit-background-clip: text;background-clip: text;color: transparent}.btn{display: inline-flex;align-items: center;gap: 10px;line-height: 1.2;font-family: var(--body);font-weight: 600;font-size: 15px;padding: 15px 26px;border-radius: 100px;cursor: pointer;border: 1px solid transparent;transition: transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background .2s ease,filter .2s ease,border-color .2s ease;white-space: nowrap}.btn:active{transform: translateY(1px) scale(.99)}.btn-solid{background: linear-gradient(180deg,var(--hot),var(--orange));color: #fff;box-shadow: var(--glow-orange)}.btn-solid:hover{filter: brightness(1.06);transform: translateY(-2px);box-shadow: 0 0 0 1px rgba(255,138,56,0.6),0 24px 60px -18px rgba(236,119,38,0.75)}.btn-glass{background: rgba(255,255,255,0.06);color: #fff;border-color: var(--line);backdrop-filter: blur(6px)}.btn-glass:hover{background: rgba(255,255,255,0.12);border-color: rgba(255,255,255,0.25);transform: translateY(-2px)}.btn-lg{padding: 17px 32px;font-size: 16px}.btn .arr{transition: transform .18s ease}.btn:hover .arr{transform: translateX(4px)}.nav{position: sticky;top: 0;z-index: 60;backdrop-filter: blur(10px);background: rgba(8,10,16,0.55);border-bottom: 1px solid transparent;transition: background .3s ease,border-color .3s ease}.nav.scrolled{background: rgba(8,10,16,0.85);border-bottom-color: var(--line-soft)}.nav-inner{display: flex;align-items: center;justify-content: space-between;height: 76px}.nav-links{display: flex;gap: 32px;font-size: 14.5px;font-weight: 500;color: var(--muted)}.nav-links a{position: relative;padding: 4px 0;transition: color .2s ease}.nav-links a:hover{color: #fff}.nav-links a::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:1.5px;background: var(--hot);transition: width .25s ease}.nav-links a:hover::after{width: 100%}.nav-cta{display: flex;gap: 12px;align-items: center}.brand{display: flex;align-items: center;gap: 11px}.brand .wm{font-family: var(--display);font-weight: 700;font-size: 17px;letter-spacing: -0.01em;line-height: 1;color: #fff;white-space: nowrap}.brand-logo{height: 38px;width: 38px;display: block;object-fit: contain}.footer .brand-logo{height: 32px}.footer .brand{display: flex}.brand .wm b{color: var(--hot);font-weight: 700}.card{background: linear-gradient(180deg,var(--panel),var(--space-2));border: 1px solid var(--line);border-radius: var(--r-lg);box-shadow: var(--shadow-sm)}.chip{display:inline-flex;align-items:center;gap:8px;font-family: var(--mono);font-size: 11.5px;letter-spacing:0.06em;color: var(--muted);border: 1px solid var(--line);border-radius: 100px;padding: 7px 14px;background: rgba(255,255,255,0.03);white-space: nowrap}.chip-hot{color: var(--hot);border-color: var(--line-hot);background: rgba(236,119,38,0.08)}.footer{background: var(--void);color: var(--muted);padding: 40px 0 20px;position: relative;border-top: 1px solid var(--line-soft)}.footer h4{color: #fff;font-size: 14px;margin-bottom: 18px;font-family: var(--body);font-weight: 600;letter-spacing: 0}.footer a{color: var(--muted);font-size: 14px;display: block;padding: 6px 0;transition: color .2s ease}.footer a:hover{color: #fff}.to-top{position: fixed;right: 26px;bottom: 26px;width: 50px;height: 50px;display: grid;place-items: center;border-radius: 50%;background: rgba(20,23,31,0.72);backdrop-filter: blur(18px) saturate(1.3);-webkit-backdrop-filter: blur(18px) saturate(1.3);border: 1px solid var(--line-hot);color: var(--hot);cursor: pointer;z-index: 55;opacity: 0;visibility: hidden;transform: translateY(14px) scale(0.9);transition: opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility .3s,box-shadow .25s ease,border-color .25s ease;box-shadow: 0 10px 30px -12px rgba(0,0,0,0.8)}.to-top.show{opacity: 1;visibility: visible;transform: translateY(0) scale(1)}.to-top:hover{border-color: rgba(255,138,56,0.7);box-shadow: var(--glow-orange)}.to-top:active{transform: translateY(0) scale(0.94)}.to-top svg{width: 18px;height: 18px;transition: transform .25s ease}.to-top:hover svg{transform: translateY(-3px)}@media (max-width: 600px){.to-top{right: 16px;bottom: 16px;width: 44px;height: 44px}}@media (prefers-reduced-motion: reduce){.to-top,.to-top.show{transform: none}.to-top:hover svg{transform: none}}.reveal{opacity: 0;transform: translateY(24px);transition: opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity: 1;transform: none}@media (prefers-reduced-motion: reduce){.reveal{opacity: 1;transform: none;transition: none}}.nav-drop{position: relative;display: flex;align-items: center}.nav-drop-trigger{display: inline-flex !important;align-items: center;gap: 5px;white-space: nowrap}.nav-drop-caret{font-size: 9px;opacity: 0.55;transition: transform .2s ease,opacity .2s ease;line-height: 1;display: inline-block}.nav-drop:hover .nav-drop-caret{transform: rotate(180deg);opacity: 1}.nav-drop-menu{position: absolute;top: calc(100% + 18px);left: 50%;transform: translateX(-50%) translateY(-6px);background: rgba(8,10,16,0.97);border: 1px solid var(--line);border-radius: var(--r);padding: 6px;min-width: 152px;opacity: 0;pointer-events: none;transition: opacity .18s ease,transform .18s ease;box-shadow: 0 28px 64px -20px rgba(0,0,0,0.9),0 0 0 1px rgba(255,255,255,0.03);z-index: 80}.nav-drop-menu::before{content: '';position: absolute;top: -5px;left: 50%;transform: translateX(-50%);width: 8px;height: 5px;clip-path: polygon(50% 0%,0% 100%,100% 100%);background: var(--line)}.nav-drop:hover .nav-drop-menu{opacity: 1;pointer-events: all;transform: translateX(-50%) translateY(0);backdrop-filter: blur(24px) saturate(1.4);-webkit-backdrop-filter: blur(24px) saturate(1.4)}.nav-drop::after{content: '';position: absolute;top: 100%;left: 0;right: 0;height: 20px}.nav-drop-menu a{display: block;padding: 9px 14px;border-radius: 8px;font-size: 13px;font-weight: 500;color: var(--muted);transition: color .15s ease,background .15s ease;white-space: nowrap;position: static !important}.nav-drop-menu a:hover{color: #fff;background: rgba(255,255,255,0.07)}.nav-drop-menu a::after{display: none !important}.nav-drop-menu .drop-div{height: 1px;background: var(--line-soft);margin: 5px 8px}.nav-drop-menu .drop-all{color: var(--hot) !important;font-family: var(--mono);font-size: 11.5px !important;letter-spacing: 0.04em}.nav-drop-menu .drop-all:hover{background: rgba(236,119,38,0.1) !important}.footer .nav-drop-menu{top: auto;bottom: calc(100% + 18px);transform: translateX(-50%) translateY(6px)}.footer .nav-drop:hover .nav-drop-menu{transform: translateX(-50%) translateY(0)}.footer .nav-drop-menu::before{top: auto;bottom: -5px;clip-path: polygon(50% 100%,0% 0%,100% 0%)}.footer .nav-drop::after{top: auto;bottom: 100%}.nav-burger{display: none;flex-direction: column;justify-content: center;gap: 5px;width: 42px;height: 42px;padding: 9px;background: rgba(255,255,255,0.06);border: 1px solid var(--line);border-radius: 10px;cursor: pointer;z-index: 70;flex-shrink: 0;transition: background .2s ease,border-color .2s ease}.nav-burger:hover{background: rgba(255,255,255,0.1);border-color: rgba(255,255,255,0.2)}.nav-burger span{display: block;width: 100%;height: 1.5px;background: #fff;border-radius: 2px;transition: transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease;transform-origin: center}.nav-open .nav-burger span:nth-child(1){transform: translateY(6.5px) rotate(45deg)}.nav-open .nav-burger span:nth-child(2){opacity: 0;transform: scaleX(0)}.nav-open .nav-burger span:nth-child(3){transform: translateY(-6.5px) rotate(-45deg)}.nav-open body{overflow: hidden}.nav-overlay{position: fixed;inset: 0;background: rgba(0,0,0,0.65);backdrop-filter: blur(3px);z-index: 64;opacity: 0;pointer-events: none;transition: opacity .3s ease}.nav-open .nav-overlay{opacity: 1;pointer-events: all}.nav-mobile{position: fixed;top: 0;right: 0;width: clamp(280px,85vw,340px);height: 100dvh;background: var(--space-2);border-left: 1px solid var(--line);z-index: 65;transform: translateX(100%);transition: transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s;display: flex;flex-direction: column;padding: 76px 28px 36px;overflow-y: auto;visibility: hidden}.nav-open .nav-mobile{transform: translateX(0);visibility: visible}.nav-mobile-close{position: absolute;top: 18px;right: 18px;width: 40px;height: 40px;display: grid;place-items: center;background: rgba(255,255,255,0.06);border: 1px solid var(--line);border-radius: 10px;cursor: pointer;font-size: 18px;color: var(--muted);line-height: 1;transition: color .15s,background .15s}.nav-mobile-close:hover{color: #fff;background: rgba(255,255,255,0.12)}.nav-mobile-links{display: flex;flex-direction: column;flex: 1}.nav-mobile-links > a{font-size: 19px;font-weight: 600;color: var(--muted);font-family: var(--display);padding: 14px 0;border-bottom: 1px solid var(--line-soft);display: block;transition: color .15s;letter-spacing: -0.01em}.nav-mobile-links > a:hover{color: #fff}.nav-mobile-group{border-bottom: 1px solid var(--line-soft)}.nav-mobile-group-trigger{width: 100%;display: flex;align-items: center;justify-content: space-between;font-size: 19px;font-weight: 600;color: var(--muted);font-family: var(--display);padding: 14px 0;background: none;border: none;cursor: pointer;transition: color .15s;letter-spacing: -0.01em}.nav-mobile-group-trigger:hover{color: #fff}.nav-mob-caret{font-size: 11px;color: var(--faint);transition: transform .25s ease;flex-shrink: 0}.nav-mobile-group.open .nav-mob-caret{transform: rotate(180deg)}.nav-mobile-sub{display: none;flex-direction: column;padding: 4px 0 12px 16px}.nav-mobile-group.open .nav-mobile-sub{display: flex}.nav-mobile-sub a{font-size: 14px;font-weight: 500;color: var(--faint);padding: 9px 0;border: none;display: block;transition: color .15s}.nav-mobile-sub a:hover{color: var(--hot)}.nav-mobile-sub .mob-all{color: var(--hot);font-family: var(--mono);font-size: 12px;letter-spacing: 0.04em;margin-top: 4px}.nav-mobile-cta{padding-top: 24px;border-top: 1px solid var(--line-soft);margin-top: 8px}.nav-mobile-cta .btn{width: 100%;justify-content: center}@media (max-width: 1160px){.nav-cta .btn-glass{display: none}}@media (max-width: 1040px){.nav-links{display: none}.nav-burger{display: flex}.nav-cta{display: none}}@media (max-width: 920px){.section{padding: 72px 0}.wrap{padding: 0 20px}.h2{font-size: clamp(26px,6.5vw,42px)}.lede{font-size: 16px}.section-head{margin-bottom: 44px}.cta-actions{flex-direction: column;align-items: center}.cta-actions .btn{width: 100%;max-width: 420px;justify-content: center}.footer-grid{grid-template-columns: 1fr 1fr}}@media (max-width: 480px){.wrap{padding: 0 16px}.section{padding: 52px 0}.h2{font-size: clamp(22px,7.5vw,32px)}.lede{font-size: 15px}.btn{font-size: 14px;padding: 13px 20px}.btn-lg{padding: 14px 22px;font-size: 15px}.section-head{margin-bottom: 32px}.footer-grid{grid-template-columns: 1fr}.footer-bottom{flex-direction: column;gap: 10px;align-items: flex-start}.cta-actions .btn{max-width: 100%}.chip{font-size: 10.5px;padding: 6px 12px}}img,.no-drag,svg{-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none;-webkit-touch-callout: none}

/* ===== Blog article layout (shared; corrected spacing 2026-07-30) =====
   Future articles: link this file and use <div class="post-body-section"> as the
   article-body wrapper (NOT class="section", which double-pads). Override only the
   .post-hero background inline per article. */
/* .post-body-section: intentionally no padding — spacing comes from .post-body-wrap */
.post-hero { padding: 72px 0 56px; border-bottom: 1px solid var(--line-soft);
    background: radial-gradient(120% 140% at 80% -30%, #16203a 0%, #0b0e16 46%, var(--space) 78%);
    position: relative; overflow: hidden; }
  .post-hero .stars { z-index: 0; }
  .post-hero .wrap { position: relative; z-index: 2; }
  .post-hero-img { display: none; }
  .post-meta-top { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
  .post-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 100px; border: 1px solid var(--line-hot);
    background: rgba(236,119,38,0.1); color: var(--hot); }
  .post-date { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.06em; }
  .post-read { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.06em; }
  .post-hero h1 { font-size: clamp(32px, 4.8vw, 56px); line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; margin-bottom: 22px; }
  .post-hero .lede { font-size: 17px; color: var(--muted); max-width: 58ch; line-height: 1.65; margin: 0; }

  .post-body-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 60px; align-items: start; padding: 44px 0 76px; }
  .post-article { min-width: 0; max-width: 760px; }
  .post-article h2 { font-size: 26px; letter-spacing: -0.02em; margin: 40px 0 14px; color: #fff; line-height: 1.2; }
  .post-article h3 { font-size: 20px; letter-spacing: -0.01em; margin: 32px 0 12px; color: #fff; }
  .post-article p { font-size: 16.5px; color: var(--muted); line-height: 1.75; margin: 0 0 20px; text-wrap: pretty; }
  .post-article p strong { color: var(--ink); font-weight: 600; }
  .post-article ul, .post-article ol { margin: 0 0 24px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .post-article ul li, .post-article ol li { font-size: 16px; color: var(--muted); padding-left: 26px; position: relative; line-height: 1.65; }
  .post-article ul li::before { content: '↳'; position: absolute; left: 0; color: var(--hot); font-family: var(--mono); font-size: 13px; top: 2px; }
  .post-article ol { counter-reset: ol-counter; }
  .post-article ol li { counter-increment: ol-counter; }
  .post-article ol li::before { content: counter(ol-counter, decimal-leading-zero); position: absolute; left: 0; color: var(--hot); font-family: var(--mono); font-size: 11px; top: 4px; font-weight: 600; }
  .post-article a { color: var(--hot); text-decoration: none; border-bottom: 1px solid var(--line-hot); transition: color .15s, border-color .15s; }
  .post-article a:hover { color: #fff; border-color: #fff; }
  .post-article hr { border: none; border-top: 1px solid var(--line-soft); margin: 44px 0; }

  .callout { background: linear-gradient(135deg, rgba(236,119,38,0.1), rgba(236,119,38,0.04));
    border: 1px solid var(--line-hot); border-radius: var(--r); padding: 24px 28px; margin: 32px 0; }
  .callout p { margin: 0; font-size: 15.5px; color: var(--ink); line-height: 1.65; }
  .callout strong { color: var(--hot); }

  .stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 32px 0; }
  .stat-box { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; text-align: center; }
  .stat-box .sn { font-family: var(--display); font-weight: 800; font-size: 38px; letter-spacing: -0.02em; color: var(--hot); display: block; line-height: 1; }
  .stat-box .sl { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

  .do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
  .do-box, .dont-box { border-radius: var(--r); padding: 20px 22px; }
  .do-box { background: rgba(54,208,127,0.07); border: 1px solid rgba(54,208,127,0.25); }
  .dont-box { background: rgba(242,85,122,0.07); border: 1px solid rgba(242,85,122,0.2); }
  .do-box h4 { color: #36d07f; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; }
  .dont-box h4 { color: #f2557a; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; }
  .do-box li::before { color: #36d07f !important; content: '✓' !important; }
  .dont-box li::before { color: #f2557a !important; content: '✕' !important; }

  .post-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }
  .sidebar-box { background: linear-gradient(180deg, var(--panel), var(--space-2)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
  .sidebar-box h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }
  .toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
  .toc-list li a { font-size: 13.5px; color: var(--muted); text-decoration: none; border: none; display: block; padding: 8px 0; border-bottom: 1px solid var(--line-soft); transition: color .15s; }
  .toc-list li:last-child a { border-bottom: none; }
  .toc-list li a:hover { color: var(--hot); }
  .sidebar-cta { background: linear-gradient(135deg, rgba(236,119,38,0.15), rgba(236,119,38,0.04)); border: 1px solid var(--line-hot); border-radius: var(--r-lg); padding: 26px; }
  .sidebar-cta p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 8px 0 18px; }
  .author-box { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line-soft); margin-top: 12px; }
  .author-av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--hot), #f2557a); flex: 0 0 auto; display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: #fff; font-size: 16px; }
  .author-info .an { font-size: 14px; font-weight: 600; color: #fff; }
  .author-info .ar { font-family: var(--mono); font-size: 11px; color: var(--hot); letter-spacing: 0.06em; margin-top: 2px; }

  @media (max-width: 900px) {
    .post-body-wrap { grid-template-columns: 1fr; gap: 40px; }
    .post-sidebar { position: static; }
    .stat-row { grid-template-columns: 1fr; gap: 12px; }
    .do-dont { grid-template-columns: 1fr; }
  }