/* chart.css: the ChART look (black gallery), ported 2026-10-20 from the approved mockup
   C:/Users/Josep/launchpad_layout/mockup/styles.css. Every color, font and size is a variable from
   site/css/ui.css (the one token file); nothing here defines :root. Load ui.css first. */
/* ChART shared styles. Black, Apple-clean, museum layout. Neon only in candles, the intro ripple and the wordmark. */

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ch-bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ch-bg);color:var(--ch-ink);font-family:var(--ch-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,svg,canvas{max-width:100%}
:focus-visible{outline:2px solid var(--ch-white);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1400px;margin:0 auto;padding:0 var(--ch-gut)}
.narrow{max-width:960px;margin:0 auto;padding:0 var(--ch-gut)}
.mute{color:var(--ch-mute)}.faint{color:var(--ch-faint)}.num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--ch-display);font-weight:600;letter-spacing:-.012em}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}

/* wordmark: Ch plain, ART neon gradient echoing the ripple */
.mark{font-size:21px;letter-spacing:-.03em;display:inline-flex;align-items:baseline;line-height:1}
/* brand round 2 (4): one wordmark everywhere (header, footer, share cards, assets/chart-wordmark.svg): white "Ch", ART in
   the one signature gradient, green, cyan, magenta, lime in that order, still */
.mark b{font-weight:300;color:var(--ch-white)}
.mark i{font-style:normal;font-weight:700;background:linear-gradient(90deg,var(--ch-neon-green) 0%,var(--ch-neon-cyan) 35%,var(--ch-neon-magenta) 70%,var(--ch-neon-lime) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes wmshift{to{background-position:-200% 0}}

/* notice strip */
.notice{background:var(--ch-k0c0c0c);border-bottom:1px solid var(--ch-line);color:var(--ch-mute);font-size:12px;text-align:center;padding:var(--sp-8) var(--sp-16);letter-spacing:.01em}
.notice a{color:var(--ch-kd0d0d0);text-decoration:underline;text-underline-offset:2px}
.notice .s{display:none}

/* header */
header.top{position:sticky;top:0;z-index:50;background:var(--ch-rgba-0-0-0-p72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ch-line)}
.bar{height:var(--ch-hdr);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-20);position:relative}
nav.main{display:flex;gap:var(--sp-28);flex:1;margin-left:var(--sp-36)}
nav.main a{color:var(--ch-mute);font-size:13px;letter-spacing:.01em;transition:color .2s;padding:var(--sp-6) 0;border-bottom:1px solid transparent}
nav.main a:hover{color:var(--ch-white)}
nav.main a[aria-current=page]{color:var(--ch-white);border-bottom-color:var(--ch-white)}
.right{display:flex;align-items:center;gap:var(--sp-10)}
.seg{display:inline-flex;padding:3px;border:1px solid var(--ch-line2);border-radius:999px;background:var(--ch-k070707)}
.seg button{border:0;background:transparent;color:var(--ch-mute);padding:var(--sp-6) var(--sp-14);border-radius:999px;font-size:12px;font-weight:500;transition:all .2s;white-space:nowrap}
.seg button.on,.seg button[aria-pressed=true]{background:var(--ch-k1f1f1f);color:var(--ch-white)}
.seg.sm button{padding:var(--sp-4) var(--sp-12);font-size:11.5px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);background:var(--ch-white);color:var(--ch-black);border:1px solid var(--ch-white);border-radius:999px;padding:var(--sp-10) var(--sp-20);font-weight:600;font-size:13px;letter-spacing:-.005em;transition:transform .2s,background .2s;white-space:nowrap}
.pill:hover{transform:translateY(-1px)} /* the colour change is in ui.css (primary hover) */
.pill.ghost{background:transparent;color:var(--ch-white);border-color:var(--ch-line2)}
.pill.ghost:hover{background:var(--ch-k111);border-color:var(--ch-k555)}
.pill.big{padding:var(--sp-16) var(--sp-40);font-size:15px}
.pill.sm{padding:var(--sp-6) var(--sp-14);font-size:12px}
.pill[disabled],.pill.dis{opacity:.4;pointer-events:none}
.ico{width:38px;height:38px;border:1px solid var(--ch-line2);border-radius:50%;background:transparent;display:inline-flex;align-items:center;justify-content:center}
.ico:hover{background:var(--ch-k111)}
.ico svg{width:16px;height:16px;stroke:var(--ch-white);fill:none;stroke-width:1.6}
.chip-b{display:inline-flex;align-items:center;gap:var(--sp-6);border:1px solid var(--ch-line2);border-radius:999px;padding:var(--sp-6) var(--sp-12);font-size:12px;color:var(--ch-kd8d8d8);background:var(--ch-k070707)}
.chip-b b{font-weight:500;color:var(--ch-mute)}
.chip-b.err{border-color:var(--ch-k777)}
.chip-b.err::after{content:"!";display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--ch-white);color:var(--ch-black);font-size:10.5px;font-weight:700}
.chip-b.pend::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ch-white);animation:pulse 1.6s infinite}
.tag{display:inline-flex;align-items:center;border:1px solid var(--ch-k555);border-radius:999px;padding:2px var(--sp-10);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ch-kcfcfcf);white-space:nowrap}
.tag.sol{border-style:dashed}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ch-white);animation:pulse 1.6s ease-in-out infinite;display:inline-block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.burger{display:none;width:38px;height:38px;border:1px solid var(--ch-line2);border-radius:50%;background:transparent;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1px;background:var(--ch-white);transition:transform .25s,top .25s}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:22px}
.burger.open i:nth-child(1){top:18px;transform:rotate(45deg)}
.burger.open i:nth-child(2){top:18px;transform:rotate(-45deg)}
.drawer{display:none;border-top:1px solid var(--ch-line);background:var(--ch-black);padding:var(--sp-8) var(--ch-gut) var(--sp-24);max-height:calc(100vh - 100px);overflow:auto}
.drawer a.l{display:block;padding:var(--sp-12) 0;font-family:var(--ch-display);font-size:28px;border-bottom:1px solid var(--ch-line);font-weight:600;letter-spacing:-.012em}
.drawer .seg{margin-top:var(--sp-20)}
.drawer .row{display:flex;gap:var(--sp-10);margin-top:var(--sp-16);flex-wrap:wrap}
.drawer.open{display:block}
.searchbox{position:absolute;left:0;right:0;top:100%;background:var(--ch-k050505);border-bottom:1px solid var(--ch-line2);padding:var(--sp-14) 0 var(--sp-20);display:none}
.searchbox.open{display:block}
.searchbox input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ch-line2);font-size:20px;padding:var(--sp-10) 0;font-family:var(--ch-display);font-weight:500;letter-spacing:-.01em}
.searchbox input:focus{outline:none;border-color:var(--ch-white)}
.sres{display:grid;gap:2px;margin-top:var(--sp-10)}
.sres a{display:flex;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-10) var(--sp-4);border-bottom:1px solid var(--ch-line);font-size:13px}
.sres a:hover{background:var(--ch-k0b0b0b)}

/* sections */
section.block{padding:var(--sp-88) 0 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-20);margin-bottom:var(--sp-36);flex-wrap:wrap}
.head h2,h2.t{font-family:var(--ch-display);font-size:clamp(34px,4vw,52px);margin:0;line-height:1;font-weight:600;letter-spacing:-.022em}
.head .sub{color:var(--ch-mute);font-size:13px}
.head a{color:var(--ch-mute);font-size:13px}.head a:hover{color:var(--ch-white)}
h1.t{font-family:var(--ch-display);font-size:clamp(40px,5.4vw,72px);margin:0;line-height:1;font-weight:600;letter-spacing:-.022em}
.page-head{padding:var(--sp-64) 0 var(--sp-36);border-bottom:1px solid var(--ch-line)}
.page-head p{color:var(--ch-mute);margin:var(--sp-14) 0 0;max-width:560px}
.tabs{display:flex;gap:var(--sp-6);flex-wrap:wrap;align-items:center}
.tabs button{border:1px solid var(--ch-line2);background:transparent;color:var(--ch-mute);padding:var(--sp-8) var(--sp-16);border-radius:999px;font-size:12.5px;transition:all .2s}
.tabs button[aria-pressed=true]{background:var(--ch-white);color:var(--ch-black);border-color:var(--ch-white)}
.tabs button:hover{color:var(--ch-white)}
.tabs button[aria-pressed=true]:hover{color:var(--ch-black)}
.fld{background:var(--ch-field);border:1px solid var(--ch-line2);border-radius:10px;padding:var(--sp-10) var(--sp-14);width:100%;transition:border-color .2s}
.fld:focus{outline:none;border-color:var(--ch-white)}
.fld::placeholder{color:var(--ch-faint)}
select.fld{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ch-k888) 50%),linear-gradient(135deg,var(--ch-k888) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:var(--sp-36)}
textarea.fld{resize:vertical;min-height:84px}
.search{display:flex;align-items:center;gap:var(--sp-8);border:1px solid var(--ch-line2);border-radius:999px;padding:var(--sp-6) var(--sp-14);background:var(--ch-k070707);min-width:240px}
.search input{background:transparent;border:0;flex:1;min-width:0;padding:3px 0}
.search input:focus{outline:none}
.search svg{width:15px;height:15px;stroke:var(--ch-mute);fill:none;stroke-width:1.6}
.search:focus-within{border-color:var(--ch-white)}

/* gallery */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-56) var(--sp-32)}
.card{display:block;position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.frame{padding:var(--sp-12);background:var(--ch-k080808);border:1px solid var(--ch-line);border-radius:3px;transition:border-color .3s,box-shadow .35s}
.mat{border:1px solid var(--ch-k121212);background:var(--ch-black);aspect-ratio:4/5;position:relative}
.mat canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.card:hover{transform:translateY(-5px)}
.card:hover .frame{border-color:transparent;background:linear-gradient(var(--ch-k080808),var(--ch-k080808)) padding-box,var(--ch-oil) border-box;box-shadow:0 0 0 1px var(--ch-rgba-255-255-255-p06),0 0 28px var(--ch-rgba-255-255-255-p07),0 26px 50px var(--ch-rgba-0-0-0-p7)}
.meta{padding:var(--sp-16) var(--sp-4) 0;display:grid;gap:var(--sp-6)}
.meta h3{font-family:var(--ch-display);font-size:25px;margin:0;line-height:1.1;display:flex;gap:var(--sp-10);align-items:center;font-weight:500;letter-spacing:-.01em}
.meta h3 img{width:22px;height:22px;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.meta .row{display:flex;justify-content:space-between;gap:var(--sp-10);color:var(--ch-mute);font-size:12.5px;flex-wrap:wrap}
.meta .row b{font-weight:500;color:var(--ch-ke8e8e8)}
.meta .d{color:var(--ch-faint);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta .links{display:flex;gap:var(--sp-14);flex-wrap:wrap;font-size:12px;color:var(--ch-mute);margin-top:2px}
.meta .links a:hover,.meta .links button:hover{color:var(--ch-white)}
.cp{background:none;border:0;padding:0;color:var(--ch-mute);font-size:12px;display:inline-flex;gap:var(--sp-6);align-items:center}
.cp:hover{color:var(--ch-white)}
.cp svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6}
.agent{font-size:11.5px;color:var(--ch-faint)}
.agent b{font-weight:500;color:var(--ch-mute)}
.live .mat{aspect-ratio:1/1}
.bar2{height:2px;background:var(--ch-k1c1c1c);margin-top:var(--sp-12);border-radius:2px;overflow:hidden}
.bar2 i{display:block;height:100%;width:0;background:var(--ch-oil);transition:width .3s}
.prog{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-8);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ch-faint)}
.prog b{font-weight:500;color:var(--ch-kcfcfcf);font-variant-numeric:tabular-nums}
.prog span{display:inline-flex;align-items:center;gap:var(--sp-8)}
.empty{padding:var(--sp-56) 0;text-align:center;color:var(--ch-mute);border:1px dashed var(--ch-line2);border-radius:6px;grid-column:1/-1}
.empty b{display:block;font-family:var(--ch-display);font-size:26px;color:var(--ch-white);margin-bottom:var(--sp-6);font-weight:600;letter-spacing:-.012em}

