:root{--navy:#0f172a;--blue:#1463ff;--blue2:#0b4ed5;--orange:#f97316;--bg:#f4f7fb;--card:#fff;--text:#111827;--muted:#64748b;--border:#dbe3ef;--soft:#eef4ff;--radius:22px;--shadow:0 18px 48px rgba(15,23,42,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.65}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}.site-header{background:linear-gradient(135deg,#071426,#102a50);color:#fff;box-shadow:0 8px 28px rgba(15,23,42,.22)}.site-header-inner{width:min(1160px,calc(100% - 32px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}.brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:950;letter-spacing:-.02em}.brand:hover{text-decoration:none}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--blue),#7aa7ff);display:grid;place-items:center;font-weight:950;box-shadow:0 10px 24px rgba(20,99,255,.35)}.brand-sub{display:block;color:#b8c7da;font-size:12px;font-weight:700;letter-spacing:0}.lang{display:flex;gap:7px;padding:4px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.05)}.lang a{min-width:45px;text-align:center;padding:7px 10px;border-radius:9px;color:#cbd5e1;font-weight:900;font-size:12px}.lang a.active{background:var(--blue);color:#fff}.lang a:hover{text-decoration:none;color:#fff}.page{width:min(1160px,calc(100% - 32px));margin:auto;padding:26px 0 64px}.breadcrumbs{font-size:13px;color:var(--muted);margin:0 0 18px}.breadcrumbs a{font-weight:750}.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:24px;align-items:stretch}.hero-main,.hero-side,.panel,.directory-group{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-main{padding:34px}.eyebrow{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#eaf1ff;color:#0f3fb3;font-size:12px;font-weight:950;letter-spacing:.05em;text-transform:uppercase}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.03;letter-spacing:-.05em;margin:15px 0 16px}.lead{font-size:18px;color:#475569;max-width:760px}.hero-side{padding:26px;background:linear-gradient(155deg,#0f172a,#153667);color:#fff}.hero-side h2{font-size:20px;margin:0 0 10px}.hero-side p{color:#d2dceb}.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;padding:13px 18px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-weight:950;box-shadow:0 12px 26px rgba(20,99,255,.25)}.cta:hover{text-decoration:none;transform:translateY(-1px)}.cta.alt{background:#fff;color:#0f172a;box-shadow:none}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}.panel{padding:26px}.panel h2{margin:0 0 12px;font-size:25px;letter-spacing:-.025em}.panel h3{margin:22px 0 8px;font-size:18px}.panel p{color:#475569}.panel ul,.panel ol{padding-left:22px}.panel li{margin:7px 0}.topic-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;list-style:none}.topic-list li{margin:0}.topic-list a{display:block;height:100%;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#f8fbff;color:#19365e;font-weight:800}.topic-list a:hover{background:#edf4ff;text-decoration:none;border-color:#aac5f5}.related{margin-top:22px}.notice{padding:14px 16px;border-left:4px solid var(--orange);background:#fff7ed;border-radius:12px;color:#7c2d12}.directory-hero{background:linear-gradient(135deg,#0f172a,#153667);color:#fff;border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}.directory-hero p{color:#d4deec;max-width:800px}.directory-grid{display:grid;gap:20px;margin-top:22px}.directory-group{padding:24px}.directory-group h2{margin:0 0 14px}.directory-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.directory-card{display:block;padding:16px;border:1px solid var(--border);border-radius:16px;background:#f8fbff;color:#183a69}.directory-card strong{display:block;font-size:16px}.directory-card span{display:block;color:#64748b;font-size:13px;margin-top:5px}.directory-card:hover{text-decoration:none;background:#edf4ff;border-color:#9fbef1}.site-footer{border-top:1px solid var(--border);background:#fff;color:#64748b}.site-footer-inner{width:min(1160px,calc(100% - 32px));margin:auto;padding:24px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.site-footer nav{display:flex;gap:14px;flex-wrap:wrap}.app-link-strip{margin-top:22px;padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px}.app-link-strip p{margin:0;color:#475569}.app-link-strip .cta{margin:0;white-space:nowrap}@media(max-width:850px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.directory-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.site-header-inner{align-items:flex-start}.brand-sub{max-width:180px}.page{width:min(100% - 22px,1160px)}.hero-main,.hero-side,.panel,.directory-group,.directory-hero{padding:21px}.topic-list,.directory-cards{grid-template-columns:1fr}.app-link-strip{align-items:stretch;flex-direction:column}.app-link-strip .cta{width:100%}}

/* 2026 SEO and content experience upgrade */
.brand-image{width:44px;height:44px;object-fit:contain;border-radius:12px;background:#fff}.breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hero-actions,.directory-hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.text-link{font-weight:850}.text-link.light{color:#fff}.mini-label,.card-category{display:inline-block;font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:#7ba7ff}.hero-side .mini-label{color:#a9c6ff}.hero-side h2{margin-top:8px;line-height:1.25}.content-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:22px}.span-7{grid-column:span 7}.span-5{grid-column:span 5}.principle{margin-top:22px;padding:17px 18px;border-radius:16px;background:linear-gradient(135deg,#eef5ff,#f8fbff);border:1px solid #cfe0fb}.principle p{margin:7px 0 0}.check-list{list-style:none;padding:0!important}.check-list li{position:relative;padding-left:28px;margin:11px 0!important}.check-list li:before{content:'✓';position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e7f7ed;color:#08783d;font-size:12px;font-weight:950}.method{margin-top:22px}.section-heading{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.section-heading>span{flex:0 0 46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#1463ff,#0b4ed5);color:#fff;font-weight:950;box-shadow:0 10px 20px rgba(20,99,255,.22)}.section-heading h2{margin:0}.section-heading p{margin:5px 0 0}.section-heading.compact{align-items:center}.section-heading.compact>span{width:38px;height:38px;flex-basis:38px;border-radius:12px}.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;padding:0!important;counter-reset:none}.steps li{margin:0!important;padding:16px;border:1px solid var(--border);border-radius:16px;background:#f8fbff;min-height:150px}.steps li>span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#0f172a;color:#fff;font-weight:900;font-size:12px}.steps p{margin:12px 0 0;color:#334155}.formula{padding:18px;border-radius:15px;background:#0f172a;color:#e9f2ff;font-weight:750;line-height:1.6;border-left:5px solid #4f8cff}.example-text{font-size:18px;color:#334155}.io-list{display:grid;gap:14px}.io-list>div{padding:16px;border:1px solid var(--border);border-radius:15px;background:#f8fbff}.io-list dt{font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:950;color:#0b4ed5}.io-list dd{margin:6px 0 0;color:#475569}.mistake-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mistake-grid>div{display:flex;gap:12px;padding:14px;border:1px solid #fed7d7;background:#fff8f8;border-radius:14px}.mistake-grid strong{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:50%;background:#fee2e2;color:#b91c1c}.mistake-grid p{margin:0;color:#5f3131}.faq details{border-top:1px solid var(--border);padding:16px 0}.faq details:last-child{border-bottom:1px solid var(--border)}.faq summary{cursor:pointer;font-weight:900;color:#19365e}.faq details p{margin:12px 0 0;max-width:900px}.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.related-grid a{display:block;padding:16px;border:1px solid var(--border);border-radius:15px;background:#f8fbff;color:#183a69}.related-grid a:hover{text-decoration:none;background:#eef5ff;border-color:#9cbcf2}.related-grid strong,.related-grid span{display:block}.related-grid span{font-size:13px;color:#64748b;margin-top:6px}.app-link-strip>div{display:flex;flex-direction:column}.tool-page .app-link-strip{box-shadow:var(--shadow)}
.directory-hero{display:flex;justify-content:space-between;align-items:center;gap:30px}.directory-hero h1,.about-hero h1{font-size:clamp(36px,5vw,62px);line-height:1.02;letter-spacing:-.05em;margin:14px 0}.directory-stat{flex:0 0 165px;aspect-ratio:1;border-radius:32px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:grid;place-content:center;text-align:center}.directory-stat strong{font-size:62px;line-height:1}.directory-stat span{color:#cbd9ea;font-weight:800}.filter-box{margin-top:22px;padding:18px 20px;border:1px solid var(--border);border-radius:17px;background:#fff;display:flex;align-items:center;gap:16px;box-shadow:0 8px 24px rgba(15,23,42,.06)}.filter-box label{font-weight:900;white-space:nowrap}.filter-box input{width:100%;min-width:0;border:1px solid #cbd5e1;border-radius:12px;padding:12px 14px;font:inherit}.directory-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.directory-card{display:flex;flex-direction:column;padding:20px}.directory-card h3{margin:5px 0 8px;color:#142e53}.directory-card p{margin:0 0 16px;flex:1}.card-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto}.small-primary{padding:9px 12px;border-radius:10px;background:#1463ff;color:#fff!important}.small-primary:hover{background:#0b4ed5!important}.empty-state{padding:30px;text-align:center;border:1px dashed var(--border);border-radius:16px}.about-hero{padding:44px;background:linear-gradient(135deg,#0f172a,#153667);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}.about-hero p{max-width:860px;color:#d5dfed;font-size:18px}.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}.about-grid .panel{margin:0}.site-footer strong{color:#334155}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.span-7,.span-5{grid-column:1/-1}.content-grid{grid-template-columns:1fr}.directory-hero{align-items:flex-start}.directory-stat{flex-basis:130px}.about-grid{grid-template-columns:1fr}}
@media(max-width:650px){.directory-hero{flex-direction:column}.directory-stat{width:100%;aspect-ratio:auto;padding:22px}.steps,.mistake-grid,.related-grid,.directory-cards{grid-template-columns:1fr}.filter-box{align-items:stretch;flex-direction:column}.site-header-inner{align-items:center}.about-hero{padding:26px}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions .cta{width:100%}}