
:root{--dark:#050927;--dark2:#080f3b;--blue:#0867ff;--cyan:#0dd7ff;--purple:#6d28d9;--text:#071331;--muted:#5f6f8c;--line:#e7edf7;--bg:#f7faff;--card:#fff;--shadow:0 18px 45px rgba(8,15,59,.10)}
*{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.7}a{text-decoration:none;color:inherit}.page{overflow:hidden}.container{width:min(1780px,calc(100% - 64px));margin-inline:auto}
.header{position:sticky;top:0;z-index:100;background:rgba(5,9,39,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}.nav{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}.logo{color:#fff;display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.03em;line-height:.9;min-width:max-content}.logo-mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 24px rgba(13,215,255,.45)}.logo-mark svg{width:23px;height:23px}.logo .wave{color:#11d7ff}.logo small{font-size:10px;letter-spacing:.55em;color:#d9e7ff}.menu{display:flex;align-items:center;justify-content:center;gap:10px;flex:1}.menu a{color:#f8fbff;font-weight:800;font-size:14px;padding:12px 15px;border-radius:12px;min-height:44px;display:flex;align-items:center}.menu a:hover{background:#211063}.nav-actions{display:flex;gap:12px;align-items:center}.icon-btn,.mobile-menu-btn{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;display:grid;place-items:center;cursor:pointer}.top-pill{border-radius:12px;background:red;color:#fff;padding:13px 18px;font-weight:900;font-size:14px}.mobile-menu-btn{display:none}
.hero{position:relative;color:#fff;overflow:hidden;min-height:230px;background:radial-gradient(circle at 82% 40%,rgba(103,58,255,.50),transparent 25rem),radial-gradient(circle at 30% 10%,rgba(9,98,255,.28),transparent 31rem),linear-gradient(90deg,#06113f 0%,#071653 48%,#050b31 100%)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 38%,rgba(255,255,255,.04),transparent 62%),repeating-linear-gradient(162deg,rgba(31,130,255,.18) 0 1px,transparent 1px 20px);opacity:.82}.hero-content{position:relative;z-index:2;min-height:230px;display:grid;grid-template-columns:minmax(560px,1fr) 560px;align-items:center;gap:22px;padding:24px 0 34px}.breadcrumbs{font-size:13px;color:#dbe8ff;margin-bottom:8px}.hero h1{margin:0;font-size:clamp(40px,4vw,68px);letter-spacing:-.05em;line-height:1.02;font-weight:950;text-shadow:0 8px 24px rgba(0,0,0,.28)}.hero h1 span{background:linear-gradient(90deg,#0b8dff,#8a40ff);-webkit-background-clip:text;color:transparent}.hero p{font-size:20px;color:#f0f5ff;margin:12px 0 18px;font-weight:650;max-width:850px}.hero-badges{display:flex;flex-wrap:wrap;gap:14px}.hero-badges span{padding:10px 17px;border-radius:11px;background:rgba(4,12,50,.55);border:1px solid rgba(122,145,255,.42);font-weight:850;font-size:14px}.hero-art{min-height:210px;position:relative}.device{position:absolute;right:40px;top:16px;width:390px;height:180px;border-radius:22px;background:linear-gradient(135deg,rgba(34,58,160,.95),rgba(119,45,255,.95) 58%,rgba(255,57,145,.74));border:1px solid rgba(255,255,255,.20);box-shadow:0 22px 65px rgba(58,31,148,.56);transform:perspective(780px) rotateY(-13deg) rotateZ(4deg)}.device:before{content:"";position:absolute;width:108px;height:108px;border:3px solid rgba(255,255,255,.65);border-radius:55%;left:53%;top:48%;transform:translate(-50%,-50%) rotate(19deg)}.float{position:absolute;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:22px;background:linear-gradient(135deg,#0b8dff,#7131ff);box-shadow:0 16px 34px rgba(0,0,0,.30)}.float.f1{right:16px;top:48px}.float.f2{right:0;top:150px;background:linear-gradient(135deg,#ff2d72,#7131ff)}.float.f3{right:455px;top:28px}.float.f4{right:505px;top:126px;background:linear-gradient(135deg,#ff2d72,#ff4f8a)}
.main{padding:44px 0 70px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start}.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:30px}.article h2{font-size:29px;line-height:1.2;margin:32px 0 12px}.article h3{font-size:21px;margin:24px 0 8px}.article p,.article li{font-size:16px;color:#263855}.article ul{padding-left:22px}.intro{font-size:18px!important;color:#172554!important}.notice{padding:16px 18px;border-left:4px solid var(--blue);background:#eef5ff;border-radius:10px}.toolbox{padding:22px;border:1px solid #d9e4f5;background:#f8fbff;border-radius:15px;margin:22px 0}.toolbox input,.toolbox textarea,.toolbox select,.toolbox button{width:100%;font:inherit;padding:13px 14px;border-radius:10px;border:1px solid #ccd8ea;margin-top:10px}.toolbox button{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border:0;font-weight:900;cursor:pointer}.sidebar{position:sticky;top:88px}.side-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px;margin-bottom:18px}.side-card h2{font-size:21px;margin:0 0 12px}.related a{display:block;padding:11px 0;border-top:1px solid #eef2f8;color:#4c18e8;font-weight:750;font-size:14px}.meta-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.meta-row span{background:#eef3ff;color:#334a83;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800}
.footer{background:radial-gradient(circle at 65% 35%,#102d70,#061739 70%);color:#fff;padding:38px 0 18px}.footer .container{width:min(1460px,94%)}.footer-grid{display:grid;grid-template-columns:1.3fr .9fr 1fr 1.2fr;gap:45px}.footer .logo-icon{width:48px;height:48px;flex:0 0 48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#19d4ff,#1374ff);font-size:23px}.footer .logo-text{font-weight:900;letter-spacing:1px;font-size:20px;line-height:1}.footer .logo-text b{color:#13c6ff}.footer .logo-text small{display:block;font-size:9px;letter-spacing:6px;margin-top:7px;color:#d9e7ff}.footer h3{margin:0 0 12px;font-size:16px}.footer p,.footer a{font-size:13px;line-height:1.7;color:#d1daee}.footer-links{display:grid;gap:5px}.subscribe{display:flex;gap:9px}.subscribe input{height:45px;min-width:0;flex:1;border:0;border-radius:9px;padding:0 14px;background:#1b2c4d;color:#fff}.subscribe button{height:45px;border:0;border-radius:9px;background:#6d28d9;color:#fff;padding:0 18px;font-weight:800}.copyright{border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:17px;display:flex;justify-content:space-between;gap:20px;color:#d1daee;font-size:12px}
.svg-icon{width:1.25em;height:1.25em;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1300px){.container{width:min(1280px,calc(100% - 36px))}.layout{grid-template-columns:1fr 300px;gap:22px}}
@media(max-width:980px){.nav-actions .top-pill,.menu{display:none}.mobile-menu-btn{display:grid}.menu.open{display:flex;position:absolute;top:68px;left:16px;right:16px;flex-direction:column;align-items:stretch;background:#071047;border-radius:16px;padding:12px;z-index:110}.hero-content{grid-template-columns:1fr;text-align:center;padding:36px 0 60px}.hero-art{display:none}.hero-badges{justify-content:center}.layout{grid-template-columns:1fr}.sidebar{position:static}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.container{width:calc(100% - 24px)}.hero h1{font-size:39px}.hero p{font-size:16px}.card{padding:21px}.footer-grid{grid-template-columns:1fr 1fr}.subscribe{flex-direction:column}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}.copyright{flex-direction:column;gap:7px}}

/* SEO article enhancements */
.toc{display:grid;gap:8px;margin:24px 0;padding:20px;border:1px solid #d9e4f5;background:#f8fbff;border-radius:15px}.toc strong{font-size:19px}.toc a{color:#2456c7;font-weight:750}.toc a:hover{text-decoration:underline}.article ol{padding-left:22px}.table-wrap{overflow-x:auto;margin:18px 0 24px;border:1px solid var(--line);border-radius:14px}.article table{width:100%;border-collapse:collapse;min-width:650px;background:#fff}.article th,.article td{text-align:left;padding:13px 15px;border-bottom:1px solid #e9eef6;font-size:14px}.article th{background:#eef4ff;color:#172554;font-weight:900}.article tbody tr:last-child td,.article tfoot tr:last-child th{border-bottom:0}.ad-slot-wrap{width:100%;min-width:0;overflow:hidden;text-align:center}.ad-slot-sidebar{margin:0 0 18px;padding:10px;min-height:300px;contain:layout paint;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.ad-label{display:block;margin-bottom:6px;color:#53627f;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}@media(max-width:980px){.ad-slot-sidebar{display:none!important}}


/* Homepage-style header search */
.search-popover{display:none;position:absolute;right:0;top:58px;width:min(430px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 25px 65px rgba(0,0,0,.22);overflow:hidden;z-index:120;color:#071331}.search-popover.open{display:block}.search-input-wrap{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--line)}.search-input-wrap span{color:#53627f;display:grid;place-items:center}.search-input-wrap input{width:100%;border:1px solid #dbe4f2;border-radius:12px;padding:13px 14px;font:inherit;outline:none;background:#fff;color:#071331}.search-input-wrap input:focus{border-color:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.10)}.search-results{max-height:350px;overflow:auto;padding:8px}.search-result{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;color:#071331}.search-result:hover{background:#f5f8ff}.search-result i{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-style:normal;font-weight:900;font-size:11px}.search-result strong{display:block;font-size:14px;color:#172554}.search-result small{display:block;font-size:12px;color:#64748b;margin-top:2px}.no-search{display:none;padding:18px;text-align:center;color:#64748b}

/* Complete light/dark theme */
body.dark-mode{--bg:#070b1f;--card:#0f1734;--text:#eef4ff;--muted:#a9b8d8;--line:rgba(255,255,255,.12);background:#070b1f;color:#eef4ff}body.dark-mode .header{background:rgba(3,7,24,.96)}body.dark-mode .main,body.dark-mode .card,body.dark-mode .side-card,body.dark-mode .ad-slot-sidebar{background:#0f1734;color:#eef4ff;border-color:rgba(255,255,255,.12)}body.dark-mode .article p,body.dark-mode .article li,body.dark-mode .side-card p,body.dark-mode .meta-row{color:#c7d3ec}body.dark-mode .article h2,body.dark-mode .article h3,body.dark-mode .side-card h2{color:#fff}body.dark-mode .toc,body.dark-mode .notice{background:#121d3e;border-color:rgba(255,255,255,.13);color:#eef4ff}body.dark-mode .toc a,body.dark-mode .related a{color:#a9c7ff}body.dark-mode table{background:#0c1530;color:#eef4ff}body.dark-mode th{background:#17234b;color:#fff}body.dark-mode td,body.dark-mode th{border-color:rgba(255,255,255,.12)}body.dark-mode .search-popover{background:#0f1734;border-color:rgba(255,255,255,.12);color:#eef4ff}body.dark-mode .search-input-wrap{border-color:rgba(255,255,255,.12)}body.dark-mode .search-input-wrap input{background:#081025;border-color:#263654;color:#eef4ff}body.dark-mode .search-result{color:#eef4ff}body.dark-mode .search-result:hover{background:#17234b}body.dark-mode .search-result strong{color:#fff}body.dark-mode .search-result small,body.dark-mode .no-search{color:#b9c7e6}body.dark-mode .footer{background:linear-gradient(135deg,#020817,#061338)}
@media(max-width:720px){.search-popover{position:fixed;top:76px;left:12px;right:12px;width:auto}.nav-actions{gap:7px}.icon-btn{width:40px;height:40px}.nav-actions .top-pill{display:none}}