/* hero */
.hero{border-bottom:1px solid var(--ch-line)}
.stage{position:relative;height:clamp(340px,70vh,720px);border-bottom:1px solid var(--ch-line);background:var(--ch-black)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.chip{position:absolute;left:var(--ch-gut);top:24px;display:inline-flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-14);border:1px solid var(--ch-rgba-255-255-255-p16);border-radius:999px;background:var(--ch-rgba-0-0-0-p55);backdrop-filter:blur(8px);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ch-kd8d8d8)}
.stage .arrow{position:absolute;top:24px;width:36px;height:36px;border-radius:50%;border:1px solid var(--ch-rgba-255-255-255-p18);background:var(--ch-rgba-0-0-0-p55);display:grid;place-items:center}
.stage .arrow svg{width:14px;height:14px;stroke:var(--ch-white);fill:none;stroke-width:1.6}
.stage .arrow:hover{background:var(--ch-k111)}
.stage .a1{right:calc(var(--ch-gut) + 44px)}.stage .a2{right:var(--ch-gut)}
.info{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-32);padding-top:var(--sp-36);padding-bottom:var(--sp-44)}
.info #hname{font-family:var(--ch-display);font-size:clamp(44px,6.2vw,84px);line-height:.95;margin:0 0 var(--sp-12);font-weight:600;letter-spacing:-.022em}
.by{color:var(--ch-mute);font-size:14px}.by span{color:var(--ch-kcfcfcf)}
.kick{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ch-faint);margin-bottom:var(--sp-10)}
.buy{display:flex;align-items:center;gap:var(--sp-28)}
.price{text-align:right}
.price small{display:block;color:var(--ch-faint);font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}
.price strong{font-weight:500;font-size:23px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price em{font-style:normal;color:var(--ch-mute);font-size:13px;margin-left:var(--sp-4)}
.ticker{border-bottom:1px solid var(--ch-line);overflow:hidden;white-space:nowrap;background:var(--ch-k030303)}
.ticker .tr{display:inline-flex;align-items:center;gap:var(--sp-64);padding:var(--sp-16) 0 var(--sp-20);animation:marq 90s linear infinite;will-change:transform;color:var(--ch-mute);font-size:20px;letter-spacing:.01em}
.ticker .ti{display:inline-flex;align-items:baseline;gap:var(--sp-12)}
.ticker .ts{font-weight:700;letter-spacing:-.01em;background:linear-gradient(90deg,var(--ch-neon-green),var(--ch-neon-cyan),var(--ch-neon-magenta),var(--ch-neon-lime));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ticker .tc{font-style:normal;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ch-kd4d4d4)}
.ticker .tc.up{color:var(--ch-white)}.ticker .tc.dn{color:var(--ch-mute)}
.ticker .tp{font-size:12px;color:var(--ch-faint);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ticker .cb{align-self:center}
@keyframes marq{to{transform:translateX(-50%)}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ch-line)}
.steps li{list-style:none;padding:var(--sp-28) var(--sp-28) var(--sp-36) 0;border-right:1px solid var(--ch-line);margin-right:var(--sp-28)}
.steps li:last-child{border-right:0}
.steps .n{font-family:var(--ch-display);font-size:44px;color:var(--ch-k444);line-height:1;font-weight:600;letter-spacing:-.022em}
.steps h3{font-family:var(--ch-display);font-size:30px;margin:var(--sp-14) 0 var(--sp-8);font-weight:600;letter-spacing:-.012em}
.steps p{margin:0;color:var(--ch-mute);max-width:260px}
ol.steps{margin:0;padding:0}
.docrow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ch-line)}
.docrow a{padding:var(--sp-28) var(--sp-28) var(--sp-32) 0;display:block;border-right:1px solid var(--ch-line);margin-right:var(--sp-28)}
.docrow a:last-child{border-right:0}
.docrow b{font-family:var(--ch-display);font-size:28px;display:block;margin-bottom:var(--sp-6);font-weight:600;letter-spacing:-.012em}
.docrow span{color:var(--ch-mute)}
.docrow a:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* accordion */
.acc{border-top:1px solid var(--ch-line)}
details.q{border-bottom:1px solid var(--ch-line)}
details.q summary{list-style:none;cursor:pointer;padding:var(--sp-20) var(--sp-40) var(--sp-20) 0;font-size:17px;position:relative}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:1px solid var(--ch-white);border-bottom:1px solid var(--ch-white);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
details.q[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details.q p{margin:0 0 var(--sp-24);color:var(--ch-mute);max-width:720px;font-size:15px;line-height:1.6}
.more{display:inline-flex;gap:var(--sp-10);margin-top:var(--sp-24);color:var(--ch-mute);font-size:13px}.more:hover{color:var(--ch-white)}

/* footer */
footer.foot{margin-top:var(--sp-140);border-top:1px solid var(--ch-line);padding:var(--sp-44) 0 var(--sp-56)}
.ft{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-32);flex-wrap:wrap}
.ft p{margin:var(--sp-8) 0 0;color:var(--ch-faint);font-size:13px;max-width:280px}
.ft nav{display:flex;gap:var(--sp-28);color:var(--ch-mute);font-size:13px;flex-wrap:wrap}
.ft nav a:hover{color:var(--ch-white)}
.copy{margin-top:var(--sp-48);color:var(--ch-k555);font-size:12px;display:flex;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap}
.pillnote{border:1px solid var(--ch-line2);border-radius:999px;padding:var(--sp-6) var(--sp-12);font-size:12px;color:var(--ch-mute)}

/* modal and toast */
.ov{position:fixed;inset:0;z-index:200;background:var(--ch-rgba-0-0-0-p72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:var(--sp-20);overflow:auto}
.dlg{background:var(--ch-k0a0a0a);border:1px solid var(--ch-line2);border-radius:16px;width:min(460px,100%);padding:var(--sp-24);box-shadow:0 30px 80px var(--ch-rgba-0-0-0-p8);max-height:calc(100vh - 40px);overflow:auto}
.dlg header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-16)}
.dlg h2{font-family:var(--ch-display);font-size:30px;margin:0;font-weight:600;letter-spacing:-.012em}
.dlg .x{width:32px;height:32px;border:1px solid var(--ch-line2);border-radius:50%;background:transparent;font-size:17px;line-height:1}
.dlg .x:hover{background:var(--ch-k151515)}
.dlg p{margin:0 0 var(--sp-12)}
.dlg .acts{display:flex;gap:var(--sp-10);flex-wrap:wrap;margin-top:var(--sp-16)}
.wl{display:grid;gap:var(--sp-8)}
.wl button{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-14) var(--sp-16);border:1px solid var(--ch-line2);background:var(--ch-k0d0d0d);border-radius:12px;text-align:left}
.wl button:hover{border-color:var(--ch-k666)}
.wl small{color:var(--ch-faint)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ch-white);color:var(--ch-black);border-radius:999px;padding:var(--sp-10) var(--sp-20);font-size:13px;font-weight:500;z-index:300;box-shadow:0 10px 40px var(--ch-rgba-0-0-0-p6)}
.note{color:var(--ch-mute);font-size:13px}
.err{color:var(--ch-white);font-size:12.5px;min-height:0}
.err:not(:empty)::before{content:"Check: ";color:var(--ch-mute)}
.warnline{border:1px solid var(--ch-k666);border-radius:10px;padding:var(--sp-10) var(--sp-14);font-size:13px;display:flex;justify-content:space-between;gap:var(--sp-12);align-items:center;flex-wrap:wrap}
dl.kv{margin:0;display:grid}
dl.kv>div{display:flex;justify-content:space-between;gap:var(--sp-16);padding:var(--sp-10) 0;border-bottom:1px solid var(--ch-line);font-size:13px}
dl.kv dt{color:var(--ch-mute)}dl.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{font-weight:500;color:var(--ch-faint);text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:var(--sp-10) var(--sp-12) var(--sp-10) 0;border-bottom:1px solid var(--ch-line2)}
table.t td{padding:var(--sp-12) var(--sp-12) var(--sp-12) 0;border-bottom:1px solid var(--ch-line);font-variant-numeric:tabular-nums;vertical-align:top}
table.t tr.paint td{color:var(--ch-faint)}
.tscroll{overflow-x:auto}
.rowline{padding:var(--sp-14) 0;border-top:1px solid var(--ch-line)}

/* token page */
.thero{display:grid;grid-template-columns:1fr auto;gap:var(--sp-40);align-items:end;padding:var(--sp-56) 0 var(--sp-36)}
.tid{display:flex;gap:var(--sp-24);align-items:flex-start}
.tid .av{width:84px;height:84px;border:1px solid var(--ch-line2);border-radius:4px;background:var(--ch-k080808);display:grid;place-items:center;overflow:hidden;flex:none;font-family:var(--ch-display);font-size:30px;font-weight:600;letter-spacing:-.012em}
.tid .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.tid h1{font-family:var(--ch-display);font-size:clamp(40px,5vw,68px);line-height:.98;margin:0 0 var(--sp-8);font-weight:600;letter-spacing:-.022em}
.tid .sy{display:flex;gap:var(--sp-12);align-items:center;flex-wrap:wrap;color:var(--ch-mute)}
.tid .ds{color:var(--ch-mute);max-width:560px;margin:var(--sp-12) 0 0}
.badge{display:inline-flex;align-items:center;gap:var(--sp-8);border:1px solid var(--ch-k666);border-radius:999px;padding:3px var(--sp-12);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ch-white)}
.badge.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ch-white)}
.badge.paint{border-style:dashed}
.badge.paint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ch-white);animation:pulse 1.4s infinite}
.badge.wait{color:var(--ch-mute);border-color:var(--ch-line2)}
.mk{display:grid;gap:var(--sp-24);justify-items:end;min-width:360px}
.mk .pr{font-size:30px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mk .pr small{font-size:13px;color:var(--ch-mute);font-weight:400;margin-left:var(--sp-8)}
.mets{display:flex;gap:var(--sp-32)}
.mets div{text-align:right}
.mets span{display:block;color:var(--ch-faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.mets strong{font-weight:500;font-size:17px}
.acts{display:flex;gap:var(--sp-10);flex-wrap:wrap;justify-content:flex-end}
.paintbar{border:1px solid var(--ch-line2);border-radius:10px;padding:var(--sp-14) var(--sp-20);display:grid;grid-template-columns:1fr auto;gap:var(--sp-8) var(--sp-20);align-items:center;margin-bottom:var(--sp-28);background:var(--ch-k060606)}
.paintbar strong{font-weight:500}
.paintbar .bar2{grid-column:1/-1;margin:0}
.tgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-32);align-items:start}
.panel{border:1px solid var(--ch-line);border-radius:6px;background:var(--ch-panel);padding:var(--sp-24)}
.panel+.panel{margin-top:var(--sp-24)}
.panel h2{font-family:var(--ch-display);font-size:26px;margin:0 0 var(--sp-14);font-weight:600;letter-spacing:-.012em}
.ch-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-14);flex-wrap:wrap;margin-bottom:var(--sp-14)}
.ch-head h2{margin:0}
.ch-tools{display:flex;gap:var(--sp-8);align-items:center;flex-wrap:wrap;justify-content:space-between;margin-bottom:var(--sp-10)}
.ch-tools .seg button{padding:var(--sp-4) var(--sp-12)}
.chartbox{position:relative;height:clamp(300px,44vw,460px);border:1px solid var(--ch-k101010);background:var(--ch-black);border-radius:3px;touch-action:none}
.chartbox canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.chstate{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--ch-mute);gap:var(--sp-10);align-content:center;background:var(--ch-rgba-0-0-0-p82)}
.ro{position:absolute;left:12px;top:10px;font-size:11.5px;color:var(--ch-mute);pointer-events:none;display:flex;gap:var(--sp-12);flex-wrap:wrap}
.ro b{color:var(--ch-ke0e0e0);font-weight:500}
.cap{margin-top:var(--sp-8);font-size:11.5px;color:var(--ch-faint);text-align:center}
.cap a{text-decoration:underline}
.act-tabs{display:flex;gap:var(--sp-4);border-bottom:1px solid var(--ch-line);margin-bottom:var(--sp-6)}
.act-tabs button{background:none;border:0;padding:var(--sp-10) var(--sp-16);color:var(--ch-mute);border-bottom:1px solid transparent;margin-bottom:-1px}
.act-tabs button[aria-selected=true]{color:var(--ch-white);border-bottom-color:var(--ch-white)}
.paintsum{display:flex;gap:var(--sp-14);align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--ch-k0a0a0a);border-radius:6px;padding:var(--sp-10) var(--sp-14);margin:var(--sp-10) 0;color:var(--ch-mute);font-size:13px}
.sb .panel{padding:var(--sp-20) var(--sp-20)}
.sb h2{font-size:23px}
.drawing{width:100%;aspect-ratio:16/10;background:var(--ch-black);border:1px solid var(--ch-k101010);border-radius:3px;display:block}
.links2{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.links2 a{border:1px solid var(--ch-line2);border-radius:999px;padding:var(--sp-6) var(--sp-14);font-size:12px;color:var(--ch-kd6d6d6)}
.links2 a:hover{border-color:var(--ch-k777);color:var(--ch-white)}
.addr{display:flex;gap:var(--sp-10);align-items:flex-start;flex-wrap:wrap}
.addr code{word-break:break-all;font-size:12px;color:var(--ch-kd6d6d6);flex:1 1 200px;padding:var(--sp-10) var(--sp-12);border:1px dashed var(--ch-line2);border-radius:6px}
.feebar{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px;margin:var(--sp-10) 0 var(--sp-8)}
.feebar i{display:block;background:var(--ch-white)}
.feebar i:nth-child(2){background:var(--ch-k9a9a9a)}.feebar i:nth-child(3){background:var(--ch-k4a4a4a)}
.feelab{display:flex;justify-content:space-between;gap:var(--sp-8);font-size:11.5px;color:var(--ch-mute);flex-wrap:wrap}
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-16)}
.rel a{border:1px solid var(--ch-line);border-radius:6px;padding:var(--sp-16);display:grid;gap:var(--sp-8);background:var(--ch-panel)}
.rel a:hover{border-color:var(--ch-k444)}
.rel .t1{display:flex;gap:var(--sp-10);align-items:center}
.rel img{width:32px;height:32px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.rel h3{font-family:var(--ch-display);font-size:21px;margin:0;line-height:1.1;font-weight:500;letter-spacing:-.01em}
.mockbar{margin-top:var(--sp-88);border-top:1px dashed var(--ch-line2);padding:var(--sp-20) 0;color:var(--ch-faint);font-size:12px;display:flex;gap:var(--sp-14);align-items:center;flex-wrap:wrap}

/* swap */
.dirs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-bottom:var(--sp-14)}
.dirs button{padding:var(--sp-12);border-radius:10px;border:1px solid var(--ch-line2);background:transparent}
.dirs button[aria-pressed=true]{background:var(--ch-white);color:var(--ch-black);border-color:var(--ch-white);font-weight:600}
.dirs button[disabled]{opacity:.4}
label.f{display:grid;gap:var(--sp-6);font-size:12.5px;color:var(--ch-mute);margin-bottom:var(--sp-12)}
.fr{display:flex;gap:var(--sp-8)}.fr .fld{flex:1}
.chk{display:flex;gap:var(--sp-10);align-items:center;font-size:13px;margin-bottom:var(--sp-12);color:var(--ch-kddd)}
.chk input{accent-color:var(--ch-white);width:16px;height:16px}
.qd{margin:var(--sp-14) 0 var(--sp-8);border-top:1px solid var(--ch-line)}
.review{margin-top:var(--sp-14);border:1px solid var(--ch-line2);border-radius:10px;padding:var(--sp-14)}
.review h3{font-family:var(--ch-display);font-size:21px;margin:0 0 var(--sp-6);font-weight:500;letter-spacing:-.01em}

