/* mAIb Tools — premium design system. Electric cyan on navy-black, tuned to the
   mAIb brain logo. Aurora lighting, kinetic hero, glass nav, GPU-only motion,
   reduced-motion aware. Self-hosted Syne (display) + Inter (UI). */

@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Syne';font-weight:700;font-display:swap;src:url('/fonts/syne-700.woff2') format('woff2')}
@font-face{font-family:'Syne';font-weight:800;font-display:swap;src:url('/fonts/syne-800.woff2') format('woff2')}

:root{
  --accent:#22d3ee; --accent-rgb:34,211,238; --accent2:#6366f1; --accent3:#38bdf8;
  --bg:#05080f; --bg2:#03060c;
  --surface:#0a1020; --surface-2:#0c1424; --card:rgba(15,24,44,.55);
  --line:rgba(120,190,230,.10); --line-2:rgba(120,190,230,.20);
  --ink:#eaf2fb; --mut:#93a4bd; --faint:#5f7188;
  --fd:'Syne',system-ui,sans-serif; --fu:'Inter',system-ui,-apple-system,sans-serif;
  --shadow:0 20px 56px -24px rgba(0,0,0,.8);
  --maxw:1100px;
}
[data-theme="light"]{
  --accent:#0891b2; --accent-rgb:8,145,178; --accent2:#4f46e5; --accent3:#0ea5e9;
  --bg:#f2f7fb; --bg2:#e7eef6;
  --surface:#ffffff; --surface-2:#f4f8fc; --card:#ffffff;
  --line:#e3eaf2; --line-2:#d2dde9;
  --ink:#0e1b2d; --mut:#52647c; --faint:#8696ac;
  --shadow:0 18px 44px -22px rgba(20,40,70,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fu);color:var(--ink);font-size:16px;line-height:1.6;min-height:100vh;
  background:
    radial-gradient(820px 480px at 80% -6%,rgba(var(--accent-rgb),.18),transparent 60%),
    radial-gradient(680px 460px at 6% 4%,rgba(99,102,241,.16),transparent 55%),
    radial-gradient(900px 700px at 50% 116%,rgba(56,189,248,.12),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;-webkit-font-smoothing:antialiased;
}
/* faint tech grid + vignette overlay */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(120,190,230,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(120,190,230,.035) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 30%,transparent 78%);opacity:.6}
[data-theme="light"] body::after{opacity:.5}
/* animated gradient accent bar */
body::before{content:"";position:fixed;inset:0 0 auto 0;height:2px;z-index:9999;
  background:linear-gradient(90deg,#22d3ee,#38bdf8 35%,#6366f1 70%,#22d3ee);
  background-size:200% 100%;animation:bar 5s linear infinite}
@keyframes bar{0%{background-position:0 0}100%{background-position:200% 0}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative;z-index:1}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- nav ---------- */
header.site{position:sticky;top:0;z-index:50;transition:background .25s ease-out,backdrop-filter .25s ease-out,border-color .25s ease-out;border-bottom:1px solid transparent}
header.site.scrolled{background:rgba(5,8,15,.72);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--line)}
[data-theme="light"] header.site.scrolled{background:rgba(255,255,255,.8)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 22px;max-width:1240px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand img{height:34px;width:auto;display:block;filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),.5))}
.brand .wm{font-family:var(--fd);font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1}
.brand .wm b{background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.navright{display:flex;align-items:center;gap:10px}
.search{position:relative}
.search input{border:1px solid var(--line-2);border-radius:999px;padding:10px 16px 10px 40px;font:inherit;font-size:14px;width:240px;max-width:42vw;background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s,background-color .15s,width .2s}
.search input:hover{border-color:rgba(var(--accent-rgb),.45)}
.search input:focus{outline:none;border-color:rgb(var(--accent-rgb));box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint)}
.tgl{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface);color:var(--mut);cursor:pointer;display:grid;place-items:center;transition:.15s}
.tgl:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.45);transform:translateY(-1px)}
.tgl svg{width:18px;height:18px}

