/* CapyEV's shell on the website: design tokens, the bottom tab bar, page headers, motion, loading and offline states, and a small kit of controls (.cx-*) for the pages that aren't components (Quote, Alerts, Tools), styled like the Combos list (combo_tracker/ui/table.css). The server fills in the logo and the tab icon font (web/brand.py fill_css). */ :root { --cx-bg: #000; --cx-surface: #070b0d; /* cards, inputs, segment tracks (table.css --panel) */ --cx-raised: #0d1519; /* floating layers only: toasts, the offline pill */ --cx-line: #12222a; /* dividers, card borders (table.css --line) */ --cx-line-2: #1b3540; /* control borders (table.css --line2) */ --cx-text: #e6fbff; --cx-text-2: #b4ccd2; --cx-dim: #6f8f99; /* 6:1 on black, the floor for small text */ --cx-accent: #00e5ff; --cx-accent-wash: rgba(0, 229, 255, 0.14); --cx-on-accent: #001a1f; /* text on cyan */ --cx-pos: #2ee6a6; --cx-neg: #ff5c6c; --cx-warn: #ffc857; --cx-lit: linear-gradient(180deg, #0d3a44, #082a31); /* the chosen segment (table.css .seg .on) */ --cx-lit-ring: inset 0 0 0 1px rgba(0, 229, 255, 0.4); --cx-font: "Nunito", ui-rounded, "SF Pro Rounded", ui-sans-serif, -apple-system, system-ui, sans-serif; /* Motion: quick and precise. Only opacity and transform move, nothing runs over 300 ms, exits beat entrances. */ --cx-ease: cubic-bezier(0.2, 0, 0, 1); --cx-ease-in: cubic-bezier(0.05, 0.7, 0.1, 1); --cx-press: 60ms; --cx-short: 150ms; --cx-med: 250ms; --cx-tabbar: 62px; /* the bar's height above the home indicator */ color-scheme: dark; } * {box-sizing: border-box;} [hidden] {display: none !important;} /* the `hidden` attribute hides, even on a .cx-* box that sets display */ html {background: var(--cx-bg); -webkit-text-size-adjust: 100%;} html, body {-webkit-tap-highlight-color: transparent;} body {margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--cx-bg); color: var(--cx-text); font: 400 14px/1.4 var(--cx-font); font-variant-numeric: tabular-nums; overscroll-behavior-y: none;} button, input, select, textarea {font: inherit; color: inherit;} a {color: var(--cx-accent);} /* ---------- Pages: one section each, kept in the page when hidden, so a tab switch is instant ---------- */ #pages {max-width: 760px; margin: 0 auto; overflow-wrap: anywhere; /* a long error text wraps, never widens the page */ padding: calc(0.4rem + env(safe-area-inset-top)) 0.5rem calc(var(--cx-tabbar) + 34px + env(safe-area-inset-bottom));} .cx-page {display: flex; flex-direction: column; gap: 0.25rem;} .cx-page[hidden] {display: none;} .cx-page.cx-enter {animation: capy-fade var(--cx-short) var(--cx-ease-in) both;} @keyframes capy-fade {from {opacity: 0;}} @keyframes capy-in {from {opacity: 0; transform: translateY(4px);}} .cx-component {display: block;} /* ---------- The bottom tab bar, like Kalshi's app: the pages around a cyan capybara button that goes Home ---------- */ @font-face { /* filled and outlined versions of the four tab icons (Material Symbols Rounded, 4.5 KB subset) */ font-family: "CapyTab"; font-style: normal; font-weight: 400 700; font-display: block; src: url("data:font/woff2;base64,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") format("woff2"); } .cx-tabbar {position: fixed; left: 0; right: 0; bottom: 0; z-index: 999990; display: flex; align-items: flex-end; justify-content: space-around; --capy: clamp(46px, calc(100vw / 5 - 4px), 58px); padding: 4px max(6px, calc(50vw - 380px)) calc(4px + env(safe-area-inset-bottom)) max(6px, calc(50vw - 380px)); background: #030608; border-top: 1px solid var(--cx-line); user-select: none; -webkit-user-select: none;} .cx-tabbar a {flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; padding: 2px 0; text-decoration: none; -webkit-touch-callout: none;} .cx-tabbar .ic {font-family: "CapyTab"; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400; display: flex; align-items: center; justify-content: center; width: 54px; height: 28px; border-radius: 999px; font-size: 23px; line-height: 1; color: var(--cx-dim); overflow: hidden; white-space: nowrap; transition: background-color var(--cx-med) var(--cx-ease), color var(--cx-med) var(--cx-ease), transform 160ms var(--cx-ease);} .cx-tabbar .lb {font-size: 11px; font-weight: 700; color: var(--cx-dim); letter-spacing: 0.01em; transition: color var(--cx-med) var(--cx-ease);} .cx-tabbar a.on .ic {font-variation-settings: "FILL" 1, "wght" 600; color: var(--cx-accent); background: rgba(0, 229, 255, 0.18);} .cx-tabbar a.on .lb {font-weight: 900; color: var(--cx-text);} .cx-tabbar a:active .ic {transform: scale(0.88); transition-duration: var(--cx-press);} /* Home: the capybara in a cyan circle, raised above the bar. */ .cx-tabbar a.capy {flex: 0 0 auto; min-height: 0; margin: 0 4px; padding: 0;} .cx-tabbar a.capy i {display: grid; place-items: center; width: var(--capy); height: var(--capy); margin-top: calc(var(--capy) * -0.41); margin-bottom: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7ff4ff 0%, #00e5ff 38%, #00a9c4 100%); border: 3px solid #000; box-shadow: 0 0 0 1.5px rgba(0, 229, 255, 0.55), 0 0 22px rgba(0, 229, 255, 0.45), 0 6px 14px rgba(0, 0, 0, 0.6); transition: transform 160ms var(--cx-ease), box-shadow var(--cx-med) var(--cx-ease);} .cx-tabbar a.capy i::before {content: ""; width: calc(var(--capy) * 0.76); height: calc(var(--capy) * 0.76); background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkNhcHlFViI+CiAgPGcgc3Ryb2tlPSIjMjQxNzEyIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC44KSI+CiAgICA8IS0tIGVhcnMgLS0+CiAgICA8cGF0aCBkPSJNMTMuOCAyMS40IEMxMy42IDE2LjIgMTcuNCAxMi44IDIxLjggMTIuOSBDMjYuNCAxMyAyOS44IDE2LjYgMjkuNCAyMS4yIEMyOSAyNS42IDI1LjQgMjguOCAyMS40IDI4LjcgQzE3LjIgMjguNiAxNCAyNS42IDEzLjggMjEuNCBaIiBmaWxsPSIjRDI5RTcyIi8+CiAgICA8cGF0aCBkPSJNODYuMiAyMS42IEM4Ni4zIDE2LjQgODIuNiAxMyA3OC4yIDEzLjEgQzczLjYgMTMuMiA3MC4zIDE2LjggNzAuNyAyMS40IEM3MS4xIDI1LjggNzQuNyAyOC44IDc4LjcgMjguNyBDODIuOSAyOC42IDg2LjEgMjUuOCA4Ni4yIDIxLjYgWiIgZmlsbD0iI0QyOUU3MiIvPgogICAgPHBhdGggZD0iTTE3LjQgMjIuMiBDMTcuMiAxOC44IDE5LjYgMTYuNiAyMi42IDE2LjggQzI1LjYgMTcgMjcuMiAxOS42IDI2LjQgMjIuNCBDMjUuNiAyNSAyMyAyNi4yIDIwLjYgMjUuOCBDMTguOCAyNS40IDE3LjUgMjQgMTcuNCAyMi4yIFoiIGZpbGw9IiM4RTVCNDciIHN0cm9rZT0ibm9uZSIvPgogICAgPHBhdGggZD0iTTgyLjYgMjIuNCBDODIuOCAxOSA4MC40IDE2LjggNzcuNCAxNyBDNzQuNCAxNy4yIDcyLjggMTkuOCA3My42IDIyLjYgQzc0LjQgMjUuMiA3NyAyNi40IDc5LjQgMjYgQzgxLjIgMjUuNiA4Mi41IDI0LjIgODIuNiAyMi40IFoiIGZpbGw9IiM4RTVCNDciIHN0cm9rZT0ibm9uZSIvPgogICAgPCEtLSBib2R5IGxvYWY6IGZpbGwsIHRoZW4gb3V0bGluZSB3aXRoIGEgZ2FwIGF0IHRoZSB0b3AgZm9yIHRoZSBoYWlyIChyZWZlcmVuY2UpIC0tPgogICAgPHBhdGggZD0iTTUwIDEzLjYgQzYzLjIgMTMuNCA3NCAxNy44IDc5LjQgMjYuOCBDODEuNiAzMC44IDgzLjIgMzQuNiA4MyAzOC40IEM4OS44IDQyLjQgOTQuNiA1MCA5NC42IDYwIEM5NC42IDcyIDkyIDgxLjYgODQgODEuNiBMMTYgODEuNiBDOCA4MS42IDUuNCA3MiA1LjQgNjAgQzUuNCA1MCAxMC4yIDQyLjQgMTcgMzguNCBDMTYuOCAzNC42IDE4LjQgMzAuOCAyMC42IDI2LjggQzI2IDE3LjggMzYuOCAxMy40IDUwIDEzLjYgWiIgZmlsbD0iI0QyOUU3MiIgc3Ryb2tlPSJub25lIi8+CiAgICA8cGF0aCBkPSJNNTQuNDAgMTMuNzEgQzY1LjU4IDE0LjQ2IDc0LjYxIDE4LjgyIDc5LjQwIDI2LjgwIEM4MS42IDMwLjggODMuMiAzNC42IDgzIDM4LjQgQzg5LjggNDIuNCA5NC42IDUwIDk0LjYgNjAgQzk0LjYgNzIgOTIgODEuNiA4NCA4MS42IEwxNiA4MS42IEM4IDgxLjYgNS40IDcyIDUuNCA2MCBDNS40IDUwIDEwLjIgNDIuNCAxNyAzOC40IEMxNi44IDM0LjYgMTguNCAzMC44IDIwLjYgMjYuOCBDMjUuMzkgMTguODIgMzQuNDIgMTQuNDYgNDUuNjAgMTMuNzEiIGZpbGw9Im5vbmUiLz4KICAgIDwhLS0gaGVhZC9jaGVlayBob29rIChyZWZlcmVuY2Ugbm90Y2gpIC0tPgogICAgPHBhdGggZD0iTTE3IDM4LjQgUTE5LjIgMzkuNCAyMC42IDM3LjggTTgzIDM4LjQgUTgwLjggMzkuNCA3OS40IDM3LjgiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMi40Ii8+CiAgICA8IS0tIGhhaXIgLS0+CiAgICA8cGF0aCBkPSJNNDcgMTQuNiBRNDYuNSAxMi42IDQ1LjYgMTEuMiBNNTAuMSAxNC4yIFE1MCAxMiA1MC43IDEwLjIgTTUzLjIgMTQuNiBRNTMuOCAxMi42IDU0LjkgMTEuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyLjMiLz4KICAgIDwhLS0gbXV6emxlIC0tPgogICAgPHBhdGggZD0iTTUwIDM0LjIgQzU5IDM0IDY1LjYgNDAuMiA2NS42IDQ4LjYgQzY1LjYgNTcgNTkgNjIuNCA1MCA2Mi40IEM0MSA2Mi40IDM0LjQgNTcgMzQuNCA0OC42IEMzNC40IDQwLjIgNDEgMzQuNCA1MCAzNC4yIFoiIGZpbGw9IiM4RTVCNDciIHN0cm9rZT0ibm9uZSIvPgogICAgPCEtLSBjaGVlayBsaW5lcyAiKSgiIGxpa2UgdGhlIHJlZmVyZW5jZSAtLT4KICAgIDxwYXRoIGQ9Ik0zNC42IDQyLjQgUTM4LjYgNDkuNCAzNS40IDU2LjQgTTY1LjQgNDIuNCBRNjEuNCA0OS40IDY0LjYgNTYuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyLjQiLz4KICAgIDxlbGxpcHNlIGN4PSIyNC44IiBjeT0iNDYuOCIgcng9IjQuNiIgcnk9IjIuNiIgZmlsbD0iI0YwOEE4MCIgb3BhY2l0eT0iLjUiIHN0cm9rZT0ibm9uZSIvPgogICAgPGVsbGlwc2UgY3g9Ijc1LjIiIGN5PSI0Ni44IiByeD0iNC42IiByeT0iMi42IiBmaWxsPSIjRjA4QTgwIiBvcGFjaXR5PSIuNSIgc3Ryb2tlPSJub25lIi8+CiAgICA8IS0tIGV5ZXMgLS0+CiAgICA8cGF0aCBkPSJNMjkuNiAzNC40IEMzMSAzNy4yIDM0LjQgMzguNiAzNy42IDM2LjIgTTcwLjQgMzQuNiBDNjkgMzcuNCA2NS42IDM4LjYgNjIuNCAzNi40IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjMiLz4KICAgIDwhLS0gbm9zZSAtLT4KICAgIDxwYXRoIGQ9Ik00NiA0MC41IEw0Ny4xIDQxLjUgTTU0IDQwLjUgTDUyLjkgNDEuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyLjQiLz4KICAgIDxwYXRoIGQ9Ik01MCA0My44IEw1MCA0OS42IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIuNCIvPgogICAgPCEtLSBzdHJhdyAtLT4KICAgIDxwYXRoIGQ9Ik01MC41IDUxLjIgTDU1IDYzLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iNy40IiBzdHJva2UtbGluZWNhcD0iYnV0dCIvPgogICAgPHBhdGggZD0iTTUwLjUgNTEuMiBMNTUgNjMuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDBFNUZGIiBzdHJva2Utd2lkdGg9IjQuMyIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz4KICAgIDxwYXRoIGQ9Ik00NS40IDUwLjQgUTQ3LjggNTMuMiA1MCA1MC4yIFE1Mi4yIDUzLjIgNTQuNiA1MC40IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIuNCIvPgogICAgPCEtLSBjdXAgLS0+CiAgICA8cGF0aCBkPSJNMzUgNjQgTDY1IDY0IEw2MiA4OC42IFE2MS42IDkxLjIgNTkgOTEuMiBMNDEgOTEuMiBRMzguNCA5MS4yIDM4IDg4LjYgWiIgZmlsbD0iI0Y2RUNERiIvPgogICAgPHBhdGggZD0iTTM1LjYgNzAuMiBMNjQuNCA3MC4yIEw2MiA4OC42IFE2MS42IDkxLjIgNTkgOTEuMiBMNDEgOTEuMiBRMzguNCA5MS4yIDM4IDg4LjYgWiIgZmlsbD0iI0U4Qzc5QyIgc3Ryb2tlPSJub25lIi8+CiAgICA8cGF0aCBkPSJNNTUgNjQgTDU3IDg0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwRTVGRiIgc3Ryb2tlLXdpZHRoPSIzIiBvcGFjaXR5PSIuNTUiLz4KICAgIDxwYXRoIGQ9Ik0zOS42IDY4LjYgTDQxLjIgODYuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIG9wYWNpdHk9Ii43NSIvPgogICAgPGcgZmlsbD0iIzNBMjMxOCIgc3Ryb2tlPSJub25lIj4KICAgICAgPGNpcmNsZSBjeD0iNDQuNiIgY3k9Ijg2LjYiIHI9IjIuOSIvPjxjaXJjbGUgY3g9IjUwLjQiIGN5PSI4Ny40IiByPSIyLjkiLz48Y2lyY2xlIGN4PSI1NiIgY3k9Ijg2LjQiIHI9IjIuOSIvPgogICAgICA8Y2lyY2xlIGN4PSI0Ny40IiBjeT0iODEuOCIgcj0iMi45Ii8+PGNpcmNsZSBjeD0iNTMuNCIgY3k9IjgxLjYiIHI9IjIuOSIvPgogICAgPC9nPgogICAgPHBhdGggZD0iTTM1IDY0IEw2NSA2NCBMNjIgODguNiBRNjEuNiA5MS4yIDU5IDkxLjIgTDQxIDkxLjIgUTM4LjQgOTEuMiAzOCA4OC42IFoiIGZpbGw9Im5vbmUiLz4KICAgIDxyZWN0IHg9IjMyLjYiIHk9IjYwLjYiIHdpZHRoPSIzNC44IiBoZWlnaHQ9IjYuNCIgcng9IjMuMiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgPCEtLSBwYXdzIGh1Z2dpbmcgdGhlIGN1cCAtLT4KICAgIDxjaXJjbGUgY3g9IjMyLjYiIGN5PSI3NC42IiByPSI2LjQiIGZpbGw9IiM4RTVCNDciLz4KICAgIDxjaXJjbGUgY3g9IjY3LjQiIGN5PSI3NC44IiByPSI2LjQiIGZpbGw9IiM4RTVCNDciLz4KICA8L2c+Cjwvc3ZnPgo=") center / contain no-repeat;} .cx-tabbar a.capy.on i {box-shadow: 0 0 0 2px var(--cx-text), 0 0 28px rgba(0, 229, 255, 0.7), 0 6px 14px rgba(0, 0, 0, 0.6);} .cx-tabbar a.capy:active i {transform: scale(0.93); transition-duration: var(--cx-press);} /* A thin cyan line along the top of the bar while an answer takes longer than 0.8 s. */ .cx-tabbar::before {content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 30%; opacity: 0; background: linear-gradient(90deg, transparent, var(--cx-accent), transparent); pointer-events: none;} body.cx-busy .cx-tabbar::before {animation: capy-work 1.1s linear 0.8s infinite, capy-show var(--cx-short) linear 0.8s forwards;} @keyframes capy-work {from {transform: translateX(-100%);} to {transform: translateX(340%);}} @keyframes capy-show {to {opacity: 1;}} /* ---------- Page header: the tab's capybara and its title, 44 px tall ---------- */ .cx-head {display: flex; align-items: center; gap: 8px; height: 44px; margin: 2px 2px 2px;} .cx-head img {width: 44px; height: 44px; flex: none; margin-left: -2px;} .cx-head h1 {margin: 0; padding: 0; font: 900 26px/1.1 var(--cx-font); letter-spacing: -0.02em; color: var(--cx-text);} @media (max-width: 380px) {.cx-head h1 {font-size: 24px;}} /* ---------- Waiting: the boba capybara bobbing gently instead of a spinning ring ---------- */ .cx-wait {display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 0 12px; text-align: center;} .cx-wait::before {content: ""; width: 64px; height: 64px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkNhcHlFViI+CiAgPGcgc3Ryb2tlPSIjMjQxNzEyIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC44KSI+CiAgICA8IS0tIGVhcnMgLS0+CiAgICA8cGF0aCBkPSJNMTMuOCAyMS40IEMxMy42IDE2LjIgMTcuNCAxMi44IDIxLjggMTIuOSBDMjYuNCAxMyAyOS44IDE2LjYgMjkuNCAyMS4yIEMyOSAyNS42IDI1LjQgMjguOCAyMS40IDI4LjcgQzE3LjIgMjguNiAxNCAyNS42IDEzLjggMjEuNCBaIiBmaWxsPSIjRDI5RTcyIi8+CiAgICA8cGF0aCBkPSJNODYuMiAyMS42IEM4Ni4zIDE2LjQgODIuNiAxMyA3OC4yIDEzLjEgQzczLjYgMTMuMiA3MC4zIDE2LjggNzAuNyAyMS40IEM3MS4xIDI1LjggNzQuNyAyOC44IDc4LjcgMjguNyBDODIuOSAyOC42IDg2LjEgMjUuOCA4Ni4yIDIxLjYgWiIgZmlsbD0iI0QyOUU3MiIvPgogICAgPHBhdGggZD0iTTE3LjQgMjIuMiBDMTcuMiAxOC44IDE5LjYgMTYuNiAyMi42IDE2LjggQzI1LjYgMTcgMjcuMiAxOS42IDI2LjQgMjIuNCBDMjUuNiAyNSAyMyAyNi4yIDIwLjYgMjUuOCBDMTguOCAyNS40IDE3LjUgMjQgMTcuNCAyMi4yIFoiIGZpbGw9IiM4RTVCNDciIHN0cm9rZT0ibm9uZSIvPgogICAgPHBhdGggZD0iTTgyLjYgMjIuNCBDODIuOCAxOSA4MC40IDE2LjggNzcuNCAxNyBDNzQuNCAxNy4yIDcyLjggMTkuOCA3My42IDIyLjYgQzc0LjQgMjUuMiA3NyAyNi40IDc5LjQgMjYgQzgxLjIgMjUuNiA4Mi41IDI0LjIgODIuNiAyMi40IFoiIGZpbGw9IiM4RTVCNDciIHN0cm9rZT0ibm9uZSIvPgogICAgPCEtLSBib2R5IGxvYWY6IGZpbGwsIHRoZW4gb3V0bGluZSB3aXRoIGEgZ2FwIGF0IHRoZSB0b3AgZm9yIHRoZSBoYWlyIChyZWZlcmVuY2UpIC0tPgogICAgPHBhdGggZD0iTTUwIDEzLjYgQzYzLjIgMTMuNCA3NCAxNy44IDc5LjQgMjYuOCBDODEuNiAzMC44IDgzLjIgMzQuNiA4MyAzOC40IEM4OS44IDQyLjQgOTQuNiA1MCA5NC42IDYwIEM5NC42IDcyIDkyIDgxLjYgODQgODEuNiBMMTYgODEuNiBDOCA4MS42IDUuNCA3MiA1LjQgNjAgQzUuNCA1MCAxMC4yIDQyLjQgMTcgMzguNCBDMTYuOCAzNC42IDE4LjQgMzAuOCAyMC42IDI2LjggQzI2IDE3LjggMzYuOCAxMy40IDUwIDEzLjYgWiIgZmlsbD0iI0QyOUU3MiIgc3Ryb2tlPSJub25lIi8+CiAgICA8cGF0aCBkPSJNNTQuNDAgMTMuNzEgQzY1LjU4IDE0LjQ2IDc0LjYxIDE4LjgyIDc5LjQwIDI2LjgwIEM4MS42IDMwLjggODMuMiAzNC42IDgzIDM4LjQgQzg5LjggNDIuNCA5NC42IDUwIDk0LjYgNjAgQzk0LjYgNzIgOTIgODEuNiA4NCA4MS42IEwxNiA4MS42IEM4IDgxLjYgNS40IDcyIDUuNCA2MCBDNS40IDUwIDEwLjIgNDIuNCAxNyAzOC40IEMxNi44IDM0LjYgMTguNCAzMC44IDIwLjYgMjYuOCBDMjUuMzkgMTguODIgMzQuNDIgMTQuNDYgNDUuNjAgMTMuNzEiIGZpbGw9Im5vbmUiLz4KICAgIDwhLS0gaGVhZC9jaGVlayBob29rIChyZWZlcmVuY2Ugbm90Y2gpIC0tPgogICAgPHBhdGggZD0iTTE3IDM4LjQgUTE5LjIgMzkuNCAyMC42IDM3LjggTTgzIDM4LjQgUTgwLjggMzkuNCA3OS40IDM3LjgiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMi40Ii8+CiAgICA8IS0tIGhhaXIgLS0+CiAgICA8cGF0aCBkPSJNNDcgMTQuNiBRNDYuNSAxMi42IDQ1LjYgMTEuMiBNNTAuMSAxNC4yIFE1MCAxMiA1MC43IDEwLjIgTTUzLjIgMTQuNiBRNTMuOCAxMi42IDU0LjkgMTEuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyLjMiLz4KICAgIDwhLS0gbXV6emxlIC0tPgogICAgPHBhdGggZD0iTTUwIDM0LjIgQzU5IDM0IDY1LjYgNDAuMiA2NS42IDQ4LjYgQzY1LjYgNTcgNTkgNjIuNCA1MCA2Mi40IEM0MSA2Mi40IDM0LjQgNTcgMzQuNCA0OC42IEMzNC40IDQwLjIgNDEgMzQuNCA1MCAzNC4yIFoiIGZpbGw9IiM4RTVCNDciIHN0cm9rZT0ibm9uZSIvPgogICAgPCEtLSBjaGVlayBsaW5lcyAiKSgiIGxpa2UgdGhlIHJlZmVyZW5jZSAtLT4KICAgIDxwYXRoIGQ9Ik0zNC42IDQyLjQgUTM4LjYgNDkuNCAzNS40IDU2LjQgTTY1LjQgNDIuNCBRNjEuNCA0OS40IDY0LjYgNTYuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyLjQiLz4KICAgIDxlbGxpcHNlIGN4PSIyNC44IiBjeT0iNDYuOCIgcng9IjQuNiIgcnk9IjIuNiIgZmlsbD0iI0YwOEE4MCIgb3BhY2l0eT0iLjUiIHN0cm9rZT0ibm9uZSIvPgogICAgPGVsbGlwc2UgY3g9Ijc1LjIiIGN5PSI0Ni44IiByeD0iNC42IiByeT0iMi42IiBmaWxsPSIjRjA4QTgwIiBvcGFjaXR5PSIuNSIgc3Ryb2tlPSJub25lIi8+CiAgICA8IS0tIGV5ZXMgLS0+CiAgICA8cGF0aCBkPSJNMjkuNiAzNC40IEMzMSAzNy4yIDM0LjQgMzguNiAzNy42IDM2LjIgTTcwLjQgMzQuNiBDNjkgMzcuNCA2NS42IDM4LjYgNjIuNCAzNi40IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjMiLz4KICAgIDwhLS0gbm9zZSAtLT4KICAgIDxwYXRoIGQ9Ik00NiA0MC41IEw0Ny4xIDQxLjUgTTU0IDQwLjUgTDUyLjkgNDEuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyLjQiLz4KICAgIDxwYXRoIGQ9Ik01MCA0My44IEw1MCA0OS42IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIuNCIvPgogICAgPCEtLSBzdHJhdyAtLT4KICAgIDxwYXRoIGQ9Ik01MC41IDUxLjIgTDU1IDYzLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iNy40IiBzdHJva2UtbGluZWNhcD0iYnV0dCIvPgogICAgPHBhdGggZD0iTTUwLjUgNTEuMiBMNTUgNjMuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDBFNUZGIiBzdHJva2Utd2lkdGg9IjQuMyIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz4KICAgIDxwYXRoIGQ9Ik00NS40IDUwLjQgUTQ3LjggNTMuMiA1MCA1MC4yIFE1Mi4yIDUzLjIgNTQuNiA1MC40IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIuNCIvPgogICAgPCEtLSBjdXAgLS0+CiAgICA8cGF0aCBkPSJNMzUgNjQgTDY1IDY0IEw2MiA4OC42IFE2MS42IDkxLjIgNTkgOTEuMiBMNDEgOTEuMiBRMzguNCA5MS4yIDM4IDg4LjYgWiIgZmlsbD0iI0Y2RUNERiIvPgogICAgPHBhdGggZD0iTTM1LjYgNzAuMiBMNjQuNCA3MC4yIEw2MiA4OC42IFE2MS42IDkxLjIgNTkgOTEuMiBMNDEgOTEuMiBRMzguNCA5MS4yIDM4IDg4LjYgWiIgZmlsbD0iI0U4Qzc5QyIgc3Ryb2tlPSJub25lIi8+CiAgICA8cGF0aCBkPSJNNTUgNjQgTDU3IDg0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwRTVGRiIgc3Ryb2tlLXdpZHRoPSIzIiBvcGFjaXR5PSIuNTUiLz4KICAgIDxwYXRoIGQ9Ik0zOS42IDY4LjYgTDQxLjIgODYuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIG9wYWNpdHk9Ii43NSIvPgogICAgPGcgZmlsbD0iIzNBMjMxOCIgc3Ryb2tlPSJub25lIj4KICAgICAgPGNpcmNsZSBjeD0iNDQuNiIgY3k9Ijg2LjYiIHI9IjIuOSIvPjxjaXJjbGUgY3g9IjUwLjQiIGN5PSI4Ny40IiByPSIyLjkiLz48Y2lyY2xlIGN4PSI1NiIgY3k9Ijg2LjQiIHI9IjIuOSIvPgogICAgICA8Y2lyY2xlIGN4PSI0Ny40IiBjeT0iODEuOCIgcj0iMi45Ii8+PGNpcmNsZSBjeD0iNTMuNCIgY3k9IjgxLjYiIHI9IjIuOSIvPgogICAgPC9nPgogICAgPHBhdGggZD0iTTM1IDY0IEw2NSA2NCBMNjIgODguNiBRNjEuNiA5MS4yIDU5IDkxLjIgTDQxIDkxLjIgUTM4LjQgOTEuMiAzOCA4OC42IFoiIGZpbGw9Im5vbmUiLz4KICAgIDxyZWN0IHg9IjMyLjYiIHk9IjYwLjYiIHdpZHRoPSIzNC44IiBoZWlnaHQ9IjYuNCIgcng9IjMuMiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgPCEtLSBwYXdzIGh1Z2dpbmcgdGhlIGN1cCAtLT4KICAgIDxjaXJjbGUgY3g9IjMyLjYiIGN5PSI3NC42IiByPSI2LjQiIGZpbGw9IiM4RTVCNDciLz4KICAgIDxjaXJjbGUgY3g9IjY3LjQiIGN5PSI3NC44IiByPSI2LjQiIGZpbGw9IiM4RTVCNDciLz4KICA8L2c+Cjwvc3ZnPgo=") center / contain no-repeat; animation: capy-bob 1.6s ease-in-out infinite;} .cx-wait p, .cx-wait span {margin: 0; font: 700 13px/1.4 var(--cx-font); color: var(--cx-text-2);} .cx-wait.inline {flex-direction: row; gap: 8px; padding: 4px 0;} .cx-wait.inline::before {width: 26px; height: 26px;} @keyframes capy-bob {50% {transform: translateY(-4px) rotate(-2deg);}} /* Offline: a calm pill, and the page dims so old numbers look old. */ body.cx-offline #pages {opacity: 0.55; transition: opacity 0.3s var(--cx-ease) 1s;} .cx-pill {position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; z-index: 1000000; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; background: var(--cx-raised); border: 1px solid var(--cx-line-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); color: var(--cx-text); font: 800 13px var(--cx-font); white-space: nowrap; animation: capy-fade var(--cx-short) var(--cx-ease-in) both;} .cx-pill[hidden] {display: none;} /* Toasts: one line on a raised card just above the tab bar (the Combos list's own toast sits there too). */ .cx-toast {position: fixed; left: 50%; z-index: 999995; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translate(-50%, 8px); opacity: 0; max-width: min(92vw, 520px); padding: 10px 16px; border-radius: 16px; background: var(--cx-raised); border: 1px solid var(--cx-line-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); font: 700 13.5px/1.35 var(--cx-font); color: var(--cx-text); pointer-events: none; transition: opacity var(--cx-short) var(--cx-ease), transform var(--cx-short) var(--cx-ease);} .cx-toast.show {opacity: 1; transform: translate(-50%, 0);} /* ---------- The lock screen (the keypad component, or the password box), over everything ---------- */ #cx-lock {position: fixed; inset: 0; z-index: 1000000; background: var(--cx-bg);} #cx-lock[hidden] {display: none;} #cx-lock.keypad {background: none; pointer-events: none;} /* the keypad (ui/lock.css) takes the taps */ .cx-lockbox {max-width: 340px; margin: max(48px, 16vh) auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: 0.6rem; text-align: center;} .cx-lockbox .lk-logo {width: 92px; height: 92px; margin: 0 auto 2px; border-radius: 50%; display: block; background: radial-gradient(circle at 35% 30%, #7ff4ff 0%, #00e5ff 38%, #00a9c4 100%); box-shadow: 0 0 0 1.5px rgba(0, 229, 255, 0.55), 0 0 26px rgba(0, 229, 255, 0.45);} .cx-lockbox .lk-logo::before {content: ""; display: block; width: 72%; height: 72%; margin: 14%; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkNhcHlFViI+CiAgPGcgc3Ryb2tlPSIjMjQxNzEyIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC44KSI+CiAgICA8IS0tIGVhcnMgLS0+CiAgICA8cGF0aCBkPSJNMTMuOCAyMS40IEMxMy42IDE2LjIgMTcuNCAxMi44IDIxLjggMTIuOSBDMjYuNCAxMyAyOS44IDE2LjYgMjkuNCAyMS4yIEMyOSAyNS42IDI1LjQgMjguOCAyMS40IDI4LjcgQzE3LjIgMjguNiAxNCAyNS42IDEzLjggMjEuNCBaIiBmaWxsPSIjRDI5RTcyIi8+CiAgICA8cGF0aCBkPSJNODYuMiAyMS42IEM4Ni4zIDE2LjQgODIuNiAxMyA3OC4yIDEzLjEgQzczLjYgMTMuMiA3MC4zIDE2LjggNzAuNyAyMS40IEM3MS4xIDI1LjggNzQuNyAyOC44IDc4LjcgMjguNyBDODIuOSAyOC42IDg2LjEgMjUuOCA4Ni4yIDIxLjYgWiIgZmlsbD0iI0QyOUU3MiIvPgogICAgPHBhdGggZD0iTTE3LjQgMjIuMiBDMTcuMiAxOC44IDE5LjYgMTYuNiAyMi42IDE2LjggQzI1LjYgMTcgMjcuMiAxOS42IDI2LjQgMjIuNCBDMjUuNiAyNSAyMyAyNi4yIDIwLjYgMjUuOCBDMTguOCAyNS40IDE3LjUgMjQgMTcuNCAyMi4yIFoiIGZpbGw9IiM4RTVCNDciIHN0cm9rZT0ibm9uZSIvPgogICAgPHBhdGggZD0iTTgyLjYgMjIuNCBDODIuOCAxOSA4MC40IDE2LjggNzcuNCAxNyBDNzQuNCAxNy4yIDcyLjggMTkuOCA3My42IDIyLjYgQzc0LjQgMjUuMiA3NyAyNi40IDc5LjQgMjYgQzgxLjIgMjUuNiA4Mi41IDI0LjIgODIuNiAyMi40IFoiIGZpbGw9IiM4RTVCNDciIHN0cm9rZT0ibm9uZSIvPgogICAgPCEtLSBib2R5IGxvYWY6IGZpbGwsIHRoZW4gb3V0bGluZSB3aXRoIGEgZ2FwIGF0IHRoZSB0b3AgZm9yIHRoZSBoYWlyIChyZWZlcmVuY2UpIC0tPgogICAgPHBhdGggZD0iTTUwIDEzLjYgQzYzLjIgMTMuNCA3NCAxNy44IDc5LjQgMjYuOCBDODEuNiAzMC44IDgzLjIgMzQuNiA4MyAzOC40IEM4OS44IDQyLjQgOTQuNiA1MCA5NC42IDYwIEM5NC42IDcyIDkyIDgxLjYgODQgODEuNiBMMTYgODEuNiBDOCA4MS42IDUuNCA3MiA1LjQgNjAgQzUuNCA1MCAxMC4yIDQyLjQgMTcgMzguNCBDMTYuOCAzNC42IDE4LjQgMzAuOCAyMC42IDI2LjggQzI2IDE3LjggMzYuOCAxMy40IDUwIDEzLjYgWiIgZmlsbD0iI0QyOUU3MiIgc3Ryb2tlPSJub25lIi8+CiAgICA8cGF0aCBkPSJNNTQuNDAgMTMuNzEgQzY1LjU4IDE0LjQ2IDc0LjYxIDE4LjgyIDc5LjQwIDI2LjgwIEM4MS42IDMwLjggODMuMiAzNC42IDgzIDM4LjQgQzg5LjggNDIuNCA5NC42IDUwIDk0LjYgNjAgQzk0LjYgNzIgOTIgODEuNiA4NCA4MS42IEwxNiA4MS42IEM4IDgxLjYgNS40IDcyIDUuNCA2MCBDNS40IDUwIDEwLjIgNDIuNCAxNyAzOC40IEMxNi44IDM0LjYgMTguNCAzMC44IDIwLjYgMjYuOCBDMjUuMzkgMTguODIgMzQuNDIgMTQuNDYgNDUuNjAgMTMuNzEiIGZpbGw9Im5vbmUiLz4KICAgIDwhLS0gaGVhZC9jaGVlayBob29rIChyZWZlcmVuY2Ugbm90Y2gpIC0tPgogICAgPHBhdGggZD0iTTE3IDM4LjQgUTE5LjIgMzkuNCAyMC42IDM3LjggTTgzIDM4LjQgUTgwLjggMzkuNCA3OS40IDM3LjgiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMi40Ii8+CiAgICA8IS0tIGhhaXIgLS0+CiAgICA8cGF0aCBkPSJNNDcgMTQuNiBRNDYuNSAxMi42IDQ1LjYgMTEuMiBNNTAuMSAxNC4yIFE1MCAxMiA1MC43IDEwLjIgTTUzLjIgMTQuNiBRNTMuOCAxMi42IDU0LjkgMTEuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyLjMiLz4KICAgIDwhLS0gbXV6emxlIC0tPgogICAgPHBhdGggZD0iTTUwIDM0LjIgQzU5IDM0IDY1LjYgNDAuMiA2NS42IDQ4LjYgQzY1LjYgNTcgNTkgNjIuNCA1MCA2Mi40IEM0MSA2Mi40IDM0LjQgNTcgMzQuNCA0OC42IEMzNC40IDQwLjIgNDEgMzQuNCA1MCAzNC4yIFoiIGZpbGw9IiM4RTVCNDciIHN0cm9rZT0ibm9uZSIvPgogICAgPCEtLSBjaGVlayBsaW5lcyAiKSgiIGxpa2UgdGhlIHJlZmVyZW5jZSAtLT4KICAgIDxwYXRoIGQ9Ik0zNC42IDQyLjQgUTM4LjYgNDkuNCAzNS40IDU2LjQgTTY1LjQgNDIuNCBRNjEuNCA0OS40IDY0LjYgNTYuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyLjQiLz4KICAgIDxlbGxpcHNlIGN4PSIyNC44IiBjeT0iNDYuOCIgcng9IjQuNiIgcnk9IjIuNiIgZmlsbD0iI0YwOEE4MCIgb3BhY2l0eT0iLjUiIHN0cm9rZT0ibm9uZSIvPgogICAgPGVsbGlwc2UgY3g9Ijc1LjIiIGN5PSI0Ni44IiByeD0iNC42IiByeT0iMi42IiBmaWxsPSIjRjA4QTgwIiBvcGFjaXR5PSIuNSIgc3Ryb2tlPSJub25lIi8+CiAgICA8IS0tIGV5ZXMgLS0+CiAgICA8cGF0aCBkPSJNMjkuNiAzNC40IEMzMSAzNy4yIDM0LjQgMzguNiAzNy42IDM2LjIgTTcwLjQgMzQuNiBDNjkgMzcuNCA2NS42IDM4LjYgNjIuNCAzNi40IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjMiLz4KICAgIDwhLS0gbm9zZSAtLT4KICAgIDxwYXRoIGQ9Ik00NiA0MC41IEw0Ny4xIDQxLjUgTTU0IDQwLjUgTDUyLjkgNDEuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyLjQiLz4KICAgIDxwYXRoIGQ9Ik01MCA0My44IEw1MCA0OS42IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIuNCIvPgogICAgPCEtLSBzdHJhdyAtLT4KICAgIDxwYXRoIGQ9Ik01MC41IDUxLjIgTDU1IDYzLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iNy40IiBzdHJva2UtbGluZWNhcD0iYnV0dCIvPgogICAgPHBhdGggZD0iTTUwLjUgNTEuMiBMNTUgNjMuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDBFNUZGIiBzdHJva2Utd2lkdGg9IjQuMyIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz4KICAgIDxwYXRoIGQ9Ik00NS40IDUwLjQgUTQ3LjggNTMuMiA1MCA1MC4yIFE1Mi4yIDUzLjIgNTQuNiA1MC40IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIuNCIvPgogICAgPCEtLSBjdXAgLS0+CiAgICA8cGF0aCBkPSJNMzUgNjQgTDY1IDY0IEw2MiA4OC42IFE2MS42IDkxLjIgNTkgOTEuMiBMNDEgOTEuMiBRMzguNCA5MS4yIDM4IDg4LjYgWiIgZmlsbD0iI0Y2RUNERiIvPgogICAgPHBhdGggZD0iTTM1LjYgNzAuMiBMNjQuNCA3MC4yIEw2MiA4OC42IFE2MS42IDkxLjIgNTkgOTEuMiBMNDEgOTEuMiBRMzguNCA5MS4yIDM4IDg4LjYgWiIgZmlsbD0iI0U4Qzc5QyIgc3Ryb2tlPSJub25lIi8+CiAgICA8cGF0aCBkPSJNNTUgNjQgTDU3IDg0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwRTVGRiIgc3Ryb2tlLXdpZHRoPSIzIiBvcGFjaXR5PSIuNTUiLz4KICAgIDxwYXRoIGQ9Ik0zOS42IDY4LjYgTDQxLjIgODYuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIG9wYWNpdHk9Ii43NSIvPgogICAgPGcgZmlsbD0iIzNBMjMxOCIgc3Ryb2tlPSJub25lIj4KICAgICAgPGNpcmNsZSBjeD0iNDQuNiIgY3k9Ijg2LjYiIHI9IjIuOSIvPjxjaXJjbGUgY3g9IjUwLjQiIGN5PSI4Ny40IiByPSIyLjkiLz48Y2lyY2xlIGN4PSI1NiIgY3k9Ijg2LjQiIHI9IjIuOSIvPgogICAgICA8Y2lyY2xlIGN4PSI0Ny40IiBjeT0iODEuOCIgcj0iMi45Ii8+PGNpcmNsZSBjeD0iNTMuNCIgY3k9IjgxLjYiIHI9IjIuOSIvPgogICAgPC9nPgogICAgPHBhdGggZD0iTTM1IDY0IEw2NSA2NCBMNjIgODguNiBRNjEuNiA5MS4yIDU5IDkxLjIgTDQxIDkxLjIgUTM4LjQgOTEuMiAzOCA4OC42IFoiIGZpbGw9Im5vbmUiLz4KICAgIDxyZWN0IHg9IjMyLjYiIHk9IjYwLjYiIHdpZHRoPSIzNC44IiBoZWlnaHQ9IjYuNCIgcng9IjMuMiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgPCEtLSBwYXdzIGh1Z2dpbmcgdGhlIGN1cCAtLT4KICAgIDxjaXJjbGUgY3g9IjMyLjYiIGN5PSI3NC42IiByPSI2LjQiIGZpbGw9IiM4RTVCNDciLz4KICAgIDxjaXJjbGUgY3g9IjY3LjQiIGN5PSI3NC44IiByPSI2LjQiIGZpbGw9IiM4RTVCNDciLz4KICA8L2c+Cjwvc3ZnPgo=") center / contain no-repeat;} .cx-lockbox .lk-name {font-size: 26px; font-weight: 900; color: var(--cx-text); letter-spacing: 0.01em;} .cx-lockbox .lk-sub {font-size: 14px; color: var(--cx-dim); font-weight: 700; margin-top: -4px;} /* ---------- Controls for the pages that aren't components ---------- */ .cx-card {background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: 16px; padding: 12px;} .cx-row {display: flex; align-items: center; gap: 8px; flex-wrap: wrap;} .cx-col {display: flex; flex-direction: column; gap: 8px;} .cx-label {font-size: 12.5px; font-weight: 800; color: var(--cx-text-2); margin: 6px 2px 2px;} .cx-help {font-size: 12.5px; color: var(--cx-dim); font-weight: 600;} .cx-muted {color: var(--cx-dim);} .cx-pos {color: var(--cx-pos);} .cx-neg {color: var(--cx-neg);} .cx-hr {border: 0; border-top: 1px solid var(--cx-line); margin: 8px 0;} /* Buttons: a quiet ring, or cyan with dark text for the main action (white on cyan is 1.5:1). */ .cx-btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cx-line-2); background: none; color: var(--cx-accent); font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; transition: transform 160ms var(--cx-ease);} .cx-btn.primary {background: var(--cx-accent); border-color: var(--cx-accent); color: var(--cx-on-accent);} .cx-btn.danger {border-color: var(--cx-neg); color: var(--cx-neg);} .cx-btn.wide {width: 100%;} .cx-btn:not(:disabled):active {transform: scale(0.97); transition-duration: var(--cx-press);} .cx-btn:disabled {opacity: 0.45; cursor: default;} /* Inputs: 16 px text, or iOS zooms in. */ .cx-input, .cx-select, .cx-textarea {width: 100%; min-height: 42px; padding: 9px 14px; border-radius: 12px; background: var(--cx-surface); border: 1px solid var(--cx-line-2); color: var(--cx-text); font-size: 16px; outline: none;} .cx-input:focus, .cx-select:focus, .cx-textarea:focus {border-color: var(--cx-accent);} .cx-textarea {min-height: 96px; resize: vertical; line-height: 1.35;} .cx-input.round {border-radius: 999px;} /* Segmented control: one rounded track with the chosen option lit.