/* wizard */
.wzwrap{padding:var(--sp-56) 0 0;max-width:1100px;margin:0 auto}
.pg{display:flex;gap:var(--sp-8);flex-wrap:wrap;list-style:none;margin:var(--sp-24) 0 0;padding:0}
.pg li{border:1px solid var(--ch-line2);border-radius:999px;padding:var(--sp-6) var(--sp-14);font-size:12px;color:var(--ch-faint);white-space:nowrap}
.pg li.cur{background:var(--ch-white);color:var(--ch-black);border-color:var(--ch-white)}
.pg li.done{color:var(--ch-kd6d6d6);border-color:var(--ch-k555)}
.pg li.skip{border-style:dashed}
.pg li button{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.wzbody{display:grid;grid-template-columns:230px 1fr;gap:var(--sp-40);margin-top:var(--sp-36)}
.agentbox{border:1px solid var(--ch-line);border-radius:6px;padding:var(--sp-20);background:var(--ch-panel);align-self:start;display:grid;gap:var(--sp-14);justify-items:center;text-align:center}
.agentbox svg{width:96px;height:96px}
.bubble{font-size:13px;color:var(--ch-kd6d6d6);min-height:60px;margin:0}
.bubble.bad{color:var(--ch-white)}
.bubble.bad::before{content:"Notice. ";color:var(--ch-mute)}
.wzstep h2{font-family:var(--ch-display);font-size:34px;margin:0 0 var(--sp-20);font-weight:600;letter-spacing:-.012em}
.wzstep[hidden]{display:none}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-14)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-14)}
.wide{grid-column:1/-1}
.looks{display:grid;gap:var(--sp-16);margin-top:var(--sp-20)}
.looks .grp{display:grid;gap:var(--sp-8)}
.looks .grp>span{font-size:12px;color:var(--ch-faint);letter-spacing:.08em;text-transform:uppercase}
.opts{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.opts button{border:1px solid var(--ch-line2);background:transparent;border-radius:999px;padding:var(--sp-6) var(--sp-14);font-size:12.5px;color:var(--ch-mute)}
.opts button[aria-pressed=true]{background:var(--ch-white);color:var(--ch-black);border-color:var(--ch-white)}
.opts button[disabled]{opacity:.35;text-decoration:line-through}
.drawbox{aspect-ratio:16/8;background:var(--ch-black);border:1px solid var(--ch-line2);border-radius:6px;display:grid;place-items:center;color:var(--ch-faint);position:relative;overflow:hidden}
.drawbox canvas{position:absolute;inset:0;width:100%;height:100%}
.drafts{display:flex;gap:var(--sp-10);flex-wrap:wrap;margin:var(--sp-12) 0}
.drafts button{width:96px;aspect-ratio:16/10;border:1px solid var(--ch-line2);background:var(--ch-black);border-radius:4px;padding:0;position:relative;overflow:hidden}
.drafts button[aria-pressed=true]{border-color:var(--ch-white)}
.drafts canvas{width:100%;height:100%;display:block}
.cbox{border:1px solid var(--ch-line2);border-radius:10px;padding:var(--sp-14) var(--sp-16);margin:var(--sp-14) 0;display:grid;gap:var(--sp-10);background:var(--ch-k060606)}
.unit{display:flex;align-items:center;border:1px solid var(--ch-line2);border-radius:10px;background:var(--ch-field);padding:0 var(--sp-12);gap:var(--sp-6)}
.unit input{background:transparent;border:0;padding:var(--sp-10) 0;flex:1;min-width:0}
.unit input:focus{outline:none}
.unit:focus-within{border-color:var(--ch-white)}
.unit span{color:var(--ch-mute);font-size:13px}
.wznav{display:flex;justify-content:space-between;gap:var(--sp-10);margin-top:var(--sp-32);padding-top:var(--sp-24);border-top:1px solid var(--ch-line)}
.manual{display:inline-block;margin-top:var(--sp-24);color:var(--ch-mute);text-decoration:underline;text-underline-offset:3px;font-size:13px}
.manual:hover{color:var(--ch-white)}
.logo-s{display:grid;grid-template-columns:150px 1fr;gap:var(--sp-24);border:1px solid var(--ch-line2);border-radius:10px;padding:var(--sp-20);margin-top:var(--sp-20)}
.logo-s legend{padding:0 var(--sp-8);color:var(--ch-mute);font-size:12px}
.sw{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin:var(--sp-10) 0}
.sw button{width:24px;height:24px;border-radius:50%;border:1px solid var(--ch-k444);padding:0}
.sw button[aria-pressed=true]{outline:2px solid var(--ch-white);outline-offset:2px}
.qa{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.qa button{border:1px solid var(--ch-line2);background:transparent;border-radius:10px;padding:var(--sp-12) var(--sp-20);min-width:96px;text-align:left}
.qa button[aria-checked=true]{border-color:var(--ch-white);background:var(--ch-k111)}
.qa button[disabled]{opacity:.35}
.qa small{display:block;color:var(--ch-faint);font-size:11px}
.stocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--sp-8);max-height:230px;overflow:auto;margin-top:var(--sp-10);padding-right:var(--sp-4)}
.stocks button{border:1px solid var(--ch-line2);background:transparent;border-radius:8px;padding:var(--sp-8) var(--sp-10);text-align:left;font-size:12.5px}
.stocks button[aria-checked=true]{border-color:var(--ch-white);background:var(--ch-k111)}
.stocks button[disabled]{opacity:.35}
.stocks small{display:block;color:var(--ch-faint);font-size:10.5px}
.rv{display:grid;grid-template-columns:240px 1fr;gap:var(--sp-32)}
.rv .pic{display:grid;gap:var(--sp-10);align-content:start}
.rv .pic canvas{width:100%;aspect-ratio:16/10;border:1px solid var(--ch-line2);background:var(--ch-black);border-radius:4px}
.rv dl>div{align-items:baseline}
.rv a.ed{color:var(--ch-mute);font-size:12px;text-decoration:underline;margin-left:var(--sp-14)}
.lbar{height:4px;background:var(--ch-k1c1c1c);border-radius:2px;overflow:hidden;margin:var(--sp-12) 0}
.lbar i{display:block;height:100%;width:0;background:var(--ch-oil)}
.spin{width:14px;height:14px;border:2px solid var(--ch-k333);border-top-color:var(--ch-white);border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.lnhead{display:flex;gap:var(--sp-16);align-items:center;margin-bottom:var(--sp-16)}
.lnhead img,.lnhead .lg{width:64px;height:64px;border:1px solid var(--ch-line2);border-radius:4px;background:var(--ch-black)}
.mockctl{margin-top:var(--sp-36);border-top:1px dashed var(--ch-line2);padding-top:var(--sp-12);color:var(--ch-faint);font-size:12px}
.mockctl summary{cursor:pointer}
.mockctl label{display:flex;gap:var(--sp-8);align-items:center;margin:var(--sp-8) 0}

/* designer */
body.ed{overflow:hidden}
.edwrap{height:calc(100vh - var(--ch-hdr) - var(--ch-nl));display:grid;grid-template-rows:auto 1fr auto;padding:var(--sp-12) var(--sp-20) var(--sp-14);gap:var(--sp-10);position:relative}
.edtop{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-12);flex-wrap:wrap}
.edtop .hint{font-size:12.5px;color:var(--ch-mute)}
.edtop .hint b{color:var(--ch-white);font-weight:500}
.cwrap{position:relative;border:1px solid var(--ch-line2);border-radius:12px;background:var(--ch-k020202);overflow:hidden;touch-action:none;min-height:240px}
.cwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.layers{position:absolute;top:44px;left:50%;transform:translateX(-50%);display:flex;gap:var(--sp-6);padding:var(--sp-6);background:var(--ch-rgba-0-0-0-p7);border:1px solid var(--ch-line2);border-radius:999px;z-index:3;backdrop-filter:blur(8px)}
.layers button{border:0;background:transparent;color:var(--ch-mute);padding:var(--sp-6) var(--sp-14);border-radius:999px;font-size:12px}
.layers button[aria-pressed=true]{background:var(--ch-white);color:var(--ch-black)}
.wcol{position:absolute;top:84px;left:50%;transform:translateX(-50%);display:none;gap:var(--sp-4);z-index:3}
.wcol.on{display:flex}
.wcol button{width:20px;height:20px;border:1px solid var(--ch-k555);border-radius:3px;padding:0;font-size:10.5px;color:var(--ch-black);font-weight:600}
.wcol button[aria-pressed=true]{outline:2px solid var(--ch-white);outline-offset:1px}
.helpb{position:absolute;right:12px;top:8px;z-index:3;width:30px;height:30px;border:1px solid var(--ch-line2);border-radius:50%;background:var(--ch-rgba-0-0-0-p7)}
.edhint{position:absolute;left:14px;bottom:12px;font-size:12px;color:var(--ch-mute);background:var(--ch-rgba-0-0-0-p7);border:1px solid var(--ch-line2);padding:var(--sp-6) var(--sp-12);border-radius:999px;pointer-events:none;z-index:3;max-width:calc(100% - 28px)}
.curveact{position:absolute;right:16px;bottom:12px;display:none;gap:var(--sp-8);z-index:4}
.curveact.on{display:flex}
.tb{display:flex;gap:var(--sp-6);align-items:center;justify-content:center;flex-wrap:wrap;background:var(--ch-k060606);border:1px solid var(--ch-line);border-radius:12px;padding:var(--sp-8) var(--sp-10);position:relative}
.tb .grp{display:flex;gap:var(--sp-6);align-items:center;flex-wrap:wrap}
.tb .sep{width:1px;height:26px;background:var(--ch-line2);margin:0 var(--sp-6)}
.tbb{border:1px solid var(--ch-line2);background:transparent;border-radius:9px;padding:var(--sp-6) var(--sp-12);font-size:12.5px;display:inline-flex;gap:var(--sp-8);align-items:center;position:relative}
.tbb:hover{border-color:var(--ch-k666)}
.tbb[aria-pressed=true],.tbb[aria-expanded=true]{background:var(--ch-white);color:var(--ch-black);border-color:var(--ch-white)}
.tbb kbd,.hk kbd{font-family:inherit;font-size:10.5px;color:var(--ch-faint);border:1px solid var(--ch-line2);border-radius:4px;padding:0 var(--sp-4)}
.tbb[aria-pressed=true] kbd,.tbb[aria-expanded=true] kbd{color:var(--ch-k555);border-color:var(--ch-kaaa)}
.tb .ro2{font-size:12px;color:var(--ch-mute);padding:0 var(--sp-8);white-space:nowrap}
.pop{position:absolute;bottom:calc(100% + 8px);background:var(--ch-k0c0c0c);border:1px solid var(--ch-line2);border-radius:12px;padding:var(--sp-6);display:none;flex-direction:column;gap:2px;min-width:200px;z-index:20;box-shadow:0 20px 60px var(--ch-rgba-0-0-0-p8)}
.pop.on{display:flex}
.pop button{background:none;border:0;text-align:left;padding:var(--sp-8) var(--sp-12);border-radius:8px;display:flex;justify-content:space-between;gap:var(--sp-16);font-size:13px}
.pop button:hover{background:var(--ch-k1a1a1a)}
.pop hr{border:0;border-top:1px solid var(--ch-line2);margin:var(--sp-4) 0;width:100%}
.pop .lab{padding:var(--sp-6) var(--sp-12);color:var(--ch-faint);font-size:12px}
.pop button[aria-pressed=true]{background:var(--ch-k1f1f1f)}
.helpp{position:absolute;right:12px;top:46px;width:min(440px,calc(100% - 24px));max-height:calc(100% - 60px);overflow:auto;background:var(--ch-k0a0a0a);border:1px solid var(--ch-line2);border-radius:14px;padding:var(--sp-20);z-index:10;display:none;font-size:13px}
.helpp.on{display:block}
.helpp h3{font-family:var(--ch-display);font-size:23px;margin:var(--sp-16) 0 var(--sp-8);font-weight:500;letter-spacing:-.01em}
.helpp .hl{display:grid;grid-template-columns:70px 1fr;gap:var(--sp-10);padding:var(--sp-6) 0;color:var(--ch-mute)}.helpp .hl b{color:var(--ch-white);font-weight:500}
.helpp table td{padding:3px var(--sp-12) 3px 0;color:var(--ch-mute)}.helpp table td:first-child{color:var(--ch-white);white-space:nowrap}
.welcome{position:absolute;inset:0;background:var(--ch-rgba-0-0-0-p72);display:grid;place-items:center;z-index:30;padding:var(--sp-20)}
.welcome .box{background:var(--ch-k0a0a0a);border:1px solid var(--ch-line2);border-radius:16px;padding:var(--sp-28);max-width:420px;text-align:left}
.welcome h2{font-family:var(--ch-display);font-size:30px;margin:0 0 var(--sp-10);font-weight:600;letter-spacing:-.012em}
.coach{position:absolute;z-index:31;background:var(--ch-white);color:var(--ch-black);border-radius:12px;padding:var(--sp-14) var(--sp-16);max-width:300px;font-size:13px;box-shadow:0 20px 60px var(--ch-rgba-0-0-0-p8)}
.coach button{margin-top:var(--sp-10)}

