@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
: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:"Geist",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}
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:0;height:100vh;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:70px;left:calc(var(--side) - 46px);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-close{display:none}
html.nav-collapsed{--side:0px}
html.nav-collapsed .side{position:fixed;top:0;left:0;height:100vh;width:262px;transform:translateX(-100%)}
html.nav-collapsed .nav-toggle{left:14px}
html.nav-collapsed .nav-toggle .nt-open{display:none}
html.nav-collapsed .nav-toggle .nt-close{display:block}

/* 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}
/* 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}
.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{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}
/* 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)}

/* 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::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: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}
.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}
/* 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}
@media (min-width:821px){
  .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{width:min(436px,48%);flex:0 0 auto}
}
.hot-label{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:#fff;padding:6px 14px;border-radius:999px;box-shadow:inset 0 0 0 1.6px var(--ink)}
.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}
.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:-16px -16px 12px;aspect-ratio:var(--art-aspect,1.8);border-radius:4px 4px 0 0;overflow:hidden;background:#fbfcfb;border-bottom:1.4px solid #d6e0ea}
.tok .art svg{position:absolute;top:0;left:0;height:100%}
.tok .art svg.priceline{width:100%;overflow:visible}
/* 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:space-between;align-items:baseline;font-size:14px}
.tok-row b{font-size:17px}
.up{color:var(--up);font-weight:600}.dn{color:var(--down);font-weight:600}
.tok-sub{font-size:12px;color:#5b6168;margin-top:4px}
/* step 77: the agent's face in the corner beside the chart, and its one-line shill */
.tok .tok-agent{position:absolute;top:-20px;right:-16px;left:auto;height:58px;width:70px;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%;padding:0;border:0;background:none;font-family:inherit;text-align:left;margin:6px 0 0;height:16px;line-height:16px;font-size:11px;font-weight:600;color:#26405c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;border-radius:4px}
.tok-shill:hover,.tok-shill:focus-visible{background:#eef5fa;outline:none}
.tok-shill.is-empty::before{content:"add a line";color:#8a96a3;font-weight:500}
.tok-shill-in{width:100%;height:16px;margin:0;padding:0 2px;border:0;border-bottom:1.4px solid var(--ink);background:#fff;font:inherit;font-size:11px;font-weight:600;color:#13224f;outline:none}

/* sections */
.sec{margin-top:56px;scroll-margin-top:16px}
.sec h2{font-size:28px;font-weight:800;letter-spacing:-.01em;color:#13224f}
.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 coins 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))}}
.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) */
.prose{position:relative;max-width:820px;margin:0 auto;background:#fff;border:1.6px solid var(--line);border-radius:18px;padding:clamp(20px,3.5vw,40px);font-size:16px;line-height:1.6;color:#26303a}
.prose h1{font-size:clamp(30px,4vw,42px);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: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}
.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}

