/* kontract.fun — one stylesheet for every page. * Palette: cool near-black with a faint teal cast, hairline borders, one lime accent used sparingly, * violet for Solana-flavoured highlights. Icons are SVG masks, so they take the text colour. */ :root{ /* BUMP (UX/concepts/10-bump.html): warm-dark ground, one warm accent that belongs to no chain, periwinkle second. The old token names are kept and re-pointed, so every page restyles without renaming a class. */ --bg:#0f0e14; --bg2:#131219; --s1:#1a1922; --s2:#23212e; --s3:#2f2c3d; --sunk:#0b0a0f; --panel:#1e1c27; --panel2:#272433; --field:#0f0e14; --line:#2c2937; --line2:#3b3749; --line3:#4a4560; --ink:#f2f0f7; --ink2:#b6b1c6; --dim:#8681a0; --faint:#635e79; /* PAPER (UX/accent). No house hue at all. Every coloured hue on this product already means something -- five chains, up, down, three medals, three status levels -- so the house colour is the one thing that does NOT need a hue: it is the brightest thing on a dark page, and it clashes with nothing by construction. Emphasis is carried by FILL and CONTRAST, never by colour: a paper fill with dark ink for anything primary, a white lift for anything "on", full-strength ink against dimmer ink for anything highlighted. The --amber names are kept and re-pointed. */ --accent:#f4f3f8; --accent-hi:#ffffff; --accent-lo:#d9d7e4; --accent-ink:#0b0a10; --accent-soft:rgba(244,243,248,.09); --accent-line:rgba(244,243,248,.3); --accent-glow:rgba(244,243,248,.24); --amber:var(--accent); --amber2:var(--accent-hi); --amber-soft:var(--accent-soft); /* Ranks are medals, everywhere anything is placed 1-2-3. */ --gold:#f6c95c; --silver:#b8c3d6; --bronze:#d0864e; /* the second colour moves out of the way: periwinkle is the house now, so "peri"/"violet" (verified check, thesis pills, GPU chips) become a true violet. */ --peri:#a78bfa; --peri-soft:rgba(167,139,250,.14); --violet:#a78bfa; --violet-soft:rgba(167,139,250,.14); --violet-line:rgba(167,139,250,.45); --up:#32d583; --down:#f97066; --warn:#e8c46b; --sol:#9945ff; --rh:#c2f24a; --bnb:#f0b90b; --base:#4d8dff; --arc:#38bdf8; /* --cc is "this chain's colour" (already used by the grind visual). Anything that carries a chain sets it, and the vanity characters in an address take it. */ --cc:var(--accent); /* the chosen characters: warm paper, no hue spent */ --run:#fff0d6; --radius:15px; --r:15px; --disp:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:80px;color-scheme:dark} body{margin:0;color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;background:var(--bg); font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:700;letter-spacing:-.025em} code,.mono{font-family:var(--mono)} .accent{color:var(--accent)} .hidden{display:none!important} .grow{flex:1;min-width:0} .small{font-size:12.5px} ::selection{background:rgba(244,243,248,.88);color:#0b0a10} :focus-visible{outline:2px solid var(--amber);outline-offset:2px} /* Every chain's own colour, set wherever a chain is known (cards carry data-chain). */ [data-chain=sol]{--cc:#14f195} [data-chain=rh]{--cc:#c2f24a} [data-chain=bnb]{--cc:#f0b90b} [data-chain=base]{--cc:#4d8dff} [data-chain=arc]{--cc:#38bdf8} /* ---------- icons ---------- */ .ic{display:inline-block;width:16px;height:16px;flex:none;vertical-align:-3px;background:currentColor; -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat} .ic-sol,.ic-rh,.ic-bnb,.ic-base,.ic-arc{background:var(--i) center/contain no-repeat;-webkit-mask:none;mask:none} /* Base: the Base mark (Simple Icons, CC0) */ .ic-base{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230052FF' d='M12.009 24c6.63 0 12.001-5.373 12.001-12S18.639 0 12.009 0C5.719 0 .552 4.844 0 11.01h15.891v1.98H0C.552 19.156 5.719 24 12.009 24z'/%3E%3C/svg%3E")} /* Arc: an arc over a dark disc (Kontract's own mark for the chain, not Circle's logo) */ .ic-arc{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23101828'/%3E%3Cpath d='M5.5 16.5a6.5 6.5 0 0 1 13 0' fill='none' stroke='%2338BDF8' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")} /* BNB Chain: the Binance mark (Simple Icons, CC0) */ .ic-bnb{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F0B90B' d='M16.624 13.92l2.718 2.716-7.354 7.353-7.353-7.352 2.718-2.717 4.635 4.66 4.636-4.66zm4.637-4.637L24 12l-2.715 2.716L18.568 12l2.693-2.717zm-9.272.001l2.716 2.692-2.717 2.717L9.272 12l2.717-2.715zm-9.273-.001L5.41 12l-2.692 2.692L0 12l2.716-2.717zM11.989.012l7.353 7.33-2.718 2.715-4.635-4.636-4.636 4.66-2.717-2.716L11.989.012z'/%3E%3C/svg%3E")} .ic-sol{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%239945FF'/%3E%3Cstop offset='1' stop-color='%2314F195'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M4.5 0H24l-4.5 4.4H0zM0 7.8h19.5L24 12.2H4.5zM4.5 15.6H24L19.5 20H0z'/%3E%3C/svg%3E")} .ic-rh{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c5f23d' d='M21 3c-6.3.3-11 3.9-13.3 9.7L5.9 17.3l-2.2 2.2a1 1 0 0 0 1.4 1.4l2.2-2.2 4.6-1.8C17.7 14.6 21.2 10.2 21 3z'/%3E%3Cpath d='M8.6 15.4l6.2-6.2' stroke='%23070b0d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")} .ic-hex{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M12 2.6l8.1 4.7v9.4L12 21.4l-8.1-4.7V7.3z'/%3E%3Cpath d='M9.6 9.2v5.6M14.4 9.2L11 12l3.4 2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .ic-rocket{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15.5c-1.5 1.3-2 4.5-2 4.5s3.2-.5 4.5-2c.7-.8.7-2-.1-2.8a2 2 0 0 0-2.4-.3z'/%3E%3Cpath d='M12 15l-3-3a21 21 0 0 1 2-3.9A12.7 12.7 0 0 1 21 3c0 2.7-.8 7.4-5.9 10.9A22 22 0 0 1 12 15z'/%3E%3Cpath d='M9 12H4.5s.5-2.8 1.9-3.8C8 7.1 11 8.1 11 8.1M12 15v4.5s2.8-.5 3.8-1.9c1.1-1.6.1-4.6.1-4.6'/%3E%3C/svg%3E")} .ic-trend{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E")} .ic-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")} .ic-bars{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 20v-6M10 20V9M15 20V4M20 20v-9'/%3E%3C/svg%3E")} .ic-coin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M14.6 9.3c-.5-.9-1.5-1.3-2.6-1.3-1.5 0-2.6.8-2.6 2s1.1 1.6 2.6 2 2.6.9 2.6 2.1-1.1 2-2.6 2c-1.2 0-2.2-.5-2.7-1.4M12 6.5V8m0 8v1.5'/%3E%3C/svg%3E")} .ic-upload{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5L12 4l4.5 4.5M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15'/%3E%3C/svg%3E")} .ic-spark{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8'/%3E%3C/svg%3E")} .ic-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8L20 20'/%3E%3C/svg%3E")} .ic-share{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3.5M7.5 8L12 3.5 16.5 8'/%3E%3Cpath d='M8 11H6.5A1.5 1.5 0 0 0 5 12.5v6A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5v-6a1.5 1.5 0 0 0-1.5-1.5H16'/%3E%3C/svg%3E")} .ic-copy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2.5'/%3E%3Cpath d='M16 8V5.5A1.5 1.5 0 0 0 14.5 4h-9A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16H8'/%3E%3C/svg%3E")} .ic-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='black'/%3E%3Cpath d='M7.5 12.2l3 3 6-6.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-mode:luminance;mask-mode:luminance} /* ---------- shell: a left rail of live buys, the page in the middle ---------- Every page shares it. The rail's buy feed is the CAUSE of cards moving on the board, so it is on every page rather than only the board's (fomo.family runs its token list the same way). */ .app{display:grid;grid-template-columns:262px minmax(0,1fr);min-height:100vh} .siderail{border-right:1px solid var(--line);background:var(--bg);position:sticky;top:0;height:100vh; display:flex;flex-direction:column;overflow:hidden;z-index:31} .main{min-width:0;display:flex;flex-direction:column} .brand{display:flex;align-items:center;gap:10px;height:62px;flex:none;padding:0 18px;border-bottom:1px solid var(--line);box-sizing:border-box} .brand .wm{font:800 18px/1 var(--disp);letter-spacing:-.045em} .brand .wm i{font-style:normal;color:var(--faint)} /* the mark: a caret that has landed on its characters */ .logo{width:26px;height:26px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect x='1' y='1' width='24' height='24' rx='7' fill='%23f4f3f8'/%3E%3Crect x='6' y='11.5' width='4' height='3' rx='1.2' fill='%230b0a10'/%3E%3Crect x='12' y='11.5' width='4' height='3' rx='1.2' fill='%230b0a10'/%3E%3Crect x='18' y='6.5' width='4' height='13' rx='1.4' fill='%230b0a10'/%3E%3C/svg%3E") center/contain no-repeat} .railnav{display:flex;flex-direction:column;gap:2px;padding:10px} .railnav a{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--ink2)} .railnav a:hover{background:var(--s1);color:var(--ink)} .railnav a.on{background:var(--s2);color:var(--ink);font-weight:600} .railnav a .nic{width:17px;height:17px;flex:none;opacity:.75} .railnav a.on .nic{opacity:1;color:var(--amber)} .railhd{display:flex;align-items:center;gap:8px;padding:12px 18px 8px;border-top:1px solid var(--line)} .railhd .lab:first-of-type{color:var(--ink2)} .lab{font:500 10.5px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)} .pulse{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none} .pulse.on{background:var(--up);animation:pl 2.4s ease-out infinite} @keyframes pl{0%{box-shadow:0 0 0 0 rgba(50,213,131,.55)}70%{box-shadow:0 0 0 7px rgba(50,213,131,0)}100%{box-shadow:0 0 0 0 rgba(50,213,131,0)}} .railfeed{flex:1;overflow:auto;padding:0 10px 10px;display:flex;flex-direction:column;gap:2px} .railempty{margin:8px 9px;color:var(--faint);font-size:12.5px} .fr{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 9px;border-radius:9px;font-size:13px} .fr:hover{background:var(--s1)} .fr.new{animation:slidein .42s cubic-bezier(.2,.9,.3,1)} @keyframes slidein{from{opacity:0;transform:translateY(-8px);background:var(--amber-soft)}to{opacity:1;transform:none}} .fr .av{width:36px;height:36px;border-radius:50%;font-size:13px} .fr .t{min-width:0} .fr .t b{display:block;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fr .t > span{display:block;font:400 11px var(--mono);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fr .t .hit{color:var(--ink2);font-weight:600} .fr .v{text-align:right;font-weight:600;font-size:13px;white-space:nowrap} .fr .v small{display:block;font:400 10.5px var(--mono);color:var(--faint);text-align:right} /* ---------- top bar ---------- */ .top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,520px) minmax(0,1fr);align-items:center;gap:12px; padding:0 20px;height:62px;box-sizing:border-box;background:rgba(15,14,20,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .top > .grow{display:none} .top .search{grid-column:2;width:100%;max-width:none} .top .right{grid-column:3;justify-self:end} .search{position:relative;flex:1;min-width:0;max-width:460px;display:flex;align-items:center;gap:9px;margin:0; background:var(--s1);border:1px solid transparent;border-radius:11px;padding:0 14px;color:var(--dim)} .search:hover,.search:focus-within{border-color:var(--line2);color:var(--ink2)} .search .ic{width:15px;height:15px} .search input{background:none;border:0;box-shadow:none;padding:9px 0;font-size:14px;color:var(--ink)} .search input:focus{box-shadow:none} .searchres{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--s2);border:1px solid var(--line2);border-radius:12px; padding:6px;box-shadow:0 22px 50px rgba(0,0,0,.55);max-height:60vh;overflow:auto;z-index:40} .searchres a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 8px;border-radius:9px;color:var(--ink)} .searchres a:hover,.searchres a.on{background:var(--s3)} .searchres a .av{width:30px;height:30px;border-radius:8px;font-size:11px} .searchres b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .searchres small{display:block;font:400 11px var(--mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .searchres .none{padding:10px;color:var(--dim);font-size:13px} .right{display:flex;gap:10px;align-items:center} .top #connect.btn.primary{background:var(--s1);border-color:var(--line);color:var(--ink)} .top #connect.btn.primary:hover{background:var(--s2);border-color:var(--line2);box-shadow:none} /* the old one-row nav: nothing renders into it any more, but a page that still carries one must not show it */ .top .nav{display:none} .search input{min-width:0;width:100%} /* a phone: the buttons on one row, the search under them. The three-column grid kept a 220px search column and the buttons beside it, so every page was ~440px wide on a 400px screen (found 2026-09-17 through the position popup). */ /* --- Holder fees (community mode) -------------------------------------------------------------------------- */ /* One row per epoch, reason on the right when it cannot pay: an epoch a holder cannot SEE is one they report as lost money, so a dimmed row with "vetoed by the guardian" on it is doing real work. */ #cm-epochs{display:flex;flex-direction:column;gap:2px;margin:8px 0} .cm-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0; border-bottom:1px solid var(--line)} .cm-row:last-child{border-bottom:0} .cm-row b{font-variant-numeric:tabular-nums} .cm-dim{opacity:.62} .cm-dim .sub{text-align:right} /* Never hidden behind the status line: this is the sentence that says a total is only a subtotal. */ #cm-warn{color:var(--warn);margin:6px 0 2px} @media(max-width:700px){ .top{display:flex;flex-wrap:wrap;height:auto;padding-block:8px;row-gap:8px} .top .search{order:2;flex:1 1 100%} .top .right{order:1;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;min-width:0} .top .devwallet{display:none} } @media(max-width:1080px){ .app{grid-template-columns:1fr} .siderail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)} .railnav{flex-direction:row;overflow-x:auto;padding:8px 10px} .railnav a{white-space:nowrap;padding:7px 10px} .railfeed{max-height:172px} .brand{border-bottom:0;padding:12px 16px 4px} } /* ---------- buttons, pills, fields ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line); background:var(--s1);color:var(--ink);padding:9px 15px;border-radius:11px;cursor:pointer; font:600 14px/1.2 var(--sans);white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .2s,color .15s} .btn:hover{background:var(--s2);border-color:var(--line2)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600} .btn.primary:hover:not(:disabled){background:var(--accent-hi);border-color:var(--accent-hi)} .btn.primary:disabled{background:var(--s2);border-color:var(--s2);color:var(--faint);opacity:1} .btn.buy{background:var(--up);border-color:var(--up);color:#052013} .btn.buy:hover:not(:disabled){filter:brightness(1.08);background:var(--up)} .btn.outline,.btn.ghost{background:var(--s1);border-color:var(--line)} .btn.outline:hover,.btn.ghost:hover{background:var(--s2);border-color:var(--line2)} .btn.link{background:none;border:0;color:var(--dim);padding:8px 0;font-size:13px} .btn.link:hover{color:var(--ink)} .btn.lg{padding:13px 22px;font-size:15.5px;border-radius:12px} .btn.sm{padding:7px 12px;font-size:13px;border-radius:9px} .btn.full{width:100%;margin-top:14px} .arrow{font-size:1.05em;line-height:1} .caret{display:inline-block;width:8px;height:8px;border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim); transform:rotate(45deg) translate(-2px,-2px);margin-left:2px} .pill{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);background:var(--panel); color:var(--ink);padding:9px 14px;border-radius:10px;cursor:pointer;font:500 14px var(--sans)} .pill:hover{border-color:var(--line3)} .okdot{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 8px rgba(50,213,131,.45);margin-left:6px} .chainpick{position:relative} .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--panel2);border:1px solid var(--line2); border-radius:12px;padding:6px;box-shadow:0 18px 50px -12px rgba(0,0,0,.7);z-index:40} .menuitem{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--ink);padding:10px 10px; border-radius:8px;font:500 14px var(--sans);cursor:pointer;text-align:left} .menuitem:hover:not(:disabled){background:rgba(255,255,255,.04)} .menuitem:disabled{color:var(--dim);cursor:default} .menuitem .check{margin-left:auto;color:var(--accent)} .soon{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim); border:1px solid var(--line2);border-radius:999px;padding:1px 7px} input,select,textarea{background:var(--sunk);border:1px solid var(--line);color:var(--ink);border-radius:11px; padding:11px 13px;font:15px var(--sans);width:100%;outline:none;transition:border-color .15s,box-shadow .15s} /* A checkbox is a box, never a text field: the rule above gave it width:100%, which stretched it across its row and pushed its label to the far edge, so no checkbox on the site read as belonging to its words (user, 2026-09-28). */ input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;min-width:18px; padding:0;margin:0;flex:none;display:inline-grid;place-content:center;vertical-align:-3px;border:1.5px solid var(--line2); border-radius:5px;background:var(--sunk);cursor:pointer;transition:background .12s,border-color .12s} input[type=radio]{border-radius:50%} input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--accent-line)} input[type=checkbox]:checked,input[type=radio]:checked{background:var(--accent);border-color:var(--accent)} input[type=checkbox]:checked::after{content:"";width:5px;height:9px;border:solid var(--accent-ink);border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg)} input[type=radio]:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-ink)} input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px} input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.4;cursor:not-allowed} input::placeholder,textarea::placeholder{color:var(--faint)} input:focus,select:focus,textarea:focus{border-color:var(--amber);background:var(--bg);box-shadow:none} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px} textarea{resize:vertical;min-height:62px} label{display:block;color:var(--dim);font-size:12.5px} .opt{color:var(--faint);font-weight:400;font-size:12px} .sub{color:var(--ink2);font-size:14px;margin:5px 0 0} /* ---------- hero: the current site's pitch and demo, in one panel above the board ---------- */ .page{padding:18px 20px 70px} .hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:28px;padding:22px 26px; margin-bottom:16px;align-items:center;border:1px solid var(--line);border-radius:var(--r); background:linear-gradient(100deg,var(--amber-soft),transparent 58%),var(--s1)} .hero h1{font-size:clamp(28px,3.3vw,46px);line-height:1.04;letter-spacing:-.035em;font-weight:800} .lede{color:var(--ink2);font-size:16px;line-height:1.5;margin:0;max-width:56ch} .hero h1+.lede{margin-top:12px} /* the highlighted word, with a hand-drawn stroke under it that draws in once */ .uline{position:relative;display:inline-block;color:var(--accent);white-space:nowrap} .swoosh{position:absolute;left:-1%;bottom:-.2em;width:102%;height:.3em;overflow:visible} .swoosh path{fill:var(--accent);clip-path:inset(0 100% 0 0);animation:swoosh .9s .35s cubic-bezier(.6,.1,.2,1) forwards} @keyframes swoosh{to{clip-path:inset(0 0 0 0)}} @media(prefers-reduced-motion:reduce){.swoosh path{animation:none;clip-path:none}} .lede .accent{font-weight:600} .cta{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap} .chips{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--ink2);font-size:13px;flex-wrap:wrap} .chips span{display:inline-flex;align-items:center;gap:7px} .chips .ic-hex{color:var(--dim);width:18px;height:18px} .chips i{width:4px;height:4px;border-radius:50%;background:var(--faint)} .hero-art{position:relative;display:flex;align-items:center;justify-content:center;padding-top:14px} .float,.hexdot{display:none} /* ---------- hero demo: a looping walkthrough, driven by hero.js ---------- */ .demo{position:relative;width:min(500px,100%);border-radius:16px;border:1px solid var(--line2);overflow:hidden; background:linear-gradient(180deg,rgba(30,28,39,.95),rgba(15,14,20,.97)); box-shadow:0 30px 80px -30px rgba(0,0,0,.85),0 0 70px -34px rgba(244,243,248,.34)} .demo-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid var(--line)} .demo-bar i{width:8px;height:8px;border-radius:50%;background:#253030} .demo-url{margin:0 auto;transform:translateX(-14px);font:500 10.5px var(--mono);color:var(--faint);padding:2px 12px;border-radius:6px; background:var(--field);border:1px solid var(--line)} .demo-stage{position:relative;height:200px} .demo-scene{position:absolute;inset:0;padding:18px 24px;display:flex;flex-direction:column;justify-content:center;gap:12px; opacity:0;transform:translateY(8px);transition:opacity .28s ease,transform .28s ease;pointer-events:none} .demo-scene.on{opacity:1;transform:none;transition-duration:.45s;transition-delay:.22s} /* old scene leaves first */ .demo-k{display:flex;align-items:center;gap:8px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .demo-k .livedot{margin:0} .demo-seg{display:inline-flex;align-self:flex-start;gap:3px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--field); font-size:11.5px;color:var(--dim)} .demo-seg span{padding:3px 10px;border-radius:6px} .demo-seg .on{color:var(--ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)} .demo-input{display:flex;align-items:center;height:46px;padding:0 16px;border-radius:11px;border:1px solid var(--accent-line); background:var(--field);font:500 19px var(--mono);box-shadow:0 0 0 3px rgba(244,243,248,.08)} .demo-input .ghost{color:var(--faint)} .demo-input b{color:var(--accent);font-weight:500;text-shadow:0 0 14px var(--accent-glow)} .demo-caret{width:2px;height:22px;margin-left:2px;background:var(--accent);animation:demoblink 1s steps(1) infinite} @keyframes demoblink{50%{opacity:0}} .demo-note{font-size:12px;color:var(--dim)} .demo-note b{font:500 12px var(--mono)} .demo-gpu{padding:1px 6px;border-radius:5px;font-size:9.5px;color:#c9bdfd;border:1px solid var(--violet-line);background:var(--violet-soft)} .demo-addr{padding:13px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--field);font:500 15px var(--mono); letter-spacing:.02em;color:var(--dim);white-space:nowrap;overflow:hidden;transition:border-color .3s,box-shadow .3s} .demo-addr .hit{color:var(--accent);text-shadow:0 0 12px var(--accent-glow)} .demo-addr.found{color:var(--ink2);border-color:var(--accent-line);box-shadow:0 0 26px -10px var(--accent-glow)} .demo-progress{height:4px;border-radius:4px;background:var(--line);overflow:hidden} .demo-progress i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 10px var(--accent-glow)} .demo-meter{display:flex;justify-content:space-between;font:11.5px var(--mono);color:var(--dim)} .demo-meter b{color:var(--ink);font-weight:500} .demo-meter .found{color:var(--accent)} .demo-token{display:flex;align-items:center;gap:12px} .demo-av{display:block;width:42px;height:42px;border-radius:50%;flex:none; background:radial-gradient(circle at 34% 30%,#ffcd7a,#4f8f2f 55%,#1b3a1d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .demo-token b{display:block;font-size:15px;line-height:1.2} .demo-token small{color:var(--dim);font-size:12px} .demo-chip{margin-left:auto;padding:5px 9px;border-radius:8px;border:1px solid var(--line2);background:var(--field); font:500 11.5px var(--mono);color:var(--ink2);white-space:nowrap} .demo-chip .hit{color:var(--accent)} .demo-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--dim)} .demo-row b{display:inline-flex;align-items:center;gap:6px;margin-left:6px;color:var(--ink2);font-weight:500} .demo-row .ic{width:13px;height:13px;vertical-align:0} .demo-btn{display:flex;align-items:center;justify-content:center;height:42px;border-radius:11px;font:600 13.5px var(--sans); color:var(--accent-ink);background:var(--accent);transition:transform .15s,background .35s,color .35s,box-shadow .35s} .demo-btn>span{display:none;align-items:center;gap:9px} .demo-btn .go{display:inline-flex} .demo-btn.press{transform:scale(.97)} .demo-btn.busy{background:var(--accent-soft);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--accent-line)} .demo-btn.busy .go,.demo-btn.done .go{display:none} .demo-btn.busy .busy,.demo-btn.done .ok{display:inline-flex} .demo-btn.done{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line),0 0 30px -8px var(--accent-glow)} .demo-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line3);border-top-color:var(--accent);animation:demospin .7s linear infinite} @keyframes demospin{to{transform:rotate(360deg)}} .demo-check{width:7px;height:12px;margin:-3px 2px 0 0;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)} .demo-board{overflow:hidden;margin:-4px;padding:4px} .demo-track{display:flex;gap:8px;transform:translateX(calc(-33.333% - 2.667px))} .demo-board.in .demo-track{transform:none;transition:transform .75s cubic-bezier(.2,.8,.2,1)} .demo-card{position:relative;flex:0 0 calc((100% - 16px) / 3);min-width:0;display:flex;flex-direction:column;gap:7px;padding:10px; border-radius:10px;border:1px solid var(--line);background:var(--panel)} .demo-card .t{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600} .demo-card .t i{width:22px;height:22px;border-radius:50%;flex:none} .demo-card .m{display:flex;justify-content:space-between;font:10.5px var(--mono);color:var(--dim)} .demo-card .m b{color:var(--ink);font-weight:500;transition:color .3s} .demo-card .a{font:10.5px var(--mono);color:var(--faint);white-space:nowrap;overflow:hidden} .demo-card .a .hit{color:var(--accent)} .demo-card.new{border-color:var(--accent-line);box-shadow:0 0 24px -8px var(--accent-glow)} .demo-card .buy{position:absolute;right:8px;top:9px;font:600 10px var(--mono);color:var(--up);opacity:0} .demo-card .buy.pop{animation:demobuy 1.6s ease-out forwards} @keyframes demobuy{0%{opacity:0;transform:translateY(6px)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-8px)}} .demo-card .m b.up{color:var(--up)} .demo-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:10px 24px 14px;list-style:none;border-top:1px solid var(--line)} .demo-steps li{position:relative;padding-top:9px;font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--faint);transition:color .3s} .demo-steps li::before,.demo-steps li::after{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px} .demo-steps li::before{right:0;background:var(--line2)} .demo-steps li::after{width:0;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)} .demo-steps li.on{color:var(--ink)} .demo-steps li.on::after{animation:demofill var(--d,3s) linear forwards} .demo-steps li.done{color:var(--dim)} .demo-steps li.done::after{width:100%} @keyframes demofill{to{width:100%}} @media(prefers-reduced-motion:reduce){.demo-scene,.demo-board.in .demo-track{transition:none}.demo-caret,.demo-spin{animation:none}} /* ---------- intro: hide / compact bar for returning visitors ---------- A returning visitor gets the concept's one-line strip instead of the pitch, decided before first paint. */ .hero-hide{position:absolute;top:10px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:0; border-radius:7px;background:transparent;color:var(--faint);font:500 12px var(--sans);cursor:pointer} .hero-hide:hover{color:var(--ink2);background:var(--s2)} .caret.up{transform:rotate(-135deg) translate(-1px,-1px);margin:3px 0 0 2px} .herobar{display:none;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:14px 18px;margin-bottom:16px; background:linear-gradient(100deg,var(--amber-soft),transparent 58%),var(--s1);border:1px solid var(--line);border-radius:var(--r)} html.hero-min .hero{display:none} html.hero-min .herobar{display:flex} .herobar p{margin:0;display:flex;flex-direction:column;gap:3px} .herobar p b{font:700 clamp(18px,2.2vw,24px)/1.2 var(--disp);letter-spacing:-.025em} .hb-sub{color:var(--ink2);font-size:14px} .hb-cta{display:flex;gap:8px;flex-wrap:wrap} /* ---------- steps strip ---------- */ .steps{display:flex;align-items:center;gap:18px;width:min(1344px,calc(100% - 96px));margin:10px auto 0;padding:20px 28px; border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(30,28,39,.75),rgba(15,14,20,.75))} .step{display:flex;align-items:center;gap:16px;min-width:0} .step h4{font-size:15px;font-weight:600} .step p{margin:3px 0 0;color:var(--dim);font-size:13.5px} .num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;font:500 15px var(--sans); color:var(--accent);border:1px solid var(--accent-line);background:radial-gradient(circle,rgba(244,243,248,.1),transparent 70%)} .num.violet{color:#c9bdfd;border-color:var(--violet-line);background:radial-gradient(circle,rgba(167,139,250,.14),transparent 70%)} .stepchains{display:flex;margin-left:14px} .stepchains .ic{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background-color:var(--panel2); background-size:15px;padding:0} .stepchains .ic+.ic{margin-left:-6px} .dash{flex:1;min-width:30px;height:1px;background:repeating-linear-gradient(90deg,var(--line3) 0 4px,transparent 4px 8px);position:relative} .dash::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-right:1.3px solid var(--dim);border-top:1.3px solid var(--dim);transform:rotate(45deg)} /* ---------- layout ---------- */ .grid{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:14px;padding:18px 20px 70px;align-items:start} .grid > *{min-width:0} .panel{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:20px} .rail > .panel+.panel,.panel+.panel{margin-top:12px} .panel h3{font-size:17px;font-weight:700} .panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .tabs{display:flex;gap:6px;flex-wrap:wrap} .tab{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;background:transparent;color:var(--dim); padding:7px 12px;border-radius:9px;cursor:pointer;font:500 13.5px var(--sans);white-space:nowrap;transition:color .15s,background .15s} .tab:hover{color:var(--ink2)} .tab.on{color:var(--ink);background:var(--s3);font-weight:600} .tab:disabled{opacity:.45;cursor:not-allowed} .livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--faint);vertical-align:middle;margin-left:6px} .livedot.on{background:var(--up);animation:pl 2.4s ease-out infinite} /* ---------- THE BOARD: information cards, bump-ordered ---------- The structure is the site's own (stats, chain filter, sort tabs, a card grid); what changed is that the default sort is bump order and the thing that animates is the ADDRESS -- the one attention cue no other launchpad can copy. */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px} .tile{background:var(--s1);border:1px solid var(--line);border-radius:13px;padding:13px 16px;min-width:0} .tile b{display:block;font:700 23px/1 var(--disp);letter-spacing:-.04em;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px} .seg,.sorts{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--s1);flex-wrap:wrap} .seg .tab,.sorts .tab{padding:7px 12px;font-size:13.5px} .seg .tab .ic,.sorts .tab .ic{width:14px;height:14px} .sorts .tab.on.live{background:var(--accent);color:var(--accent-ink)} .feed-head h2{font-size:clamp(21px,2.6vw,27px)} .bnote{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-size:12.5px;color:var(--dim)} .bnote b{color:var(--faint);font-weight:500} .bnote b.on{color:var(--amber);font-weight:600} /* one amount, set here and read by every card: eight presets never go on eight hundred cards */ .sizer{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:rgba(9,8,13,.92)} .sizer button{border:0;background:none;display:grid;place-items:center;width:30px;height:26px;border-radius:7px;color:var(--faint);cursor:pointer} .sizer button:hover{color:var(--ink2)} .sizer button.on{background:var(--s2);color:var(--ink)} .sizer i{display:block;background:currentColor;border-radius:2px} .sizer button[data-size=s] i{width:9px;height:9px} .sizer button[data-size=m] i{width:13px;height:13px} .sizer button[data-size=l] i{width:17px;height:17px} .qb{display:flex;align-items:center;gap:9px} .qb .seg .tab{padding:7px 9px;font:600 12.5px var(--mono);letter-spacing:-.02em} .qbc{display:flex;align-items:center;gap:1px;border-radius:9px;padding:0 9px;font:600 12.5px var(--mono);color:var(--dim);cursor:text;margin:0} .qbc:hover{color:var(--ink2)} .qbc.on{background:var(--s3);color:var(--ink)} .qbc i{display:none;font-style:normal;opacity:.7} .qbc.on i,.qbc:focus-within i{display:inline} .qbc input{width:56px;background:none;border:0;padding:7px 0;color:inherit;font:600 12.5px var(--mono);border-radius:0} .qbc input:focus{outline:none;box-shadow:none;background:none} .qbc:focus-within{box-shadow:inset 0 0 0 1px var(--amber)} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:12px} .card{position:relative;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:14px; display:flex;flex-direction:column;gap:11px;color:var(--ink);transition:border-color .16s,background .16s} .card:hover{border-color:var(--line2);background:var(--s2)} /* A bump is the board's one piece of theatre: the border lights, one pass of light runs round it in under a second, and the glow falls away. Short enough to catch, quiet enough to sit through. */ @property --bsweep{syntax:"";inherits:false;initial-value:0deg} .card.bumped{border-color:var(--accent-line);background:var(--s2);animation:bumpglow 2.2s ease-out; box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 32px rgba(0,0,0,.35),0 0 22px -12px var(--accent-glow)} @keyframes bumpglow{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 32px rgba(0,0,0,.35),0 0 0 1px var(--accent-line),0 0 46px -6px var(--accent-glow)} 100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 32px rgba(0,0,0,.35),0 0 22px -12px var(--accent-glow)}} .card.bumped::after{content:"";position:absolute;inset:-1px;border-radius:calc(var(--r) + 1px);padding:1px;pointer-events:none;z-index:3; background:conic-gradient(from var(--bsweep),transparent 0 62%,var(--accent) 78%,#ffffff 84%,var(--accent-hi) 90%,transparent 100%); filter:drop-shadow(0 0 5px var(--accent-glow)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude; animation:bsweep .85s cubic-bezier(.35,.05,.2,1) forwards} @keyframes bsweep{from{--bsweep:0deg;opacity:1}85%{opacity:1}to{--bsweep:360deg;opacity:0}} @media(prefers-reduced-motion:reduce){.card.bumped{animation:none}.card.bumped::after{display:none}} @keyframes land{0%{transform:scale(.97)}55%{transform:scale(1.015)}100%{transform:scale(1)}} .card.landing{animation:land .5s cubic-bezier(.2,.9,.3,1)} /* THE CARD (Ledger, 2026-09-18). The picture is a real object at a size the reader picks, the address is the biggest text on the card, and everything that is not market cap or bonding is gone: no 24h, no volume, no sparkline, no "Custom"/"Free address" tag. The paired asset is drawn as a quiet disc running off the card edge rather than named in a pill. */ .cards{--img:104px;--af:19px} .cards[data-size=s]{--img:60px;--af:16px} .cards[data-size=m]{--img:80px;--af:17.5px} .card{display:grid;grid-template-columns:var(--img) minmax(0,1fr);gap:14px;align-items:center;overflow:hidden} .kc-wm{position:absolute;right:-38px;top:50%;translate:0 -50%;pointer-events:none;opacity:.07} .alogo.wm{width:132px;height:132px;font:800 34px var(--disp);box-shadow:none;background:rgba(244,243,248,.04)} .alogo.wm img{padding:14px;border-radius:50%} .kc-media{position:relative;aspect-ratio:1;border-radius:13px;overflow:hidden;background:var(--sunk);border:1px solid var(--line);align-self:start} .kc-media > img,.kc-media > .art{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.9,.3,1)} .card:hover .kc-media > img,.card:hover .kc-media > .art{transform:scale(1.05)} .kc-body{min-width:0;display:flex;flex-direction:column;gap:9px} .kc-top{display:flex;align-items:flex-start;gap:8px;min-width:0} .kc-id{min-width:0;flex:1} .club{display:inline-flex;align-items:center;gap:4px;flex:none;font:600 9.5px/1 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:var(--ink2);border:1px solid var(--line2);border-radius:5px;padding:5px 6px;white-space:nowrap} .club b{color:var(--accent);font-weight:700} .kc-bump{position:absolute;left:5px;bottom:5px;display:inline-flex;align-items:center;gap:5px;font:500 10.5px var(--mono); color:var(--ink2);background:rgba(12,11,17,.82);border-radius:7px;padding:2px 6px;white-space:nowrap;backdrop-filter:blur(3px)} .kc-bump.hot{color:var(--accent-ink);background:var(--accent)} .kc-bump i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block} .held{position:absolute;right:10px;bottom:9px;z-index:2;font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase; color:var(--faint);opacity:0;transition:opacity .14s;white-space:nowrap} .card:hover .held,.card:focus-within .held{opacity:1} .nm{display:flex;align-items:center;gap:7px;font:700 15.5px/1.2 var(--disp);letter-spacing:-.03em;min-width:0} .nm > span,.nm > a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nm .vf{width:14px;height:14px;flex:none;color:var(--peri)} .kc-sub{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;color:var(--dim);min-width:0; white-space:nowrap;overflow:hidden} .kc-sub .chainic{width:13px;height:13px;vertical-align:0} .kc-sub > *{flex:none} .kc-sub > .bycreator{flex:0 1 auto;min-width:0;display:block;overflow:hidden;text-overflow:ellipsis} .kc-sub .avatar.sm{width:15px;height:15px;font-size:8px} .tk{color:var(--dim);font-size:12px} .kc-row{display:flex;align-items:center;gap:12px;min-width:0} .mc{font:800 clamp(18px,1.5vw,21px)/1 var(--disp);letter-spacing:-.04em} .kc-foot{gap:9px} /* The pairing never runs under the buttons (user, 2026-09-21): the asset's logo and symbol keep their width, the words "Paired with" give way first -- truncated, then gone on a narrow card. */ .cards .card{container-type:inline-size} .kc-pair{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--dim);white-space:nowrap;min-width:0;flex:0 1 auto;overflow:hidden} .kc-pair > .kc-pw{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto} .kc-pair > b, .kc-pair > .alogo, .kc-pair > img{flex:0 0 auto} .kc-foot > .btn.buy{flex:0 0 auto} @container (max-width: 340px){ .kc-pair > .kc-pw{display:none} } /* THE ADDRESS: the biggest text on the card, because it is the thing being sold. */ .addr{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden; font:400 var(--af,19px)/1.15 var(--mono);color:var(--faint);letter-spacing:-.02em} .addr .mid{color:var(--faint)} .addrtext{display:flex;align-items:baseline;min-width:0;white-space:nowrap} .ahead{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis} .addr .hit{flex:none} .addr .copy{margin-left:auto;flex:none} /* WARM (UX/accent, user 2026-09-18): #FFF0D6 measures chroma 0.038, below the threshold where a hue registers, so the chosen characters read as a different MATERIAL rather than a different category, and collide with none of the ten colours that already mean something here. Ten hues are taken -- five chains, up, down and three medals -- and the widest gap left in the greens is 30 degrees, so no green clears more than 15. The halo is the only glow on the site. */ .hit{color:var(--run);font-weight:600} .addr .hit{letter-spacing:-.02em;border-radius:4px;transition:color .2s; text-shadow:0 0 9px rgba(255,226,170,.42),0 0 22px rgba(255,226,170,.16)} .card.bumped .addr .hit{animation:hitpop .55s ease-out} @keyframes hitpop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}} .copy{display:inline-grid;place-items:center;background:none;border:0;color:var(--dim);cursor:pointer;padding:0 2px;opacity:.6} .copy:hover{color:var(--ink);opacity:1} .copy .ic{width:14px;height:14px} .up{color:var(--up)}.down{color:var(--down)} /* graduation: pons stripped its discovery UI to almost nothing and kept this */ .kc-grad{display:flex;align-items:center;gap:8px;min-width:0;flex:1} .kc-grad .track{flex:1;min-width:34px;height:4px;border-radius:99px;background:var(--s3);overflow:hidden} .kc-grad .track i{display:block;height:100%;border-radius:99px;background:var(--accent)} .kc-grad .poolnote{flex:1;font:500 11.5px var(--mono);color:var(--dim);white-space:nowrap} .kc-grad .pct{font:500 11.5px var(--mono);color:var(--dim);white-space:nowrap;margin-left:auto} .kc-grad.done .pct{color:var(--accent)} .kc-grad.done .track i{background:var(--accent);opacity:.7} .kc-grad.pooled{justify-content:flex-end} .kc-grad.pooled .pct{color:var(--faint);margin-left:0} .kc-grad .lab{letter-spacing:.08em} .spark{width:60px;height:20px;flex:none;overflow:visible} .spark .line{fill:none;stroke:var(--faint);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke} .spark .fill{fill:transparent} .spark.up .line{stroke:var(--up)}.spark.up .fill{fill:rgba(50,213,131,.1)} .spark.down .line{stroke:var(--down)}.spark.down .fill{fill:rgba(249,112,102,.1)} .change{font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap} .kc-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:2px;min-width:0} .kc-tags{display:flex;gap:5px;min-width:0;overflow:hidden;flex-wrap:nowrap} .kc-soc{display:flex;gap:4px;flex:none} .soc{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--s2);color:var(--dim)} a.soc:hover{background:var(--s3);color:var(--ink)} .soc.off{opacity:.28} .soc svg{display:block} /* on a card the buy stays quiet -- the address should be loudest -- and commits to green only on hover */ .card .btn.buy{background:transparent;border-color:var(--line2);color:var(--ink2);flex:none;padding:7px 12px;font-size:13px;border-radius:9px} .card .btn.buy:hover:not(:disabled){background:var(--up);border-color:var(--up);color:#052013;filter:none} .tag{font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:3px 7px;white-space:nowrap} .tag.koth{background:var(--accent);color:var(--accent-ink)} .tag.club{background:var(--s2);color:var(--ink2);border:1px solid var(--line2)} .tag.free{background:rgba(12,11,17,.8);color:var(--ink2)} .tag.custom{background:rgba(12,11,17,.82);color:var(--accent-hi)} .tagpill{display:inline-flex;align-items:center;padding:2px 7px;border-radius:6px;font:600 10.5px var(--mono);letter-spacing:.04em;line-height:17px; white-space:nowrap;border:1px solid var(--line2);color:var(--ink2);background:var(--s2)} .tagpill.violet{border-color:var(--violet-line);color:#c9bdfd;background:var(--violet-soft)} .tagpill.withlogo{gap:4px;padding-left:2px} .tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .empty{padding:54px;text-align:center;color:var(--dim);background:var(--s1);border:1px solid var(--line);border-radius:var(--r);margin-top:12px;font-size:14px} .more{display:flex;justify-content:center;margin-top:20px} .more .btn{padding:11px 30px;font-size:15px;gap:12px} .toast{position:fixed;left:50%;bottom:56px;z-index:60;background:var(--s3);border:1px solid var(--line2);border-radius:12px;padding:11px 16px; font-size:13.5px;box-shadow:0 22px 50px rgba(0,0,0,.55);opacity:0;pointer-events:none;transform:translate(-50%,14px); transition:opacity .2s,transform .2s;max-width:min(560px,calc(100vw - 32px))} .toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} .toast b{color:var(--amber)} .toast.err{border-color:rgba(249,112,102,.5)} .toast .btn{margin-left:8px} @media (prefers-reduced-motion:reduce){.card,.card *,.fr{animation:none!important;transition:none!important}} .av .art,.av > svg{display:block;width:100%;height:100%} .av > img{display:block;width:100%;height:100%;object-fit:cover} .fr .av{display:block;overflow:hidden;flex:none} .nm a{color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .nm a:hover{text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px} .bycreator{display:inline-flex;align-items:center;gap:4px;color:var(--ink2)} .card{cursor:pointer} @media (min-width:1081px) and (max-width:1300px){.grid,.coin{grid-template-columns:1fr}} /* ---------- rail: identity + create ---------- */ /* The "glow card": lime-tinted edge and corner light. Used for the create page's Preview; keep it for anything that should read as the user's own identity (was the "Your address" card). */ .identity,.glow-card{position:relative;border-color:rgba(244,243,248,.32); background:radial-gradient(420px 220px at 100% 0,rgba(244,243,248,.09),transparent 70%),linear-gradient(180deg,rgba(34,30,46,.95),rgba(26,24,34,.95)); box-shadow:0 0 40px -22px var(--accent-glow)} .identity h3{padding-right:56px} /* vanity prices by length */ .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-top:12px} .tiers:empty{display:none} .tier{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--field); transition:border-color .15s,background .15s;min-width:0} .tier-n{font-size:11.5px;color:var(--dim)} .tier b{font:600 14px var(--sans);color:var(--ink)} .tier-s{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tier.on{border-color:var(--accent-line);background:var(--accent-soft)} .tier.on b{color:var(--accent)} .tier.nostock .tier-s{color:var(--warn);opacity:.8} .tiers.compact{margin-top:10px} .tiers.compact .tier{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;row-gap:1px;padding:7px 11px} .tiers.compact .tier-n{white-space:nowrap} .tiers.compact .tier b{text-align:right;white-space:nowrap} .tiers.compact .tier-s{grid-column:1/-1} .quote .feeval{color:var(--ink);font-weight:600} .identity .emblem{position:absolute;top:18px;right:18px} .identity .sub{max-width:34ch;line-height:1.5} .identity .sub.small{margin-top:14px} .identity code.hit{font-size:12.5px} .inline-input{display:flex;margin-top:16px;border:1px solid var(--line2);border-radius:11px;background:var(--field);padding:4px; transition:border-color .15s,box-shadow .15s} .inline-input:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)} .inline-input input{border:0;background:transparent;box-shadow:none;font:500 15px var(--mono);letter-spacing:.03em;padding:9px 10px} .inline-input .btn{padding:9px 16px;border-radius:8px} .quote:empty{min-height:0;margin:0} .quote{margin:12px 0 0;font-size:13px;color:var(--dim);min-height:20px;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .quote .ok{color:var(--up);display:inline-flex;align-items:center;gap:6px} .quote .warn{color:var(--warn)} .quote .ic-check{width:15px;height:15px;color:var(--up)} .create-head{display:flex;justify-content:space-between;align-items:baseline} .create-head .sub{font-size:12.5px} .frow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;margin-top:12px} .frow.stack{grid-template-columns:1fr;gap:8px;margin-top:18px} .flabel{color:var(--ink2);font-size:13px} .pair{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:8px} .imgpick{display:flex;align-items:center;gap:10px;min-width:0} .thumb{width:48px;height:48px;border-radius:10px;border:1px dashed var(--line3);background:var(--field);overflow:hidden;flex:none;display:grid;place-items:center} .thumb img{width:100%;height:100%;object-fit:cover} .upload{position:relative;overflow:hidden;color:var(--ink2)} .upload input{position:absolute;inset:0;opacity:0;cursor:pointer} #img-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} details.links{margin-top:12px;border-top:1px solid var(--line);padding-top:10px} details.links summary{cursor:pointer;font-size:13px;color:var(--ink2);list-style:none} details.links summary::before{content:"+";display:inline-block;width:14px;color:var(--dim)} details.links[open] summary::before{content:"–"} .toggle{display:grid;gap:8px} .toggle.two{grid-template-columns:1fr 1fr} .toggle.three{grid-template-columns:1fr 1fr 1fr} .toggle.four{grid-template-columns:1fr 1fr 1fr 1fr} .opt-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 10px;border-radius:9px;border:1px solid var(--line2); background:var(--field);color:var(--ink2);font:500 13px var(--sans);cursor:pointer;white-space:nowrap;min-width:0} .opt-btn:hover:not(:disabled){border-color:var(--line3);color:var(--ink)} .opt-btn.on{border-color:var(--accent-line);color:var(--ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(244,243,248,.16)} .opt-btn:disabled{opacity:.55;cursor:not-allowed} .venue-wallets{margin:10px 0 0;display:flex;flex-direction:column;gap:6px;color:var(--text)} .venue-wallets>span{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:9px 12px;border-radius:10px; border:1px solid color-mix(in srgb,var(--amber) 45%,var(--line));background:color-mix(in srgb,var(--amber) 9%,transparent)} .venue-wallets .linkwallet{background:var(--amber);color:#111;border-color:transparent;font-weight:600} .addrbuild .ab-tail{flex:none;color:var(--dim);letter-spacing:.02em} .addrbuild .ab-tail[hidden]{display:none} .big .forced{color:var(--dim)} .busybar.det i::after{animation:none;left:0;width:var(--p,0%);transition:width 1s linear} .opt-btn{position:relative} .opt-btn .soon{position:absolute;top:-8px;right:8px;margin:0;padding:0 6px;font-size:9px;line-height:15px;background:var(--panel2);color:var(--dim)} .addrline{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:8px} .addrline input{font-family:var(--mono)} .matches{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:220px;overflow:auto} .match{display:block;border:1px solid var(--line2);border-radius:9px;background:var(--field); padding:9px 11px;cursor:pointer;font:11.5px var(--mono);word-break:break-all;color:var(--ink2)} .match:hover,.match.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink)} .addrcard{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line2);border-radius:12px;background:var(--field)} .addrcard b{font-size:20px;font-weight:500;letter-spacing:.02em} .picked{margin-top:12px;font:12px var(--mono);color:var(--ink2);overflow-wrap:anywhere} .picked:empty{display:none} .picked .opt{font-family:var(--sans)} .picked a{color:var(--dim);text-decoration:underline} .navrow{display:flex;gap:10px;margin-top:18px} .review{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 14px;font-size:13px;align-items:center} .review span{color:var(--dim)} .review b{font-weight:500;text-align:right;overflow:hidden;text-overflow:ellipsis;word-break:break-all} .review .tokenline{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line)} .review .tokenline .av{width:44px;height:44px;border-radius:50%} .costs{font-size:13px;border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-top:14px; display:grid;grid-template-columns:1fr auto;gap:5px 12px;background:var(--field)} .costs span{color:var(--dim)} .costs b{text-align:right;font-weight:500} .costs .total{border-top:1px solid var(--line);padding-top:7px;color:var(--ink)} .status{margin:12px 0 0;font-size:13px;color:var(--dim);min-height:18px;word-break:break-word} .status:empty{margin:0;min-height:0} .status.err{color:var(--down)} .status.ok{color:var(--up)} /* a step in progress (create.js Busy): an indeterminate bar and the seconds so far */ .busybar{display:flex;align-items:center;gap:10px;margin:8px 0 0} .busybar[hidden]{display:none} .busybar i{position:relative;flex:1;height:4px;border-radius:999px;background:var(--line);overflow:hidden} .busybar i::after{content:"";position:absolute;top:0;bottom:0;left:-35%;width:35%;border-radius:999px;background:var(--up);animation:busyslide 1.3s ease-in-out infinite} .busybar span{font:500 12px var(--mono,monospace);color:var(--dim);min-width:38px;text-align:right} @keyframes busyslide{0%{left:-35%}100%{left:100%}} @media (prefers-reduced-motion:reduce){.busybar i::after{animation:none;left:0;width:100%;opacity:.45}} .status.warn{color:var(--warn)} .devwallet{display:flex;align-items:center;gap:8px;border:1px dashed rgba(232,196,107,.55);border-radius:10px; padding:4px 5px 4px 10px;font-size:12px;color:var(--dim)} .devwallet .tag{color:var(--warn);font-weight:600;letter-spacing:.05em;font-size:10.5px} .devwallet code{color:var(--ink)} /* ---------- reuse warnings ---------- */ .reuse{display:inline-block;padding:1px 8px;border:1px solid rgba(232,196,107,.55);border-radius:999px;background:rgba(232,196,107,.07); color:var(--warn);font-size:10.5px;font-weight:500;line-height:17px;white-space:nowrap;cursor:help;vertical-align:1px} .warnbox{border-color:rgba(232,196,107,.3);background:linear-gradient(160deg,rgba(232,196,107,.07),rgba(26,24,34,.92) 60%);font-size:13.5px;color:var(--ink2)} .warnbox a{color:var(--warn);text-decoration:underline} /* ---------- token page ---------- */ .notfound{padding:80px 28px;color:var(--dim);text-align:center} .coin{grid-template-columns:minmax(0,1fr) 370px} .coinhead{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .coinhead h1{font-size:24px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .coinhead h1 .tk{font-size:15px;font-weight:500} .av.xl{width:76px;height:76px;border-radius:50%;font-size:22px;box-shadow:0 0 0 1px rgba(255,255,255,.07)} .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;color:var(--dim);font-size:13px} .addr.full{display:inline-block;margin:0;padding:4px 10px;word-break:break-all;font-size:12px} .links{display:flex;gap:12px} .links a{color:var(--dim);border-bottom:1px dotted var(--line3)} .links a:hover{color:var(--ink)} .mcap{margin-left:auto;text-align:right} .mcap .big{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:2px} .chart{margin-top:10px;height:240px} .chart svg{width:100%;height:100%;display:block;overflow:visible} .chart .gridline{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke} .chart .axis{fill:var(--dim);font-size:11px;font-family:var(--sans)} .tablewrap{overflow-x:auto;margin-top:12px} .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{color:var(--dim);font-weight:500;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:12px} .tbl td{padding:10px 10px;border-bottom:1px solid rgba(44,41,55,.7);white-space:nowrap} .tbl tbody tr:hover td{background:rgba(255,255,255,.015)} .tbl .r{text-align:right} .tbl a{color:var(--ink2)} .tbl a:hover{color:var(--ink)} .tbl code{font-size:12px} .up{color:var(--up)} .down{color:var(--down)} .label{margin-left:6px;padding:0 6px;border:1px solid var(--line2);border-radius:999px;color:var(--dim);font-size:10.5px} .empty-row{text-align:center;padding:26px 0} .quick{display:flex;gap:6px;margin-top:10px} .quick .btn{flex:1;padding:8px 0;font-size:13px} .rail label{margin-top:16px} #t-side{margin-bottom:2px} .rail label input{margin-top:8px} /* a dollar amount: the $ sits inside the field (spec/16) */ .usdinput{position:relative;display:block} .usdinput .cur{position:absolute;left:12px;bottom:11px;color:var(--dim);font-size:14px;pointer-events:none} .usdinput input{padding-left:24px} /* Max slippage: a quiet line under the trade buttons that opens the presets, so the setting is always visible without competing with Buy. Mirrors backend/slippage.py's bands via K.SLIPPAGE_PRESETS. */ .slip{margin-top:10px} .sliplink{background:none;border:0;padding:0;color:var(--dim);font-size:12px;cursor:pointer;font:inherit;font-size:12px} .sliplink:hover{color:var(--fg)} .sliplink b{color:var(--fg);font-weight:600} .slipbox{margin-top:8px;padding:10px;border:1px solid var(--line2);border-radius:8px} .slipbox .quick{margin-top:0} .slipbox .quick .btn{flex-direction:column;gap:1px;line-height:1.25;padding:6px 2px} .slipbox .quick .btn .sub{font-size:10px} .slipbox .quick .btn.on{border-color:var(--accent,#6c9);background:rgba(255,255,255,.06)} .slipcustom{display:block;margin-top:8px;font-size:12px;color:var(--dim)} .slipcustom .usdinput .cur{left:auto;right:12px} .slipcustom .usdinput input{padding-left:12px;padding-right:26px} .slipbox .sub{margin:6px 0 0;font-size:11px} /* Order progress (K.orderProgressHtml): shown on the create page and under Addresses. Deliberately shows PROGRESS and a finish time only -- never worker or provider counts, which are logged server-side instead. */ .oprog{margin:8px 0 0} .oprog-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--fg)} .oprog-pct{color:var(--dim);font-variant-numeric:tabular-nums} .oprog-bar{margin:5px 0 4px;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden} .oprog-fill{height:100%;border-radius:999px;background:var(--accent,#6c9);transition:width .6s ease} .oprog.late .oprog-fill{background:var(--warn,#d8a657)} .oprog .sub{margin:0} @media (prefers-reduced-motion:reduce){.oprog-fill{transition:none}} .progress{height:8px;border-radius:999px;background:var(--field);border:1px solid var(--line);overflow:hidden;margin-top:14px} .progress div{height:100%;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);transition:width .6s} .kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin-top:12px;font-size:13px} .kv span{color:var(--dim)} .kv b{text-align:right;font-weight:500} .kv a{color:var(--ink);border-bottom:1px dotted var(--line3)} .desc{margin:10px 0 0;white-space:pre-wrap;word-break:break-word;font-size:13.5px;color:var(--ink2)} .desc.dim{color:var(--dim)} /* ---------- profile, fees ---------- */ .profilepage{padding:22px 20px 70px;display:grid;gap:18px} .profilehead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .profilehead .grow{flex:1;min-width:0} .profilehead h1{font-size:24px;display:flex;align-items:center;gap:8px;margin-top:2px} .profilehead .kv{max-width:440px} .collectbox{min-width:0;text-align:right} .av.sm{width:34px;height:34px;border-radius:50%} .tokcell{display:flex;gap:12px;align-items:center} .tbl .tokcell b{color:var(--ink);font-weight:600} .tbl td .sub{margin-left:4px} .feespage{padding:22px 20px 70px;display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px;align-items:start} .feespage > .sub,.feespage > .secthd,.feespage > h1,.feespage > h2{grid-column:1/-1} .feespage > .secthd{margin:0} .feespage > .panel+.panel{margin-top:0} .addrpage{padding:22px 20px 70px;display:grid;gap:18px} .addrpage > .panel+.panel{margin-top:0} .addrpage h2{margin:0} .addrlist{display:grid;gap:10px} .addritem{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px} .addritem code{word-break:break-all} .addritem .actions{display:flex;gap:8px;flex-wrap:wrap} .chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink2)} /* ---------- footer: fixed ticker bar ---------- */ .ic-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.8 2.8h3.1l-6.8 7.8 8 10.6h-6.3l-4.9-6.4-5.6 6.4H2.2l7.3-8.3L1.8 2.8h6.4l4.4 5.9zm-1.1 16.5h1.7L7.4 4.6H5.5z'/%3E%3C/svg%3E")} .ic-telegram{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 3.3L2.9 10.5c-1.3.5-1.2 1.3-.2 1.6l4.7 1.5 1.8 5.6c.2.7.4.9.9.9s.7-.2 1-.5l2.4-2.3 4.9 3.6c.9.5 1.6.2 1.8-.8l3.2-15.2c.3-1.3-.5-1.9-2-1.6zM9.3 13.3l8.6-5.4c.4-.3.8-.1.5.2l-7.1 6.4-.3 3.3z'/%3E%3C/svg%3E")} .ic-discord{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.3 5.3A16.6 16.6 0 0 0 15.2 4l-.5 1a15.4 15.4 0 0 0-5.4 0l-.5-1a16.6 16.6 0 0 0-4.1 1.3C2.1 9.1 1.4 12.9 1.8 16.6a16.7 16.7 0 0 0 5 2.5l1.1-1.7c-.6-.2-1.2-.5-1.7-.9l.4-.3a11.9 11.9 0 0 0 10.8 0l.4.3c-.5.4-1.1.7-1.7.9l1.1 1.7a16.6 16.6 0 0 0 5-2.5c.5-4.3-.8-8.1-2.9-11.3zM8.7 14.3c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.8.9 1.8 2-.8 2-1.8 2zm6.6 0c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.8.9 1.8 2-.8 2-1.8 2z'/%3E%3C/svg%3E")} .tk-btc,.tk-eth,.tk-hype,.tk-bnb{background:var(--i) center/contain no-repeat;-webkit-mask:none;mask:none} .tk-bnb{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 36 36'%3E%3Ccircle cx='12' cy='12' r='18' fill='%23372d0b'/%3E%3Cpath fill='%23F0B90B' d='M16.624 13.92l2.718 2.716-7.354 7.353-7.353-7.352 2.718-2.717 4.635 4.66 4.636-4.66zm4.637-4.637L24 12l-2.715 2.716L18.568 12l2.693-2.717zm-9.272.001l2.716 2.692-2.717 2.717L9.272 12l2.717-2.715zm-9.273-.001L5.41 12l-2.692 2.692L0 12l2.716-2.717zM11.989.012l7.353 7.33-2.718 2.715-4.635-4.636-4.636 4.66-2.717-2.716L11.989.012z'/%3E%3C/svg%3E")} .tk-btc{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23f7931a'/%3E%3Cpath fill='white' d='M16.6 10.5c.2-1.5-.9-2.3-2.5-2.8l.5-2-1.2-.3-.5 2-1-.2.5-2-1.2-.3-.5 2-2.5-.6-.3 1.3.9.2c.5.1.6.4.5.7l-1.4 5.7c-.1.2-.3.4-.7.3l-.9-.2-.6 1.4 2.4.6-.5 2.1 1.2.3.5-2 1 .3-.5 2 1.2.3.5-2.1c2.1.4 3.7.2 4.4-1.7.5-1.5 0-2.4-1.1-3 .8-.2 1.4-.7 1.6-1.8zm-2.8 3.9c-.4 1.5-2.9.7-3.8.5l.7-2.7c.8.2 3.5.6 3.1 2.2zm.4-4c-.3 1.4-2.4.7-3.1.5l.6-2.4c.7.2 2.9.5 2.5 1.9z'/%3E%3C/svg%3E")} .tk-eth{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23343a52'/%3E%3Cpath fill='%23c9d2ff' d='M12 3.8l-5 8.3 5 3 5-3z'/%3E%3Cpath fill='%238a96d6' d='M12 16.1l-5-3 5 7.1 5-7.1z'/%3E%3C/svg%3E")} .tk-hype{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230f2e2a'/%3E%3Cpath fill='%2397fce4' d='M19 11.9c0 4.2-2.6 5.5-4 4.3-1.2-1-1.6-3.1-3.4-3.3-2.3-.3-2.5 2.7-4 2.7-1.8 0-1.9-2.4-1.9-3.8 0-1.4.4-3.4 2-3.4 1.9 0 2 2.8 4.4 2.9 2.4.1 2.4-3.2 4.2-3.2 1.5 0 2.7 1.2 2.7 3.8z'/%3E%3C/svg%3E")} body.has-footbar{padding-bottom:40px} body.has-footbar .siderail{height:calc(100vh - 36px)} @media(max-width:1080px){body.has-footbar .siderail{height:auto}} .sitefoot{position:fixed;left:0;right:0;bottom:0;z-index:25} .footbar{display:flex;align-items:center;gap:18px;height:36px;padding:0 20px;border-top:1px solid var(--line); background:rgba(15,14,20,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:12.5px} .ticker{display:flex;align-items:center;gap:20px;min-width:0;overflow:hidden;white-space:nowrap} .tick{display:inline-flex;align-items:center;gap:7px;padding:3px 6px;margin:0 -6px;border-radius:6px;color:var(--ink)} .tick .ic{width:14px;height:14px;vertical-align:0} .tick .px{font:500 12.5px var(--sans);font-variant-numeric:tabular-nums} .tick .chg{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums} .tick.flash-up{animation:flashUp 1s ease-out} .tick.flash-down{animation:flashDown 1s ease-out} @keyframes flashUp{0%{background:rgba(50,213,131,.2);color:var(--up)}100%{background:transparent}} @keyframes flashDown{0%{background:rgba(240,98,93,.2);color:var(--down)}100%{background:transparent}} @media(prefers-reduced-motion:reduce){.tick.flash-up,.tick.flash-down{animation:none}} .footright{margin-left:auto;display:flex;align-items:center;gap:18px;white-space:nowrap;color:var(--ink2)} .fstat{font-variant-numeric:tabular-nums} .flab{color:var(--faint);margin-right:3px} .health{display:inline-flex;align-items:center;gap:7px;font-weight:500;color:var(--ink2)} .sdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)} /* Operational is green, degraded amber, down red -- a status light is read by colour before it is read by word, so it never borrows the house colour. */ .sdot.ok{background:var(--up);box-shadow:0 0 8px rgba(50,213,131,.45)} .health:has(.sdot.ok){color:var(--up)} .sdot.degraded{background:#f5a524;box-shadow:0 0 8px rgba(245,165,36,.45)} .health:has(.sdot.degraded){color:#f5a524} .sdot.down{background:var(--down);box-shadow:0 0 8px rgba(249,112,102,.45)} .health:has(.sdot.down){color:var(--down)} .socials{display:flex;align-items:center;gap:4px;padding-left:14px;border-left:1px solid var(--line2)} .social{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--dim)} .social .ic{width:14px;height:14px} a.social:hover{color:var(--ink);background:rgba(255,255,255,.05)} .social.off{color:var(--faint);opacity:.6;cursor:default} @media(max-width:1180px){.fstat{display:none}} @media(max-width:700px){ .footbar{padding:0 12px;gap:10px} .ticker{gap:14px} .tick .chg,.socials{display:none} } /* ---------- home board ---------- */ .board{} /* ---------- create page ---------- */ .createpage{padding:22px 20px 60px} .create-title h1{font-size:34px;letter-spacing:-.025em} .create-title .sub{font-size:14.5px;margin-top:8px} .create-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px} /* step 1: everything after the chain waits for a chain (the chain decides what a ticker and an address can be) */ fieldset.gated{border:0;margin:0;padding:0;min-width:0} fieldset.gated:disabled{opacity:.45} fieldset.gated:disabled *{cursor:not-allowed} #to-auto{margin-top:14px} .steps.stepper{width:auto;margin:24px 0 0;list-style:none} .steps.stepper .step{opacity:.55;transition:opacity .2s} .steps.stepper .step.on,.steps.stepper .step.done{opacity:1} .steps.stepper .step.done{cursor:pointer} .steps.stepper .step.on .num{box-shadow:0 0 18px -2px var(--accent-glow);background:var(--accent-soft)} .steps.stepper .step.done .num{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)} .create-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,480px);gap:14px;margin-top:22px;align-items:start} .create-grid > *{min-width:0} .create h3{font-size:19px;margin-bottom:6px} .field{display:block;color:var(--ink2);font-size:13px;margin-top:18px} .field > input,.field > textarea,.field > .addrline,.field > .toggle,.field > .dropzone,.field > select{margin-top:8px} #pair{width:100%;max-width:100%} #pair-note{margin-top:6px} #pair-note .warn{color:var(--down, #ff6b6b)} .fgrid{display:grid;gap:14px} .fgrid.two{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} .fgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))} .fgrid .field{margin-top:18px} .fgrid.buyrow{align-items:end;grid-template-columns:minmax(0,220px) minmax(0,1fr)} .fgrid.buyrow .sub{margin:0 0 10px} .dropzone{position:relative;display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px dashed var(--line3);border-radius:12px; background:var(--field);cursor:pointer;transition:border-color .15s,background .15s} .dropzone:hover,.dropzone.over{border-color:var(--accent-line);background:var(--accent-soft)} .dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer} .dropzone .thumb{width:64px;height:64px;border-radius:50%;border-style:solid;color:var(--dim)} .dropzone .thumb .ic{width:20px;height:20px} .drop-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .drop-text b{font-weight:500;color:var(--ink)} .drop-text .sub{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .opt-btn.big{flex-direction:column;align-items:flex-start;gap:3px;padding:13px 14px;text-align:left;white-space:normal} .opt-btn.big b{font-weight:600;font-size:14px;color:var(--ink)} .opt-btn.big .sub{margin:0} .navrow.end{justify-content:flex-end} .navrow{margin-top:24px} .navrow .btn.primary{margin-left:auto} .create .addrcard{margin-top:12px} .create-side > .panel+.panel{margin-top:18px} .preview-wrap{margin-top:14px} .card.preview{max-width:380px;margin:0 auto;pointer-events:none} .card.preview .change{color:var(--dim)} .create .review{margin-top:14px} /* ---------- pairing picker: a company is recognised by its logo, which a native