/* docs */
.docgrid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-56);padding-top:var(--sp-48)}
.toc{position:sticky;top:calc(var(--ch-hdr) + 24px);align-self:start;display:grid;gap:2px;font-size:13px}
.toc a{color:var(--ch-mute);padding:var(--sp-8) 0 var(--sp-8) var(--sp-14);border-left:1px solid var(--ch-line2)}
.toc a:hover,.toc a.on{color:var(--ch-white);border-left-color:var(--ch-white)}
.doc h2{font-family:var(--ch-display);font-size:40px;margin:var(--sp-72) 0 var(--sp-16);line-height:1.05;scroll-margin-top:90px;font-weight:600;letter-spacing:-.022em}
.doc h2:first-child{margin-top:0}
.doc h3{font-weight:500;font-size:15px;margin:var(--sp-28) 0 var(--sp-8)}
.doc p,.doc li{color:var(--ch-kbdbdbd);font-size:15px;line-height:1.65;max-width:680px}
.doc ul,.doc ol{padding-left:var(--sp-20)}
.doc li{margin:var(--sp-4) 0}
.doc b{color:var(--ch-white);font-weight:500}
.doc table{max-width:680px}
.addrt td:last-child{word-break:break-all}

/* claim */
.cl-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ch-line);border-radius:6px;margin:var(--sp-36) 0}
.cl-sum div{padding:var(--sp-24) var(--sp-24);border-right:1px solid var(--ch-line)}
.cl-sum div:last-child{border-right:0}
.cl-sum span{color:var(--ch-faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:block}
.cl-sum strong{font-family:var(--ch-display);font-size:40px;font-weight:600;letter-spacing:-.022em}

/* 404 */
.nf{min-height:calc(100vh - 160px);display:grid;place-items:center;text-align:center;padding:var(--sp-40) var(--sp-16)}
.nf canvas{width:min(560px,92vw);height:160px;display:block;margin:0 auto var(--sp-28)}

/* intro */
.reveal{position:fixed;inset:0;z-index:10000;pointer-events:none;background:var(--ch-black)}
.reveal.off{display:none}
.settle{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s}
body.ready .settle,body.noreveal .settle{opacity:1;transform:none;filter:none}
body.ready .settle.d1{transition-delay:.15s}

@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-48) var(--sp-28)}.tgrid{grid-template-columns:1fr}.rel{grid-template-columns:repeat(2,1fr)}nav.main{gap:var(--sp-20)}.thero{grid-template-columns:1fr}.mk{justify-items:start;min-width:0}.mets div{text-align:left}.acts{justify-content:flex-start}.docgrid{grid-template-columns:1fr}.toc{position:static;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));margin-bottom:var(--sp-32)}}
@media(max-width:1180px){nav.main,.right .hd{display:none}.burger{display:block}}
@media(max-width:960px){.steps{grid-template-columns:1fr 1fr}.steps li{border-right:0;border-bottom:1px solid var(--ch-line);margin-right:0}.docrow{grid-template-columns:1fr}.docrow a{border-right:0;border-bottom:1px solid var(--ch-line);margin-right:0}.wzbody{grid-template-columns:1fr}.agentbox{grid-template-columns:96px 1fr;justify-items:start;text-align:left}.rv{grid-template-columns:1fr}}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
 .notice .l{display:none}.notice .s{display:inline}
 .stage{height:78vw;min-height:280px}
 .chip{top:14px;font-size:12px;padding:var(--sp-6) var(--sp-12)}
 .stage .arrow{top:auto;bottom:14px}
 .info{flex-direction:column;align-items:flex-start;gap:var(--sp-28);padding-top:var(--sp-28);padding-bottom:var(--sp-36)}
 .buy{width:100%;justify-content:space-between}
 section.block{padding-top:var(--sp-68)}
 .grid,.live.grid{grid-template-columns:1fr;gap:var(--sp-44)}
 .steps{grid-template-columns:1fr}
 footer.foot{margin-top:var(--sp-96)}
 .g2,.g3{grid-template-columns:1fr}
 .logo-s{grid-template-columns:1fr}
 .tid{flex-direction:column;gap:var(--sp-14)}
 .tid .av{width:64px;height:64px}
 .mets{gap:var(--sp-20)}
 .rel{grid-template-columns:1fr}
 .cl-sum{grid-template-columns:1fr}.cl-sum div{border-right:0;border-bottom:1px solid var(--ch-line)}
 .panel{padding:var(--sp-16)}
 .head{margin-bottom:var(--sp-24)}
 .page-head{padding:var(--sp-40) 0 var(--sp-28)}
 .dlg{padding:var(--sp-20)}
 .edwrap{padding:var(--sp-8) var(--sp-8) var(--sp-10)}
 .tb .ro2{display:none}
 .agentbox{grid-template-columns:1fr;justify-items:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){.settle{opacity:1;transform:none;filter:none;transition:none}.dot,.badge.paint::before{animation:none}.mark i{animation:none}.ticker .tr{animation:none}.spin{animation-duration:2s}html{scroll-behavior:auto}}

.tgrid>*{min-width:0}.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}

/* chain toggles and badges */
.chains{display:inline-flex;gap:var(--sp-6)}
.ct{--cbc:var(--ch-neon-lime);--cbcg:var(--ch-rgba-182-255-0-p55);display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-6) var(--sp-14) var(--sp-6) var(--sp-12);border-radius:999px;border:1px solid var(--ch-line2);background:var(--ch-k070707);color:var(--ch-faint);font-size:12px;font-weight:500;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.ct-sol{--cbc:linear-gradient(135deg,var(--ch-neon-green),var(--ch-neon-magenta));--cbcg:var(--ch-rgba-0-229-255-p5)}
.ct i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ch-k4a4a4a);box-sizing:border-box;transition:all .2s}
.ct:hover{color:var(--ch-kd8d8d8);border-color:var(--ch-k555)}
.ct[aria-pressed=true]{color:var(--ch-white);border-color:var(--ch-k4a4a4a);background:var(--ch-k121212)}
.ct[aria-pressed=true] i{border-color:transparent;background:var(--ch-oil-ring);box-shadow:none}
.ct[aria-pressed=true]{border-color:transparent;background:linear-gradient(var(--ch-k121212),var(--ch-k121212)) padding-box,var(--ch-oil) border-box}
/* owner 2026-10-21: an active toggle glows in its chain's own colour, an inactive one is plain grey. Robinhood: green
   border, soft green glow, green dot. Solana: purple to green border, soft purple glow, purple dot. */
.ct-rh[aria-pressed=true]{border-color:var(--ch-rh-green);background:var(--ch-k121212);box-shadow:0 0 12px var(--ch-rh-green-glow),inset 0 0 6px var(--ch-rh-green-glow)}
.ct-rh[aria-pressed=true] i{background:var(--ch-rh-green);box-shadow:0 0 6px var(--ch-rh-green)}
.ct-sol[aria-pressed=true]{border-color:transparent;background:linear-gradient(var(--ch-k121212),var(--ch-k121212)) padding-box,linear-gradient(135deg,var(--ch-sol-purple),var(--ch-sol-green)) border-box;box-shadow:0 0 12px var(--ch-sol-purple-glow),inset 0 0 6px var(--ch-sol-purple-glow)}
.ct-sol[aria-pressed=true] i{background:var(--ch-sol-purple);box-shadow:0 0 6px var(--ch-sol-purple)}
.ct[aria-pressed=false]{color:var(--ch-faint);border-color:var(--ch-line2);background:var(--ch-k070707);box-shadow:none}
.ct[aria-pressed=false] i{background:transparent;border-color:var(--ch-k4a4a4a);box-shadow:none}
.ct[aria-pressed=false]:hover{color:var(--ch-kd8d8d8);border-color:var(--ch-k555)}
.chains.shake{animation:shk .36s}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.drawer .chains{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);margin-top:2px}
.drawer .ct{justify-content:center;padding:var(--sp-14) var(--sp-10);font-size:14px}
.drawer .dlab{margin:var(--sp-24) 0 var(--sp-10);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ch-faint)}
.cb{--cbc:var(--ch-neon-lime);display:inline-flex;align-items:center;gap:var(--sp-6);padding:3px var(--sp-8) 3px var(--sp-6);border-radius:999px;border:1px solid var(--ch-rgba-255-255-255-p16);background:var(--ch-rgba-0-0-0-p72);color:var(--ch-kd6d6d6);font:600 9.5px/1 var(--ch-sans);letter-spacing:.1em;white-space:nowrap;vertical-align:middle}
.cb::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ch-white)}
.cb-sol::before{background:transparent;border:1px solid var(--ch-white);box-sizing:border-box}
.mat .cb{position:absolute;left:9px;top:9px;z-index:2}
.wlh{display:flex;align-items:center;gap:var(--sp-8);margin:var(--sp-20) 0 var(--sp-8);font-size:13px;font-weight:500;color:var(--ch-kd8d8d8)}
.wlh:first-of-type{margin-top:var(--sp-6)}
.sres .cb{margin-right:var(--sp-6)}
@media(max-width:760px){.ticker .tr{font-size:17px;gap:var(--sp-44);padding:var(--sp-14) 0 var(--sp-14)}}
@media(prefers-reduced-motion:reduce){.chains.shake{animation:none}.ticker .tr{animation:none}}
.subh{display:flex;align-items:center;gap:var(--sp-10);margin:var(--sp-28) 0 var(--sp-8);font-size:15px;font-weight:600}

.cpick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-14);margin-top:var(--sp-20)}
.cpc{display:grid;gap:var(--sp-10);text-align:left;padding:var(--sp-20) var(--sp-20) var(--sp-24);border:1px solid var(--ch-line2);border-radius:14px;background:var(--ch-k0a0a0a);color:var(--ch-white);transition:border-color .2s,background .2s}
.cpc:hover{border-color:var(--ch-k555)}
.cpc[aria-checked=true]{border-color:var(--ch-white);background:var(--ch-k111)}
.cpt{display:flex;align-items:center;gap:var(--sp-10);font-family:var(--ch-display);font-size:26px;font-weight:600;letter-spacing:-.012em}
.cpt .cb{font-style:normal}
.cpd{color:var(--ch-mute);font-size:13px;line-height:1.5}
@media(max-width:760px){.cpick{grid-template-columns:1fr}}

