ava-engine 0.2.0 → 0.4.0

package/public/embed.js

@@ -0,0 +1,60 @@
+/* Ava embed: a "Talk to Ava" button for your own site or product.
+ *
+ *   <script src="https://YOUR-AVA/embed.js" data-link="SHARE_LINK_ID" async></script>
+ *
+ * Optional attributes:
+ *   data-label="Need a hand?"   button text (default "Talk to Ava")
+ *   data-color="#4F46E5"        button colour
+ *   data-position="left"        bottom-left instead of bottom-right
+ *   data-open="tab"             open in a new tab instead of a side window
+ *
+ * The call opens in its own small window next to your page, so the customer can
+ * share this tab and keep working in it while Ava guides them. The button lives in
+ * a shadow root: your styles can't break it and it can't touch yours.
+ * Call window.Ava.open() to open it from your own button or menu.
+ */
+(() => {
+  const me = document.currentScript || document.querySelector('script[src*="embed.js"][data-link]');
+  if (!me || window.Ava?.loaded) return;
+  const link = me.dataset.link || "";
+  if (!/^[A-Za-z0-9_-]{22}$/.test(link)) { console.warn("[Ava] embed.js needs data-link set to a share link id (Dashboard → Share links → Embed)."); return; }
+  const origin = new URL(me.src, location.href).origin;
+  const url = `${origin}/c/${link}`;
+  const label = (me.dataset.label || "Talk to Ava").slice(0, 40);
+  const color = /^#[0-9a-f]{3,8}$/i.test(me.dataset.color || "") ? me.dataset.color : "#4F46E5";
+  const left = me.dataset.position === "left";
+
+  let win = null;
+  function open() {
+    if (win && !win.closed) { win.focus(); return; }
+    if (me.dataset.open !== "tab") {
+      const w = 440, h = Math.min(820, screen.availHeight - 40);
+      const x = left ? 20 : Math.max(0, screen.availWidth - w - 20);
+      win = window.open(url, "ava-call", `popup=yes,width=${w},height=${h},left=${x},top=20`);
+    }
+    if (!win) win = window.open(url, "_blank"); // popup blocked, or asked for a tab
+    if (!win) location.href = url;
+  }
+  window.Ava = { loaded: true, open, url };
+
+  const host = document.createElement("div");
+  host.setAttribute("data-ava-embed", "");
+  const root = host.attachShadow({ mode: "open" });
+  root.innerHTML = `<style>
+    :host { all: initial; }
+    button { position: fixed; ${left ? "left" : "right"}: 20px; bottom: 20px; z-index: 2147483000; display: inline-flex; align-items: center; gap: 10px;
+      height: 48px; padding: 0 20px 0 8px; border: 0; border-radius: 999px; background: #0B0B12; color: #fff; cursor: pointer;
+      font: 600 15px/1 "Inter Tight", Inter, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.01em;
+      box-shadow: 0 10px 30px -10px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); transition: transform .2s cubic-bezier(.16,1,.3,1); }
+    button:hover { transform: translateY(-2px); }
+    button:focus-visible { outline: 3px solid ${color}; outline-offset: 3px; }
+    .orb { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0%, ${color} 55%, #0B0B12 140%); box-shadow: 0 0 18px ${color}; animation: b 2.8s ease-in-out infinite; }
+    @keyframes b { 50% { transform: scale(1.08); } }
+    @media (prefers-reduced-motion: reduce) { .orb { animation: none; } button { transition: none; } }
+    @media print { button { display: none; } }
+  </style><button type="button" part="button" aria-label="${label.replace(/"/g, "&quot;")}: opens a live guide in a new window"><span class="orb" aria-hidden="true"></span><span></span></button>`;
+  root.querySelector("button span:last-child").textContent = label;
+  root.querySelector("button").addEventListener("click", open);
+  (document.body ? Promise.resolve() : new Promise((r) => document.addEventListener("DOMContentLoaded", r, { once: true })))
+    .then(() => document.body.append(host));
+})();