/* 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 panel: left = cloud, three drawings, chat; right = the coin form */
.agent-panel{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"main agent" "actions actions";gap:22px;align-items:start;background:#f6f9fb;border:1.6px solid var(--line);border-radius:22px;padding:22px;transform-origin:50% 0}
.ap-main{grid-area:main;display:flex;flex-direction:column;gap:14px;min-width:0}
.ap-agent{grid-area:agent;display:flex;flex-direction:column;gap:12px;background:#fff;border:1.6px solid var(--line);border-radius:16px;padding:18px;align-self:stretch}
.ap-agent .ap-cloud{width:100%;max-width:170px;margin:0 auto 2px}
.ap-actions{grid-area:actions;display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap}
.agent-panel[hidden]{display:none}
.agent-panel.ap-flip{animation:ap-flip .6s ease-out}
@keyframes ap-flip{from{transform:perspective(1200px) rotateX(-90deg);opacity:0}to{transform:none;opacity:1}}
.ap-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.ap-head{display:flex;align-items:center;gap:14px}
.ap-cloud{width:150px;flex:none}
.ap-cloud svg{display:block;width:100%;height:auto;overflow:visible}
.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}}
.ap-say{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ap-name{font-size:13px;color:#44484e;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-name-err{flex-basis:100%;color:var(--down);font-size:12px;font-weight:700;min-height:0}
.ap-name-err:empty{display:none}
.ap-name.ap-invalid input{border-bottom-color:var(--down);border-bottom-style:solid;color:var(--down);animation:ap-shake .32s}
@keyframes ap-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion: reduce){.ap-name.ap-invalid input{animation:none}}
/* step 74: the agent's look, one pick (or none) per set */
.ap-look{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:#44484e}
.ap-look label{display:flex;align-items:center;gap:4px}
.ap-look select{font:inherit;font-size:12px;color:var(--ink);background:#fff;border:1.4px solid var(--line);border-radius:999px;padding:2px 8px}
.ap-name input{font:inherit;font-weight:700;font-size:15px;color:var(--ink);border:0;border-bottom:1.6px dashed var(--ink);background:transparent;padding:2px 0;width:12ch;min-width:0}
.ap-bubble{margin:0;background:#fff;border:1.6px solid var(--line);border-radius:16px;padding:10px 14px;font-weight:600;color:#13224f;min-height:1.4em}
.ap-bubble.ap-err{border-color:var(--down);color:var(--down)}
.ap-drawings{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ap-slot{margin:0;background:#fff;border:1.6px dashed #9fb1c6;border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ap-slot.ap-has{border-style:solid;border-color:var(--line);cursor:pointer}
.ap-slot.ap-picked{box-shadow:inset 0 0 0 2.4px var(--ink);background:#fff8e1}
/* one frame, the full width of the old three-card row; it grows downward to the drawing's own aspect, so nothing is cropped */
.ap-art{aspect-ratio:4/3;border-radius:8px;background:#eef3f7;overflow:hidden;display:grid;place-items:center}
.ap-has .ap-art{aspect-ratio:auto}
.ap-art img{width:100%;height:auto;display:block}
.ap-slot figcaption{font-size:12px;color:#44484e;line-height:1.3;min-height:2.6em}
.ap-running .ap-art{background:linear-gradient(90deg,#eef3f7 25%,#f8fbfd 50%,#eef3f7 75%) 0 0/200% 100%;animation:ap-shimmer 1.4s linear infinite}
@keyframes ap-shimmer{to{background-position:-200% 0}}
.ap-progress{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:#13224f}
.ap-progress[hidden]{display:none}
.ap-bar{flex:0 0 160px;height:10px;border-radius:999px;border:1.6px solid var(--line);background:#fff;overflow:hidden}
.ap-bar i{display:block;height:100%;width:5%;background:#eec247;transition:width .6s}
.ap-chat{display:flex;flex-direction:column;gap:8px;background:#fff;border:1.6px solid var(--line);border-radius:16px;padding:12px}
.ap-note{font-size:13px;color:#44484e}
.ap-chat-row{display:flex;gap:10px}
.ap-chat-row input{flex:1;min-width:0;font:inherit;font-size:15px;border:1.6px solid var(--line);border-radius:999px;padding:10px 16px}
.ap-form{display:flex;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.ap-form h2{margin:0 0 6px;font-size:20px}
.ap-form label{font-size:13px;font-weight:700;color:#13224f;margin-top:6px}
.ap-form input,.ap-form textarea{font:inherit;font-size:15px;border:1.6px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0;resize:vertical}
.ap-use{margin-top:0;align-self:center}
.ap-csv{margin-top:0 !important;align-self:center !important}
.ap-use:disabled,.ap-chat .btn:disabled{opacity:.5;cursor:default}
.ap-hint{color:#44484e}
/* step 76: rate the drawing, two clicks at most, kept or abandoned */
.ap-rate{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:#44484e}
.ap-rate[hidden],.ap-why[hidden]{display:none}
.ap-thumb{font-size:18px;line-height:1;width:38px;height:34px;border-radius:999px;border:1.6px solid var(--line);background:#fff;cursor:pointer}
.ap-thumb[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink);background:#fff8e1}
.ap-why{display:flex;gap:6px;flex:1 1 260px;min-width:0}
.ap-why input{flex:1;min-width:0;font:inherit;border:1.4px solid var(--line);border-radius:999px;padding:5px 12px;background:#fff}
.ap-why-send{font:inherit;border:1.4px solid var(--ink);border-radius:999px;padding:4px 12px;background:#fff;cursor:pointer}
.ap-editor-link{margin-left:auto;font-size:13px;color:#44484e}

/* loading screen */
.loading{position:fixed;inset:0;z-index:100;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(116,198,242,.92)}
.loading img{width:min(320px,70vw);height:auto;border-radius:24px;background:#fff;box-shadow:0 8px 24px rgba(40,70,100,.18)}
.loading span{font-weight:700;color:#13224f}
/* step 78: one full cycle of doodlpad-loader.gif (109 frames, 20 to 150 ms each, 8120 ms in all), see LOADER_CYCLE_MS in app.js */
.loading{--loader-cycle:1.5s}
.loading-cycle{display:block;width:min(320px,70vw);height:6px;border-radius:3px;background:linear-gradient(var(--ink),var(--ink)) left center/0% 100% no-repeat,#fff;box-shadow:inset 0 0 0 1.4px var(--ink)}
.loading.run .loading-cycle{animation:loader-cycle var(--loader-cycle) linear 1 forwards}
@keyframes loader-cycle{from{background-size:0% 100%}to{background-size:100% 100%}}
.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 */
.wallet-msg{font-size:13px;font-weight:600;color:var(--ink)}
.wallet-msg.is-error{color:var(--down)}
#wallet-btn.connected{font-variant-numeric:tabular-nums}
.data-source{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink)}
.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)}
.disclaimer{font-size:12px;opacity:.8}

@media (max-width:820px){
  .agent-panel{grid-template-columns:minmax(0,1fr);padding:14px}
  .ap-cloud{width:110px}
  .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{flex-direction:row;width:100%;justify-content:space-around;gap:2px}
  .nav a{flex-direction:column;gap:2px;padding:6px 2px;font-size:10px;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:nowrap}
  .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-panel.ap-flip,.agent-cloud.talking .cloud-aura,.ap-running .ap-art{animation:none}.marquee-track,.plane-svg,.plane-prop,.loading.run .loading-cycle{animation:none}}

/* step 78: the create screen replaces the hero (and every other front page section) */
.create-mode .marquee,.create-mode #home,.create-mode #explore,.create-mode #how-it-works,.create-mode #docs,.create-mode #faq{display: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}