/* holdscan — dark editorial minimal (Credo-inspired geometry) */ :root { --bg: #070708; --bg-elev: #0e0e10; --bg-card: #121214; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14); --text: #f2f1ee; --muted: #8a8884; --dim: #5c5a56; --white: #ffffff; --accent: #e8e4dc; --ok: #d8d7d2; --warn: #d4b483; --err: #d49292; --radius: 14px; --font-display: "Instrument Serif", Georgia, serif; --font-ui: "Syne", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: var(--font-ui); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; /* clip (not hidden) so doesn't become its own scroll container, which fights iOS momentum scrolling. */ overflow-x: clip; } .grid-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 75%); } .orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; opacity: 0.35; } .orb-a { width: 420px; height: 420px; top: -120px; right: -80px; background: radial-gradient(circle, rgba(180, 170, 150, 0.18), transparent 70%); } .orb-b { width: 360px; height: 360px; bottom: 10%; left: -100px; background: radial-gradient(circle, rgba(120, 130, 150, 0.12), transparent 70%); } .top-bar, main, .foot { position: relative; z-index: 1; } .top-bar { position: sticky; top: 0; z-index: 8; background: var(--bg); border-bottom: 1px solid transparent; } body.is-scrolled .top-bar { border-bottom-color: var(--line); } .top { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; padding: 1.15rem 1.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--text); transition: opacity 0.2s var(--ease); } .brand:hover { opacity: 0.88; } .brand-mark { display: inline-flex; width: 30px; height: 24px; flex-shrink: 0; color: var(--text); } .brand-logo { width: 100%; height: 100%; display: block; overflow: visible; } .brand-name { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.03em; font-size: 1.08rem; line-height: 1; } .brand-name .thin { font-weight: 400; opacity: 0.5; } .nav { display: flex; align-items: center; gap: 1.25rem; } .nav a { color: var(--muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.02em; transition: color 0.2s var(--ease); } .nav a:hover, .nav a.is-active { color: var(--text); } .nav a.is-active { font-weight: 500; } .pill { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.35rem 0.65rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, 0.03); } .pill.ok { color: var(--ok); border-color: rgba(159, 191, 168, 0.35); } main { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 5rem; } .hero { padding: 2.25rem 0 1.35rem; max-width: 640px; animation: rise 0.8s var(--ease) both; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin: 0 0 1.25rem; } .hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.35rem, 5.5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 0.75rem; text-wrap: balance; } .hero h1 em { font-style: italic; color: rgba(242, 241, 238, 0.72); } .lede { color: var(--muted); font-size: 1rem; max-width: 34rem; margin: 0; line-height: 1.6; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .btn { appearance: none; border: 1px solid transparent; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; letter-spacing: -0.01em; padding: 0.8rem 1.25rem; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s, color 0.2s; } .btn:active { transform: scale(0.98); } .btn:focus-visible, .tab:focus-visible, .nav a:focus-visible, .inp:focus-visible, .icon-btn:focus-visible { outline: 1px solid rgba(242, 241, 238, 0.45); outline-offset: 2px; } .btn.primary { background: var(--white); color: #111; } .btn.primary:hover { background: #e8e6e1; } .btn.primary:disabled { opacity: 0.55; cursor: wait; } .btn.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); } .btn.ghost:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.03); } .btn-compact { padding: 0.45rem 0.75rem; font-size: 0.78rem; } .btn-spin { width: 14px; height: 14px; border: 1.5px solid rgba(0, 0, 0, 0.2); border-top-color: #111; border-radius: 50%; animation: spin 0.7s linear infinite; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0.25rem 0 1.25rem; animation: none; } .stat { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 0.95rem; min-height: 0; display: flex; flex-direction: column; gap: 0.1rem; transition: border-color 0.25s var(--ease); } .stat:hover { border-color: var(--line-strong); } .stat-n { font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: -0.03em; } .stat-l { font-size: 0.85rem; color: var(--muted); margin-top: 0.35rem; } .stat-d { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--dim); line-height: 1.45; } .panel, .results, .how { background: var(--bg-elev); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1.5rem; margin-bottom: 1.25rem; animation: rise 0.85s 0.12s var(--ease) both; } .panel-stage { padding: 1.75rem 1.65rem 1.6rem; border-color: var(--line-strong); } .panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .panel-head h2, .how h2, .results h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.85rem; letter-spacing: -0.02em; margin: 0 0 0.25rem; } .muted { color: var(--muted); font-size: 0.88rem; margin: 0; } .panel-tools { display: flex; align-items: center; gap: 0.55rem 0.75rem; flex-wrap: wrap; justify-content: flex-end; } .toggle { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--muted); font-family: var(--font-mono); cursor: pointer; user-select: none; } .toggle input { accent-color: #ccc; } .field-inline { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; } .field-inline input { width: 4.2rem; background: var(--bg); border: 1px solid var(--line-strong); color: var(--text); border-radius: 6px; padding: 0.4rem 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; } .table-head { display: none; grid-template-columns: 0.9fr 1fr 0.9fr 2.2fr 2.5rem; gap: 0.55rem; padding: 0 0.15rem 0.5rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } @media (min-width: 860px) { .table-head { display: grid; } } .rows { display: flex; flex-direction: column; gap: 0.55rem; } .row { display: grid; grid-template-columns: 1fr; gap: 0.5rem; padding: 0.75rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; transition: border-color 0.2s var(--ease); } .row:focus-within { border-color: rgba(255, 255, 255, 0.22); } @media (min-width: 860px) { .row { grid-template-columns: 0.9fr 1fr 0.9fr 2.2fr 2.5rem; align-items: center; padding: 0.45rem 0.45rem 0.45rem 0.55rem; } } /* Utility: force-hide regardless of grid/flex display rules */ .hide { display: none !important; } /* Namespace tabs */ .tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin-bottom: 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; } .tab { appearance: none; border: 0; background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em; padding: 0.5rem 1.2rem; border-radius: 7px; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .tab:hover { color: var(--text); } .tab.is-active { background: rgba(255, 255, 255, 0.08); color: var(--text); } /* Solana rows: amount · ticker · mint · remove (no chain column) */ .sol-head { grid-template-columns: 0.9fr 0.9fr 2.9fr 2.5rem; } @media (min-width: 860px) { .row-sol { grid-template-columns: 0.9fr 0.9fr 2.9fr 2.5rem; } } .inp { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text); font-family: var(--font-mono); font-size: 0.86rem; padding: 0.65rem 0.7rem; outline: none; } .inp:focus { background: rgba(255, 255, 255, 0.03); border-color: var(--line-strong); } .inp::placeholder { color: var(--dim); } select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } select.inp option { background: #151515; color: var(--text); } .icon-btn { width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; font-size: 1.15rem; cursor: pointer; justify-self: end; transition: color 0.15s, border-color 0.15s; } .icon-btn:hover { color: var(--err); border-color: rgba(212, 146, 146, 0.4); } .panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .form-error { margin: 0.85rem 0 0; color: var(--err); font-size: 0.88rem; } .scan-notes { margin-top: 1.15rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .warnings { margin: 0.7rem 0 0; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 0.82rem; } .warnings p { margin: 0.25rem 0; } .inline-code { font-family: var(--font-mono); font-size: 0.8em; padding: 0.1em 0.35em; border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: var(--muted); } .status-panel { margin-bottom: 1.25rem; } .chain-ready { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .ready-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 0.72rem; background: rgba(255, 255, 255, 0.02); } .ready-chip .cn { color: var(--text); text-transform: lowercase; } .ready-chip .st { color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.62rem; } .ready-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); } .ready-chip.is-ready { border-color: rgba(159, 191, 168, 0.35); } .ready-chip.is-ready .dot { background: var(--ok); box-shadow: 0 0 8px rgba(159, 191, 168, 0.5); } .ready-chip.is-ready .st { color: var(--ok); } .ready-chip.is-weak .dot { background: var(--warn); } .ready-chip.is-weak .st { color: var(--warn); } .key-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; } .key-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.68rem; padding: 0.35rem 0.55rem; border-radius: 6px; border: 1px solid var(--line); color: var(--dim); } .key-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); } .key-chip.on { color: var(--muted); border-color: rgba(159, 191, 168, 0.25); } .key-chip.on .dot { background: var(--ok); } .key-chip.off { opacity: 0.55; } .status-note { margin: 0; font-size: 0.82rem; line-height: 1.45; } .tie-banner { margin-bottom: 1rem; padding: 0.95rem 1.1rem; border-radius: 12px; border: 1px solid rgba(232, 201, 138, 0.4); background: linear-gradient( 135deg, rgba(232, 201, 138, 0.1), rgba(232, 201, 138, 0.03) ); color: #e8c98a; font-size: 0.88rem; line-height: 1.5; } .tie-banner strong { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.4rem; } .by-ns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .ns-block { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--muted); padding: 0.4rem 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); } .card.is-tie { border-color: rgba(232, 201, 138, 0.35); } .card.is-pin { border-color: rgba(159, 191, 168, 0.45); } .tag-pin { color: var(--ok) !important; background: rgba(159, 191, 168, 0.12) !important; } .tag-tie { color: #e8c98a !important; background: rgba(232, 201, 138, 0.12) !important; } .panel-head .muted strong { color: var(--muted); font-weight: 600; } .resolved { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.25rem; } .chip { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.4rem 0.65rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); background: rgba(255, 255, 255, 0.02); } .chip strong { color: var(--text); font-weight: 500; } .candidates { display: flex; flex-direction: column; gap: 0.65rem; } .card { display: grid; gap: 0.75rem; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: border-color 0.2s var(--ease); } .card:hover { border-color: var(--line-strong); } .card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .rank { font-family: var(--font-display); font-size: 1.5rem; color: var(--dim); margin-right: 0.5rem; } .addr { font-family: var(--font-mono); font-size: 0.82rem; word-break: break-all; color: var(--text); } .meta-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.28rem 0.5rem; border-radius: 4px; background: rgba(255, 255, 255, 0.05); color: var(--muted); } .tag.ns-solana { color: #a8c4e8; } .tag.ns-evm { color: #c4b5e8; } .matches { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; } .matches li { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); } .matches li span { color: var(--text); } .copy-btn { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); border-radius: 6px; padding: 0.4rem 0.65rem; cursor: pointer; } .copy-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); } .copy-btn.copied { color: var(--ok); border-color: rgba(159, 191, 168, 0.4); } .empty { color: var(--muted); font-size: 0.95rem; padding: 1rem 0; } .how { margin-top: 0.5rem; } .steps { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; } @media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } } .steps li { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); min-height: 160px; } .steps strong { font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); letter-spacing: 0.12em; } .steps h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; } .steps p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; } .lookup-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; } .lookup-inp { flex: 1 1 16rem; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.75rem 0.9rem; } .lookup-row .btn { flex: 0 0 auto; } [hidden] { display: none !important; } .view-profile { margin-top: 2rem; } @media (min-width: 860px) { .view-profile { margin-top: 2.75rem; } } .profile-out { margin-top: 1.15rem; display: flex; flex-direction: column; gap: 0.85rem; } .profile-wallets { display: grid; gap: 0.5rem; } @media (min-width: 720px) { .profile-wallets { grid-template-columns: 1fr 1fr; } } .wallet-cell { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 0.95rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; } .wallet-cell .lbl { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } .wallet-cell .val { font-family: var(--font-mono); font-size: 0.8rem; word-break: break-all; color: var(--text); } .wallet-cell .cell-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .profile-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; } .profile-pos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; } .profile-pos li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 1rem; padding: 0.7rem 0.8rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); } .profile-pos .ptick { color: var(--text); } .profile-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .wallet-cell .muted { margin: 0.15rem 0 0.65rem; } .skel-bar { display: block; height: 12px; border-radius: 6px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.04) 100% ); background-size: 200% 100%; animation: shimmer 1.15s ease-in-out infinite; } .skel-pill { width: 5.5rem; height: 1.45rem; border-radius: 999px; } .skel-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .skel-row { height: 2.7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); position: relative; overflow: hidden; } .skel-row::after, .skel-card .skel-bar { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.09) 45%, rgba(255, 255, 255, 0.03) 100% ); background-size: 200% 100%; animation: shimmer 1.15s ease-in-out infinite; } .skel-row::after { content: ""; position: absolute; inset: 0.85rem 0.9rem; border-radius: 6px; } .skel-profile { display: flex; flex-direction: column; gap: 0.55rem; } .skel-card { display: grid; gap: 0.75rem; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } .skel-addr { width: 72%; height: 14px; } .skel-line { width: 48%; height: 10px; } @keyframes shimmer { to { background-position: -200% 0; } } .foot { max-width: 1120px; margin: 0 auto; padding: 1rem 1.5rem 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); letter-spacing: 0.04em; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } /* Phase B — editorial landing and account workspace */ .nav .nav-cta { padding: 0.5rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text); } .nav .nav-cta:hover { background: rgba(255, 255, 255, 0.05); } .landing-main { max-width: 1220px; padding-bottom: 2rem; } .landing-hero { min-height: min(760px, calc(100vh - 74px)); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr); align-items: center; gap: clamp(3rem, 8vw, 7rem); padding: clamp(4rem, 10vh, 7.5rem) 0; } .landing-copy { animation: rise 0.8s var(--ease) both; } .landing-copy h1, .section-intro h2, .final-cta h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.045em; text-wrap: balance; } .landing-copy h1 { font-size: clamp(3.4rem, 6.7vw, 6.7rem); line-height: 0.92; max-width: 12ch; margin: 0 0 1.5rem; } .landing-lede { max-width: 42rem; font-size: 1.03rem; } .landing-copy .hero-actions { margin-top: 2rem; } .btn-arrow { justify-content: space-between; min-width: 11.5rem; } .trust-line { margin: 1.4rem 0 0; font: 0.68rem/1.5 var(--font-mono); letter-spacing: 0.035em; color: var(--dim); } .status-dot { display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.45rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 14px rgba(159, 191, 168, 0.55); } .intersection-plate { position: relative; min-height: 550px; border: 1px solid var(--line-strong); border-radius: 2px; background: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.045) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, rgba(255,255,255,.045) 50%, transparent 50.2%), #0b0b0d; background-size: 88px 88px; overflow: hidden; animation: rise 0.9s 0.12s var(--ease) both; } .intersection-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 67% 67%, rgba(232, 228, 220, 0.12), transparent 32%); } .plate-label { position: absolute; inset: 1rem 1.15rem auto; display: flex; justify-content: space-between; font: 0.62rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); } .clue, .wallet-result { position: absolute; z-index: 2; display: grid; padding: 0.85rem 1rem; border: 1px solid var(--line-strong); background: rgba(7, 7, 8, 0.94); font-family: var(--font-mono); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3); } .clue { width: min(190px, 42%); } .clue-a { left: 7%; top: 18%; } .clue-b { left: 12%; top: 43%; } .clue-c { left: 7%; top: 68%; } .clue-chain, .result-kicker { font-size: 0.6rem; letter-spacing: 0.11em; color: var(--dim); } .clue strong { margin: 0.2rem 0; font-size: 1rem; font-weight: 500; } .clue small, .wallet-result small { color: var(--muted); font-size: 0.64rem; } .wallet-result { right: 7%; top: 51%; width: 210px; border-color: rgba(159, 191, 168, 0.45); } .wallet-result strong { margin: 0.35rem 0; font-size: 1.05rem; font-weight: 500; color: var(--ok); } .trace { position: absolute; z-index: 1; left: 42%; width: 35%; height: 1px; background: linear-gradient(90deg, var(--line-strong), rgba(159, 191, 168, 0.7)); transform-origin: left; } .trace::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } .trace-a { top: 28%; transform: rotate(33deg); } .trace-b { top: 51%; transform: rotate(9deg); } .trace-c { top: 76%; transform: rotate(-30deg); } .signal-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin: 0 0 clamp(5rem, 10vw, 9rem); } .signal-strip div { display: grid; gap: 0.35rem; padding: 1.4rem 1.1rem; border-right: 1px solid var(--line); } .signal-strip div:last-child { border-right: 0; } .signal-strip strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; } .signal-strip span { font: 0.65rem var(--font-mono); color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; } .method-section { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.5fr); gap: clamp(3rem, 8vw, 7rem); align-items: start; margin-bottom: clamp(5rem, 12vw, 10rem); } .section-intro { position: sticky; top: 7rem; } .section-intro h2 { font-size: clamp(2.5rem, 4.5vw, 4.25rem); line-height: 0.98; margin: 0 0 1.3rem; } .section-intro > p:last-child, .final-cta p { color: var(--muted); max-width: 34rem; } .method-grid { list-style: none; margin: 0; padding: 0; } .method-grid li { position: relative; min-height: 190px; padding: 1.6rem 1.5rem 1.6rem 5.5rem; border-top: 1px solid var(--line-strong); } .method-grid li:last-child { border-bottom: 1px solid var(--line-strong); } .method-no { position: absolute; left: 0; top: 1.8rem; font: 0.72rem var(--font-mono); color: var(--dim); } .method-grid h3 { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 2rem; font-weight: 400; } .method-grid p { margin: 0; max-width: 40rem; color: var(--muted); } .network-field { padding: 2.2rem 0 0; border-top: 1px solid var(--line-strong); } .network-line { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 5rem; } .network-line span { padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; font: 0.72rem var(--font-mono); color: var(--muted); } .final-cta { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--line-strong); background: linear-gradient(120deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); } .final-cta h2 { margin: 0; font-size: clamp(2.7rem, 6vw, 5.5rem); line-height: 1; } .final-cta p { margin-bottom: 0; } .landing-foot a { color: inherit; } .app-hero { max-width: 760px; } .app-hero .eyebrow { margin-bottom: 0.7rem; } .auth-gate { min-height: 180px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-color: var(--line-strong); } .auth-gate-copy { display: flex; align-items: center; gap: 1.25rem; } .auth-lock { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 1.5rem; } .auth-gate h2 { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 2rem; font-weight: 400; } .auth-gate .eyebrow { margin: 0 0 0.3rem; } .google-mark { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 50%; font-family: Georgia, serif; font-weight: 700; } .account-status { max-width: 17rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 0.7rem var(--font-mono); color: var(--dim); } .account-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); } .account-bar > div { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; } .account-email { font: 0.78rem var(--font-mono); color: var(--text); } .account-usage { font: 0.72rem var(--font-mono); color: var(--ok); } .scan-controls { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .scan-controls .panel-foot { border: 0; margin: 0; padding: 0; } .bot-check { min-width: 0; } .bot-check .muted { margin-top: 0.4rem; font-size: 0.7rem; } .compact-how { margin-top: 1.25rem; } @media (max-width: 900px) { .landing-hero { grid-template-columns: 1fr; padding-top: 4rem; } .landing-copy h1 { max-width: 14ch; } .intersection-plate { min-height: 500px; } .method-section { grid-template-columns: 1fr; } .section-intro { position: static; } .scan-controls { grid-template-columns: 1fr; } .scan-controls .panel-foot { justify-content: flex-start; } } @media (max-width: 700px) { .stats { grid-template-columns: 1fr; } .hero { padding-top: 1.5rem; } .panel-tools { justify-content: flex-start; } /* Mobile GPU budget: these decorative layers get evicted off-screen and repaint slowly on scroll-back (checkerboarding). Drop the expensive ones on small screens. */ html { scroll-behavior: auto; } .orb { display: none; } .grid-bg { mask-image: none; } .nav a:not(.nav-cta), .account-status { display: none; } .landing-hero { min-height: auto; gap: 2.5rem; padding: 3rem 0 5rem; } .landing-copy h1 { font-size: clamp(3.25rem, 16vw, 5rem); } .intersection-plate { min-height: 470px; } .clue { left: 5%; width: 46%; } .wallet-result { right: 5%; width: 46%; } .signal-strip { grid-template-columns: repeat(2, 1fr); } .signal-strip div:nth-child(2) { border-right: 0; } .signal-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .method-grid li { padding-left: 3.4rem; } .final-cta { align-items: flex-start; flex-direction: column; } .auth-gate { align-items: flex-start; flex-direction: column; } .auth-gate-copy { align-items: flex-start; } .account-bar { align-items: flex-start; } /* `animation: ... both` leaves a lingering transform, keeping these promoted to their own compositor layers all session. Remove it on mobile. */ .hero, .stats, .panel, .results, .how { animation: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero, .stats, .panel, .results, .how { animation: none; } .btn:active { transform: none; } } /* 2026 UX refinement — restrained, typographic, and intentionally non-generative. */ .ux-refined .top, .ux-refined main, .ux-refined .foot { max-width: 1240px; } .ux-refined .top { padding-block: 1.25rem; } .ux-refined .brand-name { font-weight: 700; } .ux-refined .landing-main { padding-bottom: 0; } .ux-refined .landing-hero { min-height: min(720px, calc(100vh - 76px)); grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.8fr); gap: clamp(3rem, 8vw, 7.5rem); padding: clamp(4rem, 9vh, 7rem) 0; } .ux-refined .landing-copy { animation: none; } .ux-refined .landing-copy h1 { max-width: 10.5ch; margin: 0; font: 400 clamp(3.8rem, 7.3vw, 7.2rem) / 0.92 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; } .ux-refined .landing-lede { max-width: 34rem; margin: 2rem 0 0; color: #a4a29e; font-size: clamp(0.98rem, 1.5vw, 1.12rem); line-height: 1.65; } .ux-refined .continue-btn { min-width: 10.5rem; justify-content: space-between; margin-top: 2rem; padding: 0.95rem 1.1rem; border-radius: 4px; } .ux-refined .landing-note { margin: 1rem 0 0; color: #6f6d69; font: 0.68rem var(--font-mono); } .ux-refined .intersection-plate { position: relative; min-height: 500px; border: 1px solid #242426; border-radius: 2px; background: #0a0a0b; overflow: hidden; animation: none; } .ux-refined .intersection-plate::after { content: none; } .plate-head { position: absolute; inset: 1.25rem 1.35rem auto; display: flex; justify-content: space-between; color: #62605c; font: 0.62rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; } .holding-stack { position: absolute; left: 8%; top: 20%; width: 44%; display: grid; gap: 1rem; } .holding-sample { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.22rem 0.6rem; padding: 0.85rem 0.95rem; border: 1px solid #28282a; background: #080809; font-family: var(--font-mono); } .holding-sample span { color: #6f6d69; font-size: 0.62rem; letter-spacing: 0.08em; } .holding-sample strong { font-size: 0.94rem; font-weight: 500; } .holding-sample code { grid-column: 1 / -1; color: #777571; font: 0.63rem var(--font-mono); } .result-connector { position: absolute; left: 51.8%; top: 49.8%; width: 15%; height: 1px; background: #3b3b3e; } .ux-refined .wallet-result { right: 7%; top: 42%; width: 33%; padding: 1rem; border-color: #626265; border-radius: 0; background: #111113; box-shadow: none; } .ux-refined .wallet-result span, .ux-refined .wallet-result small { color: #797773; font-size: 0.62rem; } .ux-refined .wallet-result strong { margin: 0.42rem 0; color: #f3f2ef; font-size: clamp(0.8rem, 1.3vw, 1rem); } .process-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: 1.4rem 0; border-block: 1px solid #202022; } .process-strip ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; } .process-strip li { display: grid; gap: 0.25rem; } .process-strip b { color: #5d5b58; font: 0.62rem var(--font-mono); } .process-strip span { font-size: 0.86rem; } .process-strip p { margin: 0; color: #666460; font: 0.62rem var(--font-mono); white-space: nowrap; } .landing-about { display: grid; gap: 1rem; max-width: 62ch; padding: clamp(2.75rem, 7vh, 4.5rem) 0 0; } .landing-about h2 { margin: 0; font: 400 clamp(1.55rem, 3vw, 2.1rem) / 1.1 var(--font-display); letter-spacing: -0.02em; } .landing-about p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.65; } .ux-refined .landing-foot { padding-top: 2.4rem; } .ux-refined.app-page main { max-width: 1080px; } .ux-refined .app-hero { max-width: 720px; padding: clamp(3rem, 8vh, 5rem) 0 2rem; animation: none; } .ux-refined .app-hero h1 { margin-bottom: 0.9rem; font: 400 clamp(3rem, 6.2vw, 5.2rem) / 0.96 var(--font-display); letter-spacing: -0.04em; } .ux-refined .app-hero .lede { max-width: 38rem; } .ux-refined .auth-gate { min-height: 0; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 4px; background: #0d0d0f; animation: none; } .ux-refined .auth-gate h2, .ux-refined .panel-head h2, .ux-refined .results h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.025em; } .ux-refined .auth-gate h2 { font-size: clamp(1.5rem, 3vw, 2rem); } .google-logo { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; } .ux-refined .account-usage { color: #aaa8a3; } .ux-refined .panel, .ux-refined .results { border-radius: 4px; background: #0d0d0f; animation: none; } .ux-refined .panel-stage { padding: clamp(1.15rem, 3vw, 1.75rem); } .advanced-options { position: relative; } .advanced-options summary { color: #898782; cursor: pointer; font-size: 0.78rem; list-style: none; user-select: none; } .advanced-options summary::-webkit-details-marker { display: none; } .advanced-options summary::after { content: " +"; color: #5f5d59; } .advanced-options[open] summary::after { content: " −"; } .advanced-options .panel-tools { position: absolute; z-index: 4; top: calc(100% + 0.65rem); right: 0; min-width: 270px; padding: 0.8rem; border: 1px solid var(--line-strong); background: #111113; } .ux-refined .bot-check .muted:not([hidden]) { margin-top: 0.55rem; color: var(--err); } @media (max-width: 900px) { .ux-refined .landing-hero { min-height: auto; grid-template-columns: 1fr; gap: 3.5rem; padding: 4.5rem 0 5rem; } .ux-refined .landing-copy h1 { max-width: 12ch; } .ux-refined .intersection-plate { min-height: 460px; } .process-strip { grid-template-columns: 1fr; } .process-strip p { white-space: normal; } } @media (max-width: 700px) { .ux-refined .top, .ux-refined main, .ux-refined .foot { padding-inline: 1rem; } .ux-refined .landing-hero { gap: 3rem; padding: 3.75rem 0 4rem; } .ux-refined .landing-copy h1 { font-size: clamp(3rem, 15vw, 4.6rem); } .ux-refined .intersection-plate { min-height: 390px; } .holding-stack { left: 5%; top: 18%; width: 48%; } .holding-sample { padding: 0.7rem; } .ux-refined .wallet-result { right: 4%; top: 40%; width: 39%; } .process-strip ol { gap: 0.75rem; } .process-strip span { font-size: 0.75rem; } .ux-refined .app-hero { padding-top: 2.75rem; } .ux-refined .auth-gate { gap: 1.25rem; } .ux-refined .auth-gate .btn { width: 100%; justify-content: center; } .advanced-options .panel-tools { right: auto; left: 0; } } /* Legal pages. These lived in an inline