:root{--marker:"Permanent Marker","Segoe Print","Comic Sans MS",cursive;--crayon-ink:#2b3550;--paper:#fffdf5;--hl:#fff1b8;--ink:#24317a;--line:#2b2d31;--text:#1d1f22;--sky:#74c6f2;--side:262px;--up:#1f8a3b;--down:#c8302a}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--sky);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;overflow-x:clip}
a{color:inherit;text-decoration:none}
/* UX sweep 139: form controls take the page font instead of the browser's Arial 13.33px */
button,input,select,textarea{font:inherit}
h1,h2,h3,p{margin:0}
svg{display:block}
.shell{display:flex;min-height:100vh}

/* wobble outline technique */
.ink{position:absolute;inset:-6px;pointer-events:none;border-radius:inherit}
/* boil: only the search bar and the connect wallet button, seed stepped in app.js */
.ink>i{position:absolute;inset:6px;border:1.6px solid var(--line);border-radius:inherit;display:block}

/* sidebar */
.side{position:sticky;top:var(--banner-h,0px);height:calc(100vh - var(--banner-h,0px));width:var(--side);flex:none;z-index:20;background:transparent;padding:22px 34px 22px 18px;display:flex;flex-direction:column;gap:22px;filter:drop-shadow(4px 3px 0 rgba(30,70,110,.18))}
/* step 82: the sheet of paper behind the bar, torn along its right edge (clip-path on the background layer only, so nothing in the bar is clipped) */
.side::before{content:"";position:absolute;inset:0;z-index:-1;background:#fffaf0;clip-path:polygon(0 0,93% 0,97% 2%,91% 4.5%,96% 7%,92% 9%,98% 12%,93% 15%,96% 18%,90% 21%,95% 24%,92% 27%,97% 31%,91% 34%,96% 37%,93% 41%,98% 44%,92% 47%,95% 51%,90% 54%,96% 57%,92% 61%,97% 64%,93% 67%,96% 71%,91% 74%,95% 77%,92% 81%,97% 84%,93% 87%,96% 91%,91% 94%,95% 97%,92% 100%,0 100%)}
.brand{display:flex;align-items:center;gap:6px}
/* the wordmark is the shaky gif; the tagline sits under it, set in type */
.brand-stack{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1}
.brand-tag{margin:-10px 0 0 4px;font-family:"Permanent Marker","Segoe Print","Comic Sans MS",cursive;font-size:13px;letter-spacing:.3px;color:var(--ink);opacity:.85;white-space:nowrap}
/* step 72: the actual wordmark GIF (boil animation baked in), not type set in a font */
.brand-word{display:block;width:174px;height:74px;object-fit:contain}
.nav{display:flex;flex-direction:column;gap:6px}
.nav a{display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:8px;font-family:var(--marker);font-size:17px;font-weight:400;white-space:nowrap;color:var(--crayon-ink);transition:background .15s}
.nav a svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--ic,var(--crayon-ink));stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;filter:url(#crayon)}
/* step 82: one crayon colour per item */
.nav a:nth-child(1){--ic:#e8453c}.nav a:nth-child(2){--ic:#2f6fd6}.nav a:nth-child(3){--ic:#2f9e4f}.nav a:nth-child(4){--ic:#f08a24}.nav a:nth-child(5){--ic:#8b5cc7}.nav a:nth-child(6){--ic:#e85d9c}
.nav a:hover{background:var(--hl)}
/* step 82: the item you are on gets the marker highlight and a red crayon underline under its label */
.nav a>span{position:relative}
.nav a.active{background:#ffe98a;color:var(--crayon-ink)}
.nav a.active>span::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-5px;height:8px;border-bottom:4px solid #e8453c;border-radius:0 0 50% 50% / 0 0 100% 100%;transform:rotate(-1deg);filter:url(#crayon);pointer-events:none}
.side-foot{margin-top:auto;font-size:13px;font-weight:600;color:#5a6478;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--up)}
/* collapsible sidebar: the whole screen opens up for the coins when tucked away */
.side{transition:transform .25s ease,width .25s ease}
.nav-toggle{position:fixed;top:calc(var(--banner-h,0px) + 14px);left:calc(var(--side) - 18px);z-index:9998;width:40px;height:40px;display:grid;place-items:center;background:#fffaf0;border:2.2px solid var(--crayon-ink);border-radius:9px 5px 8px 6px;cursor:pointer;box-shadow:2px 2px 0 rgba(30,70,110,.18);transition:left .25s ease}
.nav-toggle svg{width:24px;height:24px;fill:none;stroke:var(--crayon-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:url(#crayon)}
.nav-toggle .nt-open{display:none}
html.nav-collapsed{--side:0px}
html.nav-collapsed .side{position:fixed;top:var(--banner-h,0px);left:0;height:calc(100vh - var(--banner-h,0px));width:262px;transform:translateX(-100%)}
html.nav-collapsed .nav-toggle{left:14px}
html.nav-collapsed .nav-toggle .nt-close{display:none}
html.nav-collapsed .nav-toggle .nt-open{display:block}
/* UX sweep 94: the toggle sits on the top bar's centre line, and with the side bar tucked away the top bar shows the
   brand (clear of the toggle) so a collapsed page still says doodlpad */
.nav-toggle{top:calc(var(--banner-h,0px) + 26px)}
@media (min-width:821px){
  html.nav-collapsed .phone-brand{display:flex;align-items:center;gap:8px;flex:none;text-decoration:none}
  html.nav-collapsed .main{padding-left:max(clamp(16px,3vw,40px),68px)}
}

/* page / sky */
.page{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background-color:var(--sky);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.18 0 0 0 0 0.25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sky{position:absolute;inset:0;overflow-x:clip;overflow-y:hidden;pointer-events:none;z-index:0}
.cloud{position:absolute;left:0;will-change:transform;animation:drift linear infinite}
.cloud svg{width:100%;overflow:visible}
@keyframes drift{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.doodle{position:absolute;opacity:.5}
/* step 135: the tally sits right of the hero subtitle and the spiral left of the hero heading, both clear of the text and
   of the aeroplane strip; on a phone they sit in the gap under the subtitle */
.dd-tally{top:259px;left:56%}
.dd-spiral{top:160px;left:56px}
@media (max-width:640px){.dd-tally{top:316px;left:44%}.dd-spiral{top:316px;left:auto;right:8%;width:52px}}
/* UX sweep round 4, 88: once the hero stacks (under 1100px) there is no clear spot beside the headline, and the tally
   and spiral landed on "meme tokens", so they are not drawn there */
@media (max-width:1099px){.dd-tally,.dd-spiral{display:none}}
/* on a phone the content is the full width, so no sky doodle has a clear spot */
@media (max-width:820px){.sky .doodle{display:none}}
/* background doodles (step 33, js/chrome.js): behind the content, never clickable, the boil filter on these svgs only */
.bg-boil{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-boil svg.bgd{position:absolute;overflow:visible;opacity:.5;pointer-events:none;filter:url(#wobBg)}
.bg-defs{position:absolute;pointer-events:none}
/* UX sweep round 4, 88: the doodles sit at the page edges. Until the window is wide enough to leave a margin beside the
   content column, those edges ARE the content (the hero headline, the Explore "Live" label), so they are not drawn. */
@media (max-width:1699px){.bg-boil{display:none}}
.main{position:relative;z-index:2;flex:1;padding:24px clamp(16px,3vw,40px) 40px;width:100%;max-width:1280px;margin:0 auto}

/* top bar */
.topbar{position:relative;display:flex;gap:16px;align-items:center;margin-bottom:28px}
.search{position:relative;flex:1;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--paper);border-radius:6px 10px 5px 9px}
.search svg{fill:none;stroke:#44484e;stroke-width:1.8;flex:none}
.search input{border:0;background:transparent;font:inherit;font-size:14px;color:var(--text);width:100%;outline:none;min-width:0}
.btn{position:relative;padding:11px 20px;background:#fff;border:0;border-radius:999px;font:inherit;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap}
.btn:hover{background:#f4f7f9}
/* audit 9.7: a disabled button looks disabled, and a hover does not wake it up */
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:#fff}
/* launch.js token block (post-launch pop-up and launch status box): the address with its small Copy button on one row,
   then Token page, Explorer, Chart as three equal buttons. Layout only; the look comes from css/ui.css. These beat the
   older structural pop-up rules in ui.css that assumed one wrapping button row. */
#coin-popup div.token-addr.token-addr,#cfg-token div.token-addr.token-addr{display:flex !important;flex:1 1 100%;flex-direction:row !important;align-items:center !important;gap:8px;margin:0 !important}
/* UX sweep 48: Copy sits at the right of the address in both places, at the same type size as the other buttons */
#coin-popup div.token-addr.token-addr>.btn,#cfg-token div.token-addr.token-addr>.btn{width:auto;flex:none;min-height:40px;padding:4px 12px;font-size:14px !important;order:2}
#coin-popup .btn,#cfg-token .btn,#cfg-token a.btn{font-size:14px !important}
#coin-popup div.token-addr.token-addr>code,#cfg-token div.token-addr.token-addr>code{flex:1 1 auto !important;min-width:0;margin:0 !important}
#coin-popup div.token-actions.token-actions,#cfg-token div.token-actions.token-actions{display:grid !important;flex:1 1 100%;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important}
#coin-popup div.token-actions.token-actions>.btn,#cfg-token div.token-actions.token-actions>.btn{width:100%;min-width:0;padding-left:8px;padding-right:8px;white-space:nowrap}
/* UX sweep 42: on a narrow phone the three token buttons stack, so Token page never overflows its button */
@media (max-width:480px){#coin-popup div.token-actions.token-actions,#cfg-token div.token-actions.token-actions{grid-template-columns:minmax(0,1fr) !important}}
#cfg-token div.token-actions.token-actions>a.btn-primary{background:var(--crayon-ink) !important;color:#ffd84a !important;border-color:var(--crayon-ink) !important}
#coin-popup div button.btn.btn-quiet{position:absolute;top:10px;right:10px;width:auto;margin:0 !important;min-height:32px;padding:4px 10px}
/* step 82: the crayon search field and Connect wallet button. The outline keeps the boil (#wob, stepped in js/chrome.js) and gets the crayon grain (#crayon) on top. */
.topbar .ink{filter:url(#wob) url(#crayon)}
.topbar .search .ink>i{border:2.5px solid var(--crayon-ink)}
.search input{font-weight:500}
.search input::placeholder{color:#5a6478;opacity:1}
.topbar .btn{background:var(--crayon-ink);color:#ffd84a;font-family:var(--marker);font-weight:400;font-size:16px;padding:9px 18px;border-radius:8px 4px 10px 5px;transform:rotate(1deg);transition:transform .15s}
.topbar .btn:hover{background:var(--crayon-ink);transform:rotate(1deg) translateY(-2px)}
.topbar .btn .ink>i{inset:4px;border:3px solid var(--crayon-ink)}
/* Create a token: the same crayon pill, inverted (yellow fill, ink text) so it is the first thing a new visitor sees */
.btn-create{background:#ffd84a;color:var(--crayon-ink);font-family:var(--marker);font-weight:400;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.topbar .btn-create,.topbar .btn-create:hover{background:#ffd84a;color:var(--crayon-ink)}
.btn-create:hover{background:#ffe773}
.btn-create .ink>i{inset:4px;border:3px solid var(--crayon-ink)}
/* UX sweep 118: the top bar controls share one height (44px): Create a token, the wallet button (marker or, once
   connected, the monospace address) and the balance chip */
.topbar .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
@media (min-width:1201px){.topbar #wallet-balance{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box;padding:4px 14px;font-size:14px}}
/* UX sweep 87: the search keeps room for its placeholder. Below 1200px the balance hangs under the wallet button
   (as on a phone) instead of squeezing the search. */
@media (min-width:1024px){.topbar .search{min-width:280px}}
@media (min-width:821px) and (max-width:1200px){
  .topbar .wallet-group>#wallet-balance{position:absolute;top:calc(100% + 6px);right:0;z-index:5}
  .topbar .wallet-group.has-balance>.wallet-msg{top:calc(100% + 48px)}
}
/* UX sweep round 4, 140: between the phone layout and 1024px the search, Create a token and the wallet button do not
   fit on one row, so the search takes its own full row under the two buttons */
@media (min-width:821px) and (max-width:1023px){
  .topbar{flex-wrap:wrap;row-gap:12px}
  .topbar .search{order:3;flex:1 1 100%;min-width:0}
  .topbar .btn-create{margin-left:auto}
  /* the balance sits beside the wallet button on the button row, so it never covers the search row */
  .topbar .wallet-group{display:inline-flex;align-items:center;gap:8px}
  .topbar .wallet-group>#wallet-balance{position:static}
  .topbar .wallet-group.has-balance>.wallet-msg,.topbar .wallet-group.has-balance>.wallet-msg.wallet-pop{top:calc(100% + 8px)}
}

/* step 72: the aeroplane marquee, just below the search bar. One hand drawn
   plane towing a ribbon banner, the banner text filled from the same trending
   list the hero and gallery read (js/app.js). Step 78: ONE red plane and one banner,
   animated in code (js/app.js sizes the flight). */
.marquee{position:relative;overflow:hidden;width:100%;height:64px;margin:-4px 0 18px;pointer-events:none}
.marquee-track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;white-space:nowrap;will-change:transform;animation:marquee-fly var(--mq-dur,20s) linear infinite}
.marquee-flight{display:inline-flex;align-items:center;flex:none}
.plane-svg{display:block;flex:none;animation:plane-bob 1.4s ease-in-out infinite}
.plane-prop{animation:plane-prop .09s linear infinite alternate;transform-box:view-box;transform-origin:15px 44px}
.marquee-banner{position:relative;display:inline-flex;align-items:center;height:34px;margin-left:-2px;padding:0 24px 0 14px;background:#fff;box-shadow:inset 0 0 0 1.8px var(--ink);border-radius:7px 2px 2px 7px;font-family:"Caveat","Segoe Print","Comic Sans MS",cursive;font-weight:700;font-size:17px;color:#13224f;white-space:nowrap;flex:none}
.marquee-banner .mq-up{color:var(--up)}.marquee-banner .mq-dn{color:var(--down)}
/* UX sweep round 4, 87: the bullet between entries keeps its space on both sides */
.marquee-banner .mq-sep{margin:0 12px;color:#13224f}
/* UX sweep 88: each tape entry opens its token page */
.marquee-banner a{pointer-events:auto;text-decoration:none}
.marquee-banner a:hover{text-decoration:underline}
.marquee-banner::before{content:"";position:absolute;right:-17px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-width:19px 0 19px 17px;border-color:transparent transparent transparent var(--ink)}
.marquee-banner::after{content:"";position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-width:16px 0 16px 14px;border-color:transparent transparent transparent #fff}
@keyframes marquee-fly{from{transform:translateX(var(--mq-from,100vw))}to{transform:translateX(var(--mq-to,-100%))}}
@keyframes plane-bob{0%,100%{transform:translateY(-3px) rotate(-1.5deg)}50%{transform:translateY(3px) rotate(1.5deg)}}
@keyframes plane-prop{from{transform:scaleY(1)}to{transform:scaleY(.18)}}

/* hero: centred title, then the framed featured launch, then the trending gallery */
.hero{position:relative;padding-top:8px;scroll-margin-top:calc(var(--banner-h,0px) + 16px);display:flex;flex-direction:column;gap:28px}
.hero-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}
/* the column sits right of the sidebar; pull the centred block back to the window's centre */
@media (min-width:1100px){.hero-center{left:calc(var(--side) / -2)}}
.hero-copy{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy h1{width:fit-content}
h1{font-size:clamp(34px,5vw,56px);line-height:1.04;letter-spacing:-.02em;font-weight:800;color:#13224f}
.hero-slogan{font-family:"Permanent Marker","Segoe Print","Comic Sans MS",cursive;font-size:clamp(20px,2.2vw,28px);color:var(--ink);margin-top:10px;letter-spacing:.2px}
.hero-copy p{margin-top:12px;font-size:17px;color:#26405c}
.phone-brand{display:none}
/* UX sweep 119: one high contrast phone brand on every page: the logo and the name in navy marker */
.phone-word{font-family:var(--marker);font-size:26px;font-weight:400;line-height:1;color:#13224f;letter-spacing:.2px}
.hero-prompt{margin-top:16px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.feature{margin:0;width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:14px}
.frame{position:relative;width:100%;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:#d7ecf7;border:12px solid #fffdf7;outline:2.4px solid var(--line);box-shadow:inset 0 0 0 2px var(--line),0 16px 34px rgba(40,70,100,.22);overflow:hidden}
.sun{position:absolute;left:50%;top:2%;width:86%;aspect-ratio:1;transform:translateX(-50%);z-index:1}
.sun svg{width:100%;height:100%;overflow:visible}
.featured{position:relative;width:100%;z-index:3}
/* UX sweep 77: the frame keeps its 3:4 shape but grows when the card is taller, so the card's chart is never clipped.
   A spacer and the card share one grid cell: the frame is as tall as the larger of the two, the card sits at the bottom. */
.frame{display:grid;grid-template-columns:minmax(0,1fr);aspect-ratio:auto}
.frame::before{content:"";grid-area:1/1;padding-top:calc(400% / 3 + 20px)}
.frame>.featured{grid-area:1/1;align-self:end}
/* step 71: copy and the trending frame SIDE BY SIDE (text left, frame right) from 821px up; stacked, text first, below */
.feature-row{display:flex;align-items:center;gap:12px;width:100%}
.feature-row>.frame{flex:1 1 auto;min-width:0}
.feat-next{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:0;box-shadow:inset 0 0 0 1.6px var(--ink);cursor:pointer;color:var(--ink)}
.feat-next[hidden]{display:none}
.feat-next svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.feat-next:hover{background:#fff8e1}
.feat-next:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* UX sweep 94: side by side only from 1100px; below that the heading would break into four lines next to the card */
@media (min-width:1100px){
  .hero-center{flex-direction:row;justify-content:center;align-items:center;gap:56px;left:0}
  .hero-copy{align-items:flex-start;text-align:left;flex:0 1 auto;min-width:0}
    .feature,.feature-sk{width:min(492px,50%);flex:0 0 auto}
}
/* UX sweep 85: arrows on both sides, so the frame and its caption sit on the same centre line */
.feature-row>.feat-prev{order:-1}
/* UX sweep 90: the grey skeleton that holds the featured card's place while the tokens load */
.feature-sk{width:min(380px,100%);padding:0 56px}
.feature-sk-frame{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;padding:18px;background:#d7ecf7;border:12px solid #fffdf7;outline:2.4px solid var(--line);box-shadow:inset 0 0 0 2px var(--line),0 16px 34px rgba(40,70,100,.22)}
@media (max-width:1099px){.feature{width:min(468px,100%)}.feature-sk{width:min(468px,100%)}}
/* UX sweep 93: on a phone the frame takes the full width, centred, and the two arrows sit under it */
@media (max-width:640px){
  .feature{width:100%}
  .feature-row{flex-wrap:wrap;justify-content:center}
  .feature-row>.frame{flex:1 1 100%}
  .feature-row>.feat-prev{order:1}.feature-row>.feat-next:not(.feat-prev){order:2}
  .feature-sk{width:100%;padding:0}
}
/* UX sweep 84: a plain caption, not a pill that looks like a button */
.hot-label{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-align:center}
.gallery{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-behavior:smooth;touch-action:pan-x pan-y;padding:10px 4px 16px;cursor:grab;scrollbar-width:thin}
.gallery>.tok{flex:0 0 280px}
.gallery.dragging{cursor:grabbing;user-select:none}
.gallery.dragging>.tok{pointer-events:none}
.gallery:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:18px}

/* token card */
.tok{position:relative;background:var(--paper);border-radius:4px;padding:16px;box-shadow:0 7px 12px rgba(28,72,118,.26);transition:transform .18s ease,box-shadow .18s ease}
.tok:hover{transform:translateY(-4px);box-shadow:0 14px 20px rgba(28,72,118,.3)}
/* step 82: the card outline is a crayon line drawn over the chart edge too */
.tok>.ink{z-index:2;filter:url(#crayon)}
.tok>.ink>i{border:2.5px solid var(--crayon-ink);border-radius:3px 6px 4px 5px}
.tok-top{display:flex;align-items:center;gap:10px}
/* UX sweep 84: name, ticker and the quote pill stack in one column, so the name keeps the card's full width */
.tok-id{min-width:0;flex:1 1 auto}
/* UX sweep 93: the quote asset is plain text in the ticker line */
.tok-quote{font-weight:700;color:var(--crayon-ink)}
/* UX sweep 89: a token named like the platform */
/* UX sweep 88: what the change is measured against */
.tok-chg-lab{margin-left:6px;font-size:12px;font-weight:600;color:#5a6478}
.tok-av{width:38px;height:38px;border-radius:50% 46% 52% 48%;background:var(--hl);border:2px solid var(--crayon-ink);display:grid;place-items:center;font-family:var(--marker);font-weight:400;font-size:13px;color:var(--crayon-ink);flex:none}
.tok-name{font-family:var(--marker);font-weight:400;font-size:18px;line-height:1.2}
.tok-tick{font-size:13px;font-weight:800;color:#5a6478}
.pill{margin-left:auto;font-family:var(--marker);font-size:12px;font-weight:400;padding:3px 9px 4px;border-radius:8px 4px 9px 5px;border:2px solid var(--crayon-ink);color:var(--crayon-ink);background:#bfe8c4}
.tok .art{position:relative;margin:0 0 12px;aspect-ratio:var(--art-aspect,1.8);border-radius:8px;overflow:hidden;background:#181c27;border:4px solid var(--q,#d9dee6);box-sizing:border-box}
.tok .art svg{position:absolute;top:0;left:0;height:100%}
.tok .art svg.priceline{width:100%;overflow:visible;filter:drop-shadow(0 0 1px #0b0e14) drop-shadow(0 0 2.5px rgba(11,14,20,.95))}
/* live candlestick chart: one canvas filling the art box, used instead of the silhouette when the coin has candles */
.tok .art canvas.cc{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.tok .art canvas.cc[hidden]{display:none}
.tok-row{display:flex;justify-content:flex-start;align-items:baseline;font-size:13px}
.tok-row b{font-size:17px}
.up{color:var(--up);font-weight:600}.dn{color:var(--down);font-weight:600}
.tok-sub{font-size:13px;color:#5b6168;margin-top:4px}
.tok-av.has-logo{overflow:hidden;padding:0;background:#fff}
.tok-av img{display:block;width:100%;height:100%;object-fit:cover}
.tok-desc{font-size:13px;color:#3d434a;margin-top:6px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.tok-links{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:6px}
/* UX sweep 83: the token's own links are pills like the trade links */
.tok-links a{font-size:12px;font-weight:600;color:var(--crayon-ink);text-decoration:none;padding:1px 8px;border:1.4px solid var(--crayon-ink);border-radius:999px;background:#fff}
.tok-links a:hover,.tok-links a:focus-visible{background:var(--hl);outline:none}
/* step 77: the agent's face in the corner beside the chart, and its one-line shill */
.tok .tok-agent{position:absolute;top:auto;bottom:-10px;right:-8px;left:auto;height:46px;width:58px;transform:none;pointer-events:none;z-index:3;filter:drop-shadow(0 3px 6px rgba(40,70,100,.20))}
.tok .tok-agent svg{position:static;width:100%;height:100%;display:block;overflow:visible}
.tok-shill{display:block;width:100%;max-width:calc(100% - 56px);padding:0;margin:6px 0 0;height:18px;line-height:18px;font-size:13px;font-weight:600;color:#26405c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.tok-link{color:inherit;text-decoration:none}
.tok-link::after{content:"";position:absolute;inset:0;z-index:1}
.tok-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tok:has(.tok-link){cursor:pointer}
.tok-links a,.tok-ca,.tok-trade a{position:relative;z-index:2}
.tok-trade{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:6px}
.tok-trade a{font-size:12px;font-weight:600;color:var(--crayon-ink);text-decoration:none;padding:1px 8px;border:1.4px solid var(--crayon-ink);border-radius:999px;background:#fff}
.tok-trade a:hover,.tok-trade a:focus-visible{background:var(--hl);outline:none}
.tok-ca{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:2px 8px;border:1.4px solid var(--crayon-ink);border-radius:999px;background:#fff;font:inherit;font-size:12px;font-weight:600;color:#26405c;cursor:pointer}
.tok-ca b{font-weight:700;color:var(--ink)}
.tok-ca:hover,.tok-ca:focus-visible{background:var(--hl);outline:none}
.tok-sk .tok-row,.tok-ph .tok-row{justify-content:space-between}
/* UX sweep 93: the trade links are one row of tappable pills (32px), and the address chip reads as a copy control:
   a dashed box with a copy icon, not another pill link */
.tok-trade{flex-wrap:nowrap;gap:6px}
.tok-trade a{flex:1 1 0;min-width:0;min-height:32px;display:inline-flex;align-items:center;justify-content:center;padding:4px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tok-ca{min-height:32px;padding:4px 10px;border-style:dashed;border-radius:8px;background:#f6f8fb;font-family:ui-monospace,Menlo,Consolas,monospace}
.tok-ca b{display:inline-flex;align-items:center;gap:4px;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.tok-ca b::before{content:"";width:12px;height:12px;flex:none;border:1.6px solid currentColor;border-radius:2px;box-shadow:-3px -3px 0 -1.6px #f6f8fb,-3px -3px 0 0 currentColor}
/* UX sweep round 4, 92: card pills and the Copy chip are one small-button style: white, a solid ink outline, the same
   radius and height. Only the address itself stays monospace. */
.tok-trade a,.tok-links a,.tok-ca{border:1.6px solid var(--crayon-ink);border-radius:8px;background:#fff;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:12px;font-weight:700}
.tok-links a{min-height:32px;display:inline-flex;align-items:center;padding:4px 10px}
.tok-ca>span{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600}
.tok-ca b::before{box-shadow:-3px -3px 0 -1.6px #fff,-3px -3px 0 0 currentColor}
/* UX sweep 93: the agent's line may take two lines instead of being cut */
.tok-shill{height:auto;max-height:36px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
/* UX sweep round 4, 91: whose line it is */
.tok-shill[data-by]::before{content:attr(data-by) ": ";font-weight:800;color:var(--crayon-ink)}

/* sections */
.sec{margin-top:56px;scroll-margin-top:calc(var(--banner-h,0px) + 16px)}
.sec h2{font-size:28px;font-weight:800;letter-spacing:-.01em;color:#13224f}
/* UX sweep 86: the Explore heading matches the other section headings */
.sec-head h2{font-size:clamp(32px,4.2vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.05}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
/* step 82: crayon filter chips. The outline is a ::before so the grain never touches the label; the one you are on is yellow. */
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tabs button{position:relative;border:0;background:#fff;font-family:var(--marker);font-size:15px;font-weight:400;padding:6px 16px 7px;border-radius:14px 6px 12px 8px;cursor:pointer;color:var(--crayon-ink);transform:rotate(-1deg);transition:background .15s}
.tabs button:nth-child(even){transform:rotate(1deg)}
.tabs button::before{content:"";position:absolute;inset:0;border:2.5px solid var(--crayon-ink);border-radius:inherit;filter:url(#crayon);pointer-events:none}
.tabs button:hover{background:var(--hl)}
.tabs button.on,.tabs button.on:hover{background:#ffd84a}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
/* nav out: 2 tokens per row. nav tucked away: the freed width fits 3 (wide screens only) */
@media (min-width:900px){html.nav-collapsed .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* UX sweep 97: every chip the same box, picked or not */
.tabs button{box-sizing:border-box;height:38px;line-height:1.2;display:inline-flex;align-items:center}
/* UX sweep round 4, 92: the Explore chips use the shared button look (css/ui.css): sans 14px bold, a solid 2px ink
   outline and the shared radius, the picked one yellow. No tilt and no crayon outline, so they read as one set with
   the hero button and the card pills. */
.tabs button{transform:none;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;font-weight:700;padding:6px 16px;border:2px solid var(--crayon-ink);border-radius:10px}
.tabs button:nth-child(even){transform:none}
.tabs button::before{display:none}
.steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.steps li,.doc,details{background:#fff;border-radius:16px;padding:18px;border:1.6px solid var(--line)}
.steps b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eec247;border:1.6px solid var(--line);margin-bottom:8px}
.steps h3,.doc h3{font-size:18px;margin-bottom:4px}
p{line-height:1.45}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.doc:hover{background:#f4f9fc}
details{margin-top:12px}
summary{cursor:pointer;font-weight:600}
details p{margin-top:8px;color:#44484e}

/* docs and FAQ pages (step 32) */
/* UX sweep 106: one body size (15px, as on the home page) and one content column that starts where the top bar starts */
.prose{position:relative;max-width:820px;margin:0;background:#fff;border:1.6px solid var(--line);border-radius:18px;padding:clamp(20px,3.5vw,40px);font-size:15px;line-height:1.6;color:#26303a}
.prose h1{font-size:clamp(30px,4vw,36px);line-height:1.1;color:#13224f;margin-bottom:6px}
.prose .lede{font-size:18px;color:#26405c}
.prose h2{font-size:22px;font-weight:800;color:#13224f;margin-top:30px;scroll-margin-top:calc(var(--banner-h,0px) + 16px)}
.prose p{margin-top:10px}
.prose ol{margin:12px 0 0;padding-left:22px}
.prose li{margin-top:6px}
.fee-table{margin-top:14px;border-collapse:collapse;width:100%;max-width:420px;font-variant-numeric:tabular-nums}
.fee-table th,.fee-table td{text-align:left;padding:8px 10px;border-bottom:1px dashed #c4ccd6;font-size:15px}
.fee-table th{font-size:13px;color:#5b6168;font-weight:700}
.fee-table td:last-child,.fee-table th:last-child{text-align:right}
.faq details{background:#f6f9fb}
.faq h2+details{margin-top:14px}
/* UX sweep 81: the FAQ page uses the home page's question cards */
.faq details.fq{margin-top:14px;background:var(--paper)}
.prose h3{font-size:18px;font-weight:800;color:#13224f;margin-top:18px}
/* UX sweep 126: contract addresses, left aligned in monospace, each a link to the Explorer */
.addr-table{margin-top:14px;border-collapse:collapse;width:100%}
.addr-table th,.addr-table td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px dashed #c4ccd6}
.addr-table th{font-size:13px;color:#5b6168;font-weight:700}
.addr-table td:first-child{white-space:nowrap;padding-right:16px}
.addr-table code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all;overflow-wrap:anywhere}
.addr-table a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
@media (max-width:640px){.addr-table th,.addr-table td{display:block;padding:2px 0;border:0}.addr-table thead{display:none}.addr-table tr{display:block;padding:8px 0;border-bottom:1px dashed #c4ccd6}.addr-table td:first-child{font-weight:700}}

/* create modal */
html.modal-open,html.modal-open body{overflow:hidden}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(19,34,79,.45)}
.modal[hidden]{display:none}
.modal-card{position:relative;width:min(780px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#f6f9fb;border:1.6px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 18px 50px rgba(20,40,80,.35)}
.modal-card h2{font-size:26px;font-weight:800;color:#13224f;margin-bottom:18px}
/* two equal columns; the boxes are twice the step 24 height (210.75px measured, now 422px) */
.choices{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:stretch}
.modal-doodle{position:absolute;pointer-events:none;overflow:visible}
.md-tally{top:20px;right:72px;width:64px;opacity:.8}
.modal-doodle-row{display:flex;justify-content:space-between;align-items:flex-end;padding:16px 8px 0;pointer-events:none}
.modal-doodle-row .modal-doodle{position:static}
.md-spiral{width:50px;opacity:.55}
.md-rocket{width:26px;margin-right:10px;transform:rotate(18deg);opacity:.8}
.md-gap{top:50%;left:50%;width:40px;transform:translate(-50%,-50%);opacity:.55}
/* both cards identical in size and shape; only the accent tint differs */
.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;font:inherit;color:var(--text);min-height:360px;padding:34px 26px;border-radius:20px;cursor:pointer;background:var(--paper);border:2.4px solid var(--crayon-ink);box-shadow:4px 5px 0 rgba(30,70,110,.16);transition:transform .15s,box-shadow .15s}
.choice:hover,.choice:focus-visible{transform:translateY(-4px);box-shadow:6px 9px 0 rgba(30,70,110,.22)}
.choice:focus-visible,.modal-x:focus-visible{outline:3px solid #eec247;outline-offset:3px}
.choice h3{margin:0;font-family:var(--marker);font-size:26px;font-weight:400;color:#13224f}
.choice p{margin:0;font-size:15px;line-height:1.45;color:#44484e;max-width:24ch}
.choice-ico{width:76px;height:76px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:url(#crayon)}
.choice-ico *{vector-effect:non-scaling-stroke}
.choice-ico .c1{fill:#c8302a}.choice-ico .c2{fill:#eec247}
.choice-main{background:#fff6da}
.choice-main .choice-ico{stroke:#e8702a}
.choice-alt{background:#eef6ff}
.choice-alt .choice-ico{stroke:#2f6fd6}
.modal-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%;border:1.6px solid var(--line);background:#fff;font:inherit;font-size:22px;line-height:1;cursor:pointer;color:var(--text)}
.agent-cloud .cloud-aura{opacity:0}
.agent-cloud.talking .cloud-aura{animation:ap-aura .5s ease-in-out infinite alternate}
@keyframes ap-aura{from{opacity:.15}to{opacity:.85}}

.load-err{grid-column:1/-1;background:#fff;border:1.6px solid var(--down);border-radius:16px;padding:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-weight:600}
.load-err button{font:inherit;font-size:14px;padding:8px 16px;border-radius:999px;border:1.6px solid var(--line);background:#fff;cursor:pointer}

/* grass + dirt */
.grass{position:relative;z-index:2;width:100%;height:70px;margin-bottom:-1px}
.dirt{position:relative;z-index:2;background-color:#6b4a2f;color:#eadcc3;padding:40px clamp(16px,3vw,40px) 56px;
background-image:radial-gradient(circle at 20% 30%,#5a3d26 0 3px,transparent 3.5px),radial-gradient(circle at 70% 60%,#7d5a3c 0 2.5px,transparent 3px),radial-gradient(circle at 45% 80%,#5a3d26 0 2px,transparent 2.5px);background-size:90px 70px,130px 90px,60px 55px}
.foot-in{display:flex;gap:24px;flex-wrap:wrap;align-items:center;font-size:14px}
.foot-brand{font-family:"Caveat","Segoe Print",cursive;font-size:30px;font-weight:700;color:#fff3da}
.foot-in a:hover,.socials a:hover{color:#fff;text-decoration:underline}
.foot-row{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:14px}
.socials{display:flex;gap:18px}
/* step 40: wallet status line, data source label, search no-match line */
/* UX sweep 64: the wallet message floats under the button, so it never squeezes the search or moves the button */
.wallet-msg{font-size:13px;font-weight:600;color:var(--ink)}
.topbar .wallet-msg{position:absolute;top:calc(100% + 8px);right:0;z-index:60;max-width:min(380px,100%);padding:10px 14px;background:var(--paper);border:2px solid var(--crayon-ink);border-radius:12px;box-shadow:3px 4px 0 rgba(30,70,110,.16);font-size:13px;font-weight:600;line-height:1.4;color:var(--ink)}
.topbar .wallet-msg:empty{display:none}
.wallet-msg.is-error{color:var(--down)}
.wallet-msg a{color:inherit;text-decoration:underline}
#wallet-btn.connected{font-variant-numeric:tabular-nums}
/* UX sweep 68: the connected address in a monospace face, so 0x1111 never reads as 0x)))) */
.topbar #wallet-btn.connected,#wallet-btn.connected{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-size:14px;letter-spacing:0;min-width:10.5em}
/* UX sweep 66: the balance chip is a pill (its label and the menu behind it are js/balance-chip.js) */
#wallet-balance{display:inline-block;padding:4px 10px;border:1.6px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink) !important;font-weight:700}
.data-source{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink)}
/* UX sweep 95: "Live", with the block number in the tooltip */
.data-source[title]{display:inline-flex;align-items:center;gap:6px;cursor:help}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--up)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.data-source.is-sample{display:inline-block;padding:4px 10px;border:1.5px solid var(--down);border-radius:999px;color:var(--down);background:#fff}
.search-empty{margin:14px 0;font-size:15px;font-weight:600;color:var(--ink)}
.search-empty .search-clear{margin-left:8px;vertical-align:middle}
/* UX sweep round 4, 89: the matches under the search box */
.search-drop{position:absolute;z-index:70;display:flex;flex-direction:column;padding:6px;background:var(--paper);border:2px solid var(--crayon-ink);border-radius:12px;box-shadow:3px 4px 0 rgba(30,70,110,.16);max-width:calc(100vw - 32px)}
.search-drop .sd-row{display:flex;align-items:baseline;gap:8px;min-height:40px;padding:8px 10px;border-radius:8px;color:#13224f;text-decoration:none}
.search-drop .sd-row:hover,.search-drop .sd-row:focus-visible{background:var(--hl);outline:none}
.search-drop .sd-name{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-drop .sd-tick{font-size:13px;font-weight:700;color:#5a6478;flex:none}
.search-drop .sd-none{margin:0;padding:8px 10px;font-size:14px;font-weight:600;color:var(--ink)}
.search-drop button{margin-top:4px;min-height:40px;padding:6px 12px;border:2px solid var(--crayon-ink);border-radius:10px;background:#fff;font-size:14px;font-weight:700;color:var(--crayon-ink);cursor:pointer}
.search-drop button:hover,.search-drop button:focus-visible{background:var(--hl)}
.disclaimer{font-size:12px;opacity:.8}

@media (max-width:820px){
  .shell{display:block}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;height:auto;flex-direction:row;padding:6px 8px;gap:0;filter:none}
  .side::before{clip-path:none;border-top:2.5px solid var(--crayon-ink)}
  .brand,.side-foot{display:none}
  .nav-toggle{display:none}
  /* audit 8.7: the side brand is hidden on a phone, so the topbar carries it: brand and wallet on one row, the search on its own full row */
  .topbar{flex-wrap:wrap}
  .phone-brand{display:flex;align-items:center;gap:8px;order:0;flex:1 1 auto;min-width:0;text-decoration:none;color:var(--ink);font-family:var(--marker);font-size:26px;line-height:1}
  .phone-brand img{flex:none;display:block}
  .topbar .btn{order:1}
  /* UX sweep 65: the balance sits right after the wallet button (on its own line under it when the row is full), not beside the logo */
  #wallet-balance{order:1;flex:0 0 auto;margin-left:auto !important}
  .topbar .btn-create{order:2;flex:1 1 100%}
  .phone-word{display:block}
  .topbar .search{order:3;flex:1 1 100%}
  .nav{flex-direction:row;width:100%;justify-content:space-around;gap:2px}
  .nav a{flex-direction:column;gap:2px;padding:6px 2px;font-size:12px;flex:1;min-width:0;text-align:center;align-items:center;border-radius:10px}
  .nav a svg{width:22px;height:22px}
  .nav a span{white-space:normal;line-height:1.05;overflow-wrap:normal;text-overflow:clip;overflow:visible;text-align:center}
  .page{min-height:100vh}
  .dirt{padding-bottom:96px}
}
@media (max-width:640px){
  .choices{grid-template-columns:minmax(0,1fr)}
  .modal-card{padding:20px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .topbar{gap:10px}.btn{padding:11px 14px}
}
@media (prefers-reduced-motion:reduce){.cloud{animation:none;transform:translateX(var(--rx,20vw))}html{scroll-behavior:auto}.gallery{scroll-behavior:auto}.agent-cloud.talking .cloud-aura{animation:none}.marquee-track,.plane-svg,.plane-prop{animation:none}}

.feature[hidden]{display:none}
/* step 78: "chart coming soon" placeholder cards, same layout as a real card, no chart and no numbers */
.tok-ph{cursor:default}
.tok-ph:hover{transform:none;box-shadow:0 8px 24px rgba(40,70,100,.14)}
.tok-ph .art{display:block}
.ph-art{position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#f3f7fa 0 10px,#fbfcfb 10px 20px)}
.ph-art span{font-family:"Caveat","Segoe Print","Comic Sans MS",cursive;font-weight:700;font-size:22px;color:var(--ink);background:#fff;padding:2px 14px;border-radius:999px;box-shadow:inset 0 0 0 1.6px var(--ink)}
.ph-bar{display:block;height:12px;border-radius:6px;background:#e3ebf1}
.tok-av.ph-bar{width:38px;height:38px;border-radius:50%;background:#e3ebf1}
.ph-lines{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.ph-lines .ph-bar{width:70%}
.ph-short{width:40%!important}
.tok-top .pill.ph-bar{border:0;width:46px;height:20px;border-radius:999px;margin-left:auto}
.tok-row .ph-bar{width:34%;height:16px}
.tok-row .ph-bar.ph-short{width:18%!important}
.tok-sub .ph-bar{width:46%;height:10px;margin-top:6px}

/* ===== step 82: the card's progress bar, hand drawn in crayon (CSS only, no image file) =====
   The track is a wobbly crayon outline with a light scribble in it; the fill, when the coin reports a progress, is a
   colour drawn in diagonal strokes. A coin that reports no progress gets the scribbled empty track and no number. */
.tok-prog{position:relative;height:12px;margin:12px 2px 2px;border:2px solid var(--crayon-ink);border-radius:3px;background:#eef2f6 repeating-linear-gradient(135deg,rgba(43,53,80,.10) 0 2px,transparent 2px 6px);filter:url(#crayon)}
.tok-prog>i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--c,#2f6fd6) repeating-linear-gradient(135deg,rgba(255,255,255,.30) 0 2px,transparent 2px 5px)}
/* ===== step 82: the sun, in crayon (the sun only, nothing comes off it) ===== */
.sun svg{filter:url(#crayon)}
/* step 82: on the wide layout the sky runs on under the torn edge of the side bar, so a cloud slides behind the paper instead of being cut off in a straight line at the page edge */
@media (min-width:821px){.sky{left:-36px}}

/* Launch-day "not live yet" banner, shown at the top of every page. Remove the
   banner div from the pages (or this block) once the token is live. */
#notlive-banner{position:sticky;top:0;z-index:9999;display:flex;flex-wrap:wrap;gap:.5em;
  align-items:center;justify-content:center;text-align:center;
  background:#d4001f;color:#fff;font:700 clamp(15px,2.4vw,22px)/1.3 system-ui,sans-serif;
  padding:14px 16px;border-bottom:4px solid #7a0012;letter-spacing:.3px;
  text-shadow:0 1px 0 rgba(0,0,0,.35)}
#notlive-banner span{font-weight:600}
#notlive-banner a{color:#fff;text-decoration:underline;text-underline-offset:3px}
#notlive-banner a:hover{background:#fff;color:#d4001f;text-decoration:none}
#notlive-banner .nl-short{display:none}
/* UX sweep 91: below 1200px the long sentence wraps to two lines, so the short form is used there too (one line) */
@media (max-width:1200px){
  #notlive-banner:has(.nl-short){flex-wrap:nowrap;white-space:nowrap;font-size:16px;padding:8px 16px}
  #notlive-banner .nl-more{display:none}
  #notlive-banner .nl-short{display:inline}
}
/* UX sweep 129: on a phone the banner is one short line that scrolls away with the page */
@media (max-width:640px){
  #notlive-banner:has(.nl-short){position:static;flex-wrap:nowrap;gap:.4em;font-size:13px;padding:6px 12px;border-bottom-width:2px;white-space:nowrap}
  #notlive-banner .nl-more{display:none}
  #notlive-banner .nl-short{display:inline}
}


/* Prompt 18: skeleton cards while coins load, and the empty state */
.grid-wait{grid-column:1/-1;margin:0;font-weight:700;color:#13224f}
.tok-sk{cursor:default;pointer-events:none}
.tok-sk .ph-art,.tok-sk .ph-bar{animation:sk-pulse 1.2s ease-in-out infinite alternate}
@keyframes sk-pulse{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tok-sk .ph-art,.tok-sk .ph-bar{animation:none}}
.grid-empty{grid-column:1/-1;background:#fff;border:1.6px solid var(--line);border-radius:16px;padding:22px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-weight:600}

/* Prompt 4: phone fixes. Inputs at 16px so iOS does not zoom on focus; nav labels shrink and clip instead of colliding. */
@media (max-width:820px){
  input,select,textarea,.search input{font-size:16px}
  .cfg-status{scroll-margin-bottom:96px}
}
/* UX sweep 130, 94: phone nav labels are 12px on one line; How it works is shortened to Guide */
.nav-short{display:none}
@media (max-width:820px){
  .nav .nav-long{display:none}
  .nav .nav-short{display:inline}
  .nav a span{white-space:nowrap}
}
/* UX sweep round 4, 152: the section has one name everywhere. The phone tab says "How it works" too, a little smaller
   and on two short lines where the tab is too narrow for one; the "Guide" short form is no longer shown. */
@media (max-width:820px){
  .nav a span.nav-long{display:inline-block;max-width:100%;font-size:11px;line-height:1.05;white-space:normal}
  .nav .nav-short{display:none}
}

/* Prompt 5: the sticky banner is measured into --banner-h (js/nav-toggle.js), so the side menu, the toggle and jump-link targets all start below it.
   At phone width the bottom nav always shows, whatever collapse state was saved on a desktop. */
@media (max-width:820px){
  html.nav-collapsed .side{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;height:auto;transform:none}
  html.nav-collapsed .nav-toggle{display:none}
}

/* a hidden element stays hidden even when a class sets display */
[hidden]{display:none !important}