/* One Mosaic (28 Sep 2026): "Everything on Mosaic feeds one pool. Hold MOS, get paid in stocks."
   Shared by every site page and the Gacha / RAID pages (gacha-ui/synergy.css is a byte-identical copy, see
   site/test/synergy.test.mjs). Loaded after terminal.css (and the page's own sheet); only terminal.css tokens are used.
   Pieces: sub-nav band, the "How this feeds MOS" strip, the RAID steps band, the home engine / start / products / activity,
   the Launch page, the portfolio cross-chain strip and the Tiles "moved" banner. */

/* ---------- shared bits ---------- */
.sy-kicker{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border:2px solid var(--line);background:var(--panel);box-shadow:var(--hard-sm);border-radius:2px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap;cursor:pointer}
.sy-btn:hover{background:var(--bg)}
.sy-btn:active{translate:2px 2px;box-shadow:none}
.sy-btn.primary{background:var(--pri-bg);color:var(--pri-fg)}
.sy-btn.acid{background:var(--acid);color:var(--on-acid)}
.sy-btn.is-soon,.sy-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}
.sy-soon{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border:1.5px solid currentColor;border-radius:2px;vertical-align:middle}
.sy-link{border-bottom:1px solid var(--faint)}
.sy-link:hover{border-bottom-color:var(--text)}
.sy-page{grid-column:1 / -1}
[data-fig].is-null{color:var(--muted)}
[data-fig][title]{cursor:help}

/* ---------- sub-nav (Earn: Dividends · Draw · Portfolio · Numbers) ---------- */
.subnav{display:flex;gap:0;align-items:stretch;border:2px solid var(--line);box-shadow:var(--hard-sm);background:var(--panel);border-radius:2px;overflow-x:auto;scrollbar-width:none;grid-column:1 / -1}
.subnav::-webkit-scrollbar{display:none}
.subnav a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--border);white-space:nowrap}
.subnav a:last-child{border-right:0}
.subnav a:hover{color:var(--text);background:var(--bg)}
.subnav a.on{color:var(--on-violet);background:var(--violet)}
.subnav a b{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.02em}

/* ---------- "How this feeds MOS" strip ---------- */
.panel.feeds{grid-column:1 / -1;overflow:visible}
.feeds-row{display:grid;grid-template-columns:repeat(var(--cells,3),minmax(0,1fr));align-items:stretch}
.fd{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-right:2px solid var(--line);min-width:0}
.fd:last-child{border-right:0}
.fd>span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fd>b{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd>small{font-size:12px;color:var(--muted);line-height:1.4}
.fd.acid{background:var(--acid)}
.fd.acid>span,.fd.acid>b,.fd.acid>small{color:var(--on-acid)}
.fd:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;translate:0 -50%;width:24px;height:24px;display:grid;place-items:center;
  background:var(--panel);border:2px solid var(--line);border-radius:50%;font:600 12px/1 var(--mono);color:var(--text);z-index:1}
.feeds-line{padding:10px 18px 12px;border-top:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--text)}
.feeds-line a{border-bottom:1px solid var(--faint)}
@media (max-width:860px){
  .feeds-row{grid-template-columns:minmax(0,1fr)}
  .fd{border-right:0;border-bottom:2px solid var(--line)}
  .fd:last-child{border-bottom:0}
  .fd:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-13px;translate:-50% 0}
  .fd>b{font-size:28px}
}

/* ---------- RAID steps band: 1 list your coin, 2 raid it ---------- */
.steps-band{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--line);box-shadow:var(--hard-sm);background:var(--panel);border-radius:2px}
.steps-band a{display:flex;align-items:center;gap:14px;padding:12px 18px;min-width:0;border-right:2px solid var(--line)}
.steps-band a:last-child{border-right:0}
.steps-band a:hover{background:var(--bg)}
.steps-band i{flex:none;display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--line);border-radius:50%;font:600 13px/1 var(--mono);font-style:normal}
.steps-band b{display:block;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.01em;line-height:1.1}
.steps-band small{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.steps-band a.on{background:var(--violet);color:var(--on-violet)}
.steps-band a.on small{color:var(--on-violet);opacity:.85}
.steps-band a.on i{border-color:var(--on-violet);background:var(--acid);color:var(--on-acid)}
@media (max-width:560px){.steps-band{grid-template-columns:1fr}.steps-band a{border-right:0;border-bottom:2px solid var(--line)}.steps-band a:last-child{border-bottom:0}}

/* ---------- Tiles "moved" banner (the old Tiles hub on its own host) ---------- */
.moved{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 18px;border:2px solid var(--line);box-shadow:var(--hard);background:var(--acid);color:var(--on-acid);border-radius:2px}
.moved b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.01em}
.moved span{font-size:13px}
.moved nav{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.moved nav a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:2px solid var(--on-acid);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-acid)}
.moved nav a:hover{background:var(--on-acid);color:var(--acid)}

