.ssl-hero{width:min(540px,100%);position:relative}.ssl-browser{border:1px solid var(--line);background:#0c0f24;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px #000000e6}.ssl-addr{background:#ffffff0f;border-radius:999px;align-items:center;gap:10px;margin:14px;padding:10px 14px;transition:background-color .5s;display:flex}.ssl-lock{color:#f87171;background:#ef44442e;border-radius:50%;place-items:center;width:28px;height:28px;transition:all .5s;display:grid}.ssl-warn{color:#f87171;font-size:13px;font-weight:700;transition:color .5s}.ssl-url{color:var(--mut);font-family:var(--hb-font-mono);font-size:13px}.ssl-url b{color:#f87171;font-weight:600;transition:color .5s}.is-secure .ssl-lock{color:var(--gr);background:#4ade802e;transform:scale(1.12)}.is-secure .ssl-warn,.is-secure .ssl-url b{color:var(--gr)}.is-secure .ssl-addr{background:#4ade8012}.ssl-page{gap:10px;padding:6px 22px 24px;display:grid}.ssl-page>b{background:#ffffffd9;border-radius:8px;width:60%;height:16px}.ssl-page>s{background:#ffffff4d;border-radius:5px;width:42%;height:9px}.ssl-form{border:1px solid var(--line);background:#ffffff0a;border-radius:14px;gap:10px;margin-top:10px;padding:16px;display:grid}.ssl-form i{background:#ffffff12;border-radius:10px;height:34px}.ssl-form u{background:linear-gradient(90deg, var(--s1), var(--s2));border-radius:10px;width:40%;height:36px}.ssl-wire{background:#05060ff7;border:1px solid #ffffff24;border-radius:16px;gap:4px;width:300px;padding:14px;display:grid;position:absolute;bottom:-40px;left:-30px;box-shadow:0 20px 40px -18px #000}.ssl-wire small{color:var(--mut);margin-bottom:4px;font-size:11px}.ssl-wire code{color:#f87171;font-family:var(--hb-font-mono);white-space:nowrap;font-size:12px;overflow:hidden}.is-secure .ssl-wire code{color:var(--gr)}.ssl-seal{color:var(--gr);background:#0f122cf5;border:1px solid #ffffff24;border-radius:16px;align-items:center;gap:10px;padding:12px 16px;display:flex;position:absolute;top:90px;right:-24px;box-shadow:0 20px 40px -18px #000}.ssl-seal strong{color:#fff;display:block}.ssl-seal small{color:var(--mut);font-size:11px}.ssl-pick{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);display:grid}.ssl-pick__list{border-right:1px solid var(--line);align-content:start;gap:10px;padding:clamp(20px,3vw,36px);display:grid}.ssl-pick__list button{all:unset;border:1px solid var(--line);cursor:pointer;border-radius:18px;align-items:center;gap:14px;padding:16px 18px;transition:border-color .25s,background-color .25s;display:flex}.ssl-pick__list button:hover{background:#ffffff08}.ssl-pick__list button[aria-selected=true]{border-color:color-mix(in srgb, var(--s2) 60%, transparent);background:color-mix(in srgb, var(--s1) 14%, transparent)}.ssl-pick__list button:focus-visible{outline:3px solid var(--cy)}.ssl-pick__ic{width:44px;height:44px;color:var(--s2);background:#ffffff0f;border-radius:13px;flex:none;place-items:center;display:grid}.ssl-pick__list strong{color:#fff;display:block}.ssl-pick__list small{color:var(--mut)}.ssl-pick__view{align-content:center;gap:20px;padding:clamp(20px,3vw,40px);animation:.4s ease-out wdx-in;display:grid}.ssl-cert{color:#0f172a;background:#f8fafc;border-radius:18px;padding:22px;box-shadow:0 30px 60px -30px #000}.ssl-cert__hd{color:#15803d;align-items:center;gap:8px;margin-bottom:14px;display:flex}.ssl-cert__hd b{color:#0f172a}.ssl-cert p{font-family:var(--hb-font-mono);background:#eef2f7;border-radius:10px;margin:6px 0;padding:8px 12px;font-size:13px}.ssl-meter{color:#475569;justify-content:space-between;align-items:center;margin-top:16px;font-size:13px;font-weight:700;display:flex}.ssl-meter div{gap:6px;display:flex}.ssl-meter i{background:#e2e8f0;border-radius:5px;width:46px;height:10px;transition:background-color .4s}.ssl-meter i.on{background:linear-gradient(90deg,#16a34a,#84cc16)}.ssl-facts{gap:10px;margin:0;display:grid}.ssl-facts div{grid-template-columns:120px 1fr;gap:10px;display:grid}.ssl-facts dt{color:var(--mut);font-size:13px;font-weight:700}.ssl-facts dd{color:#fff;margin:0}@media (max-width:980px){.ssl-pick{grid-template-columns:1fr}.ssl-pick__list{border-right:0;border-bottom:1px solid var(--line)}.ssl-wire{left:0}.ssl-seal{right:0}.ssl-hero{margin-bottom:40px}}@media (max-width:480px){.ssl-wire{width:240px}.ssl-facts div{grid-template-columns:1fr;gap:2px}}