@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/instrument-serif-latin.woff2?v=1) format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/static/fonts/jetbrains-mono-latin.woff2?v=1) format("woff2"); } @layer tokens, base, layout, components, motion, gemboard, skin; @layer tokens { :root { color-scheme: dark; --bg: #0d0e12; --panel: #16181d; --raised: #1c1f26; --line: #262a33; --ink: #f2f3f5; --ink-dim: #9aa0ab; --ink-faint: #5f6672; --accent: #d84dfc; --accent-2: #7c4dff; --accent-ink: #ffffff; --danger: #ff5c5c; --amber: #ffb648; --mint: #2de0a8; --up: var(--mint); --down: #ff5c5c; --up-soft: color-mix(in oklch, var(--up) 16%, transparent); --down-soft: color-mix(in oklch, var(--down) 16%, transparent); --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent); --mint-soft: color-mix(in oklch, var(--mint) 14%, transparent); --danger-soft: color-mix(in oklch, var(--danger) 14%, transparent); --amber-soft: color-mix(in oklch, var(--amber) 16%, transparent); --hover: color-mix(in oklch, var(--ink) 8%, transparent); --shadow: 0 1px 2px oklch(0% 0 0 / .5), 0 12px 32px -20px oklch(0% 0 0 / .9); --sans: -apple-system, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --mono: "JetBrains Mono", ui-monospace, monospace; --radius: 20px; --r-sm: 10px; --gap: 16px; } } @layer base { * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; padding-block: 14px calc(36px + env(safe-area-inset-bottom, 0px)); padding-inline: var(--gap); @media (width >= 720px) { padding: 28px 40px 60px; } background: radial-gradient(circle at 20% 0%, #1a1030 0%, var(--bg) 45%) no-repeat, var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45; min-height: 100vh; -webkit-tap-highlight-color: transparent; text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; margin: 0; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } } @layer layout { .page { max-width: 460px; margin-inline: auto; @media (width >= 720px) { max-width: 1400px; } display: flex; flex-direction: column; gap: 28px; container-type: inline-size; } .topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; @container (width >= 900px) { display: grid; grid-template-columns: 1fr auto 1fr; } & .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--ink); text-decoration: none; } & .brand-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } & h1 { font-size: 16px; font-weight: 700; color: var(--ink); } & .topbar-right { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; justify-self: end; flex-wrap: wrap; } & .addr-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; } & .addr-chip .avatar { inline-size: 20px; block-size: 20px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--mint), var(--accent-2)); } } .stack { display: flex; flex-direction: column; gap: 28px; } } @layer components { .switcher { display: flex; gap: 8px; & .thumb { display: none; } & button { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--ink-dim); transition: color .2s, border-color .2s, background .2s; & .chain-ic { font-size: 13px; line-height: 1; } &[aria-selected="true"] { color: var(--mint); border-color: color-mix(in oklch, var(--mint) 45%, transparent); background: color-mix(in oklch, var(--mint) 8%, var(--panel)); } } } .label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-block-end: 4px; } .amount { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; font-family: var(--serif); font-size: clamp(44px, 14cqi, 54px); line-height: 1; letter-spacing: -.015em; font-variant-numeric: tabular-nums; view-transition-name: wallet-balance; & .unit-mark { font-size: .45em; color: var(--ink-dim); } & .cents { font-size: .54em; color: var(--ink-dim); } } .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-start: 10px; } .addr { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); background: none; border: 0; border-block-end: 1px dotted var(--line); padding: 0 0 1px; view-transition-name: wallet-address; } .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-faint); & .dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ink-faint); transition: background .3s; &.is-live { background: var(--accent); } } } .spark { & svg { inline-size: 100%; block-size: 44px; display: block; } & .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } & .spark-end { fill: var(--accent); } & .scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-block-start: 4px; } } .actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-inline-size: 420px; } .action { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--raised); border: 0; border-radius: var(--radius); padding: 12px 4px 10px; font-size: 11px; font-weight: 600; transition: background .15s, scale .12s; & svg { inline-size: 17px; block-size: 17px; color: var(--ink-dim); transition: color .15s; } &:hover { background: color-mix(in oklch, var(--raised), var(--ink) 4%); & svg { color: var(--accent); } } &:active { scale: .96; } } .assets { & .label { margin-block-end: 6px; } & ul { list-style: none; margin: 0; padding: 0; } } .asset { display: flex; align-items: center; gap: 11px; padding-block: 11px; border-block-end: 1px solid var(--line); &:last-child { border-block-end: 0; } & .asset-mark { inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); &.is-token { background: var(--raised); color: var(--ink-dim); } } & .asset-name { flex: 1; min-width: 0; & b { display: block; font-size: 14px; font-weight: 600; } & small { font-size: 11.5px; color: var(--ink-faint); } } & .asset-value { text-align: end; font-variant-numeric: tabular-nums; & b { display: block; font-size: 14px; font-weight: 600; } & small { font-size: 11.5px; color: var(--ink-faint); } } } .reveal-row { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--danger-soft); border: 1px solid color-mix(in oklch, var(--danger) 35%, transparent); border-radius: var(--radius); padding: 14px 16px; text-align: start; & svg { color: var(--danger); flex-shrink: 0; } & .t { flex: 1; & b { display: block; font-size: 13px; font-weight: 600; color: var(--danger); } & small { font-size: 11px; color: var(--ink-faint); } } & .chev { color: var(--ink-faint); } } .empty { color: var(--ink-dim); font-size: 13px; } .btn-primary, .btn-quiet, .btn-danger { inline-size: 100%; border: 0; border-radius: 10px; padding: 11px; font-size: 13px; font-weight: 600; margin-block-start: 14px; transition: background .15s; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); &:disabled { opacity: .5; } } .btn-quiet { background: var(--raised); color: var(--ink); &:hover { background: var(--hover); } } .btn-danger { background: var(--danger-soft); color: var(--danger); } .form { display: flex; flex-direction: column; gap: 4px; & label { font-size: 12px; color: var(--ink-dim); margin-block-start: 10px; } & input:not([type="checkbox"]):not([type="radio"]), & select { inline-size: 100%; padding: 10px 12px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--raised); font-size: 16px; &:focus-visible { border-color: var(--accent); outline: none; } } & .form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; & > span { display: flex; flex-direction: column; gap: 4px; } } } .outcome { display: block; margin-block-start: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; background: var(--raised); word-break: break-word; &[data-tone="ok"] { background: var(--accent-soft); color: var(--accent); } &[data-tone="no"] { background: var(--danger-soft); color: var(--danger); } } .swap-row { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--raised); padding: 14px 14px 14px 16px; & input, & output { flex: 1; padding: 0; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; } & input { border: 0; background: none; } & input:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: 9px; } & .swap-unit { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--hover); border-radius: 12px; padding: 8px 12px; flex-shrink: 0; } &.is-readonly { background: var(--panel); & output { color: var(--ink-faint); } } } .field-caption { display: block; font-size: 12px; color: var(--ink-faint) !important; margin-block: 6px 0 !important; } .swap-max { flex-shrink: 0; border: 0; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 6px; padding: 5px 8px; cursor: pointer; } .swap-token-pick { display: block; inline-size: 100%; text-align: end; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 2px; margin-block-start: 4px; } .swap-available, .swap-usd { font-size: 11.5px; color: var(--ink-faint); margin-block: 4px 0; } .swap-arrow { display: flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; margin: -6px auto; position: relative; z-index: 1; color: var(--ink-dim); font-size: 14px; background: var(--panel); border: 3px solid var(--raised); border-radius: 50%; } .swap-detail { font-size: 12px; color: var(--ink-dim); margin-block-start: 6px; min-block-size: 1.4em; &.is-warn { color: var(--amber); } } .sheet-note.is-warn { color: var(--amber); background: var(--amber-soft); border-radius: 9px; padding: 9px 11px; margin-block-end: 10px; } .mo-side-tabs { display: flex; border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--line); margin-block-end: 4px; } .mo-side-tab { flex: 1; padding: 9px; border: 0; background: var(--raised); color: var(--ink-dim); font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: .04em; transition: background .15s, color .15s; } .mo-tab-active { background: var(--accent); color: var(--accent-ink); } .mo-buy-tab.mo-tab-active { background: var(--accent); color: var(--accent-ink); } .mo-sell-tab.mo-tab-active { background: var(--danger); color: #fff; } .mo-side-tab:not(.mo-tab-active):hover { background: var(--hover); } #order-tabs { border: 0; border-radius: 14px; background: var(--raised); padding: 4px; gap: 4px; & .mo-side-tab { border-radius: 11px; padding: 11px; font-size: 13px; letter-spacing: 0; background: none; } & .mo-tab-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); } } .swap-confirm { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; font-size: 12px; line-height: 1.45; border: 1px solid color-mix(in oklch, var(--danger) 40%, transparent); background: var(--danger-soft); border-radius: 9px; cursor: pointer; margin-block: 10px; & input { margin-block-start: 2px; flex-shrink: 0; } } .mo-slider-row { display: flex; align-items: center; gap: 10px; margin-block-start: 8px; } .mo-slider { flex: 1; accent-color: var(--accent); } .mo-slider-val-wrap { display: flex; align-items: center; gap: 3px; flex-shrink: 0; } .mo-slider-val-input { width: 3.2em; text-align: end; border: 1.5px solid var(--line); border-radius: 6px; background: var(--raised); padding: 4px 5px; font-size: 12.5px; } .mo-slider-unit { font-size: 11.5px; color: var(--ink-faint); } .kv { margin: 0; & > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 9px; border-block-end: 1px solid var(--line); &:last-child { border-block-end: 0; } } & dt { color: var(--ink-faint); font-size: 12.5px; } & dd { margin: 0; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; } } .address-block { font-family: var(--mono); font-size: 12px; line-height: 1.6; word-break: break-all; background: var(--raised); border-radius: 10px; padding: 10px 12px; margin: 0 0 4px; } .meter { margin-block-start: 14px; & .meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink-dim); margin-block-end: 6px; & b { color: var(--ink); font-variant-numeric: tabular-nums; } } & .meter-track { block-size: 5px; border-radius: 999px; background: var(--raised); overflow: hidden; } & .meter-bar { block-size: 100%; inline-size: var(--fill, 0%); border-radius: 999px; background: var(--accent); transition: inline-size .4s cubic-bezier(.32,.72,0,1); } } .breaker { display: flex; align-items: center; gap: 8px; margin-block-start: 14px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; background: var(--accent-soft); color: var(--accent); & .breaker-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; } &[data-tripped="true"] { background: var(--danger-soft); color: var(--danger); } } .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 16px; padding-block-start: 16px; border-block-start: 1px solid var(--line); & b { display: block; font-size: 13px; } & small { font-size: 11px; color: var(--ink-faint); } } .switch { position: relative; inline-size: 44px; block-size: 26px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); transition: background .2s, border-color .2s; &::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--ink-faint); transition: translate .2s cubic-bezier(.32,.72,0,1), background .2s; } &[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); &::after { translate: 18px 0; background: var(--accent); } } &:disabled { opacity: .5; } } .sheet-note { font-size: 12.5px; color: var(--ink-dim); margin: 0; &.is-error { color: var(--danger); } & a { color: var(--accent); } } .status-strip { display: grid; grid-template-columns: 1fr; gap: 12px; @container (width >= 640px) { grid-template-columns: 1.15fr 1fr 1fr; } } .status-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; } .status-card .label { margin-block-end: 8px; } .sniper-card { border-color: color-mix(in oklch, var(--mint) 35%, transparent); background: linear-gradient(135deg, var(--mint-soft), var(--accent-soft)); display: flex; flex-direction: column; gap: 8px; } .sniper-card .sniper-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sniper-card .sniper-state { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; } .sniper-card .sniper-state .pulse { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); flex-shrink: 0; } .sniper-card small { font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; } .security-card .value { font-size: 14px; font-weight: 700; color: var(--amber); } .security-card[data-armed="true"] .value { color: var(--ink); } .security-card .sub { font-size: 11.5px; color: var(--ink-dim); margin-block-start: 4px; } .market-panel, .order-panel, .bottom-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .market-chart { inline-size: 100%; block-size: 260px; margin-block-start: 8px; } .bottom-panel { padding: 0; overflow: hidden; & .mo-side-tabs { border-radius: 0; border: 0; border-block-end: 1px solid var(--line); } & .bottom-panel-body { padding: 14px; max-block-size: 360px; overflow-y: auto; } } @container (width >= 640px) { .market-order-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; } } .tx-list { list-style: none; margin: 0; padding: 0; & li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 12px; border-block-end: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; &:last-child { border-block-end: 0; } } & a { color: var(--accent); font-family: var(--mono); text-decoration: none; } & span { color: var(--ink-faint); } & b { color: var(--ink); font-weight: 600; } & li:has(> span:first-child > b) > span:first-child { display: flex; align-items: center; gap: 10px; &::before { content: ""; inline-size: 22px; block-size: 22px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--mint), var(--accent-2)); } } } .status-dot { display: inline-block; inline-size: 7px; block-size: 7px; border-radius: 50%; margin-inline-end: 6px; flex-shrink: 0; background: var(--ink-faint); &[data-status="filled"], &[data-status="confirmed"] { background: var(--accent); } &[data-status="open"], &[data-status="pending"], &[data-status="submitted"] { background: var(--amber); } &[data-status="failed"], &[data-status="cancelled"] { background: var(--danger); } } .toast { position: fixed; inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px)); inset-inline: var(--gap); margin-inline: auto; max-inline-size: 428px; z-index: 30; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; box-shadow: var(--shadow); & .toast-mark { inline-size: 18px; block-size: 18px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; background: var(--accent-soft); color: var(--accent); } & .toast-title { font-size: 13px; font-weight: 700; display: block; } & .toast-detail { font-size: 11px; color: var(--ink-dim); } & .toast-close { margin-inline-start: auto; background: none; border: 0; color: var(--ink-faint); } } .sheet, .modal { border: 0; padding: 0; background: none; color: var(--ink); &::backdrop { background: oklch(12% 0.01 200 / .5); } } .sheet { max-inline-size: 460px; inline-size: 100%; margin: auto auto 0; max-block-size: 86dvh; background: var(--panel); border-start-start-radius: 22px; border-start-end-radius: 22px; border-block-start: 1px solid var(--line); padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; & .grip { inline-size: 36px; block-size: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; } & .sheet-title { font-size: 16px; font-weight: 600; } & .sheet-desc { font-size: 12.5px; color: var(--ink-dim); margin: 4px 0 14px; } & .sheet-desc:empty { display: none; } } .modal { max-inline-size: 340px; inline-size: 100%; margin: auto; background: var(--panel); border-radius: 18px; border: 1px solid var(--line); padding: 24px 22px; text-align: center; box-shadow: var(--shadow); } .reveal-hint { font-size: 12px; color: var(--ink-dim); margin: 12px 0 0; } .reveal-status { font-size: 12.5px; color: var(--ink-dim); margin: 14px 0 0; &.is-error { color: var(--danger); } } .secret { font-family: var(--mono); font-size: 11.5px; word-break: break-all; text-align: start; background: var(--amber-soft); color: var(--amber); border-radius: 10px; padding: 12px; margin: 12px 0 0; } .qr { position: relative; inline-size: 212px; block-size: 212px; margin-inline: auto; & img { inline-size: 200px; block-size: 200px; border-radius: 12px; margin: 6px; display: block; } & svg { position: absolute; inset: 0; rotate: -90deg; } & .qr-track { fill: none; stroke: var(--line); stroke-width: 3; } & .qr-progress { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 641; stroke-dashoffset: 0; animation: drain var(--ttl, 120s) linear forwards; } } .reveal-done { inline-size: 68px; block-size: 68px; border-radius: 50%; margin: 0 auto 4px; display: grid; place-items: center; background: var(--accent-soft); & svg { inline-size: 32px; block-size: 32px; stroke: var(--accent); } } } @layer components { .page:has(#app-shell[hidden]) .topbar-right { display: none; } .status-strip { gap: 14px; @container (width >= 900px) { grid-template-columns: 1.1fr 1fr 1fr; } } .status-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; & .label { font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); margin: 0 0 8px; } } .balance-card { & .amount { font-family: var(--sans); font-size: 26px; font-weight: 700; letter-spacing: 0; line-height: 1.2; & .unit-mark, & .cents { font-size: inherit; color: inherit; } } & .meta { margin-block-start: 6px; } & .addr, & .spark { display: none; } & .live { font-size: 12px; color: var(--ink-dim); & .dot.is-live { background: var(--mint); } } } .sniper-card { border-color: color-mix(in oklch, var(--mint) 35%, transparent); background: linear-gradient(135deg, rgba(45,224,168,0.10), rgba(124,77,255,0.08)), var(--panel); display: block; & .sniper-state { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; margin: 0; } & .pulse { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(45,224,168,0.18); } & .sniper-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-block-start: 10px; } & .sniper-tags span { font-size: 11px; color: var(--ink-dim); background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; } } .security-card { & p { margin: 0; } & .value { font-size: 15px; font-weight: 600; color: var(--amber); } &[data-armed="true"] .value { color: var(--mint); } & .sub { font-size: 12px; color: var(--ink-dim); margin-block-start: 6px; } } .market-order-row { display: grid; gap: 20px; align-items: start; @container (width >= 900px) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 460px); } } .market-card, .order-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .order-panel { padding: 18px; } .market-panel, .bottom-panel { background: none; border: 0; border-radius: 0; padding: 0; overflow: visible; } .chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-block-end: 14px; } .token-head { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font-size: 18px; font-weight: 700; color: var(--ink); & .caret { font-size: 12px; color: var(--ink-faint); } } .token-ic { inline-size: 28px; block-size: 28px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #ff8a5c, #ff4dae); } .price-line { font-size: 13px; font-weight: 600; color: var(--mint); margin: 4px 0 0; min-block-size: 1.2em; &.is-down { color: var(--down); } } .tf-pills { display: flex; gap: 4px; & button { background: none; border: 0; font-size: 12px; padding: 5px 10px; border-radius: 8px; color: var(--ink-dim); } & button.is-active { background: var(--raised); color: var(--ink); } } .market-chart { block-size: 230px; margin: 0; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(45,224,168,0.08), transparent 60%); } .metrics-row { display: flex; gap: 24px; margin-block-start: 18px; flex-wrap: wrap; & div { font-size: 12px; color: var(--ink-faint); } & b { display: block; font-size: 15px; color: var(--ink); font-weight: 700; margin-block-start: 2px; } & b.is-up { color: var(--mint); } & b.is-down { color: var(--down); } } .metrics-row:empty { display: none; } #market-status:empty { display: none; } .bottom-tabs { display: flex; gap: 22px; margin-block-start: 22px; border-block-end: 1px solid var(--line); & .mo-side-tab { flex: none; background: none; padding: 0 0 10px; border-radius: 0; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--ink-dim); border-block-end: 2px solid transparent; margin-block-end: -1px; } & .mo-side-tab:not(.mo-tab-active):hover { background: none; color: var(--ink); } & .mo-tab-active { background: none; color: var(--ink); border-block-end-color: var(--accent); } } .bottom-panel .bottom-panel-body { padding: 0; max-block-size: 380px; overflow-y: auto; } .bottom-panel-body .kv > div { padding-block: 14px; } .bottom-panel-body .tx-list li { padding: 14px 4px; font-size: 14px; } .bottom-panel-body .tx-list b { font-weight: 600; } .bottom-panel-body .tx-list small { margin-inline-start: 8px; color: var(--ink-faint); font-size: 11.5px; } .strategy-tag { font-size: 11px; background: rgba(216,77,252,0.14); color: var(--accent) !important; padding: 3px 8px; border-radius: 7px; } #order-tabs { border: 0; border-radius: 14px; background: var(--raised); padding: 4px; gap: 6px; margin-block-end: 16px; & .mo-side-tab { border-radius: 11px; padding: 10px; font-size: 14px; letter-spacing: 0; background: none; color: var(--ink-dim); } & .mo-tab-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; } } .swap-form { gap: 0; } .swap-field { background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; &.is-readonly { margin-block-start: 0; } } #swap-form .swap-field-top { display: flex; align-items: center; gap: 8px; & input, & output { flex: 1; min-inline-size: 0; font-size: 26px; font-weight: 700; padding: 0 !important; border: 0 !important; background: none !important; color: var(--ink); font-variant-numeric: tabular-nums; } & input::placeholder { color: var(--ink-faint); } & input:focus-visible { outline: none; box-shadow: none; } & output { color: var(--ink-dim); } } .swap-field-bottom { display: flex; justify-content: space-between; gap: 10px; margin-block-start: 8px; font-size: 12px; color: var(--ink-faint); & label { margin: 0 !important; font-size: 12px; color: var(--ink-faint) !important; } } .token-pill { display: flex; align-items: center; gap: 8px; flex-shrink: 0; background: rgba(255,255,255,0.06); border: 0; border-radius: 12px; padding: 6px 10px 6px 6px; font-size: 14px; font-weight: 700; color: var(--ink); & .token-ic { inline-size: 22px; block-size: 22px; background: linear-gradient(135deg, #8b5cf6, #22c1c3); } & .token-ic.is-out { background: linear-gradient(135deg, var(--mint), #2596ff); } } .swap-form .swap-arrow { inline-size: 34px; block-size: 34px; margin: -6px auto; position: relative; z-index: 2; background: var(--raised); border: 3px solid var(--panel); border-radius: 50%; color: var(--ink-dim); padding: 0; cursor: pointer; transition: rotate .25s ease; &:active { rotate: 180deg; } } .swap-wallet { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-block-end: 10px; &::-webkit-scrollbar { display: none; } } .wallet-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex-shrink: 0; border: 1px solid transparent; background: var(--raised); border-radius: 12px; padding: 7px 11px; color: var(--ink); cursor: pointer; text-align: start; & b { font-size: 13px; font-weight: 700; white-space: nowrap; } & small { font-size: 11px; color: var(--ink-faint); } &.is-current { border-color: var(--mint); background: color-mix(in oklch, var(--mint) 10%, var(--raised)); } } .swap-wallet-empty { font-size: 12px; color: var(--ink-faint); margin: 0 0 10px; } #swap-available.is-warn { color: var(--amber); } .route-info { margin: 14px 2px 0; & div { display: flex; justify-content: space-between; padding-block: 5px; font-size: 12px; } & dt { color: var(--ink-dim); } & dd { margin: 0; color: var(--ink-dim); } & dd.is-warn { color: var(--amber); } } .swap-form .swap-confirm { margin-block: 12px 0; } .cta-btn, .order-panel .btn-primary { padding: 16px; border-radius: 16px; font-size: 15px; font-weight: 700; margin-block-start: 12px; } .order-panel .btn-primary:disabled { opacity: .55; } .order-panel .sheet-note { font-size: 13px; color: var(--ink-dim); } .sniper-box { margin-block-start: 18px; border-radius: 16px; padding: 14px 16px; background: linear-gradient(135deg, rgba(45,224,168,0.10), rgba(124,77,255,0.06)); border: 1px solid rgba(45,224,168,0.30); & .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; } & p { font-size: 12px; color: var(--ink-dim); margin: 8px 0 0; line-height: 1.5; } & .switch { inline-size: 36px; block-size: 20px; border: 0; background: var(--line); } & .switch::after { inline-size: 16px; block-size: 16px; inset-block-start: 2px; inset-inline-start: 2px; background: #fff; } & .switch[aria-checked="true"] { background: var(--mint); &::after { translate: 16px 0; background: #fff; } } } .order-panel .actions { display: flex; gap: 10px; margin-block-start: 16px; max-inline-size: none; & .action { flex: 1; flex-direction: row; justify-content: center; gap: 4px; background: var(--raised); border: 1px solid var(--line); border-radius: 14px; padding: 12px 6px; font-size: 12px; font-weight: 600; color: var(--ink-dim); &:hover { color: var(--ink); background: var(--raised); } } } .reveal-row { background: rgba(255,92,92,0.06); border: 1px solid rgba(255,92,92,0.35); border-radius: 16px; padding: 14px 18px; & .t b { font-size: 13px; font-weight: 700; } & .t small { font-size: 12px; color: var(--ink-dim); } & .chev { color: var(--danger); } } .toast { background: var(--raised); } .sheet, .modal { background: var(--panel); } } @layer components { #picker { position: fixed; inset: 0; margin: 0; padding: 0; inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; border: 0; border-radius: 0; background: var(--bg); color: var(--ink); overflow: hidden; &[open] { display: flex; flex-direction: column; } &::backdrop { background: var(--bg); } & > .grip, & > .sheet-title, & > .sheet-close { display: none; } & > .sheet-body { flex: 1; min-block-size: 0; display: flex; flex-direction: column; } & .picker-top { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 12px; border-block-end: 1px solid color-mix(in oklch, var(--line) 70%, transparent); } & .picker-title { margin: 4px 2px 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; } & .picker-search { display: flex; align-items: center; gap: 14px; } & .picker-field { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: 10px; background: var(--raised); border: 1px solid transparent; border-radius: 14px; padding: 0 14px; transition: border-color .15s; &:focus-within { border-color: color-mix(in oklch, var(--ink) 25%, transparent); } & svg { inline-size: 18px; block-size: 18px; flex-shrink: 0; fill: none; stroke: var(--ink-faint); stroke-width: 1.8; stroke-linecap: round; } } & .picker-field input { flex: 1; min-inline-size: 0; -webkit-appearance: none; appearance: none; background: none; border: 0; outline: 0; padding: 13px 0; margin: 0; font-size: 17px; font-weight: 500; color: var(--ink); &::placeholder { color: var(--ink-faint); font-weight: 400; } &::-webkit-search-decoration { display: none; } } & .picker-cancel { flex-shrink: 0; background: none; border: 0; padding: 8px 0; font-size: 16px; font-weight: 500; color: var(--ink-dim); &:hover { color: var(--ink); } } & .picker-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 8px calc(28px + env(safe-area-inset-bottom, 0px)); } & .picker-label { margin: 14px 12px 6px; font-size: 12px; font-weight: 600; color: var(--ink-faint); letter-spacing: .02em; text-transform: none; } & .picker-hint { font-size: 12.5px; color: var(--ink-faint); margin: 18px 12px 0; } & .picker-list { list-style: none; margin: 0; padding: 0; } & .tok-row { display: flex; align-items: center; gap: 14px; min-block-size: 64px; padding: 8px 12px; border-radius: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .12s; &:hover, &:focus-visible { background: var(--raised); outline: none; } &:active { background: color-mix(in oklch, var(--raised) 70%, var(--ink) 6%); } } & .tok-av { position: relative; flex-shrink: 0; inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: oklch(42% 0.09 var(--h, 250)); color: oklch(92% 0.04 var(--h, 250)); font-size: 16px; font-weight: 700; & img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; background: var(--raised); } } & .tok-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; & small { font-size: 13px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } & .tok-sym { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } & .tok-check { inline-size: 16px; block-size: 16px; flex-shrink: 0; fill: var(--mint); & .tick { fill: none; stroke: var(--bg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } } & .tok-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; color: var(--ink-dim); font-variant-numeric: tabular-nums; & b { font-size: 15px; font-weight: 600; color: var(--ink); } & i { font-style: normal; font-size: 11.5px; color: var(--amber); } } & .tok-note { padding: 18px 12px; font-size: 14px; color: var(--ink-dim); } & .is-skeleton { cursor: default; pointer-events: none; & .tok-av, & .tok-main span, & .tok-main small { background: linear-gradient(90deg, var(--raised) 0%, color-mix(in oklch, var(--raised) 60%, var(--ink) 8%) 50%, var(--raised) 100%); background-size: 200% 100%; animation: tok-shimmer 1.2s linear infinite; } & .tok-main span { block-size: 14px; inline-size: 38%; border-radius: 6px; } & .tok-main small { block-size: 11px; inline-size: 62%; border-radius: 6px; } } @media (width >= 672px) { inset: 0; margin: auto; inline-size: min(460px, 100% - 32px); block-size: min(640px, 86dvh); border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 30px 80px rgb(0 0 0 / .5); &::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(6px); } & .picker-top { padding-block-start: 16px; } } } @keyframes tok-shimmer { to { background-position: -200% 0; } } @media (pointer: coarse) { .page input:not([type="checkbox"]), dialog input:not([type="checkbox"]), dialog select { font-size: 16px; } } } @layer motion { .sheet, .modal { transition: translate .32s cubic-bezier(.32,.72,0,1), opacity .25s, display .32s allow-discrete; } .sheet { translate: 0 0; } .sheet:not([open]) { translate: 0 100%; } @starting-style { .sheet[open] { translate: 0 100%; } } .modal[open] { opacity: 1; scale: 1; } .modal:not([open]) { opacity: 0; scale: .96; } @starting-style { .modal[open] { opacity: 0; scale: .96; } } .sheet::backdrop, .modal::backdrop { transition: opacity .25s, display .25s allow-discrete; opacity: 1; } .sheet:not([open])::backdrop, .modal:not([open])::backdrop { opacity: 0; } @starting-style { .sheet[open]::backdrop, .modal[open]::backdrop { opacity: 0; } } @keyframes drain { to { stroke-dashoffset: 641; } } :root { --ease-out: cubic-bezier(.2,.8,.2,1); } @keyframes rise { from { opacity: 0; translate: 0 10px; } } @keyframes fade-in { from { opacity: 0; translate: 0 4px; } } @keyframes ping { to { scale: 2.6; opacity: 0; } } .status-strip > .status-card, .market-card, .order-panel, .reveal-row, #onchain-empty-state, #login-screen { animation: rise .38s var(--ease-out) backwards; } .status-strip > :nth-child(2) { animation-delay: 40ms; } .status-strip > :nth-child(3) { animation-delay: 80ms; } .market-card { animation-delay: 100ms; } .order-panel { animation-delay: 140ms; } #order-panel-body > *, .bottom-panel-body > *, #sheet .sheet-body > * { animation: fade-in .22s var(--ease-out) backwards; } .toast { transition: opacity .25s, translate .3s var(--ease-out); } @starting-style { .toast { opacity: 0; translate: 0 12px; } } .btn-primary, .btn-quiet, .btn-danger { transition: background .15s, scale .12s var(--ease-out); } .switcher button { transition: color .2s, border-color .2s, background .2s, scale .12s var(--ease-out); } .mo-side-tab { transition: background .15s, color .15s, scale .12s var(--ease-out); } .token-pill, .addr-chip, .tf-pills button, .reveal-row, .swap-max, .token-head, .toast-close { transition: scale .12s var(--ease-out); } :is(.btn-primary, .btn-quiet, .btn-danger, .switcher button, .mo-side-tab, .token-pill, .addr-chip, .tf-pills button, .swap-max, .token-head, .toast-close):active:not(:disabled) { scale: .96; } .reveal-row:active { scale: .985; } #order-tabs .mo-side-tab { position: relative; isolation: isolate; } #order-tabs .mo-side-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, var(--accent), var(--accent-2)); opacity: 0; scale: .9; transition: opacity .2s, scale .28s var(--ease-out); } #order-tabs .mo-tab-active { background: none; } #order-tabs .mo-tab-active::before { opacity: 1; scale: 1; } .bottom-tabs .mo-side-tab { position: relative; } .bottom-tabs .mo-side-tab::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px; block-size: 2px; border-radius: 2px; background: var(--accent); scale: 0 1; transition: scale .28s var(--ease-out); } .bottom-tabs .mo-tab-active { border-block-end-color: transparent; } .bottom-tabs .mo-tab-active::after { scale: 1 1; } .sniper-card .pulse, .live .dot.is-live { position: relative; } .sniper-card .pulse::after, .live .dot.is-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2s cubic-bezier(0,0,.2,1) infinite; } .qr, .reveal-done { animation: rise .3s var(--ease-out) backwards; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } } @layer components { .more-btn { display: grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-dim); & svg { inline-size: 18px; block-size: 18px; fill: currentColor; } &:hover { color: var(--ink); } } .more-sheet { & .menu-list { display: flex; flex-direction: column; gap: 2px; margin-block-end: 12px; } & .reveal-row { margin-block-end: 4px; } } .menu-item { display: flex; align-items: center; gap: 14px; inline-size: 100%; text-align: start; background: none; border: 0; border-radius: 14px; padding: 10px 8px; & b { display: block; font-size: 14px; font-weight: 600; } & small { font-size: 12px; color: var(--ink-faint); } &:hover { background: var(--raised); } } .menu-ic { display: grid; place-items: center; flex-shrink: 0; inline-size: 36px; block-size: 36px; border-radius: 12px; background: var(--raised); color: var(--accent); font-size: 15px; } .status-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .balance-card { flex: 1 0 100%; background: none; border: 0; padding: 0 2px; & .amount { font-size: 34px; } @container (width >= 640px) { flex: 1 1 auto; } } .sniper-card, .security-card { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 7px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; & .label { margin: 0; font-size: 10.5px; } & .sniper-state, & .value { margin: 0; } } .sniper-card .sniper-state { font-size: 13px; font-weight: 600; gap: 7px; } .sniper-card .pulse { inline-size: 7px; block-size: 7px; box-shadow: none; } .sniper-card .sniper-tags, .security-card .sub { display: none; } .security-card .value { font-size: 13px; } .order-panel:not(:has([data-order-tab="sniper"].mo-tab-active)) .sniper-box { display: none; } @container (width < 640px) { .topbar { display: flex; flex-wrap: nowrap; & .addr-chip, & .switcher { display: none; } & .topbar-right { display: flex; margin-inline-start: auto; } } .balance-card { padding-block: 4px 0; & .amount { font-size: 42px; letter-spacing: -.02em; } } .security-card, .sniper-card:not(:has(.pulse:not([hidden]))) { display: none; } .market-order-row { display: flex; flex-direction: column; align-items: stretch; gap: 14px; } .market-card { display: contents; } .market-panel, .bottom-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .market-panel { order: 1; } .order-panel { order: 2; padding: 16px; } .bottom-panel { order: 3; } .tf-pills, .metrics-row { display: none; } .chart-head { margin-block-end: 10px; } .market-chart { block-size: 170px; } #order-tabs, .bottom-tabs { background: none; border: 0; padding: 0; margin: 0 0 12px; gap: 0; & .mo-side-tab:not(.mo-tab-active) { display: none; } & .mo-tab-active { flex: none; padding: 0; background: none; color: var(--ink); pointer-events: none; font-size: 15px; font-weight: 700; text-align: start; border: 0; } & .mo-side-tab::before, & .mo-side-tab::after { display: none; } } .bottom-panel .bottom-panel-body { max-block-size: none; overflow: visible; } .swap-form .swap-field::before { display: block; margin-block-end: 8px; font-size: 12px; font-weight: 600; color: var(--ink-dim); content: "1  You pay"; } .swap-form .swap-field.is-readonly::before { content: "2  You receive"; } .swap-form:has(#swap-amount:placeholder-shown) :is(.route-info, .swap-confirm) { display: none; } .route-info div:nth-child(2) { display: none; } } } @layer components { @media (width >= 672px) { .menu-mobile { display: none; } } @media (width < 672px) { .more-sheet .menu-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .more-sheet .menu-item { flex-direction: column; justify-content: center; gap: 8px; text-align: center; padding: 14px 4px; background: var(--raised); border-radius: 16px; & b { font-size: 12.5px; font-weight: 600; } & small { display: none; } } .more-sheet .menu-ic { background: var(--panel); } } } @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/static/fonts/geist-latin.woff2?v=1) format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/static/fonts/geist-mono-latin.woff2?v=1) format("woff2"); } @layer tokens { :root { --bg: #0a0a0b; --panel: #121214; --raised: #19191c; --line: #232327; --ink: #f3f2ee; --ink-dim: #a3a29c; --ink-faint: #6b6a66; --live: #c8f169; --live-soft: color-mix(in oklch, var(--live) 14%, transparent); --accent: #f3f2ee; --accent-2: #f3f2ee; --accent-ink: #0a0a0b; --accent-soft: color-mix(in oklch, var(--ink) 9%, transparent); --mint: var(--live); --up: #7ee0a6; --down: #ff7a6b; --danger: #ff7a6b; --amber: #f2c14e; --sans: "Geist", -apple-system, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --radius: 22px; } } @layer components { body { background: var(--bg); font-feature-settings: "ss01"; letter-spacing: -.005em; } .topbar { display: flex; } .brand-dot { background: var(--live); } .topbar h1 { font-weight: 600; font-size: 15px; } .more-btn { border-color: transparent; background: var(--raised); } .market-card, .order-panel, .market-panel, .bottom-panel { border-color: transparent; } .token-ic, .token-pill .token-ic, .token-pill .token-ic.is-out, .tx-list li:has(> span:first-child > b) > span:first-child::before { background: var(--raised); } .token-pill { background: var(--raised); } .swap-field { border-color: transparent; background: var(--raised); } .swap-form .swap-arrow { background: var(--raised); border-color: var(--panel); } .swap-max { background: var(--accent-soft); color: var(--ink); } .swap-confirm { background: var(--raised); border-color: color-mix(in oklch, var(--danger) 35%, transparent); } .market-chart { background: none; } .sniper-box { background: var(--raised); border-color: var(--line); } .sniper-box .switch[aria-checked="true"] { background: var(--live); } .strategy-tag { background: var(--accent-soft); color: var(--ink) !important; } .num, .amount, .kv dd, .tx-list li { font-variant-numeric: tabular-nums; } .balance-card { & .label { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-dim); } & .amount { font-size: 46px; font-weight: 600; letter-spacing: -.035em; line-height: 1; & .cents { color: var(--ink-faint); font-weight: 500; } } } .status-strip > .sniper-card, .status-strip > .security-card { display: none !important; } #app-shell[data-view="pilot"] :is(#market-order-row, #bottom-panel) { display: none !important; } #app-shell[data-view="manual"] #pilot { display: none !important; } .pilot { display: grid; gap: 22px; align-items: start; @container (width >= 900px) { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; } } .pilot-main, .pilot-side { display: grid; gap: 14px; min-inline-size: 0; } .pilot-card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--panel); padding: 6px 6px 14px; } .pilot-status { display: flex; align-items: center; gap: 12px; inline-size: 100%; text-align: start; background: none; border: 0; border-radius: 16px; padding: 12px 12px 10px; &:hover { background: var(--hover); } } .pilot-dot { position: relative; inline-size: 10px; block-size: 10px; border-radius: 50%; flex: none; background: var(--ink-faint); } .pilot[data-tone="live"] .pilot-dot { background: var(--live); &::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2.2s cubic-bezier(0,0,.2,1) infinite; } } .pilot[data-tone="warn"] .pilot-dot { background: var(--amber); } .pilot-line { flex: 1; min-inline-size: 0; margin: 0; & b { display: block; font-size: 15.5px; font-weight: 600; } & small { display: block; font-size: 13px; color: var(--ink-dim); } } .pilot[data-tone="warn"] .pilot-line small { color: var(--amber); } .pilot-chev { color: var(--ink-faint); font-size: 18px; } .pilot-error { margin: 12px; color: var(--danger); font-size: 13px; } .pilot-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 12px 0; padding-block-start: 12px; border-block-start: 1px solid var(--line); & dt { font-size: 11.5px; color: var(--ink-faint); } & dd { margin: 2px 0 0; font: 500 16px/1.2 var(--mono); letter-spacing: -.02em; } & dd span { color: var(--ink-faint); font-size: 12px; } } .pilot-scan { position: absolute; inset: auto 0 0; block-size: 2px; overflow: hidden; } .pilot[data-tone="live"] .pilot-scan::before { content: ""; position: absolute; inset: 0; inline-size: 30%; background: linear-gradient(90deg, transparent, var(--live)); animation: sweep 3.2s linear infinite; } @keyframes sweep { from { translate: -100% 0; } to { translate: 340% 0; } } .pilot-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; inline-size: 100%; padding: 16px 18px; border: 0; border-radius: var(--radius); background: var(--raised); text-align: start; & b { display: block; font-size: 16px; font-weight: 600; } & small { display: block; font-size: 12.5px; color: var(--ink-faint); margin-block-start: 1px; } &:disabled { opacity: .7; } } .pilot-switch { position: relative; inline-size: 52px; block-size: 32px; flex: none; border-radius: 99px; background: var(--line); transition: background .25s; &::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--ink); transition: translate .3s cubic-bezier(.2,.8,.2,1), background .25s; } } .pilot-toggle[aria-checked="true"] .pilot-switch { background: var(--live); &::after { translate: 20px 0; background: var(--bg); } } .pilot-intro { border-radius: var(--radius); background: var(--panel); padding: 18px; & h2 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin-block-end: 6px; } & p { margin: 0; color: var(--ink-dim); font-size: 14px; } } .pilot-rules { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; & li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--raised); font-size: 14px; } & span { color: var(--ink-dim); } & b { font-weight: 500; text-align: end; } } .pilot-feed, .pilot-rejected { & header { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 4px; } & h3 { font-size: 13px; font-weight: 500; color: var(--ink-dim); } & header span { font-size: 12px; color: var(--ink-faint); } & ul { list-style: none; margin: 0; padding: 0; } } .pilot-feed li { border-block-end: 1px solid var(--line); &:last-child { border: 0; } } .pilot-feed li.is-new { animation: rise .6s cubic-bezier(.2,.8,.2,1) backwards; } .pilot-feed button { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; inline-size: 100%; padding: 12px 4px; background: none; border: 0; border-radius: 12px; text-align: start; transition: background .15s, scale .12s; &:hover { background: var(--hover); } &:active { scale: .985; } } .pilot .tk, .pilot-sheet .tk, .radar .tk { inline-size: 36px; block-size: 36px; border-radius: 12px; background: var(--raised); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-dim); } .tk-name { min-inline-size: 0; & b { display: block; font-size: 15px; font-weight: 600; } & small { display: block; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .tk-state { display: grid; justify-items: end; gap: 3px; & .num { font: 500 14px var(--mono); letter-spacing: -.02em; } } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; &::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ink-dim); } &[data-state="in"]::before { background: var(--live); } &[data-state="blocked"]::before { background: var(--amber); } } .pilot-empty { padding: 14px 4px; font-size: 13.5px; color: var(--ink-dim); } .pilot-rejected { & li { display: flex; gap: 10px; padding: 7px 4px; font-size: 12.5px; color: var(--ink-faint); border-block-end: 1px solid var(--line); } & li:last-child { border: 0; } & b { color: var(--ink-dim); font-weight: 500; min-inline-size: 64px; } } .radar { & header { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 4px; } & h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-dim); } & header > span { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } & ul { list-style: none; margin: 0; padding: 0; } & li { border-block-end: 1px solid var(--line); &:last-child { border: 0; } } & li.is-new { animation: rise .6s cubic-bezier(.2,.8,.2,1) backwards; } & .radar-col button { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; inline-size: 100%; padding: 12px 4px; background: none; border: 0; border-radius: 12px; text-align: start; transition: background .15s, scale .12s; &:hover { background: var(--hover); } &:active { scale: .985; } } & .tk { position: relative; } & .tk::after { content: ""; position: absolute; inset: auto -2px -2px auto; inline-size: 9px; block-size: 9px; border-radius: 50%; border: 2px solid var(--bg); background: var(--ink-faint); } & .tk[data-chain="solana"]::after { background: #9b6bff; } & .tk[data-chain="robinhood"]::after { background: var(--live); } & .num[data-sign="up"] { color: var(--up); } } .radar-dot { position: relative; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--live); &::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2.2s cubic-bezier(0,0,.2,1) infinite; } } .radar[data-running="true"] .radar-dot::after { animation-duration: .9s; } .radar-new { margin-block-end: 10px; padding-block-end: 6px; border-block-end: 1px solid var(--line); } .radar .radar-new li.is-enter { animation: listing-in .6s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * 90ms + 60ms); } .radar .radar-new li.is-arrival { animation: listing-drop .62s cubic-bezier(.2,.9,.25,1.15) backwards; & button { animation: listing-flash 2.6s ease-out; } & .tk { animation: listing-ring 1.4s cubic-bezier(0,0,.2,1) .15s; } & .num { animation: listing-in .5s cubic-bezier(.2,.8,.2,1) .2s backwards; } } .radar .radar-new li.is-enter .tk::after { animation: listing-pop .45s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay: calc(var(--i) * 90ms + 320ms); } .radar .radar-new li.is-arrival .tk::after { animation: listing-pop .45s cubic-bezier(.3,1.6,.5,1) .3s backwards; } @keyframes listing-in { from { opacity: 0; translate: 0 14px; filter: blur(6px); } } @keyframes listing-drop { from { opacity: 0; translate: 0 -18px; scale: .96; filter: blur(4px); } } @keyframes listing-flash { from { background: var(--live-soft); } } @keyframes listing-ring { from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--live) 55%, transparent); } to { box-shadow: 0 0 0 14px transparent; } } @keyframes listing-pop { from { scale: 0; } } @media (prefers-reduced-motion: reduce) { .radar .radar-new li :is(*), .radar .radar-new li { animation: none !important; } } .radar-foot { margin: 6px 4px 0; font-size: 11.5px; color: var(--ink-faint); } .radar-pulse { position: relative; margin: 8px 4px 6px; padding-block-start: 8px; font-size: 12.5px; color: var(--ink-dim); overflow: hidden; & p { margin: 0; min-block-size: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & [data-pulse-now][data-tone="no"] { color: var(--danger); } & .rp-stats { font-size: 11.5px; color: var(--ink-faint); & b { color: var(--ink-dim); font-weight: 600; font-variant-numeric: tabular-nums; } } } .rp-scan { position: absolute; inset: 0 0 auto; block-size: 2px; border-radius: 2px; background: var(--line); &::after { content: ""; position: absolute; inset: 0; inline-size: 30%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--live), transparent); animation: radar-scan 2.8s cubic-bezier(.45,0,.55,1) infinite; } } .radar-pulse[data-busy="true"] .rp-scan::after { animation-duration: 1.1s; } @keyframes radar-scan { from { translate: -100% 0; } to { translate: 340% 0; } } .radar-rejected, .radar-log { margin-block-start: 18px; padding-block-start: 6px; border-block-start: 1px solid var(--line); & ul { list-style: none; margin: 4px 0 0; padding: 0; } & li { border-block-end: 1px solid var(--line); } & li.is-arrival { animation: listing-drop .62s cubic-bezier(.2,.9,.25,1.15) backwards; } & summary { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 9px 4px; cursor: pointer; list-style: none; border-radius: 10px; &::-webkit-details-marker { display: none; } &:hover { background: var(--hover); } } & .tk { opacity: .55; } & .tk-name { display: flex; flex-direction: column; min-inline-size: 0; & b { font-weight: 600; } & small { font-size: 11.5px; color: var(--ink-faint); } } & .rj-why { grid-column: 2; font-size: 12px; color: var(--danger); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & details[open] .rj-why { white-space: normal; } & details > :not(summary) { margin-inline: 4px; } } .rj-more { margin: 8px 4px 0; padding: 6px 12px; border: 0; border-radius: 99px; background: var(--raised); color: var(--ink-dim); font-size: 12.5px; } .radar-log li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 9px 4px; } .radar-shame { & .tk { opacity: 1; filter: grayscale(1); } & .tk-name b { text-decoration: line-through; text-decoration-color: var(--danger); } } @media (prefers-reduced-motion: reduce) { .rp-scan::after, .radar-rejected li { animation: none !important; } } #app-shell[data-view="manual"] #radar { display: none !important; } .radar-grid { display: grid; gap: 18px; align-items: start; @container (width >= 900px) { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; } } .radar-col { min-inline-size: 0; } .radar-sub, .radar-new h4 { margin: 6px 4px 0; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); } .radar-empty { margin: 8px 4px 10px; font-size: 12.5px; color: var(--ink-faint); } .radar li.is-on > button { background: var(--hover); } .radar-stage { min-inline-size: 0; border-radius: var(--radius); background: var(--panel); padding: 14px 14px 8px; & .tk { flex: none; } } .radar-idle { margin: 0; padding: 40px 12px; text-align: center; font-size: 13.5px; color: var(--ink-faint); } .stage-head { display: flex; align-items: center; gap: 12px; margin-block-end: 6px; & h2 { margin: 0; font-size: 17px; font-weight: 600; } & h2 small { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); } & p { margin: 2px 0 0; font-size: 12px; color: var(--ink-faint); } } .stage-best { margin: 4px 2px 10px; font-size: 13px; color: var(--ink-dim); & [data-sign="up"] { color: var(--up); } & [data-sign="down"] { color: var(--danger); } } .stage-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; & a { padding: 6px 11px; border-radius: 99px; background: var(--raised); color: var(--ink-dim); font-size: 12.5px; text-decoration: none; transition: background .15s, color .15s; &:hover { background: var(--hover); color: var(--ink); } } & a.is-main { background: var(--live-soft); color: var(--live); } } .report-card { margin: 0 0 12px; } .rc-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-block-end: 4px; border-radius: 12px; background: var(--raised); & .rc-score { font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--g); } & b { display: block; font-size: 14px; color: var(--g); text-transform: capitalize; } & small { font-size: 11.5px; color: var(--ink-faint); } } [data-grade="top"] { --g: var(--up); } [data-grade="good"] { --g: #6ea8ff; } [data-grade="mid"] { --g: #f0a500; } [data-grade="low"] { --g: var(--danger); } .rc-list { list-style: none; margin: 0; padding: 0; & > li { display: grid; grid-template-columns: 20px max-content minmax(0, 1fr); column-gap: 10px; row-gap: 5px; align-items: baseline; padding: 9px 2px; border-block-end: 1px solid var(--line); font-size: 13px; } & > li:last-child { border: 0; } & .rc-label { font-weight: 500; } & .rc-detail { color: var(--ink-dim); overflow-wrap: anywhere; } } .rc-list .mark[data-tone="ok"] { color: var(--up); } .rc-list .mark[data-tone="no"] { color: var(--danger); } .rc-list .mark[data-tone="info"] { color: var(--ink-faint); } .rc-meter { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; } .rc-bar { flex: 1; max-inline-size: 220px; block-size: 5px; border-radius: 3px; background: var(--line); overflow: hidden; & i { display: block; block-size: 100%; inline-size: var(--w); border-radius: inherit; background: var(--g); animation: rc-grow .9s cubic-bezier(.2,.8,.2,1) backwards; } } .rc-grade { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; } @keyframes rc-grow { from { inline-size: 0; } } .rc-facts { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px 12px; margin: 4px 0 2px; font-size: 12px; & div { min-inline-size: 0; } & dt { color: var(--ink-faint); font-size: 11px; } & dd { margin: 0; color: var(--ink-dim); overflow-wrap: anywhere; } & a { color: var(--live); text-decoration: none; } } @media (prefers-reduced-motion: reduce) { .rc-bar i { animation: none; } } .radar-live { margin-inline-start: auto; align-self: start; font-size: 11.5px; color: var(--live); display: inline-flex; align-items: center; gap: 6px; &::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; } } .radar-chart { block-size: min(300px, 38dvh); margin: 0 -6px 10px; display: grid; place-items: center; font-size: 13px; color: var(--ink-faint); touch-action: pan-y; } .radar-strats { list-style: none; margin: 0 0 12px; padding: 0; & li { display: flex; align-items: center; gap: 8px; border-block-end: 1px solid var(--line); } & li:last-child { border: 0; } & li[data-shown="false"] .rs-swatch { background: transparent; } & li[data-shown="false"] b { color: var(--ink-dim); font-weight: 500; } } .rs-show { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: 12px; padding: 10px 4px; background: none; border: 0; border-radius: 10px; text-align: start; &:hover { background: var(--hover); } } .rs-swatch { inline-size: 12px; block-size: 12px; border-radius: 4px; flex: none; border: 2px solid var(--c); background: var(--c); transition: background .2s; } .rs-switch { position: relative; inline-size: 40px; block-size: 24px; flex: none; border: 0; border-radius: 99px; background: var(--line); transition: background .25s; & span { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--ink); transition: translate .3s cubic-bezier(.2,.8,.2,1), background .25s; } &[aria-checked="true"] { background: var(--live); & span { translate: 16px 0; background: var(--bg); } } } .radar-stats { margin: 0 0 12px; padding-block-start: 12px; row-gap: 12px; & dd[data-sign="up"] { color: var(--up); } } .radar-note { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-faint); } .radar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; & a { display: grid; place-items: center; text-decoration: none; } } @media (prefers-reduced-motion: reduce) { .radar-dot::after, .radar li.is-new { animation: none; } } .pilot-sheet { max-block-size: 88dvh; } .diag-head { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; & h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; } & p { margin: 2px 0 0; font-size: 13px; color: var(--ink-dim); } } .verdict { border-radius: 16px; padding: 14px; margin-block-end: 12px; font-size: 14px; background: var(--raised); color: var(--ink-dim); & b { display: block; color: var(--ink); font-weight: 600; margin-block-end: 2px; } &[data-state="in"] { background: var(--live-soft); color: var(--live); } &[data-state="blocked"] { background: color-mix(in oklch, var(--amber) 13%, transparent); color: var(--amber); } } .checks { list-style: none; margin: 0 0 12px; padding: 0; & li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-block-end: 1px solid var(--line); font-size: 14px; } & li:last-child { border: 0; } & li > span:last-child { color: var(--ink-dim); font-size: 13px; text-align: end; } & .mark[data-tone="ok"] { color: var(--up); } & .mark[data-tone="no"] { color: var(--danger); } & .mark[data-tone="wait"], & .mark[data-tone="info"] { color: var(--ink-faint); } } .diag-log { list-style: none; margin: 0; padding: 0; font-size: 12.5px; & li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 4px 0; } & time { color: var(--ink-faint); white-space: nowrap; } & span { color: var(--ink-dim); } } } @layer components { .topbar #chain-switch { display: none; } .balance-card .label { display: flex; align-items: center; gap: 6px; } .chain-flip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; margin-block: -4px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s, scale .12s var(--ease-out); & .chain-ic { color: var(--live); font-size: 12px; } & .flip-ic { color: var(--ink-faint); font-size: 11px; transition: rotate .35s var(--ease-out), color .2s; } &:hover { border-color: var(--ink-faint); & .flip-ic { color: var(--ink); } } &:active { scale: .96; } &.is-flipping .flip-ic { rotate: 180deg; } &.is-flipping #chain-label { animation: chain-in .35s var(--ease-out); } } @keyframes chain-in { from { opacity: 0; translate: 0 4px; } } @media (prefers-reduced-motion: reduce) { .chain-flip .flip-ic { transition: none; } .chain-flip.is-flipping #chain-label { animation: none; } } } @layer motion { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; } body { overflow-x: clip; max-inline-size: 100vw; } :is(p, li, small, dd, td, .swap-detail, .sheet-note, .price-line, .menu-item, .toast) { overflow-wrap: anywhere; } .chart-head > * { min-inline-size: 0; } .token-head { max-inline-size: 100%; min-inline-size: 0; } #market-pair { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#app-shell, .status-strip, #market-order-row, #bottom-panel, .pilot, .pilot-main, .pilot-side, .market-card, .order-card, .sheet) > * { min-inline-size: 0; } .splash { position: fixed; inset: 0; z-index: 1000; pointer-events: none; display: grid; place-content: center; justify-items: center; gap: 22px; background: radial-gradient(60% 45% at 50% 42%, rgb(45 224 168 / .10), transparent 70%), linear-gradient(rgb(255 255 255 / .025) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgb(255 255 255 / .025) 1px, transparent 1px) 0 0 / 44px 44px, #08090b; animation: splash-out .4s cubic-bezier(.2, .8, .2, 1) 1.15s forwards; } .splash-cube { inline-size: clamp(124px, 34vw, 164px); block-size: auto; overflow: visible; animation: splash-rise .7s cubic-bezier(.2, .8, .2, 1) both; & .face-top { fill: #1c1f25; } & .face-l { fill: #121418; } & .face-r { fill: #0c0e11; } & .edge { fill: none; stroke: #3a404a; stroke-width: .8; } & :is(.slit, .slit-glow) { fill: none; stroke: #2de0a8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: splash-slit .55s cubic-bezier(.6, 0, .2, 1) .3s forwards; } & .slit { stroke-width: 3.2; } & .slit-glow { stroke-width: 16; filter: blur(9px); opacity: .9; } } .splash-halo { position: absolute; inset: 0; margin: auto; inline-size: 260px; block-size: 120px; border-radius: 50%; background: radial-gradient(closest-side, rgb(45 224 168 / .35), transparent); opacity: 0; translate: 0 -8px; animation: splash-glow .9s ease-out .6s forwards; } .splash-name { margin: 0; font: 500 13px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .34em; color: #f2f3f5; padding-inline-start: .34em; opacity: 0; animation: splash-fade .5s cubic-bezier(.2, .8, .2, 1) .45s forwards; & b { font-weight: 500; color: #2de0a8; } } .splash-bar { inline-size: 148px; block-size: 2px; border-radius: 2px; background: #1f232a; overflow: hidden; & i { display: block; block-size: 100%; background: #2de0a8; transform: scaleX(0); transform-origin: left; animation: splash-load 1.05s cubic-bezier(.4, 0, .2, 1) .1s forwards; } } @keyframes splash-rise { from { opacity: 0; transform: translateY(14px) scale(.96); } } @keyframes splash-slit { to { stroke-dashoffset: 0; } } @keyframes splash-glow { 45% { opacity: 1; } to { opacity: .6; } } @keyframes splash-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes splash-load { to { transform: scaleX(1); } } @keyframes splash-out { to { opacity: 0; transform: scale(1.02); visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .splash { display: none; } } } @layer components { #app-shell:not([data-view="entry"]) #entry, #app-shell:not([data-view="gems"]) :is(#board, #projects, #gem-scan), :root[data-trading="off"] [data-trading-only], :root:not([data-trading="off"]) #gem-scan, #app-shell:not([data-view="meme"]) #signals, #app-shell:not([data-view="top"]) #early-view, #app-shell:not([data-view="pearl"]) #pearl-view, #app-shell:not([data-view="rank"]) #rank-view, #app-shell:not([data-view="quality"]) #quality-view, #app-shell:not([data-view="sells"]) #sells-view, #app-shell:not([data-view="agent"]) #sells-entry, #app-shell:not([data-view="profile"]) #track-fold, #app-shell :is(#meme-alerts, #memes, #pilot, #radar, #leaders), #app-shell:not([data-view="profile"]) #profile, #app-shell:not([data-view="agent"]) #agent-view, #app-shell .pane-off, #app-shell:not([data-view="manual"]) #market-order-row, #app-shell:not([data-view="wallet"]) :is(.status-strip, #wallet-view) { display: none !important; } #app-shell[data-view="manual"] #holdings { display: none !important; } @container (width < 640px) { #app-shell[data-view="manual"] .order-panel { order: 0; } } #app-shell:not([hidden]) { padding-block-end: calc(92px + env(safe-area-inset-bottom)); } .dock { position: fixed; z-index: 40; inset-block-end: calc(14px + env(safe-area-inset-bottom)); inset-inline-start: 50%; translate: -50% 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px; inline-size: min(420px, calc(100vw - 32px)); border-radius: 22px; background: color-mix(in oklch, var(--panel) 78%, transparent); border: 1px solid var(--line); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 12px 40px rgb(0 0 0 / .45); &[hidden] { display: none; } & button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; padding: 8px 4px 7px; background: none; border: 0; border-radius: 17px; color: var(--ink-faint); font-size: 11px; font-weight: 600; letter-spacing: .01em; transition: color .25s; } & button[aria-current] { color: var(--ink); } & button:not([aria-current]):hover { color: var(--ink-dim); } & svg { inline-size: 21px; block-size: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } & button[aria-current] svg { stroke: var(--live); } & button:active { scale: .94; } } .dock-thumb { position: absolute; inset-block: 5px; inset-inline-start: 5px; inline-size: calc((100% - 10px) / 4); border-radius: 17px; background: var(--raised); pointer-events: none; transition: translate .42s cubic-bezier(.3, 1.4, .5, 1); } .dock[data-at="1"] .dock-thumb { translate: 100% 0; } .dock[data-at="2"] .dock-thumb { translate: 200% 0; } .dock[data-at="3"] .dock-thumb { translate: 300% 0; } .topbar .chain-flip { font-size: 13px; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; } #app-shell { view-transition-name: shell; } .dock { view-transition-name: dock; } ::view-transition-old(shell) { animation: shell-out .2s ease-in both; } ::view-transition-new(shell) { animation: shell-in .32s cubic-bezier(.2, .8, .2, 1) both; } @keyframes shell-out { to { opacity: 0; translate: calc(var(--vt-dir, 1) * -18px) 0; } } @keyframes shell-in { from { opacity: 0; translate: calc(var(--vt-dir, 1) * 24px) 0; } } html:has(#app-shell[data-dir="back"]) { --vt-dir: -1; } .topbar .addr-chip[hidden] { display: none; } @container (width < 640px) { .topbar .addr-chip { display: flex !important; padding: 5px; border-radius: 999px; & #topbar-address-text { display: none; } } } .holdings { display: flex; gap: 6px; margin-block-start: 12px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 88%, transparent); padding-inline-end: 24px; &::-webkit-scrollbar { display: none; } &[hidden] { display: none; } } .holdings .wallet-chip { animation: hold-in .35s cubic-bezier(.2, .8, .2, 1) both; } .holdings .wallet-chip:nth-child(2) { animation-delay: 40ms; } .holdings .wallet-chip:nth-child(n+3) { animation-delay: 80ms; } .holdings .wallet-chip:active { scale: .96; } @keyframes hold-in { from { opacity: 0; translate: 0 4px; } } .holdings .swap-wallet-empty { margin: 0; padding-block: 6px; } .wallet-view { display: grid; gap: 14px; } .wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; & button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 0; border-radius: 16px; background: var(--raised); color: var(--ink); font-size: 14px; font-weight: 600; } & button span { color: var(--live); font-size: 16px; } & button:active { scale: .97; } } .wallet-view .bottom-panel { background: var(--panel); border-radius: var(--radius); padding: 4px 18px 16px; } .wallet-view .bottom-tabs { margin-block-start: 10px; overflow-x: auto; scrollbar-width: none; } .wallet-view .bottom-panel .bottom-panel-body { max-block-size: none; overflow: visible; } @container (width < 640px) { #wallet-view #bottom-tabs { gap: 18px; border-block-end: 1px solid var(--line); margin-block-end: 8px; & .mo-side-tab:not(.mo-tab-active) { display: block; } & .mo-side-tab { pointer-events: auto; padding: 0 0 10px; font-size: 13.5px; } & .mo-tab-active { font-size: 13.5px; font-weight: 600; border-block-end: 2px solid var(--live); padding: 0 0 10px; } } #order-tabs { background: var(--raised); padding: 4px; border-radius: 14px; margin-block-end: 14px; gap: 4px; & .mo-side-tab:not(.mo-tab-active) { display: block; } & .mo-side-tab { pointer-events: auto; padding: 8px; font-size: 13px; text-align: center; flex: 1; border-radius: 11px; } & .mo-tab-active { font-size: 13px; font-weight: 600; text-align: center; flex: 1; } } } #order-tabs .mo-side-tab::before { display: block !important; background: var(--panel) !important; box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset; } #order-tabs .mo-side-tab { color: var(--ink-faint); } #order-tabs .mo-tab-active { color: var(--ink) !important; background: none !important; } @media (width < 672px) { .more-sheet .menu-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .dock-thumb, .holdings .wallet-chip { transition: none; animation: none; } } } @layer components { .board { --gold: #e9c46a; --silver: #c7ccd6; --bronze: #d08f5c; & header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 4px 10px; } & h3 { font-size: 13px; font-weight: 500; color: var(--ink-dim); } & header > span { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; text-align: end; } & ol { list-style: none; margin: 0; padding: 0; } & button { inline-size: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background .15s, scale .12s; &:active { scale: .985; } } } .board-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; &[data-count="1"] { grid-template-columns: minmax(0, 260px); justify-content: center; } &[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } & li { --metal: var(--gold); order: 2; } & li[data-place="2"] { --metal: var(--silver); order: 1; } & li[data-place="3"] { --metal: var(--bronze); order: 3; } & button { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 8px 12px; border-radius: var(--radius); background: var(--panel); overflow: hidden; border: 1px solid color-mix(in oklch, var(--metal) 22%, transparent); &:hover { background: color-mix(in oklch, var(--panel), var(--metal) 6%); } } & li[data-place="1"] button { padding-block: 22px 14px; background: linear-gradient(180deg, color-mix(in oklch, var(--metal) 12%, var(--panel)), var(--panel) 70%); &::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, color-mix(in oklch, var(--metal) 16%, transparent) 50%, transparent 60%); translate: -100% 0; animation: board-shine 5s cubic-bezier(.45,0,.55,1) infinite 1s; } } & li[aria-expanded="true"] button { border-color: color-mix(in oklch, var(--metal) 60%, transparent); } & small { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } & .bd-total { font: 500 26px/1 var(--mono); letter-spacing: -.04em; } & li[data-place="1"] .bd-total { font-size: 32px; } & button > * { max-inline-size: 100%; min-inline-size: 0; } & .bd-tags { flex-wrap: wrap; justify-content: center; } & small { overflow: hidden; text-overflow: ellipsis; } & .bd-bars { inline-size: 100%; max-inline-size: 120px; } & .bd-move { position: absolute; inset: 10px 12px auto auto; } } .bd-medal { inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--mono); color: #0a0a0b; background: radial-gradient(circle at 32% 28%, color-mix(in oklch, var(--metal), white 55%), var(--metal) 55%, color-mix(in oklch, var(--metal), black 30%)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--metal) 18%, transparent), 0 6px 18px -6px var(--metal); } .bd-sym { display: flex; align-items: baseline; gap: 6px; min-inline-size: 0; max-inline-size: 100%; & b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .bd-tags { display: flex; gap: 4px; min-block-size: 0; &:empty { display: none; } } .board em { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 99px; background: var(--raised); color: var(--ink-dim); white-space: nowrap; &[data-tone="gold"] { color: var(--gold); background: color-mix(in oklch, var(--gold) 12%, transparent); } &.bd-nar { color: var(--live); background: color-mix(in oklch, var(--live) 10%, transparent); } &.bd-nar[data-tone="hot"] { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--live) 40%, transparent); } } .bd-move { font: 500 10.5px var(--mono); font-style: normal; color: var(--ink-faint); white-space: nowrap; &[data-dir="up"] { color: var(--up); } &[data-dir="down"] { color: var(--down); } &[data-dir="new"] { color: var(--live); font-family: var(--sans); } } .bd-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; & span { position: relative; block-size: 16px; border-radius: 5px; background: var(--raised); overflow: hidden; display: grid; place-items: center; } & span::before { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: calc(var(--v) * 1%); background: color-mix(in oklch, var(--live) calc(18% + var(--v) * .3%), transparent); transition: inline-size .6s cubic-bezier(.2,.8,.2,1); } & b { position: relative; font: 600 9.5px var(--mono); color: var(--ink-dim); } } .board-list { margin-block-start: 6px; & li { border-block-end: 1px solid var(--line); &:last-child { border: 0; } } & button { display: grid; grid-template-columns: 28px minmax(0, 1fr) 96px 40px; gap: 12px; align-items: center; padding: 11px 4px; border-radius: 12px; &:hover { background: var(--hover); } } & .bd-rank { font: 500 13px var(--mono); color: var(--ink-faint); text-align: center; } & .tk-name small em { margin-inline-start: 4px; } & .bd-total { font: 500 16px var(--mono); text-align: end; letter-spacing: -.02em; } } .board .is-new { animation: rise .6s cubic-bezier(.2,.8,.2,1) backwards; } .board-detail { margin: 8px 0 10px; padding: 14px; border-radius: var(--radius); background: var(--panel); animation: rise .35s cubic-bezier(.2,.8,.2,1); & > header { display: grid; gap: 2px; margin: 0 0 12px; & b { font-size: 15px; } & small { font-size: 12px; color: var(--ink-faint); } & span { display: flex; gap: 14px; margin-block-start: 4px; font-size: 12.5px; } & a { color: var(--ink); } } } .bd-pillars { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); & h5 { display: flex; justify-content: space-between; margin: 0 0 6px; padding-block-end: 6px; font-size: 12px; font-weight: 500; color: var(--ink-dim); border-block-end: 2px solid var(--line); border-image: linear-gradient(90deg, var(--live) calc(var(--v) * 1%), var(--line) 0) 1; & b { font: 500 13px var(--mono); color: var(--ink); } } & dl { margin: 0; display: grid; gap: 3px; } & > section { min-inline-size: 0; } & dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; min-inline-size: 0; } & dt { color: var(--ink-faint); flex: none; } & dd { margin: 0; min-inline-size: 0; text-align: end; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .bd-why { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-dim); overflow-wrap: anywhere; } & a { color: var(--ink); } } .bd-flags { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; & li { font-size: 12px; color: var(--amber); &::before { content: "! "; font-weight: 600; } } } .bd-summary { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink); text-wrap: pretty; } .board-empty, .board-foot { margin: 8px 4px 0; font-size: 12px; color: var(--ink-faint); } .board-close { margin: 14px 4px 0; & h4 { margin: 0 0 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); } & ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } & li { display: grid; grid-template-columns: minmax(0, 7em) auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 0; border-block-end: 1px solid color-mix(in oklab, var(--ink-faint) 18%, transparent); font-size: 12.5px; } & b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & span { color: var(--ink-dim); font-variant-numeric: tabular-nums; } & small { color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; } } .board-foot:empty { display: none; } @keyframes board-shine { 0%, 70% { translate: -100% 0; } 100% { translate: 100% 0; } } @media (max-width: 520px) { .board-podium { gap: 6px; & .bd-total { font-size: 22px; } & li[data-place="1"] .bd-total { font-size: 26px; } & button { padding-inline: 4px; } } .board-list button { grid-template-columns: 22px minmax(0, 1fr) 72px 32px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .board *, .board-podium button::before { animation: none !important; } } .board { margin-block: 6px 26px; } .bd-honor { margin: 2px 4px 0; font-size: 11.5px; line-height: 1.35; color: var(--ink-dim); text-align: center; } .bd-sim { font: 500 11px var(--mono); color: var(--live); } .bd-traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; & li { font-size: 11.5px; padding: 3px 8px; border-radius: 99px; background: var(--raised); color: var(--ink-faint); } & li[data-got="1"] { color: var(--live); background: color-mix(in oklch, var(--live) 12%, transparent); } & li[data-got="half"] { color: var(--ink-dim); } } .radar-rejected { display: none !important; } } @layer components { #radar[data-loading] :is(.radar-empty, .radar-foot) { display: none; } :is(#board .board-podium, #radar [data-radar-list], #radar .radar-stage):empty { min-block-size: 76px; border-radius: var(--radius); background: linear-gradient(90deg, var(--panel) 30%, var(--raised) 50%, var(--panel) 70%) 0 0 / 250% 100%; animation: skel 1.4s linear infinite; } #radar .radar-stage:empty { min-block-size: 220px; padding: 0; } #radar [data-radar-list]:empty { min-block-size: 56px; list-style: none; } @keyframes skel { to { background-position: -150% 0; } } @media (prefers-reduced-motion: reduce) { :is(#board .board-podium, #radar [data-radar-list], #radar .radar-stage):empty { animation: none; } } } @layer components { :root:has(#app-shell[data-view="entry"]) #dock { display: none !important; } #app-shell[data-view="entry"] { padding-block-end: 24px; } .entry { display: grid; gap: 18px; padding-block: clamp(12px, 5vh, 56px) 8px; max-inline-size: 980px; margin-inline: auto; & h1 { margin: 0; font-size: clamp(28px, 5vw, 46px); line-height: 1.05; letter-spacing: -.03em; font-weight: 650; } & .entry-sub { margin: 0; color: var(--ink-dim); font-size: 15px; max-inline-size: 52ch; } } .entry-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .entry-card { --tone: var(--live); position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; text-align: start; padding: 22px 22px 20px; min-block-size: 230px; border-radius: 22px; cursor: pointer; color: var(--ink); border: 1px solid color-mix(in oklch, var(--tone) 30%, var(--line)); background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--tone) 22%, transparent), transparent 60%), var(--panel); transition: translate .25s cubic-bezier(.3, 1.4, .5, 1), border-color .25s; & .entry-tag { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); } & b { font-size: 26px; letter-spacing: -.02em; font-weight: 650; } & p { margin: 0; color: var(--ink-dim); font-size: 14px; line-height: 1.5; } & .entry-go { margin-block-start: 6px; font-size: 13.5px; font-weight: 600; color: var(--tone); } & .entry-go::after { content: " →"; display: inline-block; transition: translate .25s; } &:hover { translate: 0 -3px; border-color: var(--tone); } &:hover .entry-go::after { translate: 4px 0; } &:active { scale: .985; } } .entry-card[data-kind="meme"] { --tone: #ff4fa3; background: radial-gradient(120% 90% at 100% 0%, rgb(255 79 163 / .28), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgb(255 182 72 / .18), transparent 60%), repeating-linear-gradient(135deg, rgb(255 255 255 / .025) 0 10px, transparent 10px 20px), var(--panel); } .risk-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-dim); background: linear-gradient(90deg, rgb(255 79 163 / .14), rgb(255 182 72 / .10)); border: 1px solid rgb(255 79 163 / .35); & b { color: #ffb648; } } .memes > header { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: 8px; & h3 { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; } & [data-memes-meta] { font-size: 12px; color: var(--ink-faint); } } .memes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .memes-list:empty { min-block-size: 180px; border-radius: var(--radius); background: linear-gradient(90deg, var(--panel) 30%, var(--raised) 50%, var(--panel) 70%) 0 0 / 250% 100%; animation: skel 1.4s linear infinite; } .meme-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s, translate .2s; &:hover { border-color: rgb(255 79 163 / .5); translate: 0 -1px; } & .mm-avatar { inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #ff8cc4; background: rgb(255 79 163 / .12); } & .mm-name { display: grid; gap: 3px; min-inline-size: 0; } & .mm-name b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .mm-name small { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .mm-num { display: grid; justify-items: end; gap: 3px; } & .mm-num b { font-size: 16px; font-variant-numeric: tabular-nums; } & .mm-num b[data-sign="up"] { color: var(--up); } & .mm-num b[data-sign="down"] { color: var(--down); } & .mm-num small { font-size: 11.5px; color: #ffb648; } } .brand .logo { inline-size: 26px; block-size: 26px; flex-shrink: 0; display: none; } .brand .bn:not(.bn-def) { display: none; } :root[data-section="gems"] .brand { & .brand-dot, & .bn-def { display: none; } & .logo-gem { display: block; } & .bn-gem { display: inline; } } :root[data-section="meme"] .brand { & .brand-dot, & .bn-def { display: none; } & .logo-meme { display: block; animation: wobble 2.8s ease-in-out infinite; } & .bn-meme { display: inline; color: #ff8cc4; } } @keyframes wobble { 0%, 100% { rotate: 0deg; } 50% { rotate: -8deg; } } @media (prefers-reduced-motion: reduce) { .brand .logo-meme { animation: none !important; } } .gem-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-dim); background: color-mix(in oklch, var(--live) 7%, var(--panel)); border: 1px solid color-mix(in oklch, var(--live) 22%, var(--line)); & b { color: var(--live); } } @media (width >= 1100px) { .topbar .topbar-right { grid-column: 3; } } @media (prefers-reduced-motion: reduce) { .entry-card, .entry-card .entry-go::after { transition: none; } } } @layer components { :root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --ease-out: cubic-bezier(.2, .8, .2, 1); } :is(.board, .radar, .memes, .pilot-feed, .pilot-rejected) > header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s2); padding-inline: var(--s1); & h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); } & > span { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } } .gem-banner, .risk-banner { margin: 0 0 var(--s4); padding: 2px 0 2px var(--s3); border: 0; border-radius: 0; background: none; border-inline-start: 2px solid var(--live); font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); } .gem-banner b { color: var(--ink); font-weight: 600; } .risk-banner { border-inline-start-color: #ff4fa3; & b { color: #ffb648; font-weight: 600; } } .memes-list { gap: 0; } .memes-list li { border-block-end: 1px solid var(--line); &:last-child { border: 0; } } .meme-row { padding: var(--s3) var(--s1); border: 0; border-radius: var(--r-sm); background: none; transition: background .15s, translate .2s var(--ease-out); &:hover { background: var(--hover); translate: 2px 0; border-color: transparent; } & .mm-avatar { inline-size: 36px; block-size: 36px; border-radius: 10px; font-size: 12px; } & .mm-num b { font: 500 15px var(--mono); letter-spacing: -.02em; } } .memes-list:not(:empty) li { animation: rise .45s var(--ease-out) backwards; } .memes-list li:nth-child(2) { animation-delay: 40ms; } .memes-list li:nth-child(3) { animation-delay: 80ms; } .memes-list li:nth-child(n+4) { animation-delay: 120ms; } .pilot { gap: var(--s5); } .pilot-box { position: relative; overflow: hidden; display: grid; gap: var(--s3); padding: var(--s2) var(--s2) var(--s4); border-radius: var(--radius); background: var(--panel); } .pilot-head { display: flex; align-items: center; gap: var(--s2); padding-inline-end: var(--s2); } .pilot-card { flex: 1; min-inline-size: 0; position: static; overflow: visible; padding: 0; background: none; border-radius: 0; } .pilot-status { padding: var(--s2) var(--s2); gap: var(--s3); border-radius: 14px; } .pilot-line b { font-size: 15px; } .pilot-line small { font-size: 12.5px; } .pilot-toggle { inline-size: auto; flex: none; padding: var(--s1); background: none; border-radius: 99px; } .pilot-toggle:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; } .pilot-stats { margin: 0 var(--s4); padding-block-start: var(--s3); gap: var(--s2); & dt { font-size: 11px; } & dd { font-size: 17px; } } .pilot-stats:empty, .pilot-rules:empty, .pilot-note:empty { display: none; } .pilot-rules { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0 var(--s4); padding: 0; background: none; border-radius: 0; overflow: visible; & li { display: grid; gap: 1px; padding: 0; background: none; font-size: 13px; } & span { font-size: 11px; color: var(--ink-faint); } & b { font-weight: 500; text-align: start; } } .pilot-note { margin: 0 var(--s4); font-size: 12.5px; color: var(--ink-dim); } .pilot[data-tone="off"] .pilot-note { color: var(--ink-faint); } .pilot-box .pilot-scan { position: absolute; inset: auto 0 0; } .pilot-feed button { padding: var(--s3) var(--s1); } .board { margin-block: 0 var(--s5); } .board-podium li[data-place="1"] button::before { animation-duration: 7s; } .radar-new { border-block-end-color: var(--line); } .radar-sub, .radar-new h4 { font-size: 11px; color: var(--ink-faint); } #app-shell[data-view="wallet"] .status-strip #holdings { display: none !important; } .wallet-actions button { padding: 11px; border-radius: 14px; font-size: 13.5px; background: var(--panel); transition: background .15s, scale .12s; &:hover { background: var(--raised); } } .entry { position: relative; isolation: isolate; gap: var(--s4); &::before { content: ""; position: absolute; inset: -40px -16px auto; block-size: 420px; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; opacity: .45; mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); } } .entry-cards { gap: var(--s3); } .entry-card, .entry-card[data-kind="meme"] { min-block-size: 0; gap: var(--s2); padding: var(--s5) var(--s5) var(--s4); border-color: color-mix(in oklch, var(--tone) 18%, var(--line)); background: radial-gradient(90% 70% at 100% 0%, color-mix(in oklch, var(--tone) 14%, transparent), transparent 65%), var(--panel); & p { font-size: 13.5px; } & .entry-go { margin-block-start: var(--s2); } } #app-shell.stack { gap: var(--s5); } .board { margin-block-end: 0; } .entry-card .entry-go::after { margin-inline-start: 6px; content: "→"; } .swap-form .swap-field::before, .swap-form .swap-field.is-readonly::before { content: none; display: none; } .radar-stage:has(> .radar-idle:only-child) { background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 40px, var(--bg); border: 1px dashed var(--line); opacity: .8; } @media (width >= 1100px) { #app-shell[data-view="meme"] #pilot { inset-block-start: 84px; } } @media (prefers-reduced-motion: reduce) { .memes-list li, .meme-row { animation: none !important; transition: none; } } } @layer components { :is(.board, .memes, .radar) > header h3 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; } .track { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: 16px; background: color-mix(in oklch, var(--live) 5%, var(--panel)); border: 1px solid color-mix(in oklch, var(--live) 16%, var(--line)); } .track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s3) var(--s4); margin: 0; } .track-stat { margin: 0; min-inline-size: 0; & dt { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } & dd { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } & dd b { font: 600 22px var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } & dd b[data-sign="up"] { color: var(--up); } & dd b[data-sign="down"] { color: var(--down); } & dd small { font-size: 12px; color: var(--ink-dim); } & p { margin: 2px 0 0; font-size: 12px; color: var(--ink-faint); } } .track-bands { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s3) 0 0; padding: 0; & li { display: flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--raised); font-size: 12px; color: var(--ink-dim); } & li b { font: 600 12px var(--mono); color: var(--ink); } & li[data-tone="hot"] { box-shadow: inset 0 0 0 1px rgb(255 79 163 / .5); } } .track-note { margin: var(--s2) 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); text-wrap: pretty; } .track > .track-note:only-child { margin: 0; } .meme-row { --tone: #6b6a66; grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 6px; &[data-tone="hot"] { --tone: #ff4fa3; } &[data-tone="warm"] { --tone: #ffb648; } } .mm-score { position: relative; inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--tone) calc(var(--v) * 1%), var(--raised) 0); &::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg); } & b { position: relative; font: 700 13px var(--mono); letter-spacing: -.03em; color: var(--ink); } } .mm-why { grid-column: 2 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; & li { font-size: 11.5px; line-height: 1.5; padding: 1px 8px; border-radius: 999px; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & li[data-tone="good"] { color: var(--up); background: var(--up-soft); } & li[data-tone="bad"] { color: #ff8a8a; background: var(--down-soft); } } .bd-tags em[data-tone="use"] { color: #7ee0ff; background: rgb(126 224 255 / .10); border-color: rgb(126 224 255 / .35); } .bd-use { --live: #7ee0ff; } .projects > header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s1); padding-inline: var(--s1); & h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; } & > span { font-size: 12px; color: var(--ink-faint); } } .projects-funnel { margin: 0 0 var(--s3); padding-inline: var(--s1); font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); & b { color: var(--ink); font-variant-numeric: tabular-nums; } } .projects-tools { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0 0 var(--s2); } .projects-tools input { flex: 1 1 240px; min-inline-size: 0; block-size: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 16px; &:focus-visible { outline: 2px solid color-mix(in oklch, var(--live) 60%, transparent); outline-offset: 1px; } } .projects-tools input { flex-basis: 0; } .pj-filter-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; block-size: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 500 13px var(--sans); cursor: pointer; transition: opacity .15s; & svg { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } &:active { opacity: .7; } &.is-on { border-color: var(--live); } & .pj-filter-n:empty { display: none; } & .pj-filter-n { min-inline-size: 18px; block-size: 18px; padding: 0 5px; border-radius: 9px; background: var(--live); color: var(--bg); font: 600 11px/18px var(--mono); text-align: center; } } .pj-active { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s2); & button { display: inline-flex; align-items: center; gap: 6px; block-size: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--live) 50%, transparent); background: color-mix(in oklch, var(--live) 14%, transparent); color: var(--ink); font: 500 12px var(--sans); cursor: pointer; animation: pj-in .18s ease-out both; } & button span { color: var(--ink-faint); font-size: 10px; } & .pj-clear-all { border-color: transparent; background: none; color: var(--ink-dim); } } @keyframes pj-in { from { opacity: 0; transform: scale(.92); } } .pj-tag { display: inline-block; margin-inline-start: 4px; padding: 0 5px; border-radius: 5px; vertical-align: 1px; border: 1px solid color-mix(in oklch, var(--live) 55%, transparent); color: var(--live); font: 600 10px/16px var(--mono); font-style: normal; letter-spacing: .02em; } .pjf { display: grid; gap: 18px; padding-block-end: 4px; & h4 { margin: 0 0 8px; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } & h4 small { font-weight: 400; text-transform: none; letter-spacing: 0; } & .pjf-opts { display: flex; flex-wrap: wrap; gap: 6px; } & .pjf-opts button { display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-dim); font: 500 13px var(--sans); cursor: pointer; transition: transform .12s, opacity .15s; } & .pjf-opts button:active { transform: scale(.95); } & .pjf-opts button small { font: 500 11px var(--mono); color: var(--ink-faint); } & .pjf-opts button[aria-pressed="true"] { color: var(--bg); background: var(--live); border-color: var(--live); } & .pjf-opts button[aria-pressed="true"] small { color: inherit; opacity: .75; } & footer { position: sticky; inset-block-end: 0; display: flex; gap: 8px; padding-block: 12px 0; background: var(--panel); } & footer::after { content: ""; position: absolute; inset: 100% 0 auto; block-size: 48px; background: var(--panel); } & footer button { flex: 1; block-size: 44px; border-radius: 12px; font: 600 14px var(--sans); cursor: pointer; } & .pjf-reset { border: 1px solid var(--line); background: none; color: var(--ink-dim); } & .pjf-done { flex: 2; border: 0; background: var(--live); color: var(--bg); } } @media (prefers-reduced-motion: reduce) { .pj-active button { animation: none; } .pjf .pjf-opts button { transition: none; } } .projects-list { list-style: none; margin: 0; padding: 0; & li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s3) var(--s1); border-block-end: 1px solid var(--line); } & li:last-child { border: 0; } & .pj-score { font: 600 15px var(--mono); color: var(--ink); text-align: end; padding-block-start: 1px; } & li[data-status="rejected"] .pj-score, & li[data-status="new"] .pj-score { color: var(--ink-faint); } & .pj-name { display: grid; gap: 2px; min-inline-size: 0; font-size: 14px; } & .pj-name > span { color: var(--ink-dim); font-size: 13px; } & .pj-name small { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .pj-why { color: var(--ink-dim) !important; white-space: normal !important; } & .pj-status { font: 500 11px var(--sans); font-style: normal; padding: 2px 8px; border-radius: 999px; background: var(--raised); color: var(--ink-dim); white-space: nowrap; } & li[data-status="ranked"] .pj-status { background: color-mix(in oklch, var(--live) 18%, transparent); color: var(--live); } & li[data-status="rejected"] .pj-status { background: var(--down-soft); color: #ff8a8a; } & .pj-empty { display: block; color: var(--ink-faint); font-size: 13px; } } .projects[data-loading] .projects-list:empty { min-block-size: 160px; border-radius: var(--radius); background: linear-gradient(90deg, var(--panel) 30%, var(--raised) 50%, var(--panel) 70%) 0 0 / 250% 100%; animation: skel 1.4s linear infinite; } .bd-tags em[data-tone="early"] { color: #111; background: #ffd24a; border-color: #ffd24a; font-weight: 600; } .early-note { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-dim); background: rgb(255 210 74 / .08); border: 1px solid rgb(255 210 74 / .35); & b { color: #ffd24a; margin-inline-end: 6px; } & span { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; } & button { font: 600 12px var(--mono); padding: 4px 10px; border-radius: 999px; cursor: pointer; color: #ffd24a; background: none; border: 1px solid rgb(255 210 74 / .5); } } :is(.alerts, .review) > header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s2); padding-inline: var(--s1); & h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; } & > span { font-size: 12px; color: var(--ink-faint); } } #app-shell[data-view="meme"] #meme-alerts { grid-column: 1 / -1; } .al-intro { margin: 0 0 var(--s2); padding-inline: var(--s1); } .al-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; scrollbar-width: thin; &:focus-visible { outline: 2px solid color-mix(in oklch, var(--live) 60%, transparent); } } .al-table { border-collapse: collapse; inline-size: 100%; font-variant-numeric: tabular-nums; font-size: 12.5px; & th, & td { padding: 8px 10px; text-align: end; white-space: nowrap; border-block-end: 1px solid var(--line); } & thead th { font: 600 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); position: sticky; top: 0; background: var(--panel); } & tbody th { text-align: start; font-weight: 500; position: sticky; inset-inline-start: 0; background: var(--bg); min-inline-size: 118px; } & thead th:first-child { text-align: start; position: sticky; inset-inline-start: 0; z-index: 1; } & tbody th b a { color: var(--ink); text-decoration: none; } & tbody th small, & td small { display: block; font-size: 10.5px; color: var(--ink-faint); font-weight: 400; } & td { font-family: var(--mono); } & [data-sign="up"] { color: var(--up); } & [data-sign="down"] { color: var(--down); } & .al-now { font-weight: 700; background: color-mix(in oklch, var(--live) 7%, transparent); } & .al-sum th, & .al-sum td { background: var(--raised); border-block-end: 1px solid color-mix(in oklch, var(--live) 30%, var(--line)); } & tr[data-gone] { opacity: .6; } & tbody tr:last-child :is(th, td) { border: 0; } } .rv-summary { margin: 0 0 var(--s3); padding-inline: var(--s1); font-size: 14px; line-height: 1.5; color: var(--ink); } .review { padding: var(--s3) var(--s4); border-radius: 16px; background: var(--panel); border: 1px solid var(--line); } .review > header { padding-inline: 0; } .review .rv-summary { padding-inline: 0; margin-block-end: var(--s2); } .rv-actions { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; color: var(--ink-dim); & li::marker { color: var(--live); } } #app-shell[data-view="meme"] #review { grid-column: 1 / -1; } #app-shell[data-view="meme"] #memes { order: -2; } #app-shell[data-view="meme"] #pilot { order: 3; } #app-shell[data-view="meme"] #meme-alerts { order: 0; } #app-shell[data-view="meme"] #review { order: 1; } #app-shell[data-view="meme"] #radar { order: 2; } @media (width < 1100px) { .radar-stage:has(> .radar-idle:only-child), #radar .radar-stage:empty { display: none; } } } @property --gb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; } @property --gb-p { syntax: "<number>"; inherits: true; initial-value: 0; } @layer gemboard { #board { position: relative; isolation: isolate; } #board::before { content: ""; position: absolute; inset: 30px -8% auto; block-size: 440px; z-index: -1; pointer-events: none; background: radial-gradient(38% 48% at 28% 42%, color-mix(in oklch, var(--gold) 26%, transparent), transparent 70%), radial-gradient(34% 44% at 72% 30%, color-mix(in oklch, var(--live) 20%, transparent), transparent 70%), radial-gradient(30% 40% at 52% 76%, rgb(126 224 255 / .12), transparent 70%); filter: blur(34px); opacity: .75; animation: gb-aurora 18s ease-in-out infinite alternate; } @keyframes gb-aurora { to { transform: translate3d(4%, 3%, 0) scale(1.08) rotate(3deg); } } #board .board-podium { align-items: end; gap: 12px; perspective: 1000px; margin-block: 10px 6px; } #board .board-podium li { order: 2; display: grid; align-content: end; } #board .board-podium li[data-place="2"] { order: 1; } #board .board-podium li[data-place="3"] { order: 3; } #board .board-podium button, #board .board-podium li[data-place="1"] button { position: relative; isolation: isolate; overflow: hidden; block-size: auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 8px; padding: 18px 12px 14px; border-radius: 22px; border: 0; background: linear-gradient(180deg, color-mix(in oklch, var(--metal) 12%, #121215), #0c0c0e 78%); box-shadow: 0 28px 60px -34px color-mix(in oklch, var(--metal) 55%, transparent), inset 0 1px 0 rgb(255 255 255 / .06); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .3s var(--ease-out), box-shadow .3s; &:hover { box-shadow: 0 34px 70px -30px color-mix(in oklch, var(--metal) 75%, transparent), inset 0 1px 0 rgb(255 255 255 / .1); } } #board .board-podium button > * { grid-column: auto; grid-row: auto; justify-self: center; } #board .board-podium button::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--gb-a), color-mix(in oklch, var(--metal) 25%, transparent) 0 50%, var(--metal) 68%, color-mix(in oklch, var(--metal), white 55%) 74%, var(--metal) 80%, color-mix(in oklch, var(--metal) 25%, transparent) 96%); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: gb-spin 6s linear infinite; } #board .board-podium li[data-place="2"] button::after { animation-duration: 8s; } #board .board-podium li[data-place="3"] button::after { animation-duration: 10s; animation-direction: reverse; } @keyframes gb-spin { to { --gb-a: 360deg; } } #board .gb-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklch, var(--metal, var(--live)) 22%, transparent), transparent 62%); } #board button:hover .gb-glow { opacity: 1; } #board .board-podium .bd-medal { position: relative; overflow: hidden; inline-size: 38px; block-size: 38px; font-size: 16px; font-weight: 700; &::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .75) 50%, transparent 65%); translate: -120% 0; animation: gb-medal 4.5s var(--ease-out) infinite 1.2s; } } @keyframes gb-medal { 0%, 72% { translate: -120% 0; } 100% { translate: 120% 0; } } #board .board-podium .bd-sym b { font-size: 16px; letter-spacing: .02em; } #board .board-podium small { color: var(--ink-dim); } #board .gb-score { --gb-p: var(--v); position: relative; display: grid; place-items: center; inline-size: 92px; aspect-ratio: 1; transition: --gb-p 1.4s var(--ease-out); &::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, var(--metal) calc(var(--gb-p) * 1%), rgb(255 255 255 / .07) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); filter: drop-shadow(0 0 10px color-mix(in oklch, var(--metal) 45%, transparent)); } & b { position: relative; font: 700 32px/1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 30%, color-mix(in oklch, var(--metal), white 20%)); -webkit-background-clip: text; background-clip: text; color: transparent; } } #board .board-podium li[data-place="1"] .gb-score { inline-size: 112px; & b { font-size: 40px; } } #board .gb-rings { display: flex; gap: 8px; justify-content: center; & i { --gb-p: var(--v); position: relative; display: grid; place-items: center; inline-size: 28px; aspect-ratio: 1; font-style: normal; transition: --gb-p 1.2s var(--ease-out); &::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, color-mix(in srgb, var(--live), #ff6a5c calc((100 - var(--v)) * 1.6%)) calc(var(--gb-p) * 1%), rgb(255 255 255 / .08) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); } & b { position: relative; font: 700 9.5px var(--mono); color: var(--ink-dim); } &[data-off] { opacity: .35; } } } #board .gb-step { display: block; margin-inline: 8%; block-size: var(--h, 14px); border-radius: 0 0 14px 14px; background: linear-gradient(180deg, color-mix(in oklch, var(--metal) 40%, #141416), #0b0b0c 90%); box-shadow: inset 0 1px 0 color-mix(in oklch, var(--metal) 60%, transparent); transform-origin: top; } #board .board-podium li[data-place="1"] { --h: 34px; } #board .board-podium li[data-place="2"] { --h: 22px; } #board .board-podium li[data-place="3"] { --h: 12px; } #board .board-list { margin-block-start: 16px; display: grid; gap: 6px; & li { border: 0; } & button { position: relative; isolation: isolate; overflow: hidden; grid-template-columns: 34px minmax(0, 1fr) auto 64px; gap: 14px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(90deg, rgb(255 255 255 / .03), rgb(255 255 255 / .01)); border: 1px solid var(--line); transition: transform .25s var(--ease-out), border-color .25s, background .25s; &:hover { transform: translateX(4px); border-color: color-mix(in oklch, var(--live) 40%, var(--line)); background: linear-gradient(90deg, color-mix(in oklch, var(--live) 6%, transparent), rgb(255 255 255 / .01)); } } & .bd-rank { font: 700 18px var(--mono); color: var(--ink-faint); } & .gb-rings { gap: 6px; & i { inline-size: 24px; } } & li[data-early] button { border-color: rgb(255 210 74 / .5); box-shadow: 0 0 0 1px rgb(255 210 74 / .12), 0 14px 34px -22px #ffd24a; } & li[aria-expanded="true"] button { border-color: color-mix(in oklch, var(--live) 60%, var(--line)); } } #board .gb-total { --gb-p: var(--v); display: grid; justify-items: end; gap: 6px; transition: --gb-p 1.2s var(--ease-out); & b { font: 700 19px var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } & i { inline-size: 100%; block-size: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--live) calc(var(--gb-p) * 1%), rgb(255 255 255 / .08) 0); box-shadow: 0 0 12px -2px color-mix(in oklch, var(--live) 50%, transparent); } } @media (prefers-reduced-motion: no-preference) { #board[data-enter] .board-podium li { animation: gb-pop .8s var(--ease-out) backwards; } #board[data-enter] .board-podium li[data-place="3"] { animation-delay: .05s; } #board[data-enter] .board-podium li[data-place="2"] { animation-delay: .2s; } #board[data-enter] .board-podium li[data-place="1"] { animation-delay: .38s; } #board[data-enter] .gb-step { animation: gb-rise .7s var(--ease-out) backwards .1s; } @keyframes gb-pop { from { opacity: 0; transform: translateY(26px) scale(.94); } } @keyframes gb-rise { from { transform: scaleY(0); } } @supports (animation-timeline: view()) { #board .board-list li { animation: gb-row linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } @keyframes gb-row { from { opacity: 0; transform: translateY(20px) scale(.97); } } } } @starting-style { #board[data-enter] :is(.gb-score, .gb-rings i, .gb-total) { --gb-p: 0; } } ::view-transition-group(*) { animation-timing-function: cubic-bezier(.2, .8, .2, 1); } @media (max-width: 520px) { #board .board-podium { gap: 6px; } #board .board-podium button, #board .board-podium li[data-place="1"] button { padding: 14px 6px 10px; gap: 6px; border-radius: 18px; } #board .gb-score { inline-size: 66px; & b { font-size: 24px; } } #board .board-podium li[data-place="1"] .gb-score { inline-size: 80px; & b { font-size: 29px; } } #board .board-podium .gb-rings { gap: 4px; & i { inline-size: 22px; } } #board .board-podium .bd-medal { inline-size: 30px; block-size: 30px; font-size: 13px; } #board .board-list button { grid-template-columns: 26px minmax(0, 1fr) 52px; gap: 10px; padding: 10px 12px; } #board .board-list .gb-rings { display: none; } } @media (prefers-reduced-motion: reduce) { #board *, #board *::before, #board *::after, #board::before { animation: none !important; transition: none !important; } } }