/* ---------- hero ---------- */
.hero{text-align:center;padding:88px 0 46px;position:relative}
.hero::before{content:"";position:absolute;left:50%;top:-60px;width:680px;height:480px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.22),transparent 70%);filter:blur(8px)}
.hero .heromark{width:84px;height:auto;margin:0 auto 22px;display:block;filter:drop-shadow(0 0 28px rgba(var(--accent-rgb),.6))}
@media (prefers-reduced-motion: no-preference){.hero .heromark{animation:heroIn .85s cubic-bezier(.16,1,.3,1) both}}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:20px;border:1px solid rgba(var(--accent-rgb),.3);border-radius:999px;padding:6px 14px;background:rgba(var(--accent-rgb),.07)}
.hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.hero h1{font-family:var(--fd);font-size:clamp(40px,6.4vw,76px);font-weight:800;letter-spacing:-.04em;line-height:1.0}
.hero h1 .g{background:linear-gradient(120deg,var(--accent),var(--accent3) 45%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mut);font-size:clamp(16px,2vw,20px);margin:20px auto 0;max-width:580px}
.hero .badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.hero .badges span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:var(--surface)}
.hero .badges span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.hero .stat{display:inline-flex;gap:34px;margin-top:34px;color:var(--faint);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.hero .stat b{display:block;font-family:var(--fd);font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em;text-transform:none;
  background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-search{margin:30px auto 0;max-width:480px;display:block}
.hero-c{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .hero-c{animation:heroIn .85s cubic-bezier(.16,1,.3,1) both}
  .hero-c:nth-child(1){animation-delay:0ms}.hero-c:nth-child(2){animation-delay:80ms}
  .hero-c:nth-child(3){animation-delay:160ms}.hero-c:nth-child(4){animation-delay:240ms}
  .hero-c:nth-child(5){animation-delay:320ms}.hero-c:nth-child(6){animation-delay:400ms}
  @keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: reduce){.hero-c{opacity:1}}

/* category pills */
.cats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 36px}
.cats a{font-size:13px;font-weight:500;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:var(--surface);transition:.16s}
.cats a:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.5);transform:translateY(-1px);text-decoration:none;box-shadow:0 6px 18px -10px rgba(var(--accent-rgb),.6)}

/* ---------- card grid ---------- */
.catsec{margin:46px 0}
.catsec .ch{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.catsec .ch .n{font-family:'Inter';font-size:11px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.catsec h2{font-family:var(--fd);font-size:23px;font-weight:700;letter-spacing:-.02em}
.catsec .ch .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);overflow:hidden;isolation:isolate;backdrop-filter:blur(8px);
  transition:transform .25s ease-out,box-shadow .25s ease-out,border-color .25s ease-out}
.tcard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(135deg,rgba(var(--c,var(--accent-rgb)),.55),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s ease-out}
.tcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 60%);opacity:0;transition:opacity .25s ease-out;z-index:-1}
.tcard:hover{transform:translateY(-6px);border-color:rgba(var(--c,var(--accent-rgb)),.5);box-shadow:0 24px 64px -26px rgba(var(--c,var(--accent-rgb)),.6)}
.tcard:hover::before,.tcard:hover::after{opacity:1}
.tcard .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:rgb(var(--c,var(--accent-rgb)));
  background:rgba(var(--c,var(--accent-rgb)),.13);border:1px solid rgba(var(--c,var(--accent-rgb)),.24)}
.tcard .ico svg{width:22px;height:22px}
.tcard b{font-size:15.5px;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.tcard span{color:var(--mut);font-size:12.5px;line-height:1.5}
.tcard .go{margin-top:auto;font-size:12px;color:rgb(var(--c,var(--accent-rgb)));font-weight:600;opacity:0;transform:translateX(-4px);transition:.2s}
.tcard:hover .go{opacity:1;transform:none}

/* reveal on scroll */
.reveal{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .reveal{transform:translateY(34px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1}}

/* ---------- tool page ---------- */
main.wrap{padding-bottom:64px;max-width:800px}
.crumb{color:var(--faint);font-size:13px;margin:28px 0 8px}
.crumb a{color:var(--mut)}
.tool-head{display:flex;align-items:center;gap:14px;margin:8px 0 6px}
.tool-head .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:rgb(var(--c,var(--accent-rgb)));background:rgba(var(--c,var(--accent-rgb)),.13);border:1px solid rgba(var(--c,var(--accent-rgb)),.24);flex:none;box-shadow:0 8px 26px -12px rgba(var(--c,var(--accent-rgb)),.7)}
.tool-head .ico svg{width:27px;height:27px}
h1{font-family:var(--fd);font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.03em}
.lede{color:var(--mut);font-size:17px;margin:10px 0 22px}
.toolbox{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.toolbox::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.4),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.calc{margin-bottom:18px}.calc:last-child{margin-bottom:0}
.calc label{display:block;font-size:13px;color:var(--mut);margin-bottom:13px;font-weight:500}
.calc input[type=number],.calc input[type=date],.calc input[type=text],.calc input[type=time],.calc input[type=datetime-local],.calc select,.calc textarea{
  display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line-2);border-radius:11px;font:inherit;
  background:var(--surface-2);color:var(--ink);transition:border-color .15s,box-shadow .15s,background-color .15s}
