/* crypto exe: a simple, editorial learning site. Inspired by the clean dark look of an academy site:
   big bold headings, small numbered labels, one gold accent, the pixel skull as the only artwork.
   Mobile first (375px), wider layouts from 720px and 1000px. No web fonts, no background images.
   The only motion is the word tape and the iridescent glow behind the page (both still for reduced motion),
   CSS only on phones; big screens with a mouse add a ripple canvas over the hero (js/water.js).
   Styles for the practice tools live in tools.css and load with them. */
:root{
 --bg:#05070f;--bg2:#0a0e1a;--surface:#0d1222;--surface2:#141a2e;--line:#1c2338;--line2:#2b3450;
 --ink:#f5f1e8;--ink2:#aeb4c6;--ink3:#7b8299;
 --gold:#f2b544;--gold2:#ffd27a;
 --violet:#f2b544;--violet2:#f2b544;--lilac:#ffd27a;--pink:#ef7fb8;--cyan:#8fd8e8;--ok:#5fd99a;--bad:#ff8a7a;--warnc:#ffc46b;
 --kidbg:#1a1608;--kidline:#f2b544;--whybg:#0b1b24;--whyline:#5cbcd6;
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
 --r:14px;--r2:10px;--top:60px;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--top)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);overflow-x:hidden}
body.modal{overflow:hidden}
img{max-width:100%;height:auto}
a{color:var(--gold2)}
h1,h2,h3{line-height:1.02;margin:0 0 .45em;letter-spacing:-.035em}
h1{font-size:clamp(2.9rem,14vw,6.4rem);font-weight:850;font-weight:900;letter-spacing:-.05em;line-height:.92;margin:0}
h1 em,h2 em{font-style:normal;color:var(--gold)}
h2{font-size:clamp(2.2rem,10vw,4rem);font-weight:900;margin-bottom:18px}
h3{font-size:1.15rem;font-weight:750;letter-spacing:-.015em;line-height:1.2}
p{margin:.5em 0}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 18px}
@media (min-width:720px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-999px;top:8px;z-index:3000;background:var(--gold);color:#120d02;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
/* the numbered label above each heading: "01  Start here" */
.eyebrow{display:flex;align-items:center;gap:10px;font:600 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:0 0 18px}
.eyebrow span{color:var(--gold)}
.eyebrow span::after{content:" /";color:var(--line2)}
.sub{color:var(--ink2);max-width:58ch;font-size:1.05rem;margin:0 0 26px}
.note{font-size:.9rem;color:var(--ink3);margin-top:14px}
.loading{color:var(--ink3);margin:0}
.nojs{position:fixed;left:16px;right:16px;bottom:16px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)}