/* ---------- ChART page parts (site port, 2026-10-20) ---------- */
.ul{text-decoration:underline;text-underline-offset:3px}
.tools{display:flex;gap:var(--sp-10);align-items:center;flex-wrap:wrap}
.livelab{display:inline-flex;gap:var(--sp-8);align-items:center;color:var(--ch-mute);font-size:12.5px}
.meta h3 .tk{color:var(--ch-mute);font-family:var(--ch-sans);font-size:13px;letter-spacing:0}
.meta .d{margin:0}
.banner-err{display:flex;gap:var(--sp-12);align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--ch-line2);border-radius:10px;padding:var(--sp-10) var(--sp-14);margin:0 0 var(--sp-24);color:var(--ch-mute);font-size:13px}
.banner-err[hidden]{display:none}
.skel .mat{background:var(--ch-panel)}
.sk{display:block;height:12px;border-radius:4px;background:var(--ch-line);margin:var(--sp-6) 0}
.sk.w60{width:60%}.sk.w40{width:40%}
.sk.sk-h{height:40px;width:50%}.sk.sk-l{height:18px;width:30%;margin-top:var(--sp-14)}.sk.sk-b{height:300px;margin-top:var(--sp-24)}
.rel{display:flex;flex-direction:column}.rel a{display:flex;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-10) 0;border-top:1px solid var(--ch-line);color:var(--ch-ink)}.rel a:first-child{border-top:0}.rel a:hover{text-decoration:underline}
.pr small.up{color:var(--ch-white)}.pr small.dn{color:var(--ch-mute)}
.mat .pmsg{position:absolute;inset:0;display:grid;place-items:center;color:var(--ch-faint);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){.tools{width:100%}.search{flex:1;min-width:0}}
@media (prefers-reduced-motion: reduce){.ticker .tr,.mark i,.dot{animation:none!important}}
.tload{margin:var(--sp-64) 0;text-align:center;padding:var(--sp-56) var(--sp-20)}
.tload h1.t{font-size:44px}
.brk{word-break:break-all;margin:var(--sp-20) 0}
.acts.cen{justify-content:center}
.m0{margin:0}
.chartbox{position:relative}
.chartbox canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cmsg{position:absolute;left:0;right:0;top:45%;text-align:center;margin:0}
.pname{margin:var(--sp-12) 0 var(--sp-4);font-family:var(--ch-display);font-size:23px;font-weight:500;letter-spacing:-.01em}
.claimrow{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-12);flex-wrap:wrap;margin-top:var(--sp-14)}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;color:var(--ch-faint);font-weight:500;padding:var(--sp-8) var(--sp-6);border-bottom:1px solid var(--ch-line)}
.tbl td{padding:var(--sp-10) var(--sp-6);border-bottom:1px solid var(--ch-line)}
.tbl .up{color:var(--ch-white)}.tbl .dn{color:var(--ch-mute)}
.addrb{display:inline-flex;gap:var(--sp-6);align-items:center;background:none;border:0;padding:0;color:var(--ch-kd6d6d6);font:inherit}
.addrb:hover{color:var(--ch-white)}
.addrb svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6}
@media(max-width:760px){.tbl th:nth-child(3),.tbl td:nth-child(3){display:none}}
.ph-row{display:flex;gap:var(--sp-14);align-items:center;flex-wrap:wrap}
.cl-body{padding-top:var(--sp-8);padding-bottom:var(--sp-40)}
.cen-panel{text-align:center;padding:var(--sp-56) var(--sp-20)}
.cen-panel h2.t{font-size:34px;margin-bottom:var(--sp-10)}
.cen-panel p{max-width:440px;margin:0 auto var(--sp-24)}
.cl-sum strong.sm{font-size:15px;font-family:var(--ch-sans)}
.tbl td.r{text-align:right}
.cl-empty{margin:var(--sp-20) 0 var(--sp-32)}
.cl-h{font-size:30px;margin:var(--sp-48) 0 var(--sp-14)}
.cl-foot{margin-top:var(--sp-24)}
#cst{margin:var(--sp-16) 0 0;min-height:22px}
.nf-p{margin:var(--sp-14) auto var(--sp-28);max-width:380px}


/* token page: the painting trades fold into one row, the chart style switch sits beside the intervals */
.tbl .pfold td{padding:var(--sp-10) 0}.tbl .pfold .cp{font-size:13px;color:var(--ch-ink)}
.ch-head{flex-wrap:wrap;gap:var(--sp-10)}

/* gallery bento (owner review 2026-10-21): prints of different sizes that fit together; each keeps the framed look */
#grid.grid{grid-auto-flow:row;align-items:stretch} /* F11 (owner 2026-10-21): strict ranking order at every width, no back-filling */
#grid .card{display:flex;flex-direction:column}
#grid .card .frame{display:flex;flex:1}
#grid .card .mat{flex:1;min-height:0}
#grid .card.t-wide{grid-column:span 2}
#grid .card.t-wide .mat{aspect-ratio:auto;min-height:clamp(200px,20vw,300px)}
#grid .card.t-tall{grid-row:span 2}
#grid .card.t-tall .mat{aspect-ratio:auto;min-height:clamp(440px,48vw,760px)}
#grid .card.t-big{grid-column:span 2;grid-row:span 2}
#grid .card.t-big .mat{aspect-ratio:auto;min-height:clamp(440px,48vw,760px)}
#grid .card.t-big .meta h3{font-size:30px}

/* SITE_SPEC B group: closable strip, wrong-network bar, drawer balance, footer X and copyright */
.notice{position:relative}
.notice .nx{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:transparent;color:var(--ch-mute);font-size:17px;line-height:1;border-radius:50%}
.notice .nx:hover{color:var(--ch-white)}
.netbar{border-bottom:1px solid var(--ch-line);background:var(--ch-k0c0c0c);font-size:13px}
.netbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);flex-wrap:wrap;padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
.netbar .acts0{display:flex;align-items:center;gap:var(--sp-8)}
.netbar .nx{width:32px;height:32px;border:1px solid var(--ch-line2);border-radius:50%;background:transparent;color:var(--ch-ink)}
.soon{display:none;font-size:12px;color:var(--ch-mute);margin-top:var(--sp-8)}
.drawer .soon{display:block}
#dbal .chip-b{margin-top:var(--sp-8)}
body.drawer-open{overflow:hidden}
.ft .xico{flex:none}
.fcopy{margin-top:var(--sp-48);color:var(--ch-k888);font-size:12px;display:flex;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap}
/* SITE_SPEC D5-001: the docs list hides below 960 px and the text takes the full width */
@media(max-width:960px){.docgrid{grid-template-columns:minmax(0,1fr);gap:0}.toc{position:static;display:flex;gap:var(--sp-8);overflow-x:auto;scrollbar-width:none;margin:0 0 var(--sp-24);padding-bottom:var(--sp-4);border-bottom:1px solid var(--ch-line)}.toc a{flex:none;white-space:nowrap;padding:var(--sp-8) var(--sp-12);border:1px solid var(--ch-line2);border-radius:999px}} /* function audit F19 */
/* SITE_SPEC H-012: every field 16 px on phones so iOS does not zoom */
@media(max-width:760px){.ch input,.ch select,.ch textarea{font-size:16px}}
/* visually hidden, still read (the designer's h1) */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* SITE_SPEC A-023, A-028: chain subheadings in the serif; the ticker price never under 12 px */
.subh{font-family:var(--ch-display);font-weight:600;letter-spacing:-.01em}
.ticker .tp{font-size:12px}
.ed-ch h1.vh{font-family:var(--ch-display);font-weight:600;letter-spacing:-.022em}
/* SITE_SPEC H-001: long addresses in the docs wrap instead of pushing the page sideways */
article.doc p,article.doc li,article.doc td{overflow-wrap:anywhere}
/* moved from the old shared layer: one marker per question, on the right; the answer starts under its question */
.fq summary::before{display:none}
.fq summary::marker{content:""}
.fq p{padding-left:0}
.ed-prompt-link{font-size:13px;font-weight:500;color:var(--ch-kd4d4d4);text-decoration:underline;text-underline-offset:3px;text-align:center}
.ed-prompt-link:hover{color:var(--ch-white)}
/* gallery tiles (owner review of cd6a9b7): the frame fills its tile, every tile in a row ends on one line, one-line titles */
#grid .card .frame{flex-direction:column;min-width:0}
#grid .card .mat{width:100%}
#grid .card .meta{flex:none}
.meta h3{min-width:0}
.meta h3 .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta h3 .tk{flex:none}
.meta h3 .av{position:relative;flex:none;width:22px;height:22px;border:1px solid var(--ch-line2);border-radius:4px;display:inline-grid;place-items:center;font-family:var(--ch-sans);font-size:10.5px;font-weight:600;letter-spacing:0;color:var(--ch-mute);overflow:hidden;background:var(--ch-black)}
.meta h3 .av img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover}
.meta .links{min-height:18px}
#grid .meta .links,#grid .meta .row{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
#grid .meta .row>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.meta h3 .av img{opacity:0}
.meta h3 .av img.ok{opacity:1}
/* SITE_SPEC B-014, B-026: an anchor or a focused element never sits under the sticky header */
[id]{scroll-margin-top:90px}
html{scroll-padding-top:90px}

/* SITE_SPEC C-062: the wallet help line; B-006: the strip's close button has a 44 px hit area */
.nowal{margin-top:var(--sp-12)}
.nowal summary{cursor:pointer;list-style:none;color:var(--ch-mute);text-decoration:underline;font-size:12.5px}
.nowal summary::-webkit-details-marker{display:none}
.nowal p a{color:var(--ch-white)}
.notice .nx::after{content:"";position:absolute;inset:-8px}