.calc input:hover,.calc select:hover,.calc textarea:hover{border-color:rgba(var(--accent-rgb),.45)}
.calc input:focus,.calc select:focus,.calc textarea:focus{outline:none;border-color:rgb(var(--accent-rgb));box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);background:rgba(var(--accent-rgb),.05)}
.calc input[type=range]{padding:0;accent-color:rgb(var(--accent-rgb))}
.calc input[type=file]{display:block;width:100%;margin-top:6px;color:var(--mut);font-size:13px;padding:10px;border:1px dashed var(--line-2);border-radius:11px;background:var(--surface-2);cursor:pointer}
.calc input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:8px;padding:8px 14px;background:rgba(var(--accent-rgb),.2);color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:13px}
.row span{color:var(--mut);font-size:14px}
.row input{width:104px;margin-top:0}.row select{width:auto;margin-top:0;padding:10px 12px}
.out{font-family:var(--fd);font-size:clamp(30px,5vw,42px);font-weight:800;letter-spacing:-.03em;margin-top:8px;
  background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 20px rgba(var(--accent-rgb),.4));word-break:break-word}
.out.small{font-size:clamp(18px,3vw,22px)}
.sub{color:var(--mut);font-size:14px;margin-top:6px}
.statline{margin-top:12px;color:var(--mut)}.statline b{color:var(--ink)}
.copy{position:absolute;top:10px;right:10px;font-size:11px;padding:5px 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--mut);cursor:pointer;opacity:.85;transition:.15s}
.copy:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.55)}
.copyable{position:relative}

/* buttons */
button,.btn{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#031019;border:0;border-radius:11px;padding:11px 18px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;margin-top:8px;
  transition:transform .15s ease-out,box-shadow .2s ease-out;box-shadow:0 10px 26px -10px rgba(var(--accent-rgb),.85)}
[data-theme="light"] button,[data-theme="light"] .btn{color:#fff}
button::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-100%);transition:transform .5s ease-out}
button:hover::before{transform:translateX(100%)}
button:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(var(--accent-rgb),.95)}
button:active{transform:scale(.97);transition-duration:80ms}
button.ghost{background:var(--surface);border:1px solid var(--line-2);color:var(--ink);box-shadow:none}
button.mini{padding:7px 12px;font-size:12.5px}

section.howto,section.faq{margin-top:34px}
section h2{font-family:var(--fd);font-size:20px;font-weight:700;margin-bottom:14px;letter-spacing:-.01em}
.howto ol{padding-left:22px}.howto li{margin-bottom:8px;color:var(--ink)}
.faq details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px;background:var(--surface);transition:border-color .15s}
.faq details[open]{border-color:rgba(var(--accent-rgb),.4)}
.faq summary{font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-weight:700;margin-right:10px}
.faq details[open] summary::before{content:"\2013"}
.faq p{color:var(--mut);margin-top:10px}
.related{margin-top:40px;border-top:1px solid var(--line);padding-top:22px}
.related h2{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-family:var(--fu);font-weight:700}
.related ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.related a{font-size:13px;border:1px solid var(--line);border-radius:9px;padding:7px 13px;color:var(--mut);background:var(--surface);transition:.15s}
.related a:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.5);transform:translateY(-1px);text-decoration:none}

/* ---------- visible ad units ---------- */
.adunit{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2);margin:24px 0;
  background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(120,190,230,.045) 14px 28px)}
