LETS GOOOOOOOOOOOOOOOOOOOOOOOOO

.env.example

@@ -6,6 +6,19 @@ API_URL=http://localhost:8000
 CORS_ORIGINS=http://localhost:5173
 INTERNAL_TOKEN=replace-with-random-token
 BILLING_ENABLED=false
+# Stripe. Checkout, the customer portal and webhooks. Prices are found or created by lookup key
+# (notestack_<plan>_<cycle>) from backend/app/services/plans.py; set STRIPE_PRICE_* to pin existing ones.
+# Webhook endpoint: {API_URL}/api/billing/webhook with events checkout.session.completed,
+# checkout.session.async_payment_succeeded, checkout.session.async_payment_failed,
+# customer.subscription.created, customer.subscription.updated, customer.subscription.deleted,
+# customer.subscription.paused, customer.subscription.resumed, invoice.paid, invoice.payment_failed,
+# invoice.payment_action_required, charge.dispute.created.
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+STRIPE_PRICE_WRITER_MONTHLY=
+STRIPE_PRICE_WRITER_ANNUAL=
+STRIPE_PRICE_STUDIO_MONTHLY=
+STRIPE_PRICE_STUDIO_ANNUAL=
 
 # ---- Auth (JWT). Revocation bumps users.token_version, so tokens can be long lived.
 JWT_SECRET=replace-with-64-random-chars

backend/app/services/stripe_billing.py

@@ -331,9 +331,11 @@ def handle_event(db: Session, event) -> str:
     if kind.startswith("invoice."):
         details = _get(_get(obj, "parent", {}), "subscription_details", {})  # newer API versions
         sub_id = _get(obj, "subscription") or _get(details, "subscription")
-        ws = _workspace_for(db, {"id": sub_id} if sub_id else None, customer_id=_get(obj, "customer"))
-        if ws and sub_id:
-            sync_subscription(db, ws, sc.v1.subscriptions.retrieve(sub_id))
+        # Read the subscription from Stripe: its metadata names the workspace even if an earlier event was missed.
+        stripe_sub = sc.v1.subscriptions.retrieve(sub_id) if sub_id else None
+        ws = _workspace_for(db, stripe_sub, customer_id=_get(obj, "customer"))
+        if ws and stripe_sub is not None:
+            sync_subscription(db, ws, stripe_sub)
         if first and kind in {"invoice.payment_action_required", "invoice.payment_failed"}:
             # The first invoice of a Checkout is handled on the Checkout page itself.
             if _get(obj, "billing_reason") != "subscription_create":

backend/tests/test_billing.py