/* SITE_SPEC C-130, C-131: the maintenance strip and the reason beside a held paid control */
.svcbar{border-bottom:1px solid var(--ch-line);background:var(--ch-k0c0c0c);font-size:12px;color:var(--ch-mute);text-align:center}
.svcbar .wrap{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
.svcwhy{display:block;margin-top:var(--sp-6);font-size:12px;color:var(--ch-mute)}
.tbl .xl{width:11px;height:11px;margin-left:var(--sp-4);vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* SITE_SPEC C-128: the copy-link button on a question, quiet until the row is hovered or focused */
details.q summary .qlink{width:28px;height:28px;margin-left:var(--sp-8);border:0;background:transparent;color:var(--ch-mute);display:inline-grid;place-items:center;border-radius:50%;opacity:0;vertical-align:middle}
details.q summary:hover .qlink,details.q summary .qlink:focus-visible{opacity:1}
details.q summary .qlink svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media (hover:none){details.q summary .qlink{opacity:1}}
/* the hero arrows sit left of the price axis column (7% of the width, as the mockup's hero padding) */
@media(min-width:761px){.stage .a1{right:calc(7% + 52px)}.stage .a2{right:calc(7% + 8px)}}
.cnt{display:block;text-align:right;font-size:12px;color:var(--ch-mute);margin-top:var(--sp-4);font-variant-numeric:tabular-nums}
body.modal-open{overflow:hidden}

/* SITE_SPEC D1-011: the Paired with panel */
.qpanel{position:absolute;z-index:40;margin-top:var(--sp-6);min-width:160px;background:var(--ch-k0a0a0a);border:1px solid var(--ch-line2);border-radius:12px;padding:var(--sp-6);display:grid;gap:2px;box-shadow:0 20px 50px var(--ch-rgba-0-0-0-p8)}
.qpanel button{text-align:left;background:transparent;border:0;color:var(--ch-ink);font-size:13px;padding:var(--sp-8) var(--sp-10);border-radius:8px}
.qpanel button:hover,.qpanel button[aria-checked="true"]{background:var(--ch-k111)}
.price .cur{color:var(--ch-mute);font-size:12px}
:has(> #qf){position:relative}
@media(min-width:761px){#explore .search{min-width:320px}} /* the whole placeholder shows (B-017) */
/* SITE_SPEC D4-008: the painting banner on the token page */
.pbanner .pbh{display:flex;justify-content:space-between;gap:var(--sp-16);align-items:flex-start;flex-wrap:wrap}
.pbanner h2{margin:0 0 var(--sp-6)}
.pbanner .pbn{text-align:right}
.pbanner .pbn strong{display:block;font-size:23px;font-weight:500}
.pbanner .bar2{margin:var(--sp-14) 0}
.faq-g{font-family:var(--ch-display);font-size:28px;margin:var(--sp-40) 0 var(--sp-12);font-weight:600;letter-spacing:-.012em}.faq-end{margin-top:var(--sp-40)}
/* docs: self links on headings, the page list's current section, copy beside each address */
.doc h2 .hl{margin-left:var(--sp-10);font-size:17px;color:var(--ch-mute);text-decoration:none;opacity:0}
.doc h2:hover .hl,.doc h2 .hl:focus-visible{opacity:1}
.toc a[aria-current]{color:var(--ch-white)}
table.addrt .cp{margin-left:var(--sp-6);vertical-align:middle}
.doc-end{margin-top:var(--sp-56)}
.nf-cv{display:block;width:min(560px,100%);height:120px;margin:0 auto var(--sp-24)}
/* SITE_SPEC I-001: skip link, visible on focus; I-015: the ticker stops under the pointer or focus */
.skip{position:absolute;left:var(--sp-16);top:-60px;z-index:400;background:var(--ch-white);color:var(--ch-black);padding:var(--sp-8) var(--sp-14);border-radius:999px;font-size:13px;font-weight:600}
.skip:focus{top:var(--sp-8)}
main:focus{outline:none}
.ticker:hover .tr,.ticker:focus-within .tr{animation-play-state:paused}
/* SITE_SPEC H-013, I-025: every control that is not a link inside a sentence is at least 24 px; on touch screens the
   round header buttons reach 44 px through an invisible margin */
footer nav a,.meta .links a,.meta .links button,.links2 a,a.mark,button.cp,button.addrb,.doc h2 .hl,.ed-prompt-link,.wz-manual{display:inline-flex;align-items:center;min-height:24px}
.doc h2 .hl{min-width:24px;justify-content:center}
@media (pointer:coarse){.ico,.burger,#sbtn,.notice .nx,.stage .arrow{position:relative}.ico::after,.burger::after,#sbtn::after,.stage .arrow::after{content:"";position:absolute;inset:-4px}}
.notice a,.head a,a.more,#hlink{display:inline-flex;align-items:center;min-height:24px}
button.cp{min-width:24px;justify-content:center}
.meta .links a{min-width:24px;justify-content:center}

/* ---------- visual audit 2026-10-21 (launchpad_layout/audits/visual.md), one block so the pass reads as one ---------- */
/* 2: on touch screens the carousel arrows and the notice close keep their place (the hit area is the ::after) */
@media (pointer:coarse){.notice .nx,.stage .arrow{position:absolute}}
/* 3: loading skeleton */
.sk{background:var(--ch-k0d0d0d);border-radius:6px;min-width:6ch;color:transparent;display:inline-block}
h1.sk,#hname.sk{min-width:8ch}
/* 4: step numerals at a readable grey */
.steps .n{color:var(--ch-faint)}
/* 5, 6: the search placeholder ends in an ellipsis and passes contrast */
.search input{text-overflow:ellipsis}
.search input::placeholder,.searchbox input::placeholder{color:var(--ch-mute);opacity:1}
/* 7, 8: two control heights: 36 for small controls, 40 for pills and the explore row */
#sbtn,.burger,header.top .ico{width:36px;height:36px}
header.top .ct{min-height:36px}
header.top .right .pill:not(.sm){min-height:40px;padding-block:0}
.tabs button{min-height:40px}
.search{min-height:40px;padding-block:0}
/* 9: one icon size and stroke for the small round controls */
.stage .arrow svg,.search svg,.ico svg,details.q summary .qlink svg{width:16px;height:16px;stroke-width:1.5}
/* 10, 11: selection and the dark scrollbars */
::selection{background:var(--ch-white);color:var(--ch-black)}
html{color-scheme:dark;scrollbar-color:var(--ch-k333) var(--ch-black);scrollbar-width:thin}
/* 12: the FAQ focus ring has room */
details.q summary{padding-left:var(--sp-12);margin-inline:calc(var(--sp-12) * -1);border-radius:10px}
/* 13: room kept for the blocks the script builds, so nothing jumps */
#explore .grid{min-height:520px}
.ticker{min-height:68px}
.tabs{min-height:40px}
/* 15: the chip label keeps 11 px at every width */
.chip{font-size:11px}
/* 16: one hairline token for the round controls over the hero */
.stage .arrow{border-color:var(--ch-line2)}
/* 17: footer greys, one step each */
.ft nav{color:var(--ch-mute)}
.ft p{color:var(--ch-mute)}
.copy{color:var(--ch-faint);margin-top:var(--sp-32)}
/* 18: the short notice never runs under its close button */
.notice .s{padding-right:44px;font-size:12px}
@media(max-width:760px){
 /* 13: the empty grid's room on a phone */
 #explore .grid{min-height:308px}
 /* 19: the sort tabs scroll in one row instead of leaving an orphan */
 .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--ch-gut) * -1);padding-inline:var(--ch-gut)}
 .tabs::-webkit-scrollbar{display:none}
 .tabs button{flex:none}
 .chip{font-size:11px}
}
/* 20: touch targets of 44 px on touch screens */
@media (pointer:coarse){
 .ft nav a{min-height:44px;display:inline-flex;align-items:center}
 .tabs button,.search{min-height:44px}
}
/* Owner decision 6 (2026-10-21): the header Create a token pill carries a slow neon gradient ring at rest. The fill
   stays white and the hover fade (::before) is unchanged; the ring is a masked ::after just outside the pill. */
.pill.cta{overflow:visible}
.pill.cta::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:linear-gradient(90deg,var(--ch-neon-cyan),var(--ch-neon-green),var(--ch-neon-lime),var(--ch-neon-magenta),var(--ch-neon-cyan));background-size:300% 100%;-webkit-mask:linear-gradient(var(--ch-black) 0 0) content-box,linear-gradient(var(--ch-black) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--ch-black) 0 0) content-box exclude,linear-gradient(var(--ch-black) 0 0);opacity:.85;pointer-events:none;animation:ctashim 9s linear infinite}
@keyframes ctashim{from{background-position:0 0}to{background-position:300% 0}}
@media(prefers-reduced-motion:reduce){.pill.cta::after{animation:none}}
/* Owner decision 4 (2026-10-21): How it works is a looping canvas demo (js/how-demo.js) with three captions that
   light up with the phase. */
.howstage{position:relative;height:clamp(300px,52vh,520px);border:1px solid var(--ch-line);border-radius:14px;background:var(--ch-black);overflow:hidden}
.howstage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.howcaps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-24);margin:var(--sp-24) 0 0;padding:0}
.howcaps li{list-style:none;border-top:1px solid var(--ch-line2);padding-top:var(--sp-16);transition:border-color .3s ease}
.howcaps b{display:block;font-family:var(--ch-display);font-size:26px;font-weight:600;letter-spacing:-.012em;color:var(--ch-k444);transition:color .3s ease}
.howcaps span{display:block;margin-top:var(--sp-6);color:var(--ch-mute);max-width:300px}
.howcaps li.on{border-top-color:var(--ch-white)}.howcaps li.on b{color:var(--ch-white)}
@media(max-width:760px){.howstage{height:78vw;min-height:280px}.howcaps{grid-template-columns:1fr 1fr;gap:var(--sp-16)}.howcaps b{font-size:19px}}
@media(prefers-reduced-motion:reduce){.howcaps li,.howcaps b{transition:none}}
/* Owner decision 7 (2026-10-21): a slim left sidebar on every page from 1181 px (order owner 2026-10-22): the logo, Search, Explore, Docs, FAQ,
   Claim, the chain toggles, Create a token, the live activity rail, and Connect at the bottom. It is the same header (same buttons, same ids)
   laid out as a column, so every script that drives the header keeps working. Under 1181 px it is the top bar with
   the drawer, as before, and on phones the top bar is slimmer. The designer keeps the top bar: its editor is laid
   out on the whole window (fixed tool bars, canvas maths in window coordinates). */
@media(min-width:1181px){
 body.ch:not(.ed-ch){padding-left:var(--ch-side)}
 body.ch:not(.ed-ch) header.top{position:fixed;left:0;top:0;bottom:0;width:var(--ch-side);border-bottom:0;border-right:1px solid var(--ch-line);background:var(--ch-black);backdrop-filter:none;-webkit-backdrop-filter:none;z-index:60}
 body.ch:not(.ed-ch) header.top>.wrap.bar{height:100%;max-width:none;margin:0;padding:var(--sp-24) var(--sp-16) var(--sp-20);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--sp-4);overflow-y:auto}
 body.ch:not(.ed-ch) header.top nav.main,body.ch:not(.ed-ch) header.top .right,body.ch:not(.ed-ch) header.top .right>span.hd{display:contents}
 body.ch:not(.ed-ch) header.top .mark{order:0;font-size:24px;padding:0 var(--sp-8) var(--sp-20)}
 body.ch:not(.ed-ch) header.top #sbtn{order:1;width:auto;height:38px;border-radius:10px;justify-content:flex-start;gap:var(--sp-10);padding:0 var(--sp-10);margin-bottom:var(--sp-12);border:1px solid var(--ch-line2);display:flex;align-items:center;color:var(--ch-mute);font-size:13px}
 body.ch:not(.ed-ch) header.top #sbtn::after{content:"Search";position:static;inset:auto}
 body.ch:not(.ed-ch) header.top nav.main a{display:block;padding:var(--sp-10) var(--sp-10);border-radius:10px;border-bottom:0;font-size:14px;color:var(--ch-mute)}
 body.ch:not(.ed-ch) header.top nav.main a:hover{color:var(--ch-white);background:var(--ch-k111)}
 body.ch:not(.ed-ch) header.top nav.main a[aria-current=page]{color:var(--ch-white);background:var(--ch-k111);border-bottom:0}
 body.ch:not(.ed-ch) header.top nav.main a[href="/#explore"]{order:2}
 body.ch:not(.ed-ch) header.top nav.main a[href="/#how"]{display:none}
 body.ch:not(.ed-ch) header.top .pill.cta{order:8;display:flex;margin:var(--sp-8) 0;justify-content:center;text-align:center}
 body.ch:not(.ed-ch) header.top nav.main a[href="/docs"]{order:3}
 body.ch:not(.ed-ch) header.top nav.main a[href="/faq"]{order:4}
 body.ch:not(.ed-ch) header.top nav.main a.claimlink{order:5}
 body.ch:not(.ed-ch) header.top .chains{order:6;display:grid;grid-template-columns:1fr;gap:var(--sp-6);margin-top:var(--sp-12)}
 body.ch:not(.ed-ch) header.top .ct{justify-content:flex-start}
 body.ch:not(.ed-ch) header.top .soon{order:7;display:block;padding:0 var(--sp-4)}
 body.ch:not(.ed-ch) header.top #balslot{order:10;margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-6)}
 body.ch:not(.ed-ch) header.top #wbtn,body.ch:not(.ed-ch) header.top .wgrp{order:12;margin-top:var(--sp-10)}
 body.ch:not(.ed-ch) header.top #balslot:empty+#wbtn,body.ch:not(.ed-ch) header.top #balslot:empty+.wgrp{margin-top:auto}
 body.ch:not(.ed-ch) header.top #wbtn,body.ch:not(.ed-ch) header.top .wgrp #wallet-btn{width:100%;justify-content:center}
 body.ch:not(.ed-ch) header.top .wgrp{display:flex}
 body.ch:not(.ed-ch) header.top .wallet-msg{top:auto;bottom:calc(100% + 8px);right:auto;left:0;min-width:0;width:100%;box-sizing:border-box}
 body.ch:not(.ed-ch) header.top .burger,body.ch:not(.ed-ch) header.top .drawer{display:none}
 body.ch:not(.ed-ch) header.top .searchbox{position:fixed;left:var(--ch-side);right:0;top:0;z-index:61}
 body.ch:not(.ed-ch) .netbar{position:sticky;top:0;z-index:40}
 body.ch.ed-ch{--ch-hdr:64px}
}
/* phones: the top bar slims down */
@media(max-width:760px){body.ch header.top .mark{font-size:19px}}
/* the drawer lists the same things in the same order as the sidebar */
.drawer.open{display:flex;flex-direction:column}.drawer a.l[href="/#explore"]{order:1}.drawer a.l[href="/docs"]{order:2}.drawer a.l[href="/faq"]{order:3}.drawer a.l.claimlink{order:4}.drawer a.l[href="/#how"]{order:5}.drawer a.l[href^="/create"]{order:8}.drawer .dlab,.drawer .chains,.drawer .soon{order:7}.drawer #dbal{order:9}
/* ---- layout audit (launchpad_layout/audits/layout.md), 2026-10-21 ---- */
/* F01: under 1181 px the header really sticks (its wrapper was exactly its height, so it scrolled away) */
@media(max-width:1180px){#hdr{display:contents}}
/* F02, F03: footer: brand left, links centred, X right on one line; on phones a balanced link grid and X beside the copyright */
.ft{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-32)}
.ft .xico{justify-self:end}
@media(max-width:960px){.ft{grid-template-columns:1fr auto;align-items:start}.ft>div:first-child{grid-column:1/-1}.ft nav{justify-content:flex-start}}
@media(max-width:760px){.ft{grid-template-columns:1fr auto}.ft nav{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:var(--sp-4) var(--sp-20)}}
@media(max-width:400px){.ft nav{grid-template-columns:repeat(3,auto)}}
/* F06: the hero chip sits on the content edge (the .wrap edge); the arrows stay left of the price axis */
.stage .chip{left:max(var(--ch-gut),calc((100% - 1400px) / 2 + var(--ch-gut)))}
/* F07: card text on the frame edge; F08: name and ticker on one baseline, row items centred */
.meta{padding-left:0;padding-right:0}
.meta h3{align-items:baseline}
.meta h3 .av{align-self:center}
.meta .row{align-items:center}
/* F10: a long name gets two lines before it is cut */
.meta h3 .nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.08}
/* F11: two columns read in ranking order (no back-filling) */
/* F12: Explore tools under 860 px: search full width, then the tabs on one row that scrolls sideways */
@media(max-width:860px){#explore .head .tools{width:100%;display:grid;grid-template-columns:1fr;gap:var(--sp-10)}#explore .head .search{order:-1;width:100%}#explore .head .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}#explore .head .tabs::-webkit-scrollbar{display:none}#explore .head .tabs>*{flex:none}#explore .head{position:relative}#explore .head .livelab{position:absolute;right:0;top:var(--sp-8)}}
/* F14: no empty "Painting now" block (home.js hides the section when nothing paints) */
#live[hidden]{display:none}
/* F16: the Create column uses the page edge like every other page */
.wzwrap{max-width:none}
/* F18: chain cards on phones: the chip above the title, both cards top aligned */
@media(max-width:760px){.cpc{align-content:start}.cpc .cpt,.cpc>span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-6)}}
/* F19: Claim: the same gap under the rule as elsewhere, a tighter card */
.cen-panel{padding:var(--sp-36) var(--sp-20)}
/* F20: token hero: name and price share a top edge */
.thero{align-items:start}
/* F22: token actions on phones: Swap full width, the other two side by side; tighter stack */
@media(max-width:480px){.mk .acts{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch;width:100%;justify-self:stretch}.mk .acts>:first-child{grid-column:1/-1}.mk{gap:var(--sp-16)}}
@media(max-width:1100px){.mk{gap:var(--sp-16)}}
/* ---- ui audit (launchpad_layout/audits/ui.md), 2026-10-21 ---- */
/* 5: every close is the 38 px round icon button (the notice bar keeps its small borderless close: the bar is one
   line of 12 px text) */
