/* siteupdown.com — shared styles. Dark by default, light via the theme button. System fonts only (no third-party requests). */
:root{
  --bg:#060d0a;--bg2:#0a1510;--card:#0b1712;--card2:#0f1f18;--line:#1d3a2b;--text:#e8f3ec;--muted:#8aa196;
  --green:#0dc04e;--green-ink:#03140a;--green-soft:rgba(13,192,78,.14);--red:#ff5a5f;--amber:#f5b83d;--grey:#6b7c73;
  --hard:#0a3b1f;--glow:rgba(13,192,78,.10);--dot:rgba(13,192,78,.10);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:6px;color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#f2f7f3;--bg2:#e8f0ea;--card:#ffffff;--card2:#f6faf7;--line:#c4d6ca;--text:#10201a;--muted:#55695e;
  --green:#0a9b3f;--green-ink:#ffffff;--green-soft:rgba(10,155,63,.12);--red:#d63a40;--amber:#b87a00;--grey:#7b8b82;
  --hard:#b7d9c3;--glow:rgba(10,155,63,.08);--dot:rgba(10,120,50,.12);color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.55;min-height:100vh;
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:26px 26px;overflow-x:hidden}
a{color:var(--green)}
img,svg{max-width:100%}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);color:var(--green-ink);padding:8px 12px;border-radius:var(--r);z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* header */
.site-head{border-bottom:1px dashed var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);position:sticky;top:0;z-index:30;backdrop-filter:blur(8px)}
.head-in{display:flex;align-items:center;gap:14px;min-height:68px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);min-width:0}
.brand svg{width:46px;height:auto;flex:none;color:var(--green)}
.wordmark{font-family:var(--mono);font-weight:800;letter-spacing:.14em;font-size:clamp(14px,3.6vw,20px);white-space:nowrap;text-transform:uppercase}
.nav{display:none;margin-left:auto;gap:4px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:9px 10px;border-radius:var(--r)}
.nav a[aria-current=page]{color:var(--text);background:var(--green-soft)}
.head-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.icon-btn{width:46px;height:46px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:var(--r);display:grid;place-items:center;cursor:pointer}
.icon-btn svg{width:20px;height:20px}
.signin-btn{font-family:var(--mono);font-weight:700;letter-spacing:.1em;font-size:13px;text-transform:uppercase;background:var(--green);color:var(--green-ink);border:0;border-radius:var(--r);height:46px;padding:0 16px;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;white-space:nowrap}
.avatar{width:46px;height:46px;border-radius:50%;border:2px solid var(--green);background:var(--green-soft);color:var(--green);font-weight:800;font-size:18px;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 3px var(--glow)}
.acct{position:relative}
.menu{position:absolute;right:0;top:54px;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 14px 40px rgba(0,0,0,.45);display:none;z-index:50}
.menu.open{display:block}
.menu a,.menu button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;color:var(--text);font:inherit;font-family:var(--mono);font-size:14px;padding:12px;border-radius:8px;text-decoration:none;cursor:pointer}
.menu svg{width:18px;height:18px;color:var(--green);flex:none}
.menu .who{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
@media(min-width:900px){.nav{display:flex}.head-tools{margin-left:12px}}

/* type */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 10px var(--green)}
h1,h2,h3{font-family:var(--sans);letter-spacing:-.02em;line-height:1.1;margin:0}
h1{font-size:clamp(34px,7vw,64px);font-weight:700}
h2{font-size:clamp(28px,5vw,44px);font-weight:700}
h2 .dot,h1 .dot{color:var(--green)}
h3{font-size:19px}
.lead{color:var(--muted);font-size:clamp(16px,2.4vw,19px);max-width:62ch}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
section{padding:56px 0}
.sec-head{display:grid;gap:12px;margin-bottom:26px}

/* cards, buttons, inputs */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;position:relative;box-shadow:7px 7px 0 var(--hard)}
.btn{font-family:var(--mono);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:14px;background:var(--green);color:var(--green-ink);border:0;border-radius:var(--r);min-height:52px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none;width:auto}
.btn[disabled]{opacity:.55;cursor:wait}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--green)}
.btn.small{min-height:40px;font-size:12.5px;padding:0 14px}
.btn.danger{background:var(--red);color:#fff}
.btn svg{width:18px;height:18px}
.field{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:0 14px;min-height:56px}
.field:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.field svg{width:22px;height:22px;color:var(--green);flex:none}
.field input,.field select{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font-family:var(--mono);font-size:16px;padding:14px 0}
.field input::placeholder{color:var(--muted)}
label.lbl{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.stack{display:grid;gap:14px}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.check input{appearance:none;flex:none;width:26px;height:26px;border:1px solid var(--line);border-radius:5px;background:var(--bg2);margin:2px 0 0;display:grid;place-items:center;cursor:pointer}
.check input:checked{background:var(--green);border-color:var(--green)}
.check input:checked::after{content:"";width:12px;height:7px;border-left:3px solid var(--green-ink);border-bottom:3px solid var(--green-ink);transform:rotate(-45deg) translate(1px,-1px)}
.check b{display:block}.check small{color:var(--muted)}
.note{color:var(--muted);font-size:14px}
.err{color:var(--red);font-size:15px;min-height:1.2em}
.ok{color:var(--green)}
[hidden]{display:none!important}

/* chips + status */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--mono);font-size:14px;background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:var(--r);padding:11px 16px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;text-decoration:none}
.chip[aria-pressed=true]{border-color:var(--green);color:var(--green)}
.chip.dashed{border-style:dashed;color:var(--muted)}
.pill{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:5px 11px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid currentColor}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.up{color:var(--green)}.pill.down{color:var(--red)}.pill.timeout{color:var(--amber)}.pill.inconclusive,.pill.none,.pill.pending{color:var(--grey)}
.pill.partial{color:var(--amber)}.pill.down-everywhere{color:var(--red)}.pill.blocked{color:var(--amber)}