.adunit .adlabel{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.adunit .adsize{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;font-weight:600}
.ad-lead{height:96px}
.ad-rect{height:280px;max-width:336px;margin-left:auto;margin-right:auto}
.ad-mob{height:100px}
/* ---------- AOS-1 Marketplace house ad (premium slot) ---------- */
.house-ad{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:24px 0;padding:18px 22px;border-radius:18px;overflow:hidden;isolation:isolate;text-decoration:none;
  border:1px solid rgba(129,140,248,.45);
  background:linear-gradient(120deg,rgba(99,102,241,.26),rgba(168,85,247,.18) 55%,rgba(34,211,238,.14));
  box-shadow:0 20px 60px -28px rgba(99,102,241,.9);transition:transform .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out}
.house-ad::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(440px 180px at 10% -20%,rgba(168,85,247,.3),transparent 60%)}
.house-ad:hover{text-decoration:none;transform:translateY(-2px);border-color:rgba(129,140,248,.8);box-shadow:0 26px 70px -28px rgba(129,140,248,1)}
.house-ad .ha-tag{position:absolute;top:9px;right:14px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.house-ad .ha-main{display:flex;align-items:center;gap:16px;min-width:0}
.house-ad .ha-mark{flex:none;width:58px;height:58px;border-radius:15px;display:grid;place-items:center;
  font-family:var(--fd);font-weight:800;font-size:15px;color:#fff;letter-spacing:.02em;
  background:linear-gradient(135deg,#6366f1,#a855f7);box-shadow:0 0 26px rgba(129,140,248,.7),inset 0 0 0 1px rgba(255,255,255,.18)}
.house-ad .ha-text b{display:block;font-family:var(--fd);font-weight:800;font-size:19px;color:#fff;letter-spacing:-.01em}
.house-ad .ha-text span{display:block;color:rgba(232,234,250,.82);font-size:13px;margin-top:3px;max-width:460px}
.house-ad .ha-cta{flex:none;font-weight:700;font-size:14px;color:#0b1020;background:#fff;border-radius:999px;padding:11px 19px;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(255,255,255,.45);transition:transform .2s ease-out}
.house-ad:hover .ha-cta{transform:translateX(3px)}
@media(max-width:600px){.house-ad.banner{justify-content:center;text-align:left}.house-ad.banner .ha-cta{width:100%;text-align:center}}
/* hero ad row */
.hero-ads{margin:40px auto 0;max-width:880px}
.hero-ads-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.hero-ads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hero-ads-grid>*{min-height:184px}
@media(max-width:720px){.hero-ads-grid{grid-template-columns:1fr}.hero-ads-grid>*{min-height:150px}}
/* AOS-1 card variant (grid cell) */
.house-ad.card{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;text-align:left;padding:18px}
.house-ad.card .ha-main{flex-direction:column;align-items:flex-start;gap:12px}
.house-ad.card .ha-mark{width:50px;height:50px;font-size:13px}
.house-ad.card .ha-text b{font-size:17px}
.house-ad.card .ha-text span{font-size:12.5px}
.house-ad.card .ha-cta{width:auto;padding:9px 16px;font-size:13px}
/* available / open inventory slot */
.adslot-avail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:18px;
  border:1.5px dashed var(--line-2);border-radius:16px;background:var(--surface-2);
  background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(120,190,230,.04) 14px 28px);transition:border-color .18s,transform .18s}
.adslot-avail:hover{border-color:rgba(var(--accent-rgb),.55);transform:translateY(-2px)}
.adslot-avail .aa-plus{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:700;color:var(--accent);border:1.5px solid rgba(var(--accent-rgb),.4);margin-bottom:4px}
.adslot-avail .aa-label{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--ink)}
.adslot-avail .aa-sub{font-size:12px;color:var(--mut)}
.adslot-avail .aa-size{font-size:11px;color:var(--faint);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.adslot{border:1px dashed var(--line-2);border-radius:12px;color:var(--faint);font-size:12px;text-align:center;padding:22px;margin:24px 0;letter-spacing:.05em}
.empty{text-align:center;color:var(--mut);padding:40px}
/* legal / info pages */
.legal{max-width:760px;padding-bottom:64px}
.legal h1{margin:30px 0 8px}
.legal h2{font-family:var(--fd);font-size:21px;font-weight:700;margin:30px 0 10px;color:var(--ink)}
.legal p{color:var(--mut);margin-bottom:14px;font-size:15.5px}
.legal .lede{color:var(--mut)}
.legal a{color:var(--accent)}
.legal strong{color:var(--ink)}

/* ---------- premium footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:56px;background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.04))}
.site-foot .wrap{max-width:1240px;padding:48px 22px 30px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.foot-brand img{height:40px;filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.5))}
.foot-brand .wm{font-family:var(--fd);font-weight:800;font-size:20px;margin:12px 0 8px}
.foot-brand .wm b{background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-brand p{color:var(--mut);font-size:13.5px;max-width:280px}
.foot-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin-bottom:14px;font-weight:700}
.foot-col a{display:block;color:var(--mut);font-size:13.5px;margin-bottom:9px;transition:.15s}
.foot-col a:hover{color:var(--accent);text-decoration:none;transform:translateX(2px)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px}
.foot-bottom a{color:var(--mut)}

/* ---------- tool-specific eye-candy ---------- */
.swatch{height:120px;border-radius:14px;border:1px solid var(--line-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 10px 30px -12px rgba(0,0,0,.6);transition:background .12s}
.gradient-preview{height:170px;border-radius:14px;border:1px solid var(--line-2);box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{font-size:12.5px;font-family:var(--fu);background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:7px 11px;color:var(--ink);cursor:pointer;transition:.15s}
.chip:hover{border-color:rgba(var(--accent-rgb),.55)}
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.ring{transform:rotate(-90deg)}
.ring .bg{stroke:var(--line-2)}
.ring .fg{stroke:url(#rg);stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.timer-num{font-family:var(--fd);font-size:46px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.dice-face{font-size:60px;text-align:center;filter:drop-shadow(0 6px 18px rgba(var(--accent-rgb),.4))}
.contrast-demo{border-radius:12px;padding:20px;text-align:center;font-weight:600;border:1px solid var(--line-2)}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:999px}
.badge.pass{background:rgba(34,197,94,.16);color:#34d399}.badge.fail{background:rgba(248,113,113,.16);color:#f87171}

@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:640px){.hero{padding:64px 0 38px}.search input{width:150px}.navright .search{display:none}.hero .stat{gap:22px}}