/* live activity: one feed for everything */
.act-filters{display:flex;gap:0;border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none}
.act-filters::-webkit-scrollbar{display:none}
.act-filters button{min-height:36px;padding:0 14px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--border);white-space:nowrap}
.act-filters button:hover{color:var(--text);background:var(--bg)}
.act-filters button.on{color:var(--text);background:var(--panel2);box-shadow:inset 0 -3px 0 var(--violet)}
.act-list{list-style:none;max-height:460px;overflow-y:auto}
.act-list li{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--hair);font-size:13px}
.act-list li.act-note{display:block;font-size:12px;color:var(--muted);background:var(--bg)}
.act-list li.act-note a{border-bottom:1px solid var(--faint)}
.act-list li.fresh{animation:actin 1.2s ease-out}
@keyframes actin{from{background:var(--rewards-bg)}}
.act-k{justify-self:start;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border:1.5px solid var(--line);border-radius:2px;background:var(--kbg,var(--panel));color:var(--kfg,var(--text))}
.act-k.dividend{--kbg:var(--acid);--kfg:var(--on-acid)}
.act-k.prize{--kbg:var(--violet);--kfg:var(--on-violet)}
.act-k.burn{--kbg:var(--peach);--kfg:var(--ink)}
.act-k.gacha{--kbg:var(--ink);--kfg:#f1efe6}
.act-k.raid{--kbg:var(--panel2)}
.act-t{min-width:0;line-height:1.4}
.act-t b{font-weight:700}
.act-t small{display:block;font-size:11.5px;color:var(--muted)}
.act-t a{border-bottom:1px solid var(--faint)}
.act-w{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right;white-space:nowrap}
.act-w a{border-bottom:1px solid var(--faint)}
.act-list li.act-empty{display:block;padding:18px 14px;color:var(--muted);font-size:12.5px}
@media (prefers-reduced-motion:reduce){.act-list li.fresh{animation:none}}
@media (max-width:560px){.act-list li{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}.act-k{grid-column:1}.act-t{grid-column:1 / -1;grid-row:2}.act-w{grid-row:1;grid-column:2}}

/* =====================================================================
   Earn (dividends · draw · portfolio · numbers) and the product pages
   ===================================================================== */
html.page,html.page body{height:auto;min-height:100%}
html.page body{overflow-x:hidden;overflow-y:auto}
.app.pg{height:auto;min-height:100vh;min-height:100dvh;align-content:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;grid-template-areas:none}
.app.pg>*{grid-column:1 / -1;grid-row:auto}
.app.pg>.half{grid-column:auto}
.app.pg .hero{padding:30px 4px 6px;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center}
.app.pg .hero-brand{align-items:flex-start;gap:16px;flex:1 1 380px}
.app.pg .hero-brand b{font-size:44px;white-space:normal}
.app.pg .hero-brand p{margin-top:8px;font-size:14px;color:var(--muted);max-width:56ch;line-height:1.55}
.app.pg .hero-brand p b{font-size:inherit;font-family:var(--sans);color:var(--text);font-weight:700}
.big-card{display:flex;flex-direction:column;gap:4px;padding:18px 22px;border:2px solid var(--line);box-shadow:var(--hard);border-radius:2px;background:var(--acid);color:var(--on-acid);min-width:260px}
.big-card>span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.big-card>b{font-family:var(--display);font-weight:400;font-size:64px;line-height:1;padding:4px 0 2px;white-space:nowrap}
.big-card>small{font-family:var(--mono);font-size:11px;opacity:.85}
.anchor{scroll-margin-top:16px}
.earn-div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.earn-div>div{display:flex;flex-direction:column;gap:6px;padding:16px 20px 18px;border-right:2px solid var(--line);min-width:0}
.earn-div>div:last-child{border-right:0}
.earn-div span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.earn-div b{font-family:var(--display);font-weight:400;font-size:36px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.earn-div p{font-size:13px;line-height:1.5;color:var(--muted)}
.earn-div p b{font:inherit;font-weight:700;color:var(--text);white-space:normal}
.earn-div .sy-btn{align-self:flex-start;margin-top:auto}
.earn-pf{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:16px 20px}
.earn-pf p{flex:1 1 360px;font-size:14px;line-height:1.5}
@media (max-width:860px){
  .app.pg{grid-template-columns:minmax(0,1fr)}
  .app.pg>.half{grid-column:1 / -1}
  .app.pg .hero{padding:16px 4px 4px}
  .app.pg .hero-brand b{font-size:34px}
  .big-card{min-width:0;width:100%}
  .big-card>b{font-size:52px}
  .earn-div{grid-template-columns:minmax(0,1fr)}
  .earn-div>div{border-right:0;border-bottom:2px solid var(--line)}
  .earn-div>div:last-child{border-bottom:0}
}
/* Earn keeps the Stats panels (terminal.css .app.st rules) side by side on wide screens */
.app.pg.st>.hero,.app.pg.st>.as{grid-row:auto;grid-column:1 / -1}
.app.pg.st>.dr{grid-row:auto;grid-column:1}.app.pg.st>.money{grid-row:auto;grid-column:2}
.app.pg.st>.dr .winners.hist{max-height:420px}
@media (max-width:860px){.app.pg.st>.dr,.app.pg.st>.money{grid-column:1 / -1}}
.app.pg .hero-line{margin-top:10px;white-space:normal} /* wraps: the Earn summary was cut to "6.9% of …" at 1440px (8 Oct 2026) */
.as-list .sym a{border-bottom:1px solid var(--faint)}

/* Launch: one card that links out */
.ln-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0}
.ln-card>div{padding:20px 22px;min-width:0}
.ln-card>div+div{border-left:2px solid var(--line)}
.ln-card h2{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.05;letter-spacing:.01em}
.ln-card p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--muted)}
.ln-card ol{margin:12px 0 0 18px;font-size:14px;line-height:1.6}
.ln-card .hero-cta{margin-top:18px}
.ln-split{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ln-split div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.ln-split div b{font-family:var(--mono);font-weight:600}
@media (max-width:860px){.ln-card{grid-template-columns:minmax(0,1fr)}.ln-card>div+div{border-left:0;border-top:2px solid var(--line)}}

/* Portfolio: your MOS on both chains, what it earned, what is next */
.xchain{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr)}
.xchain>div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;min-width:0}
.xchain>div+div{border-left:1px solid var(--border)}
.xchain>.op{display:grid;place-items:center;padding:0 4px;font:600 18px/1 var(--mono);color:var(--muted);border-left:0}
.xchain>.op+div{border-left:0}
.xchain span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.xchain b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xchain small{font-size:11.5px;color:var(--muted);line-height:1.35}
.xchain .tot{background:var(--panel2)}
.xchain .earned{background:var(--acid);color:var(--on-acid)}
.xchain .earned span,.xchain .earned small{color:var(--on-acid)}
.xacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--line)}
.xacts a,.xacts>span{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-right:1px solid var(--border);min-width:0}
.xacts>:last-child{border-right:0}
.xacts a:hover{background:var(--bg)}
.xacts b{font-weight:700;font-size:13.5px}
.xacts small{font-size:12px;color:var(--muted);line-height:1.4}
@media (max-width:1100px){.xchain{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}.xchain>.earned,.xchain>.next{grid-column:span 5;border-left:0;border-top:1px solid var(--border)}}
@media (max-width:860px){
  .xchain{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .xchain>.tot{grid-column:1 / -1;border-left:0;border-top:1px solid var(--border)}
  .xchain>.op.eq{display:none}
  .xchain>.earned,.xchain>.next{grid-column:1 / -1}
  .xacts{grid-template-columns:1fr 1fr}
  .xacts>:nth-child(2n){border-right:0}
  .xacts>*{border-bottom:1px solid var(--border)}
}
/* portfolio grid: sub-nav and the cross-chain strip under the hero (every row auto, so the footer never overlaps a panel) */
.app.pf.one{grid-template-rows:none;grid-auto-rows:auto;grid-template-areas:"hero hero" "sub sub" "xc xc" "acct tix" "mix mix" "dv dv" "ls ls" "bt bt"}
.app.pf.one:has(.tix[hidden]){grid-template-areas:"hero hero" "sub sub" "xc xc" "acct acct" "mix mix" "dv dv" "ls ls" "bt bt"}
.app.pf.one>.subnav{grid-area:sub}.app.pf.one>.xc{grid-area:xc;min-height:0}
@media (max-width:860px){
  .app.pf.one,.app.pf.one:has(.tix[hidden]){grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "sub" "xc" "acct" "tix" "mix" "dv" "ls" "bt"}
}

/* =====================================================================
   Brand pass (owner, 28 Sep 2026, after "noisy" and then "generic"): keep the Mosaic language, cut the number of things.
   Square corners, 2px cream lines, hard offset shadows (8px), Anton for every big number, Inter 800 headlines with the
   Instrument Serif italic violet accent word, mono caps labels and buttons. Violet header bands only on the one or two key
   panels a page marks with .ph.band; every other panel header is quiet. One hero moment per page (the acid card).
   Reference: ~/mosaic-site-direction/index.html (home).
   ===================================================================== */
:root,html[data-theme="dark"]{--hard:8px 8px 0 var(--shadow);--hard-lg:8px 8px 0 var(--shadow);--hard-sm:3px 3px 0 var(--shadow)}
/* quiet panel headers by default; the violet band is opt-in */
.ph:not(.band){background:transparent;color:var(--muted);border-bottom:1px solid var(--hair)}
.ph:not(.band) .ph-r,.ph:not(.band) .ph-r a,.ph:not(.band) .muted,.ph:not(.band) .era{color:var(--muted);border-color:var(--hair)}
.ph:not(.band) .mosmark i{border-color:var(--ink-line)}
.ph.band{background:var(--violet);color:var(--on-violet)}
/* white on violet is 4.8:1 (cream was 4.2:1, under AA for 11px text) */
.ph.band,.ph.band>span,.ph.band .ph-r,.ph.band .ph-r a{color:#fff!important}.ph.band .ph-r{opacity:.95}
/* headlines: Inter 800, tight, with the serif accent; big figures stay Anton */
.hero-brand b,.bh-hero h1,.bh-sec h2{font-family:var(--sans);font-weight:800;letter-spacing:-.045em;line-height:.98;color:var(--head)}
.hero-brand b em,.bh-hero h1 em,.bh-sec h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--violet-t);font-size:1.08em}
.app .hero-brand b{font-size:48px}
.hero-brand .mosmark.lg{display:none}
.mono-l{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.muted{color:var(--muted)}
/* buttons: mono caps, square, hard shadow; the primary is cream with a violet shadow */
.btn,.sy-btn,.hero-cta .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;min-height:38px;padding:10px 16px;border:2px solid var(--line);border-radius:0;
  background:var(--panel);color:var(--text);box-shadow:3px 3px 0 var(--shadow);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.btn:hover,.sy-btn:hover{background:var(--panel2)}
.btn:active,.sy-btn:active{translate:2px 2px;box-shadow:none}
.btn.primary,.sy-btn.primary,.sy-btn.acid,.hero-cta .btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);box-shadow:4px 4px 0 var(--violet)}
.btn.primary:hover,.sy-btn.primary:hover,.sy-btn.acid:hover{background:var(--text);opacity:.92}
.btn.is-soon,.sy-btn.is-soon{opacity:.6}
/* the hero moment: the acid card (home, Earn, Launch, Get MOS) */
.acid-card,.big-card{display:flex;flex-direction:column;gap:2px;background:var(--acid);color:var(--ink);border:2px solid var(--ink);border-radius:0;box-shadow:12px 12px 0 var(--violet);padding:28px 30px;min-width:0}
.big-card>span,.acid-card .mono-l{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.big-card>b,.acid-big{font-family:var(--display);font-weight:400;font-size:88px;line-height:1;color:var(--ink);margin-top:8px;white-space:nowrap}
.big-card>small,.acid-card>small{font-family:var(--sans);font-size:13px;color:var(--ink);opacity:.7;letter-spacing:0;text-transform:none}
.big-card>small span{color:var(--ink)}
.acid-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:2px solid var(--ink);margin-top:24px;padding-top:16px}
.acid-row b{display:block;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;margin-top:4px;color:var(--ink);white-space:nowrap}
.acid-row .mono-l{font-size:10px}
.app.pg .hero,.app.gx .hero,.app.pf .hero{padding-top:48px;padding-bottom:12px}

