@layer skin { .pj-open { all: unset; display: contents; cursor: pointer; } } @layer skin { :root { --k-bg: #09090b; --k-bar: #0f0f12; --k-surface: #18181b; --k-surface-2: #27272a; --k-card: #121315; --k-text: #fafafa; --k-text-2: #a1a1aa; --k-text-3: #71717a; --k-text-4: #52525b; --k-green: #82e28d; --k-green-pill: #0e2e12; --k-mint: #86efac; --k-red: #f87171; --k-red-pill: #450a0a; --k-hot: #ff3d6e; --k-amber: #facc15; --k-gold-a: #facc15; --k-gold-b: #c07503; --k-gold-frame: #efa416; --k-silver: #9ca3af; --k-bronze: #fb923c; --k-tint-up: #1b291c; --k-tint-down: #2c1818; --k-line: #18181b; --col: 480px; --dock-w: min(334px, calc(100vw - 96px)); --up: var(--k-green); --down: var(--k-red); } html, body { background: var(--k-bg); } body { color: var(--k-text); padding: 0; } .page { max-inline-size: var(--col); margin-inline: auto; padding: 0 16px; gap: 0; } #app-shell[data-view] { display: flex; flex-direction: column; gap: 0; padding-block-end: 104px; } #app-shell .pane-off { display: none !important; } #app-shell > .tabs { order: -10; } .muted { color: var(--k-text-2); font-size: 13px; line-height: 1.45; } .pad { padding: 20px 0; } .topbar { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; block-size: 56px; margin: 0 -16px; padding: env(safe-area-inset-top) 16px 0; background: var(--k-bar); } .tb-me { display: flex; align-items: center; gap: 10px; min-inline-size: 0; } .tb-me .addr-chip { display: grid !important; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; & .avatar { inline-size: 40px; block-size: 40px; } & #topbar-address-text { display: none; } } .tb-bal .total-bal { padding: 0; border: 0; background: none; cursor: pointer; font: 700 22px/1 var(--sans); letter-spacing: -.01em; color: var(--k-text); white-space: nowrap; font-variant-numeric: tabular-nums; & .cents { color: var(--k-text-3); } } .tb-bal #balance { font: 700 22px/1 var(--sans); letter-spacing: -.01em; color: var(--k-text); white-space: nowrap; & .cents, & .unit-mark { font-size: 1em; opacity: 1; color: inherit; } } .topbar-right { display: flex; align-items: center; gap: 16px; } .topbar .switcher { display: none; } .tb-deposit { block-size: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--k-text); color: var(--k-bg); font: 500 15px var(--sans); cursor: pointer; &:active { scale: .97; } } .tb-bell { position: relative; display: grid; place-items: center; inline-size: 28px; block-size: 28px; padding: 0; border: 0; background: none; color: var(--k-text); cursor: pointer; & svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } & i { position: absolute; inset: 1px 1px auto auto; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--k-hot); } } .tabs { position: sticky; inset-block-start: 56px; z-index: 29; display: flex; gap: 24px; block-size: 44px; margin: 0 -16px; padding: 0 16px; background: var(--k-bar); border-block-end: 1px solid var(--k-line); overflow-x: auto; scrollbar-width: none; & button { position: relative; padding: 0; border: 0; background: none; color: var(--k-text-2); font: 500 15px var(--sans); white-space: nowrap; cursor: pointer; } & button[aria-current] { color: var(--k-text); } & button[aria-current]::after { content: ""; position: absolute; inset: auto 0 -1px; block-size: 2px; background: var(--k-text); } } :is(.memes-list, .board-list, .rows) { list-style: none; margin: 0 -16px; padding: 0; display: block; } .trow { border-block-end: 1px solid var(--k-line); animation: none; & > button { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 62px; padding: 8px 16px; border: 0; border-radius: 0; text-align: start; color: inherit; font: inherit; cursor: pointer; background: linear-gradient(90deg, var(--k-bg) 0%, var(--k-bg) 40%, var(--tint, var(--k-bg)) 100%); } &[data-sign="up"] { --tint: var(--k-tint-up); } &[data-sign="down"] { --tint: var(--k-tint-down); } & > button:active { filter: brightness(1.15); } & > button:focus { outline: none; } & > button:focus-visible { outline: 2px solid var(--k-surface-2); outline-offset: -2px; } } .logo { position: relative; display: block; inline-size: 44px; block-size: 44px; flex: none; } .tile { position: relative; display: grid; place-items: center; inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: 10px; background: radial-gradient(120% 90% at 20% 15%, hsl(var(--h1) 75% 62%), hsl(var(--h2) 60% 26%) 70%); & img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; background: var(--k-bg); } } .emblem { inline-size: 46%; aspect-ratio: 1; rotate: var(--rot); background: rgb(255 255 255 / .82); box-shadow: 0 0 0 5px var(--c-line, rgb(255 255 255 / .16)); } .tile[data-shape="0"] .emblem { border-radius: 50%; background: none; border: 3.5px solid rgb(255 255 255 / .85); } .tile[data-shape="1"] .emblem { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: none; } .tile[data-shape="2"] .emblem { clip-path: polygon(50% 4%, 96% 90%, 4% 90%); box-shadow: none; } .tile[data-shape="3"] .emblem { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); box-shadow: none; } .chain-mark { position: absolute; inset: auto -4px -4px auto; display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--c-pill, #111114); box-shadow: 0 0 0 2px var(--k-bg); font-style: normal; & svg { inline-size: 13px; block-size: 13px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } &[data-chain="solana"] svg { stroke: url(#sol-grad) #19fb9b; stroke: #14f195; } &[data-chain="robinhood"] svg { stroke: #c8f169; } &[data-chain="base"] svg { stroke: none; fill: #3c8aff; } &[data-chain="bsc"] svg { stroke: none; fill: #f0b90b; } &[data-chain="ethereum"] svg { stroke: none; fill: #a5b4fc; } &[data-chain="arc"] svg { stroke: currentColor; } &[data-chain="layer"] svg { stroke: #38bdf8; } &[data-chain="arbitrum"] svg { stroke: #28a0f0; } &[data-chain="optimism"] svg { stroke: #ff0420; } &[data-chain="polygon"] svg { stroke: #8247e5; } &[data-chain="avalanche"] svg { stroke: none; fill: #e84142; } &[data-chain="monad"] svg { stroke: #836ef9; } &[data-chain="zksync"] svg { stroke: none; fill: #4e529a; } &[data-chain="mantle"] svg { stroke: #65b3ae; } &:empty { display: none; } } .trow-main { display: grid; gap: 4px; min-inline-size: 0; & b { display: flex; align-items: center; gap: 8px; min-inline-size: 0; font: 600 15px/1.2 var(--sans); color: var(--k-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } & small { display: flex; align-items: center; gap: 10px; min-inline-size: 0; font: 400 12px/1.2 var(--sans); color: var(--k-text-2); white-space: nowrap; overflow: hidden; } } .age { display: inline-flex; align-items: center; gap: 3px; color: var(--k-green); & svg { inline-size: 12px; block-size: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } &.fresh { color: var(--k-amber); } } .trow-main .sub { color: var(--k-text-3); overflow: hidden; text-overflow: ellipsis; } .hot { flex: none; font: 600 9.5px/1 var(--sans); font-style: normal; letter-spacing: .04em; text-transform: uppercase; padding: 2px 5px; border-radius: 99px; color: var(--k-hot); border: 1px solid var(--k-hot); background: var(--c-down-soft, rgb(255 61 110 / .12)); &.early { color: var(--k-amber); border-color: var(--k-amber); background: rgb(250 204 21 / .1); } &.hidden { color: var(--k-mint); border-color: var(--k-mint); background: var(--c-up-soft, rgb(134 239 172 / .1)); } } .trow-num { display: grid; justify-items: end; gap: 4px; & > b { font: 700 16px/1 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--k-text); } } .chg { display: inline-flex; align-items: center; gap: 4px; block-size: 20px; padding: 0 6px; border-radius: 4px; font: 600 13px/1 var(--sans); font-style: normal; color: var(--k-text-2); background: var(--k-surface); &[data-sign="up"] { color: var(--k-green); background: var(--k-green-pill); } &[data-sign="down"] { color: var(--k-red); background: var(--k-red-pill); } &.score { color: var(--k-text); background: var(--k-surface-2); } } [data-sign="up"] { --sign: var(--k-green); } [data-sign="down"] { --sign: var(--k-red); } .memes-empty { padding: 32px 0; text-align: center; color: var(--k-text-2); font-size: 14px; } .list-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--k-text-3); } .picks-head { display: flex; gap: 12px; align-items: center; margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, var(--c-up-soft, rgb(52 211 153 / .10)), var(--c-up-soft, rgb(52 211 153 / .02))); box-shadow: inset 0 0 0 1px rgb(52 211 153 / .18); & p { display: grid; gap: 3px; margin: 0; min-inline-size: 0; } & b { font: 600 15px/1.2 var(--sans); color: var(--k-text); } & small { font-size: 12.5px; line-height: 1.35; color: var(--k-text-2); } } .picks-mark { flex: none; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 10px; background: var(--c-bg, #0c0e11); & svg { inline-size: 22px; block-size: 22px; fill: none; stroke: #34d399; stroke-width: 1.6; stroke-linejoin: round; } } .trow-main .score { display: inline-grid; place-items: center; min-inline-size: 26px; margin-inline-end: 8px; padding: 1px 6px; border-radius: 6px; font: 600 12px/1.4 var(--mono, ui-monospace); color: var(--c-up, #34d399); background: var(--c-up-soft, rgb(52 211 153 / .12)); &[data-band="mid"] { color: var(--c-amber, #fbbf24); background: var(--c-pill, rgb(251 191 36 / .12)); } &[data-band="lo"] { color: var(--k-text-3); background: var(--c-pill, rgb(255 255 255 / .06)); } } #board { margin: 0; } #board::before { display: none; } #board > :is(.gem-banner, header, [data-board-track], [data-board-early], .board-podium, .board-close, [data-board-detail]) { display: none !important; } #projects { padding-block-start: 14px; } .feed-head { margin: 14px 0 4px; font-size: 13px; color: var(--k-text-2); & b { color: var(--sign); font-weight: 600; } } .call { padding: 14px 0; border-block-end: 1px solid var(--k-line); } .call-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; inline-size: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; & .logo { inline-size: 44px; block-size: 44px; } & .chain-mark { inline-size: 16px; block-size: 16px; } & .trow-num > b { font-size: 17px; } } .call-text { margin: 10px 0 0; font-size: 15px; line-height: 1.35; color: var(--k-text); } .call-card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 10px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--k-card); & span { display: grid; gap: 4px; } & span:nth-child(even) { justify-items: end; text-align: end; } & small { font-size: 13px; color: var(--k-text-2); } & b { font: 600 15px var(--sans); color: var(--sign, var(--k-text)); font-variant-numeric: tabular-nums; } } .hours { display: flex; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; & li { flex: none; display: grid; gap: 2px; min-inline-size: 50px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--k-surface-2); } & small { font-size: 11px; color: var(--k-text-3); } & b { font: 600 13px var(--sans); color: var(--sign, var(--k-text-2)); } } .top { padding-block-start: 14px; } .top-info { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 10px 14px; border-radius: 14px; background: var(--k-surface); border: 1px solid var(--k-surface-2); font-size: 13px; line-height: 1.35; color: var(--c-text, #d4d4d8); & svg { flex: none; inline-size: 18px; block-size: 18px; fill: none; stroke: var(--k-text-2); stroke-width: 1.8; stroke-linecap: round; } } .top-hero { position: relative; margin: 0 -16px; } .pod-cy { --pc-c: #2de0a8; position: relative; padding: 14px 16px 6px; overflow: hidden; background: radial-gradient(55% 60% at 50% 70%, var(--c-up-soft, rgb(45 224 168 / .10)), transparent 70%), linear-gradient(var(--c-pill, rgb(255 255 255 / .03)) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--c-pill, rgb(255 255 255 / .03)) 1px, transparent 1px) 0 0 / 24px 24px; } .pc-list { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 10px; margin: 0; padding: 0; list-style: none; } .pc-r1 { order: 2; --pc-c: #2de0a8; --pc-d: .3s; } .pc-r2 { order: 1; --pc-c: #67e8f9; --pc-d: .15s; } .pc-r3 { order: 3; --pc-c: #a78bfa; --pc-d: 0s; } .pc-place { display: grid; justify-items: center; gap: 6px; inline-size: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; &:active .pc-frame { scale: .96; } &:focus-visible { outline: 1px solid var(--pc-c); outline-offset: 4px; } } .pc-head { display: grid; justify-items: center; gap: 3px; animation: pc-in .5s cubic-bezier(.2, .8, .2, 1) calc(var(--pc-d) + 1.1s) backwards; } .pc-trophy { display: grid; inline-size: 18px; block-size: 18px; margin-block-end: 2px; & svg { fill: none; stroke: var(--pc-c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgb(45 224 168 / .8)); } } .pc-frame { position: relative; inline-size: 40px; block-size: 40px; padding: 2px; transition: scale .15s; background: var(--pc-c); box-shadow: 0 0 14px color-mix(in srgb, var(--pc-c) 45%, transparent); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); & .logo { inline-size: 100%; block-size: 100%; } & .tile { border-radius: 0; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); } & .chain-mark { display: none; } } .pc-r1 .pc-frame { inline-size: 48px; block-size: 48px; } .pc-sym { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11px/1.2 var(--mono, ui-monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--k-text-2); } .pc-val { font: 700 14px/1.1 var(--mono, ui-monospace); font-variant-numeric: tabular-nums; color: var(--pc-c); text-shadow: 0 0 10px color-mix(in srgb, var(--pc-c) 55%, transparent); &[data-sign="down"] { color: var(--c-down, #f87171); text-shadow: none; } } .pc-r1 .pc-val { font-size: 16px; } .pc-base { inline-size: 100%; } .pc-cube { display: block; inline-size: 100%; block-size: auto; overflow: visible; & .pc-top { fill: #262a31; stroke: #3a404a; stroke-width: .6; } & .pc-left { fill: #121418; } & .pc-right { fill: #0b0d10; } & .pc-edge { fill: none; stroke: #2a2f37; stroke-width: .6; } & .pc-mod { animation: pc-fly .9s cubic-bezier(.2, .8, .2, 1) calc(var(--pc-d) + var(--i)) backwards; & path { stroke: #3a404a; stroke-width: .5; stroke-linejoin: round; } } & .pc-mods { animation: pc-fade .15s linear calc(var(--pc-d) + 1.05s) forwards; } & .pc-mods + .pc-solid { animation: pc-show .15s linear calc(var(--pc-d) + 1s) backwards; } & :is(.pc-slit, .pc-glow) { fill: none; stroke: var(--pc-c); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; } & .pc-slit { stroke-width: 2.2; animation: pc-draw .55s cubic-bezier(.6, 0, .2, 1) calc(var(--pc-d) + 1.1s) backwards; } & .pc-glow { stroke-width: 9; filter: blur(5px); opacity: .7; animation: pc-draw .55s cubic-bezier(.6, 0, .2, 1) calc(var(--pc-d) + 1.1s) backwards, pc-breathe 3.2s ease-in-out calc(var(--pc-d) + 1.8s) infinite; } & .pc-rank { font: 700 9px var(--mono, ui-monospace); letter-spacing: .1em; fill: color-mix(in srgb, var(--pc-c) 70%, var(--c-text, #fff)); opacity: .75; } } @keyframes pc-fly { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } 30% { opacity: 1; } } @keyframes pc-fade { to { opacity: 0; } } @keyframes pc-show { from { opacity: 0; } } @keyframes pc-in { from { opacity: 0; transform: translateY(8px) scale(.94); } } @keyframes pc-draw { from { stroke-dashoffset: 1; } } @keyframes pc-breathe { 50% { opacity: .35; } } .pod-cy.is-still *, .pod-cy.is-still *::before, .pod-cy.is-still *::after { animation: none !important; } @media (prefers-reduced-motion: reduce) { .pod-cy * { animation: none !important; } } .top-bar { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 14px; } .seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 99px; border: 1px solid var(--k-surface-2); background: none; & button { block-size: 24px; padding: 0 12px; border: 0; border-radius: 99px; background: none; color: var(--k-text-2); font: 700 13px var(--sans); cursor: pointer; } & button[aria-pressed="true"] { background: var(--k-text); color: var(--k-bg); } } .sort-btn { display: inline-flex; align-items: center; gap: 6px; block-size: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--k-surface-2); background: none; color: var(--k-text); font: 700 13px var(--sans); cursor: pointer; & svg { inline-size: 15px; block-size: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } } .top-sheet { margin: 0 -16px; padding: 10px 0 8px; border-radius: 24px 24px 0 0; border: 1px solid var(--k-surface-2); border-block-end: 0; background: var(--c-bg, #0c0c0e); } .you-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 10px 6px; padding: 0 14px; block-size: 62px; border-radius: 16px; background: var(--k-surface); & .avatar.you { inline-size: 40px; block-size: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 45%, #b45309); } & .you-main { display: grid; gap: 3px; min-inline-size: 0; & b { font: 600 15px var(--sans); } & small { font-size: 13px; color: var(--k-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } & .you-num { display: grid; justify-items: end; gap: 3px; & small { font-size: 11px; color: var(--k-text-3); letter-spacing: .04em; text-transform: uppercase; } & b { font: 700 17px var(--sans); } } } .top-list { list-style: none; margin: 0; padding: 0; & button { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 71px; padding: 0 16px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } & .logo { inline-size: 40px; block-size: 40px; } & .tile { border-radius: 50%; } & .chain-mark { display: none; } & .top-rank { font: 600 15px var(--sans); color: var(--k-text-2); } & li[data-place="1"] .top-rank, & li[data-place="1"] .top-name b { color: var(--k-amber); } & li[data-place="3"] .top-rank, & li[data-place="3"] .top-name b { color: var(--k-bronze); } & .top-name { display: grid; gap: 3px; min-inline-size: 0; & b { display: flex; align-items: center; gap: 6px; font: 500 15px var(--sans); white-space: nowrap; overflow: hidden; } & small { font-size: 12.5px; color: var(--k-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } & .top-ret { display: grid; justify-items: end; gap: 3px; & b { font: 700 17px var(--sans); color: var(--sign, var(--k-text)); font-variant-numeric: tabular-nums; } & small { font-size: 12px; color: var(--k-text-3); } } } .mini-crown { flex: none; inline-size: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .review-row { display: flex; justify-content: space-between; inline-size: 100%; margin-block-start: 6px; padding: 16px; border: 0; border-block-start: 1px solid var(--k-line); background: none; color: var(--k-text-2); font: 500 15px var(--sans); cursor: pointer; } .review .rv-summary { font-size: 15px; line-height: 1.45; } .rv-actions { margin: 10px 0 0; padding-inline-start: 1.1em; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--k-text-2); } #dock.dock { position: fixed; z-index: 40; inset: auto auto calc(12px + env(safe-area-inset-bottom)) calc(50% - (var(--dock-w) + 64px) / 2); inline-size: var(--dock-w); block-size: 56px; display: flex; align-items: center; justify-content: space-around; margin: 0; padding: 0 6px; border-radius: 28px; translate: none; transform: none; background: rgb(44 46 46 / .72); border: 1px solid var(--c-line, rgb(255 255 255 / .08)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 8px 24px rgb(0 0 0 / .5); &[hidden] { display: none; } & .dock-thumb { display: none; } & button { position: relative; flex: 1; display: grid; place-items: center; block-size: 48px; padding: 0; border: 0; background: none; color: var(--k-text-2); cursor: pointer; } & button span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } & button svg { inline-size: 26px; block-size: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } & button[aria-current] { color: var(--k-text); background: none; } & button[aria-current] svg { fill: var(--k-text); stroke: var(--k-text); } } .dock-search { position: fixed; z-index: 40; inline-size: 56px; block-size: 56px; border-radius: 50%; inset: auto auto calc(12px + env(safe-area-inset-bottom)) calc(50% - (var(--dock-w) + 64px) / 2 + var(--dock-w) + 8px); display: grid; place-items: center; border: 1px solid var(--c-line, rgb(255 255 255 / .08)); color: var(--k-text); cursor: pointer; background: rgb(44 46 46 / .72); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 8px 24px rgb(0 0 0 / .5); &[hidden] { display: none; } & svg { inline-size: 26px; block-size: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } } html.detail-open :is(#dock, .dock-search) { display: none; } dialog.detail { position: fixed; inset: 0; inline-size: 100%; max-inline-size: var(--col); block-size: 100dvh; max-block-size: none; margin: 0 auto; padding: 0; border: 0; background: var(--k-bg); color: var(--k-text); overflow: hidden; &::backdrop { background: var(--c-bg, #000); } & svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } } .dt-bar { display: flex; align-items: center; gap: 10px; block-size: 52px; padding: env(safe-area-inset-top) 12px 0 8px; border-block-end: 1px solid var(--k-line); } .dt-back { display: grid; place-items: center; inline-size: 36px; block-size: 36px; padding: 0; border: 0; background: none; color: var(--k-text); cursor: pointer; & svg { inline-size: 24px; block-size: 24px; stroke-width: 2.2; } } .dt-crumbs { display: flex; align-items: center; gap: 10px; flex: 1; min-inline-size: 0; font-size: 15px; color: var(--k-text-2); & b { font-weight: 500; } & i { inline-size: 1px; block-size: 16px; background: var(--k-surface-2); } } .dt-actions { display: flex; gap: 8px; } .sq { display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; border-radius: 8px; cursor: pointer; border: 1px solid var(--k-surface-2); background: var(--k-surface); color: var(--k-text); & svg { inline-size: 18px; block-size: 18px; } &[aria-pressed="true"] svg { fill: var(--k-amber); stroke: var(--k-amber); } } .dt-scroll { block-size: calc(100% - 52px); overflow-y: auto; padding: 0 16px 108px; overscroll-behavior: contain; } .dt-id { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 16px 0 0; } .dt-name { display: grid; gap: 6px; min-inline-size: 0; & b { font: 700 17px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } & small { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--k-text-2); } & .dt-sym { cursor: pointer; } } .ic { display: grid; place-items: center; inline-size: 20px; block-size: 20px; padding: 0; border: 0; background: none; color: var(--k-text-2); cursor: pointer; & svg { inline-size: 16px; block-size: 16px; } } .dt-copy { display: inline-flex; gap: 5px; inline-size: auto; padding: 3px 7px; border-radius: 999px; background: var(--c-pill, rgb(255 255 255 / .06)); font: 500 12px var(--mono, ui-monospace, monospace); color: var(--k-text-2); transition: background .2s, color .2s; &[data-copied="yes"] { background: var(--c-up-soft, rgb(34 197 94 / .16)); color: var(--c-up, #4ade80); & span::after { content: " copied"; font-family: var(--sans); } } &[data-copied="no"] { background: var(--c-down-soft, rgb(239 68 68 / .16)); color: var(--c-down, #f87171); } } .sq[data-share][data-copied="yes"] { color: var(--c-up, #4ade80); } .dt-mc { display: grid; justify-items: end; gap: 6px; & small { font-size: 13px; color: var(--k-text-2); } & b { font: 600 17px var(--sans); font-variant-numeric: tabular-nums; } } .dt-context { margin: 18px 0 0; font-size: 13px; color: var(--c-text, #d4d4d8); } .dt-chart { position: relative; block-size: 300px; margin: 14px -16px 0; padding: 0 0 0 16px; background: radial-gradient(circle, var(--c-pill, #1f1f23) 1px, transparent 1.2px) 0 0 / 12px 12px; } .dt-chart-empty { display: grid; place-items: center; block-size: 100%; color: var(--k-text-3); font-size: 13px; } .dt-embed { display: block; inline-size: calc(100% - 16px); block-size: 100%; border: 0; border-radius: 12px; background: var(--c-bg, #0b0b0d); } .line-chart { inline-size: 100%; block-size: 100%; overflow: visible; & .ln { fill: none; stroke: var(--k-mint); stroke-width: 1.6; stroke-linejoin: round; } &[data-sign="down"] .ln { stroke: var(--k-red); } & text { fill: var(--k-text-4); font: 500 10px var(--mono); stroke: none; } & .now { stroke: var(--k-mint); stroke-opacity: .45; stroke-dasharray: 4 4; stroke-width: 1; } & .dot { fill: var(--k-mint); stroke: var(--k-bg); stroke-width: 2; } & .tag path { fill: var(--k-mint); stroke: none; } & .tag text { fill: var(--k-bg); font: 700 11px var(--mono); } &[data-sign="down"] :is(.dot, .tag path) { fill: var(--k-red); } &[data-sign="down"] .now { stroke: var(--k-red); } & .mk circle { fill: var(--k-bg); stroke: var(--k-amber); stroke-width: 1.6; } & .mk path { fill: var(--k-amber); stroke: none; } } .dt-chips { display: flex; align-items: center; gap: 4px; margin: 12px 0 0; overflow-x: auto; scrollbar-width: none; & button { flex: none; block-size: 30px; padding: 0 12px; border: 0; border-radius: 99px; background: none; color: var(--k-text-2); font: 500 15px var(--sans); cursor: pointer; } & button[aria-pressed="true"] { background: var(--k-surface-2); color: var(--k-text); } & .sep { flex: none; inline-size: 1px; block-size: 18px; margin: 0 6px; background: var(--k-surface-2); } } .dt-legend { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; color: var(--k-text-2); & .mk { inline-size: 10px; block-size: 10px; border-radius: 50%; border: 1.6px solid var(--k-amber); } } .dt-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px -16px 0; border-block-end: 1px solid var(--k-line); & button { position: relative; block-size: 46px; padding: 0; border: 0; background: none; color: var(--k-text-2); font: 500 15px var(--sans); cursor: pointer; } & button[aria-current] { color: var(--k-text); } & button[aria-current]::after { content: ""; position: absolute; inset: auto 0 -1px; block-size: 2px; background: var(--k-text); } } .dt-pane { padding: 6px 0 0; & .call { border: 0; padding: 12px 0; } & .call > p { display: flex; justify-content: space-between; margin: 0; font-size: 15px; & small { color: var(--k-text-2); font-size: 13px; } } } .why-score { display: flex; align-items: center; gap: 14px; margin: 14px 0; & .ring { position: relative; flex: none; display: grid; place-items: center; inline-size: 64px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--k-mint) calc(var(--v) * 1%), var(--k-surface-2) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); } & .ring b { position: absolute; font: 700 20px var(--sans); } & p { display: grid; gap: 4px; margin: 0; & b { font: 600 15px var(--sans); } & small { font-size: 13px; color: var(--k-text-2); line-height: 1.4; } } } .why-score .ring { mask: none; background: none; } .why-score .ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--k-mint) calc(var(--v) * 1%), var(--k-surface-2) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); } .why-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; & li { position: relative; padding-inline-start: 24px; font-size: 14px; line-height: 1.4; } & li::before { position: absolute; inset-inline-start: 0; font-weight: 700; } & li[data-tone="good"]::before { content: "✓"; color: var(--k-green); } & li[data-tone="bad"]::before { content: "•"; color: var(--k-red); font-size: 18px; line-height: 1; } & li[data-tone="warn"]::before { content: "?"; color: var(--c-amber, #fbbf24); font-weight: 800; } & li small { display: block; color: var(--k-text-3); font-size: 12.5px; margin-block-start: 2px; } } .bars { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 10px; & li { display: grid; grid-template-columns: 90px 1fr 30px; align-items: center; gap: 10px; font-size: 14px; } & i { block-size: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--k-mint) calc(var(--v) * 1%), var(--k-surface-2) 0); } & b { text-align: end; font-weight: 600; } } .dt-summary { font-size: 14px; line-height: 1.5; color: var(--c-text, #d4d4d8); } .ds-report { margin: 10px 0; & h5 { display: flex; justify-content: space-between; margin: 0; font: 600 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--k-text-2); & b { text-transform: none; color: var(--k-text-1, var(--c-text, #e4e4e7)); } } } .kv { margin: 12px 0; display: grid; gap: 10px; & div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } & dt { color: var(--k-text-2); } & dd { margin: 0; text-align: end; overflow-wrap: anywhere; } & .mono { font: 12px var(--mono); } & a { color: var(--k-text); } } .dt-pane .bd-pillars { margin-block-start: 8px; } .dt-pane > header { display: none; } .dt-cta { position: absolute; inset: auto 0 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--k-bg) 30%); & :is(button, .buy-out) { text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; inline-size: 100%; block-size: 52px; border: 0; border-radius: 14px; background: var(--k-mint); color: #052e16; font: 600 18px var(--sans); cursor: pointer; box-shadow: 0 0 0 1px #14532d; &:active { scale: .98; } } & svg { inline-size: 22px; block-size: 22px; stroke-width: 2; } } .sheet .rows { margin: 8px -16px 0; max-block-size: 70dvh; overflow-y: auto; } #inbox .trow > button { min-block-size: 72px; } @media (prefers-reduced-motion: reduce) { .pod-cy * { animation: none; } } } @layer skin { .scan { display: grid; gap: 0; padding-block-end: 12px; } .scan-status { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; & p { display: grid; gap: 3px; margin: 0; min-inline-size: 0; } & b { font: 600 15px/1.25 var(--sans); color: var(--k-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & b[data-tone="no"] { color: var(--c-down, #f87171); } & small { font-size: 12.5px; color: var(--k-text-3); } } .scan-dot { position: relative; flex: none; inline-size: 10px; block-size: 10px; margin-inline: 4px; border-radius: 50%; background: var(--c-up, #34d399); &::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-up, #34d399); animation: scan-ping 2s cubic-bezier(0, 0, .2, 1) infinite; } } .scan[data-busy="true"] .scan-dot::after { animation-duration: .9s; } @keyframes scan-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } } .scan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; & div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--c-pill, rgb(255 255 255 / .04)); } & dt { font-size: 12px; color: var(--k-text-3); } & dd { margin: 0; font: 600 22px/1.15 var(--sans); color: var(--k-text); font-variant-numeric: tabular-nums; } & small { font-size: 11.5px; color: var(--k-text-3); } & [data-v="pass"] dd { color: var(--c-up, #34d399); } & [data-v="rej"] dd { color: var(--c-down, #f87171); } } .scan-h { margin: 0 0 4px; font: 600 13px/1 var(--sans); letter-spacing: .02em; color: var(--k-text-2); } .verdict { display: inline-block; padding: 3px 8px; border-radius: 7px; font: 600 12.5px/1.3 var(--sans); max-inline-size: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &[data-v="pass"] { color: var(--c-up, #34d399); background: var(--c-up-soft, rgb(52 211 153 / .12)); } &[data-v="rej"] { color: var(--c-text-2, #a1a1aa); background: var(--c-pill, rgb(255 255 255 / .06)); } &[data-v="rug"] { color: var(--c-down, #f87171); background: var(--c-down-soft, rgb(248 113 113 / .12)); } } .scan-feed .trow-main small .sub { max-inline-size: 16em; } .scan-more { justify-self: center; margin: 12px 0 0; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--c-pill, rgb(255 255 255 / .06)); color: var(--k-text); font: 500 14px var(--sans); cursor: pointer; } .scan-rugs { margin: 18px 0 0; & summary { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; cursor: pointer; list-style: none; padding: 12px 14px; border-radius: 12px; background: var(--c-down-soft, rgb(248 113 113 / .06)); font: 600 15px var(--sans); color: var(--k-text); & span { color: var(--c-down, #f87171); } & small { grid-column: 1 / -1; font: 400 12.5px var(--sans); color: var(--k-text-3); } } & summary::-webkit-details-marker { display: none; } &[open] summary { margin-block-end: 6px; } } .scan-why { margin: 0 0 12px; font-size: 14px; color: var(--k-text-2); &[data-v="pass"] { color: var(--c-up, #34d399); } &[data-v="rej"] { color: var(--c-down, #f87171); } } @media (prefers-reduced-motion: reduce) { .scan-dot::after { animation: none; } } } @layer skin { .call-card .sys-state { display: block; margin-top: 2px; font: 500 11.5px/1.2 var(--sans); font-style: normal; color: var(--k-text-3); &[data-state="in"] { color: var(--c-up, #34d399); } } .feed-head.sys { padding: 10px 12px; border-radius: 12px; background: var(--c-up-soft, rgb(52 211 153 / .07)); box-shadow: inset 0 0 0 1px rgb(52 211 153 / .16); & > b:first-child { display: block; margin-bottom: 2px; color: var(--k-text); } } .line-chart .tr { stroke: var(--k-bg); stroke-width: 1.2; &.buy { fill: var(--k-mint); } &.sell { fill: var(--k-red); } } } @layer skin { .auto { display: grid; gap: 10px; margin: 12px 0 14px; padding: 14px; border-radius: 16px; background: var(--c-pill, #111114); box-shadow: inset 0 0 0 1px var(--c-line, rgb(255 255 255 / .06)); } .auto-head { display: flex; align-items: center; justify-content: space-between; & b { font: 600 16px/1.2 var(--sans); color: var(--k-text); } } .auto-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c-press, #52525b); &[data-mode="sim"] { background: #fbbf24; } &[data-mode="real"] { background: var(--c-up, #34d399); box-shadow: 0 0 0 4px rgb(52 211 153 / .18); } } .auto-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--c-pill, rgb(255 255 255 / .05)); & button { block-size: 38px; border: 0; border-radius: 9px; background: none; color: var(--k-text-2); font: 600 14px var(--sans); cursor: pointer; } & button[aria-checked="true"] { background: var(--c-pill, #27272a); color: var(--k-text); } & button[data-mode="real"][aria-checked="true"] { background: var(--c-up-soft, #064e3b); color: var(--c-up, #6ee7b7); } & button[data-mode="sim"][aria-checked="true"] { background: var(--c-pill, #422006); color: var(--c-amber, #fcd34d); } & button:disabled { opacity: .4; cursor: not-allowed; } } .auto-pct { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; & small { margin-inline-end: 4px; font-size: 12.5px; color: var(--k-text-3); } & button { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--c-pill, rgb(255 255 255 / .06)); color: var(--k-text-2); font: 600 13px var(--sans); cursor: pointer; } & button[aria-checked="true"] { background: var(--k-text); color: #0a0a0b; } } .auto-line, .auto-sim, .auto-flat, .auto-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--k-text-2); } .auto-sim b[data-sign="up"] { color: var(--c-up, #34d399); } .auto-sim b[data-sign="down"] { color: var(--c-down, #f87171); } .auto-note { color: var(--c-amber, #fbbf24); } .auto-pos { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: var(--c-pill, rgb(255 255 255 / .04)); & .logo { inline-size: 40px; block-size: 40px; } } .auto-log { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; & li { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; font-size: 13px; color: var(--k-text-2); } & b { color: var(--k-text); font-weight: 600; } & small { grid-column: 1 / -1; color: var(--k-text-3); font-size: 11.5px; } & li[data-ok="false"] span { grid-column: 1 / -1; color: var(--c-amber, #fbbf24); } & li b { white-space: nowrap; } } } @layer skin { .profile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-block-end: 20px; } .pf-head { display: grid; grid-template-columns: 56px 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 6px 0 10px; border-bottom: 1px solid var(--c-line, rgb(255 255 255 / .07)); } .pf-pic { position: relative; inline-size: 56px; block-size: 56px; margin: 0; grid-row: span 3; cursor: pointer; & .pf-img { font-style: normal; inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-press, #3f3f46), var(--c-pill, #18181b)); box-shadow: 0 0 0 3px var(--c-line, rgb(255 255 255 / .08)); font: 700 34px var(--sans); color: var(--k-text); } &[data-busy] .pf-img { opacity: .5; } } .pf-edit { display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; border: 1px solid var(--c-line, rgb(255 255 255 / .12)); border-radius: 10px; background: var(--c-pill, #111114); cursor: pointer; & svg { inline-size: 16px; block-size: 16px; fill: none; stroke: var(--k-text); stroke-width: 2; stroke-linejoin: round; } } .pf-name { margin: 0; font: 700 20px/1.15 var(--sans); letter-spacing: -.01em; color: var(--k-text); } .pf-handle { margin: 0; font: 400 13px/1.3 var(--sans); color: var(--k-text-3); } .pf-bio { margin: 0; font-size: 13px; line-height: 1.35; color: var(--k-text-2); } .pf-add { margin: 0; padding: 0; border: 0; background: none; font: 600 13px var(--sans); color: var(--c-text-2, #6d7cff); cursor: pointer; text-align: start; } .pf-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--k-text-2); & li { display: inline-flex; align-items: center; gap: 7px; } & svg { inline-size: 18px; block-size: 18px; fill: none; stroke: var(--k-text-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } } .pf-value { padding-top: 10px; } .pf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .pf-total { margin: 0; white-space: nowrap; font: 700 clamp(26px, 7.5vw, 32px)/1 var(--sans); letter-spacing: -.02em; color: var(--k-text); font-variant-numeric: tabular-nums; & > span { color: var(--k-text-3); } } .pf-range { display: flex; gap: 2px; & button { padding: 7px 8px; border: 0; border-radius: 9px; background: none; color: var(--k-text-3); font: 600 13px var(--sans); cursor: pointer; } & button[aria-pressed="true"] { background: var(--c-pill, #1c1c20); color: var(--k-text); } } .pf-range { justify-content: space-between; margin: 6px 0 0; overflow-x: auto; scrollbar-width: none; & button { flex: none; min-inline-size: 36px; padding: 7px 6px; } } .pf-change { margin: 0; min-block-size: 1.3em; font: 600 14px var(--sans); color: var(--c-up, #34d399); &[data-sign="down"] { color: var(--c-down, #f87171); } & > span { color: var(--k-text-3); font-weight: 500; } & > b { font-weight: inherit; } } .pf-chart { position: relative; block-size: 104px; margin: 6px -16px 0; overflow: hidden; } .pf-line { inline-size: 100%; block-size: 100%; overflow: visible; color: var(--c-up, #22c55e); &[data-sign="down"] { color: var(--c-down, #ef4444); } & .ln { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } & .area { fill: url(#pf-fill); stroke: none; } & .dot { fill: currentColor; } & .halo { fill: currentColor; opacity: .18; } & .scrub-x { stroke: var(--k-text-3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; } & .scrub-dot { fill: var(--k-text); } & [hidden] { display: none; } touch-action: pan-y; cursor: crosshair; } .pf-chart-empty { display: grid; place-items: center; block-size: 100%; padding: 0 24px; text-align: center; font-size: 13px; color: var(--k-text-3); } .pf-cash { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 12px; align-items: center; margin-top: 10px; & p { display: grid; gap: 2px; margin: 0; } & small { font-size: 14px; color: var(--k-text-2); } & b { font: 700 20px var(--sans); color: var(--k-text); } } .pf-cash-ic { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--c-pill, #18181b); font: 600 20px var(--sans); color: var(--k-text); } .pf-sq { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--c-line, rgb(255 255 255 / .1)); border-radius: 12px; background: var(--c-pill, #111114); cursor: pointer; & svg { inline-size: 22px; block-size: 22px; fill: none; stroke: var(--k-text); stroke-width: 2.2; stroke-linecap: round; } & circle { fill: var(--k-text); stroke: none; } } .pf-pos { margin-top: 12px; } .pf-pos-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; & h3 { margin: 0; font: 600 20px var(--sans); color: var(--k-text); } & h3 span { color: var(--k-text-2); font-weight: 500; } } .pf-seg { display: flex; padding: 3px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--c-line, rgb(255 255 255 / .1)); & button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 8px; background: none; color: var(--k-text-3); font: 600 14px var(--sans); cursor: pointer; } & button[aria-pressed="true"] { background: #1e2140; color: #8b95ff; } & i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #6d7cff; } } .pf-list { display: grid; margin: 12px -16px 0; padding: 0; list-style: none; & li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; } & .logo { inline-size: 52px; block-size: 52px; } } .pf-main { display: grid; gap: 3px; min-inline-size: 0; & b { font: 600 18px var(--sans); color: var(--k-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } & small { font-size: 14px; color: var(--k-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .pf-num { display: grid; justify-items: end; gap: 3px; & b { font: 600 18px var(--sans); color: var(--k-text); font-variant-numeric: tabular-nums; } & small { font-size: 13px; color: var(--k-text-3); } & em { font: 600 14px var(--sans); font-style: normal; color: var(--c-up, #34d399); } & em[data-sign="down"] { color: var(--c-down, #f87171); } } .pf-none { margin: 14px 0 0; font-size: 14px; color: var(--k-text-3); } .pf-sheet .pf-form { display: grid; gap: 12px; & h3 { margin: 0 0 4px; font: 600 18px var(--sans); color: var(--k-text); } & label { display: grid; gap: 6px; font-size: 13px; color: var(--k-text-2); } & input, & textarea { inline-size: 100%; padding: 11px 12px; border: 1px solid var(--c-line, rgb(255 255 255 / .12)); border-radius: 10px; background: var(--c-bg, #0b0b0d); color: var(--k-text); font: 400 16px var(--sans); resize: vertical; } & .pf-at { display: flex; align-items: center; gap: 0; & i { padding: 0 8px 0 2px; font-style: normal; color: var(--k-text-3); } } } .pf-err { margin: 0; min-block-size: 1em; font-size: 13px; color: var(--c-down, #f87171); } .pf-actions { display: flex; justify-content: flex-end; gap: 8px; & button { padding: 10px 16px; border: 0; border-radius: 10px; background: var(--c-pill, rgb(255 255 255 / .08)); color: var(--k-text); font: 600 15px var(--sans); cursor: pointer; } & .pf-save { background: var(--k-text); color: #0a0a0b; } } #dock button[aria-current] .dock-me { box-shadow: 0 0 0 2px var(--k-text); } .dock-me { display: block; inline-size: 26px; block-size: 26px; border-radius: 50%; overflow: hidden; background: var(--c-press, #3f3f46); font-style: normal; & img, & .me-empty { inline-size: 100%; block-size: 100%; object-fit: cover; display: grid; place-items: center; font: 700 12px var(--sans); color: var(--c-text, #fff); } } #more-btn .avatar img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; } } @layer skin { .pf-wallets { margin-top: 22px; & h3 { margin: 0 0 8px; font: 600 20px var(--sans); color: var(--k-text); } } .pf-wl { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; & li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--c-pill, rgb(255 255 255 / .04)); } & .pf-wchain { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--c-pill, #18181b); font-size: 16px; color: #c8f169; } & .pf-wchain[data-kind="solana"] { color: #14f195; } } .pf-x { inline-size: 32px; block-size: 32px; border: 0; border-radius: 8px; background: none; color: var(--k-text-3); cursor: pointer; } .pf-connect { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; & button { display: grid; gap: 2px; justify-items: start; padding: 12px 14px; border: 1px solid var(--c-line, rgb(255 255 255 / .1)); border-radius: 12px; background: var(--c-pill, #111114); color: var(--k-text); cursor: pointer; text-align: start; } & b { font: 600 15px var(--sans); } & small { font-size: 12.5px; color: var(--k-text-3); } } } @layer skin { .dt-cta[data-two="true"] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dt-cta .dt-mine { background: var(--c-pill, #18181b); color: var(--k-text); box-shadow: inset 0 0 0 1px var(--c-line, rgb(255 255 255 / .14)); } .us-sheet { display: grid; gap: 12px; &:not([open]) { display: none; } & h3 { margin: 0; font: 600 19px var(--sans); color: var(--k-text); & small { display: block; margin-top: 2px; font: 400 13px var(--sans); color: var(--k-text-3); } } } .us-side, .us-pct { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 12px; background: var(--c-pill, rgb(255 255 255 / .05)); & button { block-size: 38px; border: 0; border-radius: 9px; background: none; color: var(--k-text-2); font: 600 14px var(--sans); cursor: pointer; } & button[aria-pressed="true"] { background: var(--c-pill, #27272a); color: var(--k-text); } } .us-amt { display: grid; gap: 6px; font-size: 13px; color: var(--k-text-2); & span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } & input { min-inline-size: 0; padding: 12px; border: 1px solid var(--c-line, rgb(255 255 255 / .12)); border-radius: 10px; background: var(--c-bg, #0b0b0d); color: var(--k-text); font: 600 20px var(--sans); } & select { padding: 0 10px; border: 1px solid var(--c-line, rgb(255 255 255 / .12)); border-radius: 10px; background: var(--c-pill, #18181b); color: var(--k-text); font: 600 16px var(--sans); } } .us-quote { display: grid; gap: 6px; margin: 0; padding: 12px; border-radius: 12px; background: var(--c-pill, rgb(255 255 255 / .04)); & div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; } & dt { color: var(--k-text-3); } & dd { margin: 0; color: var(--k-text); font-weight: 600; font-variant-numeric: tabular-nums; } } .us-state { margin: 0; min-block-size: 1.2em; font-size: 13.5px; color: var(--k-text-2); & a { color: #6d7cff; } } .us-actions { display: flex; justify-content: flex-end; gap: 8px; & button { padding: 11px 16px; border: 0; border-radius: 10px; background: var(--c-pill, rgb(255 255 255 / .08)); color: var(--k-text); font: 600 15px var(--sans); cursor: pointer; } & .us-go { background: var(--k-mint, var(--c-up, #34d399)); color: #052e16; } } } @layer skin { .pf-chains { display: flex; gap: 6px; margin: 12px -16px 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; & button { flex: none; display: grid; gap: 1px; justify-items: start; padding: 8px 12px; border: 1px solid var(--c-line, rgb(255 255 255 / .1)); border-radius: 12px; background: none; color: var(--k-text-2); font: 600 14px var(--sans); cursor: pointer; } & small { font: 500 12px var(--sans); color: var(--k-text-3); font-variant-numeric: tabular-nums; } & button[aria-pressed="true"] { background: var(--c-pill, #18181b); color: var(--k-text); border-color: var(--c-line, rgb(255 255 255 / .2)); } } .pf-list li[data-hidden-row="true"] { opacity: .55; } .pf-hidden { display: block; margin: 10px auto 0; padding: 8px 14px; border: 1px solid var(--c-line, rgb(255 255 255 / .12)); border-radius: 999px; background: var(--c-pill, #111114); color: var(--k-text-2); font: 600 13px var(--sans); cursor: pointer; } } @layer skin { .hours-head { margin: 10px 0 -2px; font-size: 12px; color: var(--k-text-3); } .sys-none { margin: 10px 0 0; font-size: 13px; color: var(--k-text-3); } .sys-trades { display: grid; gap: 6px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--c-pill, rgb(255 255 255 / .04)); list-style: none; & li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; font-size: 13.5px; } & b { font-weight: 600; color: var(--k-text); white-space: nowrap; } & b[data-sign="up"] { color: var(--c-up, #34d399); } & b[data-sign="down"] { color: var(--c-down, #f87171); } & span { color: var(--k-text-2); } & li[data-why="crash"] span, & li[data-why="rug"] span { color: var(--c-amber, #fbbf24); } } } @layer skin { .pf-since { margin: 6px 0 0; font-size: 12px; color: var(--k-text-3); } } @layer skin { .tk.tk-logo { padding: 0; overflow: hidden; background: none; font-size: 0; & .tile { inline-size: 100%; block-size: 100%; } } } @layer skin { .dep-list { display: grid; gap: 10px; margin-block: 4px 8px; } #sheet.dep-has-back .sheet-title { padding-inline-start: 30px; } .dep-back { position: absolute; inset-block-start: 20px; inset-inline-start: 12px; background: none; border: 0; color: var(--k-text-3); font-size: 28px; line-height: 1; padding: 4px 10px; cursor: pointer; } .dep-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; text-align: start; padding: 18px 18px; border: 0; border-radius: 16px; background: var(--k-surface); color: var(--k-text); cursor: pointer; font: inherit; & b { display: block; font-size: 17px; font-weight: 600; } & small { display: block; margin-block-start: 3px; font-size: 13px; color: var(--k-text-3); } &:hover { background: var(--k-surface-2); } } .dep-ico { display: grid; place-items: center; flex: none; font-style: normal; & svg { inline-size: 26px; block-size: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; } & svg[viewBox="0 0 32 32"] { stroke: none; inline-size: 30px; block-size: 30px; } & img { border-radius: 50%; } & > b { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--k-surface-2); font-size: 13px; } } .dep-ico svg:not([viewBox="0 0 32 32"]) path[d^="M4 4h6"] { fill: currentColor; stroke: none; } .dep-brands { display: flex; gap: 6px; & svg { inline-size: 28px; block-size: 28px; } } .dep-qr { display: grid; place-items: center; margin-block: 4px 12px; & img { background: #fff; border-radius: 14px; padding: 6px; image-rendering: pixelated; } } .dep-open { text-align: center; text-decoration: none; } #sheet { position: fixed; } } @layer skin { .pf-wallet { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px; border-radius: 12px; background: var(--k-surface); & button { padding: 8px 14px; border: 0; border-radius: 9px; background: none; color: var(--k-text-3); font: 600 13px var(--sans); cursor: pointer; } & button[aria-pressed="true"] { background: var(--k-surface-2); color: var(--k-text); } & button[data-wallet="sim"][aria-pressed="true"] { color: var(--c-amber, #fbbf24); } } .pf-simnote { margin: -4px 0 14px; font-size: 13px; color: var(--k-text-3); & p { margin: 0 0 10px; } } .pf-link { padding: 0; border: 0; background: none; color: #818cf8; font: inherit; cursor: pointer; } .pf-simcash { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; & label { display: inline-flex; align-items: center; gap: 4px; color: var(--k-text-2); } & input { width: 9em; padding: 7px 10px; border: 1px solid var(--k-surface-2); border-radius: 9px; background: var(--k-surface); color: var(--k-text); font: 600 14px var(--sans); } & .pf-save { padding: 7px 14px; } & small { color: var(--c-down, #f87171); } &[hidden] { display: none; } } .total-bal[data-wallet="sim"]::before { content: "SIM"; margin-inline-end: 8px; padding: 3px 6px; border-radius: 6px; vertical-align: middle; background: rgba(251, 191, 36, .15); color: var(--c-amber, #fbbf24); font: 700 11px/1 var(--sans); letter-spacing: .04em; } } @layer skin { .strat-board { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; & li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--k-surface); } & li[data-chosen="true"] { box-shadow: inset 0 0 0 1.5px #22c55e; } & .st-rank { font: 700 20px var(--sans); color: var(--k-text-3); text-align: center; } & .st-main b { display: block; font-size: 16px; color: var(--k-text); } & .st-main small, & .st-num small { display: block; margin-block-start: 3px; font-size: 12.5px; color: var(--k-text-3); } & .st-num { text-align: end; & b { font: 700 18px var(--sans); color: var(--c-up, #34d399); } & b[data-sign="down"] { color: var(--c-down, #f87171); } } } .st-live { margin-inline-start: 6px; padding: 2px 6px; border-radius: 6px; background: var(--c-up-soft, rgba(34, 197, 94, .15)); color: var(--c-up, #22c55e); font: 700 10.5px/1.4 var(--sans); font-style: normal; letter-spacing: .04em; vertical-align: middle; } .st-note { margin: 10px 2px 0; font-size: 12.5px; color: var(--k-text-3); } [data-board-podium]:not(:empty) { margin-block-end: 14px; } } @layer skin { #leaders .top-hero:has(.strat-board) { min-block-size: 0; block-size: auto; aspect-ratio: auto; padding-block-end: 8px; } #leaders [data-top-you] { display: none; } } @layer skin { .agent { display: inline-flex; align-items: center; gap: 8px; max-inline-size: min(42vw, 260px); padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: rgba(129, 140, 248, .10); color: var(--k-text-2); cursor: pointer; font: 600 12.5px var(--sans); overflow: hidden; } .agent-orb { position: relative; flex: none; inline-size: 24px; block-size: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c7d2fe, #6366f1 45%, #312e81 80%); box-shadow: 0 0 12px rgba(99, 102, 241, .55); animation: agent-breathe 3.2s ease-in-out infinite; & i { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: rgba(165, 180, 252, .9); opacity: 0; } & i:nth-child(2) { inset: -7px; border-top-color: var(--c-up-soft, rgba(52, 211, 153, .8)); } & i:nth-child(3) { inset: -10px; border-top-color: rgba(244, 114, 182, .6); } } .agent[data-state="working"] .agent-orb i { opacity: 1; animation: agent-spin 1.6s linear infinite; } .agent[data-state="working"] .agent-orb i:nth-child(2) { animation-duration: 2.3s; animation-direction: reverse; } .agent[data-state="working"] .agent-orb i:nth-child(3) { animation-duration: 3.1s; } .agent[data-state="off"] .agent-orb { filter: grayscale(1); animation: none; box-shadow: none; } .agent-say { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &.is-in { animation: agent-in .45s var(--ease-out, ease-out); } } @keyframes agent-breathe { 0%, 100% { transform: scale(.92); box-shadow: 0 0 8px rgba(99, 102, 241, .4); } 50% { transform: scale(1.05); box-shadow: 0 0 18px rgba(99, 102, 241, .75); } } @keyframes agent-spin { to { transform: rotate(360deg); } } @keyframes agent-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .agent-say { display: none; } .agent { padding: 6px; background: none; } } @media (prefers-reduced-motion: reduce) { .agent-orb, .agent-orb i, .agent-say.is-in { animation: none !important; } } .agent-log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; & li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 10px 2px; border-block-end: 1px solid var(--c-line, rgba(255, 255, 255, .05)); font-size: 14px; color: var(--k-text); } & small { color: var(--k-text-3); font-size: 12px; } } .agent-log li.agent-empty { display: block; color: var(--k-text-3); } .agent-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #818cf8; } li[data-kind="research"] .agent-dot { background: var(--c-up, #34d399); } li[data-kind="chat"] .agent-dot { background: #f472b6; } } @layer skin { .topbar .topbar-right { flex-wrap: nowrap; min-inline-size: 0; } .topbar .agent { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 200px; } } @layer skin { .scan-form { display: flex; gap: 8px; margin: 0 0 14px; & input { flex: 1; min-inline-size: 0; padding: 12px 14px; border: 1px solid var(--c-line, rgba(255, 255, 255, .08)); border-radius: 12px; background: var(--k-surface); color: var(--k-text); font: 500 14px var(--sans); } & button { padding: 0 18px; border: 0; border-radius: 12px; background: #6366f1; color: #fff; font: 700 14px var(--sans); cursor: pointer; } } .scan-wait { display: grid; place-items: center; gap: 14px; padding: 30px 0; color: var(--k-text-3); & .agent-orb { inline-size: 40px; block-size: 40px; } & .agent-orb i { opacity: 1; animation: agent-spin 1.6s linear infinite; } } .scan-head { display: flex; gap: 12px; align-items: center; margin-block-end: 10px; & .tile { inline-size: 44px; block-size: 44px; } & b { display: block; } & small { color: var(--k-text-3); font-size: 13px; } } .scan-status { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; &[data-s="pass"] { background: var(--c-up-soft, rgba(34, 197, 94, .12)); color: var(--c-up, #4ade80); } &[data-s="fail"] { background: var(--c-down-soft, rgba(239, 68, 68, .12)); color: var(--c-down, #f87171); } &[data-s="wait"] { background: rgba(251, 191, 36, .12); color: var(--c-amber, #fbbf24); } } .scan-ai { display: flex; gap: 12px; align-items: center; margin-block-end: 10px; padding: 12px; border-radius: 12px; background: var(--k-surface); & > b { font: 800 26px var(--sans); min-inline-size: 44px; text-align: center; } & span b { display: block; } & small { color: var(--k-text-3); font-size: 13px; } &[data-risk="high"] > b { color: var(--c-down, #f87171); } &[data-risk="mid"] > b { color: var(--c-amber, #fbbf24); } &[data-risk="low"] > b { color: var(--c-up, #4ade80); } } .scan-checks { list-style: none; margin: 8px 0 12px; padding: 0; & li { display: grid; gap: 2px; padding: 9px 0 9px 22px; position: relative; border-block-end: 1px solid var(--c-line, rgba(255, 255, 255, .05)); font-size: 14px; } & li::before { content: "?"; position: absolute; inset-inline-start: 0; color: var(--c-amber, #fbbf24); font-weight: 800; } & li[data-ok="yes"]::before { content: "✓"; color: var(--c-up, #4ade80); } & li[data-ok="no"]::before { content: "✕"; color: var(--c-down, #f87171); } & small { color: var(--k-text-3); font-size: 12.5px; } } .scan-card { display: flex; gap: 12px; align-items: center; margin-block-end: 10px; padding: 12px; border-radius: 12px; background: var(--k-surface); & .scan-big { font: 800 26px var(--sans); min-inline-size: 44px; text-align: center; } & > div { display: grid; gap: 5px; flex: 1; min-inline-size: 0; } & small { color: var(--k-text-3); font-size: 12.5px; } & b[data-v="gem"] { color: var(--c-up, #4ade80); } & b[data-v="watch"] { color: var(--c-amber, #fbbf24); } & b[data-v="avoid"], & b[data-v="scam"] { color: var(--c-down, #f87171); } } .scan-bar { display: grid; gap: 2px; & i { display: block; block-size: 4px; border-radius: 2px; background: linear-gradient(90deg, #6366f1 var(--v), var(--c-pill, rgba(255, 255, 255, .08)) 0); } } .scan-bt { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; & li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border-radius: 12px; background: var(--k-surface); font-size: 14px; } & small { grid-column: 1 / -1; color: var(--k-text-3); font-size: 12.5px; } & b[data-s="up"] { color: var(--c-up, #4ade80); } & b[data-s="down"] { color: var(--c-down, #f87171); } } .scan-links { display: flex; gap: 8px; flex-wrap: wrap; } .scan-live-head { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; color: var(--k-text-3); & .agent-orb { inline-size: 32px; block-size: 32px; } & .agent-orb i { opacity: 1; animation: agent-spin 1.6s linear infinite; } & p { margin: 0; } & b { color: inherit; } } .scan-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; & li { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; padding: 7px 0; font-size: 14px; opacity: 0; transform: translateY(8px); animation: scan-step-in .45s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 45ms); transition: opacity .35s ease; } & li small { grid-column: 2; color: var(--k-text-3); font-size: 12.5px; min-block-size: 0; } & li small:empty { display: none; } & li[data-state="wait"] > span { opacity: .45; } & li[data-state="skip"] { opacity: .35 !important; } & li[data-state="skip"] small:empty::before { content: none; } } .scan-steps.is-done li { animation: none; opacity: 1; transform: none; } .step-dot { position: relative; display: block; inline-size: 18px; block-size: 18px; margin-block-start: 1px; font-style: normal; & b, & s { position: absolute; inset: 0; display: grid; place-items: center; box-sizing: border-box; inline-size: 18px; block-size: 18px; border-radius: 50%; background: none; transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1); } & b { border: 2px solid rgba(99, 102, 241, .25); border-block-start-color: #818cf8; opacity: 0; } & s { opacity: 0; transform: scale(.4); display: grid; place-items: center; font: 800 11px var(--sans); text-decoration: none; color: #0b0b10; } } .scan-steps li[data-state="wait"] .step-dot b { opacity: .5; animation: none; border-color: var(--c-line, rgba(255, 255, 255, .12)); } .scan-steps li[data-state="run"] .step-dot b { opacity: 1; animation: agent-spin .8s linear infinite; } .scan-steps li[data-state="ok"] .step-dot s, .scan-steps li[data-state="warn"] .step-dot s, .scan-steps li[data-state="fail"] .step-dot s, .scan-steps li[data-state="skip"] .step-dot s { opacity: 1; transform: scale(1); } .scan-steps li[data-state="ok"] .step-dot s { background: var(--c-up, #4ade80); } .scan-steps li[data-state="ok"] .step-dot s::before { content: "✓"; } .scan-steps li[data-state="warn"] .step-dot s { background: #fbbf24; } .scan-steps li[data-state="warn"] .step-dot s::before { content: "!"; } .scan-steps li[data-state="fail"] .step-dot s { background: var(--c-down, #f87171); } .scan-steps li[data-state="fail"] .step-dot s::before { content: "✕"; } .scan-steps li[data-state="skip"] .step-dot s { background: var(--c-pill, rgba(255, 255, 255, .18)); } .scan-steps li[data-state="skip"] .step-dot s::before { content: "–"; color: var(--c-text, #eee); } @keyframes scan-step-in { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .scan-steps li { animation: none; opacity: 1; transform: none; } } .scan-trail { margin: 4px 0 12px; font-size: 13px; color: var(--k-text-3); & summary { cursor: pointer; padding: 6px 0; } } .scan-add { display: inline-flex; align-items: center; gap: 8px; & svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } &[data-done="yes"] { color: var(--c-up, #4ade80); animation: scan-add-pop .5s cubic-bezier(.2, 1.4, .4, 1); } &[data-done="yes"] svg { animation: scan-add-glow 1.2s ease-out; } } @keyframes scan-add-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes scan-add-glow { 0% { opacity: .4; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } } .scan-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; & div { padding: 8px 10px; border-radius: 10px; background: var(--k-surface); min-inline-size: 0; } & dt { color: var(--k-text-3); font-size: 11.5px; } & dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; } & dd small { display: block; color: var(--k-text-3); font-weight: 500; font-size: 11.5px; } & dd[data-s="up"] { color: var(--c-up, #4ade80); } & dd[data-s="down"] { color: var(--c-down, #f87171); } } .scan-socials { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; & a { color: var(--k-text-2, inherit); text-transform: capitalize; } } } @layer skin { #app-shell:not([data-view="gems"]) #top-picks { display: none !important; } .top-size { display: inline-flex; gap: 2px; margin: 4px 0 12px; padding: 3px; border-radius: 12px; background: var(--k-surface); & button { padding: 8px 14px; border: 0; border-radius: 9px; background: none; color: var(--k-text-3); font: 600 13px var(--sans); cursor: pointer; } & button[aria-pressed="true"] { background: var(--k-surface-2); color: var(--k-text); } } } @layer skin { .feed-sec { margin: 18px 2px 6px; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--k-text-3); } .soon-list { list-style: none; margin: 0; padding: 0; } .soon { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: center; padding: 10px 2px; border-block-end: 1px solid var(--c-line, rgba(255, 255, 255, .05)); & b { font-size: 15px; } & small { display: block; color: var(--k-text-3); font-size: 12.5px; } } .soon-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #fbbf24; animation: agent-breathe 1.8s ease-in-out infinite; } .soon[data-stage="imminent"] .soon-dot { background: var(--c-up, #22c55e); } .soon-tag { margin-inline-start: 6px; padding: 1px 6px; border-radius: 6px; font: 700 10px/1.5 var(--sans); font-style: normal; background: rgba(251, 191, 36, .15); color: var(--c-amber, #fbbf24); } .soon[data-stage="imminent"] .soon-tag { background: var(--c-up-soft, rgba(34, 197, 94, .15)); color: var(--c-up, #22c55e); } .risk { font-weight: 700; &[data-r="hi"] { color: var(--c-down, #f87171); } &[data-r="mid"] { color: var(--c-amber, #fbbf24); } &[data-r="lo"] { color: var(--c-up, #4ade80); } } } @layer skin { .pj-score.is-out { opacity: .45; text-decoration: line-through; text-decoration-thickness: 1px; } } @layer skin { .off-board { color: var(--c-amber, #fbbf24); } } @layer skin { .dt-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 0; } } @layer skin { .strats { display: grid; gap: 8px; margin: 10px 0 0; } .strat { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 12px; background: var(--c-pill, rgb(255 255 255 / .04)); font-size: 13px; } .strat[data-chosen] { outline: 1px solid var(--c-line, rgb(255 255 255 / .18)); } .strat small { color: var(--k-text-3); } } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { overflow-x: clip; } @layer skin { .bt-table { inline-size: 100%; margin: 12px 0 0; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .bt-table caption { text-align: start; color: var(--k-text-3); padding: 0 0 6px; } .bt-table th, .bt-table td { padding: 6px 4px; text-align: end; border-block-end: 1px solid var(--c-line, rgb(255 255 255 / .05)); } .bt-table th:first-child, .bt-table td:first-child { text-align: start; } } @layer skin { .bt-open { all: unset; cursor: pointer; color: var(--k-text); text-decoration: underline; text-underline-offset: 3px; } } @layer skin { .pf-id { display: grid; gap: 1px; min-inline-size: 0; & .pf-name, & .pf-handle, & .pf-bio { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .pf-more { display: block; margin: 10px auto 0; padding: 6px 12px; border: 0; background: none; color: var(--k-text-2); font: 600 13px var(--sans); cursor: pointer; } .pf-wbox { margin-top: 14px; & summary { padding: 10px 0; font: 600 14px var(--sans); color: var(--k-text-2); cursor: pointer; list-style: none; } & summary::-webkit-details-marker { display: none; } & summary::after { content: "▾"; margin-inline-start: 6px; color: var(--k-text-3); } &[open] summary::after { content: "▴"; } & .pf-wallets { margin-top: 4px; } } } @layer skin { .auto:has(> .auto-bar) { display: block; margin: 10px 0 10px; padding: 0; background: none; box-shadow: none; border: 0; } .auto-bar { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; inline-size: 100%; padding: 10px 12px; border: 1px solid var(--c-line, rgb(255 255 255 / .08)); border-radius: 12px; background: var(--c-pill, #111114); color: inherit; font: inherit; text-align: start; cursor: pointer; & svg { inline-size: 16px; block-size: 16px; fill: none; stroke: var(--k-text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } } .auto-bar-main { display: grid; gap: 2px; min-inline-size: 0; & b { font: 600 14px/1.2 var(--sans); color: var(--k-text); } & small { font-size: 12px; color: var(--k-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .auto-chip { padding: 2px 7px; border-radius: 6px; font: 700 10.5px/1.4 var(--mono, ui-monospace); font-style: normal; letter-spacing: .06em; color: var(--k-text-3); background: var(--c-pill, rgb(255 255 255 / .06)); &[data-mode="sim"] { color: var(--c-amber, #fbbf24); background: var(--c-pill, rgb(251 191 36 / .12)); } &[data-mode="real"] { color: var(--c-up, #2de0a8); background: var(--c-up-soft, rgb(45 224 168 / .12)); } } .auto-full { display: grid; gap: 10px; } .scan-form { position: relative; display: block; margin: 0 0 10px; & input { inline-size: 100%; block-size: 40px; padding: 0 44px 0 12px; border: 1px solid var(--c-line, rgb(255 255 255 / .08)); border-radius: 10px; background: var(--c-pill, #111114); color: var(--k-text); font: 400 16px var(--sans); } & button { position: absolute; inset: 0 0 0 auto; display: grid; place-items: center; inline-size: 40px; padding: 0; border: 0; background: none; color: var(--k-text-2); cursor: pointer; } & svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } } .sys-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 2px 4px; font: 400 12px/1.4 var(--mono, ui-monospace); color: var(--k-text-3); & b { font: 700 11px var(--mono, ui-monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--c-up, #2de0a8); } & [data-sign="up"] { color: var(--c-up, #34d399); } & [data-sign="down"] { color: var(--c-down, #f87171); } } .feed-sec { margin: 14px 2px 4px; font-size: 11px; } .soon { padding: 7px 2px; gap: 8px; & .trow-main b { font-size: 14px; } & .trow-main small { font-size: 11.5px; } } .soon-dot { inline-size: 8px; block-size: 8px; } .soon-tag { font-size: 9px; padding: 0 5px; } .soon-list[data-all="false"] > li:nth-child(n + 4) { display: none; } .scan-live { margin: 6px 0 2px; } .scan-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 2px 6px; font: 400 12px/1.4 var(--mono, ui-monospace); color: var(--k-text-3); & b { font: 700 11px var(--mono, ui-monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--c-amber, #fbbf24); } & em { font-style: normal; color: var(--k-text); } & [data-v="pass"] em { color: var(--c-up, #34d399); } & [data-v="fail"] em { color: var(--c-down, #f87171); } } .scan-dot { align-self: center; inline-size: 7px; block-size: 7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 8px #fbbf24; animation: agent-breathe 1.2s ease-in-out infinite; } .scan-tape { overflow: hidden; border-block: 1px solid var(--c-line, rgb(255 255 255 / .06)); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .tape-track { display: flex; inline-size: max-content; gap: 18px; padding: 7px 0; animation: tape-roll calc(var(--n, 20) * 2.2s) linear infinite; will-change: transform; } .tape-item { white-space: nowrap; font: 600 12.5px var(--mono, ui-monospace); color: var(--k-text-2); & i { margin-inline-end: 5px; font-style: normal; color: var(--k-text-3); } & small { font-weight: 400; font-size: 11px; color: var(--k-text-3); } } .tape-item[data-v="pass"] i, .tape-item[data-v="alert"] i { color: var(--c-up, #34d399); } .tape-item[data-v="alert"] { color: var(--c-up, #34d399); } .tape-item[data-v="fail"] i { color: var(--c-down, #f87171); } .tape-item[data-v="tested"] i { color: var(--c-text-2, #a78bfa); } .tape-item[data-v="check"] i, .tape-item[data-v="wait"] i { color: var(--c-amber, #fbbf24); } @keyframes tape-roll { to { transform: translateX(-50%); } } .soon[data-stage="checking"] { position: relative; overflow: hidden; } .soon[data-stage="checking"]::after { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: 35%; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(251 191 36 / .10), transparent); animation: ag-sweep 2.4s linear infinite; } @media (prefers-reduced-motion: reduce) { .tape-track, .scan-dot, .soon[data-stage="checking"]::after { animation: none; } .scan-tape { overflow-x: auto; } } .more-row { display: block; margin: 2px 0 0; padding: 6px 2px; border: 0; background: none; color: var(--k-text-2); font: 500 12.5px var(--sans); cursor: pointer; } } @layer skin { .bt-live { display: inline-flex; gap: 4px; align-items: center; block-size: 1em; vertical-align: middle; & i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--c-up, #2de0a8); box-shadow: 0 0 6px rgb(45 224 168 / .8); animation: bt-dot 1.2s ease-in-out infinite; } & i:nth-child(2) { animation-delay: .15s; } & i:nth-child(3) { animation-delay: .3s; } } @keyframes bt-dot { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } } .bt-tag { padding: 1px 6px; border-radius: 5px; font: 700 11px/1.4 var(--mono, ui-monospace); letter-spacing: .08em; font-style: normal; &[data-k="in"] { color: var(--c-up, #2de0a8); background: var(--c-up-soft, rgb(45 224 168 / .12)); } &[data-k="out"] { color: var(--k-text-3); background: var(--c-pill, rgb(255 255 255 / .06)); } } @media (prefers-reduced-motion: reduce) { .bt-live i { animation: none; opacity: .8; } } } @layer skin { #board [data-board-list] { display: none; } #top-picks { padding-block-start: 4px; } #top-picks .picks-head { display: none; } .tabs .tab-ic { inline-size: 16px; block-size: 16px; margin-inline-end: 6px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } } @layer skin { #board { display: none !important; } .dock button:is([data-go="top"], [data-go="agent"])[aria-current] svg { fill: none; stroke-width: 2.4; } .dock button[data-go="agent"][aria-current] svg circle:last-child { fill: currentColor; } } @layer skin { .is-new { animation: row-in .42s cubic-bezier(.2, .8, .2, 1) backwards; } @keyframes row-in { from { opacity: 0; transform: translateY(14px); } } .hide-toast { position: fixed; z-index: 60; inset-inline: 16px; inset-block-end: calc(92px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--c-pill, #18181b); box-shadow: 0 0 0 1px var(--c-line, rgb(255 255 255 / .1)); font-size: 14px; color: var(--k-text); animation: row-in .3s both; } .hide-toast button { border: 0; background: none; color: var(--c-up, #2de0a8); font: 700 14px var(--sans); cursor: pointer; } @media (prefers-reduced-motion: reduce) { .is-new, .hide-toast { animation: none; } } } @layer skin { .dt-chart-note { margin: 4px 0 0; min-block-size: 0; font-size: 12px; color: var(--k-text-3); &:empty { display: none; } } } @layer skin { .pf-phantom { margin: 0 0 14px; padding: 12px; border: 1px solid #ab9ff2; border-radius: 12px; background: rgb(171 159 242 / .08); } .pf-phantom p { margin: 0 0 10px; font-size: 13px; color: var(--k-text); } .pf-phantom button { inline-size: 100%; block-size: 40px; border: 0; border-radius: 10px; background: #ab9ff2; color: #1c1c1c; font: 600 15px/1 var(--sans); cursor: pointer; } } @layer skin { #profile[data-switching] .pf-value > :not(.pf-wallet), #profile[data-switching] .pf-value ~ * { opacity: .45; transition: opacity .15s; } } @layer skin { .agent-view { display: grid; gap: 0; padding-block-end: 20px; } .ag-hero { display: grid; justify-items: center; gap: 6px; padding: 24px 0 18px; text-align: center; } .ag-orb { position: relative; inline-size: 96px; block-size: 96px; margin-block-end: 6px; } .ag-orb span { position: absolute; inset: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c7d2fe, #6366f1 45%, #312e81 80%); box-shadow: 0 0 24px rgba(99, 102, 241, .6); animation: ag-breathe 3.2s ease-in-out infinite; } .ag-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: rgba(165, 180, 252, .9); opacity: .35; animation: ag-spin 6s linear infinite; } .ag-orb i:nth-child(2) { inset: 8px; border-top-color: var(--c-up-soft, rgba(45, 224, 168, .8)); animation-duration: 4.2s; animation-direction: reverse; } .ag-orb i:nth-child(3) { inset: 16px; border-top-color: rgba(244, 114, 182, .6); animation-duration: 3s; } .ag-orb[data-state="working"] i { opacity: 1; animation-duration: 1.6s; } .ag-orb[data-state="working"] i:nth-child(2) { animation-duration: 2.3s; } .ag-orb[data-state="working"] i:nth-child(3) { animation-duration: 3.1s; } .ag-orb[data-state="off"] span { filter: grayscale(1); animation: none; box-shadow: none; } .ag-orb[data-state="off"] i { opacity: .15; animation: none; } .ag-hero h2 { margin: 0; font: 700 22px/1.15 var(--sans); letter-spacing: -.01em; color: var(--k-text); } .ag-status { margin: 0; font: 600 14px var(--sans); color: var(--c-up, #2de0a8); } .ag-orb[data-state="off"] ~ .ag-status { color: var(--k-text-3); } .ag-today { margin: 0; font: 400 12.5px var(--mono, ui-monospace); color: var(--k-text-3); } .ag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ag-card { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--k-card); box-shadow: inset 0 0 0 1px var(--c-line, rgb(255 255 255 / .05)); } .ag-card.is-new { animation: ag-in .5s cubic-bezier(.2, .8, .2, 1) backwards; box-shadow: inset 0 0 0 1px rgb(45 224 168 / .35), 0 0 14px rgb(45 224 168 / .18); } .ag-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ag-card header small { font-size: 12px; color: var(--k-text-3); } .ag-kind { padding: 2px 8px; border-radius: 6px; font: 700 10.5px/1.5 var(--mono, ui-monospace); letter-spacing: .06em; text-transform: uppercase; color: #a78bfa; background: rgb(167 139 250 / .14); } .ag-kind[data-kind="scan"] { color: var(--c-up, #2de0a8); background: var(--c-up-soft, rgb(45 224 168 / .14)); } .ag-kind[data-kind="research"] { color: var(--c-text-2, #67e8f9); background: var(--c-pill, rgb(103 232 249 / .14)); } .ag-kind[data-kind="backtest"] { color: var(--c-amber, #fbbf24); background: var(--c-pill, rgb(251 191 36 / .14)); } .ag-kind[data-kind="study"] { color: var(--c-text-2, #f472b6); background: var(--c-pill, rgb(244 114 182 / .14)); } .ag-now { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--k-card); box-shadow: inset 0 0 0 1px rgb(45 224 168 / .3), 0 0 18px rgb(45 224 168 / .12); } .ag-now p { margin: 0; flex: 1; min-width: 0; font-size: 14px; color: var(--k-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-now::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c-up, #2de0a8); animation: ag-pulse 1.2s ease-in-out infinite; } .ag-scan { position: absolute; inset: 0 auto 0 0; inline-size: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, var(--c-up-soft, rgb(45 224 168 / .16)), transparent); animation: ag-sweep 1.8s linear infinite; } .ag-kind[data-kind="chat"], .ag-kind[data-kind="report"] { color: var(--k-text-3); background: var(--c-pill, rgb(255 255 255 / .06)); } .ag-card p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--k-text); } .ag-out { font-weight: 700; color: var(--k-text); } .ag-steps { margin: 2px 0 0; } .ag-steps summary { cursor: pointer; list-style: none; font: 600 12.5px var(--sans); color: var(--k-text-2); } .ag-steps summary::-webkit-details-marker { display: none; } .ag-steps summary::after { content: " ▾"; color: var(--k-text-3); } .ag-steps[open] summary::after { content: " ▴"; } .ag-steps ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font: 400 12.5px/1.45 var(--mono, ui-monospace); color: var(--k-text-2); } .ag-steps li { animation: ag-step .3s ease-out backwards; animation-delay: calc(var(--i) * 90ms); } .ag-steps li[data-tone="bad"] { color: var(--c-down, #f87171); } .ag-steps li[data-tone="good"] { color: var(--c-up, #2de0a8); } .ag-empty { padding: 24px 0; text-align: center; color: var(--k-text-3); font-size: 14px; } .ag-more { justify-self: center; margin: 12px 0 0; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--c-pill, rgb(255 255 255 / .06)); color: var(--k-text); font: 500 14px var(--sans); cursor: pointer; } @keyframes ag-breathe { 0%, 100% { transform: scale(.92); box-shadow: 0 0 16px rgba(99, 102, 241, .4); } 50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(99, 102, 241, .75); } } @keyframes ag-spin { to { transform: rotate(360deg); } } @keyframes ag-in { from { opacity: 0; transform: translateY(-14px); } } @keyframes ag-step { from { opacity: 0; transform: translateX(-6px); } } @keyframes ag-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes ag-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } } @media (prefers-reduced-motion: reduce) { .ag-orb span, .ag-orb i, .ag-card.is-new, .ag-steps li, .ag-now::before, .ag-scan { animation: none !important; } } } @layer skin { .ag-prio { margin: 0; font: 600 12.5px var(--sans); color: var(--c-amber, #fbbf24); } } @layer skin { .ag-prog { display: grid; gap: 10px; margin: 14px 0; } .ag-prog-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 500 12.5px var(--sans); color: var(--k-text-2); } .ag-prog-row b { font-weight: 600; color: var(--k-text); font-variant-numeric: tabular-nums; } .ag-bar { block-size: 6px; border-radius: 999px; background: var(--c-pill, rgb(255 255 255 / .08)); overflow: hidden; } .ag-bar i { display: block; block-size: 100%; background: #6d7cff; transform-origin: left; transition: transform .6s ease; } } #top-picks [data-top-rows] > li.trow { & > button { transition: background .2s; } & > button:hover { background: var(--c-pill, #16291e); } &.ar-champ > button { box-shadow: inset 2px 0 var(--c-amber, #2de2b0); } & .trow-main::after { content: ""; display: block; inline-size: 64px; block-size: 3px; border-radius: 8px; background: linear-gradient(90deg, var(--c-up, #2de2b0) var(--v, 0%), var(--c-press, #1d3527) 0); } } .top-wait { display: grid; justify-items: center; gap: 4px; padding-block: 18px 10px; & engn-motion { inline-size: 96px; } & p { margin: 0; font: 600 11px/1.2 var(--mono, ui-monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--k-text-2); } } .pc-slot.pc-taken { position: relative; } .pc-slot.pc-taken .pc-head { animation: pc-land .8s calc(var(--pc-d, 0s) + 1s) cubic-bezier(.2, .8, .2, 1) backwards; } .pc-prev { position: absolute; inset-inline: 0; top: 0; text-align: center; font-weight: 700; pointer-events: none; animation: pc-leave .7s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes pc-land { from { opacity: 0; transform: translateY(36px) scale(.7); } } @keyframes pc-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-40px) scale(.8); } } .trow.rank-moved { animation: rank-glide .9s cubic-bezier(.2, .8, .2, 1) backwards; } .trow.rank-moved[data-move="up"] { animation-name: rank-glide, rank-flash; animation-duration: .9s, 1.6s; } @keyframes rank-glide { from { transform: translateY(calc(var(--d, 0) * 100%)); } } @keyframes rank-flash { 0%, 100% { opacity: 1; } 30% { opacity: .55; } } .trow.rank-new { animation: rank-new .7s .2s cubic-bezier(.2, .8, .2, 1) backwards; } @keyframes rank-new { from { opacity: 0; transform: translateX(28px); } } @media (prefers-reduced-motion: reduce) { .pc-slot.pc-taken .pc-head, .pc-prev, .trow.rank-moved, .trow.rank-new { animation: none; } .pc-prev { display: none; } } .top-narr-clear { font: inherit; font-size: 12px; padding: 2px 10px; margin-inline-end: 4px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; } @layer skin { .desk-empty { display: none; } @media (width >= 1100px) { :root { --desk-list: 420px; --desk-gap: 20px; --desk-pad: 24px; --desk-rail: 320px; } .page { max-inline-size: none; padding: 0 var(--desk-pad); } .topbar { margin: 0 calc(-1 * var(--desk-pad)); padding-inline: var(--desk-pad); } #app-shell[data-view] { padding-block-end: 40px; } html:not([data-desk-list="false"]) #app-shell[data-view] { inline-size: var(--desk-list); } html[data-desk-list="false"] #app-shell[data-view] { inline-size: min(100%, 960px); margin-inline: auto; } #app-shell > .tabs { margin: 0; padding: 0; } :is(.memes-list, .board-list, .rows) { margin-inline: 0; } #dock.dock { inset: 8px auto auto 50%; translate: -50% 0; inline-size: auto; block-size: 40px; gap: 2px; padding: 0 4px; border-radius: 12px; box-shadow: none; background: var(--k-surface); backdrop-filter: none; -webkit-backdrop-filter: none; & button { flex: none; display: flex; align-items: center; gap: 8px; block-size: 32px; padding: 0 12px; border-radius: 8px; } & button:hover { color: var(--k-text); } & button svg { inline-size: 18px; block-size: 18px; } & button span { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; font: 500 13px/1 var(--sans); } & button[aria-current] { background: var(--k-surface-2); } & button[aria-current] svg { fill: none; } & .dock-me { inline-size: 18px; block-size: 18px; } } .dock-search { inset: 8px auto auto calc(50% - 300px); inline-size: 40px; block-size: 40px; border-radius: 12px; box-shadow: none; background: var(--k-surface); backdrop-filter: none; -webkit-backdrop-filter: none; & svg { inline-size: 18px; block-size: 18px; } } @media (width < 1360px) { .topbar .agent-say { display: none; } .topbar .agent { padding: 6px; background: none; } } html.detail-open #dock { display: flex; } html.detail-open .dock-search { display: grid; } #dock.dock[hidden], .dock-search[hidden] { display: none; } dialog.detail, .desk-empty { position: fixed; inset: 56px var(--desk-pad) 0 calc(var(--desk-pad) + var(--desk-list) + var(--desk-gap)); inline-size: auto; max-inline-size: none; block-size: auto; margin: 0; border: 0; border-inline-start: 1px solid var(--k-surface); z-index: 20; } html:not([data-desk-list="false"]):not(.detail-open) .desk-empty { display: grid; place-items: center; color: var(--k-text-3); font-size: 14px; } dialog.detail { & .dt-bar { padding: 0 12px 0 24px; } & .dt-back { display: none; } & .dt-scroll { padding: 0 24px 108px; } & .dt-id { grid-template-columns: 56px minmax(0, 1fr) auto; } & .dt-chart { block-size: min(460px, 52vh); margin-inline: -24px 0; padding-inline-start: 24px; } & .dt-tabs { margin-inline: -24px 0; justify-content: start; } & .dt-cta { padding-inline: 24px; } } @media (width >= 1360px) { dialog.detail { & .dt-scroll { padding: 0 calc(var(--desk-rail) + 48px) 40px 24px; } & .dt-cta { inset: 72px 24px auto auto; inline-size: var(--desk-rail); display: grid; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--k-surface-2); background: var(--k-card); & :is(button, .buy-out) { block-size: 48px; font-size: 16px; } } } } dialog.detail[open] .dt-scroll { animation: desk-in .25s cubic-bezier(.2, .8, .2, 1); } #app-shell [data-open][aria-current="true"] { background: var(--k-surface); } #app-shell [data-open]:hover { background: var(--c-pill, rgb(255 255 255 / .03)); } } @keyframes desk-in { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { dialog.detail[open] .dt-scroll { animation: none; } } } .fx-burst { position: fixed; pointer-events: none; z-index: 60; } .trow.rank-new { animation-delay: .45s; } .trow.rank-wait { visibility: hidden; } [data-roll] { font-variant-numeric: tabular-nums; } .r-w { display: inline-flex; line-height: 1.15em; vertical-align: bottom; } .r-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rd { display: inline-block; block-size: 1.15em; overflow: hidden; } .rd-s { display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; } .rd-s i { display: block; block-size: 1.15em; font-style: normal; } .rc { display: inline-block; white-space: pre; } .pf-list li, .pf-top { position: relative; } .pf-list li::after, .pf-top::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent 30%, var(--c-up-soft, rgb(34 197 94 / .18))); } .pf-top::after { inset: -6px -16px; background: radial-gradient(60% 120% at 20% 50%, var(--c-up-soft, rgb(34 197 94 / .2)), transparent 70%); } .pf-list li[data-tick^="down"]::after { background: linear-gradient(90deg, transparent 30%, var(--c-down-soft, rgb(239 68 68 / .18))); } .pf-top[data-tick^="down"]::after { background: radial-gradient(60% 120% at 20% 50%, var(--c-down-soft, rgb(239 68 68 / .2)), transparent 70%); } :is(.pf-list li, .pf-top)[data-tick$="1"]::after { animation: tick-a .9s ease-out; } :is(.pf-list li, .pf-top)[data-tick$="2"]::after { animation: tick-b .9s ease-out; } .pf-list li[data-tick$="1"] [data-pnl], .pf-top[data-tick$="1"] .pf-total { animation: pop-a .45s cubic-bezier(.2, .8, .2, 1); } .pf-list li[data-tick$="2"] [data-pnl], .pf-top[data-tick$="2"] .pf-total { animation: pop-b .45s cubic-bezier(.2, .8, .2, 1); } .pf-total { transform-origin: left center; } .pf-num [data-pnl] { transform-origin: right center; } @keyframes tick-a { from { opacity: 1; } to { opacity: 0; } } @keyframes tick-b { from { opacity: 1; } to { opacity: 0; } } @keyframes pop-a { 40% { transform: scale(1.06); } } @keyframes pop-b { 40% { transform: scale(1.06); } } .pf-live { display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-end: 8px; border-radius: 50%; background: var(--c-up, #22c55e); vertical-align: middle; animation: live-dot 1.2s ease-in-out infinite; } @keyframes live-dot { 50% { opacity: .25; transform: scale(.7); } } .auto-pos { position: relative; } .auto-pos::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; background: linear-gradient(90deg, transparent 30%, var(--c-up-soft, rgb(34 197 94 / .18))); } .auto-pos[data-tick^="down"]::after { background: linear-gradient(90deg, transparent 30%, var(--c-down-soft, rgb(239 68 68 / .18))); } .auto-pos[data-tick$="1"]::after { animation: tick-a .9s ease-out; } .auto-pos[data-tick$="2"]::after { animation: tick-b .9s ease-out; } .auto-pos[data-tick$="1"] [data-pnl], .total-bal[data-tick$="1"] { animation: pop-a .45s cubic-bezier(.2, .8, .2, 1); } .auto-pos[data-tick$="2"] [data-pnl], .total-bal[data-tick$="2"] { animation: pop-b .45s cubic-bezier(.2, .8, .2, 1); } .auto-pos [data-pnl] { transform-origin: right center; } .pf-line :is(.dot, .halo) { transition: transform .5s cubic-bezier(.2, .8, .2, 1); } @media (prefers-reduced-motion: reduce) { .rd-s, .pf-line :is(.dot, .halo) { transition: none; } .pf-live, .pf-list li::after, .pf-top::after, .pf-total, .pf-num [data-pnl], .auto-pos::after, .auto-pos [data-pnl], .total-bal { animation: none !important; } } @layer skin { .agent-map { margin: 24px 0; padding: 20px; border: 1px solid var(--k-surface-2); border-radius: 20px; background: var(--k-card); color: var(--k-text); } .agent-map h3 { margin: 0 0 10px; font-size: 18px; } .agent-map p { line-height: 1.5; overflow-wrap: anywhere; } .agent-map .am-caption, .agent-map .am-freshness { color: var(--k-text-2); font-size: 13px; } .agent-map label { display: grid; gap: 8px; font-size: 14px; } .agent-map select { min-width: 0; width: 100%; padding: 12px; color: var(--k-text); background: var(--k-surface); border: 1px solid var(--k-surface-2); border-radius: 10px; font: inherit; font-size: 16px; } .agent-map .am-usage { font-size: 13px; color: var(--k-text-2); } .agent-map .am-stage { position: relative; margin: 24px 0; } .agent-map .am-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; } .agent-map .am-grid button { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 104px; padding: 12px 6px; border: 1px solid var(--k-surface-2); border-radius: 14px; background: var(--k-card); color: var(--k-text); font: inherit; font-size: 14px; cursor: pointer; overflow-wrap: anywhere; } .agent-map .am-grid button[aria-pressed="true"] { border-color: var(--k-mint); background: var(--k-tint-up); } .agent-map button:focus-visible, .agent-map select:focus-visible { outline: 2px solid var(--k-mint); outline-offset: 4px; } .agent-map small { color: var(--k-text-2); font-size: 12px; line-height: 1.4; } .agent-map .am-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--k-mint); box-shadow: 0 0 0 5px var(--k-tint-up); flex-shrink: 0; } .agent-map [data-connected="false"] .am-dot { border-radius: 2px; background: var(--k-text-3); box-shadow: none; } .agent-map .am-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .agent-map .am-links path { stroke: var(--k-text-4); stroke-width: 1; fill: none; } .agent-map .am-links .am-related { stroke: var(--k-mint); stroke-width: 2; } .agent-map .am-detail { border-top: 1px solid var(--k-surface-2); padding-top: 18px; } .agent-map .am-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .agent-map h4 { margin: 0; font-size: 13px; color: var(--k-text-2); } .agent-map .am-fields p { margin: 6px 0; font-size: 14px; } .agent-map .am-events { padding-left: 20px; } .agent-map .am-events li { margin-block: 14px; } .agent-map time { color: var(--k-text-2); font-size: 12px; } .agent-map[data-stale="true"] .am-freshness { color: var(--k-amber); } .agent-map .am-live { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--k-surface-2); border-radius: 12px; font-size: 13px; color: var(--k-text-2); } .agent-map .am-live[data-on="true"] { color: var(--k-text); border-color: var(--k-mint); } .agent-map .am-live:not([data-on="true"]) .am-dot { background: var(--k-text-3); box-shadow: none; } .agent-map .am-grid button { position: relative; will-change: transform; } .agent-map .am-grid button { padding-bottom: 36px; } .agent-map .am-tokens { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .agent-map .am-chip { position: absolute; top: 0; left: 0; max-width: 64px; padding: 2px 8px; border: 1px solid var(--k-mint); border-radius: 999px; background: var(--k-surface); color: var(--k-text); font: inherit; font-size: 11px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; pointer-events: auto; transition: transform .52s cubic-bezier(.2,.8,.2,1), opacity .3s ease; will-change: transform, opacity; } .agent-map .am-chip[data-selected="true"] { background: var(--k-mint); color: var(--k-card); } @media (prefers-reduced-motion: reduce) { .agent-map .am-chip { transition: none; } } .agent-map .aj { margin: 0 0 18px; } .agent-map button.am-live { width: 100%; text-align: left; background: transparent; font: inherit; cursor: pointer; } .agent-map .am-recent { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .agent-map .am-recent .am-chip { position: static; max-width: none; padding: 6px 12px; font-size: 13px; transition: none; } .agent-map .aj-tally { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .agent-map .aj-controls { display: flex; flex-wrap: wrap; gap: 8px; } .agent-map .aj-speed { padding: 10px; color: var(--k-text); background: var(--k-surface); border: 1px solid var(--k-surface-2); border-radius: 10px; font: inherit; font-size: 14px; } .agent-map .aj-clock { position: fixed; left: 50%; bottom: calc(112px + env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%); max-width: calc(100vw - 32px); margin: 0; padding: 8px 14px; border: 1px solid var(--k-mint); border-radius: 999px; background: var(--k-card); color: var(--k-text); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agent-map .aj-clock:empty { display: none; } .agent-map .aj-form { display: flex; gap: 8px; } .agent-map .aj-form input { flex: 1; min-width: 0; padding: 12px; color: var(--k-text); background: var(--k-surface); border: 1px solid var(--k-surface-2); border-radius: 10px; font: inherit; font-size: 16px; } .agent-map .aj-form button, .agent-map .aj-choices button, .agent-map .aj-replay { padding: 10px 14px; border: 1px solid var(--k-mint); border-radius: 10px; background: transparent; color: var(--k-text); font: inherit; font-size: 14px; cursor: pointer; } .agent-map .aj-form button { background: var(--k-mint); color: var(--k-card); font-weight: 600; } .agent-map .aj-status, .agent-map .aj-limits { font-size: 13px; color: var(--k-text-2); } .agent-map .aj-choices { display: flex; flex-wrap: wrap; gap: 8px; } .agent-map .aj-verify { font-size: 13px; margin: 0; } .agent-map .aj-verify[data-ok="true"] { color: var(--k-mint); } .agent-map .aj-verify[data-ok="false"] { color: var(--k-amber); } .agent-map .aj-rail { position: relative; list-style: none; margin: 12px 0; padding: 0 0 0 22px; } .agent-map .aj-rail::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--k-surface-2); } .agent-map .aj-step { position: relative; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--k-surface-2); border-radius: 12px; background: var(--k-card); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease; } .agent-map .aj-step::before { content: ""; position: absolute; left: -21px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--k-text-3); } .agent-map .aj-step.aj-in { transform: translateY(12px); opacity: 0; } .agent-map .aj-step.aj-now { border-color: var(--k-mint); } .agent-map .aj-step.aj-now::before { background: var(--k-mint); animation: am-breathe 1.6s ease-in-out infinite; } .agent-map .aj-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; } .agent-map .aj-pill { padding: 2px 8px; border-radius: 999px; background: var(--k-tint-up); color: var(--k-mint); font-size: 12px; } .agent-map .aj-src { margin: 6px 0 0; font-size: 12px; color: var(--k-text-2); } .agent-map .aj-text { margin: 4px 0; font-size: 14px; } .agent-map .aj-proof summary { font-size: 12px; color: var(--k-text-2); font-family: ui-monospace, monospace; cursor: pointer; } .agent-map .aj-proof pre { margin: 6px 0 0; padding: 8px; max-height: 220px; overflow: auto; font-size: 11px; background: var(--k-surface); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { .agent-map .aj-step { transition: none; } .agent-map .aj-step.aj-now::before { animation: none; } } .agent-map .am-ring { position: absolute; inset: 0; border: 2px solid var(--k-mint); border-radius: inherit; pointer-events: none; } .agent-map .am-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .agent-map .am-spark { position: absolute; top: -5px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--k-mint); box-shadow: 0 0 12px var(--k-mint); opacity: 0; will-change: transform, opacity; } .agent-map [data-live="true"] { border-color: var(--k-mint); } .agent-map [data-live="true"] .am-dot, .agent-map .am-live[data-on="true"] .am-dot { animation: am-breathe 1.6s ease-in-out infinite; } @keyframes am-breathe { 50% { transform: scale(1.35); opacity: .55; } } @media (prefers-reduced-motion: reduce) { .agent-map .am-dot { animation: none !important; } } @media (max-width: 540px) { .agent-map { padding: 14px; } .agent-map .am-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agent-map .am-fields { grid-template-columns: 1fr; } } } .quant-panel { margin: 24px 0; padding: 24px; border: 1px solid var(--c-press, #344454); border-radius: 18px; } .quant-panel header { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; } .quant-counts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; } .quant-counts p { padding:12px; background: rgba(100,150,180,.08); border-radius: 10px; } .quant-panel select { max-width:100%; padding:10px; } .quant-panel pre { max-height:360px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; } .quant-panel [data-q-detail] { overflow-wrap:anywhere; } .quant-panel details { margin:12px 0; } .pf-list li[data-open] { cursor: pointer; } .sbt { display: grid; gap: 10px; } .sbt-total { margin: 0; display: flex; align-items: baseline; gap: 8px; & b { font-size: 28px; font-weight: 700; color: var(--k-text); } } .sbt-curve { inline-size: 100%; block-size: 90px; & path { fill: none; stroke: var(--k-mint); stroke-width: 1.6; vector-effect: non-scaling-stroke; } } .sbt-curve[data-sign="down"] path { stroke: var(--k-red); } .sbt-list { display: grid; gap: 6px; } .sbt-row { inline-size: 100%; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; } :is(.sig-stats, .trk-hero) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 6px; & div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--c-pill, rgb(255 255 255 / .04)); } & dt { font-size: 12px; color: var(--k-text-3); } & dd { margin: 0; font: 600 22px/1.15 var(--sans); color: var(--k-text); font-variant-numeric: tabular-nums; } & small { font-size: 11.5px; color: var(--k-text-3); } & [data-v="in"] dd, & dd[data-sign="up"] { color: var(--c-up, #34d399); } & dd[data-sign="down"] { color: var(--c-down, #f87171); } } .sig-pill { display: inline-block; padding: 2px 8px; border-radius: 99px; font: 700 11px var(--sans); letter-spacing: .06em; font-style: normal; color: var(--k-text-2); background: var(--c-pill, rgb(255 255 255 / .06)); &[data-side="buy"] { color: var(--c-up, #34d399); background: var(--c-up-soft, rgb(52 211 153 / .12)); } &[data-side="sell"] { color: var(--c-down, #f87171); background: var(--c-down-soft, rgb(248 113 113 / .12)); } &[data-side="hold"] { color: var(--c-up, #34d399); background: none; box-shadow: inset 0 0 0 1px rgb(52 211 153 / .35); } &[data-fresh] { animation: sig-pulse 1.6s ease-in-out 3; } } @keyframes sig-pulse { 50% { opacity: .45; } } .trk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; & .top-info { flex: 1 1 240px; margin: 0; } & .seg button:disabled { opacity: .35; cursor: default; } } .trk-cmp { inline-size: 100%; margin: 8px 0 0; border-collapse: collapse; font: 400 13px var(--sans); font-variant-numeric: tabular-nums; & :is(th, td) { padding: 7px 4px; text-align: end; border-block-end: 1px solid var(--c-line, rgb(255 255 255 / .06)); } & thead th { font-size: 11.5px; font-weight: 600; color: var(--k-text-3); } & tbody th { text-align: start; font-weight: 600; color: var(--k-text-2); } & td[data-sign="up"] { color: var(--c-up, #34d399); } & td[data-sign="down"] { color: var(--c-down, #f87171); } } @media (prefers-reduced-motion: reduce) { .sig-pill[data-fresh] { animation: none; } } @layer skin { .ds-deep { margin: 10px 0; & h5 { display: flex; justify-content: space-between; margin: 0 0 6px; font: 600 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--k-text-2); & b { text-transform: none; color: var(--k-text); } } } .ds-deep [data-status] { --dd: var(--k-text-3); } .ds-deep [data-status="good"] { --dd: var(--k-green); } .ds-deep [data-status="warn"] { --dd: var(--c-amber, #fbbf24); } .ds-deep [data-status="bad"] { --dd: var(--k-red); } .dd-effect { display: grid; gap: 3px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; border-inline-start: 3px solid var(--dd); background: var(--k-surface-2); & b { font-size: 16px; color: var(--dd); } & span { font-size: 14px; line-height: 1.4; } & small { color: var(--k-text-3); font-size: 12.5px; } } .dd-ai { margin: 0 0 10px; font-size: 14px; line-height: 1.45; & > span { font: 600 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--k-text-3); } & p { margin: 3px 0 0; } & .dd-warn { color: var(--c-amber, #fbbf24); } } .dd-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .dd-area { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start; & > i { inline-size: 8px; block-size: 8px; margin-block-start: 6px; border-radius: 50%; background: var(--dd); } & p { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 14px; line-height: 1.4; } & b { font-weight: 600; } & span, & small { grid-column: 1 / -1; } & small { color: var(--k-text-3); font-size: 12px; } } .dd-link { border: 0; padding: 0; background: none; color: var(--k-mint); font: 600 12.5px var(--sans); cursor: pointer; } .dd-counts { margin: 8px 0 0; font-size: 12.5px; } .dd-checked { margin-block-start: 8px; font-size: 13px; color: var(--k-text-2); & summary { cursor: pointer; font-weight: 600; } & ul { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 3px; } } .ds-recheck { display: block; inline-size: 100%; block-size: 40px; margin-block-start: 8px; border: 1px solid var(--k-surface-2); border-radius: 10px; background: none; color: var(--k-text); font: 600 14px var(--sans); cursor: pointer; &:active { scale: .98; } &:disabled { opacity: .5; cursor: not-allowed; } } .ds-recheck[data-busy] { block-size: auto; padding: 10px 12px; text-align: start; background: #000; color: var(--c-amber, #ffb000); border-color: var(--c-amber, #ffb000); cursor: progress; &:disabled { opacity: 1; cursor: progress; } } .ds-term { display: grid; gap: 6px; font: 400 11.5px/1.35 var(--mono, ui-monospace, monospace); } .ds-term-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; & b { font-weight: 600; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & b::after { content: "_"; animation: ds-blink 1s steps(1, end) infinite; } & em { flex: none; font-style: normal; opacity: .7; font-variant-numeric: tabular-nums; } } .ds-term-log { display: grid; gap: 2px; min-block-size: calc(4 * 1.35em + 6px); align-content: end; } .ds-ln { display: grid; grid-template-columns: 7.5ch minmax(0, 1fr) auto; gap: 8px; opacity: .78; & i { font-style: normal; opacity: .65; text-transform: uppercase; } & span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & em { font-style: normal; font-variant-numeric: tabular-nums; } &[data-ok="false"] em { color: var(--c-down, #f87171); } &:last-child { opacity: 1; } &[data-new] { animation: ds-ln-in .24s cubic-bezier(.2,.7,.2,1) both; } } @keyframes ds-ln-in { from { opacity: 0; transform: translateY(5px); } } @keyframes ds-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ds-ln[data-new], .ds-term-head b::after { animation: none !important; } } } @layer skin { [data-fx="strike"] { position: relative; } .fx-strike { position: absolute; block-size: 1.5px; margin-block-start: -.75px; background: currentColor; transform-origin: left; transform: scaleX(0); pointer-events: none; } .fx-canvas { position: fixed; inset: 0; inline-size: 100vw; block-size: 100vh; pointer-events: none; z-index: 2147483000; } } .ask-fab { position: fixed; z-index: 42; inset: auto 0 calc(30dvh + env(safe-area-inset-bottom)) auto; inline-size: 30px; block-size: 44px; padding: 0 0 0 4px; border-radius: 12px 0 0 12px; display: grid; place-items: center; border: 1px solid var(--c-line, rgb(255 255 255 / .08)); border-inline-end: 0; color: var(--k-text-2); cursor: pointer; background: rgb(44 46 46 / .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: .7; transition: opacity .2s ease, transform .2s ease; & svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } &:hover, &[aria-expanded="true"] { opacity: 1; color: var(--k-text); } &.is-listening { color: var(--k-hot); opacity: 1; } &.has-new::after { content: ""; position: absolute; inset: 6px auto auto 6px; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--k-hot); } } html.detail-open .ask-fab, :root:has(#app-shell[data-view="entry"]) .ask-fab { display: none; } .ask-sheet { position: fixed; z-index: 41; inset: auto 8px calc(78px + env(safe-area-inset-bottom)); max-block-size: 46dvh; display: flex; flex-direction: column; border-radius: 20px; background: var(--k-card); border: 1px solid var(--c-line, rgb(255 255 255 / .08)); box-shadow: 0 16px 48px rgb(0 0 0 / .6); animation: ask-in .22s ease-out; &[hidden] { display: none; } } @keyframes ask-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .ask-head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px 16px; color: var(--k-text); & strong { flex: 1; font-size: 15px; font-weight: 600; } } .ask-chip { border: 1px solid var(--k-surface-2); background: none; color: var(--k-text-2); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .ask-x { border: 0; background: none; color: var(--k-text-2); font-size: 24px; line-height: 1; padding: 0 6px; cursor: pointer; } .ask-log { flex: 1; overflow-y: auto; margin: 0; padding: 4px 12px; list-style: none; display: flex; flex-direction: column; gap: 8px; &:empty { display: none; } } .ask-msg { max-inline-size: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .ask-me { align-self: flex-end; background: var(--k-surface-2); color: var(--k-text); } .ask-bot { align-self: flex-start; background: var(--k-surface); color: var(--k-text); } .ask-err { align-self: flex-start; color: var(--k-red); background: none; padding-inline: 0; } .ask-dots { display: inline-flex; gap: 4px; & i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--k-text-2); animation: ask-dot 1s infinite ease-in-out; } & i:nth-child(2) { animation-delay: .15s; } & i:nth-child(3) { animation-delay: .3s; } } @keyframes ask-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } .ask-bar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 10px; margin: 0; & textarea { flex: 1; resize: none; box-sizing: border-box; block-size: 40px; min-block-size: 40px; max-block-size: 140px; padding: 10px 12px; border-radius: 20px; border: 1px solid var(--k-surface-2); background: var(--k-bg); color: var(--k-text); font: inherit; font-size: 16px; line-height: 1.3; } & button { flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer; color: var(--k-text); background: var(--k-surface-2); } & button[hidden] { display: none; } & button svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } & .ask-send { background: var(--k-text); color: var(--k-bg); } & .ask-send:disabled { opacity: .35; cursor: default; } } .ask-sheet.is-listening .ask-mic { background: var(--k-hot); animation: ask-pulse 1.2s infinite ease-in-out; } @keyframes ask-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @media (min-width: 1100px) { .ask-sheet { inset: auto 40px 24px auto; inline-size: 400px; max-block-size: 60dvh; } html.detail-open .ask-fab { display: grid; } } @media (prefers-reduced-motion: reduce) { .ask-sheet, .ask-dots i, .ask-sheet.is-listening .ask-mic { animation: none; } } .ask-chip[aria-pressed="true"] { color: var(--k-text); border-color: var(--k-text-3); background: var(--k-surface-2); } .ask-sheet.is-speaking .ask-mic { background: var(--k-text); color: var(--k-bg); } :root[data-trading="off"] { --dock-w: min(280px, calc(100vw - 96px)); } :root[data-trading="off"] [data-trading-only] { display: none !important; } .top-early { margin: 18px 0 calc(92px + env(safe-area-inset-bottom)); } .top-early > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 10px 2px; font-weight: 600; letter-spacing: .02em; } .top-early > summary::-webkit-details-marker { display: none; } .top-early > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; align-self: center; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .6; transition: transform .2s ease; } .top-early[open] > summary::after { transform: rotate(-135deg); } .top-early > summary small { font-weight: 400; opacity: .6; } @media (prefers-reduced-motion: reduce) { .top-early > summary::after { transition: none; } } .track-fold { margin-top: 8px; } .track-fold > .track { margin-top: 4px; } .early-view { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } .early-view > header { display: flex; align-items: baseline; gap: 8px; margin: 4px 2px 6px; } .early-view > header h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; } .early-view > header span { font-size: 12px; opacity: .6; } .early-lead, .early-empty { margin: 0 2px 12px; font-size: 12.5px; line-height: 1.45; opacity: .7; } .arenas { display: grid; gap: 18px; } .arena .ar-head { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 4px; padding-block-end: 6px; border-block-end: 1px dashed var(--c-line, var(--k-line)); } .arena .ar-head h4 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text, inherit); } .arena .ar-heat { font-size: 10px; letter-spacing: 1px; color: var(--c-amber, #2de2b0); } .arena .ar-count { margin-inline-start: auto; font-size: 11px; color: var(--c-text-3, var(--k-text-3)); font-variant-numeric: tabular-nums; } .arena .ar-champ .trow-main b { color: var(--c-amber, #2de2b0); } .ar-bench > summary { cursor: pointer; list-style: none; padding: 8px 2px; font-size: 11.5px; letter-spacing: .04em; color: var(--c-text-3, var(--k-text-3)); } .ar-bench > summary::-webkit-details-marker { display: none; } .ar-bench > summary::before { content: "+ "; } .ar-bench[open] > summary::before { content: "− "; } .ar-bench > summary:focus-visible { outline: 1px solid var(--c-amber, #2de2b0); outline-offset: 2px; } .mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 44px; gap: 4px; grid-auto-flow: dense; } .mz { display: flex; flex-direction: column; justify-content: space-between; min-inline-size: 0; overflow: hidden; padding: 7px 8px; text-align: start; font: inherit; cursor: pointer; color: var(--c-text, inherit); background: var(--c-card, transparent); border: 1px solid var(--c-line, var(--k-line)); border-radius: var(--mz-r, 2px); transition: border-color .15s, transform .15s; } .mz:active { transform: scale(.98); } .mz b { font-size: var(--mz-b, 11px); font-weight: 500; letter-spacing: var(--mz-ls, .05em); text-transform: var(--mz-case, uppercase); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mz .mz-n { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; } .mz .mz-n em { font-style: normal; font-size: 10px; letter-spacing: .04em; color: var(--c-text-3, var(--k-text-3)); } .mz-intro { margin: 0 2px 8px; font-size: 12px; line-height: 1.4; color: var(--c-text-2, var(--k-text-2)); } .mz small { font-size: 10px; color: var(--c-text-3, var(--k-text-3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .mz small .up { color: var(--c-up, #2de2b0); } .mz small .down { color: var(--c-down, #ff6b5a); } .mz.g1 { background: var(--c-up-soft, rgb(127 209 127 / .16)); } .mz.g2 { background: rgb(127 209 127 / .07); } .mz.r1 { background: var(--c-down-soft, rgb(255 107 90 / .14)); } .mz.r2 { background: rgb(255 107 90 / .07); } .mz.mz-open { border-color: var(--c-ink, var(--c-amber, #2de2b0)); } .mz.mz-more b { color: var(--c-text-2, inherit); } .mz:focus-visible, .ar-back:focus-visible { outline: 1px solid var(--c-amber, #2de2b0); outline-offset: 2px; } .mz-legend { display: flex; justify-content: space-between; margin: 6px 2px 0; font-size: 10.5px; color: var(--c-text-3, var(--k-text-3)); } .mz-legend i { font-style: normal; } .mz-legend .up { color: var(--c-up, #2de2b0); } .mz-legend .down { color: var(--c-down, #ff6b5a); } .ar-back { justify-self: start; padding: 6px 2px; font: inherit; font-size: 12px; letter-spacing: .04em; cursor: pointer; background: none; border: 0; color: var(--c-amber, #2de2b0); } .ar-open { margin-block-start: 14px; scroll-margin-block-start: 12px; animation: ar-open-in .22s ease-out both; } @keyframes ar-open-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mz { transition: none; } .mz:active { transform: none; } .ar-open { animation: none; } } .bg-hint { position: fixed; z-index: 60; inset: calc(env(safe-area-inset-top) + 10px) 12px auto; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.35; color: var(--k-text-2); border: 1px solid rgb(255 255 255 / .08); background: rgb(44 46 46 / .85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: bg-hint-in .3s cubic-bezier(.2, .8, .2, 1); } .bg-hint b { color: #fff; font-weight: 600; } .bg-hint button { flex: none; border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; } @keyframes bg-hint-in { from { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .bg-hint { animation: none; } } @media (max-width: 1099px) { .mosaic { --mz-r: 16px; --mz-r-big: 20px; --mz-case: none; --mz-b: 14px; --mz-ls: 0; } .mosaic { gap: 8px; grid-auto-rows: 48px; } .mz { border-color: transparent; } .mz { padding: 10px 12px; } .mz.mz-open { border-color: var(--c-ink, currentColor); } .mz .mz-n { font-size: 26px; font-weight: 500; } } .tb-top3 { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: center; min-inline-size: 0; } .tb-top3[hidden] { display: none; } .page:has(#app-shell[hidden]) .tb-top3 { display: none; } .tb-top3 .t3 { display: flex; align-items: center; gap: 8px; min-inline-size: 0; padding: 5px 12px 5px 6px; border-radius: 10px; border: 1px solid var(--engn-line, rgb(255 255 255 / .12)); background: rgb(255 255 255 / .03); color: inherit; font: inherit; cursor: pointer; } .tb-top3 .t3:hover { background: rgb(45 226 176 / .08); border-color: rgb(45 226 176 / .35); } .tb-top3 .t3:first-child { order: 2; border-color: rgb(45 226 176 / .45); } .tb-top3 .t3:nth-child(2) { order: 1; } .tb-top3 .t3:nth-child(3) { order: 3; } .tb-top3 .t3-place { font: 600 11px var(--mono, monospace); font-style: normal; color: #2de2b0; } .tb-top3 .tile { inline-size: 26px; block-size: 26px; flex: none; border-radius: 7px; } .tb-top3 .t3-main { display: grid; min-inline-size: 0; text-align: start; line-height: 1.2; } .tb-top3 .t3-main b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-top3 .t3-main small { font-size: 10px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (width < 1100px) { .topbar:has(.tb-top3:not([hidden])) { flex-wrap: wrap; block-size: auto; height: auto; row-gap: 8px; } .tb-top3 { order: 10; flex: 1 0 100%; gap: 6px; } .tb-top3 .t3 { flex: 1 1 0; padding: 4px 6px 4px 4px; gap: 6px; } .tb-top3 .tile { inline-size: 22px; block-size: 22px; } .tb-top3 .t3-main b { font-size: 12px; } .tb-top3 .t3-main small { font-size: 9px; } } .ar-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; } .ar-grid .arena { padding: 12px; border: 1px solid var(--engn-line, rgb(255 255 255 / .1)); border-radius: 12px; background: rgb(255 255 255 / .02); } @media (width >= 1100px) { html[data-desk-list="false"] dialog.detail { inset: 24px 28px; inline-size: auto; max-inline-size: 1100px; margin-inline: auto; block-size: auto; border: 1px solid var(--engn-line, #223b2b); border-radius: 16px; } html[data-desk-list="false"] dialog.detail::backdrop { background: rgb(3 8 5 / .72); backdrop-filter: blur(3px); } html[data-desk-list="false"] dialog.detail .dt-back { display: grid; } } :root[data-trading="off"] { --dock-w: min(400px, calc(100vw - 92px)); } @media (width >= 1100px) { html body #dock-search.dock-search { inset-block-start: 540px; } } .memes-list:empty { display: none; } .ar-grid .arena:not(.ar-all) [data-top-rows] > li:nth-child(n + 4) { display: none; } .ar-more { display: block; inline-size: 100%; margin-block-start: 6px; padding: 9px; border-radius: 10px; font: inherit; font-size: 13px; border: 1px solid var(--c-line, rgb(127 127 127 / .25)); background: none; color: inherit; cursor: pointer; } .gem-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block: 6px 10px; } .gem-sort button { padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--c-line, rgb(127 127 127 / .25)); background: none; color: inherit; } .gem-sort button[aria-pressed="true"] { background: var(--c-sage, var(--engn-mint, #2de2b0)); color: var(--c-on-sage, #07110c); border-color: transparent; font-weight: 600; } :root[data-theme="dark"] { --c-sage: #c9d4c0; --c-on-sage: #152019; } html:root[data-theme="dark"] { --c-sage: #c9d4c0; --c-on-sage: #152019; } html:root[data-theme="dark"] :is(#app-shell, body) :is(.btn-primary, .pf-save, .dt-cta > a, .dt-cta > button, .us-go, .ag-go, .am-go, form button[type="submit"], .tabs button[aria-current], .seg button:is([aria-pressed="true"], [aria-selected="true"], [aria-current]), .dt-tabs button[aria-current], .dt-chips button:is([aria-current], [aria-pressed="true"]), .pf-seg button[aria-pressed="true"], .pf-wallet button:is([aria-pressed="true"], [aria-current], [aria-selected="true"]), .pf-range button:is([aria-pressed="true"], [aria-current], [aria-selected="true"]), .auto-modes button[aria-checked="true"], .gem-sort button[aria-pressed="true"], .agent-map .am-chip[data-selected="true"], .ar-tile[aria-pressed="true"]) { background: var(--c-sage) !important; color: var(--c-on-sage) !important; border-color: transparent !important; } @media (min-width: 1100px) { .pf-theme { display: none !important; } } .trow-num .cap-tag { font: 600 9px/1 var(--sans, inherit); font-style: normal; letter-spacing: .04em; opacity: .55; margin-right: 3px; vertical-align: 2px; } #dock.dock button[hidden] { display: none !important; } :root[data-trading="off"]:has(#dock [data-go="quality"]:not([hidden])) { --dock-w: min(440px, calc(100vw - 92px)); } #dock:has([data-go="quality"]:not([hidden])) button span { font-size: 10px !important; } @media (width >= 1100px) { html:has(#dock [data-go="quality"]:not([hidden])) body #dock-search.dock-search { inset-block-start: 600px; } } .quality-view > header[data-quality-accepted-head] { margin-top: 18px; } .quality-view .trow { display: grid; } .q-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 10px 10px; flex-wrap: wrap; } .q-note { flex-basis: 100%; font-size: 11.5px; line-height: 1.45; opacity: .7; } .q-btn { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--c-line, var(--k-line)); background: none; color: var(--c-text, var(--k-text)); font: 600 12px/1 var(--sans); cursor: pointer; } .q-btn[data-q-act="accept"] { background: var(--c-text, var(--k-text)); color: var(--c-bg, #000); border-color: transparent; } .q-btn:disabled { opacity: .5; cursor: progress; } .quality-fold { margin-top: 14px; } .cs-entry { display: flex; align-items: center; gap: 8px; inline-size: 100%; margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--c-line, var(--k-line)); border-radius: 14px; background: none; color: var(--c-text, var(--k-text)); font: 600 13px/1.2 var(--sans); cursor: pointer; text-align: left; & span { flex: 1; } & b { font: 600 11px/1 var(--mono, ui-monospace); opacity: .8; } & i { font-style: normal; opacity: .5; } &[data-level="high"] b { color: var(--c-down, #ef4444); } &[data-level="mid"] b { color: var(--k-amber); } } .cs-sample { margin: 0 2px 12px; padding: 8px 10px; border-radius: 10px; font-size: 12px; background: rgb(250 204 21 / .1); color: var(--k-amber); } .cs-card { margin-bottom: 18px; animation: cs-in .35s ease-out both; & h4 { display: flex; justify-content: space-between; margin: 16px 2px 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: .75; & span { font-family: var(--mono, ui-monospace); } } } .cs-head { display: flex; align-items: center; gap: 12px; margin: 0 2px; & > p:first-child { flex: 1; margin: 0; display: grid; gap: 2px; & b { font-size: 16px; } & small { font-size: 11.5px; opacity: .6; } } } .cs-risk { position: relative; margin: 0; display: grid; justify-items: end; gap: 2px; min-inline-size: 64px; & b { font: 700 22px/1 var(--mono, ui-monospace); } & small { font-size: 10.5px; opacity: .6; text-transform: uppercase; letter-spacing: .08em; } & i { inline-size: 64px; block-size: 3px; border-radius: 3px; background: currentColor; transform-origin: left; transform: scaleX(var(--r, 0)); animation: cs-grow .6s ease-out both; } &[data-level="high"] { color: var(--c-down, #ef4444); } &[data-level="mid"] { color: var(--k-amber); } &[data-level="low"] { color: var(--k-mint); } } .cs-why { margin: 10px 2px 0; padding: 0 0 0 16px; font-size: 12px; line-height: 1.5; opacity: .75; } .cs-bar { display: flex; block-size: 10px; border-radius: 6px; overflow: hidden; background: var(--c-line, rgb(255 255 255 / .08)); margin: 0 2px 8px; & .cs-seg { inline-size: var(--w); transform-origin: left; animation: cs-grow .6s ease-out both; } } :is(.cs-seg, .cs-dot) { background: var(--c-down, #ef4444); &[data-i="1"] { background: var(--k-amber); } &[data-i="2"] { background: #60a5fa; } &[data-i="3"] { background: #c084fc; } &[data-i="4"] { background: #2dd4bf; } &[data-i="5"] { background: #f472b6; } &[data-i="top"] { background: var(--c-text, #888); opacity: .45; } } .cs-map { margin: 12px 0 4px; border-radius: 16px; background: var(--c-line, rgb(127 127 127 / .08)); overflow: hidden; } .cs-map-canvas { display: block; inline-size: 100%; cursor: pointer; touch-action: manipulation; } .cs-pick { margin: 0 2px 6px; min-block-size: 1.4em; font: 500 11.5px/1.4 var(--sans); opacity: .65; } .cs-time li { cursor: pointer; border-radius: 10px; transition: opacity .2s; } .cs-time:has(li[aria-current]) li:not([aria-current]) { opacity: .45; } .cs-dot { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; } .cs-cluster { border-top: 1px solid var(--c-line, var(--k-line)); padding: 0 2px; & summary { display: flex; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 13px; & span { flex: 1; font-size: 12px; opacity: .65; } & em { font: 600 12px/1 var(--mono, ui-monospace); font-style: normal; } & em[data-level="high"] { color: var(--c-down, #ef4444); } & em[data-level="mid"] { color: var(--k-amber); } } & summary::-webkit-details-marker { display: none; } } .cs-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; & span { padding: 3px 8px; border-radius: 99px; font-size: 11px; border: 1px solid var(--c-line, var(--k-line)); opacity: .8; } } .cs-wallets { list-style: none; margin: 0 0 10px; padding: 0; font-size: 12px; & li { display: flex; justify-content: space-between; padding: 3px 0; } & code { opacity: .8; } & span { font-family: var(--mono, ui-monospace); } } .cs-time { list-style: none; margin: 0; padding: 0 2px; position: relative; &::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 5.5px; inline-size: 1px; background: var(--c-line, var(--k-line)); } & li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; animation: cs-in .35s ease-out both; } & li:nth-child(2) { animation-delay: .05s; } & li:nth-child(n+3) { animation-delay: .1s; } & .cs-dot { margin-top: 5px; box-shadow: 0 0 0 3px var(--c-bg, #000); } & p { flex: 1; margin: 0; display: grid; gap: 2px; & b { font-size: 13px; font-weight: 600; } & small { font-size: 11.5px; opacity: .65; } } & time { font-size: 11.5px; opacity: .55; white-space: nowrap; } } @keyframes cs-in { from { opacity: 0; transform: translateY(6px); } } @keyframes cs-grow { from { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { :is(.cs-card, .cs-time li, .cs-risk i, .cs-seg) { animation: none; } } .cs-upload { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 2px 18px; padding: 12px 14px; cursor: pointer; border: 1px dashed var(--c-line, var(--k-line)); border-radius: 14px; font-size: 13px; font-weight: 600; & small { font-size: 11.5px; font-weight: 400; opacity: .65; } &:active { opacity: .7; } } .gem-sort-label { font-size: 12px; opacity: .75; margin-right: 4px; } @media (min-width: 1024px) { [data-go="pearl"] { display: none !important; } }