*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:"Helvetica Neue",Arial,system-ui,sans-serif;background:#F3F2F1;color:#0B0C0C;line-height:1.4}
a{color:#1D70B8}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.cookies{background:#FFFFFF;border-bottom:1px solid #D6D3CF;font-size:14px}
.cookies .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.cookies .actions{display:flex;gap:12px}
.btn-dark{background:#0B0C0C;color:#FFFFFF;padding:6px 14px;font-weight:600}
.btn-outline{border:1px solid #0B0C0C;padding:6px 14px;font-weight:600}
.masthead{background:#0B0C0C;color:#FFFFFF;border-bottom:6px solid #5B2C6F}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:60px;width:auto;display:block}
.brand-name{display:flex;flex-direction:column;line-height:1.15}
.brand-name strong{font-size:22px;font-weight:600}
.brand-name span{font-size:13px}
.nav{display:flex;gap:24px;font-size:16px;font-weight:500;flex-wrap:wrap;align-items:center}
.nav .accounts{background:#5B2C6F;padding:8px 14px;font-weight:600}
.notice{background:#FFF4D6;border-bottom:1px solid #E8D9A8}
.notice .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.notice strong{display:block;font-size:17px;margin-bottom:4px}
.notice .test{border:2px solid #0B0C0C;padding:8px 16px;font-weight:600;font-size:15px}
.hero{background:#5B2C6F;color:#FFFFFF}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px 48px;align-items:start;padding-top:40px;padding-bottom:48px}
.hero h1{margin:0 0 16px;font-size:clamp(28px,4vw,42px);font-weight:600;line-height:1.15}
.hero p{margin:0 0 16px;font-size:19px}
.search{display:flex;background:#FFFFFF;border:3px solid #FFFFFF}
.search span{flex:1;padding:12px 14px;color:#505A5F;font-size:16px}
.search b{background:#0B0C0C;color:#FFFFFF;padding:12px 18px;font-size:15px}
.popular{background:#FFFFFF;color:#0B0C0C;padding:20px 22px}
.popular h2{margin:0 0 12px;font-size:20px}
.popular ul,.card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.popular li,.card li{color:#1D70B8;text-decoration:underline;font-size:16px}
main.wrap{padding-top:40px;padding-bottom:160px;display:flex;flex-direction:column;gap:40px}
main h2{margin:0 0 16px;font-size:26px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{padding:20px;border:1px solid #D6D3CF;background:#FFFFFF}
.card h3{margin:0 0 10px;font-size:20px;color:#5B2C6F}
.spike{border:2px dashed #5B2C6F;background:#FFFFFF;padding:20px}
.spike h2{font-size:20px;margin-bottom:8px}
.spike dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 12px;font-size:15px}
.spike dt{font-weight:600}
.spike dd{margin:0;word-break:break-word}
.spike pre{white-space:pre-wrap;word-break:break-all;background:#F3F2F1;padding:12px;font-size:13px;margin:0 0 12px}
.spike .variants{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;padding:0;list-style:none}
.spike .warning{background:#FDE8E7;border-left:6px solid #D4351C;padding:12px;font-weight:600;margin:0 0 12px}
.spike .log{font-family:ui-monospace,Menlo,monospace;font-size:13px;margin:0;padding-left:18px}
.spike .log:empty::before{content:"No CSP violations reported on this page yet.";color:#505A5F;font-family:inherit}
footer{background:#0B0C0C;color:#FFFFFF;font-size:14px}
footer .wrap{padding-top:24px;padding-bottom:24px}