package/public/index.html

@@ -22,8 +22,8 @@
     </div>
 
     <div class="ob-amid">
-      <h2>An assistant that sees your screen.</h2>
-      <p>Ava joins your call, watches the window you share, and helps you through whatever you're doing — live.</p>
+      <h2 id="obAsideTitle">An assistant that sees your screen.</h2>
+      <p id="obAsideLead">Ava joins your call, watches the window you share, and helps you through whatever you're doing — live.</p>
       <ul class="ob-features">
         <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Understands your screen as it changes, in real time</li>
         <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Natural voice that answers in under a second</li>
@@ -45,11 +45,19 @@
   <div class="ob-form">
     <div class="ob-panel">
       <div class="ob-header">
-        <h1>Start a session</h1>
-        <p>Choose how Ava should work, then check your audio before connecting.</p>
+        <a class="ob-dashlink" id="obDash" href="/dashboard">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18 9 12l6-6"/></svg>Dashboard</a>
+        <h1 id="obTitle">Start a session</h1>
+        <p id="obLead">Choose how Ava should work, then check your audio before connecting.</p>
+        <p class="ob-demo" id="obDemo" hidden><b>Demo mode.</b> <span id="obDemoText">Replies are canned until you add an OpenRouter key: run <code>npx ava-engine setup</code>.</span></p>
       </div>
 
-      <div class="ob-section">
+      <div class="ob-section" id="obJourneyBlock" hidden>
+        <span class="ob-seclabel">What we'll do together</span>
+        <ol class="ob-journey" id="obJourney"></ol>
+      </div>
+
+      <div class="ob-section" id="obAgent">
         <span class="ob-seclabel">Agent</span>
         <div class="ob-modes" id="obModes"><!-- mode cards injected --></div>
         <div class="ob-platwrap" id="obPlatformBlock" hidden>
@@ -62,7 +70,7 @@
       <div class="ob-divider"></div>
 
       <div class="ob-section">
-        <span class="ob-seclabel">Audio &amp; recognition</span>
+        <span class="ob-seclabel" id="obAudioLabel">Audio &amp; recognition</span>
         <div class="ob-gear">
           <div class="ob-field">
             <label class="ob-flabel" for="micsel">Microphone</label>
@@ -72,7 +80,7 @@
             </div>
             <div class="miclevel" id="miclevel"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
           </div>
-          <div class="ob-field">
+          <div class="ob-field" id="obVoiceField">
             <label class="ob-flabel" for="voicesel2">Ava's voice</label>
             <div class="ob-fctl">
               <select id="voicesel2" class="ob-select"></select>
@@ -80,7 +88,7 @@
             </div>
             <span class="ob-fnote">Preview also warms the voice, so the call starts fast.</span>
           </div>
-          <div class="ob-field ob-field-wide">
+          <div class="ob-field ob-field-wide" id="obSttField">
             <label class="ob-flabel" for="sttsel">Speech recognition</label>
             <select id="sttsel" class="ob-select"></select>
             <span class="ob-fnote" id="sttnote">Choose before the call.</span>
@@ -92,7 +100,7 @@
         <div class="ob-actions">
           <button type="button" id="joinvoice" class="amberbtn ob-bigbtn">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3"/></svg>
-            Join with voice
+            <span id="joinvoiceText">Join with voice</span>
           </button>
           <button type="button" id="jointext" class="ghostbtn ob-bigbtn">Join text-only</button>
           <span class="ob-joinstate" id="joinstate"></span>
@@ -129,6 +137,7 @@
   <span class="vdiv"></span>
   <span class="apptitle" id="apptitle">Flexible Agent</span>
   <span class="mono meta hide-narrow" id="topsub">screen-aware assistant</span>