@@ -52,7 +52,8 @@ def test_free_plan_nudges_and_out_of_fuel_402(client, auth, billing_on, db_sessi
 
 
 def test_checkout_guards(client, auth, billing_on, db_session):
-    assert client.post("/api/billing/checkout", headers=auth, json={"plan": "writer"}).status_code == 501
+    r = client.post("/api/billing/checkout", headers=auth, json={"plan": "writer"})
+    assert r.status_code == 503 and r.json()["detail"]["code"] == "stripe_not_configured"  # no STRIPE_SECRET_KEY
     assert client.post("/api/billing/checkout", headers=auth, json={"plan": "free"}).status_code == 422
     ws = db_session.query(Workspace).one()
     apply_subscription(db_session, ws.id, plan="studio", status="active", customer_id="cus_1")

backend/tests/test_stripe_billing.py

@@ -0,0 +1,201 @@
+"""Stripe webhooks and checkout with a fake Stripe: signatures, retries, out of order events, 3DS, grace."""
+
+import hashlib
+import hmac
+import json
+import time
+import uuid
+
+import pytest
+from sqlalchemy import select
+
+from app.config import settings
+from app.models import Subscription, Workspace
+from app.services import stripe_billing
+from app.services.email import ConsoleEmailProvider
+from app.services.plans import effective_plan
+from tests.conftest import last_code
+
+SECRET = "whsec_test_secret"
+
+
+class FakeStripe:
+    """Just enough of StripeClient.v1 for the billing flows."""
+
+    def __init__(self):
+        self.subs: dict[str, dict] = {}
+        self.calls: list[tuple] = []
+        self.pending = False  # next plan change needs 3DS
+        outer = self
+
+        class Subs:
+            def retrieve(self, sid, params=None):
+                return outer.subs[sid]
+
+            def update(self, sid, params):
+                outer.calls.append(("update", sid, params))
+                sub = outer.subs[sid]
+                invoice = {"status": "open" if outer.pending else "paid",
+                           "hosted_invoice_url": "https://invoice.stripe.test/i_1"}
+                if outer.pending:
+                    return {**sub, "pending_update": {"subscription_items": params["items"]}, "latest_invoice": invoice}
+                sub["items"]["data"][0]["price"] = {"id": params["items"][0]["price"],
+                                                    "lookup_key": "notestack_studio_monthly"}
+                return {**sub, "pending_update": None, "latest_invoice": invoice}
+
+        class Prices:
+            def list(self, params):
+                return type("L", (), {"data": [type("P", (), {"id": f"price_{params['lookup_keys'][0]}"})()]})()
+
+        class Customers:
+            def create(self, params, options=None):
+                outer.calls.append(("customer", params))
+                return type("C", (), {"id": "cus_1"})()
+
+        class Sessions:
+            def create(self, params):
+                outer.calls.append(("checkout", params))
+                return type("S", (), {"url": "https://checkout.stripe.test/s_1"})()
+
+            def retrieve(self, sid, params=None):
+                return outer.session
+
+        class V1:
+            subscriptions = Subs()
+            prices = Prices()
+            customers = Customers()
+            checkout = type("Checkout", (), {"sessions": Sessions()})()
+
+        self.v1 = V1()
+        self.session: dict = {}
+
+    def add_sub(self, sid, workspace_id, plan="writer", status="active", period_end=None):
+        self.subs[sid] = {
+            "id": sid, "customer": "cus_1", "status": status,
+            "metadata": {"workspace_id": str(workspace_id), "plan": plan},
+            "items": {"data": [{
+                "id": "si_1",
+                "price": {"id": f"price_{plan}", "lookup_key": f"notestack_{plan}_monthly"},
+                "current_period_end": period_end or int(time.time()) + 30 * 86400,
+            }]},
+        }
+
+
+@pytest.fixture()
+def stripe_on(monkeypatch):
+    fake = FakeStripe()
+    monkeypatch.setattr(settings, "billing_enabled", True)
+    monkeypatch.setattr(settings, "stripe_secret_key", "sk_test_x")
+    monkeypatch.setattr(settings, "stripe_webhook_secret", SECRET)
+    monkeypatch.setattr(stripe_billing, "client", lambda: fake)
+    return fake
+
+
+@pytest.fixture()
+def owner(client, db_session):
+    client.post("/api/auth/email/register/start", json={"email": "grace@example.com", "password": "stardust-42",
+                                                        "name": "Grace Hopper"})
+    r = client.post("/api/auth/email/register/verify", json={"email": "grace@example.com", "code": last_code()})
+    ws = db_session.scalar(select(Workspace))
+    return {"Authorization": f"Bearer {r.json()['access_token']}"}, ws
+
+
+def send(client, event: dict, secret: str = SECRET):
+    payload = json.dumps(event)
+    t = int(time.time())
+    sig = hmac.new(secret.encode(), f"{t}.{payload}".encode(), hashlib.sha256).hexdigest()
+    return client.post("/api/billing/webhook", content=payload,
+                       headers={"stripe-signature": f"t={t},v1={sig}", "content-type": "application/json"})
+
+
+def event(kind: str, obj: dict) -> dict:
+    return {"id": f"evt_{uuid.uuid4().hex}", "object": "event", "type": kind, "data": {"object": obj}}
+
+
+def plan_of(db, ws) -> str:
+    db.expire_all()
+    return effective_plan(db, ws).id
+
+
+def test_webhook_rejects_bad_signature(client, stripe_on, owner):
+    r = send(client, event("customer.subscription.updated", {"id": "sub_x"}), secret="whsec_wrong")
+    assert r.status_code == 400
+
+
+def test_checkout_completed_then_retry_and_out_of_order(client, stripe_on, owner, db_session):
+    _, ws = owner
+    stripe_on.add_sub("sub_1", ws.id, plan="writer")
+    done = event("checkout.session.completed", {"mode": "subscription", "subscription": "sub_1",
+                                                "client_reference_id": str(ws.id)})
+    assert send(client, done).json()["result"] == "synced"
+    assert plan_of(db_session, ws) == "writer"
+    # Stripe retries the same delivery: still fine, nothing doubles.
+    assert send(client, done).status_code == 200
+    assert db_session.scalar(select(Subscription).where(Subscription.workspace_id == ws.id)).plan == "writer"
+    # An older "incomplete" payload arrives late: we re-read Stripe, which says active.
+    stale = {**stripe_on.subs["sub_1"], "status": "incomplete"}
+    send(client, event("customer.subscription.updated", stale))
+    assert plan_of(db_session, ws) == "writer"
+
+
+def test_past_due_keeps_plan_and_emails_once_then_cancel_drops_to_free(client, stripe_on, owner, db_session):
+    _, ws = owner
+    stripe_on.add_sub("sub_2", ws.id, plan="studio")
+    send(client, event("customer.subscription.created", stripe_on.subs["sub_2"]))
+    stripe_on.subs["sub_2"]["status"] = "past_due"
+    ConsoleEmailProvider.sent.clear()
+    failed = event("invoice.payment_failed", {
+        "subscription": "sub_2", "customer": "cus_1", "customer_email": "grace@example.com",
+        "billing_reason": "subscription_cycle", "hosted_invoice_url": "https://invoice.stripe.test/i_2"})
+    send(client, failed)
+    send(client, failed)  # retried delivery
+    assert plan_of(db_session, ws) == "studio"  # grace while Stripe retries
+    assert len([m for m in ConsoleEmailProvider.sent if "payment failed" in m.subject.lower()]) == 1
+    stripe_on.subs["sub_2"]["status"] = "canceled"
+    send(client, event("customer.subscription.deleted", stripe_on.subs["sub_2"]))
+    assert plan_of(db_session, ws) == "free"
+
+
+def test_renewal_needing_3ds_emails_confirm_link(client, stripe_on, owner, db_session):
+    _, ws = owner
+    stripe_on.add_sub("sub_3", ws.id)
+    ConsoleEmailProvider.sent.clear()
+    send(client, event("invoice.payment_action_required", {
+        "subscription": "sub_3", "customer": "cus_1", "customer_email": "grace@example.com",
+        "billing_reason": "subscription_cycle", "hosted_invoice_url": "https://invoice.stripe.test/i_3"}))
+    mail = [m for m in ConsoleEmailProvider.sent if "confirm" in m.subject.lower()]
+    assert len(mail) == 1 and "https://invoice.stripe.test/i_3" in mail[0].text
+    assert plan_of(db_session, ws) == "writer"
+
+
+def test_checkout_creates_one_customer_and_confirm_applies_plan(client, stripe_on, owner, db_session):
+    headers, ws = owner
+    r = client.post("/api/billing/checkout", json={"plan": "writer", "cycle": "annual"}, headers=headers)
+    assert r.json()["url"] == "https://checkout.stripe.test/s_1"
+    kinds = [c[0] for c in stripe_on.calls]
+    assert kinds == ["customer", "checkout"]
+    session = stripe_on.calls[1][1]
+    assert session["customer"] == "cus_1" and session["client_reference_id"] == str(ws.id)
+    assert "{CHECKOUT_SESSION_ID}" in session["success_url"]
+    assert session["line_items"][0]["price"] == "price_notestack_writer_annual"
+    # Back on the success page before any webhook: confirm applies the plan.
+    stripe_on.add_sub("sub_4", ws.id, plan="writer")
+    stripe_on.session = {"client_reference_id": str(ws.id), "status": "complete",
+                         "subscription": stripe_on.subs["sub_4"]}
+    r = client.post("/api/billing/confirm", json={"session_id": "cs_1"}, headers=headers)
+    assert r.json()["plan"]["id"] == "writer"
+    # A second checkout while subscribed changes the plan in place instead of a second subscription.
+    r = client.post("/api/billing/checkout", json={"plan": "studio", "cycle": "monthly"}, headers=headers)
+    assert r.json()["url"].endswith("/app?checkout=success")
+    assert [c[0] for c in stripe_on.calls].count("customer") == 1
+    assert plan_of(db_session, ws) == "studio"
+
+
+def test_upgrade_needing_3ds_sends_user_to_invoice(client, stripe_on, owner, db_session):
+    headers, ws = owner
+    stripe_on.add_sub("sub_5", ws.id, plan="writer")
+    send(client, event("customer.subscription.created", stripe_on.subs["sub_5"]))
+    stripe_on.pending = True
+    r = client.post("/api/billing/checkout", json={"plan": "studio", "cycle": "monthly"}, headers=headers)
+    assert r.json()["url"] == "https://invoice.stripe.test/i_1"
+    assert plan_of(db_session, ws) == "writer"  # switches only once the payment succeeds

deploy/env.prod.example

@@ -65,3 +65,16 @@ LINKEDIN_CLIENT_ID=
 LINKEDIN_CLIENT_SECRET=
 
 BILLING_ENABLED=false
+# Stripe. Checkout, the customer portal and webhooks. Prices are found or created by lookup key
+# (notestack_<plan>_<cycle>) from backend/app/services/plans.py; set STRIPE_PRICE_* to pin existing ones.
+# Webhook endpoint: {API_URL}/api/billing/webhook with events checkout.session.completed,
+# checkout.session.async_payment_succeeded, checkout.session.async_payment_failed,
+# customer.subscription.created, customer.subscription.updated, customer.subscription.deleted,
+# customer.subscription.paused, customer.subscription.resumed, invoice.paid, invoice.payment_failed,
+# invoice.payment_action_required, charge.dispute.created.
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+STRIPE_PRICE_WRITER_MONTHLY=
+STRIPE_PRICE_WRITER_ANNUAL=
+STRIPE_PRICE_STUDIO_MONTHLY=
+STRIPE_PRICE_STUDIO_ANNUAL=

frontend/src/api/endpoints.ts

@@ -187,4 +187,5 @@ export const billingApi = {
   status: () => api<BillingStatus>("/api/billing/status"),
   checkout: (plan: string, cycle: BillingCycle) => post<{ url: string }>("/api/billing/checkout", { plan, cycle }),
   portal: () => post<{ url: string }>("/api/billing/portal"),
+  confirm: (sessionId: string) => post<BillingStatus>("/api/billing/confirm", { session_id: sessionId }),
 };

frontend/src/components/UpgradeModal.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import type { BillingCycle } from "../api/endpoints";
 import type { Meter, PlanInfo } from "../api/types";
 import { useUpgrade } from "../hooks/useUpgrade";
-import { CheckIcon, RocketIcon } from "./icons/Icons";
+import { CheckIcon } from "./icons/Icons";
 import { annualMonthly, annualTotal, money } from "./PricingTiers";
 
 const ORDER = ["free", "writer", "studio"];
@@ -62,9 +62,6 @@ function Scene({ mode }: { mode: "explore" | "limit" | "welcome" }) {
           <circle cx="106" cy="76" r="3" className="upg-crater" />
           <path d="M8 104a92 20 0 0 0 184 0" className="upg-ring front" />
         </svg>
-        <span className="upg-rocket">
-          <RocketIcon size={22} />
-        </span>
       </div>
     </div>
   );
@@ -93,6 +90,11 @@ export default function UpgradeModal() {
   const [cycle, setCycle] = useState<BillingCycle>("annual");
   const panel = useRef<HTMLDivElement>(null);
 
+  // Every open starts on annual.
+  useEffect(() => {
+    if (modal) setCycle("annual");
+  }, [modal]);
+
   useEffect(() => {
     if (!modal) return;
     const onKey = (e: KeyboardEvent) => e.key === "Escape" && close();
@@ -165,7 +167,7 @@ export default function UpgradeModal() {
           <>
             <div className="upg-cycle">
               <div className="cycle-toggle" role="radiogroup" aria-label="Billing cycle">
-                {(["monthly", "annual"] as const).map((c) => (
+                {(["annual", "monthly"] as const).map((c) => (
                   <button key={c} type="button" role="radio" aria-checked={cycle === c} className={cycle === c ? "on" : ""} onClick={() => setCycle(c)}>
                     {c === "monthly" ? "Monthly" : "Annual"}
                     {c === "annual" && offers[0]?.annual_savings_pct > 0 && <span className="save mono">Save {offers[0].annual_savings_pct}%</span>}

frontend/src/hooks/useUpgrade.tsx

@@ -107,10 +107,14 @@ export function UpgradeProvider({ children }: { children: ReactNode }) {
     if (upgrade) setModal({ mode: "explore", highlight: upgrade === "1" ? null : upgrade });
     if (checkoutResult === "success") {
       setModal({ mode: "welcome" });
-      refresh();
+      // Apply the purchase now instead of waiting for Stripe's webhook, then show the new plan.
+      const sessionId = params.get("session_id");
+      if (sessionId) billingApi.confirm(sessionId).catch(() => undefined).finally(refresh);
+      else refresh();
     }
     params.delete("upgrade");
     params.delete("checkout");
+    params.delete("session_id");
     const rest = params.toString();
     navigate({ pathname: location.pathname, search: rest ? `?${rest}` : "" }, { replace: true });
     openingDone.current = true;

frontend/src/lib/highlight.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+
+/** Tiny syntax highlighter for chat code blocks: one tokenizing regex per language family, React spans
+ * out (never HTML). Good enough for reading, not a parser. Colors live in pages.css (.tok-*). */
+
+const KEYWORDS: Record<string, string> = {
+  js: "async await break case catch class const continue default delete do else export extends false finally for from function if import in instanceof let new null of return static super switch this throw true try typeof undefined var void while yield interface type enum implements readonly as satisfies keyof public private protected",
+  py: "and as assert async await break class continue def del elif else except False finally for from global if import in is lambda None nonlocal not or pass raise return self True try while with yield match case",
+  sh: "if then else elif fi for while do done case esac in function return export local echo exit set unset source cd sudo",
+  sql: "select from where and or not insert into values update set delete create table index view join left right inner outer on group by order having limit offset as distinct union all null is in like between case when then else end primary key foreign references default returning with",
+  go: "break case chan const continue default defer else fallthrough for func go goto if import interface map package range return select struct switch type var nil true false",
+  rust: "as async await break const continue crate else enum extern false fn for if impl in let loop match mod move mut pub ref return self Self static struct super trait true type unsafe use where while dyn Some None Ok Err",
+  c: "abstract boolean break byte case catch char class const continue default do double else enum extends final finally float for if implements import instanceof int interface long new null package private protected public return short static super switch this throw throws try void volatile while true false struct typedef unsigned sizeof include define namespace using template",
+  yaml: "true false null yes no on off",
+  css: "important media keyframes from to import supports",
+};
+
+const FAMILY: Record<string, string> = {
+  js: "js", jsx: "js", ts: "js", tsx: "js", javascript: "js", typescript: "js", mjs: "js", cjs: "js", json: "json",
+  py: "py", python: "py",
+  sh: "sh", bash: "sh", shell: "sh", zsh: "sh", console: "sh", powershell: "sh", ps1: "sh",
+  sql: "sql", postgres: "sql", sqlite: "sql",
+  go: "go", golang: "go",
+  rs: "rust", rust: "rust",
+  java: "c", c: "c", cpp: "c", "c++": "c", cs: "c", csharp: "c", kotlin: "c", swift: "c", php: "c",
+  yaml: "yaml", yml: "yaml", toml: "yaml", ini: "yaml",
+  css: "css", scss: "css",
+  html: "html", xml: "html", svg: "html", vue: "html",
+};
+
+const HASH_COMMENTS = new Set(["py", "sh", "yaml"]);
+
+function tokenizer(family: string): RegExp {
+  if (family === "html") {
+    return /(<!--[\s\S]*?-->)|(<\/?[\w:-]+)|("[^"]*"|'[^']*')|([\w:-]+(?==))|(\/?>)/g;
+  }
+  const comment = HASH_COMMENTS.has(family)
+    ? String.raw`#[^\n]*`
+    : family === "sql"
+      ? String.raw`--[^\n]*|\/\*[\s\S]*?\*\/`
+      : String.raw`\/\/[^\n]*|\/\*[\s\S]*?\*\/`;
+  const strings = String.raw`"""[\s\S]*?"""|'''[\s\S]*?'''|` + "`(?:\\\\.|[^`\\\\])*`" + String.raw`|"(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*'`;
+  return new RegExp(
+    `(${comment})|(${strings})|(\\b\\d[\\d_]*(?:\\.\\d+)?(?:e[+-]?\\d+)?\\b|\\b0x[\\da-f]+\\b)|([A-Za-z_$][\\w$]*)(?=\\s*\\()|([A-Za-z_$@][\\w$-]*)`,
+    "gi",
+  );
+}
+
+export function languageLabel(lang: string): string {
+  const l = lang.toLowerCase();
+  return l ? l : "text";
+}
+
+export function highlight(code: string, lang: string): ReactNode[] {
+  const family = FAMILY[lang.toLowerCase()];
+  if (!family) return [code];
+  const out: ReactNode[] = [];
+  let last = 0;
+  let k = 0;
+  if (family === "json") {
+    for (const m of code.matchAll(/("(?:\\.|[^"\\])*")(\s*:)?|(\b-?\d+(?:\.\d+)?(?:e[+-]?\d+)?\b)|\b(true|false|null)\b/gi)) {
+      const i = m.index ?? 0;
+      if (i > last) out.push(code.slice(last, i));
+      if (m[1]) {
+        out.push(<span key={k++} className={m[2] ? "tok-prop" : "tok-str"}>{m[1]}</span>);
+        if (m[2]) out.push(m[2]);
+      } else out.push(<span key={k++} className={m[3] ? "tok-num" : "tok-kw"}>{m[0]}</span>);
+      last = i + m[0].length;
+    }
+    if (last < code.length) out.push(code.slice(last));
+    return out;
+  }
+  const words = new Set((KEYWORDS[family] ?? "").split(" "));
+  const re = tokenizer(family);
+  for (const m of code.matchAll(re)) {
+    const i = m.index ?? 0;
+    if (i > last) out.push(code.slice(last, i));
+    const [whole, a, b, c, d, e] = m;
+    let cls: string | null = null;
+    if (family === "html") cls = a ? "tok-com" : b ? "tok-kw" : c ? "tok-str" : d ? "tok-prop" : e ? "tok-kw" : null;
+    else if (a) cls = "tok-com";
+    else if (b) cls = "tok-str";
+    else if (c) cls = "tok-num";
+    else if (d) cls = words.has(family === "sql" ? d.toLowerCase() : d) ? "tok-kw" : "tok-fn";
+    else if (e) cls = words.has(family === "sql" ? e.toLowerCase() : e) ? "tok-kw" : /^[A-Z][A-Za-z0-9]+$/.test(e) ? "tok-type" : null;
+    out.push(cls ? <span key={k++} className={cls}>{whole}</span> : whole);
+    last = i + whole.length;
+  }
+  if (last < code.length) out.push(code.slice(last));
+  return out;
+}

frontend/src/styles/upgrade.css

@@ -64,7 +64,7 @@
   margin: 0;
 }
 
-/* Scene: drifting stars, a ringed planet and a rocket on orbit */
+/* Scene: drifting stars and a ringed planet */
 .upg-scene {
   position: relative;
   height: 190px;
@@ -141,22 +141,6 @@
   stroke: rgba(255, 255, 255, 0.15);
 }
 
-/* The rocket flies an ellipse around the planet (the ring's plane). */
-.upg-rocket {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: grid;
-  place-items: center;
-  width: 26px;
-  height: 26px;
-  color: var(--white);
-  filter: drop-shadow(0 0 6px var(--blue));
-  offset-path: path("M -20 92 a 105 32 0 1 0 210 0 a 105 32 0 1 0 -210 0");
-  offset-rotate: 0deg;
-  animation: upg-fly 9s linear infinite;
-}
-
 /* Explore: warp streaks racing past */
 .upg-warp span {
   position: absolute;
@@ -189,17 +173,11 @@
 .upg-warp span:nth-child(13) { --a: 337deg; animation-delay: 1.4s; }
 .upg-warp span:nth-child(14) { --a: 355deg; animation-delay: 2s; }
 
-/* Limit: the rocket sputters, the planet dims */
+/* Limit: the planet dims */
 .upg-limit .upg-planet {
   filter: drop-shadow(0 0 10px var(--blue-20)) saturate(0.6);
 }
 
-.upg-limit .upg-rocket {
-  animation:
-    upg-fly 28s linear infinite,
-    upg-sputter 1.4s steps(2, jump-none) infinite;
-}
-
 /* Welcome: a burst of sparkles */
 .upg-burst span {
   position: absolute;
@@ -570,10 +548,6 @@
   50% { transform: translateY(-5px); }
 }
 
-@keyframes upg-fly {
-  to { offset-distance: 100%; }
-}
-
 @keyframes upg-warp {
   0% { opacity: 0; transform: rotate(var(--a)) translateX(10px) scaleX(0.2); }
   30% { opacity: 1; }
@@ -585,10 +559,6 @@
   100% { opacity: 0; transform: rotate(var(--a)) translateX(150px) scale(0.3); }
 }
 
-@keyframes upg-sputter {
-  50% { opacity: 0.35; }
-}
-
 @keyframes upg-blink {
   50% { opacity: 0.3; }
 }