/* Components. Uses tokens only. */
*{box-sizing:border-box}
html{font-family:var(--f-ui);color:var(--c-ink);background:var(--c-bg);line-height:var(--lh);font-variant-numeric:tabular-nums}
body{margin:0}
a{color:var(--c-accent)}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s-4);top:var(--s-4);background:var(--c-surface);padding:var(--s-2);z-index:9}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s-4)}
header.top{border-bottom:var(--hair) solid var(--c-rule);background:var(--c-surface)}
header.top .wrap{display:flex;align-items:center;gap:var(--s-4);min-height:56px;flex-wrap:wrap}
.logo{font-family:var(--f-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:.08em;text-decoration:none;color:var(--c-ink)}
nav.main{display:flex;gap:var(--s-2);flex-wrap:wrap}
nav.main a{display:inline-flex;align-items:center;min-height:var(--target-min);padding:0 var(--s-3);color:var(--c-ink-2);text-decoration:none;font-size:var(--fs-sm)}
nav.main a[aria-current]{color:var(--c-ink);font-weight:var(--fw-med);box-shadow:inset 0 -2px 0 var(--c-accent)}
.beta{background:var(--c-surface-2);border-bottom:var(--hair) solid var(--c-rule);font-size:var(--fs-xs);color:var(--c-ink-2)}
.beta .wrap{padding:var(--s-1) var(--s-4)}
main{padding:var(--s-6) 0 var(--s-8)}
h1,h2,.display{font-family:var(--f-display);font-weight:var(--fw-reg);margin:0 0 var(--s-3)}
h1{font-size:var(--fs-2xl);line-height:1.15} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-md);margin:0 0 var(--s-2)}
.muted{color:var(--c-ink-3)} .small{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)}
.mono{font-family:var(--f-mono);font-size:var(--fs-sm)}
.grid{display:grid;gap:var(--s-5)}
@media(min-width:900px){.g2{grid-template-columns:2fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g-half{grid-template-columns:1fr 1fr}}
.card{background:var(--c-surface);border:var(--hair) solid var(--c-rule);border-radius:var(--r-md);padding:var(--s-5)}
.rule{border:0;border-top:var(--hair) solid var(--c-rule);margin:var(--s-5) 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--target-min);min-width:var(--target-min);padding:0 var(--s-5);border-radius:var(--r-md);border:var(--hair) solid var(--c-rule-strong);background:var(--c-surface);color:var(--c-ink);font:inherit;font-weight:var(--fw-med);text-decoration:none;cursor:pointer}
.btn.primary{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}
.btn.ghost{border-color:transparent;background:transparent}
.btn[aria-disabled=true],.btn:disabled{opacity:.55;cursor:not-allowed}
.row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}.between{justify-content:space-between}
.chip{display:inline-flex;align-items:center;gap:var(--s-1);min-height:24px;padding:0 var(--s-2);border-radius:var(--r-pill);border:var(--hair) solid var(--c-rule-strong);font-size:var(--fs-xs);color:var(--c-ink-2);background:var(--c-surface);text-decoration:none}
.chip.proof::after{content:"↗"}
.badge{display:inline-flex;align-items:center;gap:var(--s-1);padding:2px var(--s-2);border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:var(--fw-med)}
.badge.warn{background:var(--c-warn-soft);color:var(--c-warn)} .badge.ok{background:var(--c-ok-soft);color:var(--c-ok)}
.badge.info{background:var(--c-info-soft);color:var(--c-info)} .badge.danger{background:var(--c-danger-soft);color:var(--c-danger)}
.badge.neutral{background:var(--c-surface-2);color:var(--c-ink-2)}
.up{color:var(--c-up)} .up::before{content:"▲ "} .down{color:var(--c-down)} .down::before{content:"▼ "}
.callout{border-left:4px solid var(--c-info);background:var(--c-info-soft);padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);margin:0 0 var(--s-4)}
.callout.warn{border-color:var(--c-warn);background:var(--c-warn-soft)} .callout.danger{border-color:var(--c-danger);background:var(--c-danger-soft)}
.callout.ok{border-color:var(--c-ok);background:var(--c-ok-soft)}
.callout strong:first-child{display:block}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{text-align:left;padding:var(--s-2) var(--s-2);border-bottom:var(--hair) solid var(--c-rule);vertical-align:top}
th{font-weight:var(--fw-med);color:var(--c-ink-3);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
td.n,th.n{text-align:right}
.tablewrap{overflow-x:auto}
.stat{display:flex;flex-direction:column}.stat b{font-size:var(--fs-lg);font-weight:var(--fw-med)}.stat span{font-size:var(--fs-xs);color:var(--c-ink-3)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s-4)}
.vcard{display:grid;gap:var(--s-3)}
.vcard h3 a{color:var(--c-ink);text-decoration:none;font-family:var(--f-display);font-size:var(--fs-lg);font-weight:var(--fw-reg)}
.vcard h3 a:hover{text-decoration:underline}
.rank{font-family:var(--f-display);font-size:var(--fs-xl);color:var(--c-ink-3)}
.filters{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-5)}
label{font-size:var(--fs-sm);font-weight:var(--fw-med)}
select,input[type=text],input[type=number],textarea{font:inherit;min-height:var(--target-min);padding:0 var(--s-3);border:var(--hair) solid var(--c-rule-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink)}
textarea{padding:var(--s-3);width:100%;min-height:140px}
.field{display:grid;gap:var(--s-1);margin-bottom:var(--s-4)}
.wbar{display:grid;gap:2px}
.wbar .track{position:relative;height:12px;background:var(--c-surface-2);border-radius:var(--r-sm)}
.wbar .live{position:absolute;inset:0 auto 0 0;background:var(--c-ink-2);border-radius:var(--r-sm)}
.wbar .target{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--c-accent)}
.wbar .target::after{content:"";position:absolute;top:-4px;left:-3px;border:4px solid transparent;border-top-color:var(--c-accent)}
.tabs{display:flex;gap:0;overflow-x:auto;border-bottom:var(--hair) solid var(--c-rule);margin:var(--s-5) 0}
.tabs a{white-space:nowrap;display:inline-flex;align-items:center;min-height:var(--target-min);padding:0 var(--s-3);color:var(--c-ink-2);text-decoration:none;font-size:var(--fs-sm)}
.tabs a[aria-current]{color:var(--c-ink);box-shadow:inset 0 -2px 0 var(--c-accent);font-weight:var(--fw-med)}
section.panel{scroll-margin-top:var(--s-6);margin-bottom:var(--s-7)}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:var(--s-3);align-items:start}
.steps .ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-sm);border:2px solid var(--c-rule-strong);font-weight:var(--fw-bold)}
.steps .done .ico{background:var(--c-ok);border-color:var(--c-ok);color:var(--c-surface)}
.steps .active .ico{border-color:var(--c-accent);color:var(--c-accent)}
.steps .retry .ico{border-color:var(--c-warn);color:var(--c-warn)}
.steps .fail .ico{border-color:var(--c-danger);color:var(--c-danger)}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-ok);animation:p 1.6s infinite}
@keyframes p{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.pulse{animation:none}}
.wizard-nav{list-style:none;padding:0;margin:0 0 var(--s-5);display:flex;gap:var(--s-1);flex-wrap:wrap;counter-reset:w}
.wizard-nav li a{display:inline-flex;min-height:var(--target-min);align-items:center;padding:0 var(--s-3);font-size:var(--fs-sm);color:var(--c-ink-3);text-decoration:none;border-bottom:2px solid var(--c-rule)}
.wizard-nav li a[aria-current]{color:var(--c-ink);border-color:var(--c-accent);font-weight:var(--fw-med)}
.wizard-nav li a.done{color:var(--c-ink-2);border-color:var(--c-ink-2)}
.band{position:relative;height:44px;margin:var(--s-2) 0}
.band .rail{position:absolute;left:0;right:0;top:20px;height:4px;background:var(--c-surface-2)}
.band .allowed{position:absolute;top:18px;height:8px;background:var(--c-accent-soft);border:1px solid var(--c-accent)}
.band .stop{position:absolute;top:8px;height:28px;width:0;border-left:3px solid var(--c-danger)}
.band .stop span{position:absolute;top:-16px;left:-14px;font-size:10px;color:var(--c-danger);white-space:nowrap}
.band .ai{position:absolute;top:10px;width:0;height:24px;border-left:2px dashed var(--c-ink-3)}
.band .knob{position:absolute;top:10px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--c-accent);border:3px solid var(--c-surface);box-shadow:var(--e-1)}
.amount{font-size:var(--fs-amount);font-weight:var(--fw-reg);border:0;border-bottom:var(--hair) solid var(--c-rule-strong);width:100%;background:transparent;color:var(--c-ink);font-family:var(--f-display);min-height:72px}
.seg{display:inline-flex;border:var(--hair) solid var(--c-rule-strong);border-radius:var(--r-md);overflow:hidden}
.seg a{min-height:var(--target-min);display:inline-flex;align-items:center;padding:0 var(--s-4);text-decoration:none;color:var(--c-ink-2);font-size:var(--fs-sm)}
.seg a[aria-current]{background:var(--c-ink);color:var(--c-bg)}
.sheet{max-width:520px;margin:0 auto}
.skel{background:linear-gradient(90deg,var(--c-surface-2),var(--c-rule),var(--c-surface-2));background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--r-sm);height:14px;margin:6px 0}
@keyframes sk{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}
.empty{text-align:center;padding:var(--s-8) var(--s-4)}
.empty .art{font-family:var(--f-display);font-size:64px;color:var(--c-ink-3)}
.countdown{font-family:var(--f-mono);font-size:var(--fs-lg)}
.chart{width:100%;height:auto;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
footer.state{border-top:var(--hair) solid var(--c-rule);padding:var(--s-4) 0;font-size:var(--fs-xs);color:var(--c-ink-3)}
footer.state a{margin-right:var(--s-3);display:inline-block;min-height:24px}

/* Fondue additions */
.draft-ribbon{position:fixed;top:12px;right:-38px;transform:rotate(45deg);background:var(--c-ink);color:var(--c-bg);font:600 12px/1 var(--f-mono);letter-spacing:.2em;padding:6px 48px;z-index:50;pointer-events:none}
.card{border-color:var(--c-rule)}
header.top{border-bottom-color:var(--c-brass)}
.pulse{background:var(--c-ember)}
.badge.ok{box-shadow:inset 0 0 0 1px var(--c-brass)}
.stat b,td.n,.countdown{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
h1,h2,.display{font-weight:500}
.logo img{display:block}
html{accent-color:var(--c-ink)}

/* v2 bold DeFi layer */
body{background:var(--c-bg);background-image:linear-gradient(var(--c-rule) 1px,transparent 1px),linear-gradient(90deg,var(--c-rule) 1px,transparent 1px);background-size:64px 64px;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;background:var(--g-molten),radial-gradient(ellipse at 50% 30%,transparent 0,var(--c-bg) 75%);pointer-events:none;z-index:0}
header.top,main,footer,.beta{position:relative;z-index:1}
header.top{background:rgba(14,16,20,.85);backdrop-filter:blur(8px);border-bottom-color:var(--c-rule)}
.beta{background:transparent}
h1,h2,.display,.rank{font-family:var(--f-display);font-stretch:125%;font-weight:650;letter-spacing:-.02em}
h1{line-height:1.02}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--e-1)}
.btn{border-radius:var(--r-md);transition:transform var(--m-fast) var(--m-ease),filter var(--m-fast)}
.btn:hover{filter:brightness(1.1)} .btn:active{transform:translateY(1px)}
.btn.primary{box-shadow:0 0 0 1px var(--c-accent),0 0 24px rgba(200,255,61,.22)}
.stat b,td.n{font-family:var(--f-mono)}
.badge{border-radius:var(--r-sm)} .badge.neutral{background:var(--c-surface-2);color:var(--c-ink-2)}
.chip{background:transparent;color:var(--c-ink-2)}
nav.main a[aria-current],.tabs a[aria-current]{box-shadow:inset 0 -2px 0 var(--c-accent);color:var(--c-ink)}
.wbar .live{background:var(--c-ink-2)} .wbar .target{background:var(--c-accent)} .wbar .target::after{border-top-color:var(--c-accent)}
.band .allowed{background:var(--c-accent-soft);border-color:var(--c-accent)} .band .knob{background:var(--c-accent);border-color:var(--c-surface)}
.draft-ribbon{background:var(--c-accent);color:var(--c-accent-ink)}
.flash-up{animation:fu var(--m-price) var(--m-spring)} .flash-down{animation:fd var(--m-price) var(--m-spring)}
@keyframes fu{0%{background:rgba(61,220,151,.28);transform:translateY(-2px)}100%{background:transparent;transform:none}} @keyframes fd{0%{background:rgba(255,92,108,.28);transform:translateY(2px)}100%{background:transparent;transform:none}}
@media(prefers-reduced-motion:reduce){.flash-up,.flash-down{animation:none}}
.embed header.top,.embed .beta,.embed footer.state{display:none}
.embed main{padding:var(--s-5) 0}
.av{display:inline-block;line-height:0;vertical-align:middle}
.tier{font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:var(--r-sm);border:1px solid var(--c-rule-strong);color:var(--c-ink-2)}
.tier.chef,.tier.head-chef{border-color:var(--c-accent);color:var(--c-accent)} .tier.regular{border-color:var(--c-brass);color:#D9B57E}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s-3)}
.asset{padding:var(--s-4)} .asset .px{font:500 1.4rem var(--f-mono)} .asset .tk{font:500 var(--fs-sm) var(--f-mono);color:var(--c-accent)}
.featured .asset{border-color:rgba(198,255,58,.35)}
[aria-pressed=true]{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}

/* dip / ripple (hover + press) */
.btn,.card.asset,.vcard{position:relative;overflow:hidden}
.btn::after,.card.asset::after{content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(200,255,61,.28),rgba(176,141,87,.12) 60%,transparent 70%);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:width var(--m-dip) var(--m-viscous),height var(--m-dip) var(--m-viscous),opacity var(--m-dip) var(--m-viscous)}
.btn:active::after,.card.asset:active::after{width:260%;height:260%;opacity:1;transition-duration:0ms}
.card.asset,.vcard{transition:transform var(--m-dip) var(--m-spring),border-color var(--m-base)}
.card.asset:hover,.vcard:hover{transform:translateY(-3px);border-color:rgba(176,141,87,.6)}
.btn:hover{transform:translateY(-1px)}
.wbar .live{transition:width var(--m-price) var(--m-viscous)}
@media(prefers-reduced-motion:reduce){.card.asset:hover,.vcard:hover,.btn:hover{transform:none}.btn::after,.card.asset::after{display:none}}
/* ---- mobile app shell (Gen Z social pattern) ---- */
.app{max-width:440px;margin:0 auto;padding-bottom:150px}
.app h1{font-size:var(--fs-xl)}
.bal{font:500 2.6rem var(--f-mono);letter-spacing:-.03em;margin:0}
.breath{width:100%;height:120px;display:block}
.breath path.ln{stroke:var(--c-accent);stroke-width:2.5;fill:none;filter:drop-shadow(0 0 6px rgba(200,255,61,.45))}
.breath path.ar{fill:url(#bfill)}
.breath g.b{transform-origin:50% 100%;animation:breathe 4s var(--m-viscous) infinite alternate}
@keyframes breathe{to{transform:scaleY(1.04)}}
.chips{display:flex;gap:var(--s-2);overflow-x:auto;padding:var(--s-2) 0;scrollbar-width:none}
.chips a{white-space:nowrap}
.swipe{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s-2) 2px var(--s-4);scrollbar-width:none}
.swipe>*{scroll-snap-align:start}
.potcard{padding:var(--s-4);border-radius:18px;background:var(--g-molten),var(--c-surface)}
.potcard .ret{font:500 1.6rem var(--f-mono)}
.feed-item{display:grid;grid-template-columns:40px 1fr;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--c-rule)}
.feed-item .acts{display:flex;gap:var(--s-2);margin-top:var(--s-2)}
.actionbar{position:fixed;left:0;right:0;bottom:64px;z-index:20;display:flex;justify-content:center;pointer-events:none}
.actionbar .in{pointer-events:auto;display:flex;gap:var(--s-2);width:min(440px,100%);padding:var(--s-2) var(--s-4);background:linear-gradient(transparent,var(--c-bg) 40%)}
.actionbar .btn{flex:1;min-height:52px;border-radius:999px;font-size:1rem}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:21;background:rgba(21,23,28,.92);backdrop-filter:blur(12px);border-top:1px solid var(--c-rule)}
.tabbar ul{display:flex;justify-content:space-around;max-width:440px;margin:0 auto;padding:0;list-style:none}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;min-height:56px;justify-content:center;font-size:11px;color:var(--c-ink-3);text-decoration:none}
.tabbar a[aria-current]{color:var(--c-accent)}
.tabbar svg{width:22px;height:22px}
.seg-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-3);border-radius:999px;border:1px solid var(--c-rule-strong);color:var(--c-ink-2);text-decoration:none;font-size:var(--fs-sm)}
.seg-chip[aria-current]{background:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink)}
.lbrow{display:grid;grid-template-columns:28px 40px 1fr auto;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;border-bottom:1px solid var(--c-rule)}
@media(prefers-reduced-motion:reduce){.breath g.b{animation:none}}

