:root{color-scheme:light;--bg:#f4f7fb;--surface:#fff;--surface-2:#f7f9fd;--surface-3:#edf2f8;--ink:#0c192b;--muted:#5e6d82;--faint:#8794a8;--line:#dbe3ed;--line-strong:#c3cedc;--navy:#071426;--blue:#2166e8;--blue-2:#0b4bc3;--blue-soft:#e9f1ff;--cyan:#12a8c7;--cyan-soft:#e4f8fb;--green:#078663;--green-soft:#e5f6f0;--amber:#b8730d;--amber-soft:#fff3dd;--violet:#6e55c9;--violet-soft:#f0edff;--danger:#c54355;--shadow:0 16px 42px rgba(25,45,75,.08);--shadow-sm:0 3px 14px rgba(25,45,75,.06);--radius:18px;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--wrap:1240px} html[data-theme="dark"]{color-scheme:dark;--bg:#06101e;--surface:#0b192b;--surface-2:#102238;--surface-3:#172b43;--ink:#f2f6fc;--muted:#a2b1c5;--faint:#768aa3;--line:#263a52;--line-strong:#3b526c;--navy:#eaf2ff;--blue:#6f9cff;--blue-2:#94b5ff;--blue-soft:#142e5a;--cyan:#43c6df;--cyan-soft:#0d3340;--green:#3ad3a0;--green-soft:#0b392f;--amber:#f1b85a;--amber-soft:#3a2b13;--violet:#ad96ff;--violet-soft:#2c2651;--danger:#ff7989;--shadow:0 18px 50px rgba(0,0,0,.26);--shadow-sm:0 3px 16px rgba(0,0,0,.18)} *{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg);font-family:var(--sans);color:var(--ink)}body{margin:0;min-width:320px;background:var(--bg);font-size:16px;line-height:1.55}button,input,select{font:inherit}button,a{cursor:pointer}.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--blue);color:#fff;padding:10px 14px;border-radius:9px}.skip:focus{top:10px}:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 55%,transparent);outline-offset:3px}svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.header-bar{height:70px;max-width:var(--wrap);margin:auto;padding:0 24px;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap}.brand span{font-size:17px;letter-spacing:-.025em}.brand span strong{font-weight:850}.brand-mark{width:34px;height:34px;color:var(--blue)}.brand-mark rect{stroke-width:1.7}.brand-mark circle{fill:var(--blue);stroke:none}.brand-mark path{color:var(--green)}.desktop-nav{display:flex;align-items:center;height:100%;gap:4px}.desktop-nav a{height:100%;display:flex;align-items:center;padding:0 12px;color:var(--muted);text-decoration:none;font-size:14px;border-bottom:2px solid transparent}.desktop-nav a:hover,.desktop-nav a.active{color:var(--ink)}.desktop-nav a.active{border-color:var(--blue);font-weight:750}.header-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.privacy-pill{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}.privacy-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--ink)}.icon-button:hover{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}.icon-button svg{width:19px}.menu-button{display:none}.mobile-menu{padding:8px 16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:6px;border-top:1px solid var(--line)}.mobile-menu[hidden]{display:none}.mobile-menu a{padding:10px;border-radius:9px;background:var(--surface-2);text-decoration:none;color:var(--ink);font-weight:650;font-size:14px}.demo-notice{max-width:var(--wrap);margin:18px auto -10px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--blue) 7%,var(--surface));display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}.demo-notice strong{color:var(--blue);white-space:nowrap} main{max-width:var(--wrap);margin:auto;padding:38px 24px 80px}.hero{scroll-margin-top:90px}.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:780px;margin:0 auto 24px}.eyebrow,.overline{margin:0 0 8px;text-transform:uppercase;letter-spacing:.11em;font-weight:850;font-size:12px;color:var(--blue)}.eyebrow{display:flex;align-items:center;gap:9px}.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px var(--green-soft);animation:pulse 2.2s infinite}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.055em;margin:0 0 12px}.hero-copy>p:last-child{margin:0;color:var(--muted);font-size:18px;max-width:680px}.ip-console{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.7fr);background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.ip-primary{padding:30px 32px}.ip-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:750}.ip-head>span:first-child{display:flex;align-items:center;gap:8px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%}.status-dot.online{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}.status-dot.muted{background:var(--faint)}.demo-tag{padding:4px 8px;border-radius:6px;background:var(--amber-soft);color:var(--amber);font-size:11px}.ip-value-row{display:flex;align-items:center;gap:18px;margin:18px 0 22px}.ip-value{font-family:var(--mono);font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.055em;overflow-wrap:anywhere}.copy-button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:9px 12px;border-radius:10px;font-size:13px}.copy-button svg{width:17px}.copy-button:hover{border-color:var(--blue);color:var(--blue)}.copy-button.done{background:var(--green-soft);border-color:var(--green);color:var(--green)}.ip-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:23px}.ip-meta span{display:flex;flex-direction:column;border-left:2px solid var(--line);padding-left:11px}.ip-meta small,.network-summary dt,.result-grid small,.code-result span{color:var(--muted);font-size:12px}.ip-meta strong{font-size:14px}.ip-secondary{border-top:1px solid var(--line);padding-top:18px;display:grid;grid-template-columns:auto 1fr;gap:20px}.ip-secondary>div{display:flex;flex-direction:column;white-space:nowrap}.ip-secondary>div span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.ip-secondary>div strong{font-size:14px}.ip-secondary p{margin:0;color:var(--muted);font-size:13px}.network-summary{background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--blue-soft) 40%,var(--surface-2)));padding:28px;border-left:1px solid var(--line)}.section-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:850;margin-bottom:12px}.network-summary dl,.browser-card dl{margin:0}.network-summary dl div,.browser-card dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}.network-summary dt,.browser-card dt{color:var(--muted);font-size:12px}.network-summary dd,.browser-card dd{margin:0;text-align:right;font-weight:700;font-size:13px}.mono{font-family:var(--mono)}.precision-note{display:flex;gap:8px;margin:16px 0 0;padding:10px;border-radius:9px;background:var(--surface);color:var(--muted);font-size:11px}.precision-note svg{width:17px;flex:0 0 17px;color:var(--blue)}.signal-strip{display:grid;grid-template-columns:repeat(3,1fr) auto;margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}.signal-strip>div{display:flex;align-items:center;gap:10px;padding:13px 16px;border-right:1px solid var(--line)}.signal-strip>div>span:last-child{display:flex;flex-direction:column}.signal-strip small{color:var(--muted);font-size:11px}.signal-strip strong{font-size:13px}.signal-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px}.signal-icon svg{width:17px}.signal-icon.good{background:var(--green-soft);color:var(--green)}.signal-icon.neutral{background:var(--blue-soft);color:var(--blue)}.signal-action{border:0;background:var(--navy);color:var(--surface);padding:0 20px;font-size:12px;font-weight:750}.signal-action:hover{background:var(--blue);color:#fff}.signal-action span{margin-left:7px} .quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0 72px}.quick-actions a{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm);transition:.18s}.quick-actions a:hover{transform:translateY(-2px);border-color:var(--blue)}.quick-actions a>span:nth-child(2){display:flex;flex-direction:column}.quick-actions strong{font-size:14px}.quick-actions small{color:var(--muted);font-size:11px}.quick-actions b{color:var(--blue)}.quick-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;font-weight:850;font-size:12px}.quick-icon.blue{color:var(--blue);background:var(--blue-soft)}.quick-icon.cyan{color:var(--cyan);background:var(--cyan-soft)}.quick-icon.violet{color:var(--violet);background:var(--violet-soft)}.quick-icon.green{color:var(--green);background:var(--green-soft)} .section{scroll-margin-top:90px;margin-top:78px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:22px}.section-heading h2,.api-copy h2,.faq-intro h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.045em;margin:0 0 8px}.section-heading p:not(.overline),.api-copy>p:not(.overline),.faq-intro>p:not(.overline){margin:0;color:var(--muted);font-size:16px}.local-badge{display:flex;align-items:center;gap:8px;color:var(--green);font-size:12px;border:1px solid color-mix(in srgb,var(--green) 25%,var(--line));background:var(--green-soft);padding:8px 10px;border-radius:999px;white-space:nowrap}.local-badge svg{width:16px}.workbench{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.tool-tabs{display:flex;padding:8px;background:var(--surface-2);border-bottom:1px solid var(--line);gap:5px}.tool-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:var(--muted);border-radius:10px;padding:11px;font-weight:700;font-size:13px}.tool-tabs button span{font-size:11px;font-weight:900}.tool-tabs button:hover,.tool-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}.tool-tabs button.active{color:var(--blue)}.tool-panel{padding:26px}.tool-panel[hidden]{display:none}.tool-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.tool-intro h3{margin:0 0 4px;font-size:19px}.tool-intro p{margin:0;color:var(--muted);font-size:13px}.tool-intro>span{padding:5px 8px;border-radius:6px;background:var(--blue-soft);color:var(--blue);font-size:10px;font-weight:800;white-space:nowrap}.tool-form{margin:20px 0}.tool-form label{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:7px}.tool-form>div{display:flex;gap:8px}.tool-form input,.tool-form select{height:48px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:10px;padding:0 13px}.tool-form input{flex:1;font-family:var(--mono);min-width:0}.tool-form select{min-width:100px}.tool-form button{height:48px;border:0;border-radius:10px;background:var(--blue);color:#fff;padding:0 18px;font-weight:750}.tool-form button:hover{background:var(--blue-2)}.tool-result{border:1px solid var(--line);border-radius:13px;background:var(--surface-2);overflow:hidden}.result-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.result-head>span{display:flex;align-items:center;gap:8px;font-weight:750;color:var(--green)}.result-head button{border:0;background:transparent;color:var(--blue);font-size:11px;font-weight:750}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:7px 14px}.result-grid span{display:flex;flex-direction:column;padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.result-grid span:nth-child(3n){border-right:0}.result-grid span:nth-last-child(-n+3){border-bottom:0}.result-grid strong{font-size:13px;overflow-wrap:anywhere}.tool-result table{border-collapse:collapse;width:100%;font-size:13px}.tool-result th,.tool-result td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}.tool-result th{color:var(--muted);font-size:11px}.result-note{margin:0;padding:10px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:11px} .privacy-section{padding:35px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.secondary-button{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:10px 13px;border-radius:10px;font-weight:700;font-size:13px}.secondary-button:hover{border-color:var(--blue);color:var(--blue)}.privacy-layout{display:grid;grid-template-columns:245px minmax(0,1fr) 300px;gap:16px}.privacy-score,.browser-card{border:1px solid var(--line);border-radius:16px;background:var(--surface-2);padding:20px}.privacy-score{text-align:center}.score-orbit{width:132px;height:132px;margin:0 auto 13px;position:relative}.score-orbit svg{width:100%;transform:rotate(-90deg)}.score-orbit circle{stroke:var(--line);stroke-width:8}.score-orbit .score-progress{stroke:var(--green);stroke-dasharray:302;stroke-dashoffset:42;transition:stroke-dashoffset .5s}.score-orbit>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.score-orbit strong{font-size:35px}.score-orbit span{color:var(--muted)}.privacy-score h3{margin:0;font-size:17px}.privacy-score>p{font-size:12px;color:var(--muted)}.privacy-legend{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:5px;text-align:left;font-size:10px;color:var(--muted)}.privacy-legend span{display:flex;align-items:center;gap:7px}.good-dot,.neutral-dot{width:7px;height:7px;border-radius:50%}.good-dot{background:var(--green)}.neutral-dot{background:var(--faint)}.privacy-checks{border:1px solid var(--line);border-radius:16px;overflow:hidden}.privacy-checks article{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--surface-2)}.privacy-checks article:last-child{border:0}.privacy-checks h3{font-size:13px;margin:0}.privacy-checks p{font-size:11px;color:var(--muted);margin:1px 0 0}.check-symbol{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:900}.check-symbol.good{background:var(--green-soft);color:var(--green)}.check-symbol.neutral{background:var(--blue-soft);color:var(--blue)}.check-state{font-size:10px;color:var(--green);font-weight:800}.neutral-text{color:var(--muted)}.inline-button{border:0;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:800;padding:7px 10px;border-radius:8px}.browser-card dl div{padding:8px 0}.browser-card details{margin-top:12px}.browser-card summary{cursor:pointer;color:var(--blue);font-size:11px;font-weight:750}.browser-card code{display:block;margin-top:8px;padding:9px;background:var(--surface);border-radius:8px;color:var(--muted);font-size:9px;overflow-wrap:anywhere}.privacy-disclaimer{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:var(--blue-soft);color:var(--muted);font-size:12px}.privacy-disclaimer strong{color:var(--ink)} .api-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;padding:42px;background:var(--navy);color:var(--surface);border-radius:24px;overflow:hidden;position:relative}.api-section:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-130px;top:-220px;border:80px solid color-mix(in srgb,var(--blue) 22%,transparent)}html[data-theme="dark"] .api-section{background:#020b17;color:var(--ink)}.api-copy{position:relative}.api-copy>p:not(.overline){color:color-mix(in srgb,var(--surface) 68%,transparent)}html[data-theme="dark"] .api-copy>p:not(.overline){color:var(--muted)}.api-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.api-chips span{font-size:10px;border:1px solid color-mix(in srgb,var(--surface) 22%,transparent);padding:5px 8px;border-radius:999px}.code-console{position:relative;background:#040a13;border:1px solid #233047;border-radius:15px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35);color:#edf5ff}.code-head{height:44px;display:flex;align-items:center;padding:0 13px;background:#0b1422;border-bottom:1px solid #233047}.code-head>div:first-child{display:flex;gap:5px}.code-head>div:first-child i{width:8px;height:8px;border-radius:50%;background:#36465e}.code-head>div:first-child i:first-child{background:#db5d68}.code-head>div:first-child i:nth-child(2){background:#dba849}.code-head>div:first-child i:nth-child(3){background:#3dad80}.code-tabs{display:flex;gap:3px;margin-left:24px}.code-tabs button,.code-copy{border:0;background:transparent;color:#8291a8;font-size:10px;padding:6px 8px}.code-tabs button.active{background:#182337;color:#edf5ff;border-radius:6px}.code-copy{margin-left:auto}.code-console pre{min-height:100px;margin:0;padding:26px 20px;font-family:var(--mono);font-size:13px;white-space:pre-wrap;color:#99c2ff}.code-result{display:flex;justify-content:space-between;padding:12px 20px;background:#07111e;border-top:1px solid #233047}.code-result span{color:#8291a8}.code-result strong{color:#56d6ae} .text-link{color:var(--blue);text-decoration:none;font-weight:750;font-size:13px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:16px;overflow:hidden}.guide-grid a{min-height:178px;display:grid;grid-template-columns:auto 1fr auto;gap:13px;padding:20px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}.guide-grid a:hover{background:var(--blue-soft)}.guide-number{font-family:var(--mono);color:var(--blue);font-size:11px}.guide-grid h3{font-size:16px;margin:0 0 7px}.guide-grid p{font-size:12px;color:var(--muted);margin:0}.guide-grid small{display:block;color:var(--faint);margin-top:16px}.guide-grid b{color:var(--blue)}.faq-section{display:grid;grid-template-columns:320px 1fr;gap:60px}.faq-list details{border-bottom:1px solid var(--line);padding:17px 0}.faq-list summary{list-style:none;display:flex;justify-content:space-between;gap:20px;font-weight:750;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:var(--blue);font-size:20px;font-weight:400;transition:.2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list p{margin:10px 30px 0 0;color:var(--muted);font-size:14px} footer{border-top:1px solid var(--line);background:var(--surface)}.footer-grid{max-width:var(--wrap);margin:auto;padding:42px 24px 28px;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px}.footer-brand p{max-width:380px;color:var(--muted);font-size:13px}.footer-grid nav{display:flex;flex-direction:column;gap:7px}.footer-grid h2{text-transform:uppercase;letter-spacing:.09em;font-size:11px;color:var(--muted);margin:0 0 5px}.footer-grid nav a{color:var(--ink);text-decoration:none;font-size:13px}.footer-grid nav a:hover{color:var(--blue)}.footer-bottom{max-width:var(--wrap);margin:auto;padding:16px 24px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}.footer-bottom i{color:var(--green);margin:0 5px}.toast{position:fixed;z-index:100;right:22px;bottom:22px;background:var(--ink);color:var(--surface);padding:11px 15px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(20px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none} @keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--green-soft)}50%{box-shadow:0 0 0 8px transparent}}@media(max-width:1050px){.privacy-pill{display:none}.privacy-layout{grid-template-columns:220px 1fr}.browser-card{grid-column:1/-1}.quick-actions{grid-template-columns:repeat(2,1fr)}.guide-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){.desktop-nav{display:none}.menu-button{display:grid}.header-bar{height:62px;padding:0 16px}.ip-console{grid-template-columns:1fr}.network-summary{border-left:0;border-top:1px solid var(--line)}.signal-strip{grid-template-columns:1fr 1fr}.signal-strip>div:nth-child(2){border-right:0}.signal-strip>div:nth-child(3){border-top:1px solid var(--line)}.signal-action{min-height:58px;border-top:1px solid var(--line)}.section-heading{align-items:flex-start;flex-direction:column}.local-badge{white-space:normal}.privacy-section{padding:24px}.privacy-layout{grid-template-columns:1fr}.browser-card{grid-column:auto}.privacy-score{display:grid;grid-template-columns:140px 1fr;align-items:center;text-align:left}.privacy-score .score-orbit{grid-row:1/4}.privacy-legend{grid-column:2}.api-section{grid-template-columns:1fr;padding:30px;gap:28px}.faq-section{grid-template-columns:1fr;gap:20px}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-brand{grid-column:1/-1}} @media(max-width:600px){body{font-size:15px}main{padding:26px 14px 60px}.brand span{font-size:15px}.header-actions{gap:6px}.hero h1{font-size:38px}.hero-copy>p:last-child{font-size:16px}.ip-primary,.network-summary{padding:21px}.ip-value-row{align-items:flex-start;flex-direction:column}.ip-value{font-size:34px}.ip-meta{grid-template-columns:1fr 1fr}.ip-secondary{grid-template-columns:1fr}.signal-strip{grid-template-columns:1fr}.signal-strip>div{border-right:0;border-bottom:1px solid var(--line)}.signal-strip>div:nth-child(3){border-top:0}.signal-action{min-height:52px}.quick-actions{grid-template-columns:1fr;margin-bottom:56px}.section{margin-top:60px}.section-heading h2,.api-copy h2,.faq-intro h2{font-size:31px}.tool-tabs{overflow-x:auto}.tool-tabs button{min-width:120px}.tool-panel{padding:18px}.tool-form>div{flex-direction:column}.tool-form input,.tool-form select,.tool-form button{width:100%}.result-grid{grid-template-columns:1fr 1fr}.result-grid span:nth-child(3n){border-right:1px solid var(--line)}.result-grid span:nth-child(2n){border-right:0}.result-grid span:nth-last-child(-n+3){border-bottom:1px solid var(--line)}.result-grid span:nth-last-child(-n+2){border-bottom:0}.privacy-section{padding:18px}.privacy-score{display:block;text-align:center}.privacy-legend{grid-column:auto}.privacy-checks article{grid-template-columns:32px 1fr}.privacy-checks article>:last-child{grid-column:2;justify-self:start}.api-section{padding:24px 18px}.guide-grid{grid-template-columns:1fr}.guide-grid a{min-height:150px}.footer-grid{grid-template-columns:1fr 1fr;padding:34px 18px}.footer-brand{grid-column:1/-1}.footer-bottom{padding:16px 18px 24px;flex-direction:column}.toast{right:14px;bottom:14px;left:14px;text-align:center}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}} /* ---------- tema di sistema, senza JavaScript e senza sfarfallio ---------- La demo parte sempre chiara e passa allo scuro solo dopo che lo script ha letto localStorage: chi ha il sistema in scuro vede un lampo bianco a ogni pagina. Qui i token dello scuro valgono gia' quando il sistema lo chiede e nessuna scelta esplicita e' stata fatta; :root[data-theme="light"] riporta al chiaro chi lo ha scelto davvero, e lo scuro esplicito resta sopra. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {color-scheme:dark;--bg:#06101e;--surface:#0b192b;--surface-2:#102238;--surface-3:#172b43;--ink:#f2f6fc;--muted:#a2b1c5;--faint:#768aa3;--line:#263a52;--line-strong:#3b526c;--navy:#eaf2ff;--blue:#6f9cff;--blue-2:#94b5ff;--blue-soft:#142e5a;--cyan:#43c6df;--cyan-soft:#0d3340;--green:#3ad3a0;--green-soft:#0b392f;--amber:#f1b85a;--amber-soft:#3a2b13;--violet:#ad96ff;--violet-soft:#2c2651;--danger:#ff7989;--shadow:0 18px 50px rgba(0,0,0,.26);--shadow-sm:0 3px 16px rgba(0,0,0,.18)} } /* ========================================================================== Pagine interne — /lookup /dns /whois /subnet /guide /faq e le legali. La demo e' una pagina sola e non ne ha: questi stili usano gli stessi token e le stesse forme dei suoi componenti, perche' una pagina interna che sembra un altro sito e' un difetto di prodotto, non una sfumatura. ========================================================================== */ main>h1,.section>h1{font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.02em;margin:0 0 12px} main>p.prose,.prose{max-width:70ch;color:var(--muted)} .prose h2{color:var(--ink);font-size:22px;margin:34px 0 10px;letter-spacing:-.01em} .prose h3{color:var(--ink);font-size:17px;margin:24px 0 8px} .prose p,.prose li{color:var(--muted)} .prose a{color:var(--blue)} .prose code,main dd code{font-family:var(--mono);font-size:.92em;background:var(--surface-3);padding:1px 5px;border-radius:5px} .prose ul,.prose ol{padding-left:22px} /* moduli delle pagine strumento: stessa veste del banco della home */ form.tool{margin:0} form.tool .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end} form.tool .row>div{flex:1 1 260px;display:flex;flex-direction:column;gap:6px} form.tool label,.tool-form label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} form.tool input,form.tool select{width:100%;box-sizing:border-box} form.tool input,form.tool select,.tool-form input,.tool-form select{padding:11px 13px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit} form.tool input:focus-visible,form.tool select:focus-visible{outline:2px solid var(--blue);outline-offset:1px} form.tool button{padding:11px 18px;border:0;border-radius:10px;background:var(--blue);color:#fff;font:inherit;font-weight:700;cursor:pointer} form.tool button:hover{background:var(--blue-2)} /* elenchi di fatti fuori dalle schede della home */ main dl:not(.network-summary dl):not(.browser-card dl){display:grid;gap:0;margin:16px 0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--surface)} main dl>div{display:grid;grid-template-columns:minmax(180px,34%) 1fr;gap:12px;padding:11px 15px;border-bottom:1px solid var(--line)} main dl>div:last-child{border-bottom:0} main dt{color:var(--muted);font-size:13px} main dd{margin:0;color:var(--ink);font-size:14px;overflow-wrap:anywhere} .mono{font-family:var(--mono)} table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px} th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line)} th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em} .tabella-avvolgi,.table-wrap{overflow-x:auto} .badge{display:inline-block;padding:7px 12px;border-radius:9px;font-size:13px;font-weight:700} .badge.warn{background:var(--amber-soft);color:var(--amber)} .badge.ok{background:var(--green-soft);color:var(--green)} .muted{color:var(--muted)} details.faq{border-bottom:1px solid var(--line);padding:16px 0} details.faq summary{cursor:pointer;font-weight:700;color:var(--ink)} details.faq p{color:var(--muted);margin:10px 0 0;max-width:70ch} /* indice delle guide e articolo */ .guide-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:22px 0} .guide-index a{display:block;padding:17px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm);transition:.18s} .guide-index a:hover{transform:translateY(-2px);border-color:var(--blue)} .guide-index h2{font-size:16px;margin:0 0 6px} .guide-index p{color:var(--muted);font-size:13px;margin:0} article.guida{max-width:74ch} .ad-slot[data-state="disabled"]{display:none} .ad-slot[data-state="enabled"]{min-height:90px;margin:26px 0;border:1px dashed var(--line-strong);border-radius:12px} .result-note{color:var(--muted);font-size:13px;margin:12px 0 0} .result-note a{color:var(--blue)} .text-link{color:var(--blue);text-decoration:none;font-weight:700;white-space:nowrap} /* La demo non ha una pagina 404 */ .non-trovata{text-align:center;padding:60px 0} .non-trovata h1{font-size:clamp(30px,5vw,52px)} /* Il modulo di una pagina strumento e' un pannello, come nel banco della home: senza superficie sembrava un campo lasciato a meta' in mezzo alla pagina. */ form.tool{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow-sm);margin:22px 0 6px} main>h1{margin-top:6px} main>p.prose:first-of-type{font-size:17px} .pannello+.pannello{margin-top:22px} /* Il risultato di uno strumento riusa la veste del banco. */ /* .pannello e non .section: la home usa .section per le proprie sezioni, e ridipingerle qui avrebbe cambiato la grafica approvata. Misurato: 19 differenze di colore calcolato rispetto alla demo. */ main>section.pannello{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-sm);margin-top:22px} main>section.pannello>h2{margin-top:0;font-size:19px} main>section.pannello:empty{display:none} /* --- Il modulo degli strumenti a schermo stretto ------------------------- Misurato il 2026-09-04 su /lookup a 390 px: 198 px di vuoto fra il campo e il pulsante. La causa non e' un margine ma una BASE FLEX letta nell'asse sbagliato: `form.tool .row>div{flex:1 1 260px}` serve in riga, dove 260 px e' una larghezza minima; quando la media query gira il contenitore in colonna, la stessa base diventa un'ALTEZZA e il contenitore del campo si stira a 260 px spingendo giu' il pulsante. In colonna la base va quindi azzerata. Il pulsante, in piu', non deve poter restringersi sotto il proprio testo: `flex:0 0 auto` e `white-space:nowrap` perche' «Cerca» non finisca mai troncato o mandato a capo. */ form.tool button{flex:0 0 auto;white-space:nowrap;min-width:max-content} @media(max-width:820px){ form.tool .row{flex-direction:column;align-items:stretch} form.tool .row>div{flex:0 0 auto} form.tool button{width:100%} } /* Nessuno scorrimento orizzontale a 390px: misurato 33px su /subnet e 89px su /privacy. Le stringhe lunghe — indirizzi IPv6, CIDR, indirizzi di posta — vanno mandate a capo, e le tabelle scorrono dentro il proprio riquadro. */ main dd,main td,.prose p,.prose li,code{overflow-wrap:anywhere} main table{display:block;overflow-x:auto;white-space:nowrap} @media(max-width:600px){ main dl>div{grid-template-columns:1fr;gap:2px} main dt{font-size:12px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px} } /* Contrasto: nel tema scuro --blue e' schiarito per i testi, e un bottone pieno con testo bianco sopra scendeva sotto 4.5:1. axe lo misurava «serious»; il bottone usa quindi il blu profondo in entrambi i temi. */ form.tool button,.tool-form button{background:#0b4bc3;color:#fff} form.tool button:hover,.tool-form button:hover{background:#093a99} /* ---------- contrasto: due correzioni alla tavolozza della demo ---------- Misurate con axe, entrambe «serious», entrambe reali: 1. le pastiglie delle azioni rapide. #12a8c7 su #e4f8fb da' circa 2,5:1 e #078663 su #e5f6f0 circa 4,0:1, sotto il 4,5:1 richiesto per il testo. Si scuriscono le due tinte NEL SOLO tema chiaro: nello scuro la coppia della demo passa gia', e cambiarla la peggiorerebbe. 2. il soprattitolo della sezione API nel tema scuro. Il pannello usa --navy, che nello scuro diventa CHIARO (#eaf2ff), mentre il testo resta --blue schiarito: azzurro su quasi-bianco. Nel tema chiaro la stessa coppia passa, quindi si corregge solo lo scuro. Sono le sole due deviazioni cromatiche dalla demo, e sono dichiarate nel referto. */ .quick-icon.cyan{color:#0a7186} .quick-icon.green{color:#046b4f} [data-theme="dark"] .quick-icon.cyan{color:var(--cyan)} [data-theme="dark"] .quick-icon.green{color:var(--green)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .quick-icon.cyan{color:var(--cyan)} :root:not([data-theme="light"]) .quick-icon.green{color:var(--green)} } [data-theme="dark"] .api-copy .overline{color:#0b4bc3} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .api-copy .overline{color:#0b4bc3} } /* Stessa correzione, altre due coppie misurate: .local-badge 4,08:1 e il marcatore del pannello strumento 4,48:1, entrambe sotto 4,5:1 e entrambe solo nel tema chiaro. */ .local-badge{color:#046b4f} .tool-intro>span{color:#0b4bc3} [data-theme="dark"] .local-badge{color:var(--green)} [data-theme="dark"] .tool-intro>span{color:var(--blue)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .local-badge{color:var(--green)} :root:not([data-theme="light"]) .tool-intro>span{color:var(--blue)} } /* Basta rincorrere una coppia per volta: nel tema CHIARO il verde della demo (#078663) sta fra 4,0:1 e 4,4:1 su ogni fondo tenue in cui viene usato — .local-badge, .check-state, le pastiglie. Si scurisce il token una volta sola, e solo nel chiaro: nello scuro la coppia della demo passa gia'. */ :root{--green:#046b4f} [data-theme="dark"]{--green:#3ad3a0} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--green:#3ad3a0}} /* Il pannello API e' navy in tema CHIARO e chiaro in tema SCURO: il blu del testo va quindi schiarito nel chiaro e scurito nello scuro, cioe' l'opposto di ogni altra superficie. Misurato: 3,63:1 nel chiaro, sotto la soglia. */ .api-copy .overline,.api-copy p{color:#8ab4ff} [data-theme="dark"] .api-copy .overline,[data-theme="dark"] .api-copy p{color:#0b4bc3} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .api-copy .overline, :root:not([data-theme="light"]) .api-copy p{color:#0b4bc3} } /* Il comando in linea del controllo WebRTC: 4,48:1 su fondo tenue. */ .inline-button{color:#0b4bc3} [data-theme="dark"] .inline-button{color:var(--blue)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .inline-button{color:var(--blue)}} /* ---------- ultime coppie sotto soglia, misurate una per una ---------- Elencate con il loro rapporto prima della correzione. Sono tutte del tema chiaro tranne il salto al contenuto, che e' del tema scuro. .quick-icon.blue 4,48:1 blu su blu tenue .check-symbol.neutral 4,48:1 stessa coppia .code-console code 1,62:1 il mio fondo per copriva la console scura: corretto sopra, e qui il testo torna chiaro sul nero .code-result a 2,02:1 collegamento senza colore, blu di sistema sul fondo scuro della console a.skip 2,67:1 bianco su --blue, che nello scuro e' schiarito: il fondo torna blu profondo */ .quick-icon.blue{color:#0b4bc3} .check-symbol.neutral{color:#0b4bc3} [data-theme="dark"] .quick-icon.blue,[data-theme="dark"] .check-symbol.neutral{color:var(--blue)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .quick-icon.blue, :root:not([data-theme="light"]) .check-symbol.neutral{color:var(--blue)} } .code-console code,.code-console pre{color:#cfe0ff;background:transparent} .code-result a,.code-result strong a{color:#8ab4ff} a.skip{background:#0b4bc3;color:#fff}