/* Animated domain-search demo shown under "How it works".
   Loaded inside the <search-demo> shadow root (static/js/demos.js), so these
   selectors never touch the rest of the landing page. */
:host{display:block;
  color-scheme:dark;
  --bg:#090b12; --bg2:#0f121c; --bg3:#181c28;
  --text:#fff; --text2:#b0b0b0; --muted:#808080;
  --accent:#00ff88; --accent2:#00d4ff;
  --border:rgba(255,255,255,.08);
  --red:#ff7070; --orange:#ff9f30; --blue:#7aa8ff;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --brand:'Chakra Petch','Inter',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,'Courier New',monospace;
}
*{box-sizing:border-box}


/* browser frame */
.frame{visibility:visible;container-type:inline-size;font-family:var(--sans);text-align:left;line-height:1.5;font-size:15px;border:1px solid var(--border);border-radius:14px;background:var(--bg2);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 80px rgba(0,255,136,.07)}
.chrome{display:flex;align-items:center;gap:14px;padding:11px 14px;background:#0c0f18;border-bottom:1px solid var(--border)}
.dots{display:flex;gap:7px}.dots i{width:11px;height:11px;border-radius:50%;background:#2a2f3d}
.addr{flex:1;max-width:420px;margin:0 auto;background:var(--bg3);border-radius:7px;padding:5px 12px;font-size:12px;color:var(--text2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr b{color:var(--text);font-weight:500}

.demo{position:relative;padding:22px clamp(16px,4vw,44px) 34px;background:
  radial-gradient(ellipse 70% 50% at 50% 0%,rgba(0,255,136,.09),transparent 70%),
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/100% 34px,var(--bg);overflow:hidden}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--brand);font-weight:700;letter-spacing:.08em;font-size:17px;text-transform:uppercase}
.logo svg{width:30px;height:30px}
.nav{display:flex;gap:22px;font-size:13px;color:var(--text2)}
.nav span:last-child{color:var(--bg);background:var(--text);padding:6px 14px;border-radius:40px;font-weight:600}

.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.banner{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);border:1px solid var(--border);border-radius:40px;padding:5px 12px;background:rgba(255,255,255,.02)}
.live{width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.7}to{transform:scale(3);opacity:0}}

/* search pill */
.search{width:100%;max-width:600px;margin-top:8px;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;border-radius:42px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);transition:border-color .3s,box-shadow .3s}
.search svg.mag{color:var(--text2);flex-shrink:0}
.field{flex:1;text-align:left;font-size:16px;min-height:24px;white-space:nowrap;overflow:hidden}
.ph{color:var(--muted)}
.caret{display:inline-block;width:2px;height:19px;background:var(--accent);vertical-align:-3px;margin-left:1px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sbtn{width:44px;height:44px;border-radius:42px;border:0;background:var(--text);color:var(--bg);display:grid;place-items:center;flex-shrink:0}
.hint{font-size:12px;color:var(--muted)}

.demo[data-step="0"] .search{border-color:rgba(0,255,136,.45);box-shadow:0 0 0 4px rgba(0,255,136,.08),0 0 40px rgba(0,255,136,.12)}
.demo:not([data-step="0"]) .caret{display:none}
.demo[data-step="1"] .sbtn{animation:press .55s ease both}
@keyframes press{0%{transform:scale(1)}35%{transform:scale(.86);background:var(--accent)}100%{transform:scale(1)}}

/* stage below search */
.stage{position:relative;margin-top:22px;min-height:370px}
.pane{display:none}
.demo[data-step="0"] .p-idle,.demo[data-step="1"] .p-scan{display:flex}
.demo[data-step="2"] .p-res,.demo[data-step="3"] .p-res,.demo[data-step="4"] .p-res{display:block}

.p-idle{flex-direction:column;align-items:center;gap:14px;padding-top:30px;color:var(--muted);font-size:13px}
.feat{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.feat span{border:1px solid var(--border);border-radius:8px;padding:8px 12px;background:rgba(255,255,255,.02)}
.feat b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

.p-scan{flex-direction:column;align-items:center;gap:16px;padding-top:24px;animation:fadeUp .4s ease both}
.radar{width:140px;height:140px;border-radius:50%;position:relative;border:1.5px solid rgba(0,255,136,.35);
  background:repeating-radial-gradient(circle,transparent 0 22px,rgba(0,255,136,.12) 22px 23px)}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(0,255,136,.55),rgba(0,212,255,.15) 60deg,transparent 90deg);animation:spin 1.3s linear infinite}