/* ---- Logo treatment (kit-v2/logo-treatment/RULES.md) ---- */
header.top .wrap{min-height:64px}
header.top .logo{display:inline-flex;align-items:center;padding:16px;margin-left:-16px;box-shadow:none!important;border:0;background:none}
header.top .logo:hover,header.top .logo:focus-visible{box-shadow:none}
header.top .logo .fd-logo{display:block;filter:none!important;animation:none!important}
.fd-logo--header-sm{display:none!important}
@media(max-width:599px){.fd-logo--header-lg{display:none!important}.fd-logo--header-sm{display:block!important}header.top .logo{padding:14px;margin-left:-14px}}
nav.main{margin-left:48px}            /* first nav item >= 1.5H from lockup */
header.top .logo[aria-current]{box-shadow:none}  /* no underline under the lockup */
.fd-logo{filter:none;animation:none;user-select:none}
.fd-logo--card{height:48px;width:auto;margin:24px}
.fd-logo--statement{height:24px;width:auto;margin:2px 0}
/* DRAFT ribbon: keep clear of top-right controls (avatar) */
.draft-ribbon{top:0;right:auto;left:50%;bottom:auto;transform:translateX(-50%);padding:3px 12px;font-size:10px;border-radius:0 0 6px 6px;letter-spacing:.24em} /* top-centre tag: clear of avatar (top-left), tab bar, and >=1H from the lockup */
/* kit-v2 filters (inlined from kit-v2/filters.svg): liquid only, never the logo */
.bots .stream{filter:url(#fd-goo)}
.bots .pot-surface,.bots use[href="#prop-pot"]{filter:url(#fd-molten)}
.btn.rippling{filter:url(#fd-ripple)}
@media(prefers-reduced-motion:reduce){.bots .stream,.bots use[href="#prop-pot"],.btn.rippling{filter:none}}
/* share card sits above the body vignette */
body>div[role=img]{position:relative;z-index:1}
/* landing embeds on narrow screens: cards stack instead of sliding sideways */
@media(max-width:700px){body.embed .swipe{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);overflow-x:visible;scroll-snap-type:none}
body.embed .chips{flex-wrap:wrap;overflow-x:visible}body.embed .tabs{flex-wrap:wrap;overflow-x:visible}}
html,body{overflow-x:clip}
body.embed{max-width:100%;touch-action:pan-y}body.embed *{max-width:100%;min-width:0}
@media(max-width:700px){body.embed .tablewrap{overflow-x:visible}body.embed .tablewrap table{width:100%;table-layout:fixed;font-size:12px}body.embed .tablewrap th,body.embed .tablewrap td{overflow-wrap:anywhere;padding-left:4px;padding-right:4px}}
/* DEMO marker on every showcase embed (replaces DRAFT) */
body.embed .draft-ribbon{top:10px;left:auto;right:10px;transform:none;border-radius:999px;padding:5px 12px;font:700 11px/1 var(--f-mono);letter-spacing:.2em;background:#C8FF3D;color:#15171C;box-shadow:0 0 0 1px rgba(21,23,28,.6),0 6px 20px -6px rgba(200,255,61,.6);z-index:60}
/* tier + achievements: tier chip on its own line, achievements as wrapping pills */
.meta-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:8px 0 0}
.meta-stack .ach{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.meta-stack .ach li{font:500 11px/1 var(--f-mono);letter-spacing:.04em;padding:6px 10px;border-radius:999px;background:rgba(242,238,230,.06);border:1px solid rgba(242,238,230,.12);color:var(--c-ink-2);white-space:nowrap}
.preview-center .meta-stack,.center .meta-stack{align-items:center}.center .meta-stack .ach{justify-content:center}
.meta-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.meta-quote{margin:4px 0 0}
/* 8px spacing scale for demo embeds: 12px step snaps to 16; consistent card padding (16 mobile / 24 desktop) */
body.embed{--s-3:16px}
body.embed .card{padding:var(--s-5)}
@media(max-width:600px){body.embed .card{padding:var(--s-4)}}
body.embed .ph-hold{gap:8px}body.embed .ph-hold div{padding:8px 12px}
body.embed .row{gap:var(--s-2)}
/* <720px app chrome on every embedded screen: one compact 56px header, bottom tab bar instead of text nav */
.tabbar-auto{display:none}
@media(max-width:719px){
 header.top .wrap{display:flex;align-items:center;gap:8px;height:56px;min-height:56px;padding:0 16px;flex-wrap:nowrap}
 header.top nav.main,header.top a[href="kyc.html"]{display:none!important}
 header.top .logo{padding:0;margin:0}
 header.top .fd-logo--header-lg{display:none!important}
 header.top .fd-logo,header.top .fd-logo--header-sm{display:block!important;height:24px!important;width:auto}
 header.top .btn{min-height:32px;height:32px;padding:0 12px;font-size:12px;border-radius:999px;white-space:nowrap}
 .beta{font-size:11px;line-height:16px;padding:6px 0}.beta .wrap{padding:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 main>.wrap,main .wrap{padding-left:16px;padding-right:16px}
 main .wrap>p.muted:first-child,main .wrap>.back,main .wrap>a:first-child{margin-top:16px}
 .tabbar-auto{display:block}
 body:has(.tabbar){padding-bottom:calc(56px + env(safe-area-inset-bottom) + 16px)}
}
/* every screen <720px: nothing wider than the frame */
@media(max-width:719px){
 select,input,textarea,img,video,canvas,svg,table,pre{max-width:100%}
 .grid>*,.g2>*,.g3>*,.card,.row>*{min-width:0}
 table{width:100%;table-layout:fixed}th,td{overflow-wrap:anywhere;word-break:normal;padding-left:4px;padding-right:4px;font-size:12px}
 .tablewrap{overflow-x:visible}
}
/* sticky action bar: clear the content above it and the tab bar; desktop never shows it */

body:has(.actionbar) main{padding-bottom:calc(52px + 16px + 64px + 16px)}
@media(min-width:720px){.actionbar{display:none!important}body:has(.actionbar) main{padding-bottom:0}}