:root { --bg:#f6f7fb; --card:#fff; --text:#1d2130; --muted:#646b7d; --accent:#5865f2; --ok:#1e8e3e; --warn:#b26a00; --bad:#c5221f; --line:#e3e6ee; }
@media (prefers-color-scheme: dark) { :root { --bg:#14161d; --card:#1d2029; --text:#e8eaf0; --muted:#9aa1b2; --line:#2c303c; } }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
main { max-width:860px; margin:0 auto; padding:16px; }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--text); text-decoration:none; }
.brand .logo { border-radius:7px; }
a { color:var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin:12px 0; }
.hero h1 { margin-top:0; }
.list { list-style:none; padding:0; margin:0; }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:6px 0; }
.row .name { flex:1; min-width:140px; font-weight:600; }
.button { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px 16px; font:inherit; cursor:pointer; text-decoration:none; }
.button.small { padding:6px 12px; font-size:14px; }
button.link { background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; padding:0; }
.inline { display:inline; }
.tag { font-size:13px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.tag.ok, .ok { color:var(--ok); } .tag.warn { color:var(--warn); } .tag.bad, .bad { color:var(--bad); }
.muted { color:var(--muted); font-size:14px; }
table { width:100%; border-collapse:collapse; margin:8px 0 12px; }
th, td { text-align:left; padding:6px 4px; border-bottom:1px solid var(--line); }
code { background:var(--line); padding:1px 5px; border-radius:4px; }
footer { text-align:center; padding:24px 16px; }

/* ---- Animated scenes (templates/motion.html) ---- */
:root { --scene-bg:#eef0f8; --scene-tile:#fff; --scene-line:#c9cee0; --c-red:#e5484d; --c-orange:#f2994a; --c-blue:#3b82f6; --c-purple:#8b5cf6; --c-green:#22a06b; --c-teal:#14b8a6; --c-pink:#ec4899; }
@media (prefers-color-scheme: dark) { :root { --scene-bg:#232633; --scene-tile:#2b2f3d; --scene-line:#3d4254; } }
.scene { display:block; width:100%; height:auto; border-radius:12px; background:var(--scene-bg); }
.scene text { font:600 11px system-ui, sans-serif; fill:var(--text); }
.scene .small { font-size:9px; }
.scene g { transform-box:fill-box; transform-origin:center; }
.scene .frame { fill:var(--scene-tile); stroke:var(--scene-line); }
.scene .frame-bar { fill:var(--scene-line); }
.scene .dot-r { fill:var(--c-red); } .scene .dot-y { fill:var(--c-orange); } .scene .dot-g { fill:var(--c-green); }
.scene .btn { fill:var(--accent); } .scene .btn-text { fill:#fff; }
.scene .tile { fill:var(--scene-bg); stroke:var(--scene-line); stroke-width:1.5; }
.scene .ico { fill:var(--c-blue); } .scene .ico.i2 { fill:var(--c-purple); } .scene .ico.i3 { fill:var(--c-teal); }
.scene .cursor-shape { fill:#111; stroke:#fff; stroke-width:1.2; }
.scene .server-box { fill:var(--scene-tile); stroke:var(--accent); stroke-width:2; }
.scene .bot-main { fill:var(--accent); } .scene .bot-h { fill:var(--c-purple); } .scene .bot-text { fill:#fff; font-size:9px; }
.scene .ok-dot { fill:var(--ok); } .scene .ok-mark { fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; }
.scene .chip-bg { fill:var(--scene-bg); stroke:var(--scene-line); } .scene .chip-bg.ghost { fill:var(--scene-tile); stroke:var(--accent); }
.scene .role-dot.d-red { fill:var(--c-red); } .scene .d-orange { fill:var(--c-orange); } .scene .d-blue { fill:var(--c-blue); } .scene .d-purple { fill:var(--c-purple); } .scene .d-green { fill:var(--c-green); } .scene .d-teal { fill:var(--c-teal); } .scene .d-pink { fill:var(--c-pink); }
.scene .avatar { fill:var(--c-blue); } .scene .avatar.a2 { fill:var(--c-orange); } .scene .avatar.a3 { fill:var(--c-teal); }
.scene .wire { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:6 10; opacity:.7; }
.scene .lead { fill:var(--c-red); } .scene .wave { fill:none; stroke:var(--c-red); stroke-width:2; }
.scene .squad-c { fill:var(--c-purple); } .scene .node-text { fill:#fff; }

/* login: cursor clicks the button, the servers appear, one is picked */
.scene .cur-login { animation:cur-login 7s ease-in-out infinite; }
.scene .login-btn { animation:press 7s ease-in-out infinite; animation-delay:-5.1s; }
.scene .srv { animation:pop-in 7s ease-out infinite both; }
.scene .srv.c1 { animation-delay:2.4s; } .scene .srv.c2 { animation-delay:2.6s; } .scene .srv.c3 { animation-delay:2.8s; }
.scene .srv.c1 .tile { animation:pick 7s ease-in-out infinite; }
@keyframes cur-login { 0% { transform:translate(70px,90px); } 25%,32% { transform:translate(-40px,25px); } 55%,100% { transform:translate(-125px,86px); } }
@keyframes press { 0%,100% { transform:none; } 4% { transform:scale(.92); } 8% { transform:none; } }
@keyframes pick { 0%,58% { stroke:var(--scene-line); } 64%,92% { stroke:var(--accent); stroke-width:3; } 100% { stroke:var(--scene-line); } }

/* shared: pop in, stay, fade out before the loop restarts */
@keyframes pop-in { 0% { opacity:0; transform:translateY(-16px) scale(.6); } 8% { opacity:1; transform:none; } 86% { opacity:1; transform:none; } 94%,100% { opacity:0; transform:none; } }

/* invite: the bots arrive one by one and get their check mark */
.scene .bot, .scene .check { animation:pop-in 8s ease-out infinite both; }
.scene .b0 { animation-delay:.2s; } .scene .k0 { animation-delay:1s; }
.scene .b1 { animation-delay:1.6s; } .scene .k1 { animation-delay:2.3s; }
.scene .b2 { animation-delay:2.6s; } .scene .k2 { animation-delay:3.3s; }
.scene .b3 { animation-delay:3.6s; } .scene .k3 { animation-delay:4.3s; }
.scene .b4 { animation-delay:4.6s; } .scene .k4 { animation-delay:5.3s; }

/* roles: one click, every role appears */
.scene .cur-roles { animation:cur-roles 8s ease-in-out infinite; }
.scene .create-btn { animation:press 8s ease-in-out infinite; animation-delay:-7.1s; }
.scene .chip { animation:pop-in 8s ease-out infinite both; }
.scene .r1 { animation-delay:1.2s; } .scene .r2 { animation-delay:1.5s; } .scene .r3 { animation-delay:1.8s; } .scene .r4 { animation-delay:2.1s; }
.scene .r5 { animation-delay:2.4s; } .scene .r6 { animation-delay:2.7s; } .scene .r7 { animation-delay:3s; }
@keyframes cur-roles { 0% { transform:translate(110px,90px); } 10%,16% { transform:translate(-45px,3px); } 40%,100% { transform:translate(130px,120px); } }

/* assign: drag the role onto a player */
.scene .drag { animation:drag 7s ease-in-out infinite; }
.scene .given { animation:given 7s ease-in-out infinite; }
.scene .member.m2 { animation:named 7s ease-in-out infinite; }
@keyframes drag { 0%,12% { opacity:0; transform:none; } 18% { opacity:1; transform:none; } 52% { opacity:1; transform:translate(-94px,38px); } 58%,100% { opacity:0; transform:translate(-94px,38px); } }
@keyframes given { 0%,54% { opacity:0; transform:scale(.6); } 60%,92% { opacity:1; transform:none; } 100% { opacity:0; } }
@keyframes named { 0%,54% { fill:var(--text); } 60%,92% { fill:var(--c-red); } 100% { fill:var(--text); } }

/* raid: the raid lead's voice flows to every squad */
.scene .wave { animation:wave 2.6s ease-out infinite; } .scene .wave.v2 { animation-delay:1.3s; }
.scene .wire { animation:flow 1.2s linear infinite; }
.scene .squad { animation:pulse 2.6s ease-in-out infinite; }
.scene .s1 { animation-delay:.5s; } .scene .s2 { animation-delay:.6s; } .scene .s3 { animation-delay:.7s; } .scene .s4 { animation-delay:.8s; }
@keyframes wave { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(2.6); opacity:0; } }
@keyframes flow { to { stroke-dashoffset:-32; } }
@keyframes pulse { 0%,100% { transform:none; } 20% { transform:scale(1.18); } 40% { transform:none; } }

/* layout of the guide */
.steps { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin:12px 0; }
@media (max-width:640px) { .steps { grid-template-columns:1fr; } }
.step { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; }
.step h3 { margin:10px 0 4px; font-size:16px; }
.step p { margin:0; color:var(--muted); font-size:14px; }
.step .num { display:inline-block; width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; margin-right:6px; }
.hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:center; }
@media (max-width:720px) { .hero-grid { grid-template-columns:1fr; } }
.with-scene { display:grid; grid-template-columns:1fr 220px; gap:16px; align-items:start; }
@media (max-width:640px) { .with-scene { grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce) { .scene * { animation:none !important; } }

/* administration */
.tag.sub { color:var(--accent); border-color:var(--accent); }
.form { display:grid; gap:12px; max-width:520px; }
.form label { display:grid; gap:4px; font-size:14px; }
.form input, .form select { font:inherit; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
.form fieldset { border:1px solid var(--line); border-radius:8px; padding:8px 12px; display:grid; gap:8px; }
.form .radio { display:flex; align-items:center; gap:8px; }
nav.inline a { margin-right:4px; }

.top-right { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.lang { font-size:14px; border:1px solid var(--line); border-radius:999px; padding:2px 10px; text-decoration:none; }

/* administration: accounts and lending signals */
.account { border-top:1px solid var(--line); padding:12px 0; }
.account.flagged { border-left:3px solid var(--bad); padding-left:10px; }
.account .servers { margin-left:12px; }
.servers .row { padding:4px 0; font-size:14px; }
.servers .row.flag .name { color:var(--bad); }
.limit input { width:70px; font:inherit; padding:4px 6px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
.button.danger { background:var(--bad); }
.danger-zone { border:1px solid var(--bad); }
.uninstall { display:grid; gap:12px; justify-items:start; }
.uninstall label { display:flex; gap:8px; align-items:center; }
.hero-logo { display:block; border-radius:16px; margin-bottom:8px; }
.button .icon { vertical-align:-3px; margin-right:8px; }
.button.support { background:#5865f2; }
.button.paypal { background:#0070ba; }
.pay .price { font-size:20px; font-weight:700; margin:0 0 4px; }
footer p { margin:6px 0; }

/* ---- Use cases ---- */
.uses { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:12px 0 4px; }
.use { margin:0; }
.use h3 { margin:8px 0 4px; font-size:17px; }
.use p { margin:0; color:var(--muted); }
.use-icon { width:32px; height:32px; padding:6px; border-radius:9px; background:var(--accent); fill:#fff; }
.use-icon .stroke { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Phones ---- */
@media (max-width:640px) {
  .uses { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  main { padding:12px; }
  h1 { font-size:24px; line-height:1.25; }
  h2 { font-size:19px; }
  .top { flex-wrap:wrap; gap:8px; padding:10px 12px; }
  .top-right { gap:10px; font-size:14px; justify-content:flex-start; }
  .card { padding:14px; }
  .button { display:block; width:100%; text-align:center; }
  .button.small { display:inline-block; width:auto; }
  .row .name { min-width:100%; }
  table { display:block; overflow-x:auto; white-space:nowrap; }
  .with-scene .scene, .hero-grid .scene { max-width:380px; margin:0 auto; }
  footer { padding:16px 12px; }
}

/* ---- Checkout ---- */
.checkout { display:grid; gap:12px; max-width:460px; }
.pay-title { margin:0; font-weight:600; }
.plans { display:grid; gap:8px; }
.plan { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.plan:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plan input { accent-color:var(--accent); }
.plan-name { flex:1; font-weight:600; }
.plan-price { font-weight:700; }
.paypal-buttons { min-height:48px; }
.pay-msg:empty { display:none; }

/* ---- Setup journal ---- */
.journal .row { align-items:flex-start; border-bottom:1px solid var(--line); }
.detail { flex-basis:100%; font-size:14px; overflow-wrap:anywhere; }
.issues li { padding:6px 0; }