/* hero + checker */
.hero{padding:54px 0 26px;text-align:center}
.hero h1{margin:16px 0}
.hero .lead{margin:0 auto 30px}
.checker{max-width:760px;margin:0 auto;text-align:left}
.checker .top{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.checker .top span{display:inline-flex;gap:9px;align-items:center}
.checker .top svg{width:18px;height:18px;color:var(--green)}
.live{color:var(--green)!important}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.thorough{margin:6px 0}
.assure{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:14px}
.assure svg{width:20px;height:20px;color:var(--green);flex:none}
.recent-row{max-width:760px;margin:26px auto 0;text-align:center}
.recent-row .eyebrow{margin-bottom:12px}
.recent-row .chips{justify-content:center}

/* global pulse */
.pulse-grid{display:grid;gap:22px}
@media(min-width:960px){.pulse-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.map-card{padding:14px;overflow:hidden}
.map-wrap{position:relative;aspect-ratio:1000/394;width:100%}
.map-wrap svg{width:100%;height:100%;display:block}
.map-land{fill:var(--green);opacity:.22}
.mk{cursor:pointer;transition:r .2s}
.mk.ok{fill:var(--green)}.mk.blocked{fill:var(--amber)}.mk.error{fill:var(--red)}.mk.none{fill:var(--bg);stroke:var(--grey);stroke-width:2}
.mk-ring{fill:none;stroke-width:1.6;opacity:.6;animation:ring 2.2s infinite}
.mk-ring.ok{stroke:var(--green)}.mk-ring.blocked{stroke:var(--amber)}.mk-ring.error{stroke:var(--red)}.mk-ring.none{stroke:var(--grey)}
@keyframes ring{from{r:7;opacity:.8}to{r:18;opacity:0}}
.mk-wait{fill:var(--green);opacity:.5;animation:pulse 1s infinite}
.tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-family:var(--mono);font-size:12.5px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4);transform:translate(-50%,-120%);z-index:5}
.map-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:var(--muted);font-size:15px;pointer-events:none}
.map-empty span{background:color-mix(in srgb,var(--card) 88%,transparent);padding:10px 16px;border-radius:8px;border:1px dashed var(--line)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.verdict{display:grid;gap:14px}
.verdict .big{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.stat{display:grid;grid-template-columns:1fr auto;gap:4px 12px;border-top:1px solid var(--line);padding-top:12px}
.stat dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;align-self:center}
.stat dd{margin:0;font-family:var(--mono);font-weight:700;font-size:16px;text-align:right}
.facts{display:grid;gap:6px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;word-break:break-word}
.facts b{color:var(--text)}
.row-actions{display:flex;flex-wrap:wrap;gap:10px}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.share .lbl{margin:0}
.fine{font-size:13px;color:var(--muted)}

/* watchlist grid + tables */
.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.site{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:10px;text-align:left;color:var(--text);font:inherit;cursor:pointer;text-decoration:none}
.site b{font-size:16px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site small{font-family:var(--mono);color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site .meta{display:flex;justify-content:space-between;gap:8px;align-items:center}
.site .ms{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.table-wrap{overflow-x:auto}
table.feed{width:100%;border-collapse:collapse;font-size:15px}
table.feed th{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
table.feed td{padding:13px 12px;border-bottom:1px solid var(--line);font-family:var(--mono)}
table.feed td:last-child,table.feed th:last-child{text-align:right}
table.feed a{color:var(--text);text-decoration:none}
.skeleton{color:var(--muted);font-family:var(--mono);font-size:14px;padding:18px 4px}

/* ads */
.ad{border:1px dashed var(--line);border-radius:10px;padding:18px;text-align:center;color:var(--muted);font-size:14px;min-height:96px;display:grid;place-items:center;gap:4px}
.ad small{font-family:var(--mono);letter-spacing:.2em;font-size:11px}

/* legend defs + steps */
.defs{display:grid;gap:12px}
@media(min-width:760px){.defs{grid-template-columns:repeat(4,1fr)}}
.def{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:10px;align-content:start}
.steps{display:grid;gap:16px}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px}
.step .n{font-family:var(--mono);font-size:13px;color:var(--green);letter-spacing:.18em}
.step h3{margin:10px 0 8px}
.step p{margin:0;color:var(--muted)}

/* footer */
.site-foot{border-top:1px dashed var(--line);padding:42px 0 30px;margin-top:30px}
.foot-brand{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.foot-brand svg{width:40px;color:var(--green)}
.socials{display:flex;gap:12px;margin:18px 0}
.socials a{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--text)}
.socials svg{width:20px;height:20px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0;font-family:var(--mono);font-size:13px}
.foot-links a,.foot-links button{color:var(--muted);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:6px 0}

/* cookie banner */
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:760px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;box-shadow:7px 7px 0 var(--hard),0 20px 50px rgba(0,0,0,.5);z-index:80}
.cookie h3{display:flex;gap:10px;align-items:center;margin-bottom:8px}.cookie h3 svg{width:22px;color:var(--green)}
.cookie p{margin:0 0 14px;color:var(--muted)}
.cookie .btns{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.cookie .btns .wide{grid-column:1/-1}
.cookie .btn{min-height:48px;font-size:12.5px}
.cookie .opts{display:grid;gap:12px;margin:0 0 14px}
@media(min-width:700px){.cookie{left:20px;bottom:20px}}

/* auth + account pages */
.narrow{max-width:520px;margin:0 auto}
.page{padding:44px 0 20px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.seg button{background:transparent;border:0;color:var(--muted);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:13px;min-height:50px;cursor:pointer}
.seg button[aria-selected=true]{background:var(--green);color:var(--green-ink);font-weight:700}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:6px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;font-size:15px}
.links a,.links button{color:var(--green);background:none;border:0;font:inherit;cursor:pointer;padding:6px 0;text-decoration:none}
#gbtn{display:flex;justify-content:center;min-height:44px}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:14px 16px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--green);border-bottom-color:var(--green)}
.list{display:grid;gap:10px}
.item{display:grid;gap:10px;grid-template-columns:1fr auto;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.item .t{min-width:0}.item .t b{display:block;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
.item .t small{color:var(--muted)}
.item .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.empty{border:1px dashed var(--line);border-radius:10px;padding:34px 18px;text-align:center;color:var(--muted)}
.danger-zone{border-color:color-mix(in srgb,var(--red) 55%,var(--line))}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--green);color:var(--green-ink);font-family:var(--mono);font-weight:700;padding:12px 18px;border-radius:var(--r);z-index:120;max-width:90vw}
.toast.bad{background:var(--red);color:#fff}
.prose{max-width:760px}.prose h2{font-size:26px;margin:34px 0 10px}.prose p,.prose li{color:var(--muted)}.prose ul{padding-left:20px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
section[id],[id=global-pulse]{scroll-margin-top:84px}
@media(max-width:560px){.mk,.mk-ring{r:9}.wrap{padding:0 14px}}
@media(max-width:640px){.item{grid-template-columns:1fr}.item .acts{justify-content:flex-start}.tools{align-items:flex-start}}

.field .eye{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center}
.field .eye svg{width:20px;height:20px;color:inherit}
.field .eye:focus-visible{color:var(--green);outline:0}
.field input[type=password],.field input{caret-color:var(--green)}
.facts .xt{display:grid;gap:4px;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}

/* friendlier sign-in (GoUnscramble style) */
.lg-head{margin-bottom:18px}
.lg-head h1{font-size:clamp(30px,6vw,40px);margin:0 0 10px;text-align:left}
.lg-head .lead{font-size:16px;text-align:left;margin:0}
.lg-card{background:none;border:0;padding:0;box-shadow:none}
.lg-card .stack{gap:16px}
.fl{display:grid;gap:6px}
.fl>span{font-size:14px;font-weight:600;color:var(--text)}
.lg-card .field{min-height:50px;padding:0 14px}
.lg-card .field input{font-family:inherit;font-size:16px}
.lg-card .btn{font-family:inherit;letter-spacing:.02em;text-transform:none;font-size:16px;min-height:50px}
#gwrap{gap:14px;margin-bottom:18px;justify-items:center}
#gwrap .or{width:100%;font-family:inherit;letter-spacing:.02em;text-transform:none;font-size:14px}
.err:empty{display:none}
.lg-card .links{justify-content:center}
.lg-card .links a{text-decoration:underline;color:var(--text)}
.alt{text-align:center;font-size:15px;margin:0}
.alt a{color:var(--text);font-weight:600;text-decoration:underline}
.field .eye{font-family:inherit;font-size:13px;font-weight:600;padding:6px 12px;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--text)}
.seg[hidden]{display:none}
#gbtn{color-scheme:light;background:transparent;border-radius:999px;overflow:hidden;line-height:0}
#gbtn iframe{color-scheme:light;background:transparent}

/* ===== original look (fonts, header, hero, pulse card, lists, charts) ===== */
:root{--bg:#050805;--bg2:#091009;--card:#080f09;--card2:#0c150d;--line:#16301c;--text:#eaf4ec;--muted:#86a08c;--green:#39b54a;--green-soft:rgba(57,181,74,.14);--dot:rgba(57,181,74,.09);--hard:#0b2412;
  --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
:root[data-theme=light]{--bg:#f3f8f3;--bg2:#e9f1ea;--card:#ffffff;--card2:#f5faf5;--line:#c6d8ca;--text:#0f1f14;--muted:#52665a;--green:#2a8f3a;--green-soft:rgba(42,143,58,.12);--dot:rgba(30,110,45,.12);--hard:#cfe3d3}
.site-head{border-bottom:1px dashed var(--line)}
.head-in{min-height:96px;gap:20px}
.brand{gap:16px}.brand svg{width:50px;height:auto}
.wordmark{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;text-transform:none;font-size:clamp(18px,3.4vw,26px)}
.nav{gap:2px}.nav a{font-family:var(--mono);text-transform:none;letter-spacing:.02em;font-size:12.5px;color:var(--muted)}
.foot-brand svg{width:40px;height:auto}.foot-brand .wordmark{font-size:22px}
.hero{padding:46px 0 22px;position:relative;overflow:hidden}
.rings{position:absolute;right:-60px;top:20px;width:520px;max-width:none;fill:none;stroke:var(--line);stroke-width:1;opacity:.7;pointer-events:none}
.hero .wrap{position:relative}
.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--green)}
.hero h1{font-size:clamp(32px,5.4vw,52px);margin:18px 0 12px}
.hl{color:var(--green);text-decoration:underline dashed;text-decoration-thickness:2px;text-underline-offset:9px}
.hero .lead{font-size:16px;max-width:640px}
.checker{max-width:940px;border-color:var(--line);padding:22px 22px 18px;box-shadow:5px 5px 0 var(--hard)}
.checker .top{align-items:center;margin-bottom:16px}
.checker .top em{font-style:normal;color:var(--muted)}
.chk-row{display:flex;gap:14px;align-items:stretch}
.chk-row .field{flex:1;min-height:68px;border-color:var(--green)}
.chk-row .btn{min-width:230px;min-height:68px;font-size:13px}
.chk-foot{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.chk-foot .thorough{margin:0}.chk-foot .assure{margin:0;font-size:13px}
.checker .err:empty{display:none}
.try-row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:26px}
.try-row .eyebrow{color:var(--muted);font-size:11px}
.chip{border-radius:6px;padding:9px 14px;font-size:13px}.chip .ne{font-size:12px;opacity:.8}
.rule-note{display:flex;align-items:center;gap:16px;justify-content:center;color:var(--muted);font-size:13px;margin:24px 0 0}
.rule-note::before,.rule-note::after{content:"";width:60px;border-top:1px dashed var(--line)}
@media(max-width:700px){.chk-row{flex-direction:column}.chk-row .btn{min-width:0;width:100%;min-height:56px}.rings{display:none}}
/* pulse card */
.pulse-card{padding:0;box-shadow:none;overflow:hidden}
.pc-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:26px 26px 20px;flex-wrap:wrap}
.pc-head h2{font-size:clamp(24px,3.4vw,34px);margin:12px 0 10px}
.pc-head .lead{font-size:15px;max-width:720px;margin:0}
.pc-actions{display:flex;gap:10px;align-items:center}.pc-actions.col{flex-direction:column;align-items:flex-end}
.statchip{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:8px 14px;display:inline-flex;gap:9px;align-items:center;color:var(--muted)}
.statchip i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.strip{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .cell{padding:18px 22px;border-right:1px solid var(--line);display:grid;gap:5px;align-content:start;min-width:0}
.strip .cell:last-child{border-right:0}
.strip .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.strip b{font-size:20px;line-height:1.2;word-break:break-word}
.strip small{color:var(--muted);font-size:12px}
.strip .cell.wide b{font-size:19px}
@media(max-width:820px){.strip{grid-template-columns:1fr 1fr}.strip .cell.wide{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}.strip .cell:nth-child(3){border-right:0}}
.pulse-card .map-card{padding:18px 22px 6px;border:0;box-shadow:none;background:none}
.details{padding:6px 22px 22px;display:grid;gap:14px}

.facts{display:grid;gap:4px;font-size:14px;color:var(--muted)}.facts b{color:var(--text)}
.row-actions{display:flex;gap:10px;flex-wrap:wrap}
.share{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* charts */
.charts{display:grid;gap:18px;margin-top:20px}
@media(min-width:900px){.charts{grid-template-columns:1.3fr 1fr 1fr}}
.chart{padding:20px;box-shadow:none}.chart h3{font-size:18px;margin-bottom:4px}.chart .fine{margin:0 0 14px}
.ch-empty{color:var(--muted);font-family:var(--mono);font-size:12.5px;border:1px dashed var(--line);border-radius:8px;padding:34px 14px;text-align:center}
.bars{display:grid;gap:7px}
.br{display:grid;grid-template-columns:34px 1fr 74px;gap:10px;align-items:center;font-family:var(--mono);font-size:12px}
.br .bl{color:var(--muted)}.br .bt{height:12px;background:var(--bg2);border-radius:3px;overflow:hidden;display:block}.br .bt i{display:block;height:100%;border-radius:3px}.br .bv{text-align:right}
.donut{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut svg{width:150px;height:150px;flex:none}.dn{font-family:var(--sans);font-weight:700;font-size:22px;fill:var(--text)}.dl{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.donut ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px;flex:1;min-width:130px}
.donut li{display:flex;gap:8px;align-items:center}.donut li i{width:10px;height:10px;border-radius:2px;flex:none}.donut li b{margin-left:auto;font-family:var(--mono)}
.range .track{position:relative;height:10px;background:var(--bg2);border-radius:5px;margin:46px 8px 26px}
.range .span{position:absolute;top:0;bottom:0;background:var(--green);opacity:.45;border-radius:5px}
.range .pin{position:absolute;top:-38px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;text-align:center;line-height:1.3;white-space:nowrap}
.range .pin b{display:block;color:var(--muted);font-weight:500}
.range .pin::after{content:"";position:absolute;left:50%;top:30px;width:2px;height:16px;background:var(--text)}
.range .pin.srv{top:18px}.range .pin.srv::after{top:-4px;height:14px;background:var(--amber)}
.range dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0;border-top:1px solid var(--line);padding-top:12px;font-size:13px}
.range dt{color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.range dd{margin:0;font-family:var(--mono);font-weight:700;text-align:right}
/* top websites + gaming rows */
.toplist{padding:0;box-shadow:none}.toplist .pc-head{padding-bottom:16px}.toplist .fine{padding:0}
.toplist #top-updated{padding:0 26px 22px;margin:0}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg2 button{background:none;border:0;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.seg2 button[aria-pressed=true]{background:var(--green);color:var(--green-ink);font-weight:700}
.rows{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:900px){.rows{grid-template-columns:1fr 1fr}.rows .row:nth-child(odd){border-right:1px solid var(--line)}}
#g-grid.rows{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.row .rl{min-width:0;display:grid;gap:5px}.row .rl b{font-size:15.5px}
.row .st{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.row .st i{width:9px;height:9px;border-radius:2px;background:var(--green);flex:none;align-self:center}
.row .st em{font-style:normal;font-family:var(--mono);font-size:11.5px;opacity:.8}
.row.warn .st i{background:var(--amber)}.row.bad .st i{background:var(--amber)}.row.none .st i{background:var(--grey)}
.row.bad{background:rgba(245,184,61,.07)}
.row .rr{display:grid;gap:8px;justify-items:end;flex:none}
.row .code{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.row .go{width:40px;height:40px;border-radius:6px;background:var(--bg2);border:1px solid var(--line);color:var(--text);font-size:16px;cursor:pointer}
.toplist .skeleton,#g-grid .skeleton{grid-column:1/-1;padding:22px}

.br{grid-template-columns:34px 1fr 78px}.br .bv{white-space:nowrap}
.range .track{margin:40px 8px 22px}
.range .pin::after{top:30px}
.range .tick{position:absolute;top:-5px;width:3px;height:20px;background:var(--amber);border-radius:2px;transform:translateX(-50%)}
.range dt.srv{color:var(--amber)}
.row .code{text-transform:none}

/* exact colours of the original siteupdown.com (dark theme) */
:root:not([data-theme=light]){--bg:#050805;--bg2:#0a110c;--card:#070f0a;--card2:#0a110c;--line:#1d2b22;--text:#eaf4ec;--muted:#a1b4a8;--green:#39b54a;--green-ink:#04120a;--green-soft:rgba(57,181,74,.14);--hl:#4ec962;--dot:rgba(140,185,150,.09);--hard:#0d2014;--glow:rgba(57,181,74,.10)}
:root[data-theme=light]{--hl:#2a8f3a}
.site-head{background:rgba(5,8,5,.88)}
:root[data-theme=light] .site-head{background:rgba(243,248,243,.9)}
.hl,h1 .dot,h2 .dot{color:var(--hl)}
.hl{text-decoration-color:var(--hl)}
/* no layout jump while Google's button loads */
#gbtn{min-height:44px;width:100%;display:flex;justify-content:center;align-items:center}
#gwrap[hidden]{display:none}
/* cookie popup like the original: compact, centred at the bottom */
.cookie{left:50%;right:auto;transform:translateX(-50%);width:min(460px,calc(100% - 24px));bottom:18px;padding:16px;box-shadow:4px 4px 0 var(--hard),0 16px 40px rgba(0,0,0,.55)}
.cookie h3{font-size:15px}.cookie p{font-size:13px;margin-bottom:12px}
.cookie .btns{grid-template-columns:repeat(3,1fr);gap:8px}
.cookie .btns .wide{grid-column:auto}
.cookie .btn{min-height:42px;font-size:10.5px;padding:0 8px;letter-spacing:.08em}
@media(max-width:420px){.cookie .btns{grid-template-columns:1fr 1fr}.cookie .btns .wide{grid-column:1/-1}}

/* account + monitor use the same card layout as the home page */
.toplist .pad{padding:4px 26px 26px}
.toplist .tabs{padding:0 14px;border-top:1px solid var(--line);margin:0}
.toplist .tabs button{padding:14px 12px}
.toplist .list{display:grid;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.toplist .item{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:16px 22px}
.toplist .item:last-child{border-bottom:0}
.toplist .item .t b{font-family:var(--sans);font-size:15.5px}
.toplist .item .t small{font-size:13px}
.toplist .skeleton{padding:22px}
.toplist #m-add{margin-top:6px}
.toplist .pad>.card{box-shadow:none}
.toplist .card.stack{background:var(--card2)}
.stack>*,.toplist .pad>*{min-width:0}
.toplist .pad{box-sizing:border-box;max-width:100%}
.field input{min-width:0;width:100%}
@media(max-width:560px){.toplist .pad{padding:4px 14px 18px}.pc-head{padding:20px 16px 14px}.row{padding:14px 16px}.toplist .item{padding:14px 16px}.toplist .tabs{padding:0 6px}}

/* logo: dino mark + wordmark that follows the theme */
.brand{gap:14px}
.logo-mark{height:52px;width:auto;flex:none}
.wm{height:26px;width:auto;display:block}
.wm-l{display:none}
:root[data-theme=light] .wm-d{display:none}:root[data-theme=light] .wm-l{display:block}
:root:not([data-theme=light]) .logo-mark{filter:drop-shadow(0 0 1px rgba(234,244,236,.6))}
.foot-brand{display:flex;align-items:center;gap:12px}.foot-brand .logo-mark{height:40px}.foot-brand .wm{height:22px}
@media(max-width:520px){.logo-mark{height:42px}.wm{height:20px}}
.wm{height:30px}@media(max-width:520px){.wm{height:22px}}
.site-head .wm{height:22px}@media(max-width:520px){.site-head .wm{height:17px}}

/* SSL certificate card */
.ssl{border:1px solid var(--line);border-radius:10px;padding:18px 20px;display:grid;gap:12px;background:var(--card2)}
.ssl .sh{display:flex;justify-content:space-between;gap:12px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.ssl .bd{font-size:11px;letter-spacing:.12em;padding:6px 12px;border-radius:6px;border:1px solid currentColor}
.ssl .bd.ok{color:var(--green);background:var(--green-soft)}.ssl .bd.warn{color:var(--amber)}.ssl .bd.bad{color:var(--red)}.ssl .bd.none{color:var(--grey)}
.ssl .note{margin:0;color:var(--muted);font-size:14px}
.ssl .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ssl .g1{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-top:1px solid var(--line);padding-top:12px}
.ssl .g1 .k{margin:0}.ssl .g1 b{font-family:var(--mono);font-size:17px;word-break:break-all;text-align:right}
.ssl .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.ssl .c{border-top:1px solid var(--line);padding:12px 0;min-width:0}.ssl .c b{font-size:16px;word-break:break-word;font-family:var(--mono)}
.ssl .c b em{font-style:normal;font-size:12.5px;color:var(--muted);font-weight:400}.ssl .c small{font-size:11.5px;word-break:break-all}
.ssl .badt{color:var(--red)}
.ssl .fpr{border-top:1px solid var(--line);padding-top:12px}.ssl .fpr code{font-family:var(--mono);font-size:12px;word-break:break-all;line-height:1.6}
.ssl .vw{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px;font-size:13px}.ssl .vw>div:first-child{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted)}
.ssl .bar{height:9px;border-radius:5px;background:var(--bg2);overflow:hidden}.ssl .bar i{display:block;height:100%;background:var(--green);border-radius:5px}
.ssl .sans{border-top:1px solid var(--line);padding-top:12px}.ssl .sans summary,.dl summary{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.ssl .sans p{color:var(--muted);font-size:13px;word-break:break-word;margin:10px 0 0}
.ssl .chain{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:10px}
.ssl .ch{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:start}.ssl .ch i{width:10px;height:10px;border-radius:50%;background:var(--grey);margin-top:6px}.ssl .ch i.lf{background:var(--green)}
.ssl .ch b{display:block;font-size:14.5px;font-weight:500}.ssl .ch small{color:var(--muted);font-size:12.5px}.ssl .ch>span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dl{border:1px solid var(--line);border-radius:10px;padding:14px 18px}.dl summary{display:flex;justify-content:space-between;gap:10px;list-style:none}.dl summary span{color:var(--muted);letter-spacing:.06em;text-transform:none;font-size:12.5px}
.dl summary::-webkit-details-marker{display:none}.dl .dlb{display:grid;gap:4px;margin-top:12px;font-size:14px;color:var(--muted)}.dl .dlb b{color:var(--text)}
.details .facts{border:0;padding:0}
@media(max-width:560px){.ssl .grid2{grid-template-columns:1fr 1fr;gap:0 16px}.ssl .g1{flex-direction:column;gap:4px}.ssl .g1 b{text-align:left}}

/* country codes with a name on hover / tap */
abbr[data-n]{text-decoration:underline dotted var(--muted);text-underline-offset:3px;cursor:help;position:relative;outline:0}
abbr[data-n]:focus::after{content:attr(data-n);position:absolute;left:0;bottom:calc(100% + 6px);background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-family:var(--sans);font-size:12.5px;white-space:nowrap;z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.4)}
/* tidier share area */
.details .row-actions{gap:10px}
.share{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.sbtns{display:flex;gap:10px;flex-wrap:wrap}
.sb{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:44px;height:44px;padding:0 12px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);color:var(--text);cursor:pointer;font:inherit;font-size:14px}
.sb svg{width:19px;height:19px;color:var(--green);flex:none}
.sb:focus-visible{border-color:var(--green);outline:0}
.sb.wide{padding:0 16px}
.sb[hidden]{display:none}
/* SSL tag in list rows */
.sslt{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.sslt.warn{color:var(--amber)}.sslt.bad{color:var(--red)}.sslt.none{color:var(--grey)}
.share[hidden]{display:none}

/* Gentle live flashing: status pills, row dots, the live/complete dot. Switched off for reduced-motion users. */
@keyframes blinkdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}
@keyframes glowg{0%,100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}50%{box-shadow:0 0 14px 1px rgba(63,185,80,.55)}}
@keyframes glowr{0%,100%{box-shadow:0 0 0 0 rgba(255,85,85,0)}50%{box-shadow:0 0 16px 2px rgba(255,85,85,.65)}}
@keyframes glowa{0%,100%{box-shadow:0 0 0 0 rgba(240,170,40,0)}50%{box-shadow:0 0 14px 1px rgba(240,170,40,.55)}}
.pill::before{animation:blinkdot 1.4s ease-in-out infinite}
.pill.up{animation:glowg 2.4s ease-in-out infinite}
.pill.down,.pill.down-everywhere{animation:glowr 1.2s ease-in-out infinite}
.pill.down::before,.pill.down-everywhere::before{animation-duration:.8s}
.pill.partial,.pill.timeout,.pill.blocked{animation:glowa 1.8s ease-in-out infinite}
.pill.pending::before,.pill.none::before,.pill.inconclusive::before{animation:none}
.eyebrow i,.row .st i{animation:blinkdot 2.2s ease-in-out infinite}
.row.down .st i{animation-duration:.9s}

/* sign-in: the Google slot keeps one fixed size whether it is loading, loaded or failed, so nothing moves */
#gbtn{height:44px;min-height:44px;overflow:hidden}
#gbtn.gfail{font-size:14px;color:var(--muted);border:1px dashed var(--line);border-radius:999px;line-height:1.2;padding:0 14px;text-align:center}
#gwrap{gap:12px}
#g-err:empty{display:none}

/* smaller hero text on phones */
@media(max-width:640px){
.hero h1{font-size:clamp(26px,7.4vw,32px)}
.hero .lead{font-size:14px;line-height:1.55;max-width:34ch}
.hero .eyebrow{font-size:11px;letter-spacing:.12em}
}

/* ===== status page, uptime, alerts, DNS card ===== */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.stat{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card)}
.stat .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.stat b{font-size:22px;font-weight:700}
.seg2{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.seg2 button{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.seg2 button[aria-selected=true]{color:var(--green);border-color:var(--green)}
.upbar{display:flex;gap:2px;height:44px;align-items:stretch}
.upbar i{flex:1;border-radius:2px;background:var(--line);min-width:2px}
.upbar i.up{background:var(--green)}.upbar i.down{background:var(--red)}.upbar i.partial{background:var(--amber)}
.upleg{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px}
.sh3{font-size:15px;margin:24px 0 10px}
.lc{width:100%;height:150px;display:block}
.lc .ax{stroke:var(--line);stroke-width:1}
.lc .ln{fill:none;stroke:var(--green);stroke-width:2;vector-effect:non-scaling-stroke}
.lc .ar{fill:var(--green);opacity:.12;stroke:none}
.inc{display:grid;gap:8px}
.inc>div{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:8px;padding:10px 14px;background:var(--card)}
.inc small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.btn.bell.on{color:var(--green);border-color:var(--green)}
.dnsc .grid2 b{font-size:14px;word-break:break-word;font-weight:600}
.dnsc .note b.badt,.dnsc .note .badt{color:var(--red)}
@media(max-width:640px){.stat-row{grid-template-columns:repeat(2,1fr)}.stat b{font-size:19px}}

/* hero: text sits in front of the rings; the green square flashes */
.rings{z-index:0}
.hero .wrap{z-index:1}
.rings rect{animation:blinksq 1.1s ease-in-out infinite}
@keyframes blinksq{0%,100%{opacity:1}50%{opacity:.1}}
.hero .wrap>*:not(.rings){position:relative;z-index:1}
.site-head .wm{height:27px}@media(max-width:520px){.site-head .wm{height:21px}}

/* full logo (green S tile + stacked name), theme-aware */
.lf{height:48px;width:auto;display:block}
.lf-l{display:none}
:root[data-theme=light] .lf-d{display:none}:root[data-theme=light] .lf-l{display:block}
.foot-brand .lf{height:44px}
@media(max-width:520px){.lf{height:38px}.foot-brand .lf{height:38px}}
.brand{gap:0}

/* deep-blue preview from the logo (?navy=1) */
:root.navy:not([data-theme=light]){--bg:#130228;--bg2:#1b0a38;--card:#170633;--card2:#1d0b3d;--line:#33205a;--text:#eef0f6;--muted:#a79fc4;--dot:rgba(170,150,230,.10);--hard:#0d0120;--glow:rgba(57,181,74,.08)}
:root.navy:not([data-theme=light]) .site-head{background:rgba(19,2,40,.92)}
.site-head .lf{height:56px}@media(max-width:520px){.site-head .lf{height:44px}}

/* ===== navy theme (from the new logo) is now the dark theme ===== */
:root:not([data-theme=light]){--bg:#130228;--bg2:#1b0a38;--card:#170633;--card2:#1d0b3d;--line:#33205a;--text:#eef0f6;--muted:#a79fc4;--green:#3cb54b;--hl:#52cc62;--green-ink:#130228;--green-soft:rgba(60,181,75,.16);--dot:rgba(170,150,230,.10);--hard:#0f7c43;--glow:rgba(60,181,75,.10)}
:root:not([data-theme=light]) .site-head{background:rgba(19,2,40,.92)}
:root:not([data-theme=light]) .btn{box-shadow:none}
:root:not([data-theme=light]) .checker,:root:not([data-theme=light]) .card{box-shadow:4px 4px 0 rgba(15,124,67,.35)}

/* darker navy: page is deeper than the logo, cards use the logo colour #130228 */
:root:not([data-theme=light]){--bg:#0b0119;--bg2:#130228;--card:#130228;--card2:#170633;--line:#2b1a52}
:root:not([data-theme=light]) .site-head{background:rgba(11,1,25,.94)}

/* logo 20% smaller */
.site-head .lf{height:45px}.foot-brand .lf{height:35px}
@media(max-width:520px){.site-head .lf{height:35px}.foot-brand .lf{height:30px}}

/* flatter cards; only the main checker keeps the chunky offset shadow */
.card,:root:not([data-theme=light]) .card{box-shadow:none}
.checker,:root:not([data-theme=light]) .checker{box-shadow:5px 5px 0 rgba(15,124,67,.5)}
:root[data-theme=light] .checker{box-shadow:5px 5px 0 var(--hard)}

/* speed test */
.sp-top{display:flex;gap:20px;align-items:center;margin-bottom:8px}
.sp-h{font-size:26px;margin:0 0 6px}
.grade{flex:none;width:92px;height:92px;border-radius:14px;display:grid;place-items:center;align-content:center;border:2px solid var(--green);color:var(--green);background:var(--green-soft)}
.grade b{font-size:46px;line-height:1}.grade span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.grade.gC{border-color:var(--amber);color:var(--amber);background:rgba(240,170,40,.12)}
.grade.gD,.grade.gE{border-color:var(--red);color:var(--red);background:rgba(255,85,85,.12)}
.wf{display:grid;gap:8px}
.wr{display:grid;grid-template-columns:150px 1fr 70px;gap:12px;align-items:center;font-size:14px}
.wr .wl{color:var(--muted)}.wr b{text-align:right;font-family:var(--mono);font-size:13px}
.wt{height:14px;background:var(--bg2);border-radius:4px;overflow:hidden;display:block}
.wt i{display:block;height:100%;border-radius:4px;background:var(--green)}
.wt i.dns{background:#6c8cff}.wt i.con{background:#a77bff}.wt i.tls{background:#e7a53a}.wt i.wait{background:var(--green)}.wt i.dl{background:#2ec4b6}
.tips{margin:0;padding-left:20px;display:grid;gap:8px}
@media(max-width:560px){.wr{grid-template-columns:1fr 70px}.wr .wt{grid-column:1/3;grid-row:2}.sp-top{flex-direction:column;align-items:flex-start}}
#sp-out .stat b{font-size:18px;line-height:1.3}

/* move the home content up a little */
.hero{padding-top:22px}
@media(max-width:640px){.hero{padding-top:6px}.hero h1{margin-top:10px}}

/* tools section */
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tool{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--card);color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s}
.tool .ti{font-size:24px;line-height:1}.tool h3{font-size:17px;margin:6px 0 0}.tool p{margin:0;color:var(--muted);font-size:14.5px;flex:1}
.tool .tgo{font-family:var(--mono);font-size:12px;color:var(--green);margin-top:8px}
@media(max-width:900px){.tools-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tools-grid{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0 18px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-family:var(--mono);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 16px;color:var(--muted)}

/* cookie popup: white card in both themes so it stands out from the navy page */
.cookie{--card:#ffffff;--card2:#f3f6f4;--line:#d5ddd8;--text:#0f1f14;--muted:#4a5d52;--green:#1f8a30;--green-ink:#ffffff;--hl:#1f8a30;--hard:#1a0838;background:#fff;color:#0f1f14;border-color:#d5ddd8;box-shadow:4px 4px 0 var(--hard),0 16px 40px rgba(0,0,0,.55)}
.cookie h3{color:#0f1f14}
.cookie .btn.ghost{background:#fff;color:#0f1f14;border:1px solid #9fb0a6}

/* help centre */
.prose code{font-family:var(--mono);font-size:.88em;background:var(--green-soft);color:var(--text);padding:2px 6px;border-radius:5px;border:1px solid var(--line)}
.prose.article,.prose.helphub{max-width:820px}
.prose h1{line-height:1.12}
.prose .lead{font-size:19px;color:var(--text)}
.prose ol{padding-left:22px}.prose ol li,.prose ul li{margin-bottom:8px}
.prose b{color:var(--text)}
.prose a{color:var(--hl,var(--green))}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.crumbs a{color:var(--muted)}
.cta-box{margin:34px 0 8px;padding:20px 22px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.cta-box b{font-size:18px}.cta-box p{margin:6px 0 14px}
.hgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.hcat{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:20px 22px}
.hcat h2{font-size:21px;margin:0 0 6px}.hcat p{margin:0 0 12px;font-size:15px}
.hcat ul{list-style:none;padding:0;margin:0}.hcat li{margin:0 0 9px;line-height:1.4}
@media(max-width:700px){.hgrid{grid-template-columns:1fr}.prose table{font-size:14px}}
.prose.article h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.01em}
.prose a.btn{color:var(--green-ink);text-decoration:none}

/* "Is X down?" pages and directory */
.sp-card{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:18px 20px;margin:12px 0}
.sp-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sp-msg{color:var(--text);font-size:17px;flex:1 1 280px}
.sp-pill{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.sp-pill.up{color:var(--green);border-color:var(--green);background:var(--green-soft);animation:flash 2.4s ease-in-out infinite}
.sp-pill.down{color:#ff6b6b;border-color:#ff6b6b;background:rgba(255,80,80,.12)}
.sp-pill.slow{color:#ffb454;border-color:#ffb454;background:rgba(255,180,84,.12)}
.sp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.sp-stats:empty{display:none}
.sp-stat{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.sp-stat span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sp-stat b{font-size:18px;color:var(--text)}
.sp-rhead{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.sp-rhead b{font-size:17px;color:var(--text)}
.sp-level{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sp-level.raised{color:#ffb454}.sp-level.high{color:#ff6b6b}
.sp-chart{display:flex;align-items:flex-end;gap:3px;height:110px;border-bottom:1px solid var(--line)}
.sp-chart .bar{flex:1;background:var(--line);border-radius:3px 3px 0 0;min-height:4px}
.sp-chart .bar.has{background:var(--green)}
.sp-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px}
.sp-kinds{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sp-kinds span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted)}
.sp-report{margin-top:16px}
.sp-rpick{margin-top:12px}.sp-rpick p{margin:0 0 8px;color:var(--text)}
.sp-rbtns{display:flex;gap:8px;flex-wrap:wrap}
.rk{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--green);border:1px solid var(--green);border-radius:6px;padding:10px 14px;cursor:pointer}
.sp-rmsg{margin:10px 0 0;color:var(--text);min-height:1.2em}
.sitepage .btn.ghost{margin-left:6px}
.dgroup{margin-top:28px}.dgroup h2{font-size:22px;margin:0 0 10px}
.dgroup ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 18px}
.dgroup li{display:flex;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);margin:0}
.dgroup li a{font-weight:600}.dgroup .rep{margin-left:auto;font-size:12px;color:#ffb454;font-family:var(--mono)}
.dot-s{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.dot-s.up{background:var(--green)}.dot-s.down{background:#ff6b6b}.dot-s.slow{background:#ffb454}.dot-s.unsure{background:var(--muted)}
.sp-find{width:100%;max-width:420px;margin-top:22px;padding:12px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit}
#sp-top ul{list-style:none;padding:0;margin:8px 0 0}#sp-top li span{color:var(--muted);margin-left:8px}
.sr{position:absolute;left:-9999px}
@media(max-width:800px){.sp-stats{grid-template-columns:1fr 1fr}.dgroup ul{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.dgroup ul{grid-template-columns:1fr}}
.prose a.btn.ghost{color:var(--green)}
.tile{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:hsl(var(--h) 45% 28%);color:#fff;font-weight:700;font-size:14px;margin-right:9px;flex:none;vertical-align:middle;border:1px solid hsl(var(--h) 45% 42%)}
.sp-h1{display:flex;align-items:center;gap:14px}.sp-h1 .tile{width:48px;height:48px;font-size:26px;border-radius:12px;margin:0}
.dgroup li .tile{width:22px;height:22px;font-size:12px;margin-right:0;border-radius:6px}
@media(max-width:520px){.sp-h1 .tile{width:38px;height:38px;font-size:20px}}
.nav a{white-space:nowrap}
@media(min-width:900px) and (max-width:1120px){.nav a{padding:9px 6px;font-size:11.5px;letter-spacing:0}}
.row .rl b{display:flex;align-items:center}
.sp-chart.small{height:56px;margin:10px 0 12px}
.rep-box{margin-top:14px}

/* hover effects only on devices that really hover, so buttons do not stay highlighted after a tap */
@media (hover:hover){
.nav a:hover{color:var(--text);background:var(--green-soft)}
.icon-btn:hover{border-color:var(--green)}
.menu a:hover,.menu button:hover{background:var(--green-soft)}
.btn:hover{filter:brightness(1.08)}
.chip:hover{border-color:var(--green);color:var(--green)}
.site:hover{border-color:var(--green)}
table.feed a:hover{color:var(--green)}
.socials a:hover{border-color:var(--green);color:var(--green)}
.foot-links a:hover,.foot-links button:hover{color:var(--green)}
.links a:hover,.links button:hover{text-decoration:underline}
.field .eye:hover{color:var(--green);outline:0}
.row .go:hover{border-color:var(--green);color:var(--green)}
abbr[data-n]:hover::after{content:attr(data-n);position:absolute;left:0;bottom:calc(100% + 6px);background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-family:var(--sans);font-size:12.5px;white-space:nowrap;z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sb:hover{border-color:var(--green);outline:0}
:root:not([data-theme=light]) .btn:not(.ghost):hover{background:#4cc85a}
.btn.ghost:hover{background:var(--green-soft)}
.tool:hover{border-color:var(--green);transform:translateY(-2px)}
.prose a.btn:hover{color:var(--green-ink);text-decoration:none}
.rk:hover{background:var(--green-soft)}
.prose a.btn.ghost:hover{color:var(--green)}
}