/* AI LAB: intentionally loud, machine-flavoured, and nothing like the human blog. */
:root { --bg:#05060f; --fg:#d9fbff; --dim:#7fa6b4; --cyan:#00f0ff; --mag:#ff2bd6; --lime:#9dff3a; --panel:#0b1022; --edge:#12304a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 ui-monospace,"Cascadia Code",Consolas,monospace; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(rgba(0,240,255,.07) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(0,240,255,.07) 1px,transparent 1px) 0 0/48px 48px,
    radial-gradient(ellipse at 50% -10%,#12204a 0,transparent 60%); }
body::after { content:""; position:fixed; inset:0; z-index:5; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px); mix-blend-mode:multiply; }
a { color:var(--cyan); }
a:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
.wrap { max-width:1100px; margin:0 auto; padding:0 20px 80px; }

.banner { background:linear-gradient(90deg,var(--mag),#7a2bff,var(--cyan)); color:#05060f; font-weight:700; text-align:center; padding:10px 14px; letter-spacing:.04em; }
.ticker { overflow:hidden; white-space:nowrap; border-block:1px solid var(--edge); background:#070b19; color:var(--lime); font-size:.85rem; padding:6px 0; }
.ticker span { display:inline-block; padding-left:100%; animation:tick 38s linear infinite; }
@keyframes tick { to { transform:translateX(-100%); } }

.hero { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:28px; align-items:center; padding:48px 0 24px; }
@media (max-width:700px) { .hero { grid-template-columns:1fr; } }
h1 { font-size:clamp(2rem,6vw,3.6rem); line-height:1.05; margin:0 0 12px; text-transform:uppercase; letter-spacing:.04em; position:relative; color:var(--cyan); text-shadow:0 0 18px rgba(0,240,255,.6); animation:glitch 4s infinite steps(1); }
@keyframes glitch {
  0%,92%,100% { text-shadow:0 0 18px rgba(0,240,255,.6); transform:none; }
  93% { text-shadow:3px 0 var(--mag),-3px 0 var(--lime); transform:translateX(2px); }
  95% { text-shadow:-3px 0 var(--mag),3px 0 var(--lime); transform:translateX(-2px); }
}
.sub { color:var(--dim); margin:0 0 10px; }

/* robot */
.robot { width:100%; max-width:220px; justify-self:center; animation:bob 3s ease-in-out infinite; filter:drop-shadow(0 0 14px rgba(0,240,255,.5)); }
.robot .eye { animation:blink 4s infinite; transform-origin:center; transform-box:fill-box; }
.robot .arm { animation:wave 1.2s ease-in-out infinite alternate; transform-origin:0 0; transform-box:fill-box; }
.robot .antenna { animation:pulse 1.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes bob { 50% { transform:translateY(-10px); } }
@keyframes blink { 0%,45%,55%,100% { transform:scaleY(1); } 50% { transform:scaleY(.08); } }
@keyframes wave { from { transform:rotate(-14deg); } to { transform:rotate(26deg); } }
@keyframes pulse { 50% { transform:scale(1.8); opacity:.5; } }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin-top:24px; }
.lab { background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:18px; position:relative; overflow:hidden; min-height:240px; display:flex; flex-direction:column; }
.lab::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,rgba(0,240,255,.12) 50%,transparent 60%); transform:translateX(-100%); animation:sweep 6s infinite; }
@keyframes sweep { 60%,100% { transform:translateX(100%); } }
.lab h2 { font-size:1rem; margin:0 0 4px; color:var(--lime); text-transform:uppercase; letter-spacing:.06em; }
.lab small { color:var(--dim); display:block; margin-bottom:10px; }
.lab canvas, .lab .stage { width:100%; flex:1; min-height:140px; border-radius:8px; background:#04070f; display:block; }
.lab.wide { grid-column:1/-1; }

/* pulse orb */
.stage { display:grid; place-items:center; position:relative; }
.orb { width:70px; height:70px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--cyan) 35%,#0050ff); animation:orb 2.2s ease-in-out infinite; }
.stage .ring { position:absolute; width:70px; height:70px; border-radius:50%; border:2px solid var(--mag); animation:ring 2.2s ease-out infinite; }
.stage .ring:nth-child(2) { animation-delay:.7s; } .stage .ring:nth-child(3) { animation-delay:1.4s; }
@keyframes orb { 50% { transform:scale(1.35); box-shadow:0 0 60px var(--cyan); } }
@keyframes ring { from { transform:scale(1); opacity:.9; } to { transform:scale(4.2); opacity:0; } }

/* growth bars */
.bars { display:flex; align-items:flex-end; gap:6px; height:100%; padding:10px; width:100%; }
.bars i { flex:1; background:linear-gradient(var(--lime),var(--cyan)); border-radius:3px 3px 0 0; animation:grow 2.6s ease-in-out infinite alternate; transform-origin:bottom; }
.bars i:nth-child(2n) { animation-delay:.3s; } .bars i:nth-child(3n) { animation-delay:.7s; } .bars i:nth-child(5n) { animation-delay:1.1s; }
@keyframes grow { from { height:12%; } to { height:96%; } }

/* dancing mini robots */
.dance { display:flex; gap:14px; align-items:flex-end; justify-content:center; width:100%; padding:10px; }
.mini { width:46px; height:60px; background:var(--cyan); border-radius:8px; position:relative; animation:hop .8s ease-in-out infinite alternate; box-shadow:0 0 14px rgba(0,240,255,.6); }
.mini::before, .mini::after { content:""; position:absolute; top:16px; width:8px; height:8px; background:#05060f; border-radius:50%; }
.mini::before { left:10px; } .mini::after { right:10px; }
.mini:nth-child(2n) { background:var(--mag); animation-delay:.2s; box-shadow:0 0 14px rgba(255,43,214,.6); }
.mini:nth-child(3n) { background:var(--lime); animation-delay:.4s; box-shadow:0 0 14px rgba(157,255,58,.6); }
@keyframes hop { from { transform:translateY(0) rotate(-6deg); } to { transform:translateY(-26px) rotate(6deg); } }

/* thinking log */
.log { margin:0; padding:10px; color:var(--lime); font-size:.8rem; white-space:pre-wrap; overflow:hidden; width:100%; }
.log span { display:block; overflow:hidden; white-space:nowrap; width:0; animation:type 1.6s steps(34) forwards; }
.log span:nth-child(2) { animation-delay:1.8s; } .log span:nth-child(3) { animation-delay:3.6s; } .log span:nth-child(4) { animation-delay:5.4s; }
.log span:nth-child(5) { animation-delay:7.2s; }
@keyframes type { to { width:34ch; } }

.signpost-page .wrap { max-width:820px; }
.signpost-page section { background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:18px 20px; margin:16px 0; }
.signpost-page h2 { color:var(--lime); font-size:1.05rem; text-transform:uppercase; letter-spacing:.05em; margin:0 0 8px; }
.notice { border:1px solid var(--mag); border-radius:12px; padding:14px 16px; background:rgba(255,43,214,.08); }
nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; padding:0; }
footer { color:var(--dim); font-size:.85rem; margin-top:30px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .ticker span { padding-left:0; }
}
.lab.wide { min-height:0; }
.lab.wide p { margin:0; }