:root{--ink:#142a37;--muted:#53616a;--paper:#f7f6f0;--ivory:#fffdf9;--line:#dbe2dc;--teal:#087c79;--teal-dark:#065e61;--coral:#d77357;--gold:#e8b571;--radius:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:ui-sans-serif,"Segoe UI",Arial,sans-serif;line-height:1.68;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--teal-dark)}a:hover{color:#ca6044}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #e9aa65;outline-offset:3px}button,input{font:inherit}
.wrap{width:min(1200px,calc(100% - 48px));margin:0 auto}.narrow{width:min(800px,calc(100% - 48px));margin:0 auto}.skip{position:absolute;left:14px;top:-90px;background:#fff;padding:10px;z-index:100}.skip:focus{top:10px}
.masthead{background:#112b39;border-bottom:1px solid #2c4149;color:#fff;position:relative;z-index:40}.masthead-inner{min-height:83px;display:flex;align-items:center;gap:18px;justify-content:space-between}.logo{text-decoration:none;color:white;font-weight:850;font-size:29px;letter-spacing:-1.6px;white-space:nowrap}.logo span{color:#8be5d2}.logo:hover{color:white}.strap{display:none}.nav{display:flex;align-items:center;gap:23px}.nav a{color:#e3eded;text-decoration:none;font-weight:650;font-size:14px;white-space:nowrap}.nav a:hover{color:#8be5d2}.mobnav{display:none;color:white}.mobnav summary{cursor:pointer;list-style:none;font-weight:700}.mobnav summary:after{content:" ☰"}.mobnav[open] .mobile-menu{display:grid;gap:13px;position:absolute;left:0;right:0;top:83px;background:#112b39;padding:20px 24px;box-shadow:0 13px 18px #0005}.mobile-menu a{color:#fff;text-decoration:none}
.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:800;color:var(--teal)}.lede{font-size:20px;color:#405762;line-height:1.65;max-width:770px}.hero-home{position:relative;padding:54px 0 70px;background:#e9f0e8;overflow:hidden}.hero-home:before{content:"";position:absolute;right:-150px;top:-170px;width:700px;height:700px;background:radial-gradient(circle,#b6d6c6 0,#e9f0e8 67%);opacity:.72}.hero-columns{position:relative;display:grid;grid-template-columns:1.15fr .8fr;gap:70px;align-items:center}.hero-home h1{font:700 clamp(45px,5.6vw,83px)/1.05 Georgia,serif;letter-spacing:-2.5px;max-width:790px;margin:24px 0}.hero-home h1 em{color:#087c79;font-style:normal}.hero-copy{font-size:20px;max-width:580px;color:#3b5863}.hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;transform:rotate(2deg)}.hero-visual img{width:100%;aspect-ratio:4/4;max-height:510px;object-fit:cover;border-radius:17px;box-shadow:0 15px 28px #12402c1c}.hero-visual img:nth-child(2){margin-top:42px}.search-form{display:flex;background:white;border:1px solid #d2e0da;border-radius:12px;box-shadow:0 9px 24px #173c3912;max-width:590px;padding:5px;margin-top:28px}.search-form input{flex:1;min-width:0;border:0;background:transparent;padding:13px 15px;color:#123;outline:0}.search-form button,.solid-btn{background:var(--teal);color:white;border:0;padding:13px 24px;border-radius:9px;cursor:pointer;font-weight:750}.search-form button:hover,.solid-btn:hover{background:#086b68}.search-results{display:none;background:#fff;margin-top:12px;max-width:590px;border-radius:10px;box-shadow:0 13px 22px #1232}.search-results.visible{display:block}.search-results a{display:block;padding:11px 16px;text-decoration:none;border-bottom:1px solid #e8edea}.search-results a:hover{background:#f4f8f6}
.section{padding:69px 0}.section.tint{background:#fffdf8}.heading-flex{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}.section h2,.page-intro h1{font:700 clamp(32px,4vw,54px)/1.17 Georgia,serif;letter-spacing:-1.2px;margin:10px 0}.heading-flex p{max-width:440px;color:var(--muted)}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.category-tile{padding:26px 25px 28px;background:white;text-decoration:none;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:9px;transition:transform .18s,border-color .18s}.category-tile:hover{transform:translateY(-3px);border-color:#80b9ab}.category-tile strong{font:700 25px Georgia,serif;color:var(--ink)}.category-tile .desc{color:var(--muted);font-size:15px}.category-tile .count{color:var(--teal);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.category-tile .arrow{margin-top:9px;font-size:21px;color:#bd6b4a}
.editorial-row{display:grid;grid-template-columns:1fr 1fr;gap:33px;align-items:stretch}.feature-story{background:#112d38;border-radius:18px;overflow:hidden;color:white;text-decoration:none}.feature-story img{width:100%;height:270px;object-fit:cover;display:block}.feature-story .feature-text{padding:26px 30px 30px}.feature-story h3{font:700 30px/1.2 Georgia,serif;margin:10px 0;color:#fff}.feature-story p{color:#c2d8da;font-size:15px}.feature-story .eyebrow{color:#9ae4d6}.story-list{border-top:2px solid #193440}.story-list a{display:flex;gap:10px;justify-content:space-between;text-decoration:none;color:var(--ink);padding:19px 5px;border-bottom:1px solid #d9e2dc;font:700 20px/1.3 Georgia,serif}.story-list small{font:600 12px ui-sans-serif,system-ui;color:var(--teal);white-space:nowrap;padding-top:6px}.story-list a:hover{color:var(--teal)}
.page-intro{background:#e9f0e9;padding:52px 0 44px}.page-intro p{font-size:18px;color:#44616b;max-width:790px}.breadcrumbs{font-size:13px;color:#6a8187;margin:0 0 14px}.breadcrumbs a{color:#52757a;text-decoration:none}.breadcrumbs span{margin:0 9px}.listing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.guide-card{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .18s}.guide-card:hover{box-shadow:0 12px 27px #163b2b14}.guide-card img{width:100%;aspect-ratio:1.62;display:block;object-fit:cover}.guide-card-body{padding:20px 22px}.guide-card .eyebrow{font-size:11px}.guide-card h3{font:700 23px/1.22 Georgia,serif;margin:9px 0 8px}.guide-card p{font-size:14px;color:var(--muted);margin:0}.guide-card .read{font-size:13px;font-weight:800;color:var(--teal);margin-top:13px;display:block}
.article-top{padding:44px 0 26px;background:#e9f0e9}.article-top h1{font:700 clamp(36px,4.7vw,68px)/1.1 Georgia,serif;letter-spacing:-1.5px;max-width:1050px;margin:20px 0}.article-top .subhead{font-size:18px;max-width:760px;color:#48646c}.article-top .meta{font-size:13px;color:#4d6b73;font-weight:650;padding-top:13px}.guide-hero{margin:0 0 10px}.guide-hero img{width:100%;max-height:650px;object-fit:cover;border-radius:0 0 13px 13px;display:block;aspect-ratio:16/8.1}.figure-caption{font-size:11px;line-height:1.4;margin-top:10px;color:#6d7b7d}.figure-caption a{color:#467f80}
.article-layout{display:grid;grid-template-columns:minmax(0,780px) minmax(200px,270px);gap:70px;align-items:start;padding-top:37px;padding-bottom:70px}.article-content{min-width:0;font-size:18px;color:#243d49}.article-content p{margin:0 0 20px}.article-content p:first-of-type{font-size:20px;color:#395563}.article-content h2{font:700 clamp(27px,3vw,37px)/1.23 Georgia,serif;letter-spacing:-.4px;margin:48px 0 18px;scroll-margin-top:110px;color:#183741}.article-content h3{font:700 22px Georgia,serif;margin:32px 0 12px}.article-content a{text-decoration-thickness:1px;text-underline-offset:3px}.article-content ul,.article-content ol{margin:5px 0 26px;padding-left:30px}.article-content li{margin:8px 0;padding-left:4px}.article-content strong{font-weight:750;color:#142e3b}.article-content blockquote{border-left:4px solid var(--teal);padding-left:20px;color:#4c6768;margin:25px 0}.article-content hr{border:0;border-top:1px solid var(--line);margin:33px 0}
.article-side{position:sticky;top:20px}.toc{border-top:3px solid var(--teal);padding:19px 0 18px}.toc h3{font:700 18px/1.2 Georgia,serif;margin:0 0 13px}.toc a{display:block;color:#54666a;text-decoration:none;font-size:13px;line-height:1.45;margin:9px 0}.toc a:hover{color:var(--teal)}
.source-note{background:#f1f6f3;padding:16px 18px;border-left:3px solid #8cbcaf;margin:24px 0;color:#446065;font-size:14px}.video-block{background:#142b37;color:white;padding:29px;border-radius:14px;margin:35px 0}.video-block h3{color:white!important;font:700 25px Georgia,serif!important;margin:7px 0 8px!important}.video-block p{color:#d3dedf;margin-bottom:16px}.video-block button{background:#8ce0ce;color:#123039;border:0;border-radius:7px;padding:11px 17px;font-weight:800;cursor:pointer}.video-block a{color:#a8e9dd}.video-frame{aspect-ratio:16/9;width:100%;border:0;margin-top:15px;border-radius:8px}.video-note{font-size:12px!important;color:#cedddd!important;margin-top:12px!important}
.related{padding:50px 0 75px;border-top:1px solid var(--line)}.related h2{font:700 36px Georgia,serif}.related ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:0;padding:0}.related li a{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;color:var(--ink);text-decoration:none;font-weight:650}.related li a:hover{border-color:#7db8a4;color:var(--teal)}
.footer{background:#112a38;color:#e5eff0;padding:54px 0 26px}.footer-grid{display:flex;gap:30px;justify-content:space-between;flex-wrap:wrap}.footer p{max-width:410px;color:#aac1c8;font-size:14px}.footer-links{display:flex;gap:15px;flex-wrap:wrap}.footer-links a{color:#d2e0e0;font-size:13px}.footline{border-top:1px solid #334752;margin-top:34px;padding-top:16px;font-size:12px;color:#9daeb6}
.article-index{display:grid;grid-template-columns:repeat(2,1fr);gap:0 36px}.article-index a{display:block;color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line);font-weight:650}.article-index a:hover{color:var(--teal)}.article-index small{font-size:12px;color:#87918d}
@media(max-width:1000px){.article-layout{grid-template-columns:1fr;gap:0}.article-side{position:static;order:-1}.toc{display:none}.listing{grid-template-columns:repeat(2,1fr)}.hero-columns{gap:24px}}
@media(max-width:720px){body{font-size:16px}.wrap,.narrow{width:min(100% - 32px,1200px)}.masthead-inner{min-height:70px}.logo{font-size:26px}.strap{display:none}.nav{display:none}.mobnav{display:block}.mobnav[open] .mobile-menu{top:70px}.hero-home{padding:46px 0 57px}.hero-columns{display:block}.hero-home h1{letter-spacing:-1.8px;font-size:46px}.hero-copy{font-size:17px}.hero-visual{display:none}.section{padding:44px 0}.section h2{font-size:34px}.heading-flex{display:block}.category-grid,.listing{grid-template-columns:1fr 1fr;gap:10px}.category-tile{padding:20px}.category-tile strong{font-size:20px}.editorial-row{grid-template-columns:1fr}.article-top{padding:36px 0 21px}.article-top h1{font-size:39px}.article-layout{padding-top:28px}.guide-hero img{aspect-ratio:1.38}.article-content{font-size:17px}.article-content h2{font-size:28px;margin-top:38px}.related ul,.article-index{grid-template-columns:1fr}.footer-grid{display:block}.footer-links{margin-top:25px}}
@media(max-width:460px){.category-grid,.listing{grid-template-columns:1fr}.hero-home h1{font-size:40px}.search-form button{padding:12px}.guide-card img{aspect-ratio:1.8}.article-content p:first-of-type{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.category-tile,.guide-card{transition:none}}

/* Preserve all labels in original instructional diagrams, particularly on mobile. */
.guide-hero.is-diagram img{aspect-ratio:auto!important;object-fit:contain!important;height:auto!important;max-height:none!important;background:#113746}
.guide-hero.is-diagram .wrap{max-width:1160px}
@media(max-width:720px){.guide-hero.is-diagram img{aspect-ratio:auto!important;object-fit:contain!important;max-height:none!important;height:auto!important}}


/* How2What original static GeneratePress Site Library visual adaptation */
:root{--ink:#171b29;--muted:#545a69;--paper:#fff;--ivory:#fff;--line:#e3e3e7;--teal:#166ddd;--teal-dark:#0b59c7;--coral:#166ddd;--gold:#6bb7ff;--radius:8px}
body{font-family:Inter,"Segoe UI",Arial,sans-serif;background:#fff;color:#202331;line-height:1.65}
.masthead{background:#11121e;border-bottom:0}
.masthead-inner{min-height:104px;max-width:1270px}
.logo{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:28px;font-weight:850;letter-spacing:-1px}
.logo span{color:#3c98ff}
.nav a{font-size:15px;font-weight:600;color:#f5f5f8}
.nav a:hover{color:#69afff}
.hero-home{background:linear-gradient(155deg,#10111f,#1b1e29 75%);color:#fff;min-height:555px;padding:74px 0 86px;overflow:hidden}
.hero-home:before{display:none}
.hero-home .wrap{position:relative}
.hero-home .wrap:before{content:"";position:absolute;pointer-events:none;inset:-100px 0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.035) calc(25% - 1px),rgba(255,255,255,.035) 25%);opacity:.85}
.hero-columns{grid-template-columns:minmax(0,790px) 1fr;gap:30px}
.hero-visual{display:none}
.hero-home h1{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:830;color:#fff;font-size:clamp(47px,5vw,68px);line-height:1.08;letter-spacing:-1.7px;max-width:760px;margin:32px 0}
.hero-home h1 em{font-style:normal;color:#76b8ff}
.hero-home .eyebrow{color:#dfeafb;letter-spacing:1.2px;font-size:12px}
.hero-copy{color:#e4e5eb;border-left:2px solid #1682f5;padding-left:22px;font-size:19px;line-height:1.7;max-width:690px}
.hero-home .search-form{border-radius:2px;box-shadow:none;border:1px solid #3a3c4a;background:#fff;max-width:680px;margin-top:38px;padding:7px}
.search-form input{font-size:16px}
.search-form button,.solid-btn{background:#086bd7;color:#fff;border-radius:2px;padding:12px 23px;text-transform:uppercase;font-size:13px;letter-spacing:.8px;font-weight:800}
.search-form button:hover,.solid-btn:hover{background:#004c9d}
.hero-home .search-results{max-width:680px}
.hero-home p:last-child{color:#bcbfcd!important}
.eyebrow{color:#0b65d1}
.section{padding:80px 0}
.section.tint{background:#fff}
.heading-flex{margin-bottom:34px}
.section h2,.page-intro h1{font-family:Inter,"Segoe UI",Arial,sans-serif;letter-spacing:-1px;font-weight:800}
.category-grid{gap:25px}
.category-tile{background:#fff;border:1px solid #dedee4;border-radius:3px;padding:29px 27px 26px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.category-tile:hover{transform:none;box-shadow:0 10px 34px #1113220b;border-color:#a8b6cc}
.category-tile strong{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:800;font-size:23px;letter-spacing:-.6px}
.category-tile .count{color:#185cda}
.category-tile .arrow{color:#166ddd}
.editorial-row{gap:28px}
.feature-story{background:#141724;border-radius:3px}
.feature-story h3{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.6px}
.feature-story .eyebrow{color:#8dc0ff}
.story-list a{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:18px;font-weight:750}
.story-list small{color:#1268cf}
.guide-card{border-radius:3px;box-shadow:none}
.guide-card h3{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:22px;font-weight:770;letter-spacing:-.6px}
.guide-card .read{color:#166ddd}
.page-intro{background:#161824;color:white}
.page-intro p,.page-intro .breadcrumbs,.page-intro .breadcrumbs a{color:#d5d8e1}
.page-intro h1{color:white}
.page-intro .eyebrow{color:#8bb7f2}
.article-top{background:#171925;color:white}
.article-top h1{font-family:Inter,"Segoe UI",Arial,sans-serif;max-width:990px;font-weight:800;font-size:clamp(36px,4.6vw,62px);letter-spacing:-1.5px}
.article-top .subhead{color:#d6d8e1;font-size:18px}
.article-top .breadcrumbs,.article-top .breadcrumbs a{color:#b5b8c9}
.article-top .eyebrow{color:#88bafd}
.article-top .meta{color:#babfce}
.guide-hero{margin:0 0 15px;background:#fff}
.guide-hero img{border-radius:0 0 4px 4px}
.article-layout{grid-template-columns:minmax(0,780px) minmax(200px,285px)}
.article-content{color:#24293a;font-size:18px}
.article-content h2{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:clamp(25px,2.6vw,34px);font-weight:800;letter-spacing:-.5px;color:#14192a}
.article-content h3{font-family:Inter,"Segoe UI",Arial,sans-serif}
.article-content strong{color:#152139}
.toc{border-top:3px solid #116bd7}
.toc h3{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:800}
.article-content a,.toc a:hover{color:#065fcb}
.source-note{background:#f3f6fb;border-left:3px solid #0b69d6}
.video-block{background:#151828;border-radius:5px}
.related h2{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:800}
.related li a{border-radius:3px}
.footer{background:#121421}
.footer p{color:#c6cbd7}
.footer-links a{color:#e5e8ee}
@media(max-width:1000px){.hero-columns{display:block}.hero-home .wrap:before{display:none}}
@media(max-width:720px){
.masthead-inner{min-height:70px}
.hero-home{min-height:auto;padding:58px 0 69px}
.hero-home h1{font-size:clamp(42px,9vw,53px);line-height:1.08;letter-spacing:-1.2px}
.hero-copy{font-size:17px;line-height:1.55;padding-left:16px}
.hero-home .search-form{padding:4px}
.section{padding:50px 0}
.article-top h1{font-size:36px}
.guide-hero.is-diagram img{aspect-ratio:auto!important;object-fit:contain!important}
.category-grid{gap:12px}
}