/* UX and mobile navigation refinements */
html{font-size:16px}[hidden]{display:none!important}body{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.site-header{z-index:1000}.header-main{gap:24px}.header-actions{flex:0 0 auto;gap:8px}.icon-btn,.menu-toggle{width:44px;height:44px;border-radius:11px;line-height:1;touch-action:manipulation}.icon-btn{font-size:21px}.menu-toggle{font-size:0}.menu-toggle:before{content:"☰";font-size:22px;line-height:1}.menu-toggle[aria-expanded="true"]:before{content:"×";font-size:28px;font-weight:400}.nav-link,.nav-trigger{min-height:44px}.btn{min-height:46px;padding-inline:18px}.tree-row{min-height:46px}.tree-toggle{flex:0 0 44px;width:44px;height:44px}.tool-icon,.course-icon{width:48px;height:48px}.search-close{display:grid;place-items:center;width:44px;height:44px;margin:-10px -7px 4px 8px;border-radius:10px}.search-box form .btn{flex:0 0 auto}body.menu-open,body.search-open{overflow:hidden}.brand,.header-actions,.icon-btn,.menu-toggle{align-self:center}
@media(max-width:1000px){.top-strip{display:none}.site-header{background:#fff;backdrop-filter:none}.header-main{height:72px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.brand{min-width:0;overflow:hidden}.brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.main-nav{position:fixed;z-index:1001;inset:72px 0 0;display:block;width:100%;height:calc(100dvh - 72px);padding:16px max(18px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain;border:0;background:#fff;box-shadow:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(100%);transition:transform .24s ease,opacity .18s ease,visibility .24s}.main-nav.open{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}.nav-item{width:100%;border-bottom:1px solid var(--line)}.nav-link,.nav-trigger{width:100%;min-height:54px;padding:0 8px;justify-content:space-between;border-radius:0;font-size:16px}.nav-link:hover,.nav-trigger:hover,.nav-item.open>.nav-trigger,.nav-link.active{background:transparent;color:var(--blue)}.submenu,.submenu-group>.submenu{position:static;width:100%;margin:0 0 10px;padding:6px 8px 8px 14px;border:0;border-left:2px solid #dbe9fa;border-radius:0;background:var(--soft);box-shadow:none}.submenu a,.submenu-trigger{min-height:48px;padding:10px 12px;font-size:15px}.submenu-group>.submenu{margin-left:8px;width:calc(100% - 8px);background:#fff}.only-mobile{display:block}.search-panel{z-index:1100}.search-box{margin-top:max(0px,env(safe-area-inset-top))}}
@media(max-width:720px){.container{width:min(calc(100% - 36px),var(--container))}.header-main{height:68px}.main-nav{top:68px;height:calc(100dvh - 68px)}.brand{font-size:18px;letter-spacing:-.45px}.brand-mark{width:36px;height:36px;border-radius:10px;font-size:15px}.header-actions{gap:8px}.icon-btn,.menu-toggle{width:44px;height:44px}.ticker{display:none}.page-hero{padding:32px 0}.page-hero h1{margin-bottom:12px;font-size:32px;line-height:1.16}.page-hero p{font-size:16px;line-height:1.7}.page-main{padding:28px 0 56px}.breadcrumb{margin-bottom:16px;font-size:13px}.section{margin-top:36px}.section-head{margin-bottom:18px}.section-title{font-size:22px}.post-grid{gap:18px}.post-card{border-radius:14px}.post-body{padding:18px}.post-body h3{font-size:20px;line-height:1.38}.post-body p{font-size:15px;line-height:1.7}.post-thumb{font-size:34px}.list-card{gap:16px;padding-bottom:22px}.list-card h2{font-size:21px}.list-card p{font-size:15px;line-height:1.7}.tag{padding:6px 9px;font-size:11px}.meta{font-size:13px}.widget{padding:18px}.widget-title{font-size:18px}.tree-row a{padding:12px 0;font-size:15px}.tools-grid,.library-grid{gap:14px}.tool-card,.course-card{padding:20px}.tool-card h2,.course-card h2{font-size:18px}.tool-card p,.course-card p{font-size:15px}.form-grid{gap:18px}.field label{font-size:14px}.field input,.field textarea,.field select,.search-input{min-height:48px;font-size:16px}.footer-grid{gap:28px;padding:42px 0 30px}.footer-col a{min-height:36px;padding:8px 0;font-size:14px}.search-panel{padding:76px 14px 20px}.search-box{padding:18px}.search-box form{display:grid}.search-box form .btn{width:100%}}
@media(max-width:390px){.container{width:min(calc(100% - 28px),var(--container))}.header-main{gap:8px}.brand{font-size:17px}.brand-mark{width:34px;height:34px}.header-actions{gap:6px}.icon-btn,.menu-toggle{width:42px;height:42px}.page-hero h1{font-size:29px}.hero-copy{padding:22px}.hero-copy h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){.main-nav{transition:none}}

/* Mega menu */
@media(min-width:1001px){.mega-menu{width:min(720px,80vw);grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px}.nav-item.open>.mega-menu{display:grid}.mega-menu>a,.mega-menu>.submenu-group{min-height:74px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}.mega-menu>.submenu-group>.submenu-trigger{font-weight:800}.mega-menu>.submenu-group>.submenu{top:calc(100% + 6px);left:0}.mega-menu>a{display:flex;align-items:center;font-weight:800}}

/* Dark mode */
:root[data-theme="dark"]{--ink:#eaf2f8;--muted:#a5b5c3;--line:#294155;--soft:#10283b;--white:#0b2031;--navy:#061522;--navy-2:#0a2437;color-scheme:dark}:root[data-theme="dark"] body,:root[data-theme="dark"] .site-header,:root[data-theme="dark"] .ticker,:root[data-theme="dark"] .main-nav,:root[data-theme="dark"] .search-box{background:#091d2d;color:var(--ink)}:root[data-theme="dark"] .post-card,:root[data-theme="dark"] .widget,:root[data-theme="dark"] .tool-card,:root[data-theme="dark"] .course-card,:root[data-theme="dark"] .info-card,:root[data-theme="dark"] .mini-feature,:root[data-theme="dark"] .action-btn,:root[data-theme="dark"] .author-card,:root[data-theme="dark"] .faq-section details,:root[data-theme="dark"] .related-card{background:#0d2537;color:var(--ink)}:root[data-theme="dark"] .page-hero{background:linear-gradient(145deg,#0c293e,#091d2d)}:root[data-theme="dark"] .icon-btn,:root[data-theme="dark"] .menu-toggle,:root[data-theme="dark"] .btn.secondary,:root[data-theme="dark"] .tools button{background:#0d2537;color:var(--ink)}:root[data-theme="dark"] .search-input,:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .tool-demo textarea{background:#071a2b;color:var(--ink)}:root[data-theme="dark"] .download-box,:root[data-theme="dark"] .reaction-box,:root[data-theme="dark"] .tool-demo{background:#102d43}:root[data-theme="dark"] .mega-menu>a,:root[data-theme="dark"] .mega-menu>.submenu-group,:root[data-theme="dark"] .submenu{background:#10283b}:root[data-theme="dark"] .submenu-group>.submenu{background:#0d2537}

/* Article experience */
.reading-progress{position:fixed;z-index:1200;top:0;left:0;width:100%;height:3px;pointer-events:none}.reading-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .08s linear}.article-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:20px 0}.action-btn{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 13px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:13px;font-weight:800;cursor:pointer}.action-btn:hover{border-color:var(--blue);color:var(--blue)}.action-status{min-width:130px;color:#16814c;font-size:13px}.theme-toggle{font-size:0}.theme-toggle:before{content:"☾";font-size:20px}.theme-toggle[aria-pressed="true"]:before{content:"☀"}.toc-box a{position:relative;padding-left:12px;border-left:2px solid transparent}.toc-box a.active{border-left-color:var(--blue);color:var(--blue);font-weight:800}.code-block{position:relative;padding-top:48px!important}.code-block:before{content:attr(data-language);position:absolute;top:13px;left:18px;color:#7ea4bd;font:700 11px/1 Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em}.code-copy{position:absolute;top:8px;right:9px;min-height:30px;padding:0 10px;border:1px solid #29445a;border-radius:7px;background:#142d40;color:#d9ebf8;font:700 11px Inter,system-ui,sans-serif;cursor:pointer}.token.comment{color:#7fa38b}.token.command{color:#75c7ff}.token.string{color:#f3b76a}.download-box{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin:42px 0;padding:22px;border:1px solid #cfe2fa;border-radius:16px;background:#f2f8ff}.download-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--blue);color:#fff;font-size:26px}.download-box h2{margin:6px 0 4px;font-size:19px}.download-box p{margin:0;color:var(--muted);font-size:14px}.faq-section{margin-top:44px}.faq-section details{border:1px solid var(--line);border-radius:12px;background:#fff}.faq-section details+details{margin-top:10px}.faq-section summary{position:relative;padding:17px 48px 17px 18px;font-weight:800;cursor:pointer;list-style:none}.faq-section summary::-webkit-details-marker{display:none}.faq-section summary:after{content:"+";position:absolute;right:18px;top:13px;font-size:24px;font-weight:400}.faq-section details[open] summary:after{content:"−"}.faq-section details p{margin:0;padding:0 18px 18px;color:var(--muted)}.author-card{display:grid;grid-template-columns:88px 1fr;gap:18px;margin:44px 0;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}.author-card img{border-radius:50%}.author-card h2{margin:3px 0 6px;font-size:20px}.author-card p{margin:0;color:var(--muted);font-size:14px}.eyebrow{color:var(--blue);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.author-links{display:flex;gap:16px;margin-top:10px}.author-links a{color:var(--blue);font-size:13px;font-weight:800}.reaction-box{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:22px;border-radius:16px;background:var(--soft)}.reaction-box h2{margin:0 0 4px;font-size:18px}.reaction-box p{margin:0;color:var(--muted);font-size:13px}.reaction-actions{display:flex;gap:8px}.reaction-actions button{min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:800;cursor:pointer}.reaction-actions button.selected{border-color:var(--blue);background:var(--blue);color:#fff}.reaction-status{grid-column:1/-1;color:#16814c;font-size:13px}.related-section{margin-top:44px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.related-card{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#fff}.related-card strong,.related-card small{display:block;padding-inline:14px}.related-card strong{padding-top:13px;font-size:14px;line-height:1.45}.related-card small{padding-top:6px;padding-bottom:14px;color:var(--muted)}.related-thumb{display:grid;place-items:center;aspect-ratio:16/8;background:#dcecff;color:#0b5bc7;font-size:24px;font-weight:900}.related-thumb.purple{background:#e8defe;color:#6740c3}.related-thumb.green{background:#d7f8ed;color:#087657}.offline-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--soft)}.offline-card{max-width:560px;padding:36px;border:1px solid var(--line);border-radius:20px;background:#fff;text-align:center;box-shadow:var(--shadow)}.offline-card .brand-mark{margin:auto}.offline-card h1{font-size:34px}.offline-card .btn{margin:6px}
@media(max-width:1000px){.nav-item.open>.mega-menu{display:block}.mega-menu>a,.mega-menu>.submenu-group{min-height:auto;padding:0;border:0;background:transparent}.toc-box{position:relative;top:auto}.toc-box:before{content:"Table of Contents";display:block;margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}}
@media(max-width:720px){.article-actions{position:sticky;z-index:20;top:76px;padding:8px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,#fff 92%,transparent);backdrop-filter:blur(10px)}:root[data-theme="dark"] .article-actions{background:color-mix(in srgb,#0d2537 92%,transparent)}.action-btn{flex:1;justify-content:center;min-height:44px}.action-status{width:100%;min-width:0}.download-box{grid-template-columns:auto 1fr}.download-box .btn{grid-column:1/-1;width:100%}.author-card{grid-template-columns:64px 1fr;padding:18px}.author-card img{width:64px;height:64px}.reaction-box{grid-template-columns:1fr}.reaction-actions button{flex:1;min-height:46px}.related-grid{grid-template-columns:1fr}.related-card{display:grid;grid-template-columns:110px 1fr}.related-thumb{grid-row:1/3;aspect-ratio:auto}.related-card small{padding-bottom:12px}.faq-section summary{padding-block:16px}}
.mobile-toc{display:none;margin:14px 0 22px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.mobile-toc summary{padding:14px 16px;font-weight:800;cursor:pointer}.mobile-toc nav{display:grid;padding:0 16px 14px}.mobile-toc a{padding:8px 0;color:var(--muted);font-size:14px}.mobile-toc a.active{color:var(--blue);font-weight:800}@media(max-width:1000px){.mobile-toc{display:block}}

/* Full-width technology mega menu */
.header-main{position:relative}.mega-parent{position:static}.mega-menu .mega-column{min-width:0;}.mega-title span,.mega-title strong{display:block}.mega-title span{color:var(--blue);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.mega-title strong{margin-top:3px;font-size:14px;line-height:1.3}.mega-links{display:grid;gap:1px;padding-top:8px}.mega-links a{min-height:32px;padding:6px 10px;color:var(--muted);font-size:13px}.mega-links a:hover{color:var(--blue)}
@media(min-width:1001px){.main-nav{position:static}.main-nav .mega-menu{position:absolute;top:calc(100% + 1px);right:0;left:0;width:100%;max-width:none;padding:16px 18px 18px;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;border-radius:0 0 16px 16px;transform:none}.main-nav .nav-item.open>.mega-menu{display:grid}.mega-menu .mega-column{min-height:15px;padding:0;border:0;background:transparent;}.mega-menu .mega-title{display:flex;min-height:72px;padding:12px;flex-direction:column;align-items:flex-start;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--soft)}.mega-menu .mega-title:hover{border-color:#bfd8f7;background:#edf5ff}.mega-menu .mega-links a{border-radius:7px}}
@media(max-width:1000px){.main-nav .mega-menu{display:none;width:100%;margin:0 0 10px;padding:0 0 8px 14px;border:0;border-left:2px solid #dbe9fa;border-radius:0;background:transparent}.main-nav .nav-item.open>.mega-menu{display:block}.mega-menu .mega-column{padding:0;border:0;border-bottom:1px solid var(--line);background:transparent}.mega-menu .mega-title{display:block;min-height:52px;padding:10px 12px;border:0;background:transparent}.mega-title span{font-size:10px}.mega-title strong{font-size:16px}.mega-links{padding:0 0 8px 14px}.mega-links a{min-height:44px;padding:10px 12px;font-size:15px}}
:root[data-theme="dark"] .mega-menu .mega-title{background:#10283b}:root[data-theme="dark"] .mega-menu .mega-title:hover{background:#15344d}:root[data-theme="dark"] .mega-menu .mega-column{background:transparent}

/* Reader comments and authentication */
.comments-section{margin-top:52px;padding:20px;border:1px solid var(--line);border-radius:15px;}.comments-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.comments-heading h2{margin:4px 0 0;font-size:26px}.comment-count{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:15px;background:var(--soft);color:var(--blue);font-size:13px}.comment-guest,.comment-member{margin:18px 0;padding:14px 16px;border-radius:11px;background:var(--soft);color:var(--muted);font-size:14px}.comment-guest p{margin:0}.comment-member{display:flex;align-items:center;justify-content:space-between;gap:15px}.text-button{border:0;background:transparent;color:var(--blue);font-weight:800;cursor:pointer}.comment-form{margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.comment-form label{display:block;margin-bottom:8px;font-size:13px;font-weight:800}.comment-form textarea{width:100%;min-height:130px;padding:13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:15px/1.6 Inter,system-ui,sans-serif;resize:vertical;outline:none}.comment-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,118,255,.1)}.comment-form-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:10px;color:var(--muted)}.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}.comments-status,.auth-status{min-height:22px;margin:10px 0;color:#16814c;font-size:13px}.comments-status.error,.auth-status.error{color:#c0392b}.comments-empty{padding:28px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center}.comments-list{display:grid;gap:0}.reader-comment{display:grid;grid-template-columns:44px 1fr;gap:13px;padding:20px 0;border-bottom:1px solid var(--line)}.comment-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:13px;font-weight:900}.comment-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.comment-head strong{font-size:14px}.comment-head time{color:var(--muted);font-size:12px}.reader-comment p{margin:7px 0 0;color:#394b5d;font-size:15px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.load-comments{margin-top:18px}.auth-modal{position:fixed;z-index:2200;inset:0;display:grid;place-items:center;padding:18px;background:rgba(3,16,27,.72);backdrop-filter:blur(8px)}.auth-modal[hidden]{display:none}.auth-card{position:relative;width:min(100%,440px);max-height:min(720px,calc(100dvh - 36px));overflow:auto;padding:26px;border-radius:18px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.28)}.auth-close{position:absolute;top:13px;right:13px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:var(--soft);font-size:24px;cursor:pointer}.auth-card h2{margin:0 45px 5px 0;font-size:25px}.auth-intro{margin:0 0 18px;color:var(--muted);font-size:14px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:18px;padding:4px;border-radius:10px;background:var(--soft)}.auth-tabs button{min-height:42px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer}.auth-tabs button.active{background:#fff;color:var(--blue);box-shadow:0 2px 9px rgba(7,26,43,.08)}.auth-form{display:grid;gap:13px}.auth-form label{display:grid;gap:6px;font-size:13px;font-weight:800}.auth-form input{width:100%;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);outline:none}.auth-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,118,255,.1)}.auth-form small{color:var(--muted)}.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12px}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:var(--line)}.google-button{display:flex;min-height:44px;justify-content:center}.google-note{margin:7px 0;color:var(--muted);font-size:12px;text-align:center}.auth-legal{margin:14px 0 0;color:var(--muted);font-size:11px;text-align:center}.auth-legal a{color:var(--blue)}body.modal-open{overflow:hidden}:root[data-theme="dark"] .comment-form textarea,:root[data-theme="dark"] .auth-card,:root[data-theme="dark"] .auth-form input,:root[data-theme="dark"] .auth-tabs button.active{background:#0d2537;color:var(--ink)}:root[data-theme="dark"] .reader-comment p{color:#c4d3df}:root[data-theme="dark"] .auth-tabs,:root[data-theme="dark"] .comment-guest,:root[data-theme="dark"] .comment-member,:root[data-theme="dark"] .comment-form{background:#10283b}
@media(max-width:720px){.comments-section{margin-top:42px}.comments-heading{align-items:start;flex-direction:column}.comments-heading .btn{width:100%}.comments-heading h2{font-size:23px}.comment-form{padding:14px}.comment-form textarea{font-size:16px}.reader-comment{grid-template-columns:38px 1fr}.comment-avatar{width:38px;height:38px}.comment-head{align-items:start;flex-direction:column;gap:1px}.comment-form-footer{align-items:stretch;flex-direction:column}.comment-form-footer .btn{width:100%}.auth-card{padding:22px 18px}.auth-modal{align-items:end;padding:0}.auth-card{width:100%;max-height:92dvh;border-radius:20px 20px 0 0}}