/* ---------- header: logo, music, wallet, and one Menu button at every size ---------- */
.top{position:sticky;top:0;z-index:500;background:#05070fee;border-bottom:1px solid var(--line)}
.top-in{position:relative;display:flex;align-items:center;gap:10px;height:var(--top)}
.logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:800;font-size:1.12rem;letter-spacing:-.02em;flex-shrink:0}
.logo img{image-rendering:pixelated;width:22px}
.logo b{color:var(--gold);font-weight:800}
.top-act{margin-left:auto;display:flex;align-items:center;gap:8px}
.iconbtn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);background:none;color:var(--ink);border-radius:999px;cursor:pointer;padding:0;flex:none}
.iconbtn:hover{border-color:var(--ink3)}
.iconbtn svg{width:19px;height:19px}
#musicbtn .mute-x{display:none}#musicbtn.muted .waves{display:none}#musicbtn.muted .mute-x{display:inline}
#musicbtn.muted{color:var(--ink3)}
#walletbtn{white-space:nowrap;max-width:40vw;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:22px}
#walletbtn .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:1px}
.menubtn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;background:none;color:var(--ink);font:600 .9rem var(--sans);cursor:pointer}
.menubtn i{width:14px;height:8px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menubtn[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
@media (max-width:400px){.menubtn span{display:none}.menubtn{width:40px;padding:0;justify-content:center}.top-act{gap:6px}#walletbtn{padding:8px 12px;font-size:.85rem}}
@media (max-width:340px){#walletbtn .long{display:none}}
/* the menu: a full-width drop-down in three short columns */
.nav{display:none}
.nav.open{display:grid;gap:22px;position:absolute;left:0;right:0;top:var(--top);padding:24px 18px 28px;background:var(--bg);border-bottom:1px solid var(--line);max-height:calc(100dvh - var(--top));overflow:auto}
.nav-col{display:flex;flex-direction:column}
.nav-h{font:600 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
.nav a{color:var(--ink);text-decoration:none;font-size:1.35rem;font-weight:750;letter-spacing:-.02em;padding:6px 0}
.nav a:hover,.nav a.on{color:var(--gold)}
@media (min-width:720px){.nav.open{grid-template-columns:repeat(3,1fr);padding:32px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);font:650 .95rem/1.2 var(--sans);border-radius:999px;cursor:pointer;text-decoration:none;margin:0;text-align:center}
.btn:hover{border-color:var(--ink3)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:default}
.btn.go{background:var(--gold);border-color:var(--gold);color:#140e02}
.btn.go:hover{background:var(--gold2);border-color:var(--gold2)}
.btn.ghost{background:none}
.btn.lg{min-height:54px;padding:14px 26px;font-size:1.02rem}
.btn.sm{min-height:40px;padding:8px 16px;font-size:.88rem}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.link{color:var(--gold);font-weight:650;text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- hero ---------- */
.hero{padding:40px 0 0;border-bottom:1px solid var(--line);overflow:hidden;
 background:radial-gradient(520px 360px at 85% 18%,#f2b5441a,transparent 70%)}
.hero-in{position:relative}
.hero-skull{position:absolute;right:0;top:-6px;width:clamp(70px,19vw,300px);image-rendering:pixelated;filter:drop-shadow(0 0 26px #9474f255)}
@media (min-width:860px){.hero-skull{top:auto;bottom:0}}
.hero .lead{font-size:1.12rem;color:var(--ink2);margin:26px 0 0;max-width:46ch}
.cta{display:grid;gap:10px;margin-top:28px}
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);padding:0;margin:36px 0 34px;color:var(--ink3);font:500 .7rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;max-width:480px;border-top:1px solid var(--line)}
.facts li{padding:14px 12px 0;border-left:1px solid var(--line)}
.facts li:first-child{border:0;padding-left:0}
.facts b{display:block;color:var(--ink);font:900 2rem/1 var(--sans);letter-spacing:-.04em;margin-bottom:6px}
@media (min-width:560px){.cta{display:flex;flex-wrap:wrap}}
@media (min-width:860px){.hero{padding-top:84px}.hero .lead{font-size:1.25rem}.facts{margin:56px 0 48px}}
/* the word tape: the topics, sliding slowly past */
.tape{border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:14px 0}
.tape-in{display:inline-flex;animation:tape 40s linear infinite}
.tape span{font:600 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);padding:0 18px}
.tape span::before{content:"✦";color:var(--gold);margin-right:18px}
@keyframes tape{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tape-in{animation:none}}

/* the hero water: no drawn lines, the iridescent dream shows straight through. On big screens with a mouse,
   js/water.js lays a low-res ripple canvas over the hero that follows the cursor, so the intro still feels like water. */
.hero{position:relative}
.hero>*{position:relative;z-index:1}
.hero>.hero-sea{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
 -webkit-mask:linear-gradient(#000 80%,transparent);mask:linear-gradient(#000 80%,transparent)}
.hero-sea canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s}
.hero-sea canvas.on{opacity:1}

/* the dream: an iridescent glow behind the rest of the page, like the inside of a shell or a holo card.
   One fixed layer (z-index -1, never repaints on scroll): soft pink, lilac, aqua and gold clouds over deep
   indigo, a second set of clouds that slowly fades in and out so the colours seem to shift, and a few
   twinkling sparkles. Opacity and transform only, so phones pay nothing per frame. */
.dream{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;
 background:radial-gradient(55% 40% at 0% 25%,#ef7fb855,transparent 70%),radial-gradient(55% 45% at 100% 50%,#6fd6ec44,transparent 70%),radial-gradient(70% 45% at 35% 100%,#9474f266,transparent 70%),radial-gradient(40% 30% at 80% 8%,#f2b54430,transparent 70%),linear-gradient(160deg,#120c2e,#0e0b2a 50%,#0a1530)}
.dream i{position:absolute;inset:-15%;will-change:opacity,transform}
/* the holo sheen: a soft rainbow sweep like light across a holographic card */
.dream .d1{background:conic-gradient(from 200deg at 60% 45%,#ef7fb840,#b79cff40,#6fd6ec40,#a8f0c830,#ffd27a38,#ef7fb840);
 -webkit-mask:radial-gradient(60% 50% at 55% 50%,#000,transparent 75%);mask:radial-gradient(60% 50% at 55% 50%,#000,transparent 75%);
 animation:shift 16s ease-in-out infinite alternate}
.dream .d2{background:radial-gradient(1.5px 1.5px at 12% 22%,#fffc,transparent),radial-gradient(1px 1px at 68% 14%,#ffe6f6,transparent),radial-gradient(2px 2px at 82% 62%,#dff8ffcc,transparent),radial-gradient(1px 1px at 34% 78%,#fffc,transparent),radial-gradient(1.5px 1.5px at 52% 38%,#fff3d6,transparent),radial-gradient(1px 1px at 92% 88%,#fffc,transparent),radial-gradient(1.5px 1.5px at 6% 58%,#e9dcff,transparent),radial-gradient(1px 1px at 44% 8%,#fffc,transparent),radial-gradient(1.5px 1.5px at 24% 92%,#ffe6f6,transparent);animation:twinkle 5s ease-in-out infinite alternate}
@keyframes shift{from{opacity:.35;transform:translate3d(-6%,3%,0) rotate(-6deg)}to{opacity:1;transform:translate3d(6%,-3%,0) rotate(6deg)}}
@keyframes twinkle{from{opacity:.3}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dream i{animation:none}}

/* ---------- sections ---------- */
.sec{padding:64px 0;border-bottom:1px solid var(--line)}
@media (min-width:720px){.sec{padding:104px 0}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.split{display:grid;gap:24px}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;align-items:start;gap:56px}}
/* start here: three numbered steps divided by thin lines */
.steps{list-style:none;padding:0;margin:8px 0 0;display:grid;border-top:1px solid var(--line)}
.steps li{padding:26px 0;border-bottom:1px solid var(--line)}
.steps .num{display:block;font:600 .8rem/1 var(--mono);letter-spacing:.12em;color:var(--gold);margin-bottom:14px}
.steps h3{font-size:1.4rem}
.steps p{color:var(--ink2);margin:0 0 16px;max-width:46ch}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.steps li{padding:30px 28px 32px;border-bottom:0;border-left:1px solid var(--line)}.steps li:first-child{border-left:0;padding-left:0}}
.cx-stats{margin:-4px 0 16px;max-width:320px}
.cx-stats:empty{display:none}
.st{display:flex;justify-content:space-between;font-size:.86rem;color:var(--ink2)}.st b{color:var(--ink)}
.bar{height:4px;border-radius:4px;background:#ffffff14;margin:6px 0 10px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--gold)}

/* classes */
.cls-grid{display:grid;gap:12px}
@media (min-width:720px){.cls-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cls-grid{grid-template-columns:repeat(3,1fr)}}
.cls{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column}
.cls.open{border-color:#f2b54466;background:linear-gradient(160deg,#1d1709,var(--surface) 60%)}
@media (min-width:720px){.cls.open{grid-column:1/-1;padding:28px}}
.cls-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cls .ce{font-size:24px;line-height:1}
.cls h3{font-size:1.3rem;margin:0 0 4px}
.cls.open h3{font-size:clamp(1.6rem,6vw,2.2rem);letter-spacing:-.03em}
.cls p{color:var(--ink2);margin:.3em 0;max-width:68ch}
.cls .len{font:500 .8rem var(--mono);letter-spacing:.06em;color:var(--ink3)}
.cls .cp{font-size:1.6rem;font-weight:900;letter-spacing:-.03em;color:var(--ink);margin-top:auto;padding-top:12px}
.cls.open .cp{margin-top:8px}
.cls .cp small{font:500 .74rem var(--mono);letter-spacing:.06em;color:var(--ink3)}
.cls .row .btn{flex:1 1 220px}
.cls:not(.open){padding:18px}
.cls:not(.open) .ce{font-size:20px}
.cls:not(.open) h3{font-size:1.1rem}
.cls:not(.open) p{font-size:.92rem;line-height:1.5}
.cls:not(.open) .cp{font-size:1.15rem;padding-top:8px}
.cls:hover{border-color:var(--line2)}
.cls .yt{position:relative;aspect-ratio:16/9;margin:12px 0;background:#000;border-radius:var(--r2);overflow:hidden;max-width:640px}
.cls .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--ink3);font:600 .68rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pill.on{border-color:var(--gold);color:var(--gold)}

/* free tools */
.tools{display:grid;gap:12px}
@media (min-width:600px){.tools{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tools{grid-template-columns:repeat(4,1fr)}}
.tool{display:flex;flex-direction:column;gap:4px;text-align:left;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);font:inherit;cursor:pointer;position:relative}
.tool i{font-style:normal;font-size:1.5rem;line-height:1;color:var(--gold);margin-bottom:14px}
.tool::after{content:"↗";position:absolute;right:18px;top:18px;color:var(--ink3)}
.tool:hover{border-color:var(--line2)}.tool:hover::after{color:var(--gold)}
.tool b{font-size:1.1rem;letter-spacing:-.01em}
.tool small{color:var(--ink2);font-size:.92rem;line-height:1.45}

/* whitelist journey */
.journey{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.journey li{display:flex;gap:12px;align-items:flex-start}
.journey .n{flex:0 0 26px;height:26px;border-radius:999px;border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;font:600 .74rem var(--mono)}
.journey li.done .n{background:var(--gold);border-color:var(--gold);color:#140e02}
.journey b{display:block}
.journey small{color:var(--ink2)}

/* about */
.about-grid{display:grid;gap:22px}
@media (min-width:860px){.about-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}}
.who{display:grid;grid-template-columns:64px 1fr;gap:6px 14px;align-items:center}
.who img{width:64px;height:auto;image-rendering:pixelated}
.who b{display:block;font-size:1.05rem}.who small{color:var(--ink3);font:500 .74rem var(--mono);letter-spacing:.06em}
.who p{grid-column:1/-1;color:var(--ink2);margin:8px 0 0}
.about-grid h3{margin-top:0}
.about-grid p{color:var(--ink2)}
.ticks{padding-left:20px;color:var(--ink2)}.ticks li{margin:4px 0}.ticks li::marker{color:var(--gold)}

/* closing call to action */
.closer{padding:80px 0;text-align:left;background:radial-gradient(480px 300px at 10% 100%,#f2b54414,transparent 70%)}
.closer h2{font-size:clamp(2.1rem,9vw,4.2rem);max-width:16ch}
@media (min-width:720px){.closer{padding:120px 0}}

/* footer */
.foot{border-top:1px solid var(--line);padding:44px 0 calc(28px + env(safe-area-inset-bottom));color:var(--ink3);font-size:.92rem}
.foot-in{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 16px}
.foot-brand{grid-column:1/-1}
.foot-brand p{margin:10px 0 0}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-col a,.foot-col button{color:var(--ink2);text-decoration:none;background:none;border:0;font:inherit;padding:5px 0;cursor:pointer;text-align:left}
.foot-col a:hover,.foot-col button:hover{color:var(--gold)}
@media (min-width:860px){.foot-in{grid-template-columns:2fr 1fr 1fr 1fr}.foot-brand{grid-column:auto}}
.foot-c{margin:36px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem;line-height:1.7}.foot-c a{color:var(--ink2)}

/* ---------- panels (the lesson reader and the tools): a bottom sheet on phones ---------- */
.sheet{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-end;justify-content:center;background:#03050fb3}
.sheet.open{display:flex}
.sheet-box{width:100%;max-height:92dvh;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0}
@media (min-width:720px){.sheet{align-items:center;padding:24px}.sheet-box{max-width:720px;max-height:88dvh;border-radius:16px;border-bottom:1px solid var(--line)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 18px;border-bottom:1px solid var(--line)}
.sheet-ttl{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-head .x{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;font-size:16px;cursor:pointer}
.wb{padding:18px;overflow:auto;flex:1;min-height:0;overscroll-behavior:contain;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.wb h2{font-size:1.35rem;margin:.2em 0 .4em}
.wb .card{padding:12px 14px;margin:10px 0;border-radius:var(--r2)}

/* ---------- lessons and the Library ---------- */
.warn{font-size:.92rem;padding:10px 12px;border-left:3px solid var(--pink);background:#e07ae614;border-radius:0 8px 8px 0;color:var(--ink2);margin:12px 0}
.tag,.part{font:700 .74rem/1.2 var(--sans);letter-spacing:.12em;color:var(--lilac);margin-bottom:6px;text-transform:uppercase}
.kid,.why{padding:12px 14px;margin:12px 0;border-left:3px solid;border-radius:0 10px 10px 0}
.kid{background:var(--kidbg);border-color:var(--kidline)}
.why{background:var(--whybg);border-color:var(--whyline)}.why .tag{color:#8fdcf2}
.kid p,.why p{margin:.4em 0}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:10px 14px;margin:8px 0}
details summary{cursor:pointer;font-weight:600}
details[open] summary{margin-bottom:6px}
.deep ul{margin:6px 0 2px;padding-left:20px}.deep li{margin:4px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vocab{font:inherit;color:#ddd3ff;background:#7046e026;border:0;border-bottom:2px dotted var(--violet2);padding:0 3px;cursor:help;border-radius:3px}
.vocab.seen{color:#a6e9f6;border-bottom-color:#3fb5d8;background:#3fb5d81f}
.chips .vocab{padding:5px 11px;border:1px solid #7046e0aa;border-radius:20px;font-size:.92rem}
.les{display:flex;gap:10px;width:100%;text-align:left;margin:6px 0;padding:13px 14px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit;cursor:pointer;align-items:baseline;border-radius:var(--r2)}
.les:hover{border-color:var(--violet2)}.les b{flex:1;font-weight:600}
.les small{font:600 .74rem var(--sans);letter-spacing:.06em;color:var(--lilac);white-space:nowrap}
.tabs{display:flex;gap:4px;margin-bottom:14px;overflow-x:auto;padding:4px;background:#ffffff0a;border-radius:12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;min-height:38px;padding:8px 14px;border:0;background:none;font:600 .92rem var(--sans);color:var(--ink2);cursor:pointer;border-radius:9px;white-space:nowrap}
.tab.on{background:var(--violet);color:#fff}
.lib{padding:14px}
@media (min-width:720px){.lib{padding:24px}}
.lib h2{font-size:1.3rem}
textarea,.field,input[type=number]{width:100%;background:#070a1a;color:var(--ink);border:1px solid var(--line2);font:inherit;font-size:16px;padding:10px 12px;border-radius:10px}
textarea:focus,.field:focus,input:focus{outline:2px solid var(--violet2);outline-offset:0}
.game{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;margin:12px 0}
.msg{background:#ffffff0d;border:1px solid var(--line2);padding:10px 12px;margin:8px 0;font-style:italic;border-radius:8px}
#ans{display:flex;flex-wrap:wrap;gap:8px}
.fb{margin:8px 0;padding:8px 12px;border-left:3px solid;border-radius:0 8px 8px 0;width:100%}.fb.ok{border-color:var(--ok);background:#46d98e1a}.fb.no{border-color:var(--bad);background:#ff8a7a1a}
.lockmsg{text-align:center;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);margin:8px 0}
.lockmsg .lk{font-size:28px}
/* word card */
#wc{position:fixed;display:none;z-index:1500;width:min(320px,calc(100vw - 16px));background:#1a2050;color:var(--ink);border:1px solid var(--violet);border-radius:12px;box-shadow:0 12px 32px #000a;padding:14px 16px;font-size:.95rem;line-height:1.5}
#wc.open{display:block}#wc b{font-size:1.1em;color:#ddd3ff}#wc p{margin:.45em 0;color:var(--ink2)}#wc .lab{font:700 .7rem var(--sans);letter-spacing:.1em;color:var(--cyan)}
#wc .btn{min-height:38px;padding:6px 12px;margin-top:4px}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2000;width:max-content;max-width:calc(100vw - 32px);padding:10px 16px;background:var(--surface2);color:var(--ink);border:1px solid var(--line2);border-radius:12px;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.show{opacity:1}

/* ---------- tip jar ---------- */
.donate{background:linear-gradient(160deg,#1f1758,#141235 70%);color:#fff;padding:18px;margin:0;border:1px solid #9474f288;border-radius:var(--r)}
.donate h2{margin:0 0 6px;font-size:1.3rem}
#tip-mount .donate>h2{display:none}
.donate p{margin:.4em 0;color:#e2d8ff}
.damts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.damt{min-height:44px;padding:8px 14px;border:1px solid #9474f288;background:#ffffff0a;color:#fff;font:600 .92rem var(--sans);cursor:pointer;border-radius:10px}
.damt:hover,.damt.on{background:var(--violet);border-color:var(--lilac)}
.damt:disabled{opacity:.45;cursor:default}
.chrow{display:flex;flex-wrap:wrap;gap:6px}
.chbtn{min-height:38px;padding:6px 12px;border:1px solid #9474f288;background:#ffffff0a;color:#fff;font:500 .86rem var(--sans);cursor:pointer;border-radius:20px}
.chbtn:hover,.chbtn.on{background:var(--violet);border-color:var(--lilac)}
.dcustom{display:flex;gap:8px;align-items:center;margin:6px 0}
.dcustom input{flex:1;min-width:0}
.drow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.addr{font:.86rem var(--mono);word-break:break-all;background:#070a1a;padding:4px 8px;border-radius:6px;color:var(--lilac)}
.btcqr{width:176px;height:176px;background:#fff;padding:6px;margin:8px 0;border-radius:10px}
.btcqr svg{width:100%;height:100%;display:block}

/* ---------- wallet ---------- */
.wlist{display:flex;flex-direction:column;gap:8px;margin:8px 0 2px;max-height:300px;overflow:auto}
.wbtn{display:flex!important;justify-content:flex-start!important;align-items:center;gap:12px;width:100%;text-align:left}
.wbtn img,.wbtn .wi{width:26px;height:26px;flex:0 0 26px;border-radius:7px;object-fit:contain}
.wbtn .wi{display:inline-flex;align-items:center;justify-content:center;background:#1a0a3e;color:var(--lilac)}
.wbtn small{margin-left:auto;opacity:.7;font-size:12px}
.wbtn.on{box-shadow:inset 0 0 0 2px var(--cyan)}


/* ---------- simple-look touches for panels and the Library ---------- */
.sheet-box{background:var(--bg2)}
.sheet-ttl{font-weight:800;letter-spacing:-.01em}
.sheet-head .x{border-radius:999px;background:none;border-color:var(--line2)}
.tab{border-radius:999px}.tab.on{background:var(--gold);color:#140e02}
.tabs{border-radius:999px}
.vocab{color:#ffe2a6;background:#f2b5441c;border-bottom-color:#f2b544aa}
.chips .vocab{border-color:#f2b54466}
#wc{background:var(--surface2);border-color:#f2b54477}#wc b{color:var(--gold2)}
.donate{background:var(--surface);border-color:var(--line);color:var(--ink)}
.donate p{color:var(--ink2)}
.damt,.chbtn{border-color:var(--line2);color:var(--ink);border-radius:999px}
.damt:hover,.damt.on,.chbtn:hover,.chbtn.on{background:var(--gold);border-color:var(--gold);color:#140e02}
.addr{background:#000;color:var(--gold2)}
.les small{color:var(--gold)}
.tag,.part{font-family:var(--mono);color:var(--gold)}
.why .tag{color:var(--cyan)}
.wbtn .wi{background:#1d1709;color:var(--gold)}
.wbtn.on{box-shadow:inset 0 0 0 2px var(--gold)}