:root{--gcl-bg:#030812;--gcl-bg2:#061522;--gcl-panel:#071724;--gcl-panel2:#091d2b;--gcl-line:#153d53;--gcl-line-strong:#23627d;--gcl-cyan:#43e7ff;--gcl-teal:#35ffd0;--gcl-lime:#aaff62;--gcl-text:#eefbff;--gcl-muted:#9db8c6;--gcl-shadow:0 24px 80px rgba(0,0,0,.42),0 0 45px rgba(67,231,255,.04)}
html{background:var(--gcl-bg)}
body{background:radial-gradient(circle at 75% -8%,rgba(67,231,255,.14),transparent 34rem),linear-gradient(rgba(38,100,126,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(38,100,126,.045) 1px,transparent 1px),var(--gcl-bg)!important;background-size:auto,40px 40px,40px 40px!important;color:var(--gcl-text)!important}
.shell{width:min(100%,1520px)!important;max-width:1520px!important;margin-inline:auto!important;padding-inline:clamp(18px,4vw,64px)!important}
body>.shell>header,.shell>header{min-height:88px!important;height:auto!important;padding:14px 0!important;gap:24px!important;background:rgba(3,8,18,.94)!important;border-bottom:1px solid rgba(67,231,255,.18)!important;backdrop-filter:blur(16px);position:relative!important;top:auto!important;z-index:40!important}
header .brand,.brand{font-size:clamp(15px,1.25vw,19px)!important;letter-spacing:.075em!important;white-space:nowrap}
header nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;flex-wrap:wrap!important;min-width:0}
header nav a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:10px 16px!important;border:1px solid #174159!important;border-radius:999px!important;background:linear-gradient(180deg,#081b29,#06131e)!important;color:#d9edf5!important;font-size:.78rem!important;font-weight:800!important;letter-spacing:0!important;box-shadow:inset 0 1px rgba(255,255,255,.025);white-space:nowrap}
header nav a:hover,header nav a:focus-visible{border-color:var(--gcl-cyan)!important;color:white!important;box-shadow:0 0 24px rgba(67,231,255,.1)!important}
main{max-width:none!important}
.hero{position:relative!important;padding-top:clamp(54px,7vw,96px)!important;padding-bottom:clamp(34px,5vw,68px)!important}
.hero:before{content:"";position:absolute;inset:18px -12px auto auto;width:min(42vw,620px);height:300px;pointer-events:none;background:radial-gradient(circle,rgba(67,231,255,.09),transparent 67%);filter:blur(10px)}
.eyebrow,.kicker{color:var(--gcl-cyan)!important;letter-spacing:.16em!important;text-transform:uppercase}
h1{max-width:1100px}
h1 span{color:var(--gcl-cyan)}
.lead,.hero p{color:#b3c9d4!important}
.card,.lab,.tester,.method,.tool,.section-card,.faq details,.gcl-cluster-link{border-color:var(--gcl-line)!important;background:linear-gradient(145deg,rgba(8,25,38,.96),rgba(5,15,25,.98))!important;box-shadow:var(--gcl-shadow)}
.card,.lab,.tool,.gcl-cluster-link{border-radius:18px!important}
.card{transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.card:hover{border-color:#245c74!important;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 28px rgba(67,231,255,.035)}
.links a,.related-links a,.toc a,.catalog-jumps a{transition:border-color .14s ease,color .14s ease,background .14s ease}
.links a,.related-links a{border-color:#19455d!important;background:#071925!important;border-radius:12px!important}
.links a:hover,.related-links a:hover{border-color:var(--gcl-cyan)!important;color:#fff!important}
button,.primary,.run{transition:filter .15s ease,transform .15s ease,box-shadow .15s ease}
button:hover,.primary:hover,.run:hover{transform:translateY(-1px)}
.run,.primary{box-shadow:0 10px 34px rgba(67,231,255,.11)}
.gcl-breadcrumb{max-width:1520px!important;margin:18px auto 0!important;padding-inline:clamp(18px,4vw,64px)!important;color:#7f9eae!important}
.gcl-breadcrumb a{color:#9dddeb!important}
.gcl-skip-link{z-index:1000!important}
footer{max-width:1520px!important;margin-inline:auto!important;padding-left:clamp(18px,4vw,64px)!important;padding-right:clamp(18px,4vw,64px)!important;border-top-color:#14374b!important}
@media(min-width:1101px){.grid{gap:20px!important}.card{padding:clamp(22px,2vw,30px)!important}.hero h1{font-size:clamp(3.1rem,6vw,6.8rem)!important;line-height:.9!important}.content,.section{max-width:1320px;margin-inline:auto}.lab{padding:clamp(24px,2.8vw,42px)!important}}
@media(max-width:1100px){.shell{padding-inline:22px!important}header nav{gap:7px!important}header nav a{padding:9px 12px!important;font-size:.72rem!important}.hero{padding-top:48px!important}}
@media(max-width:820px){.shell{padding-inline:16px!important}body>.shell>header,.shell>header{min-height:72px!important;padding:12px 0!important}header nav{display:none!important}header nav.open{display:flex!important;position:absolute!important;top:72px!important;left:0!important;right:0!important;padding:14px!important;background:#06111cf5!important;border:1px solid var(--gcl-line)!important;border-radius:14px!important;box-shadow:0 20px 50px #0009!important;flex-direction:column!important;align-items:stretch!important}header nav.open a{width:100%!important}.hero{padding-top:38px!important}.grid,.two-col,.three-col,.signal,.related-links,.principles{grid-template-columns:1fr!important}.card{min-width:0!important}.gcl-breadcrumb{padding-inline:16px!important}}
@media(max-width:560px){.shell{padding-inline:13px!important}.hero h1,h1{font-size:clamp(2.35rem,13.5vw,4rem)!important}.card,.lab{padding:18px!important}footer{padding-inline:16px!important}}
@media(prefers-reduced-motion:reduce){.card,button,.primary,.run{transition:none!important}}

/* React homepage + React lab pages: visual parity with static diagnostic pages */
.app{max-width:none!important;overflow-x:hidden}
.app:before{content:"●  FREE BROWSER-BASED DIAGNOSTIC TOOLS FOR YOUR DEVICES                                      NO INSTALLATION     PRIVACY FIRST     WORKS IN YOUR BROWSER     100% FREE";display:flex;align-items:center;min-height:44px;padding:0 clamp(20px,4vw,64px);border-bottom:1px solid rgba(67,231,255,.22);background:linear-gradient(90deg,#071a2a,#0b2940 48%,#071a2a);color:#bfeefa;font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.045em;white-space:pre;overflow:hidden;text-overflow:clip}
.app>header{width:min(calc(100% - 40px),1520px)!important;min-height:88px!important;height:auto!important;margin:0 auto!important;padding:14px 0!important;background:rgba(3,8,18,.95)!important;border-bottom:1px solid rgba(67,231,255,.18)!important;position:relative!important;top:auto!important;backdrop-filter:blur(16px);z-index:40!important}
.app>header .brand{font-size:clamp(16px,1.3vw,20px)!important;font-weight:850!important;letter-spacing:.075em!important}
.app>header .brand-mark{width:48px!important;height:48px!important;border-radius:13px!important;clip-path:none!important;background:radial-gradient(circle at 35% 30%,#dffcff,#55e9ff 38%,#0a6f88 72%,#05222e)!important;border:1px solid #8df3ff!important;box-shadow:inset 0 0 18px #ffffff44,0 0 28px #35e7ff1c!important}
.app>header .brand-mark svg{width:25px!important;height:25px!important;color:#00121a!important}
.app>header nav{gap:10px!important;justify-content:center!important}
.app>header nav a{min-height:42px!important;padding:10px 18px!important;border:1px solid #174159!important;border-radius:999px!important;background:linear-gradient(180deg,#081b29,#06131e)!important;color:#d9edf5!important;font:800 .76rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.02em!important}
.app>header .system{padding:11px 15px;border:1px solid #173d52;border-radius:999px;background:#071722;color:#a8c4d0!important}
.app>main{width:100%;max-width:1520px!important;margin-inline:auto!important;padding-inline:clamp(20px,4vw,64px)!important}
.app .hero{min-height:auto!important;padding:clamp(72px,8vw,118px) 0 clamp(58px,6vw,90px)!important;overflow:visible!important;border-bottom:1px solid rgba(67,231,255,.08)}
.app .hero:after{right:0!important;top:20px!important;font-size:min(25vw,390px)!important;opacity:.7}
.app .hero h1{font-size:clamp(4.1rem,7vw,7.8rem)!important;line-height:.84!important;max-width:1000px!important;margin:30px 0!important}
.app .hero>p{max-width:760px!important;font-size:clamp(1rem,1.3vw,1.18rem)!important;line-height:1.7!important}
.app .hero-actions{gap:18px 28px!important;flex-wrap:wrap!important}
.app .hero-actions .primary{min-height:54px!important;padding:16px 24px!important;border-radius:0!important}
.app .telemetry{right:0!important;bottom:28px!important}
.app .tester,.app .method{margin-left:0!important;margin-right:0!important}
.app .tester{border-radius:20px!important;clip-path:none!important;overflow:hidden!important}
.app .lab-section{padding-left:0!important;padding-right:0!important}
.app .labs{gap:16px!important}
.app .labs .lab-card,.app .labs article{border-radius:16px!important;overflow:hidden}
.app footer{width:100%!important;max-width:1520px!important;margin-inline:auto!important}
@media(max-width:1100px){.app:before{font-size:9px}.app>header{width:min(calc(100% - 32px),1520px)!important}.app>main{padding-inline:22px!important}.app .hero h1{font-size:clamp(3.6rem,9vw,6rem)!important}}
@media(max-width:850px){.app:before{content:"●  FREE BROWSER DIAGNOSTICS     NO INSTALLATION     PRIVACY FIRST";min-height:38px;padding-inline:16px}.app>header{width:calc(100% - 28px)!important;min-height:72px!important}.app>header nav{display:none!important}.app>header nav.open{display:flex!important;top:72px!important}.app>header .system{display:none!important}.app>main{padding-inline:16px!important}.app .hero{padding-top:56px!important}.app .hero h1{font-size:clamp(3.1rem,14vw,5.4rem)!important}.app .telemetry{display:none!important}}
@media(max-width:560px){.app:before{font-size:8px}.app>header{width:calc(100% - 24px)!important}.app>header .brand-mark{width:42px!important;height:42px!important}.app>main{padding-inline:12px!important}.app .hero h1{font-size:clamp(2.8rem,16vw,4.4rem)!important}.app .hero-actions{align-items:stretch!important}.app .hero-actions .primary{width:100%!important;justify-content:center!important}.app .tester{margin-inline:0!important}}