:root{
  /* LIGHT theme (default) */
  --bg:#f5f7fc; --panel:#ffffff; --line:#dde3f0; --text:#151a33; --mute:#5a6285;
  --cyan:#0089a8; --pink:#c2189f; --lime:#2f8a00; --amber:#a86400; --violet:#5b45e0;
  --btn1:#00c8e0; --btn2:#62e9f5; --btn-text:#04131a; --btn-glow:rgba(0,170,200,.28);
  --card-bg:linear-gradient(180deg,#ffffff,#fbfcff); --card-shadow:0 1px 2px rgba(20,30,70,.05),0 10px 30px -14px rgba(20,30,70,.18);
  --desc:#3c4466; --tagline:#3a4266; --chip-bg:rgba(255,255,255,.9); --chip-text:#151a33; --media-bg:#e9edf6; --btn-dis:#e7eaf3;
  --grid-line:rgba(60,80,160,.08); --title-glow:rgba(91,69,224,.18);
  --glow1:rgba(255,120,220,.22); --glow2:rgba(0,200,230,.22); --glow3:rgba(150,230,60,.14);
  --bot-glow:drop-shadow(0 1px 1.5px rgba(10,20,50,.35)); --shadow-c:rgba(10,15,40,.45);
  --bubble-bg:#151a33; --bubble-text:#ffffff;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#07080f; --panel:#0e1120; --line:#1f2440; --text:#e8ecff; --mute:#8a93b8;
  --cyan:#00f0ff; --pink:#ff3df2; --lime:#b6ff3b; --amber:#ffb300; --violet:#8b7bff;
  --btn1:#00f0ff; --btn2:#7ff9ff; --btn-text:#05060c; --btn-glow:rgba(0,240,255,.35);
  --card-bg:linear-gradient(180deg,rgba(20,24,46,.92),rgba(12,14,28,.95)); --card-shadow:none;
  --desc:#b9c0e3; --tagline:#c6ccef; --chip-bg:rgba(7,8,15,.75); --chip-text:#e8ecff; --media-bg:#05060c; --btn-dis:#1a1e36;
  --grid-line:rgba(0,240,255,.06); --title-glow:rgba(0,240,255,.35);
  --glow1:rgba(255,61,242,.18); --glow2:rgba(0,240,255,.18); --glow3:rgba(182,255,59,.08);
  --bot-glow:drop-shadow(0 0 6px rgba(0,240,255,.18)); --shadow-c:rgba(0,0,0,.65);
  --bubble-bg:#ffffff; --bubble-text:#05060c;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit}
.bg-grid{position:fixed;inset:0;z-index:-2;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%);
  animation:gridmove 20s linear infinite}
@keyframes gridmove{to{background-position:44px 44px,44px 44px}}
.bg-glow{position:fixed;inset:-20%;z-index:-3;
  background:radial-gradient(circle at 20% 15%,var(--glow1),transparent 40%),radial-gradient(circle at 80% 10%,var(--glow2),transparent 40%),radial-gradient(circle at 50% 100%,var(--glow3),transparent 45%)}
.hero{max-width:1200px;margin:0 auto;padding:28px 22px 10px;text-align:center}
.topbar{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:13px;color:var(--mute);text-align:left}
.prompt b{color:var(--lime);font-weight:500}
.caret{display:inline-block;width:8px;height:15px;background:var(--lime);margin-left:4px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lang{font-family:var(--mono);background:transparent;color:var(--cyan);border:1px solid var(--cyan);border-radius:6px;padding:5px 10px;cursor:pointer;letter-spacing:.1em}
.lang:hover{background:color-mix(in srgb,var(--cyan) 12%,transparent)}
.title{position:relative;margin:56px 0 10px;font-family:var(--mono);font-weight:900;letter-spacing:-.03em;line-height:.95;
  font-size:clamp(54px,11vw,140px);
  background:linear-gradient(92deg,var(--cyan),var(--violet) 45%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px var(--title-glow))}
.title::before,.title::after{content:attr(data-text);position:absolute;inset:0;background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.7}
.title::before{animation:glitch1 4.5s infinite steps(1)}
.title::after{animation:glitch2 4.5s infinite steps(1)}
@keyframes glitch1{0%,92%,100%{transform:none;clip-path:none;opacity:0}93%{opacity:.8;transform:translate(-4px,1px);clip-path:inset(10% 0 60% 0)}95%{transform:translate(3px,-1px);clip-path:inset(50% 0 20% 0)}}
@keyframes glitch2{0%,93%,100%{opacity:0}94%{opacity:.8;transform:translate(4px,0);clip-path:inset(65% 0 5% 0);filter:hue-rotate(90deg)}96%{transform:translate(-3px,2px);clip-path:inset(20% 0 55% 0)}}
.tagline{font-size:clamp(16px,2.2vw,21px);color:var(--tagline);margin:8px auto 4px;max-width:720px}
.hint{font-family:var(--mono);font-size:12px;color:var(--mute);margin:10px 0 0}
main{max-width:1200px;margin:0 auto;padding:34px 22px 60px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.card{position:relative;display:flex;flex-direction:column;background:var(--card-bg);box-shadow:var(--card-shadow);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .25s ease,border-color .25s,box-shadow .25s;
  opacity:0;transform:translateY(16px);animation:rise .6s ease forwards}
@keyframes rise{to{opacity:1;transform:none}}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--cyan) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 25%,transparent),0 18px 50px -10px color-mix(in srgb,var(--cyan) 30%,transparent)}
.card::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,61,242,.6),transparent 70%);background-size:250% 250%;
  -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 .3s;animation:sheen 3s linear infinite}