+  <span id="demoPill" class="pill demo" hidden title="Replies are canned until an OpenRouter key is added">DEMO MODE</span>
   <span id="livepill" class="pill standby"><span class="dot"></span><span id="livepilltext">STANDBY</span></span>
   <div class="grow"></div>
   <span id="privacy" class="privacypill" hidden>

package/public/login.css

@@ -0,0 +1,30 @@
+@font-face { font-family: "Inter Tight"; src: url(/fonts/inter-tight-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
+@font-face { font-family: "Inter"; src: url(/fonts/inter-var.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
+@font-face { font-family: "Plex Mono"; src: url(/fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
+:root { --ink: #0A0A0C; --ink2: #4A4B55; --meta: #686975; --edge: #DCDCE3; --accent: #4F46E5; --accent-ink: #3730A3; --tint: rgba(79,70,229,.10); --err: #B42318; }
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { margin: 0; min-height: 100%; background: #0B0B12; color: var(--ink); font: 16px/1.5 Inter, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
+.wrap { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; overflow: hidden; }
+.glow { position: absolute; width: 900px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -55%); background: radial-gradient(closest-side, rgba(99,102,241,.38), transparent 70%); pointer-events: none; }
+.card { position: relative; width: min(420px, 100%); background: #fff; border-radius: 24px; padding: 34px 32px 28px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); animation: rise .5s cubic-bezier(.16,1,.3,1); }
+@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
+.brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
+.wm { width: 52px; height: 22px; }
+.orb { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #E4E5FF, #6366F1 48%, #3730A3 100%); box-shadow: 0 0 30px rgba(124,108,246,.55); animation: breathe 2.8s ease-in-out infinite; }
+@keyframes breathe { 50% { transform: scale(1.07); } }
+h1 { margin: 0 0 6px; font: 300 32px/1.1 "Inter Tight", Inter, sans-serif; letter-spacing: -.03em; }
+.lead { margin: 0 0 24px; color: var(--ink2); font-size: 15px; }
+.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
+label { font-weight: 600; font-size: 14px; }
+input { height: 48px; padding: 0 15px; border: 1.5px solid var(--edge); border-radius: 12px; font: 15px Inter, sans-serif; color: var(--ink); background: #fff; }
+input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--tint); }
+.error { margin: 0 0 12px; min-height: 0; color: var(--err); font-size: 14px; }
+.error:empty { display: none; }
+.btn { width: 100%; height: 48px; border: 0; border-radius: 99px; background: var(--accent); color: #fff; font: 600 15px "Inter Tight", Inter, sans-serif; cursor: pointer; box-shadow: 0 8px 24px -10px rgba(79,70,229,.7); }
+.btn:hover { background: var(--accent-ink); }
+.btn:disabled { opacity: .6; cursor: wait; }
+.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.foot { margin: 18px 0 0; font-size: 13px; color: var(--meta); text-align: center; }
+code { font: 12px "Plex Mono", ui-monospace, monospace; background: #F5F5F7; border: 1px solid #E9E9ED; padding: 1px 5px; border-radius: 6px; }
+@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

package/public/login.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<title>Sign in · Ava</title>
+<link rel="preload" href="/fonts/inter-tight-var.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/login.css">
+<script src="/login.js" defer></script>
+</head>
+<body>
+<main class="wrap">
+  <div class="glow" aria-hidden="true"></div>
+  <form class="card" id="form" novalidate>
+    <div class="brand">
+      <svg class="wm" viewBox="0 0 66 27.8" role="img" aria-label="Ava"><path transform="translate(1.9 1.9)" d="M0 24L9.5 0L19 24M21.6 0L31.1 24L40.6 0M43.2 24L52.7 0L62.2 24" fill="none" stroke="currentColor" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <span class="orb" aria-hidden="true"></span>
+    </div>
+    <h1>Sign in to Ava</h1>
+    <p class="lead" id="lead">Your dashboard, test calls and the specialist console.</p>
+    <div class="field" id="emailField" hidden>
+      <label for="email">Email</label>
+      <input id="email" type="email" autocomplete="username" spellcheck="false">
+    </div>
+    <div class="field">
+      <label for="password" id="passwordLabel">Password</label>
+      <input id="password" type="password" autocomplete="current-password">
+    </div>
+    <p class="error" id="error" role="alert"></p>
+    <button class="btn" type="submit" id="submit">Sign in</button>
+    <p class="foot" id="foot">Forgot it? An owner can reset it under Team, or run <code>npx ava-engine team</code> on the server.</p>
+  </form>
+</main>
+</body>
+</html>

package/public/login.js

@@ -0,0 +1,27 @@
+"use strict";
+// Sign in with a team account (email + password) or the shared access password.
+(async () => {
+  const $ = (id) => document.getElementById(id);
+  const next = new URLSearchParams(location.search).get("next") || "/dashboard";
+  let mode = { accounts: false, password: true };
+  try { mode = await (await fetch("/api/auth/mode")).json(); } catch {}
+  if (mode.accounts) { $("emailField").hidden = false; $("email").focus(); }
+  else {
+    $("passwordLabel").textContent = "Access password";
+    $("lead").textContent = "Enter the password this Ava was set up with.";
+    $("foot").innerHTML = "Forgot it? Run <code>npx ava-engine setup</code> on the server to set a new one.";
+    $("password").focus();
+  }
+  $("form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    $("submit").disabled = true; $("error").textContent = "";
+    try {
+      const r = await fetch("/api/auth/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: mode.accounts ? $("email").value : undefined, password: $("password").value, next }) });
+      const j = await r.json().catch(() => ({}));
+      if (!r.ok) throw new Error(j.error || "Couldn't sign in.");
+      location.replace(j.next || "/dashboard");
+    } catch (err) {
+      $("error").textContent = err.message; $("submit").disabled = false; $("password").select();
+    }
+  });
+})();

package/public/setup.css

@@ -1,94 +1,178 @@
-@font-face { font-family: "Inter Tight"; src: url(/fonts/inter-tight-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
-@font-face { font-family: "Inter"; src: url(/fonts/inter-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
+/* ── Ava · Setup ──
+   The first thing anyone sees of Ava, so it speaks the app's language: a dark
+   rail with the indigo glow of the call screen, the ΛVΛ wordmark, light Inter
+   Tight display type, mono labels, soft cards and the breathing orb. */
+
+@font-face { font-family: "Inter Tight"; src: url(/fonts/inter-tight-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
+@font-face { font-family: "Inter"; src: url(/fonts/inter-var.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
 @font-face { font-family: "Plex Mono"; src: url(/fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
+@font-face { font-family: "Plex Mono"; src: url(/fonts/plex-mono-500.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
 
 :root {
-  --ink: #0A0A0C; --ink2: #4A4B55; --meta: #686975; --line: #E6E6EB; --soft: #F5F5F7; --card: #FFFFFF;
-  --accent: #4F46E5; --accent-tint: rgba(79,70,229,0.08); --ok: #15803D; --ok-tint: #ECFDF3; --err: #B42318; --err-tint: #FEF3F2;
-  --radius: 14px;
+  --ink: #0A0A0C; --ink2: #4A4B55; --meta: #686975; --line: #E6E6EB; --edge: #DCDCE3; --soft: #F5F5F7; --card: #FFFFFF;
+  --accent: #4F46E5; --accent-ink: #3730A3; --accent-tint: rgba(79,70,229,.08); --accent-line: rgba(79,70,229,.30);
+  --ok: #15803D; --ok-tint: #ECFDF3; --err: #B42318; --err-tint: #FEF3F2;
+  --night: #0B0B12;
+  --orb: radial-gradient(circle at 34% 30%, #E4E5FF, #6366F1 48%, #3730A3 100%);
+  --shadow-sm: 0 1px 2px rgba(10,10,12,.04), 0 1px 3px rgba(10,10,12,.05);
+  --shadow-md: 0 1px 2px rgba(10,10,12,.04), 0 12px 32px -12px rgba(10,10,12,.16);
+  --ease: cubic-bezier(.16,1,.3,1);
+  --disp: "Inter Tight", Inter, sans-serif; --mono: "Plex Mono", ui-monospace, monospace;
+  --radius: 16px;
 }
 * { box-sizing: border-box; }
 [hidden] { display: none !important; } /* author display rules (e.g. .field) must not un-hide things */
-html, body { margin: 0; background: var(--soft); color: var(--ink); font: 16px/1.5 Inter, -apple-system, "Segoe UI", sans-serif; }
+html, body { margin: 0; background: var(--soft); color: var(--ink); font: 16px/1.5 Inter, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
 a { color: var(--accent); }
-code { font: 13px "Plex Mono", ui-monospace, monospace; background: var(--soft); padding: 1px 5px; border-radius: 5px; }
-
-.shell { display: grid; grid-template-columns: 300px 1fr; min-height: 100vh; min-height: 100dvh; }
-.rail { background: var(--ink); color: #fff; padding: 36px 30px; display: flex; flex-direction: column; gap: 36px; }
-.brand { display: flex; align-items: center; gap: 12px; font: 600 20px "Inter Tight", sans-serif; }
-.brand svg { width: 34px; height: 34px; }
-.brand svg rect { fill: #fff; } .brand svg path { stroke: #0A0A0C; }
-.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: s; }
-.steps li { counter-increment: s; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #9D9DAB; font-weight: 500; }
-.steps li::before { content: counter(s); width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #3A3A46; font: 500 13px "Plex Mono", monospace; }
-.steps li.done { color: #D6D6E0; } .steps li.done::before { content: "✓"; background: #2B2B36; border-color: #2B2B36; }
-.steps li.current { color: #fff; background: #1C1C24; } .steps li.current::before { border-color: #A5A0FF; color: #A5A0FF; }
-.rail-note { margin-top: auto; font-size: 13px; color: #9D9DAB; }
-.rail-note code { background: #1C1C24; color: #D6D6E0; }
-
-.panel { padding: 56px clamp(20px, 6vw, 88px); max-width: 860px; width: 100%; }
-.eyebrow { margin: 0 0 8px; font: 500 13px "Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
-h1 { margin: 0 0 12px; font: 600 clamp(28px, 4vw, 40px)/1.1 "Inter Tight", sans-serif; letter-spacing: -0.025em; }
-.lead { margin: 0 0 28px; color: var(--ink2); font-size: 17px; max-width: 640px; }
-
-.cards { display: grid; gap: 12px; margin-bottom: 24px; }
-.card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
-.card:hover { border-color: #CFCFD8; }
-.card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
+code { font: 13px var(--mono); background: var(--soft); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
+svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
+
+.shell { display: grid; grid-template-columns: 320px 1fr; min-height: 100vh; min-height: 100dvh; }
+
+/* ── rail ── */
+.rail { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--night); color: #fff; padding: 34px 28px 26px; display: flex; flex-direction: column; gap: 34px; isolation: isolate; }
+.rail::before { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; left: -220px; bottom: -260px; background: radial-gradient(closest-side, rgba(99,102,241,.42), transparent 72%); }
+.rail::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; right: -170px; top: -120px; background: radial-gradient(closest-side, rgba(165,160,255,.18), transparent 70%); }
+.brand { display: flex; align-items: center; gap: 12px; }
+.brand .wm { width: 52px; height: 22px; stroke-width: 0; }
+.brand .wm path { stroke: #fff; }
+.brand-tag { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #A5A0FF; border-left: 1px solid #2A2A36; padding-left: 12px; }
+
+.steps { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: s; }
+.steps::before { content: ""; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 1.5px; background: #262632; }
+.steps li { position: relative; counter-increment: s; display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; align-items: center; padding: 10px 10px; border-radius: 12px; color: #8E8EA0; transition: background .25s, color .25s; }
+.steps li::before { content: counter(s); grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--night); border: 1.5px solid #34343F; font: 500 12px var(--mono); transition: all .25s var(--ease); }
+.steps-name { font-weight: 500; font-size: 15px; }
+.steps-sub { font: 12px var(--mono); color: #8A8A9C; }
+.steps li.done { color: #D6D6E0; }
+.steps li.done::before { content: "✓"; background: #2B2B3A; border-color: #2B2B3A; color: #A5A0FF; }
+.steps li.current { color: #fff; background: rgba(255,255,255,.05); }
+.steps li.current::before { border-color: #A5A0FF; color: #fff; background: #3730A3; box-shadow: 0 0 0 5px rgba(99,102,241,.22); }
+.steps li.current .steps-sub { color: #B7B3FF; }
+
+.rail-card { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); }
+.rail-orb { width: 30px; height: 30px; border-radius: 50%; background: var(--orb); box-shadow: 0 0 22px rgba(124,108,246,.6); animation: breathe 2.8s ease-in-out infinite; }
+.rail-card-text { display: flex; flex-direction: column; flex: 1; }
+.rail-card-text b { font: 600 14px var(--disp); }
+.rail-card-text span { font-size: 11.5px; color: #B7B3FF; }
+.rail-wave { display: flex; gap: 3px; align-items: center; height: 18px; }
+.rail-wave i { width: 3px; border-radius: 3px; background: #A5A0FF; animation: wave 1.2s ease-in-out infinite; }
+.rail-wave i:nth-child(1) { height: 6px; } .rail-wave i:nth-child(2) { height: 12px; animation-delay: .15s; } .rail-wave i:nth-child(3) { height: 17px; animation-delay: .3s; } .rail-wave i:nth-child(4) { height: 10px; animation-delay: .45s; } .rail-wave i:nth-child(5) { height: 6px; animation-delay: .6s; }
+@keyframes wave { 50% { transform: scaleY(.45); opacity: .6; } }
+.rail-note { margin: 0; font-size: 13px; color: #A3A3B5; }
+.rail-note code { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #D6D6E0; word-break: break-all; }
+
+/* ── panel ── */
+.panel { position: relative; padding: 72px clamp(20px, 6vw, 96px) 64px; width: 100%; min-width: 0; }
+.panel > .step, .panel > .banner { max-width: 720px; }
+.progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line); }
+.progress i { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, #6366F1, var(--accent)); transition: width .6s var(--ease); }
+.step { animation: rise .5s var(--ease); }
+@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
+.eyebrow { margin: 0 0 12px; font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
+h1 { margin: 0 0 14px; font: 300 clamp(32px, 4.4vw, 48px)/1.05 var(--disp); letter-spacing: -.035em; }
+.lead { margin: 0 0 30px; color: var(--ink2); font-size: 17px; max-width: 620px; }
+
+/* welcome */
+.welcome { padding-top: 12px; }
+.hero-orb { position: relative; width: 112px; height: 112px; margin: 0 0 34px; display: grid; place-items: center; }
+.hero-orb span { width: 72px; height: 72px; border-radius: 50%; background: var(--orb); box-shadow: 0 0 60px rgba(124,108,246,.55); animation: breathe 2.8s ease-in-out infinite; }
+.hero-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent-line); animation: ring 2.8s var(--ease) infinite; }
+.hero-orb i:nth-child(2) { animation-delay: 1.4s; }
+.hero-orb.big { width: 150px; height: 150px; margin: 0 auto 38px; }
+.hero-orb.big span { width: 96px; height: 96px; }
+@keyframes breathe { 50% { transform: scale(1.06); } }
+@keyframes ring { from { transform: scale(.65); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
+.welcome-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; max-width: 620px; }
+.welcome-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
+.welcome-list svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
+.welcome-list li > span { display: flex; flex-direction: column; gap: 2px; }
+.welcome-list b { font: 600 16px var(--disp); }
+.welcome-list span span { color: var(--ink2); font-size: 14.5px; }
+
+/* option cards */
+.cards { display: grid; gap: 12px; margin-bottom: 26px; }
+.card { position: relative; display: flex; gap: 16px; align-items: center; padding: 18px 20px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
+.card:hover { border-color: #CFCFD8; transform: translateY(-1px); box-shadow: var(--shadow-md); }
+.card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint), var(--shadow-md); }
 .card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
-.card input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
+.card:has(input:disabled) { cursor: default; }
+.card input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* the whole card is the control */
+.card-icon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); color: var(--ink2); transition: all .2s; }
+.card-icon svg { width: 21px; height: 21px; }
+.card:has(input:checked) .card-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
 .card-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
-.card-body b { font: 600 17px "Inter Tight", sans-serif; }
+.card-body b { font: 600 17px var(--disp); letter-spacing: -.005em; }
 .card-body span { color: var(--ink2); font-size: 14.5px; }
+.card::after { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--edge); transition: all .2s; }
+.card:has(input[type=checkbox])::after { border-radius: 7px; }
+.card:has(input:checked)::after { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
 .card:has(.badge) .card-body { padding-right: 84px; }
-.badge { position: absolute; top: 16px; right: 18px; font: 500 12px "Plex Mono", monospace; color: var(--ok); background: var(--ok-tint); padding: 2px 8px; border-radius: 99px; }
+.badge { position: absolute; top: 14px; right: 54px; font: 500 12px var(--mono); color: var(--ok); background: var(--ok-tint); padding: 2px 8px; border-radius: 99px; }
 
+/* fields */
 .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
 .field label { font-weight: 600; font-size: 15px; }
+.keybox { padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
 .opt { font-weight: 400; color: var(--meta); }
 .row { display: flex; gap: 8px; flex-wrap: wrap; }
-input[type=text], input[type=password], input[type=number] { flex: 1; min-width: 200px; height: 46px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px; font: 15px "Plex Mono", monospace; background: #fff; color: var(--ink); }
+input[type=text], input[type=password], input[type=number] { flex: 1; min-width: 200px; height: 48px; padding: 0 15px; border: 1.5px solid var(--edge); border-radius: 12px; font: 15px var(--mono); background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
 input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
 input.short { max-width: 160px; flex: none; }
 .hint { margin: 0; color: var(--meta); font-size: 14px; }
 .keep label, .check { font-weight: 400 !important; display: flex; gap: 10px; align-items: center; font-size: 15px; }
 .keep input, .check input { width: 18px; height: 18px; accent-color: var(--accent); }
+.connect { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+.or { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; color: var(--meta); font-size: 13px; font-family: var(--mono); letter-spacing: .04em; }
+.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
 
 .status { margin: 0; min-height: 22px; font-size: 14.5px; }
 .status.ok { color: var(--ok); } .status.err { color: var(--err); }
 .banner { padding: 14px 18px; border-radius: 12px; margin-bottom: 24px; }
 .banner.error { background: var(--err-tint); color: var(--err); }
 
-.job { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
+/* downloads */
+.job { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
 .job-head { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 10px; font-weight: 500; }
-.job-head span:last-child { font-family: "Plex Mono", monospace; color: var(--meta); }
+.job-head span:last-child { font-family: var(--mono); color: var(--meta); }
 .bar { height: 8px; background: var(--soft); border-radius: 99px; overflow: hidden; }
-.bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .3s; }
+.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6366F1, var(--accent)); border-radius: 99px; transition: width .3s; }
 .job.done .bar i { background: var(--ok); } .job.error .bar i { background: var(--err); }
 
-.summary { display: grid; grid-template-columns: max-content 1fr; gap: 14px 28px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 0 0 20px; }
-.summary dt { color: var(--meta); font-size: 14.5px; } .summary dd { margin: 0; font-weight: 500; word-break: break-word; }
+/* review */
+.summary { display: grid; grid-template-columns: max-content 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 20px; box-shadow: var(--shadow-sm); overflow: hidden; }
+.summary dt, .summary dd { padding: 15px 22px; border-bottom: 1px solid var(--line); margin: 0; }
+.summary dt { color: var(--meta); font-size: 14.5px; }
+.summary dd { font-weight: 500; word-break: break-word; }
+.summary > :nth-last-child(-n+2) { border-bottom: 0; }
 
-.nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 12px; }
-.btn { height: 46px; padding: 0 22px; border-radius: 99px; font: 600 15px "Inter Tight", sans-serif; cursor: pointer; border: 1.5px solid transparent; }
-.btn.primary { background: var(--ink); color: #fff; }
-.btn.primary:hover { background: #24242C; }
-.btn.primary:disabled { background: #B9B9C3; cursor: not-allowed; }
-.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
-.btn.ghost:hover { border-color: #CFCFD8; }
+/* buttons */
+.nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; gap: 12px; }
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 24px; border-radius: 99px; font: 600 15px var(--disp); cursor: pointer; border: 1.5px solid transparent; transition: background .15s, border-color .15s, transform .15s var(--ease), box-shadow .2s; }
+.btn:active { transform: scale(.98); }
+.btn svg { width: 17px; height: 17px; }
+.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px -10px rgba(79,70,229,.7); }
+.btn.primary:hover { background: var(--accent-ink); }
+.btn.primary:disabled { background: #B9B9C3; box-shadow: none; cursor: not-allowed; }
+.btn.ghost { background: #fff; color: var(--ink); border-color: var(--edge); }
+.btn.ghost:hover { border-color: #C6C6D0; background: var(--soft); }
 .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
 
-.launching { text-align: center; padding-top: 12vh; }
+.launching { text-align: center; padding-top: 10vh; }
 .launching .lead { margin-inline: auto; }
-.orb { width: 120px; height: 120px; margin: 0 auto 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #C9C4FF 0%, #8B7CFF 28%, #5B4FF0 60%, #3B2FC4 100%); box-shadow: 0 0 80px rgba(124,108,246,.55); animation: pulse 1.6s ease-in-out infinite; }
-@keyframes pulse { 50% { transform: scale(1.06); box-shadow: 0 0 120px rgba(124,108,246,.75); } }
-@media (prefers-reduced-motion: reduce) { .orb { animation: none; } .bar i { transition: none; } }
 
-@media (max-width: 760px) {
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
+
+@media (max-width: 860px) {
   .shell { grid-template-columns: 1fr; }
-  .rail { padding: 20px; gap: 16px; }
+  .rail { position: relative; height: auto; padding: 18px 16px; gap: 14px; }
   .steps { flex-direction: row; overflow-x: auto; gap: 4px; }
-  .steps li { padding: 6px 8px; font-size: 0; gap: 0; } .steps li.current { font-size: 14px; gap: 8px; }
-  .rail-note { display: none; }
-  .panel { padding: 32px 16px; }
+  .steps::before, .steps-sub, .rail-card, .rail-note { display: none; }
+  .steps li { grid-template-columns: 28px; padding: 6px; }
+  .steps-name { display: none; }
+  .steps li.current { grid-template-columns: 28px auto; column-gap: 8px; }
+  .steps li.current .steps-name { display: inline; font-size: 14px; }
+  .panel { padding: 36px 16px 48px; }
+  .card { padding: 16px; gap: 12px; }
+  .card-icon { width: 40px; height: 40px; }
 }