.dlg .x,.netbar .nx{width:38px;height:38px;display:grid;place-items:center}
/* 4: Try again next to the logo preview is the small ghost pill */
.wzc #wz-logo-retry{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--sp-14);margin-left:var(--sp-6);border:1px solid var(--ch-line2);border-radius:999px;background:transparent;color:var(--ch-white);font:600 12px/1 var(--ch-sans);cursor:pointer}
.wzc #wz-logo-retry:hover{border-color:var(--ch-white)}
/* 6: the wallet message next to Connect on Create has the dialog's radius; its close is the icon button */
.ch .wallet-msg{border-radius:16px}
.ch .wallet-msg .wallet-x{width:30px;height:30px;border:1px solid var(--ch-line2);border-radius:50%;display:grid;place-items:center;line-height:1}
/* 9: the token page link chips are the ghost sm pill (same type as Copy address beside them) */
.links2 a{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--sp-14);font-size:12px;font-weight:600;color:var(--ch-white)}
.links2 a:hover{border-color:var(--ch-white)}
/* 13: selects draw the site's chevron, not the system arrow */
select.fld,.wzc select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ch-mute) 50%),linear-gradient(135deg,var(--ch-mute) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
/* 18: numbers in tables line up */
.tbl td{font-variant-numeric:tabular-nums}
/* 23: touch screens: tabs, step pills and small pills reach a 44 px hit height */
@media (pointer:coarse){.tabs button,.pill.sm,.links2 a{min-height:44px}.wzc .wz-progress li{min-height:44px;display:inline-flex;align-items:center}}
/* the sound switch: a round icon button in the bar, a row in the drawer; in the sidebar it sits by Connect */
header.top .snd svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
header.top .ico.snd[aria-pressed=false]{color:var(--ch-mute)}
.drawer .snd.l{display:flex;align-items:center;gap:var(--sp-10);margin-top:var(--sp-20);padding:var(--sp-12) 0;background:transparent;border:0;color:var(--ch-white);font-size:15px;cursor:pointer;min-height:44px}
@media(max-width:1180px){header.top .right>.ico.snd{display:none}}
@media(min-width:1181px){body.ch:not(.ed-ch) header.top #sndb{order:11;align-self:flex-start;margin-top:var(--sp-10)}body.ch:not(.ed-ch) header.top #wbtn,body.ch:not(.ed-ch) header.top .wgrp{order:12}body.ch:not(.ed-ch) header.top #balslot:empty+#sndb{margin-top:auto}}
/* the site tooltip (js/tooltip.js, ui audit 15): small, dark, one line or two */
.ch-tip{position:fixed;z-index:400;max-width:260px;padding:var(--sp-6) var(--sp-10);background:var(--ch-k0c0c0c);color:var(--ch-white);border:1px solid var(--ch-line2);border-radius:8px;font:500 12px/1.4 var(--ch-sans);pointer-events:none;box-shadow:0 8px 24px var(--ch-rgba-0-0-0-p55)}
.ch-tip[hidden]{display:none}
/* ---- ui audit M and L items (8, 11, 12, 14, 17, 22), 2026-10-21 ---- */
/* 8, 22: four kinds of small pill. Micro labels (chip, badge, tag): 11 px, uppercase, .09em. Small controls (tabs,
   options, parts, chain toggles, segment rails, step pills, note pills): the small button size, 12 px, weight 500 */
.chip,.badge,.tag{font-size:11px;letter-spacing:.09em}
.tabs button,.opts button,.ct,.seg button,.layers button,.chip-b,.pillnote{font-size:12px;font-weight:500}
/* 11: boxes by role (A-044): panels 6 px; small boxes inside forms 10 px on the field colour; dialogs 16 px */
.wl button{border-radius:10px}
/* 12: one panel padding, the mockup's 22 px (16 on phones, as before) */
.panel,.sb .panel{padding:22px}
@media(max-width:760px){.panel,.sb .panel{padding:var(--sp-16)}}
/* 14: the wrong-network bar is the notice bar's twin: same size of text */
.netbar{font-size:12px}
/* 17: one link style per role. Inline actions (C-010): muted, underlined 1 px at 3 px, white on hover. Body links in
   the docs (C-013): white, underlined */
.manual,.wz-manual,.wz-edit,.nowal summary,.rv a.ed,.ed-prompt-link,button.cp{color:var(--ch-mute);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.manual:hover,.wz-manual:hover,.wz-edit:hover,.nowal summary:hover,.rv a.ed:hover,.ed-prompt-link:hover,button.cp:hover{color:var(--ch-white)}
.doc p a,.doc li a,.doc td a{color:var(--ch-white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.notice a{text-decoration-thickness:1px;text-underline-offset:3px}
/* ---- qol audit, site (launchpad_layout/audits/qol.md), 2026-10-21 ---- */
/* 15: nothing launched yet: no empty chart grid, just the line and Create a token */
.hero.noart .stage,.hero.noart+.ticker{display:none}
/* 12: the search box has its own close button */
.searchbox .wrap{position:relative}
.searchbox .sx{position:absolute;right:var(--ch-gut);top:var(--sp-6);width:38px;height:38px;border:1px solid var(--ch-line2);border-radius:50%;background:transparent;color:var(--ch-mute);font-size:17px;line-height:1}
.searchbox .sx:hover{color:var(--ch-white)}
.searchbox input{padding-right:52px}
/* 13: the Explore line that says one chain is switched off */
#explore .head .sub{margin:var(--sp-6) 0 0;color:var(--ch-mute);font-size:13px}
/* ---- polish audit (launchpad_layout/audits/polish.md), 2026-10-21 ---- */
/* 1: a card is a print under glass: the frame lifts a little, the art scales inside its mat; a hairline over the
   second line of facts; numbers line up */
.mat{overflow:hidden}
.mat canvas{transition:transform .52s cubic-bezier(.2,.7,.2,1);transform-origin:50% 55%}
@media(hover:hover){.card:hover{transform:translateY(-3px)}.card:hover .mat canvas{transform:scale(1.03)}}
@media(hover:none){.card:hover{transform:none}}
.meta .row{font-variant-numeric:tabular-nums}
.meta .row+.row{padding-top:var(--sp-8);border-top:1px solid var(--ch-line)}
/* 2: the cards rise in the first time they arrive, 60 ms apart */
#grid.enter .card{animation:cardin .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes cardin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 3: loading bars shimmer */
.sk,.skel .mat{background:linear-gradient(100deg,var(--ch-k0c0c0c) 30%,var(--ch-k1a1a1a) 50%,var(--ch-k0c0c0c) 70%);background-size:300% 100%;animation:skw 1.4s linear infinite}
@keyframes skw{from{background-position:100% 0}to{background-position:-100% 0}}
/* 4: an empty state is a framed object, not a dashed placeholder */
.empty{border:1px solid var(--ch-line);border-radius:3px;background:var(--ch-k080808)}
/* 7: the chain cards answer the pointer and show the pick with a tick */
.cpc{position:relative;transition:border-color .16s,background .16s}
.cpc[aria-checked=true]::after{content:'';position:absolute;top:var(--sp-16);right:var(--sp-16);width:18px;height:18px;border-radius:50%;background:var(--ch-white)}
.cpc[aria-checked=true]::before{content:'';position:absolute;top:calc(var(--sp-16) + 5px);right:calc(var(--sp-16) + 5px);width:8px;height:4px;border-left:2px solid var(--ch-black);border-bottom:2px solid var(--ch-black);transform:rotate(-45deg);z-index:1}
/* 9: buttons give under the press; the ticker holds still under the pointer */
.pill:active,.btn:active,.seg button:active,.tabs button:active{transform:scale(.97);transition-duration:90ms}
.ticker:hover .tr{animation-play-state:paused}
/* 10: the hero chart fades into the page instead of ending on a hard edge */
.stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(to bottom,transparent,var(--ch-black));pointer-events:none}
/* 11: phones: a little more air between cards, the menu slides in */
@media(max-width:760px){.grid{row-gap:var(--sp-56)}.drawer.open{animation:drawin .22s cubic-bezier(.2,.7,.2,1) both}}
@keyframes drawin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#grid.enter .card,.drawer.open,.sk,.skel .mat{animation:none}.mat canvas{transition:none}}
/* ---- motion (owner 2026-10-22): the live activity rail and the bump of a traded coin to the front ---- */
.arail{display:none}
.arail ol{list-style:none;margin:0;padding:0;overflow:hidden}
.arail .ae{display:grid;grid-template-columns:26px 1fr auto;gap:var(--sp-8);align-items:center;padding:var(--sp-6) 0;border-bottom:1px solid var(--ch-line);font-size:11.5px;line-height:1.3;color:var(--ch-mute);min-width:0}
.arail .ae .tx{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere} /* round 2 F03: two lines, the full line in its title */
.arail .ae b{color:var(--ch-kd8d8d8);font-weight:500}
.arail .ae a{color:var(--ch-white);text-decoration:none}
.arail .ae a:hover{text-decoration:underline}
.arail .ae time{font-size:10.5px;color:var(--ch-faint);font-variant-numeric:tabular-nums}
.arail .th{position:relative;width:26px;height:26px;border:1px solid var(--ch-line2);border-radius:5px;overflow:hidden;background:var(--ch-black);display:grid;place-items:center}
.arail .th canvas{position:absolute;inset:0;width:100%;height:100%}
.arail .th i{font-style:normal;font-size:9px;color:var(--ch-faint)}
.arail .th.art i{display:none}
/* the buy or sell mark: a thin bar in the side's colour on the thumbnail */
.arail .k-buy .th{box-shadow:inset 0 -2px 0 var(--ch-neon-green)}
.arail .k-sell .th{box-shadow:inset 0 -2px 0 var(--ch-neon-magenta)}
.arail .big .tx,.arail .big b{color:var(--ch-white)}
.arail .big{background:linear-gradient(90deg,var(--ch-rgba-255-255-255-p06),transparent 70%)}
.arail .old{opacity:.62}
.arail .ae.in{animation:aein .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes aein{from{opacity:0;transform:translateY(-100%);max-height:0}to{opacity:1;transform:none;max-height:60px}}
.arail .ah{display:flex;align-items:center;gap:var(--sp-8);background:none;border:0;padding:0;color:var(--ch-faint);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;cursor:default}
.arail .ah .dot{width:6px;height:6px;border-radius:50%;background:var(--ch-white);animation:apulse 2s ease-in-out infinite}
@keyframes apulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(min-width:1181px){
 body.ch:not(.ed-ch) header.top .arail.side{order:9;display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-20);min-height:0;flex:0 1 auto;overflow:hidden}
 body.ch:not(.ed-ch) header.top .arail.side ol{max-height:calc(9 * 39px)}
}
@media(max-width:1180px){
 .arail.strip{display:block;position:sticky;top:var(--ch-hdr,56px);z-index:39;background:var(--ch-black);border-bottom:1px solid var(--ch-line);padding:var(--sp-6) var(--ch-gut)}
 .arail.strip .ah{cursor:pointer;min-height:28px}
 .arail.strip ol{max-height:39px}
 .arail.strip .ae{border-bottom:0}
 .arail.strip .ae:not(:first-child){display:none}
 .arail.strip.open ol{max-height:none}
 .arail.strip.open .ae:not(:first-child){display:grid;border-top:1px solid var(--ch-line)}
 .arail.strip{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--sp-12)}
 .arail.strip.open{grid-template-columns:1fr}
}
@media(min-width:1181px){.arail.strip{display:none}}
/* a coin that just traded jumps to the front of Live: a brief flash in its own neon */
#grid .card.bump .frame{animation:bump 1.2s ease-out}
@keyframes bump{0%{box-shadow:0 0 0 1px var(--bump),0 0 26px var(--bump)}100%{box-shadow:0 0 0 1px transparent,0 0 0 transparent}}
#grid .card.bump .mat::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,var(--ch-rgba-255-255-255-p16) 50%,transparent 70%);background-size:250% 100%;animation:shim .9s ease-out both;pointer-events:none}
@keyframes shim{from{background-position:120% 0}to{background-position:-30% 0}}
@media(prefers-reduced-motion:reduce){.arail .ae.in,.arail .ah .dot{animation:none}#grid .card.bump .frame,#grid .card.bump .mat::after{animation:none}}
/* the pump.fun study (2026-10-22): a trade's market cap flashes at once; a waiting reorder shows as a pill */
#grid .mc.fl[data-flash=up]{animation:mcup .7s ease-out}
#grid .mc.fl[data-flash=down]{animation:mcdn .7s ease-out}
@keyframes mcup{0%{color:var(--ch-neon-green)}100%{color:inherit}}
@keyframes mcdn{0%{color:var(--ch-neon-magenta)}100%{color:inherit}}
.pill.bumped{position:fixed;z-index:58;top:calc(var(--ch-hdr,56px) + 14px);left:50%;transform:translateX(-50%);background:var(--ch-white);color:var(--ch-black);box-shadow:0 10px 30px var(--ch-rgba-0-0-0-p7)}
@media(min-width:1181px){body.ch:not(.ed-ch) .pill.bumped{top:18px;left:calc(50% + var(--ch-side) / 2)}}
.pill.bumped[hidden]{display:none}
#grid .card.bump .frame{animation-duration:.8s}
@media(prefers-reduced-motion:reduce){#grid .mc.fl{animation:none}}
/* card glow (owner 2026-10-22, a blend of mocks B and C): behind each card's art tile a blurred halo in the piece's two
   colours (inset -10 px, blur 28 px), dim at rest (0.08); every trade pulses it to 0.4 while the tile's thin border lights
   up in the piece colour, both easing back over 1.2 s (at most one pulse per card each 0.8 s, home.js). The old glow
   inside the art is gone. Reduced motion: the dim halo, no pulse. */
#grid .card{isolation:isolate}
#grid .card .frame{position:relative;border-color:var(--ch-rgba-255-255-255-p06)}
#grid .card .frame::before{content:"";position:absolute;inset:-10px;z-index:-1;pointer-events:none;border-radius:14px;background:linear-gradient(135deg,var(--g1,transparent),var(--g2,transparent));filter:blur(28px);opacity:.08}
#grid .card .mat canvas{z-index:1}
#grid .card .mat .cb{z-index:2}
#grid .card.pulse .frame::before{animation:haloP 1.2s ease-out 1}
#grid .card.pulse .mat{animation:bordP 1.2s ease-out 1}
@keyframes haloP{0%{opacity:.08}18%{opacity:.4}100%{opacity:.08}}
@keyframes bordP{0%{border-color:var(--ch-k121212);box-shadow:0 0 0 0 transparent}18%{border-color:var(--g1);box-shadow:0 0 6px -1px var(--g1)}100%{border-color:var(--ch-k121212);box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){#grid .card.pulse .frame::before,#grid .card.pulse .mat{animation:none}}
/* trade bubbles over the token page chart */
.chartbox .tbub{position:absolute;bottom:18%;z-index:3;padding:var(--sp-4) var(--sp-10);border:1px solid var(--ch-line2);border-radius:999px;background:var(--ch-rgba-0-0-0-p7);font-size:11.5px;color:var(--ch-kd8d8d8);white-space:nowrap;pointer-events:none;animation:tbub 2.6s ease-out forwards}
.chartbox .tbub b{color:var(--ch-white);font-weight:500}
.chartbox .tbub.buy{border-color:var(--ch-neon-green)}
.chartbox .tbub.sell{border-color:var(--ch-neon-magenta)}
@keyframes tbub{0%{opacity:0;transform:translateY(10px)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(-90px)}}
@media(prefers-reduced-motion:reduce){.chartbox .tbub{animation:none}}
/* How it works, four steps (owner 2026-10-22): the step number above each caption; reduced motion shows the four steps as still frames side by side */
.howcaps i{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--ch-line2);border-radius:50%;font-style:normal;font-size:12px;color:var(--ch-faint);margin-bottom:var(--sp-10);transition:all .3s ease}
.howcaps li.on i{background:var(--ch-white);border-color:var(--ch-white);color:var(--ch-black)}
.howcaps b{font-size:22px}
.howstage.stills{height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ch-line)}
.howstage.stills canvas.hs{position:static;width:100%;height:auto;aspect-ratio:4/3;background:var(--ch-black)}
@media(max-width:760px){.howstage.stills{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.howcaps i{transition:none}}
/* owner 2026-10-22: the agent's profile picture as a small round signature in the bottom-left of each Explore card's
   art (the initials when there is no picture); it sits in the margin the drawing leaves and never takes the pointer */
#grid .card .mat .sig{position:absolute;left:8px;bottom:8px;z-index:2;width:24px;height:24px;border-radius:50%;border:1px solid var(--ch-rgba-255-255-255-p18);background:var(--ch-black);display:grid;place-items:center;overflow:hidden;font-family:var(--ch-sans);font-size:9px;font-weight:600;letter-spacing:.02em;color:var(--ch-mute);pointer-events:none;opacity:.92}
#grid .card .mat .sig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* round 2 F06: tap targets. On phones (and any coarse pointer) every control is at least 44 px; at every width no
   link is under 24 px tall */
@media (pointer:coarse),(max-width:768px){
  #sbtn,.burger,header.top .ico,.sbox .sx,.stage .arrow,.notice .nx{width:44px;height:44px;min-width:44px}
  .seg.sm button{min-height:44px}
  .cp,.addrb,details.q summary .qlink,button.cp{min-height:44px;min-width:44px}
  details.q summary .qlink{width:44px;height:44px}
}
.notice a,.faq-end a,table.addrt a.mono,.ticker a{display:inline-block;padding-block:5px;margin-block:-5px}
.notice a{padding-inline:8px;margin-inline:-8px}
.arail .ae a{padding-block:5px} /* inline: the two-line clamp of the row keeps working */
.arail .ah{min-height:24px}
/* round 2 C06: the token chart's hover readout */
.chartbox .crd{position:absolute;top:8px;z-index:4;display:flex;flex-direction:column;gap:2px;padding:6px 10px;border:1px solid var(--ch-line2);border-radius:8px;background:var(--ch-rgba-0-0-0-p7);font-size:11.5px;color:var(--ch-kd8d8d8);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.chartbox .crx{position:absolute;top:0;bottom:0;width:1px;background:var(--ch-rgba-255-255-255-p16);pointer-events:none;z-index:3}
.chartbox .crd[hidden],.chartbox .crx[hidden]{display:none}
/* qol round 2 (8): one close button on search (the browser's own clear is hidden); the result picked with the arrows */
#sin::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
#sres a[aria-selected="true"]{background:var(--ch-rgba-255-255-255-p06);outline:1px solid var(--ch-line2)}
/* qol round 2 (7): the card's last trade and quick buy row, and the links menu */
#grid .card .row.qb{align-items:center}
#grid .card .row.qb .lt{color:var(--ch-mute)}
#grid .card .qbuy{padding:var(--sp-4) var(--sp-12);font-size:12px}
#grid .card details.more summary{list-style:none;cursor:pointer;color:var(--ch-mute);font-size:12.5px;padding:var(--sp-6) 0}
#grid .card details.more summary::-webkit-details-marker{display:none}
#grid .card details.more summary::after{content:" \25BE"}
#grid .card details.more[open] summary{color:var(--ch-ink)}
/* qol round 2 (2): swap amount chips and the slippage line */
.dlg .chips{display:flex;gap:var(--sp-8);margin:calc(var(--sp-8) * -1) 0 var(--sp-12)}
.dlg .chips[hidden]{display:none}
.dlg .chips button[aria-pressed="true"]{background:var(--ch-white);color:var(--ch-black);border-color:var(--ch-white)}
.dlg details.slipd summary{cursor:pointer;color:var(--ch-mute);font-size:12.5px;margin-bottom:var(--sp-8)}
/* qol round 2 (3): the token page on a phone leads with the price and the chart: the description is two lines with More,
   Watchlist and Share are small, and Swap is a bar fixed to the bottom of the screen */
@media (max-width:760px){
  .thero .ds{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .thero .ds.open{display:block;-webkit-line-clamp:unset}
  .thero .dsmore{margin:var(--sp-4) 0 0;min-height:32px}
  .thero .acts .pill.ghost{padding:var(--sp-6) var(--sp-12);font-size:12.5px}
  body.tpage #swapb{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;width:auto;min-height:48px;box-shadow:0 10px 30px var(--ch-rgba-0-0-0-p7)}
  body.tpage main{padding-bottom:84px}
}
/* ---- round 2 UI audit, the non-art items ---- */
/* phones: the hero's arrows sit bottom left, clear of the price axis and its tag on the right */
@media(max-width:760px){.stage .a1{right:auto;left:var(--ch-gut)}.stage .a2{right:auto;left:calc(var(--ch-gut) + 52px)}}
/* 11: How it works steps not lit are still readable (white 0.55, about 5.8:1) */
.howcaps b{color:var(--ch-rgba-255-255-255-p55,rgba(255,255,255,.55))}
.howcaps li.on b{color:var(--ch-white)}
/* 12: the live activity rows never fade under 0.7, times at 11.5 px */
.arail .old{opacity:.7}
.arail .ae time{font-size:11.5px}
.arail .th i{font-size:10px}
/* 14: small labels: the chain badge 11 px */
.cb{font-size:11px;letter-spacing:.06em}
/* 15: card hierarchy: the market cap reads first, the change in its colour */
#grid .card .mc{font-size:14px;color:var(--ch-rgba-255-255-255-p9,rgba(255,255,255,.9))}
/* 21: the hero chip is a label, not a button (no outline); the arrows are the buttons */
.stage .chip{border-color:transparent;background:var(--ch-rgba-255-255-255-p06)}
.stage .arrow{border-color:var(--ch-rgba-255-255-255-p35,rgba(255,255,255,.35))}
/* 22: card and panel borders separate regions on a dim screen (white 0.14) */
#grid .card .mat,.panel{border-color:var(--ch-rgba-255-255-255-p14,rgba(255,255,255,.14))}
/* 23: card names on one line with an ellipsis, 18 px, so the grid lines up */
#grid .card .meta h3{font-size:18px;min-width:0}
#grid .card .meta h3 .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 16: segment controls are 40 px tall on phones */
@media (pointer:coarse),(max-width:768px){.seg button{min-height:40px}}
/* 20: the ticker stands still under reduced motion and while the pointer is on it */
.ticker:hover .tr{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ticker .tr{animation:none}}
/* 18: on phones the live activity strip tucks away while scrolling down and comes back on the way up */
.arail.strip{transition:transform .25s ease}
.arail.strip.tuck:not(.open){transform:translateY(-110%);pointer-events:none}
@media(prefers-reduced-motion:reduce){.arail.strip{transition:none}}