/* ---------- home (matches the direction mockup) ---------- */
html.home body{overflow-y:auto}
.app.brand-home{display:block}
.bh-hero{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:64px;padding:96px 0 88px;align-items:center}
.bh-hero h1{font-size:88px}
.bh-hero .lede{font-size:21px;line-height:1.45;color:var(--muted);margin-top:26px;max-width:520px}
.bh-hero .lede b{color:var(--text);font-weight:700}
.bh-ctas{display:flex;gap:14px;margin-top:38px}
.bh-ctas .btn{padding:15px 22px;font-size:12px}
.bh-hero .acid-big{font-size:150px;line-height:.95}
.app.brand-home>section{margin-bottom:96px}
.bh-engine{overflow:visible}
.bh-eng{display:grid;grid-template-columns:minmax(0,1.25fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:28px;padding:38px 36px}
.bh-src{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.bh-src a{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--hair);padding:7px 12px;font-weight:600;font-size:14px}
.bh-src a:hover{border-color:var(--line)}
.bh-src i,.bh-li>i{display:inline-block;width:9px;height:9px;rotate:45deg;background:var(--sw)}
.bh-arrow{font-style:normal;font-family:var(--mono);color:var(--muted);font-size:24px}
.bh-pool{background:var(--acid);color:var(--ink);border:2px solid var(--ink);padding:18px 22px;box-shadow:6px 6px 0 var(--violet)}
.bh-pool b,.bh-out b{display:block;font-family:var(--display);font-weight:400;font-size:54px;line-height:1.05}
.bh-pool small,.bh-out small{font-size:13px}
.bh-out small{color:var(--muted)}
.bh-sec{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}
.bh-sec h2{font-size:52px;line-height:1}
.bh-board{display:grid;grid-template-columns:560px minmax(0,1fr);gap:40px;align-items:center}
.bh-diamonds{position:relative;height:540px}
.dt{position:absolute;width:190px;height:190px;rotate:45deg;border:2.5px solid var(--line);box-shadow:9px 9px 0 var(--shadow);display:grid;place-items:center;transition:translate .15s}
.dt:hover{translate:-3px -3px}
.dt>span{rotate:-45deg;text-align:center;display:flex;flex-direction:column;align-items:center}
.dt b{font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:.01em;line-height:1}
.dt i{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-top:6px;opacity:.75}
.dt-gacha{left:185px;top:10px;background:var(--ink);color:#f1efe6}.dt-gacha i{color:var(--acid);opacity:1}
.dt-launch{left:40px;top:155px;background:var(--peach);color:var(--ink)}
.dt-raid{left:330px;top:155px;background:var(--violet);color:#f1efe6}
.dt-soon{left:185px;top:300px;background:var(--acid);color:var(--ink);filter:saturate(.55);cursor:default}
.dt-soon:hover{translate:none}
.bh-list{border-top:1px solid var(--hair)}
.bh-li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:18px;padding:24px 0;border-bottom:1px solid var(--hair);align-items:center}
.bh-li>i{width:16px;height:16px;margin-left:12px}
.bh-li h3{font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-.02em}
.bh-li p{color:var(--muted);font-family:var(--serif);font-style:italic;font-size:19px}
.bh-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex-direction:row}
.bh-step{padding:34px 34px 36px;border-right:2px solid var(--line)}
.bh-step:last-child{border-right:0}
.bh-step:hover{background:var(--panel2)}
.bh-step b{display:block;font-family:var(--display);font-weight:400;font-size:64px;line-height:1;color:var(--acid-t)}
.bh-step h3{font-family:var(--sans);font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:14px}
.bh-step p{color:var(--muted);margin-top:8px;font-size:16px;line-height:1.5}
@media (max-width:1180px){
  .bh-hero{grid-template-columns:minmax(0,1fr) 400px;gap:40px}.bh-hero h1{font-size:72px}.bh-hero .acid-big{font-size:120px}
  .bh-board{grid-template-columns:minmax(0,1fr)}.bh-diamonds{width:560px;margin:0 auto}
  .bh-eng{grid-template-columns:minmax(0,1fr);gap:18px}.bh-arrow{rotate:90deg;justify-self:start;margin-left:24px}
}
@media (max-width:860px){
  .bh-hero{grid-template-columns:minmax(0,1fr);padding:40px 0 48px;gap:40px}
  .bh-hero h1{font-size:54px}.bh-hero .lede{font-size:17px}
  .bh-hero .acid-big{font-size:96px}
  .acid-card,.big-card{padding:22px 20px;box-shadow:8px 8px 0 var(--violet)}
  .acid-row b{font-size:22px}
  .app.brand-home>section{margin-bottom:64px}
  .bh-eng{padding:24px 20px}
  .bh-pool b,.bh-out b{font-size:44px}
  .bh-sec h2{font-size:40px}
  .bh-diamonds{width:100%;height:320px}
  .dt{width:112px;height:112px;box-shadow:6px 6px 0 var(--shadow)}
  .dt b{font-size:20px}.dt i{font-size:8px}
  .dt-gacha{left:calc(50% - 56px);top:6px}.dt-launch{left:calc(50% - 142px);top:92px}.dt-raid{left:calc(50% + 30px);top:92px}.dt-soon{left:calc(50% - 56px);top:178px}
  .bh-li{grid-template-columns:28px minmax(0,1fr) auto;gap:12px;padding:18px 0}.bh-li>i{margin-left:4px}
  .bh-li h3{font-size:18px}.bh-li p{font-size:16px}
  .bh-steps{grid-template-columns:minmax(0,1fr)}
  .bh-step{border-right:0;border-bottom:2px solid var(--line);padding:24px}.bh-step:last-child{border-bottom:0}
  .bh-step b{font-size:48px}
  .app .hero-brand b{font-size:38px}
  .big-card>b{font-size:64px}
}
/* Get MOS: the page is the home shell with a hero, then the swap and bridge */
.app.brand-page{grid-template-areas:none;grid-template-rows:none;grid-auto-rows:auto}
.app.brand-page>*{grid-area:auto}
.app.brand-page .gm-hero{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:center}
@media (max-width:860px){.app.brand-page .gm-hero{grid-template-columns:minmax(0,1fr)}}
.app.brand-page{grid-template-columns:minmax(0,1fr)!important}
.app.brand-page>*{grid-column:1 / -1!important;grid-row:auto!important}
/* brand: one hero moment per page, so secondary highlights drop their fills */
.subnav a.on{background:transparent;color:var(--text);box-shadow:inset 0 -3px 0 var(--acid)}
.steps-band a.on{background:var(--panel2);color:var(--text)}
.steps-band a.on small{color:var(--muted);opacity:1}
.steps-band a.on i{background:var(--acid);border-color:var(--line);color:var(--on-acid)}
.fd.acid{background:transparent}
.fd.acid>span,.fd.acid>small{color:var(--muted)}
.fd.acid>b{color:var(--acid-t)}
.xchain .earned{background:var(--panel2);color:var(--text)}
.xchain .earned span,.xchain .earned small{color:var(--muted)}
.xchain .earned b{color:var(--acid-t)}
/* Earn: the same breathing room as home below the fold */
.app.pg.st{gap:56px}
.app.pg.st>.dr,.app.pg.st>.money{align-self:start}
.app.pg.st .dr .winners.hist{flex:none;max-height:none;min-height:0}
.hist-more{margin:12px 12px 14px;align-self:flex-start}
.app.pg.st .as{min-height:0}
.app.pg.st .as-list{max-height:560px}
.act-list{max-height:520px}
@media (max-width:860px){.app.pg.st{gap:40px}}
/* home: the last jackpot, one quiet line under the engine */
.app.brand-home>section.bh-engine{margin-bottom:18px}
.bh-lastjp{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 96px;padding:4px 2px;font-size:14px;color:var(--text)}
.bh-lastjp b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;color:var(--acid-t)}
.bh-lastjp code{font-family:var(--mono);font-size:13px}
.bh-lastjp>span:last-child{margin-left:auto;font-size:13px}
.bh-lastjp:hover>span:last-child{color:var(--text)}
/* Earn: every previous draw with its jackpot winner; tap a row for all its prizes */
.dh{border-bottom:1px solid var(--hair)}
.dh>summary,.dh-static{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:12px;align-items:center;padding:9px 12px;list-style:none;cursor:pointer}
.dh-static{cursor:default}
.dh>summary::-webkit-details-marker{display:none}
.dh>summary:hover{background:var(--panel2)}
.dh[open]>summary{background:var(--panel2)}
.dh-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.dh-l small{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.dh-l span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-jp{display:flex;align-items:center;gap:10px;min-width:0;font-size:12.5px}
.dh-jp.muted{color:var(--muted);font-size:12px}
.dh-jp b{margin-left:auto}
.dh-b{color:var(--muted);font-weight:500}
.jp-tag,.ru-tag{flex:none;font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border:1.5px solid var(--line)}
.jp-tag{background:var(--acid);color:var(--on-acid);border-color:var(--acid)}
.ru-tag{color:var(--muted);border-color:var(--hair)}
.wal{font-family:var(--mono);font-size:12px;color:var(--text);border-bottom:1px solid var(--faint)}
a.wal:hover{border-bottom-color:var(--text)}
.dh-prizes{list-style:none;padding:4px 12px 12px 12px;background:var(--panel2)}
.dh-prizes li{display:grid;grid-template-columns:92px minmax(0,1fr) 90px auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--hair);font-size:12.5px}
.dh-prizes li small{color:var(--muted);font-size:11.5px}
.dh-prizes li b{text-align:right}
@media (max-width:860px){
  .dh>summary,.dh-static{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .dh-jp{grid-column:1 / -1;grid-row:2}
  .dh-prizes li{grid-template-columns:84px minmax(0,1fr) auto}
  .dh-prizes li small{display:none}
  .bh-lastjp{margin-bottom:64px}
  .bh-lastjp>span:last-child{margin-left:0;flex-basis:100%}
}

/* =====================================================================
   Shell (30 Sep 2026): one header, one footer, one page frame, on every page (site, Gacha, RAID, Listings, Launch, 404).
   Markup: shell.mjs. Behaviour: header.js. These rules are the only styles the header and footer have; no page sheet
   styles .mh / .mf (tested). The header and footer sit outside the page grid (.app), so every page grid is just content.
   ===================================================================== */
@font-face{font-family:"Mosaic Wordmark";font-weight:900;font-stretch:125%;font-display:swap;src:url("/fonts/archivo-exp-black.woff2") format("woff2")}
:root{--page-max:1248px;--page-pad:24px;--mh-h:72px;--mh-wal:176px}
html,body{height:auto!important;min-height:100%}
body{overflow-x:hidden!important;overflow-y:auto!important}
/* the page frame: same width, padding and rhythm everywhere */
.app{height:auto!important;min-height:0!important;width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad) 72px;gap:36px}
/* pages whose sheets placed the old in-grid header and footer by row number: rows are content only now */
.app.gx{grid-template-rows:none!important;grid-auto-rows:auto;grid-template-areas:none;align-content:start}
.app.gx>*{grid-row:auto!important}
.app.gx>.hero,.app.gx>.ticker,.app.gx>.feeds,.app.gx>.steps-band,.app.gx>.moved,.app.gx>.subnav,.app.gx>.rs{grid-column:1 / -1}
.app.gx>.pl,.app.gx>.od,.app.gx>.jp{order:1}
.app.gx>.rs{order:2}
.app.lx>*:not(.rd):not(.sd){grid-column:1 / -1}
html.embed .mh,html.embed .mf{display:none!important}

