/* ============================================================ AMOR CONNECTION — AXIS cockpit Design tokens + global resets, keyframes, focus ring. Two themes — Blue (default) and Pink — toggled via a [data-theme] attribute on (set in Account · Theme). Every accent/bloom/line routes through per-theme vars, so the whole field + elements re-hue on toggle. Signature: the Arc Reactor energy gauge (AI token balance). ============================================================ */ :root{ /* theme-agnostic constants */ --amber:#F5A524; --green:#34D399; --rose:#FB5A87; --violet:#A78BFA; --font-display:'Space Grotesk',system-ui,sans-serif; --font-body:'Plus Jakarta Sans',system-ui,sans-serif; --font-mono:'DM Mono','SFMono-Regular',ui-monospace,monospace; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --rail:84px; --maxw:1080px; --ease:cubic-bezier(.16,1,.3,1); /* --glow-rgb is theme-defined; the elevation shadow reads it */ --glow:0 0 0 1px var(--line), 0 24px 60px -28px rgba(0,0,0,.9), 0 0 40px -20px rgba(var(--glow-rgb),.25); color-scheme:dark; /* native selects, checkboxes & date/time pickers render dark */ } /* ── Blue (default) ───────────────────────────────────────── */ :root, :root[data-theme="blue"]{ --void:#07101F; --panel:#102338; --panel-2:#142A44; --panel-3:#1D3A5C; --line:rgba(120,180,235,.16); --line-strong:rgba(120,190,255,.34); --ink:#EDF4FB; --ink-2:#9FB6CF; --ink-3:#647E9E; --ink-4:#8892A6; --reactor:#3CC5FF; --reactor-2:#6AD5FF; --reactor-deep:#0E6FB4; --on-reactor:#04141f; --glow-rgb:80,196,255; --grad-a:#FF4DA6; --grad-b:#38C4FF; /* heart/brand gradient stays pink→blue in both themes */ --bg-field:radial-gradient(1200px 780px at 78% -14%, #123B66 0%, #0B2140 40%, #060E1C 100%); } /* ── Pink ─────────────────────────────────────────────────── */ :root[data-theme="pink"]{ --void:#160711; --panel:#2A1524; --panel-2:#31192B; --panel-3:#40233A; --line:rgba(255,150,205,.15); --line-strong:rgba(255,140,200,.34); --ink:#F9EFF4; --ink-2:#CFA9BD; --ink-3:#906B7E; --ink-4:#A98595; --reactor:#FF4FA6; --reactor-2:#FF7ABE; --reactor-deep:#B01863; --on-reactor:#2a0714; --glow-rgb:255,105,180; --grad-a:#FF5CAE; --grad-b:#38C4FF; --bg-field:radial-gradient(1200px 780px at 78% -14%, #5C1B47 0%, #2C1024 40%, #150710 100%); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;height:100%} body{ font-family:var(--font-body); color:var(--ink); background:var(--bg-field); background-attachment:fixed; -webkit-font-smoothing:antialiased; overflow:hidden; position:relative; overflow-wrap:break-word; /* inherited safety net: long unbroken strings wrap instead of bleeding off-screen */ } img{max-width:100%} /* never let an image force horizontal overflow on mobile */ /* technical grid + ambient reactor bloom (both re-hue via --glow-rgb) */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(rgba(var(--glow-rgb),.035) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--glow-rgb),.035) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(1200px 800px at 70% -5%,#000 30%,transparent 75%); mask-image:radial-gradient(1200px 800px at 70% -5%,#000 30%,transparent 75%);} body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background:radial-gradient(900px 600px at 78% -10%,rgba(var(--glow-rgb),.16),transparent 60%), radial-gradient(700px 500px at -10% 110%,rgba(167,139,250,.10),transparent 55%);} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,textarea{font-family:inherit} ::-webkit-scrollbar{width:0;height:0} *{scrollbar-width:none} .mono{font-family:var(--font-mono)} /* keyboard focus ring — consistent across every interactive element */ :focus-visible{outline:2px solid var(--reactor);outline-offset:2px;border-radius:3px} @keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(900%)}} @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}