:root { --bg:#14120f; --fg:#f5f1e8; --muted:#9a948a; --accent:#ffd84d; --line:#3a352e; }
  * { box-sizing:border-box; margin:0; padding:0; }
  html,body { height:100%; }
  body {
    background:var(--bg); color:var(--fg);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  main { max-width:560px; width:100%; text-align:center; }
  .scene { width:100%; max-width:380px; height:auto; margin:0 auto 20px; display:block; overflow:visible; }
  h1 { font-size:clamp(44px, 10vw, 72px); letter-spacing:-0.03em; font-weight:800; }
  h1 span { color:var(--accent); }
  p { margin-top:16px; font-size:18px; line-height:1.5; color:var(--muted); }
  .badge {
    display:inline-block; margin-top:28px; padding:8px 16px; border-radius:999px;
    border:1px solid var(--line); color:var(--fg); font-size:14px;
  }
  .badge i {
    display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent);
    margin-right:8px; vertical-align:1px; animation:pulse 1.6s ease-in-out infinite;
  }
  .wire { stroke:var(--line); stroke-width:1.5; fill:none; stroke-dasharray:4 6; animation:flow 1.8s linear infinite; }
  .wire:nth-child(even) { animation-duration:2.6s; }
  .node { fill:var(--bg); stroke:var(--muted); stroke-width:1.5; }
  .node.on { stroke:var(--accent); animation:blinkNode 2.4s ease-in-out infinite; }
  .node.on:nth-of-type(3n) { animation-delay:.8s; }
  .node.on:nth-of-type(3n+1) { animation-delay:1.6s; }
  .packet { fill:var(--accent); }
  .cow { animation:bob 3s ease-in-out infinite; transform-origin:160px 140px; }
  .eye { animation:blink 4.5s infinite; transform-box:fill-box; transform-origin:center; }
  .ear-l { animation:earL 5s ease-in-out infinite; transform-box:fill-box; transform-origin:right center; }
  .ear-r { animation:earR 5s ease-in-out infinite; transform-box:fill-box; transform-origin:left center; }
  .hoof-l { animation:tap .5s ease-in-out infinite alternate; }
  .hoof-r { animation:tap .5s ease-in-out .25s infinite alternate; }
  .logo { animation:glow 2.4s ease-in-out infinite; }

  @keyframes flow { to { stroke-dashoffset:-20; } }
  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
  @keyframes blinkNode { 0%,100% { fill:var(--bg); } 50% { fill:var(--accent); } }
  @keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
  @keyframes blink { 0%,92%,100% { transform:scaleY(1); } 95% { transform:scaleY(.1); } }
  @keyframes earL { 0%,80%,100% { transform:rotate(0); } 85% { transform:rotate(-12deg); } 90% { transform:rotate(4deg); } }
  @keyframes earR { 0%,60%,100% { transform:rotate(0); } 65% { transform:rotate(12deg); } 70% { transform:rotate(-4deg); } }
  @keyframes tap { to { transform:translateY(-4px); } }
  @keyframes glow { 0%,100% { opacity:.55; } 50% { opacity:1; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation:none !important; }
    .packet { display:none; }
  }