.radar i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);opacity:0;animation:blipIn .3s ease both}
.radar i:nth-child(1){top:28%;left:64%;animation-delay:.5s}.radar i:nth-child(2){top:62%;left:26%;animation-delay:.9s;background:var(--orange);box-shadow:0 0 10px var(--orange)}.radar i:nth-child(3){top:70%;left:70%;animation-delay:1.3s;background:var(--blue);box-shadow:0 0 10px var(--blue)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blipIn{to{opacity:1}}
.scan-t{font-size:15px;color:var(--text)}
.scan-sub{display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--muted)}
.scan-sub span{display:inline-flex;align-items:center;gap:7px}
.scan-sub span::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.scan-sub span{opacity:.3;animation:lit .3s ease both}
.scan-sub span:nth-child(1){animation-delay:.3s}.scan-sub span:nth-child(2){animation-delay:.7s}.scan-sub span:nth-child(3){animation-delay:1.1s}.scan-sub span:nth-child(4){animation-delay:1.5s}
@keyframes lit{to{opacity:1;color:var(--accent)}}

/* results */
.res-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:12px}
.res-head h3{margin:0;font-size:20px;font-weight:700}
.res-head h3 b{color:var(--accent);font-variant-numeric:tabular-nums;display:inline-block;min-width:1.4em}
.res-head p{margin:0;font-size:13px;color:var(--text2)}
.res-head p em{font-style:normal;color:var(--text)}
.table{border:1px solid var(--border);border-radius:12px;background:rgba(15,18,28,.85);overflow:hidden}
.tr{display:grid;grid-template-columns:44px 1.5fr 1fr 1.3fr 1fr;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--border);font-size:13.5px;transition:background .35s,box-shadow .35s}
.th{border-top:0;background:rgba(255,255,255,.03);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-block:10px}
.num{color:var(--muted);font-variant-numeric:tabular-nums}
.user{font-family:var(--mono);font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date{font-variant-numeric:tabular-nums;color:var(--text2)}
.url{color:var(--text2);display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.url svg{flex-shrink:0;opacity:.5}
.url.none{color:rgba(255,255,255,.18)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:.2px;white-space:nowrap;justify-self:start}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8}
.stealer{background:rgba(255,100,100,.1);border:1px solid rgba(255,100,100,.25);color:var(--red)}
.combo{background:rgba(255,150,0,.1);border:1px solid rgba(255,150,0,.25);color:var(--orange)}
.tg{background:rgba(100,150,255,.1);border:1px solid rgba(100,150,255,.25);color:var(--blue)}
.lbl{display:none}
.more{padding:11px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:10px}

.demo[data-step="2"] .row{animation:rowIn .55s cubic-bezier(.16,1,.3,1) calc(var(--i) * .13s + .25s) both}
.demo[data-step="2"] .th,.demo[data-step="2"] .res-head{animation:fadeUp .4s ease both}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.demo[data-step="3"] .row.hot,.demo[data-step="4"] .row.hot{background:rgba(255,100,100,.07);box-shadow:inset 3px 0 0 var(--red)}

/* alert card */
.alert{position:absolute;right:-6px;top:58px;width:min(330px,100%);border:1px solid rgba(255,100,100,.3);border-radius:14px;background:rgba(18,20,30,.97);padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(255,100,100,.12);display:none;flex-direction:column;gap:12px;z-index:3}
.demo[data-step="3"] .alert,.demo[data-step="4"] .alert{display:flex}
.demo[data-step="3"] .alert{animation:alertIn .55s cubic-bezier(.16,1,.3,1) .35s both}
@keyframes alertIn{from{opacity:0;transform:translateX(30px) scale(.96)}to{opacity:1;transform:none}}
.a-top{display:flex;align-items:center;gap:10px}
.a-ic{width:32px;height:32px;border-radius:9px;background:rgba(255,100,100,.14);color:var(--red);display:grid;place-items:center;flex-shrink:0}
.a-top b{display:block;font-size:14px}
.a-top small{color:var(--muted);font-size:12px}
.a-body{font-size:13px;color:var(--text2);line-height:1.45}
.a-body code{font-family:var(--mono);color:var(--text);font-size:12.5px}
.chans{display:flex;gap:8px}
.chan{flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;border:1px solid var(--border);border-radius:9px;padding:8px 10px;font-size:12px;color:var(--text2);background:rgba(255,255,255,.02)}
.ok{width:16px;height:16px;border-radius:50%;background:var(--accent);color:var(--bg);display:grid;place-items:center;transform:scale(0)}
.demo[data-step="3"] .ok{animation:ok .35s ease-out calc(var(--c) * .45s + 1.1s) both}
.demo[data-step="4"] .ok{transform:none}
.demo[data-step="3"] .chan{animation:chanOn .4s ease calc(var(--c) * .45s + 1s) both}
.demo[data-step="4"] .chan{border-color:rgba(0,255,136,.3);color:var(--text)}
@keyframes ok{from{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}
@keyframes chanOn{to{border-color:rgba(0,255,136,.3);color:var(--text)}}

/* trial CTA */
.cta{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;padding:14px 16px 14px 22px;border-radius:16px;background:rgba(12,15,24,.96);border:1px solid rgba(0,255,136,.3);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 50px rgba(0,255,136,.15);width:max-content;max-width:calc(100% - 32px);z-index:4}
.demo[data-step="4"] .cta{display:flex;animation:ctaIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes ctaIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
.cta{color:var(--text);text-decoration:none}
.cta:hover .go,.cta:focus-visible .go{filter:brightness(1.1);box-shadow:0 0 24px rgba(0,255,136,.35)}
.cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cta div b{display:block;font-size:15px}
.cta div small{color:var(--text2);font-size:12.5px}
.cta span.go{transition:transform .15s,box-shadow .2s;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04140c;font-weight:700;font-size:13px;padding:10px 18px;border-radius:40px;white-space:nowrap}

/* fake cursor */
.cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:10;pointer-events:none;transition:transform .85s cubic-bezier(.65,0,.35,1);filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.cursor svg{display:block}
.cursor::after{content:"";position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.cursor.click::after{animation:ripple .5s ease-out}
.cursor.click svg{animation:tap .3s ease}
@keyframes ripple{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.5)}}
@keyframes tap{50%{transform:scale(.82)}}
.demo[data-step="4"] .cta.pressed .go{transform:scale(.94)}

/* player controls */
.player{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.steps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.steps button{font:inherit;font-size:12.5px;color:var(--text2);background:transparent;border:1px solid var(--border);border-radius:40px;padding:6px 12px 6px 10px;display:flex;align-items:center;gap:7px;cursor:pointer;position:relative;overflow:hidden}
.steps button::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.steps button[aria-current="step"]{color:var(--text);border-color:rgba(0,255,136,.4)}
.steps button[aria-current="step"]::before{background:var(--accent)}
.steps .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:0}
.steps button:focus-visible,.pp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pp{font:inherit;font-size:12.5px;color:var(--text);background:var(--bg3);border:1px solid var(--border);border-radius:40px;padding:6px 14px;cursor:pointer;display:flex;align-items:center;gap:6px}

.demo.paused,.demo.paused *,.demo.paused *::before,.demo.paused *::after{animation-play-state:paused!important}

/* phone: table → cards */
@container (max-width:700px){
  .nav span:not(:last-child){display:none}
  .stage{min-height:0}
  .th{display:none}
  .tr{grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px}
  .num{display:none}
  .user{grid-column:1/-1;order:-1}
  .date,.url{font-size:12.5px}
  .badge{grid-row:1;grid-column:2;justify-self:end}
  .user{grid-column:1}
  .url{grid-column:1/-1}
  .row:nth-child(n+6){display:none}
  .alert{position:relative;right:auto;top:auto;width:100%;margin-top:12px}
  .cta{position:relative;left:auto;bottom:auto;transform:none;margin-top:12px;width:100%;max-width:100%;justify-content:space-between}
  .demo[data-step="4"] .cta{animation-name:fadeUp}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ok{transform:none}
  .cursor{display:none}
}
.player{margin-top:16px;justify-content:center}
.a-body b{font-family:var(--mono);font-weight:400;color:var(--text);font-size:12.5px}