.card:hover::before{opacity:1}
@keyframes sheen{to{background-position:-250% 0}}
.media{position:relative;aspect-ratio:16/10;background:var(--media-bg);overflow:hidden;border-bottom:1px solid var(--line)}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media img{transition:transform .6s ease}
.card:hover .media img{transform:scale(1.05)}
.media .icon{position:absolute;inset:0;display:grid;place-items:center;font-size:76px;
  background:radial-gradient(circle at 50% 45%,rgba(0,240,255,.15),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px)}
.media .icon span{filter:drop-shadow(0 0 18px rgba(255,61,242,.55));animation:float 3.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(-4deg)}}
.badge{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--chip-bg);backdrop-filter:blur(6px);border:1px solid;font-weight:700}
.badge.live{color:var(--lime);border-color:rgba(182,255,59,.5)}
.badge.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:6px;box-shadow:0 0 8px var(--lime);animation:blink 1.6s infinite}
.badge.soon{color:var(--amber);border-color:rgba(255,179,0,.5)}
.badge.private{color:var(--pink);border-color:rgba(255,61,242,.5)}
.media.has-video .badge{pointer-events:none}
.body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.name{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
.sub{font-family:var(--mono);font-size:12px;color:var(--cyan);margin-top:-6px}
.desc{margin:0;color:var(--desc);font-size:15px;line-height:1.5;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--mono);font-size:11px;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--btn-text);background:linear-gradient(90deg,var(--btn1),var(--btn2));padding:10px 16px;border-radius:10px;
  box-shadow:0 0 18px var(--btn-glow);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 28px var(--btn-glow),0 0 0 1px var(--btn1)}
.btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(4px)}
.btn.private{color:#fff;background:linear-gradient(90deg,#d61fb0,#ff5fe6);box-shadow:0 0 18px rgba(255,61,242,.35)}
.btn.disabled{background:var(--btn-dis);color:var(--mute);box-shadow:none;cursor:not-allowed}
.soon .media .icon::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,179,0,.08),transparent);animation:scan 2.4s linear infinite}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.foot{text-align:center;font-family:var(--mono);font-size:12px;color:var(--mute);padding:20px 20px 90px}
.foot .dot{margin:0 8px;color:var(--pink)}
/* bots layer: photoreal sprites */
.bots{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.bot{position:absolute;left:0;top:0;will-change:transform;transform-origin:50% 100%}
.bot .flip{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .12s}
.bot.left .flip{transform:scaleX(-1)}
.bot .bodyg{position:absolute;inset:0;transform-origin:50% 100%}
.bot img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;user-select:none;
  filter:var(--bot-glow) contrast(1.04)}
.bot .f1{opacity:0}
.bot.pass .f0{opacity:0}.bot.pass .f1{opacity:1}
.bot.walking.pass .bodyg{transform:translateY(-1.5px) rotate(1deg)}
.bot.walking:not(.pass) .bodyg{transform:rotate(-1deg)}
.bot.blink img{filter:brightness(.8) contrast(1.04)}
.bot .shadow{position:absolute;left:12%;right:12%;bottom:-3px;height:7px;border-radius:50%;
  background:radial-gradient(ellipse at center,var(--shadow-c),rgba(0,0,0,0) 70%);transition:opacity .2s,transform .2s}
.bot.flying .shadow,.bot.falling .shadow{opacity:.25;transform:scale(.6)}
.bot.waving .bodyg{animation:wiggle .28s ease-in-out infinite alternate}
@keyframes wiggle{from{transform:rotate(-7deg) translateY(-2px)}to{transform:rotate(7deg)}}
.bot .flame{position:absolute;left:30%;right:30%;top:100%;height:16px;border-radius:0 0 50% 50%;
  background:radial-gradient(ellipse at 50% 0,#fff6c2 0,#ffb300 40%,rgba(255,80,0,0) 75%);filter:blur(.5px);animation:flick .08s infinite alternate}
@keyframes flick{to{transform:scaleY(.75)}}
.bubble{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);white-space:nowrap;font:700 10px/1 var(--mono);color:var(--bubble-text);background:var(--bubble-bg);
  padding:4px 6px;border-radius:6px;box-shadow:0 3px 10px rgba(10,20,50,.22);opacity:0;transition:opacity .2s;}
.bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-4px;border:4px solid transparent;border-top-color:var(--bubble-bg)}
.bot.talk .bubble{opacity:1}
@media (max-width:600px){.title{margin-top:36px}.grid{gap:18px}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card{opacity:1;transform:none}
}
.langbadge{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  padding:4px 8px;border-radius:6px;color:var(--chip-text);background:var(--chip-bg);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--violet) 60%,transparent);pointer-events:none}
.langbadge::before{content:"🌐 ";font-weight:400}

.tools{display:flex;gap:8px}
.theme{font-size:14px;line-height:1;padding:5px 9px}
html,body{transition:background-color .3s,color .3s}
.badge.live::before{box-shadow:0 0 6px var(--lime)}
.media .icon{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--cyan) 18%,transparent),transparent 60%),repeating-linear-gradient(0deg,rgba(127,127,160,.06) 0 2px,transparent 2px 4px)}
.tag{background:color-mix(in srgb,var(--panel) 70%,transparent)}