/* ---------- header ---------- */
.mh{position:relative;z-index:20;background:var(--bg);border-bottom:1px solid var(--hair)}
.mh-in{display:flex;align-items:center;gap:28px;height:var(--mh-h);max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
/* the lockup: four rounded tiles turned 45 degrees, MOSAIC in Archivo Expanded Black, FINANCE in mono caps */
.mh-brand{display:inline-flex;align-items:center;gap:14px;flex:none;color:var(--head)}
.mh-mark{--mk:26px;width:var(--mk);height:var(--mk);display:grid;grid-template-columns:1fr 1fr;gap:2px;rotate:45deg;flex:none;margin:0 5px}
.mh-mark i{display:block;border-radius:3px;border:1.5px solid rgba(243,241,233,.9)}
.mh-mark i:nth-child(1){background:#1f1f1d}.mh-mark i:nth-child(2){background:#6a55ff}.mh-mark i:nth-child(3){background:#ff9f7a}.mh-mark i:nth-child(4){background:#d8f552}
html:not([data-theme="dark"]) .mh-mark i{border-color:#171714}
.mh-word{display:inline-flex;align-items:baseline;gap:10px}
.mh-word b{font-family:"Mosaic Wordmark","Arial Black",var(--sans);font-weight:900;font-stretch:125%;font-size:31px;line-height:1;letter-spacing:-.01em}
.mh-word small{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.mh-nav{display:flex;align-items:stretch;gap:4px;align-self:stretch;min-width:0}
.mh-nav a{display:inline-flex;align-items:center;padding:0 12px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;box-shadow:inset 0 -3px 0 transparent}
.mh-nav a:hover{color:var(--text)}
.mh-nav a.on{color:var(--text);box-shadow:inset 0 -3px 0 var(--acid)}
/* more than five entries (flagged pages, e.g. Agents and Baskets): never run under the wallet buttons */
.mh-nav{flex:0 1 auto;overflow-x:auto;scrollbar-width:none}.mh-nav::-webkit-scrollbar{display:none}
.mh-in.long{gap:20px}.mh-in.long .mh-word small{display:none}.mh-in.long .mh-nav{gap:0}.mh-in.long .mh-nav a{padding:0 9px}
/* wallets and theme: one slot, fixed order, fixed width, whatever the label says */
.mh-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.mh-wal,.mh-theme{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;border:2px solid var(--line);background:var(--panel);box-shadow:3px 3px 0 var(--shadow);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap;cursor:pointer;overflow:hidden}
.mh-wal{width:var(--mh-wal);padding:0 10px}
.mh-theme{width:64px;padding:0}
.mh-wal:hover,.mh-theme:hover{background:var(--panel2)}
.mh-wal:active,.mh-theme:active{translate:2px 2px;box-shadow:none}
.mh-wl{overflow:hidden;text-overflow:ellipsis}
.mh-wl em{font-style:normal}
.mh-wl code{font-family:var(--mono);font-size:11.5px;letter-spacing:0;text-transform:none}
.mh-wal.is-cached code{opacity:.75}
.mh-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
.mh-dot.sol{background:var(--violet)}.mh-dot.rh{background:var(--green)}
@media (max-width:1180px){
  :root{--mh-wal:150px}
  .mh-in{gap:18px}
  .mh-word b{font-size:26px}
  .mh-word small{display:none}
  .mh-nav a{padding:0 9px}
  .mh-in.long{gap:14px;--mh-wal:132px}.mh-in.long .mh-nav a{padding:0 7px;font-size:13px}
}
@media (max-width:860px){
  :root{--page-pad:16px;--mh-h:56px;--mh-wal:82px}
  .mh-in{flex-wrap:wrap;height:auto;gap:0 10px}
  .mh-brand{height:var(--mh-h);gap:9px}
  .mh-brand{gap:8px}
  .mh-mark{--mk:18px;margin:0 4px}
  .mh-word b{font-size:18px}
  .mh-tools{gap:5px}
  .mh-wal,.mh-theme{height:32px;box-shadow:none;font-size:9.5px;letter-spacing:.06em}
  .mh-wal{padding:0 6px;gap:5px}
  .mh-wl em{display:none}
  .mh-wl code{font-size:10px}
  .mh-theme{width:38px;font-size:8.5px;letter-spacing:.04em}
  .mh-nav{order:3;flex-basis:100%;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;height:44px;margin:0 calc(-1 * var(--page-pad));border-top:1px solid var(--hair)}
  .mh-in.long{gap:0 10px;--mh-wal:82px}
  .mh-in.long .mh-nav a{padding:0;font-size:11.5px}
  .mh-nav a{justify-content:center;padding:0;font-size:13px}
  .app{gap:28px;padding-bottom:48px}
}

/* ---------- footer ---------- */
.mf{margin-top:24px;border-top:1px solid var(--hair);background:var(--bg)}
.mf-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:center;max-width:var(--page-max);margin:0 auto;padding:28px var(--page-pad) 36px}
.mf-lock{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.mf-lock .mh-brand{align-self:center}
.mf-lock .mh-word b{font-size:24px}
.mf-lock .mh-mark{--mk:21px}
.mf-tag{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--violet-t)}
.mf-links{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:flex-end;font-family:var(--sans);font-size:14px;color:var(--muted)}
.mf-links a:hover{color:var(--text)}
.mf-chips{display:flex;flex-wrap:wrap;gap:8px;grid-column:1}
.mf-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border:2px solid var(--line);background:var(--panel);box-shadow:3px 3px 0 var(--shadow);font-family:var(--mono);font-size:10.5px;color:var(--text);cursor:pointer}
.mf-chip span{font-weight:600;letter-spacing:.1em}
.mf-chip i{font-style:normal;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mf-chip:active{translate:2px 2px;box-shadow:none}
.mf-meta{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:flex-end;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.mf-meta span:empty{display:none}
@media (max-width:860px){
  .mf-in{grid-template-columns:minmax(0,1fr);padding:24px var(--page-pad) 32px}
  .mf-links,.mf-meta{justify-content:flex-start}
  .mf-chip{box-shadow:none}
}
/* page frame: the same space under the header on every page; page sheets own only what is inside */
.app{padding-top:28px}
.app>.hero:first-child,.app>.subnav:first-child+.hero{padding-top:28px}
@media (max-width:860px){.app{padding-top:18px}.app.lx .lx-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.app.lx .lx-tile{min-width:0}.app.lx .lx-tile b{font-size:18px;white-space:normal;overflow-wrap:anywhere}}
/* shell follow-ups: one rule for hidden things, one primary button, one headline face (Launch pages included) */
[hidden]{display:none!important}
.raid .btn.primary:not(:disabled),.lx .btn.primary:not(:disabled){background:var(--text);color:var(--bg);border-color:var(--text)}
.lx-page-head h1,.lx-article h1{font-family:var(--sans);font-weight:800;letter-spacing:-.04em;font-size:44px;line-height:1;color:var(--head)}
.mf-meta{grid-column:1 / -1}
@media (max-width:860px){
  .mh-nav{flex-basis:calc(100% + 2 * var(--page-pad))}
  :root{--mh-wal:72px}
  .mh-wal[data-wallet-ns="eip155"]{width:calc(var(--mh-wal) + 24px)}
  .lx-page-head h1,.lx-article h1{font-size:34px}
}
@media (max-width:380px){.mh-word b{font-size:16px}.mh-mark{--mk:16px}.mh-theme{width:34px}}

/* ---------- Community dividend baskets (2 Oct 2026; baskets-ui.js) ---------- */
.bk{border-top:2px solid var(--line)}
.bk>.ph{flex-wrap:wrap;row-gap:4px;height:auto;min-height:28px;padding-top:4px;padding-bottom:4px}
.bk>.ph .bk-sorts{overflow:visible;white-space:nowrap;opacity:1}
.bk-sorts{display:inline-flex;gap:0}
.bk-sorts button{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:2px 10px;border-left:1px solid var(--hair)}
.bk-sorts button.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--violet)}
.bk-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--hair)}
.bk-share small{font-size:11.5px}
.bk-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 14px;border-bottom:1px solid var(--hair);background:var(--panel2)}
.bk-form[hidden]{display:none}
.bk-form label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bk-form label small{text-transform:none;letter-spacing:0}
.bk-form input{font:inherit;font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--text);background:var(--bg);border:1.5px solid var(--line);border-radius:0;padding:8px 10px;min-height:38px}
.bk-form-row{grid-column:1/-1;display:flex;gap:8px}
.bk-form .msg{grid-column:1/-1;font-size:12px;color:var(--muted);min-height:1em}
.bk-list{list-style:none;margin:0;padding:0;max-height:560px;overflow-y:auto}
.bk-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--hair)}
.bk-vote{display:flex;flex-direction:column;align-items:center;gap:2px}
.bk-vote button{width:30px;height:24px;font-size:11px;line-height:1;color:var(--muted);border:1.5px solid var(--hair);background:transparent;border-radius:0;cursor:pointer}
.bk-vote button:hover{color:var(--text);border-color:var(--line)}
.bk-vote .bk-up.on{color:var(--on-acid);background:var(--acid);border-color:var(--line)}
.bk-vote .bk-down.on{color:#fff;background:var(--violet);border-color:var(--line)}
.bk-score{font-size:15px}
.bk-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.bk-name b{font-size:14px;overflow-wrap:anywhere}
.bk-name small{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.bk-desc{margin:2px 0 0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.bk-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.bk-chip{font-family:var(--mono);font-size:10.5px;padding:2px 6px;border:1.5px solid var(--hair);white-space:nowrap}
.bk-chip b{font-weight:700}
.bk-chip.gone{opacity:.5;text-decoration:line-through}
.bk-use{white-space:nowrap}
.bk-empty{list-style:none;padding:14px;font-size:12.5px;color:var(--muted);margin:0}
.bk-strip{list-style:none;margin:0;padding:0;counter-reset:bk}
.bk-strip li{border-bottom:1px solid var(--hair)}
.bk-strip a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:7px 0;color:inherit}
.bk-strip b{overflow-wrap:anywhere}
.bk-strip small{grid-column:1/-1;font-size:11px;color:var(--muted)}
/* cross-chain build (5 Oct 2026): "Pick a basket" on top of the Dividend mix, the /baskets page, the Earn strip */
.bk-pick{border-top:0;border-bottom:2px solid var(--line)}
.bk-lede{margin:0;padding:8px 14px 0;font-size:12.5px;color:var(--muted)}
.bk-cover{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
.bk-use.primary{font-size:13px;padding:10px 16px;min-height:40px}
a.bk-use{display:inline-flex;align-items:center;text-decoration:none}
.bk-list-page{max-height:none}
.bk-top-body{padding:4px 14px 8px}
.bk-build{display:flex;flex-direction:column;gap:0}
.bk-rows{display:flex;flex-direction:column;gap:8px;padding:12px 14px 4px}
.bk-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 40px;gap:8px}
.bk-row input{font:inherit;font-family:var(--sans);font-size:13px;color:var(--text);background:var(--bg);border:1.5px solid var(--line);border-radius:0;padding:8px 10px;min-height:38px;min-width:0}
.bk-build>.bk-form-row{padding:4px 14px 12px;border-bottom:1px solid var(--hair)}
.bk-note{display:block;padding:10px 14px;font-size:11.5px}
.bk-toast{position:fixed;left:50%;bottom:24px;translate:-50% 30px;background:var(--panel2);border:2px solid var(--line);color:var(--text);padding:8px 12px;opacity:0;pointer-events:none;transition:.2s;z-index:100;font-size:11px;font-family:var(--mono)}
.bk-toast.show{opacity:1;translate:-50% 0}
@media (max-width:760px){
  .bk-form{grid-template-columns:1fr}
  .bk>.ph .bk-sorts{width:100%;margin-left:0}
  .bk-sorts button{flex:1;padding:6px 0;min-height:36px}
  .bk-card{grid-template-columns:40px minmax(0,1fr)}
  .bk-use{grid-column:2;justify-self:start;min-height:40px}
  .bk-vote button{width:36px;height:30px}
  .bk-row{grid-template-columns:minmax(0,1fr) 72px 40px}
}